@cube-dev/ui-kit 0.72.3 → 0.73.0

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.3
+ * @cube-dev/ui-kit v0.73.0
  * 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.72.3
+ * @cube-dev/ui-kit v0.73.0
  * 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.72.3
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 
@@ -224,11 +224,11 @@ function CommandMenu(props, ref) {
                 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));
+                items.push(_jsx(MenuSection, { item: item, state: treeState, styles: completeProps.sectionStyles, itemStyles: completeProps.itemStyles, headingStyles: completeProps.sectionHeadingStyles, 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));
+            let menuItem = (_jsx(MenuItem, { item: item, state: treeState, styles: completeProps.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'
@@ -249,7 +249,6 @@ function CommandMenu(props, ref) {
         treeState,
         completeProps.sectionStyles,
         completeProps.itemStyles,
-        completeProps.selectionIcon,
         completeProps.sectionHeadingStyles,
     ]);
     // Auto-focus search input

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.3
+ * @cube-dev/ui-kit v0.73.0
  * 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.72.3
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 
@@ -42,25 +42,31 @@ export const StyledSearchInput = tasty({
         display: 'grid',
         width: '100%',
         color: '#dark',
-        fill: '#white',
+        fill: '#clear',
         border: '#border bottom',
         outline: 'none',
         transition: 'theme',
         radius: 0,
-        padding: '.5x 1.5x',
         textAlign: 'left',
         reset: 'input',
         preset: 't3',
         margin: 0,
         boxSizing: 'border-box',
         userSelect: 'auto',
-        height: {
-            '': '$size-md $size-md',
-            '[data-size="large"]': '$size-lg $size-lg',
+        height: '($size + 1x)',
+        padding: {
+            '': '.5x $inline-padding',
+            prefix: '0 $inline-padding 0 .5x',
         },
-        '&::placeholder': {
-            color: '#dark-03',
+        $size: {
+            '': '$size-md',
+            '[data-size="small"]': '$size-sm',
+            '[data-size="medium"]': '$size-md',
+            '[data-size="large"]': '$size-lg',
         },
+        '$inline-padding': 'max($min-inline-padding, (($size - 1lh) / 2 + $inline-compensation))',
+        '$inline-compensation': '1x',
+        '$min-inline-padding': '1x',
     },
 });
 export const StyledLoadingWrapper = tasty({

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

@@ -0,0 +1,29 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.73.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { tasty } from '../../../tasty';
+import { mergeProps } from '../../../utils/react';
+import { ItemBase } from '../../content/ItemBase';
+import { useAction } from '../use-action';
+const StyledItemBase = tasty(ItemBase, {
+    as: 'button',
+    type: 'neutral',
+    theme: 'default',
+    styles: {
+        reset: 'button',
+        placeContent: 'center stretch',
+    },
+});
+export const ItemButton = forwardRef(function ItemButton(allProps, ref) {
+    const { mods, to, htmlType, buttonType, as, type, ...rest } = allProps;
+    const { actionProps } = useAction({ ...allProps, type: buttonType, to, htmlType, as, mods }, ref);
+    return (_jsx(StyledItemBase, { ...mergeProps(rest, actionProps), type: type, buttonType: actionProps.type }));
+});
+
+        

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.3
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 
@@ -10,10 +10,10 @@ 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 { 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 { Item } from '../../Item';
 import { useMenuContext } from './context';
 import { MenuItem } from './MenuItem';
 import { MenuSection } from './MenuSection';
@@ -21,7 +21,7 @@ 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', focusOnHover = false, qa, selectedKeys, defaultSelectedKeys, onSelectionChange, ...rest } = props;
+    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
@@ -81,18 +81,23 @@ 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, size: size }, 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, selectionIcon: selectionIcon, size: size, onAction: item.onAction }, item.key));
+            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 = (_jsx(TooltipProvider, { activeWrap: true, placement: "right", ...tooltipProps, children: menuItem }, item.key));
-            }
+            // 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);
@@ -105,14 +110,7 @@ function Menu(props, ref) {
             items.push(React.cloneElement(menuItem, { key: item.key }));
         });
         return items;
-    }, [
-        collectionItems,
-        state,
-        sectionStyles,
-        itemStyles,
-        selectionIcon,
-        sectionHeadingStyles,
-    ]);
+    }, [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,
@@ -122,14 +120,11 @@ function Menu(props, ref) {
 // 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,
+    Item,
     Section,
     SubMenuTrigger,
     Trigger: MenuTrigger,

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

@@ -1,40 +1,22 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.3
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconPointFilled } from '@tabler/icons-react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useRef } from 'react';
 import { FocusRing, useMenuItem } from 'react-aria';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { CheckIcon, RightIcon } from '../../../icons';
-import { ClearSlots, mergeProps, SlotProvider } from '../../../utils/react';
+import { RightIcon } from '../../../icons';
+import { mergeProps } from '../../../utils/react';
 import { HotKeys } from '../../content/HotKeys';
-import { Text } from '../../content/Text';
-import { Space } from '../../layout/Space';
+import { ItemBase } from '../../content/ItemBase/ItemBase';
 import { useMenuContext } from './context';
-import { StyledItem } from './styled';
 import { SubmenuTriggerContext } from './SubmenuTriggerContext';
-// Returns icon corresponding to selection type
-const getSelectionTypeIcon = (selectionIcon) => {
-    switch (selectionIcon) {
-        case 'checkmark':
-        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 { 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
@@ -57,48 +39,31 @@ export function MenuItem(props) {
         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: 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;
+    const { suffix, description, icon, tooltip, mods: itemMods, qa: itemQa, textValue, ...restCleanProps } = cleanItemProps;
+    // Build final suffix: submenu icon, custom suffix or HotKeys hint
+    const finalSuffix = submenuContext
+        ? suffix ?? _jsx(RightIcon, {})
+        : suffix ?? (hotkeys ? _jsx(HotKeys, { children: hotkeys }) : undefined);
+    // Selection indicator will be handled by ItemBase component
     const isVirtualFocused = state.selectionManager.focusedKey === key;
     const mods = {
         ...itemMods,
         focused: isFocused || isVirtualFocused,
         pressed: isPressed,
-        selectionIcon: !!selectionIcon,
-        selectable: isSelectable,
         selected: isSelected,
         disabled: isDisabled,
         submenu: !!submenuContext,
     };
-    // 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 (elementRef.current) {
-            elementRef.current.click();
-        }
-    }, {
-        enableOnContentEditable: true,
-        enabled: !!hotkeys,
-        preventDefault: true,
-        enableOnFormTags: true,
-    }, [hotkeys, isDisabledKey, isDisabled]);
-    return (_jsx(FocusRing, { children: _jsx(StyledItem, { ...mergeProps(menuItemProps, restCleanProps, {
-                'data-menu-trigger': true,
+    return (_jsx(FocusRing, { children: _jsx(ItemBase, { ...mergeProps(menuItemProps, restCleanProps, {
+                'data-popover-trigger': true,
                 qa: itemQa ? itemQa : `MenuItem-${key}`,
                 mods,
                 styles,
-                'aria-disabled': isDisabled || undefined,
                 'data-size': size,
+                as: 'li',
+                labelProps,
+                descriptionProps,
+                keyboardShortcutProps,
                 'aria-haspopup': submenuContext ? 'menu' : undefined,
                 'aria-expanded': submenuContext?.isOpen,
                 'data-has-submenu': submenuContext ? true : undefined,
@@ -113,13 +78,7 @@ export function MenuItem(props) {
                     : 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' },
-                        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)] })] }) }) }) }));
+            }), ref: elementRef, icon: icon, suffix: finalSuffix, description: description, hotkeys: hotkeys, tooltip: tooltip, defaultTooltipPlacement: "right", isSelected: isSelectable ? isSelected : undefined, isDisabled: isDisabled, size: size === 'small' ? 'small' : 'medium', children: rendered }) }));
 }
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.3
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 
@@ -18,7 +18,7 @@ export function MenuSection(props) {
         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) => {
+    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) {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.3
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 
@@ -106,7 +106,7 @@ function MenuTrigger(props, ref) {
     }
     else {
         overlay = (_jsx(Popover, { ref: menuPopoverRef, hideArrow: true, isNonModal: true, isOpen: state.isOpen, style: positionProps.style, placement: placement, shouldCloseOnInteractOutside: (el) => {
-                const menuTriggerEl = el.closest('[data-menu-trigger]');
+                const menuTriggerEl = el.closest('[data-popover-trigger]');
                 // If no menu trigger was clicked, allow closing
                 if (!menuTriggerEl)
                     return true;
@@ -124,7 +124,7 @@ function MenuTrigger(props, ref) {
                 return false;
             }, onClose: state.close, children: contents }));
     }
-    return (_jsxs(Fragment, { children: [_jsx(SlotProvider, { slots: { actionButton: { holdAffordance: trigger === 'longPress' } }, children: !isDummy ? (_jsx(PressResponder, { ...menuTriggerProps, ref: menuTriggerRef, "data-menu-trigger": true, isPressed: state.isOpen, children: menuTrigger })) : null }), _jsx(MenuContext.Provider, { value: menuContext, children: overlay })] }));
+    return (_jsxs(Fragment, { children: [_jsx(SlotProvider, { slots: { actionButton: { holdAffordance: trigger === 'longPress' } }, children: !isDummy ? (_jsx(PressResponder, { ...menuTriggerProps, ref: menuTriggerRef, "data-popover-trigger": true, isPressed: state.isOpen, children: menuTrigger })) : null }), _jsx(MenuContext.Provider, { value: menuContext, children: overlay })] }));
 }
 /**
  * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,

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

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

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

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

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

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

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

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

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

@@ -1,13 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.3
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 
-import { DEFAULT_BUTTON_STYLES, DEFAULT_NEUTRAL_STYLES } from '..';
+import { DEFAULT_NEUTRAL_STYLES } from '../../../data/item-themes';
 import { tasty } from '../../../tasty';
 import { Space } from '../../layout/Space';
+import { DEFAULT_BUTTON_STYLES } from '../Button/Button';
 export const StyledMenuWrapper = tasty({
     qa: 'Menu',
     styles: {
@@ -77,13 +78,19 @@ export const StyledHeader = tasty(Space, {
         placeContent: 'space-between',
         placeItems: 'center',
         whiteSpace: 'nowrap',
-        padding: '.5x 1.5x',
-        height: {
-            '': 'min $size-md',
-            '[data-size="large"]': 'min $size-lg',
-        },
+        padding: '.5x $inline-padding',
+        height: 'min $size',
         boxSizing: 'border-box',
         border: 'bottom',
+        $size: {
+            '': '$size-md',
+            '[data-size="small"]': '$size-sm',
+            '[data-size="medium"]': '$size-md',
+            '[data-size="large"]': '$size-lg',
+        },
+        '$inline-padding': 'max($min-inline-padding, (($size - 1lh) / 2 + $inline-compensation))',
+        '$inline-compensation': '1x',
+        '$min-inline-padding': '1x',
     },
 });
 export const StyledFooter = tasty(Space, {
@@ -194,10 +201,22 @@ export const StyledSectionHeading = tasty(Space, {
     styles: {
         color: '#dark-04',
         preset: 'c2',
-        padding: '.5x 1x',
         height: '3x',
         placeContent: 'center space-between',
         align: 'start',
+        padding: {
+            '': '.5x $inline-padding',
+            prefix: '0 $inline-padding 0 .5x',
+        },
+        $size: {
+            '': '$size-md',
+            '[data-size="small"]': '$size-sm',
+            '[data-size="medium"]': '$size-md',
+            '[data-size="large"]': '$size-lg',
+        },
+        '$inline-padding': 'max($min-inline-padding, (($size - 1lh) / 2 + $inline-compensation - 1bw))',
+        '$inline-compensation': '.5x',
+        '$min-inline-padding': '1x',
     },
 });
 

package/es/components/actions/index.js

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

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

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

package/es/components/actions/use-anchored-menu.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.3
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 
@@ -19,9 +19,10 @@ import { MenuTrigger } from './Menu';
  *
  * @param Component - A React component that represents the menu content (Menu or CommandMenu).
  * @param defaultTriggerProps - Default props to pass to the MenuTrigger.
+ * @param defaultMenuProps - Default props to pass to the Menu component.
  * @returns An object with `anchorRef` to position the menu, `open` function to open the menu with provided props, `close` function to close the menu, and `rendered` JSX element to include in your component tree.
  */
-export function useAnchoredMenu(Component, defaultTriggerProps) {
+export function useAnchoredMenu(Component, defaultTriggerProps, defaultMenuProps) {
     const [isOpen, setIsOpen] = useState(false);
     const [componentProps, setComponentProps] = useState(null);
     const [triggerProps, setTriggerProps] = useState(null);
@@ -62,15 +63,23 @@ export function useAnchoredMenu(Component, defaultTriggerProps) {
         }
     }
     // 'open' accepts props required by the Component and opens the menu
-    const open = useEvent((props, triggerProps) => {
+    const open = useEvent((props = {}, triggerProps) => {
         setupCheck();
-        setComponentProps(props);
+        // Merge defaultMenuProps with provided props
+        const finalProps = defaultMenuProps
+            ? { ...defaultMenuProps, ...props }
+            : props;
+        setComponentProps(finalProps);
         setTriggerProps(triggerProps ?? null);
         setIsOpen(true);
     });
     const update = useEvent((props, triggerProps) => {
         setupCheck();
-        setComponentProps(props);
+        // Merge defaultMenuProps with provided props
+        const finalProps = defaultMenuProps
+            ? { ...defaultMenuProps, ...props }
+            : props;
+        setComponentProps(finalProps);
         setTriggerProps(triggerProps ?? null);
     });
     const close = useEvent(() => {

package/es/components/actions/use-context-menu.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.3
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 
@@ -105,7 +105,7 @@ export function useContextMenu(Component, defaultTriggerProps, defaultMenuProps)
         return { x: clampedX, y: clampedY };
     };
     // 'open' accepts props, trigger props, and optional event for positioning, then opens the menu
-    const open = useEvent((props, triggerProps, event) => {
+    const open = useEvent((props = {}, triggerProps, event) => {
         setupCheck();
         // Ensure the target element can serve as a positioning context for the
         // invisible target element. If the consumer hasn't explicitly set

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

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