@cube-dev/ui-kit 0.65.1 → 0.66.0

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

@@ -0,0 +1,457 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.66.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSyncRef } from '@react-aria/utils';
+import { useDOMRef } from '@react-spectrum/utils';
+import React, { useCallback, useMemo, useRef, useState, } from 'react';
+import { useFilter, useMenu } from 'react-aria';
+// Import Item and Section from Menu for CommandMenu compound component
+import { Item, Section, useTreeState } from 'react-stately';
+import { LoadingIcon } from '../../../icons';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../../tasty';
+import { mergeProps } from '../../../utils/react';
+import { useDialogContext } from '../../overlays/Dialog/context';
+import { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider';
+import { 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 { StyledCommandMenu, StyledEmptyState, StyledLoadingWrapper, StyledMenuWrapper, StyledSearchInput, } from './styled';
+function CommandMenuBase(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 = 'small', qa, styles, selectedKeys, defaultSelectedKeys, onSelectionChange, header, footer, ...restMenuProps } = props;
+    const domRef = useDOMRef(ref);
+    const searchInputRef = useRef(null);
+    const contextProps = useMenuContext();
+    const dialogContext = useDialogContext();
+    // Convert string[] to Set<Key> for React Aria compatibility
+    const ariaSelectedKeys = selectedKeys ? new Set(selectedKeys) : undefined;
+    const ariaDefaultSelectedKeys = defaultSelectedKeys
+        ? new Set(defaultSelectedKeys)
+        : undefined;
+    const handleSelectionChange = onSelectionChange
+        ? (keys) => {
+            if (keys === 'all') {
+                // Handle 'all' selection case - collect all available keys
+                const allKeys = Array.from(treeState.collection.getKeys()).map((key) => String(key));
+                onSelectionChange(allKeys);
+            }
+            else if (keys instanceof Set) {
+                onSelectionChange(Array.from(keys).map((key) => String(key)));
+            }
+            else {
+                onSelectionChange([]);
+            }
+        }
+        : undefined;
+    const completeProps = mergeProps(contextProps, restMenuProps, {
+        selectedKeys: ariaSelectedKeys,
+        defaultSelectedKeys: ariaDefaultSelectedKeys,
+        onSelectionChange: handleSelectionChange,
+    });
+    // Search state management
+    const [internalSearchValue, setInternalSearchValue] = useState('');
+    const searchValue = controlledSearchValue ?? internalSearchValue;
+    const handleSearchChange = useCallback((value) => {
+        if (controlledSearchValue === undefined) {
+            setInternalSearchValue(value);
+        }
+        onSearchChange?.(value);
+    }, [controlledSearchValue, onSearchChange]);
+    // Filter setup
+    const { contains } = useFilter({ sensitivity: 'base' });
+    const textFilterFn = useMemo(() => customFilter || contains, [customFilter, contains]);
+    // Enhanced filter function that supports keywords and forceMount
+    const enhancedFilter = useCallback((textValue, inputValue, item) => {
+        // Always show force-mounted items
+        if (item?.forceMount) {
+            return true;
+        }
+        // If shouldFilter is false, show all items
+        if (!shouldFilter) {
+            return true;
+        }
+        // Split input value into individual words and filter out empty strings
+        const searchWords = inputValue
+            .trim()
+            .toLowerCase()
+            .split(/\s+/)
+            .filter((word) => word.length > 0);
+        // If no search words, show all items
+        if (searchWords.length === 0) {
+            return true;
+        }
+        // Collect all searchable text for this item
+        const searchableTexts = [];
+        // Add main text value
+        searchableTexts.push(textValue.toLowerCase());
+        // Add keywords if available
+        if (item?.keywords && Array.isArray(item.keywords)) {
+            searchableTexts.push(...item.keywords.map((keyword) => keyword.toLowerCase()));
+        }
+        // Check if ALL search words match at least one of the searchable texts
+        return searchWords.every((searchWord) => searchableTexts.some((text) => text.includes(searchWord)));
+    }, [shouldFilter]);
+    // Collection filter for React Stately
+    const collectionFilter = useCallback((nodes) => {
+        const term = searchValue.trim();
+        // If no search term, return all nodes
+        if (!term) {
+            return nodes;
+        }
+        // Split search term into words for multi-word filtering
+        const searchWords = term
+            .toLowerCase()
+            .split(/\s+/)
+            .filter((word) => word.length > 0);
+        // If no valid search words, return all nodes
+        if (searchWords.length === 0) {
+            return nodes;
+        }
+        // Recursive helper to filter sections and items
+        const filterNodes = (iter) => {
+            const result = [];
+            for (const node of iter) {
+                if (node.type === 'section') {
+                    const filteredChildren = filterNodes(node.childNodes);
+                    if (filteredChildren.length) {
+                        result.push({
+                            ...node,
+                            childNodes: filteredChildren,
+                        });
+                    }
+                }
+                else {
+                    const text = node.textValue ?? String(node.rendered ?? '');
+                    if (enhancedFilter(text, term, node.props)) {
+                        result.push(node);
+                    }
+                }
+            }
+            return result;
+        };
+        return filterNodes(nodes);
+    }, [searchValue, enhancedFilter]);
+    // Create tree state with filter for both keyboard navigation and rendering
+    const treeStateProps = {
+        ...completeProps,
+        filter: collectionFilter,
+        shouldUseVirtualFocus: true, // Always use virtual focus for CommandMenu
+    };
+    const treeState = useTreeState(treeStateProps);
+    const collectionItems = [...treeState.collection];
+    const hasSections = collectionItems.some((item) => item.type === 'section');
+    // Track focused key for aria-activedescendant
+    const [focusedKey, setFocusedKey] = React.useState(null);
+    // Apply filtering to collection items for rendering and empty state checks
+    const filteredCollectionItems = useMemo(() => {
+        const term = searchValue.trim();
+        if (!term) {
+            return collectionItems;
+        }
+        // Split search term into words for multi-word filtering
+        const searchWords = term
+            .toLowerCase()
+            .split(/\s+/)
+            .filter((word) => word.length > 0);
+        // If no valid search words, return all items
+        if (searchWords.length === 0) {
+            return collectionItems;
+        }
+        const filterNodes = (items) => {
+            const result = [];
+            [...items].forEach((item) => {
+                if (item.type === 'section') {
+                    const filteredChildren = filterNodes(item.childNodes);
+                    if (filteredChildren.length) {
+                        result.push({
+                            ...item,
+                            childNodes: filteredChildren,
+                        });
+                    }
+                }
+                else {
+                    const text = item.textValue ?? String(item.rendered ?? '');
+                    if (enhancedFilter(text, term, item.props)) {
+                        result.push(item);
+                    }
+                }
+            });
+            return result;
+        };
+        return filterNodes(collectionItems);
+    }, [collectionItems, searchValue, enhancedFilter]);
+    const hasFilteredItems = filteredCollectionItems.length > 0;
+    const viewHasSections = filteredCollectionItems.some((item) => item.type === 'section');
+    // Helper function to find the first selectable item from filtered results
+    const findFirstSelectableItem = useCallback(() => {
+        // Use the filtered collection items instead of the full tree state collection
+        for (const item of filteredCollectionItems) {
+            if (item &&
+                item.type === 'item' &&
+                !treeState.selectionManager.isDisabled(item.key)) {
+                return item.key;
+            }
+        }
+        return null;
+    }, [filteredCollectionItems, treeState.selectionManager]);
+    // Create a ref for the menu container
+    const menuRef = useRef(null);
+    // Use menu hook for accessibility
+    const { menuProps } = useMenu({
+        ...completeProps,
+        'aria-label': 'Command palette menu',
+        filter: collectionFilter,
+        shouldUseVirtualFocus: true,
+    }, treeState, menuRef);
+    // Manual rendering of menu items (similar to Menu component)
+    const renderedItems = useMemo(() => {
+        const items = [];
+        let isFirstSection = true;
+        filteredCollectionItems.forEach((item) => {
+            if (item.type === 'section') {
+                if (!isFirstSection) {
+                    items.push(_jsx(StyledDivider, { role: "separator", "aria-orientation": "horizontal" }, `divider-${String(item.key)}`));
+                }
+                items.push(_jsx(MenuSection, { item: item, state: treeState, styles: completeProps.sectionStyles, itemStyles: completeProps.itemStyles, headingStyles: completeProps.sectionHeadingStyles, selectionIcon: completeProps.selectionIcon, size: size }, item.key));
+                isFirstSection = false;
+                return;
+            }
+            let menuItem = (_jsx(MenuItem, { item: item, state: treeState, styles: completeProps.itemStyles, selectionIcon: completeProps.selectionIcon, size: size, onAction: item.onAction }, item.key));
+            // Apply tooltip wrapper if tooltip property is provided
+            if (item.props.tooltip) {
+                const tooltipProps = typeof item.props.tooltip === 'string'
+                    ? { title: item.props.tooltip }
+                    : item.props.tooltip;
+                menuItem = (_jsx(TooltipProvider, { activeWrap: true, placement: "right", ...tooltipProps, children: menuItem }, item.key));
+            }
+            // Apply custom wrapper if provided
+            if (item.props.wrapper) {
+                menuItem = item.props.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 }));
+        });
+        return items;
+    }, [
+        filteredCollectionItems,
+        treeState,
+        completeProps.sectionStyles,
+        completeProps.itemStyles,
+        completeProps.selectionIcon,
+        completeProps.sectionHeadingStyles,
+    ]);
+    // Auto-focus search input
+    React.useEffect(() => {
+        if (autoFocus && searchInputRef.current) {
+            // Use a small timeout to ensure the element is visible and focusable
+            // This is especially important when the CommandMenu is opened in a popover
+            const timeoutId = setTimeout(() => {
+                if (searchInputRef.current) {
+                    searchInputRef.current.focus();
+                }
+            }, 0);
+            return () => clearTimeout(timeoutId);
+        }
+    }, [autoFocus]);
+    // Also focus when the component becomes visible (for trigger/popover usage)
+    React.useEffect(() => {
+        // Check if autoFocus is enabled and we're in a trigger context
+        if (autoFocus && contextProps.autoFocus && searchInputRef.current) {
+            // Use a small timeout to ensure the popover is fully rendered
+            const timeoutId = setTimeout(() => {
+                if (searchInputRef.current) {
+                    searchInputRef.current.focus();
+                }
+            }, 50); // Slightly longer timeout for popover context
+            return () => clearTimeout(timeoutId);
+        }
+    }, [autoFocus, contextProps.autoFocus]);
+    // Auto-focus first item when search value changes (but not on initial render)
+    React.useEffect(() => {
+        // Only auto-focus when search value changes, not on initial mount
+        if (searchValue.trim() !== '') {
+            const firstSelectableKey = findFirstSelectableItem();
+            if (firstSelectableKey && hasFilteredItems) {
+                // Focus the first item in the selection manager
+                treeState.selectionManager.setFocusedKey(firstSelectableKey);
+                setFocusedKey(firstSelectableKey);
+            }
+            else {
+                // Clear focus if no items are available
+                treeState.selectionManager.setFocusedKey(null);
+                setFocusedKey(null);
+            }
+        }
+    }, [
+        searchValue,
+        findFirstSelectableItem,
+        hasFilteredItems,
+        treeState.selectionManager,
+    ]);
+    // Extract styles
+    const extractedStyles = useMemo(() => extractStyles(props, CONTAINER_STYLES), [props]);
+    // Determine if we should show empty state based on actual filtered collection
+    const hasSearchTerm = searchValue.trim().length > 0;
+    const showEmptyState = hasSearchTerm && !hasFilteredItems && !isLoading;
+    // Sync refs
+    useSyncRef(contextProps, menuRef);
+    const mods = useMemo(() => {
+        // Determine mods based on dialog context and menu context
+        let popoverMod = completeProps.mods?.popover || dialogContext?.type === 'popover';
+        let trayMod = completeProps.mods?.tray || dialogContext?.type === 'tray';
+        let modalMod = dialogContext?.type === 'modal';
+        return {
+            sections: viewHasSections,
+            footer: !!footer,
+            header: !!header,
+            popover: popoverMod,
+            tray: trayMod,
+            modal: modalMod,
+        };
+    }, [
+        viewHasSections,
+        footer,
+        header,
+        completeProps.mods,
+        dialogContext?.type,
+    ]);
+    return (_jsxs(StyledCommandMenu, { ...filterBaseProps(props), ref: domRef, qa: qa || 'CommandMenu', "data-size": size, mods: mods, styles: mergeProps(extractedStyles, styles), children: [header && (_jsx(StyledHeader, { role: "presentation", styles: headerStyles, children: header })), _jsx(StyledSearchInput, { ref: searchInputRef, type: "search", placeholder: searchPlaceholder, value: searchValue, styles: searchInputStyles, "data-size": size, "aria-controls": `${qa || 'CommandMenu'}-menu`, role: "combobox", "aria-expanded": "true", "aria-haspopup": "listbox", "aria-activedescendant": focusedKey != null
+                    ? `${qa || 'CommandMenu'}-menu-option-${focusedKey}`
+                    : undefined, onChange: (e) => handleSearchChange(e.target.value), onKeyDown: (e) => {
+                    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                        e.preventDefault();
+                        const isArrowDown = e.key === 'ArrowDown';
+                        const { selectionManager, collection } = treeState;
+                        const currentKey = selectionManager.focusedKey;
+                        // Helper function to find next selectable key in a direction
+                        const findNextSelectableKey = (startKey, direction) => {
+                            if (startKey == null) {
+                                return null;
+                            }
+                            // First check if the startKey itself is selectable
+                            const startNode = collection.getItem(startKey);
+                            if (startNode &&
+                                startNode.type === 'item' &&
+                                !selectionManager.isDisabled(startKey)) {
+                                return startKey;
+                            }
+                            // If startKey is not selectable, find the next selectable key
+                            let keys = [...collection.getKeys()];
+                            if (direction === 'backward') {
+                                keys = keys.reverse();
+                            }
+                            let startIndex = keys.indexOf(startKey);
+                            if (startIndex === -1) {
+                                return null;
+                            }
+                            for (let i = startIndex + 1; i < keys.length; i++) {
+                                const key = keys[i];
+                                const node = collection.getItem(key);
+                                if (node &&
+                                    node.type === 'item' &&
+                                    !selectionManager.isDisabled(key)) {
+                                    return key;
+                                }
+                            }
+                            return null;
+                        };
+                        // Helper function to find first or last selectable key
+                        const findFirstLastSelectableKey = (direction) => {
+                            const keys = [...collection.getKeys()];
+                            const keysToCheck = direction === 'forward' ? keys : keys.reverse();
+                            for (const key of keysToCheck) {
+                                const node = collection.getItem(key);
+                                if (node &&
+                                    node.type === 'item' &&
+                                    !selectionManager.isDisabled(key)) {
+                                    return key;
+                                }
+                            }
+                            return null;
+                        };
+                        let nextKey;
+                        const direction = isArrowDown ? 'forward' : 'backward';
+                        if (currentKey == null) {
+                            // No current focus, start from the first/last item
+                            nextKey = findFirstLastSelectableKey(direction);
+                        }
+                        else {
+                            // Find next selectable item from current position
+                            const candidateKey = direction === 'forward'
+                                ? collection.getKeyAfter(currentKey)
+                                : collection.getKeyBefore(currentKey);
+                            nextKey = findNextSelectableKey(candidateKey, direction);
+                            // If no next key found and focus wrapping is enabled, wrap to first/last selectable item
+                            if (nextKey == null) {
+                                nextKey = findFirstLastSelectableKey(direction);
+                            }
+                        }
+                        if (nextKey != null) {
+                            selectionManager.setFocusedKey(nextKey);
+                            setFocusedKey(nextKey);
+                        }
+                    }
+                    else if (e.key === 'Enter' ||
+                        (e.key === ' ' && !searchValue.trim())) {
+                        const currentFocusedKey = focusedKey || treeState.selectionManager.focusedKey;
+                        if (currentFocusedKey != null) {
+                            e.preventDefault();
+                            // Trigger action for the focused item (like Menu does)
+                            // First check if there's a selection mode, if so, handle selection
+                            if (treeState.selectionManager.selectionMode !== 'none') {
+                                treeState.selectionManager.select(currentFocusedKey, e);
+                            }
+                            else {
+                                // Default behavior: trigger action
+                                const node = treeState.collection.getItem(currentFocusedKey);
+                                if (node) {
+                                    // Call the tree state's action handler
+                                    const onAction = completeProps.onAction;
+                                    if (onAction) {
+                                        onAction(currentFocusedKey);
+                                    }
+                                    // Also call the item's individual onAction if it exists
+                                    if (node.props?.onAction) {
+                                        node.props.onAction(currentFocusedKey);
+                                    }
+                                }
+                            }
+                            // Close the menu if we're in a trigger context and closeOnSelect is enabled (default behavior)
+                            const { onClose, closeOnSelect } = contextProps;
+                            if (onClose && closeOnSelect !== false) {
+                                onClose();
+                            }
+                        }
+                    }
+                    else if (e.key === 'Escape') {
+                        if (searchValue) {
+                            e.preventDefault();
+                            handleSearchChange('');
+                        }
+                    }
+                } }), isLoading && (_jsx(StyledLoadingWrapper, { children: _jsx(LoadingIcon, { role: "progressbar", "aria-label": "Loading commands", "aria-hidden": false }) })), !isLoading && !showEmptyState && (_jsx(StyledMenuWrapper, { 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", styles: footerStyles, children: footer }))] }));
+}
+// forwardRef doesn't support generic parameters, so cast the result to the correct type
+const _CommandMenu = React.forwardRef(CommandMenuBase);
+// Attach Trigger alias from MenuTrigger for consistent API
+// Also attach Item and Section for compound component pattern
+const __CommandMenu = Object.assign(_CommandMenu, {
+    Trigger: MenuTrigger,
+    Item,
+    Section,
+    displayName: 'CommandMenu',
+});
+export { __CommandMenu as CommandMenu };
+
+        

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

@@ -0,0 +1,11 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.66.0
+ * Released under the MIT license.
+ */
+
+// Barrel file for CommandMenu component
+export { CommandMenu } from './CommandMenu';
+
+        

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

@@ -0,0 +1,110 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.66.0
+ * Released under the MIT license.
+ */
+
+import { tasty } from '../../../tasty';
+export const StyledCommandMenu = tasty({
+    qa: 'CommandMenu',
+    styles: {
+        display: 'grid',
+        flow: 'row',
+        gridColumns: 'minmax(0, 1fr)',
+        gridRows: {
+            '': 'max-content minmax(0, 1fr)',
+            header: 'max-content max-content minmax(0, 1fr)',
+            footer: 'max-content minmax(0, 1fr) max-content max-content',
+            'header & footer': 'max-content max-content minmax(0, 1fr) max-content max-content',
+        },
+        placeContent: 'stretch',
+        placeItems: 'stretch',
+        fill: '#white',
+        border: '#border',
+        radius: '(1cr + 1bw)',
+        shadow: {
+            '': false,
+            'popover | tray': '0px 5px 15px #dark.05',
+        },
+        overflow: 'hidden',
+        width: '20x 50x',
+        height: {
+            '': 'initial',
+            popover: 'initial max-content (50vh - 4x)',
+            tray: 'initial max-content (100vh - 4x)',
+        },
+    },
+});
+export const StyledSearchInput = tasty({
+    qa: 'SearchInput',
+    as: 'input',
+    styles: {
+        display: 'flex',
+        width: '100%',
+        color: '#dark',
+        fill: '#white',
+        border: '#border bottom',
+        outline: 'none',
+        transition: 'theme',
+        radius: 0,
+        padding: '@vertical-padding @right-padding @vertical-padding @left-padding',
+        textAlign: 'left',
+        reset: 'input',
+        preset: 't3',
+        margin: 0,
+        boxSizing: 'border-box',
+        userSelect: 'auto',
+        '@vertical-padding': {
+            '': '(.75x - 1bw)',
+            '[data-size="medium"]': '(1.25x - 1bw)',
+        },
+        '@left-padding': {
+            '': '1x',
+            '[data-size="medium"]': '1x',
+        },
+        '@right-padding': {
+            '': '1x',
+            '[data-size="medium"]': '1x',
+        },
+        '&::placeholder': {
+            color: '#dark-03',
+        },
+    },
+});
+export const StyledLoadingWrapper = tasty({
+    qa: 'LoadingWrapper',
+    styles: {
+        display: 'flex',
+        padding: '2x',
+        placeContent: 'center',
+        placeItems: 'center',
+        color: '#dark-03',
+    },
+});
+export const StyledEmptyState = tasty({
+    qa: 'EmptyState',
+    styles: {
+        display: 'flex',
+        padding: '2x',
+        placeContent: 'center',
+        placeItems: 'center',
+        color: '#dark-03',
+        preset: 't3',
+    },
+});
+export const StyledMenuWrapper = tasty({
+    qa: 'MenuWrapper',
+    styles: {
+        display: 'grid',
+        flow: 'row',
+        gridColumns: 'minmax(0, 1fr)',
+        placeContent: 'stretch',
+        placeItems: 'stretch',
+        width: '100%',
+        overflow: 'auto',
+        scrollbar: 'styled',
+    },
+});
+
+        

package/es/components/{pickers → actions}/Menu/Menu.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.65.1
+ * @cube-dev/ui-kit v0.66.0
  * Released under the MIT license.
  */
 
@@ -17,26 +17,52 @@ import { TooltipProvider, } from '../../overlays/Tooltip/TooltipProvider';
 import { useMenuContext } from './context';
 import { MenuItem } from './MenuItem';
 import { MenuSection } from './MenuSection';
-import { StyledDivider, StyledHeader, StyledMenu } from './styled';
+import { StyledDivider, StyledFooter, StyledHeader, StyledMenu, } from './styled';
 function Menu(props, ref) {
-    const { header, footer, itemStyles, sectionStyles, sectionHeadingStyles, selectionIcon, qa, ...rest } = props;
+    const { header, footer, itemStyles, sectionStyles, sectionHeadingStyles, selectionIcon, size = 'small', qa, selectedKeys, defaultSelectedKeys, onSelectionChange, ...rest } = props;
     const domRef = useDOMRef(ref);
     const contextProps = useMenuContext();
-    const completeProps = mergeProps(contextProps, rest);
+    // Convert string[] to Set<Key> for React Aria compatibility
+    const ariaSelectedKeys = selectedKeys ? new Set(selectedKeys) : undefined;
+    const ariaDefaultSelectedKeys = defaultSelectedKeys
+        ? new Set(defaultSelectedKeys)
+        : undefined;
+    const handleSelectionChange = onSelectionChange
+        ? (keys) => {
+            if (keys === 'all') {
+                // Handle 'all' selection case - collect all available keys
+                const allKeys = Array.from(state.collection.getKeys()).map((key) => String(key));
+                onSelectionChange(allKeys);
+            }
+            else if (keys instanceof Set) {
+                onSelectionChange(Array.from(keys).map((key) => String(key)));
+            }
+            else {
+                onSelectionChange([]);
+            }
+        }
+        : undefined;
+    const completeProps = mergeProps(contextProps, rest, {
+        selectedKeys: ariaSelectedKeys,
+        defaultSelectedKeys: ariaDefaultSelectedKeys,
+        onSelectionChange: handleSelectionChange,
+    });
     // Props used for collection building.
     const treeProps = completeProps;
     const state = useTreeState(treeProps);
     const collectionItems = [...state.collection];
     const hasSections = collectionItems.some((item) => item.type === 'section');
-    const { menuProps } = useMenu(treeProps, state, domRef);
+    const { menuProps } = useMenu(completeProps, state, domRef);
     const styles = useMemo(() => extractStyles(completeProps, CONTAINER_STYLES), [completeProps]);
     const defaultProps = {
         qa,
         styles,
+        'data-size': size,
         mods: {
             sections: hasSections,
             footer: !!footer,
             header: !!header,
+            popover: completeProps.mods?.popover,
         },
     };
     // Sync the ref stored in the context object with the DOM ref returned by useDOMRef.
@@ -51,11 +77,11 @@ function Menu(props, ref) {
                 if (!isFirstSection) {
                     items.push(_jsx(StyledDivider, { role: "separator", "aria-orientation": "horizontal" }, `divider-${String(item.key)}`));
                 }
-                items.push(_jsx(MenuSection, { item: item, state: state, styles: sectionStyles, itemStyles: itemStyles, headingStyles: sectionHeadingStyles, selectionIcon: selectionIcon }, item.key));
+                items.push(_jsx(MenuSection, { item: item, state: state, styles: sectionStyles, itemStyles: itemStyles, headingStyles: sectionHeadingStyles, selectionIcon: selectionIcon, size: size }, item.key));
                 isFirstSection = false;
                 return;
             }
-            let menuItem = (_jsx(MenuItem, { item: item, state: state, styles: itemStyles, selectionIcon: selectionIcon, onAction: item.onAction }, item.key));
+            let menuItem = (_jsx(MenuItem, { item: item, state: state, styles: itemStyles, selectionIcon: selectionIcon, size: size, onAction: item.onAction }, item.key));
             // Apply tooltip wrapper if tooltip property is provided
             if (item.props.tooltip) {
                 const tooltipProps = typeof item.props.tooltip === 'string'
@@ -79,7 +105,7 @@ function Menu(props, ref) {
         selectionIcon,
         sectionHeadingStyles,
     ]);
-    return (_jsxs(StyledMenu, { ...mergeProps(defaultProps, menuProps, filterBaseProps(completeProps)), ref: domRef, role: menuProps.role ?? 'menu', children: [header && _jsx(StyledHeader, { role: "presentation", children: header }), renderedItems] }));
+    return (_jsxs(StyledMenu, { ...mergeProps(defaultProps, menuProps, filterBaseProps(completeProps)), ref: domRef, role: menuProps.role ?? 'menu', children: [header && _jsx(StyledHeader, { role: "presentation", children: header }), renderedItems, footer && _jsx(StyledFooter, { role: "presentation", children: footer })] }));
 }
 // forwardRef doesn't support generic parameters, so cast the result to the correct type
 // https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref