@cube-dev/ui-kit 0.71.2 → 0.72.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @cube-dev/ui-kit
 
+## 0.72.1
+
+### Patch Changes
+
+- [#750](https://github.com/cube-js/cube-ui-kit/pull/750) [`0ee6ac95`](https://github.com/cube-js/cube-ui-kit/commit/0ee6ac958946c5621a847d7982f16267b4d29526) Thanks [@tenphi](https://github.com/tenphi)! - Fix \$label-width definition in Label component.
+
+## 0.72.0
+
+### Minor Changes
+
+- [#747](https://github.com/cube-js/cube-ui-kit/pull/747) [`27dc51b2`](https://github.com/cube-js/cube-ui-kit/commit/27dc51b2c3ab08693b02892f38787a3e90e238b9) Thanks [@tenphi](https://github.com/tenphi)! - New syntax for custom properties with fallback: `($prop-name, <fallback_value>)`.
+
+### Patch Changes
+
+- [#749](https://github.com/cube-js/cube-ui-kit/pull/749) [`6f40ed82`](https://github.com/cube-js/cube-ui-kit/commit/6f40ed82775976efecf7b2f99f7356c59b770284) Thanks [@tenphi](https://github.com/tenphi)! - Add SubMenuTrigger component for submenu support in Menu. CommandMenu is not supported.
+
 ## 0.71.2
 
 ### Patch Changes

package/es/_internal/hooks/index.js

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

package/es/components/actions/Action/Action.js

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.71.2
+ * @cube-dev/ui-kit v0.72.1
  * Released under the MIT license.
  */
 
@@ -17,9 +17,11 @@ import { TooltipProvider, } from '../../overlays/Tooltip/TooltipProvider';
 import { useMenuContext } from './context';
 import { MenuItem } from './MenuItem';
 import { MenuSection } from './MenuSection';
+import { MenuTrigger } from './MenuTrigger';
 import { StyledDivider, StyledFooter, StyledHeader, StyledMenu, StyledMenuWrapper, } from './styled';
+import { SubMenuTrigger } from './SubMenuTrigger';
 function Menu(props, ref) {
-    const { header, footer, menuStyles, headerStyles, footerStyles, itemStyles, sectionStyles, sectionHeadingStyles, selectionIcon, size = 'medium', qa, selectedKeys, defaultSelectedKeys, onSelectionChange, ...rest } = props;
+    const { header, footer, menuStyles, headerStyles, footerStyles, itemStyles, sectionStyles, sectionHeadingStyles, selectionIcon, size = 'medium', focusOnHover = false, qa, selectedKeys, defaultSelectedKeys, onSelectionChange, ...rest } = props;
     const domRef = useDOMRef(ref);
     const contextProps = useMenuContext();
     // Convert string[] to Set<Key> for React Aria compatibility
@@ -43,6 +45,7 @@ function Menu(props, ref) {
         }
         : undefined;
     const completeProps = mergeProps(contextProps, rest, {
+        focusOnHover,
         selectedKeys: ariaSelectedKeys,
         defaultSelectedKeys: ariaDefaultSelectedKeys,
         onSelectionChange: handleSelectionChange,
@@ -91,9 +94,13 @@ function Menu(props, ref) {
                 menuItem = (_jsx(TooltipProvider, { activeWrap: true, placement: "right", ...tooltipProps, children: menuItem }, item.key));
             }
             // Apply custom wrapper if provided
-            if (item.props.wrapper) {
+            if (item.props?.wrapper) {
                 menuItem = item.props.wrapper(menuItem);
             }
+            else if (item.wrapper) {
+                // Handle wrapper from collection nodes (e.g., SubMenuTrigger)
+                menuItem = item.wrapper(menuItem);
+            }
             // Ensure every child has a stable key, even if the wrapper component didn't set one.
             items.push(React.cloneElement(menuItem, { key: item.key }));
         });
@@ -124,6 +131,8 @@ const Section = Object.assign(BaseSection, {
 const __Menu = Object.assign(_Menu, {
     Item: Item,
     Section,
+    SubMenuTrigger,
+    Trigger: MenuTrigger,
     displayName: 'Menu',
 });
 __Menu.displayName = 'Menu';

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

@@ -1,22 +1,23 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.71.2
+ * @cube-dev/ui-kit v0.72.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconPointFilled } from '@tabler/icons-react';
-import { useRef } from 'react';
+import { useContext, useRef } from 'react';
 import { FocusRing, useMenuItem } from 'react-aria';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { CheckIcon } from '../../../icons';
+import { CheckIcon, RightIcon } from '../../../icons';
 import { ClearSlots, mergeProps, SlotProvider } from '../../../utils/react';
 import { HotKeys } from '../../content/HotKeys';
 import { Text } from '../../content/Text';
 import { Space } from '../../layout/Space';
 import { useMenuContext } from './context';
 import { StyledItem } from './styled';
+import { SubmenuTriggerContext } from './SubmenuTriggerContext';
 // Returns icon corresponding to selection type
 const getSelectionTypeIcon = (selectionIcon) => {
     switch (selectionIcon) {
@@ -36,25 +37,31 @@ export function MenuItem(props) {
     const { item, state, styles, selectionIcon, isVirtualized, onAction, size } = props;
     const { onClose, closeOnSelect } = useMenuContext();
     const { rendered, key, props: itemProps } = item;
+    // Check if this item is wrapped in a SubmenuTriggerContext
+    const submenuContext = useContext(SubmenuTriggerContext);
     // Extract optional keyboard shortcut and CommandMenu-specific props from item props so they are not passed down to DOM elements.
     const { hotkeys, wrapper, keywords, forceMount, ...cleanItemProps } = (itemProps || {});
     const isSelectable = state.selectionManager.selectionMode !== 'none';
-    const isDisabledKey = state.disabledKeys.has(key);
+    const isDisabledKey = state.disabledKeys.has(key) || submenuContext?.isDisabled;
     const ref = useRef(null);
+    // Use the triggerRef from submenu context if present
+    const elementRef = (submenuContext?.triggerRef ?? ref);
     const { menuItemProps, labelProps, descriptionProps, keyboardShortcutProps, isFocused, isSelected, isPressed, isDisabled, } = useMenuItem({
         isSelected: state.selectionManager.isSelected(key),
         isDisabled: isDisabledKey,
         'aria-label': item['aria-label'],
         key,
-        onClose,
-        closeOnSelect,
+        onClose: submenuContext ? undefined : onClose, // Don't close menu for submenu triggers
+        closeOnSelect: submenuContext ? false : closeOnSelect, // Don't close on submenu trigger selection
         isVirtualized,
-        onAction,
-    }, state, ref);
+        onAction: submenuContext?.onAction || onAction,
+    }, state, elementRef);
     // Destructure presentation-related props from cleanItemProps so they are not spread onto DOM element
     const { postfix, description, icon, mods: itemMods, qa: itemQa, textValue, ...restCleanProps } = cleanItemProps;
-    // Build final postfix: custom postfix or HotKeys hint if provided and no explicit postfix
-    const finalPostfix = postfix ?? (hotkeys ? _jsx(HotKeys, { children: hotkeys }) : undefined);
+    // Build final postfix: submenu icon, custom postfix or HotKeys hint
+    const finalPostfix = submenuContext
+        ? postfix ?? _jsx(RightIcon, {})
+        : postfix ?? (hotkeys ? _jsx(HotKeys, { children: hotkeys }) : undefined);
     const checkIcon = isSelectable && isSelected
         ? getSelectionTypeIcon(selectionIcon)
         : undefined;
@@ -67,6 +74,7 @@ export function MenuItem(props) {
         selectable: isSelectable,
         selected: isSelected,
         disabled: isDisabled,
+        submenu: !!submenuContext,
     };
     // Register global hotkey if provided
     useHotkeys(typeof hotkeys === 'string' ? hotkeys.toLowerCase() : '', () => {
@@ -75,8 +83,8 @@ export function MenuItem(props) {
         if (isDisabledKey || isDisabled)
             return;
         // Simulate a click on the menu item so all existing handlers run
-        if (ref.current) {
-            ref.current.click();
+        if (elementRef.current) {
+            elementRef.current.click();
         }
     }, {
         enableOnContentEditable: true,
@@ -85,12 +93,27 @@ export function MenuItem(props) {
         enableOnFormTags: true,
     }, [hotkeys, isDisabledKey, isDisabled]);
     return (_jsx(FocusRing, { children: _jsx(StyledItem, { ...mergeProps(menuItemProps, restCleanProps, {
+                'data-menu-trigger': true,
                 qa: itemQa ? itemQa : `MenuItem-${key}`,
                 mods,
                 styles,
                 'aria-disabled': isDisabled || undefined,
                 'data-size': size,
-            }), ref: ref, children: _jsx(ClearSlots, { children: _jsxs(SlotProvider, { slots: {
+                'aria-haspopup': submenuContext ? 'menu' : undefined,
+                'aria-expanded': submenuContext?.isOpen,
+                'data-has-submenu': submenuContext ? true : undefined,
+                onKeyDown: submenuContext?.onKeyDown
+                    ? (e) => {
+                        // Call submenu handler first, if it prevents default, don't call the original
+                        submenuContext.onKeyDown?.(e);
+                        if (!e.defaultPrevented && menuItemProps.onKeyDown) {
+                            menuItemProps.onKeyDown(e);
+                        }
+                    }
+                    : menuItemProps.onKeyDown,
+                onMouseEnter: submenuContext?.onMouseEnter || menuItemProps.onMouseEnter,
+                onMouseLeave: submenuContext?.onMouseLeave || menuItemProps.onMouseLeave,
+            }), ref: elementRef, children: _jsx(ClearSlots, { children: _jsxs(SlotProvider, { slots: {
                         text: { className: 'itemLabel', ...labelProps },
                         end: { className: 'end', ...descriptionProps },
                         icon: { className: 'icon' },

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.71.2
+ * @cube-dev/ui-kit v0.72.1
  * Released under the MIT license.
  */
 
@@ -22,6 +22,7 @@ function MenuTrigger(props, ref) {
     const domRef = useDOMRef(ref);
     const menuTriggerRef = props.targetRef || domRef || triggerRef;
     const menuRef = useRef(null);
+    const wasOpenRef = useRef(false);
     const { children, shouldFlip = true, closeOnSelect, trigger = 'press', isDisabled, isDummy, } = props;
     // Generate a unique ID for this menu instance
     const menuId = useMemo(() => generateRandomId(), []);
@@ -48,6 +49,19 @@ function MenuTrigger(props, ref) {
             emit('menu:open', { menuId });
         }
     }, [state.isOpen, emit, menuId, isDummy]);
+    // Restore focus manually when the menu closes
+    useEffect(() => {
+        if (!state.isOpen && wasOpenRef.current && !isDummy) {
+            wasOpenRef.current = false;
+            // Use setTimeout to ensure focus restoration happens after any animations
+            setTimeout(() => {
+                menuTriggerRef.current?.focus();
+            }, 0);
+        }
+        else if (state.isOpen) {
+            wasOpenRef.current = true;
+        }
+    }, [state.isOpen, menuTriggerRef, isDummy]);
     if (typeof menuTrigger === 'function') {
         menuTrigger = menuTrigger(state);
     }
@@ -71,7 +85,7 @@ function MenuTrigger(props, ref) {
         ref: menuRef,
         onClose: state.close,
         closeOnSelect,
-        autoFocus: state.focusStrategy || true,
+        autoFocus: state.focusStrategy ?? 'first',
         style: isMobile
             ? {
                 width: '100%',
@@ -82,6 +96,7 @@ function MenuTrigger(props, ref) {
             popover: !isMobile,
             tray: isMobile,
         },
+        isClosing: !state.isOpen,
     };
     const contents = (_jsxs(_Fragment, { children: [_jsx(DismissButton, { onDismiss: state.close }), menu, _jsx(DismissButton, { onDismiss: state.close })] }));
     // On small screen devices, the menu is rendered in a tray, otherwise a popover.