@cube-dev/ui-kit 0.65.0 → 0.66.0

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

@@ -0,0 +1,127 @@
+/**
+ * @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, { useMemo } from 'react';
+import { useMenu } from 'react-aria';
+import { Item as BaseItem, Section as BaseSection, useTreeState, } from 'react-stately';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../../tasty';
+import { mergeProps } from '../../../utils/react';
+import { TooltipProvider, } from '../../overlays/Tooltip/TooltipProvider';
+import { useMenuContext } from './context';
+import { MenuItem } from './MenuItem';
+import { MenuSection } from './MenuSection';
+import { StyledDivider, StyledFooter, StyledHeader, StyledMenu, } from './styled';
+function Menu(props, ref) {
+    const { header, footer, itemStyles, sectionStyles, sectionHeadingStyles, selectionIcon, size = 'small', 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, {
+        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 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.
+    // 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, selectionIcon: selectionIcon, size: size }, item.key));
+                isFirstSection = false;
+                return;
+            }
+            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'
+                    ? { 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;
+    }, [
+        collectionItems,
+        state,
+        sectionStyles,
+        itemStyles,
+        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, 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
+const _Menu = React.forwardRef(Menu);
+const Item = Object.assign(BaseItem, {
+    displayName: 'Item',
+});
+const Section = Object.assign(BaseSection, {
+    displayName: 'Section',
+});
+const __Menu = Object.assign(_Menu, {
+    Item: Item,
+    Section,
+    displayName: 'Menu',
+});
+__Menu.displayName = 'Menu';
+export { __Menu as Menu };
+
+        

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

@@ -0,0 +1,101 @@
+/**
+ * @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 { IconPointFilled } from '@tabler/icons-react';
+import { useRef } from 'react';
+import { FocusRing, useMenuItem } from 'react-aria';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { CheckIcon } 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';
+// Returns icon corresponding to selection type
+const getSelectionTypeIcon = (selectionIcon) => {
+    switch (selectionIcon) {
+        case 'checkbox':
+            return _jsx(CheckIcon, {});
+        case 'radio':
+            return _jsx(IconPointFilled, {});
+        default:
+            return undefined;
+    }
+};
+// Normalise postfix rendering (string -> Text component)
+const getPostfix = (postfix) => typeof postfix === 'string' ? (_jsx(Text, { nowrap: true, color: "inherit", "data-element": "Postfix", children: postfix })) : (postfix);
+/** @private */
+export function MenuItem(props) {
+    const { item, state, styles, selectionIcon, isVirtualized, onAction, size } = props;
+    const { onClose, closeOnSelect } = useMenuContext();
+    const { rendered, key, props: itemProps } = item;
+    // 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);
+    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,
+        isVirtualized,
+        onAction,
+    }, state, ref);
+    // 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);
+    const checkIcon = isSelectable && isSelected
+        ? getSelectionTypeIcon(selectionIcon)
+        : undefined;
+    const isVirtualFocused = state.selectionManager.focusedKey === key;
+    const mods = {
+        ...itemMods,
+        focused: isFocused || isVirtualFocused,
+        pressed: isPressed,
+        selectionIcon: !!selectionIcon,
+        selectable: isSelectable,
+        selected: isSelected,
+        disabled: isDisabled,
+    };
+    // Register global hotkey if provided
+    useHotkeys(typeof hotkeys === 'string' ? hotkeys.toLowerCase() : '', () => {
+        if (!hotkeys)
+            return;
+        if (isDisabledKey || isDisabled)
+            return;
+        // Simulate a click on the menu item so all existing handlers run
+        if (ref.current) {
+            ref.current.click();
+        }
+    }, {
+        enableOnContentEditable: true,
+        enabled: !!hotkeys,
+        preventDefault: true,
+        enableOnFormTags: true,
+    }, [hotkeys, isDisabledKey, isDisabled]);
+    return (_jsx(FocusRing, { children: _jsx(StyledItem, { ...mergeProps(menuItemProps, restCleanProps, {
+                qa: itemQa ? itemQa : `MenuItem-${key}`,
+                mods,
+                styles,
+                'aria-disabled': isDisabled || undefined,
+                'data-size': size,
+            }), ref: ref, children: _jsx(ClearSlots, { children: _jsxs(SlotProvider, { slots: {
+                        text: { className: 'itemLabel', ...labelProps },
+                        end: { className: 'end', ...descriptionProps },
+                        icon: { className: 'icon' },
+                        description: { className: 'description', ...descriptionProps },
+                        keyboard: { className: 'keyboard', ...keyboardShortcutProps },
+                    }, children: [checkIcon ? (_jsx("div", { "data-element": "ButtonIcon", children: checkIcon })) : null, icon ? _jsx("div", { "data-element": "ButtonIcon", children: icon }) : null, _jsxs(Space, { gap: "1x", placeContent: "space-between", overflow: "clip", width: "100%", children: [_jsxs(Space, { flow: "column", gap: "0", width: "100%", children: [_jsx(Text, { ellipsis: true, color: "inherit", children: rendered }), description ? (_jsx(Text, { nowrap: true, ellipsis: true, "data-element": "Description", preset: "t4", color: "#dark-03", children: description })) : null] }), finalPostfix && getPostfix(finalPostfix)] })] }) }) }) }));
+}
+
+        

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

@@ -1,28 +1,36 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.65.0
+ * @cube-dev/ui-kit v0.66.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';
 import { MenuItem } from './MenuItem';
 import { StyledMenu, StyledSection, StyledSectionHeading } from './styled';
 /** @private */
 export function MenuSection(props) {
-    const { item, state, styles, itemStyles, headingStyles } = 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, styles: headingStyles, children: heading })), _jsx(StyledMenu, { ...groupProps, mods: { section: true }, children: [...item.childNodes].map((node) => {
-                        let item = (_jsx(MenuItem, { item: node, styles: itemStyles, state: state, onAction: node.onAction }, node.key));
+                        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) {
-                            item = node.props.wrapper(item);
+                            menuItem = node.props.wrapper(menuItem);
                         }
-                        return item;
+                        return menuItem;
                     }) })] }) }));
 }
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.65.0
+ * @cube-dev/ui-kit v0.66.0
  * Released under the MIT license.
  */
 
@@ -70,6 +70,7 @@ function MenuTrigger(props, ref) {
             : undefined,
         mods: {
             popover: !isMobile,
+            tray: isMobile,
         },
     };
     const contents = (_jsxs(_Fragment, { children: [_jsx(DismissButton, { onDismiss: state.close }), menu, _jsx(DismissButton, { onDismiss: state.close })] }));

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

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

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

@@ -0,0 +1,17 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.66.0
+ * Released under the MIT license.
+ */
+
+export * from './Menu';
+export * from './MenuTrigger';
+export * from './MenuItem';
+export * from './MenuSection';
+export * from './context';
+// Re-export the main components
+export { Menu } from './Menu';
+export { MenuTrigger } from './MenuTrigger';
+
+        

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

@@ -0,0 +1,173 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.66.0
+ * Released under the MIT license.
+ */
+
+import { DEFAULT_BUTTON_STYLES, DEFAULT_NEUTRAL_STYLES } from '..';
+import { tasty } from '../../../tasty';
+import { Space } from '../../layout/Space';
+export const StyledMenu = tasty({
+    as: 'ul',
+    qa: 'Menu',
+    styles: {
+        display: 'flex',
+        flow: 'column',
+        gap: {
+            '': '1bw',
+            sections: false,
+        },
+        fill: '#white',
+        margin: 0,
+        padding: {
+            '': '0.5x',
+            section: 0, // section menu
+        },
+        overflow: {
+            '': 'auto',
+            section: '',
+        },
+        border: {
+            '': '#border',
+            section: false,
+        },
+        radius: '(1cr + 1bw)',
+        boxShadow: {
+            '': '',
+            popover: '0px 5px 15px #dark.05',
+        },
+        scrollbar: 'styled',
+    },
+});
+export const StyledDivider = tasty({
+    qa: 'Divider',
+    as: 'li',
+    styles: {
+        display: 'flex',
+        flow: 'column',
+        margin: '.5x',
+        listStyle: 'none',
+        fill: '#border',
+        height: '1bw',
+        flexShrink: 0,
+    },
+});
+export const StyledHeader = tasty(Space, {
+    qa: 'Header',
+    as: 'div',
+    styles: {
+        color: '#dark-02',
+        preset: 't3',
+        placeContent: 'space-between',
+        placeItems: 'center',
+        whiteSpace: 'nowrap',
+        padding: '.5x 1x',
+        height: 'min 4x',
+    },
+});
+export const StyledFooter = tasty(Space, {
+    qa: 'Footer',
+    as: 'div',
+    styles: {
+        color: '#dark-02',
+        preset: 't3',
+        border: '#border top',
+        placeContent: 'space-between',
+        placeItems: 'center',
+        whiteSpace: 'nowrap',
+        padding: '.5x 1x',
+        height: 'min 4x',
+    },
+});
+export const StyledSection = tasty({
+    qa: 'Section',
+    as: 'li',
+    styles: {
+        display: 'flex',
+        flow: 'column',
+        margin: '0',
+        padding: '0',
+        listStyle: 'none',
+        fill: '#white',
+    },
+});
+export const StyledItem = tasty({
+    qa: 'Item',
+    as: 'li',
+    styles: {
+        // Base button-like styles merged from Action/Button defaults
+        ...DEFAULT_BUTTON_STYLES,
+        ...DEFAULT_NEUTRAL_STYLES,
+        // Override specifics for menu context
+        display: 'flex',
+        flow: 'row',
+        justifyContent: 'stretch',
+        listStyle: 'none',
+        flexShrink: 0,
+        height: {
+            '': 'min 4x',
+            '[data-size="medium"]': 'min 5x',
+        },
+        border: false,
+        boxSizing: 'border-box',
+        fill: {
+            '': '#clear',
+            focused: '#dark.03',
+            selected: '#dark.06',
+            'selected & focused': '#dark.09',
+            pressed: '#dark.06',
+            disabled: '#clear',
+        },
+        color: {
+            '': '#dark-02',
+            'selected | pressed': '#dark',
+            disabled: '#dark-04',
+        },
+        cursor: {
+            '': 'pointer',
+            disabled: 'default',
+        },
+        shadow: '#clear',
+        padding: {
+            '': '.5x 1x',
+            'selectionIcon & selectable & !selected': '.5x 1x .5x (1x + 3x)',
+        },
+        gap: '.75x',
+        outline: false,
+        // Sub-elements reused from MenuButton styles
+        ButtonIcon: {
+            display: 'grid',
+            fontSize: '@icon-size',
+            width: '@icon-size',
+            height: '@icon-size',
+            placeSelf: 'center',
+            placeItems: 'center',
+        },
+        Postfix: {
+            color: {
+                '': '#dark-03',
+                pressed: '#dark-02',
+                disabled: '#dark-04',
+            },
+        },
+        Description: {
+            preset: 't4',
+            color: '#dark-03',
+        },
+    },
+});
+export const StyledSectionHeading = tasty(Space, {
+    qa: 'SectionHeading',
+    as: 'div',
+    styles: {
+        color: '#dark-04',
+        preset: 'c2',
+        padding: '.5x 1x',
+        height: '3x',
+        placeContent: 'center space-between',
+        align: 'start',
+    },
+});
+
+        

package/es/components/actions/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.65.0
+ * @cube-dev/ui-kit v0.66.0
  * Released under the MIT license.
  */
 
@@ -10,6 +10,8 @@ import { ButtonGroup } from './ButtonGroup/ButtonGroup';
 const Button = Object.assign(__Button, { Group: ButtonGroup });
 export * from './Button';
 export * from './Action/Action';
+export * from './Menu';
+export * from './CommandMenu';
 export * from './use-action';
 export { Button, ButtonGroup };
 

package/es/components/actions/use-action.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/es/components/content/Content.js

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

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

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

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

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

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

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

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

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

package/es/components/content/Divider.js

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

package/es/components/content/Footer.js

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