@cube-dev/ui-kit 0.114.0 → 0.115.0

package/es/components/actions/ItemAction/ItemAction.js

@@ -1,184 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, } from 'react';
-import { DANGER_CLEAR_STYLES, DANGER_NEUTRAL_STYLES, DANGER_OUTLINE_STYLES, DANGER_PRIMARY_STYLES, DANGER_SECONDARY_STYLES, DEFAULT_CLEAR_STYLES, DEFAULT_NEUTRAL_STYLES, DEFAULT_OUTLINE_STYLES, DEFAULT_PRIMARY_STYLES, DEFAULT_SECONDARY_STYLES, ITEM_ACTION_BASE_STYLES, NOTE_CLEAR_STYLES, NOTE_NEUTRAL_STYLES, NOTE_OUTLINE_STYLES, NOTE_PRIMARY_STYLES, NOTE_SECONDARY_STYLES, SPECIAL_CLEAR_STYLES, SPECIAL_NEUTRAL_STYLES, SPECIAL_OUTLINE_STYLES, SPECIAL_PRIMARY_STYLES, SPECIAL_SECONDARY_STYLES, SUCCESS_CLEAR_STYLES, SUCCESS_NEUTRAL_STYLES, SUCCESS_OUTLINE_STYLES, SUCCESS_PRIMARY_STYLES, SUCCESS_SECONDARY_STYLES, WARNING_CLEAR_STYLES, WARNING_NEUTRAL_STYLES, WARNING_OUTLINE_STYLES, WARNING_PRIMARY_STYLES, WARNING_SECONDARY_STYLES, } from '../../../data/item-themes.js';
-import { CheckIcon } from '../../../icons/CheckIcon.js';
-import { LoadingIcon } from '../../../icons/LoadingIcon.js';
-import { tasty } from '../../../tasty/index.js';
-import { mergeProps } from '../../../utils/react/index.js';
-import { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider.js';
-import { useItemActionContext } from '../ItemActionContext.js';
-import { useAction } from '../use-action.js';
-const ItemActionElement = tasty({
-    qa: 'ItemAction',
-    styles: {
-        ...ITEM_ACTION_BASE_STYLES,
-        reset: 'button',
-        appearance: 'none',
-        touchAction: 'manipulation',
-        textDecoration: 'none',
-        outline: 0,
-        outlineOffset: 1,
-        cursor: { '': '$pointer', disabled: 'default' },
-        preset: {
-            '': 't4',
-            'size=xlarge': 't3m',
-        },
-        padding: {
-            '': '0 $inline-padding',
-            'has-icon': 0,
-            'has-icon & has-label': '0 $inline-padding 0 0',
-        },
-        '$inline-padding': {
-            '': 'max($min-inline-padding, (($action-size - 1lh - 2bw) / 2 + $inline-compensation))',
-            'size=inline': '.25x',
-        },
-        '$inline-compensation': '.5x',
-        '$min-inline-padding': '(.5x - 1bw)',
-        '$local-icon-size': '$icon-size',
-        Icon: {
-            $: '>',
-            ...ITEM_ACTION_BASE_STYLES.Icon,
-            '$icon-size': 'min($local-icon-size, ($action-size - .25x))',
-        },
-    },
-    variants: {
-        // Default theme
-        'default.primary': DEFAULT_PRIMARY_STYLES,
-        'default.secondary': DEFAULT_SECONDARY_STYLES,
-        'default.outline': DEFAULT_OUTLINE_STYLES,
-        'default.neutral': DEFAULT_NEUTRAL_STYLES,
-        'default.clear': DEFAULT_CLEAR_STYLES,
-        // Danger theme
-        'danger.primary': DANGER_PRIMARY_STYLES,
-        'danger.secondary': DANGER_SECONDARY_STYLES,
-        'danger.outline': DANGER_OUTLINE_STYLES,
-        'danger.neutral': DANGER_NEUTRAL_STYLES,
-        'danger.clear': DANGER_CLEAR_STYLES,
-        // Success theme
-        'success.primary': SUCCESS_PRIMARY_STYLES,
-        'success.secondary': SUCCESS_SECONDARY_STYLES,
-        'success.outline': SUCCESS_OUTLINE_STYLES,
-        'success.neutral': SUCCESS_NEUTRAL_STYLES,
-        'success.clear': SUCCESS_CLEAR_STYLES,
-        // Warning theme
-        'warning.primary': WARNING_PRIMARY_STYLES,
-        'warning.secondary': WARNING_SECONDARY_STYLES,
-        'warning.outline': WARNING_OUTLINE_STYLES,
-        'warning.neutral': WARNING_NEUTRAL_STYLES,
-        'warning.clear': WARNING_CLEAR_STYLES,
-        // Note theme
-        'note.primary': NOTE_PRIMARY_STYLES,
-        'note.secondary': NOTE_SECONDARY_STYLES,
-        'note.outline': NOTE_OUTLINE_STYLES,
-        'note.neutral': NOTE_NEUTRAL_STYLES,
-        'note.clear': NOTE_CLEAR_STYLES,
-        // Special theme
-        'special.primary': SPECIAL_PRIMARY_STYLES,
-        'special.secondary': SPECIAL_SECONDARY_STYLES,
-        'special.outline': SPECIAL_OUTLINE_STYLES,
-        'special.neutral': SPECIAL_NEUTRAL_STYLES,
-        'special.clear': SPECIAL_CLEAR_STYLES,
-    },
-});
-export const ItemAction = forwardRef(function ItemAction(allProps, ref) {
-    const { type: contextType, theme: contextTheme, disableActionsFocus, isDisabled: contextIsDisabled, } = useItemActionContext();
-    // Note: 'outline' type is only supported when explicitly provided, not from context
-    const { type = contextType === 'outline' ? 'neutral' : contextType ?? 'neutral', theme = contextTheme ?? 'default', icon, children, isLoading = false, isSelected = false, tooltip, mods, styles, isDisabled: isDisabledProp, ...rest } = allProps;
-    // Inherit disabled state from context, but allow local override
-    const isDisabled = isDisabledProp ?? contextIsDisabled;
-    // Determine if we should show checkbox
-    const hasCheckbox = icon === 'checkbox';
-    // Determine final icon (loading takes precedence)
-    const finalIcon = isLoading ? (_jsx(LoadingIcon, {})) : hasCheckbox ? (_jsx(CheckIcon, {})) : (icon);
-    // Build modifiers
-    const finalMods = useMemo(() => ({
-        checkbox: hasCheckbox,
-        selected: isSelected,
-        loading: isLoading,
-        'has-label': !!children,
-        context: !!contextType,
-        'has-icon': !!icon,
-        ...mods,
-    }), [hasCheckbox, isSelected, isLoading, children, contextType, mods]);
-    // Extract aria-label from tooltip if needed
-    const ariaLabel = useMemo(() => {
-        if (typeof tooltip === 'string') {
-            return tooltip;
-        }
-        if (typeof tooltip === 'object' && tooltip.title) {
-            return tooltip.title;
-        }
-        return rest['aria-label'];
-    }, [tooltip, rest]);
-    // Call useAction hook
-    const { actionProps } = useAction({
-        ...rest,
-        isDisabled,
-        'aria-label': ariaLabel,
-        mods: finalMods,
-        htmlType: 'button',
-    }, ref);
-    // Set tabIndex when in context
-    const finalTabIndex = disableActionsFocus ? -1 : rest.tabIndex;
-    // Determine if we should show tooltip (icon-only buttons)
-    const showTooltip = !children && tooltip;
-    // Extract tooltip content and props
-    const tooltipContent = useMemo(() => {
-        if (typeof tooltip === 'string') {
-            return tooltip;
-        }
-        if (typeof tooltip === 'object' && tooltip.title) {
-            return tooltip.title;
-        }
-        return undefined;
-    }, [tooltip]);
-    const tooltipProps = useMemo(() => {
-        if (typeof tooltip === 'object') {
-            const { title, ...rest } = tooltip;
-            return rest;
-        }
-        return {};
-    }, [tooltip]);
-    const finalType = useMemo(() => {
-        return theme !== 'default' && type === 'neutral' ? 'clear' : type;
-    }, [theme, type]);
-    // Render function that accepts tooltip trigger props and ref
-    const renderButton = (tooltipTriggerProps, tooltipRef) => {
-        // Merge tooltip ref with actionProps if provided
-        const mergedProps = tooltipRef
-            ? mergeProps(actionProps, tooltipTriggerProps || {}, {
-                ref: (element) => {
-                    // Set the tooltip ref
-                    if (tooltipRef) {
-                        tooltipRef.current = element;
-                    }
-                    // Set the action ref if it exists in actionProps
-                    const actionRef = actionProps.ref;
-                    if (actionRef) {
-                        if (typeof actionRef === 'function') {
-                            actionRef(element);
-                        }
-                        else {
-                            actionRef.current = element;
-                        }
-                    }
-                },
-            })
-            : mergeProps(actionProps, tooltipTriggerProps || {});
-        return (_jsxs(ItemActionElement, { ...mergedProps, variant: `${theme}.${finalType}`, "data-theme": theme, "data-type": finalType, tabIndex: finalTabIndex, styles: styles, children: [finalIcon && _jsx("div", { "data-element": "Icon", children: finalIcon }), children] }));
-    };
-    // Wrap with tooltip if needed
-    if (showTooltip && tooltipContent) {
-        return (_jsx(TooltipProvider, { title: tooltipContent, ...tooltipProps, children: (triggerProps, tooltipRef) => renderButton(triggerProps, tooltipRef) }));
-    }
-    return renderButton();
-});
-
-        

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

@@ -1,10 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-export { ItemAction } from './ItemAction.js';
-
-        

package/es/components/actions/ItemActionContext.js

@@ -1,30 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from 'react';
-const ItemActionContext = createContext(undefined);
-export function ItemActionProvider({ type, theme, disableActionsFocus, isDisabled, children, }) {
-    return (_jsx(ItemActionContext.Provider, { value: {
-            type: type === 'item' ||
-                type === 'outline' ||
-                type === 'header' ||
-                type === 'card'
-                ? 'neutral'
-                : type === 'secondary'
-                    ? 'clear'
-                    : type,
-            theme,
-            disableActionsFocus,
-            isDisabled,
-        }, children: children }));
-}
-export function useItemActionContext() {
-    return useContext(ItemActionContext) ?? {};
-}
-
-        

package/es/components/actions/ItemButton/ItemButton.js

@@ -1,158 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { useFocusWithin, useHover } from 'react-aria';
-import { tasty } from '../../../tasty/index.js';
-import { mergeProps } from '../../../utils/react/index.js';
-import { Item } from '../../content/Item/index.js';
-import { ItemBadge } from '../../content/ItemBadge/index.js';
-import { DisplayTransition } from '../../helpers/index.js';
-import { ItemAction } from '../ItemAction/index.js';
-import { ItemActionProvider } from '../ItemActionContext.js';
-import { useAction } from '../use-action.js';
-const StyledItem = tasty(Item, {
-    as: 'button',
-    type: 'neutral',
-    theme: 'default',
-    styles: {
-        reset: 'button',
-        appearance: 'none',
-        touchAction: 'manipulation',
-        textDecoration: 'none',
-        placeContent: 'center stretch',
-    },
-});
-const ActionsWrapper = tasty({
-    styles: {
-        display: 'grid',
-        position: 'relative',
-        placeContent: 'stretch',
-        placeItems: 'stretch',
-        $size: {
-            '': '$size-md',
-            'size=xsmall': '$size-xs',
-            'size=small': '$size-sm',
-            'size=medium': '$size-md',
-            'size=large': '$size-lg',
-            'size=xlarge': '$size-xl',
-        },
-        Actions: {
-            $: '>',
-            position: 'absolute',
-            inset: {
-                '': '1bw 1bw auto auto',
-                'type=card': '(1bw + .5x) (1bw + .5x) auto auto',
-            },
-            display: 'flex',
-            gap: '1bw',
-            placeItems: 'center',
-            placeContent: 'center end',
-            pointerEvents: {
-                '': 'auto',
-                '!actions-shown': 'none',
-            },
-            padding: '0 $side-padding',
-            height: 'min ($size - 2bw)',
-            opacity: {
-                '': 1,
-                '!actions-shown': 0,
-            },
-            translate: {
-                '': '0 0',
-                '!actions-shown': '.5x 0',
-            },
-            transition: 'theme, translate',
-            // Size for the action buttons
-            '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',
-            // Side padding for the button
-            '$side-padding': '(($size - $action-size - 2bw) / 2)',
-        },
-    },
-});
-const ItemButton = forwardRef(function ItemButton(allProps, ref) {
-    const { mods, to, htmlType, as, type = 'neutral', theme = 'default', onPress, 
-    // Extract react-aria press callbacks to prevent them from leaking to DOM via rest.
-    // These are handled by useButton inside useAction.
-    onPressStart: _onPressStart, onPressEnd: _onPressEnd, onPressChange: _onPressChange, onPressUp: _onPressUp, actions, size = 'medium', wrapperStyles, autoHideActions = false, disableActionsFocus = false, isDisabled, isLoading = false, ...rest } = allProps;
-    // Loading state makes the component disabled (same logic as Item)
-    const finalIsDisabled = isDisabled === true || (isLoading && isDisabled !== false);
-    const actionsRef = useRef(null);
-    const [actionsWidth, setActionsWidth] = useState(0);
-    const [areActionsVisible, setAreActionsVisible] = useState(false);
-    const [areActionsShown, setAreActionsShown] = useState(false);
-    useLayoutEffect(() => {
-        if (actions && actionsRef.current) {
-            const width = Math.round(actionsRef.current.offsetWidth);
-            if (width !== actionsWidth) {
-                setActionsWidth(width);
-            }
-        }
-    }, [actions, areActionsVisible]);
-    const [isFocusWithin, setIsFocusWithin] = useState(false);
-    const [hasPressed, setHasPressed] = useState(false);
-    const { hoverProps, isHovered } = useHover({});
-    const { focusWithinProps } = useFocusWithin({
-        onFocusWithinChange: setIsFocusWithin,
-    });
-    // Watch for data-pressed attribute on any descendant element
-    useLayoutEffect(() => {
-        const actionsEl = actionsRef.current;
-        if (!actionsEl || !autoHideActions)
-            return;
-        const checkPressed = () => {
-            setHasPressed(actionsEl.querySelector('[data-pressed]') !== null);
-        };
-        const observer = new MutationObserver(checkPressed);
-        observer.observe(actionsEl, {
-            attributes: true,
-            attributeFilter: ['data-pressed'],
-            subtree: true,
-        });
-        checkPressed();
-        return () => observer.disconnect();
-    }, [areActionsVisible, autoHideActions]);
-    const shouldShowActions = isHovered || isFocusWithin || hasPressed || !autoHideActions;
-    const { actionProps } = useAction({
-        ...allProps,
-        htmlType,
-        to,
-        as,
-        mods,
-        isDisabled: finalIsDisabled,
-    }, ref);
-    const finalMods = useMemo(() => {
-        return shouldShowActions ? { ...mods, 'actions-shown': true } : mods;
-    }, [mods, shouldShowActions]);
-    const button = (_jsx(StyledItem, { insideWrapper: !!actions, showActions: shouldShowActions, actions: actions ? true : undefined, ...mergeProps(rest, actionProps), htmlType: actionProps.type, type: type, theme: theme, size: size, isLoading: isLoading, isDisabled: isDisabled }));
-    if (actions) {
-        return (_jsxs(ActionsWrapper, { ...hoverProps, "data-size": size, "data-type": type, "data-theme": theme, mods: finalMods, styles: wrapperStyles, style: {
-                '--actions-width': areActionsVisible || !autoHideActions
-                    ? `${actionsWidth}px`
-                    : '0px',
-                ...(typeof size === 'number' && { '--size': `${size}px` }),
-            }, children: [button, _jsx(ItemActionProvider, { type: type, theme: theme, disableActionsFocus: disableActionsFocus, isDisabled: finalIsDisabled, children: autoHideActions ? (_jsx(DisplayTransition, { exposeUnmounted: true, isShown: shouldShowActions, onPhaseChange: (phase) => {
-                            setAreActionsVisible(phase !== 'unmounted');
-                        }, onToggle: (isShown) => {
-                            setAreActionsShown(isShown);
-                        }, children: ({ ref: transitionRef }) => {
-                            return (_jsx("div", { ...focusWithinProps, ref: (node) => {
-                                    actionsRef.current = node;
-                                    transitionRef(node);
-                                }, "data-element": "Actions", children: actions }));
-                        } })) : (_jsx("div", { ref: actionsRef, "data-element": "Actions", children: actions })) })] }));
-    }
-    return button;
-});
-const _ItemButton = Object.assign(ItemButton, {
-    Action: ItemAction,
-    Badge: ItemBadge,
-});
-export { _ItemButton as ItemButton };
-
-        

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

@@ -1,10 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-export * from './ItemButton.js';
-
-        

package/es/components/actions/Link/Link.js

@@ -1,15 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { Button } from '../../actions/index.js';
-export const Link = forwardRef(function Link(props, ref) {
-    return _jsx(Button, { type: "link", size: "inline", ...props, ref: ref });
-});
-
-        

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

@@ -1,136 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.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, { useMemo } from 'react';
-import { useMenu } from 'react-aria';
-import { Section as BaseSection, useTreeState } from 'react-stately';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../../tasty/index.js';
-import { mergeProps } from '../../../utils/react/index.js';
-import { CollectionItem } from '../../CollectionItem.js';
-import { useMenuContext } from './context.js';
-import { MenuItem } from './MenuItem.js';
-import { MenuSection } from './MenuSection.js';
-import { MenuTrigger } from './MenuTrigger.js';
-import { StyledDivider, StyledFooter, StyledHeader, StyledMenu, StyledMenuWrapper, } from './styled.js';
-import { SubMenuTrigger } from './SubMenuTrigger.js';
-function Menu(props, ref) {
-    const { header, footer, menuStyles, headerStyles, footerStyles, itemStyles, sectionStyles, sectionHeadingStyles, 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
-    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, {
-        focusOnHover,
-        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(completeProps, state, domRef);
-    const styles = useMemo(() => extractStyles(completeProps, CONTAINER_STYLES), [completeProps]);
-    const wrapperMods = useMemo(() => {
-        return {
-            popover: completeProps.mods?.popover,
-            footer: !!footer,
-            header: !!header,
-        };
-    }, [completeProps.mods?.popover, footer, header]);
-    const menuMods = useMemo(() => {
-        return {
-            sections: hasSections,
-        };
-    }, [hasSections]);
-    // Sync the ref stored in the context object with the DOM ref returned by useDOMRef.
-    // The helper from @react-aria/utils expects the context object as the first argument
-    // to keep it up-to-date, and a ref object as the second.
-    useSyncRef(contextProps, domRef);
-    const renderedItems = useMemo(() => {
-        const items = [];
-        let isFirstSection = true;
-        collectionItems.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: state, styles: sectionStyles, itemStyles: itemStyles, headingStyles: sectionHeadingStyles, size: size }, item.key));
-                isFirstSection = false;
-                return;
-            }
-            let menuItem = (_jsx(MenuItem, { item: item, state: state, styles: itemStyles, 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 = (
-            //     <TooltipProvider key={item.key} placement="right" {...tooltipProps}>
-            //       {menuItem}
-            //     </TooltipProvider>
-            //   );
-            // }
-            // Apply custom wrapper if provided
-            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 }));
-        });
-        return items;
-    }, [collectionItems, state, sectionStyles, itemStyles, sectionHeadingStyles]);
-    return (_jsxs(StyledMenuWrapper, { qa: qa, styles: styles, mods: wrapperMods, ...filterBaseProps(completeProps), children: [header ? (_jsx(StyledHeader, { "data-size": size, styles: headerStyles, children: header })) : (_jsx("div", { role: "presentation" })), _jsx(StyledMenu, { ...mergeProps({
-                    styles: menuStyles,
-                    'data-size': size,
-                    mods: menuMods,
-                }, menuProps), ref: domRef, role: menuProps.role ?? 'menu', children: renderedItems }), footer ? (_jsx(StyledFooter, { "data-size": size, styles: footerStyles, children: footer })) : (_jsx("div", { role: "presentation" }))] }));
-}
-// 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
-const _Menu = React.forwardRef(Menu);
-const Section = Object.assign(BaseSection, {
-    displayName: 'Section',
-});
-const __Menu = Object.assign(_Menu, {
-    Item: CollectionItem,
-    Section,
-    SubMenuTrigger,
-    Trigger: MenuTrigger,
-    displayName: 'Menu',
-});
-__Menu.displayName = 'Menu';
-export { __Menu as Menu };
-
-        

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

@@ -1,82 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useRef } from 'react';
-import { FocusRing, useMenuItem } from 'react-aria';
-import { RightIcon } from '../../../icons/index.js';
-import { mergeProps } from '../../../utils/react/index.js';
-import { filterCollectionItemProps } from '../../CollectionItem.js';
-import { Item } from '../../content/Item/Item.js';
-import { useMenuContext } from './context.js';
-import { SubmenuTriggerContext } from './SubmenuTriggerContext.js';
-/** @private */
-export function MenuItem(props) {
-    const { item, state, styles, 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);
-    // Filter out service props (react-stately and parent-handled props)
-    // All remaining props are safe to pass to Item component
-    const filteredItemProps = filterCollectionItemProps(itemProps);
-    // Extract specific props that need special handling
-    const { hotkeys, mods: itemMods, qa: itemQa } = filteredItemProps;
-    const isSelectable = state.selectionManager.selectionMode !== 'none';
-    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: submenuContext ? undefined : onClose, // Don't close menu for submenu triggers
-        closeOnSelect: submenuContext ? false : closeOnSelect, // Don't close on submenu trigger selection
-        isVirtualized,
-        onAction: submenuContext?.onAction || onAction,
-    }, state, elementRef);
-    // Selection indicator will be handled by Item component
-    const isVirtualFocused = state.selectionManager.focusedKey === key;
-    const mods = {
-        ...itemMods,
-        focused: isFocused || isVirtualFocused,
-        pressed: isPressed,
-        selected: isSelected,
-        disabled: isDisabled,
-        submenu: !!submenuContext,
-        menuitem: true,
-    };
-    return (_jsx(FocusRing, { children: _jsx(Item, { ...mergeProps(menuItemProps, filteredItemProps, {
-                'data-popover-trigger': true,
-                qa: itemQa ? itemQa : `MenuItem-${key}`,
-                mods,
-                styles,
-                'data-size': size,
-                as: 'li',
-                labelProps,
-                descriptionProps,
-                keyboardShortcutProps,
-                '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, disableActionsFocus: true, rightIcon: submenuContext ? _jsx(RightIcon, {}) : filteredItemProps.rightIcon, defaultTooltipPlacement: "right", isSelected: isSelectable ? isSelected : undefined, isDisabled: isDisabled, size: size === 'small' ? 'small' : 'medium', children: rendered }) }));
-}
-
-        

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

@@ -1,37 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMenuSection } from 'react-aria';
-import { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider.js';
-import { MenuItem } from './MenuItem.js';
-import { StyledMenu, StyledSection, StyledSectionHeading } from './styled.js';
-/** @private */
-export function MenuSection(props) {
-    const { item, state, styles, itemStyles, headingStyles, size } = props;
-    const heading = item.rendered;
-    const { itemProps, headingProps, groupProps } = useMenuSection({
-        heading,
-        'aria-label': item['aria-label'],
-    });
-    return (_jsx(_Fragment, { children: _jsxs(StyledSection, { ...itemProps, styles: styles, children: [heading && (_jsx(StyledSectionHeading, { ...headingProps, size: size, styles: headingStyles, children: heading })), _jsx(StyledMenu, { ...groupProps, mods: { section: true }, children: [...item.childNodes].map((node) => {
-                        let menuItem = (_jsx(MenuItem, { item: node, styles: itemStyles, state: state, size: size, onAction: node.onAction }, node.key));
-                        // Apply tooltip wrapper if tooltip property is provided
-                        if (node.props.tooltip) {
-                            const tooltipProps = typeof node.props.tooltip === 'string'
-                                ? { title: node.props.tooltip }
-                                : node.props.tooltip;
-                            menuItem = (_jsx(TooltipProvider, { activeWrap: true, placement: "right", ...tooltipProps, children: menuItem }, node.key));
-                        }
-                        if (node.props.wrapper) {
-                            menuItem = node.props.wrapper(menuItem);
-                        }
-                        return menuItem;
-                    }) })] }) }));
-}
-
-