@cube-dev/ui-kit 0.0.0-canary-a3aca12 → 0.0.0-canary-0b8a096

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cube-dev/ui-kit
 
+## 0.71.1
+
+### Patch Changes
+
+- [#742](https://github.com/cube-js/cube-ui-kit/pull/742) [`c383d295`](https://github.com/cube-js/cube-ui-kit/commit/c383d295c9a5d30c2931ccbb628d27d4b22715e3) Thanks [@tenphi](https://github.com/tenphi)! - Fix the FilterPicker sorting behavior in controlled mode.
+
 ## 0.71.0
 
 ### Minor Changes

package/es/_internal/hooks/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * Released under the MIT license.
  */
 
@@ -16,11 +16,12 @@ import { LoadingIcon } from '../../../icons';
 import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
 import { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider';
-import { useMenuContext } from '../Menu';
+import { MenuContext, useMenuContext } from '../Menu';
 import { MenuItem } from '../Menu/MenuItem';
 import { MenuSection } from '../Menu/MenuSection';
 import { MenuTrigger } from '../Menu/MenuTrigger';
 import { StyledDivider, StyledFooter, StyledHeader, StyledMenu, } from '../Menu/styled';
+import { SubMenuTrigger } from '../Menu/SubMenuTrigger';
 import { StyledCommandMenu, StyledEmptyState, StyledLoadingWrapper, StyledSearchInput, } from './styled';
 function CommandMenu(props, ref) {
     const { searchPlaceholder = 'Search commands...', searchValue: controlledSearchValue, onSearchChange, filter: customFilter, emptyLabel = 'No commands found', searchInputStyles, headerStyles, footerStyles, isLoading = false, shouldFilter = true, autoFocus = true, size = 'medium', qa, styles, selectedKeys, defaultSelectedKeys, onSelectionChange, header, footer, ...restMenuProps } = props;
@@ -230,9 +231,13 @@ function CommandMenu(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 }));
         });
@@ -303,6 +308,18 @@ function CommandMenu(props, ref) {
     const showEmptyState = hasSearchTerm && !hasFilteredItems && !isLoading;
     // Sync refs
     useSyncRef(contextProps, menuRef);
+    // Create menu context for submenus
+    const commandMenuContext = useMemo(() => ({
+        ref: menuRef,
+        onClose: contextProps.onClose,
+        closeOnSelect: true,
+        autoFocus: false, // Search input should maintain focus
+        mods: {
+            popover: !!contextProps.mods?.popover,
+            tray: !!contextProps.mods?.tray,
+        },
+        isClosing: false, // CommandMenu doesn't have its own closing state
+    }), [contextProps, menuRef]);
     const mods = useMemo(() => {
         // Determine mods based on menu context
         let popoverMod = completeProps.mods?.popover;
@@ -432,12 +449,12 @@ function CommandMenu(props, ref) {
                             handleSearchChange('');
                         }
                     }
-                } }), isLoading && (_jsx(StyledLoadingWrapper, { children: _jsx(LoadingIcon, { role: "progressbar", "aria-label": "Loading commands", "aria-hidden": false }) })), !isLoading && !showEmptyState && (_jsx(StyledMenu, { ...menuProps, ref: menuRef, id: `${qa || 'CommandMenu'}-menu`, "aria-label": "Command menu", qa: "Menu", "data-size": size, mods: mods, styles: {
-                    border: 'none',
-                    boxShadow: 'none',
-                    radius: 0,
-                    padding: '0.5x',
-                }, children: renderedItems })), !isLoading && showEmptyState && (_jsx(StyledEmptyState, { children: emptyLabel })), footer && (_jsx(StyledFooter, { role: "presentation", "data-size": size, styles: footerStyles, children: footer }))] }));
+                } }), isLoading && (_jsx(StyledLoadingWrapper, { children: _jsx(LoadingIcon, { role: "progressbar", "aria-label": "Loading commands", "aria-hidden": false }) })), !isLoading && !showEmptyState && (_jsx(MenuContext.Provider, { value: commandMenuContext, children: _jsx(StyledMenu, { ...menuProps, ref: menuRef, id: `${qa || 'CommandMenu'}-menu`, "aria-label": "Command menu", qa: "Menu", "data-size": size, mods: mods, styles: {
+                        border: 'none',
+                        boxShadow: 'none',
+                        radius: 0,
+                        padding: '0.5x',
+                    }, children: renderedItems }) })), !isLoading && showEmptyState && (_jsx(StyledEmptyState, { children: emptyLabel })), footer && (_jsx(StyledFooter, { role: "presentation", "data-size": size, styles: footerStyles, children: footer }))] }));
 }
 // forwardRef doesn't support generic parameters, so cast the result to the correct type
 const _CommandMenu = React.forwardRef(CommandMenu);
@@ -445,6 +462,7 @@ const _CommandMenu = React.forwardRef(CommandMenu);
 // Also attach Item and Section for compound component pattern
 const __CommandMenu = Object.assign(_CommandMenu, {
     Trigger: MenuTrigger,
+    SubMenuTrigger,
     Item,
     Section,
     displayName: 'CommandMenu',

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * Released under the MIT license.
  */
 
@@ -17,7 +17,9 @@ 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 domRef = useDOMRef(ref);
@@ -91,9 +93,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 +130,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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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 React, { 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,11 +37,15 @@ 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 = React.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 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,
@@ -49,12 +54,14 @@ export function MenuItem(props) {
         onClose,
         closeOnSelect,
         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,
@@ -90,7 +98,13 @@ export function MenuItem(props) {
                 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 || 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * 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.0.0-canary-a3aca12
+ * @cube-dev/ui-kit v0.0.0-canary-0b8a096
  * Released under the MIT license.
  */
 
@@ -71,7 +71,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 +82,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.