@cube-dev/ui-kit 0.0.0-canary-4676adc → 0.0.0-canary-2397690

package/es/_internal/hooks/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-chained-callback.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-debounced-value.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-deprecation-warning.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-effect-once.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-event.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-is-first-render.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-sync-ref.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-timer/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-timer/timer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-timer/use-timer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-update-effect.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-warn.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/_internal/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/components/Block.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/components/CollectionItem.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/components/GlobalStyles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/components/GridProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/components/HiddenInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/components/OpenTrasition.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/components/Root.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/components/actions/Action/Action.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

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

@@ -1,19 +1,27 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, } from 'react';
+import { forwardRef, isValidElement, useMemo, } from 'react';
 import { useWarn } from '../../../_internal/hooks/use-warn';
 import { DANGER_CLEAR_STYLES, DANGER_LINK_STYLES, DANGER_NEUTRAL_STYLES, DANGER_OUTLINE_STYLES, DANGER_PRIMARY_STYLES, DANGER_SECONDARY_STYLES, DEFAULT_CLEAR_STYLES, DEFAULT_LINK_STYLES, DEFAULT_NEUTRAL_STYLES, DEFAULT_OUTLINE_STYLES, DEFAULT_PRIMARY_STYLES, DEFAULT_SECONDARY_STYLES, SPECIAL_CLEAR_STYLES, SPECIAL_LINK_STYLES, SPECIAL_NEUTRAL_STYLES, SPECIAL_OUTLINE_STYLES, SPECIAL_PRIMARY_STYLES, SPECIAL_SECONDARY_STYLES, SUCCESS_CLEAR_STYLES, SUCCESS_LINK_STYLES, SUCCESS_NEUTRAL_STYLES, SUCCESS_OUTLINE_STYLES, SUCCESS_PRIMARY_STYLES, SUCCESS_SECONDARY_STYLES, } from '../../../data/item-themes';
 import { LoadingIcon } from '../../../icons';
 import { CONTAINER_STYLES, extractStyles, tasty, TEXT_STYLES, } from '../../../tasty';
-import { mergeProps } from '../../../utils/react';
+import { mergeProps, resolveIcon } from '../../../utils/react';
 import { useAutoTooltip } from '../../content/use-auto-tooltip';
+import { IconSwitch } from '../../helpers/IconSwitch/IconSwitch';
 import { useAction } from '../use-action';
+const BUTTON_SIZE_VALUES = [
+    'xsmall',
+    'small',
+    'medium',
+    'large',
+    'xlarge',
+];
 const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
 const DEFAULT_ICON_STYLES = {
     $: '>',
@@ -21,14 +29,15 @@ const DEFAULT_ICON_STYLES = {
     placeItems: 'center',
     placeContent: 'stretch',
     aspectRatio: '1 / 1',
-    width: '($size - 2bw)',
+    width: 'initial ($size - 2bw) 100%',
+    overflow: 'hidden',
 };
 export const DEFAULT_BUTTON_STYLES = {
     display: 'inline-grid',
     flow: 'column dense',
     gap: 0,
     gridTemplate: {
-        '': '"icon label rightIcon" auto / max-content 1sf max-content',
+        '': '"icon label rightIcon" auto / $left-icon-size 1sf $right-icon-size',
         'raw-children': 'initial',
     },
     placeItems: {
@@ -51,7 +60,6 @@ export const DEFAULT_BUTTON_STYLES = {
         'size=xlarge': 't2m',
     },
     textDecoration: 'none',
-    transition: 'theme',
     reset: 'button',
     outline: 0,
     outlineOffset: 1,
@@ -75,6 +83,15 @@ export const DEFAULT_BUTTON_STYLES = {
         '': true,
         'type=link & !focused': 0,
     },
+    transition: 'theme, grid-template',
+    '$left-icon-size': {
+        '': 0,
+        'has-icon': '($size - 2bw)',
+    },
+    '$right-icon-size': {
+        '': 0,
+        'has-right-icon': '($size - 2bw)',
+    },
     $size: {
         '': '$size-md',
         'size=xsmall': '$size-xs',
@@ -122,15 +139,12 @@ export const DEFAULT_BUTTON_STYLES = {
         textOverflow: 'ellipsis',
         maxWidth: '100%',
         textAlign: 'center',
+        transition: 'theme, padding',
         padding: {
             '': '$block-padding $label-padding-right $block-padding $label-padding-left',
             'type=link': 0,
         },
     },
-    // ButtonIcon sub-element (backward compatibility)
-    ButtonIcon: {
-        width: 'min 1fs',
-    },
 };
 const ButtonElement = tasty({
     qa: 'Button',
@@ -167,22 +181,50 @@ const ButtonElement = tasty({
     },
 });
 export const Button = forwardRef(function Button(allProps, ref) {
-    let { type, size, label, children, theme = 'default', icon, rightIcon, mods, download, tooltip = true, defaultTooltipPlacement = 'top', ...props } = allProps;
+    let { type, size, label, children, theme = 'default', icon: iconProp, rightIcon: rightIconProp, mods, download, tooltip = true, defaultTooltipPlacement = 'top', ...props } = allProps;
     const isDisabled = props.isDisabled || props.isLoading;
     const isLoading = props.isLoading;
     const isSelected = props.isSelected;
-    children = children || icon || rightIcon ? children : label;
+    // Base mods for icon resolution (without icon-dependent mods)
+    const baseMods = useMemo(() => ({
+        loading: isLoading,
+        selected: isSelected,
+        ...mods,
+    }), [isLoading, isSelected, mods]);
+    // Resolve dynamic icon props
+    const resolvedIcon = useMemo(() => resolveIcon(iconProp, baseMods), [iconProp, baseMods]);
+    const resolvedRightIcon = useMemo(() => resolveIcon(rightIconProp, baseMods), [rightIconProp, baseMods]);
+    const hasLeftSlot = resolvedIcon.hasSlot;
+    const hasRightSlot = resolvedRightIcon.hasSlot;
+    const icon = resolvedIcon.content;
+    const rightIcon = resolvedRightIcon.content;
+    // Generate stable keys for icon transitions based on icon type
+    const iconKey = isLoading
+        ? 'loading'
+        : isValidElement(icon)
+            ? icon.type?.displayName || icon.type?.name || 'icon'
+            : icon
+                ? 'icon'
+                : 'empty';
+    const rightIconKey = isValidElement(rightIcon)
+        ? rightIcon.type?.displayName ||
+            rightIcon.type?.name ||
+            'icon'
+        : rightIcon
+            ? 'icon'
+            : 'empty';
+    children = children || hasLeftSlot || hasRightSlot ? children : label;
     const specifiedLabel = label ?? props['aria-label'] ?? props['aria-labelledby'];
     // Warn about accessibility issues when button has no accessible label
-    useWarn(!children && icon && !specifiedLabel, {
-        key: ['button-icon-no-label', !!icon],
+    useWarn(!children && hasLeftSlot && !specifiedLabel, {
+        key: ['button-icon-no-label', hasLeftSlot],
         args: [
             'accessibility issue:',
             'If you provide `icon` property for a Button and do not provide any children then you should specify the `aria-label` property to make sure the Button element stays accessible.',
         ],
     });
-    useWarn(!children && !icon && !specifiedLabel, {
-        key: ['button-no-content-no-label', !!icon],
+    useWarn(!children && !hasLeftSlot && !specifiedLabel, {
+        key: ['button-no-content-no-label', hasLeftSlot],
         args: [
             'accessibility issue:',
             'If you provide no children for a Button then you should specify the `aria-label` property to make sure the Button element stays accessible.',
@@ -191,33 +233,30 @@ export const Button = forwardRef(function Button(allProps, ref) {
     if (!children && !specifiedLabel) {
         label = 'Unnamed'; // fix to avoid warning in production
     }
-    const hasLeftIcon = !!icon || isLoading;
+    const hasLeftIcon = hasLeftSlot || isLoading;
     const hasChildren = children != null;
-    const singleIcon = !!(((hasLeftIcon && !rightIcon) || (rightIcon && !hasLeftIcon)) &&
+    const singleIcon = !!(((hasLeftIcon && !hasRightSlot) || (hasRightSlot && !hasLeftIcon)) &&
         !hasChildren);
-    const hasIcons = hasLeftIcon || !!rightIcon;
+    const hasIcons = hasLeftIcon || hasRightSlot;
     const rawChildren = !!(hasChildren &&
         typeof children !== 'string' &&
         !hasIcons);
     const modifiers = useMemo(() => ({
-        loading: isLoading,
-        selected: isSelected,
+        ...baseMods,
         'has-icons': hasIcons,
         'has-icon': hasLeftIcon,
-        'has-right-icon': !!rightIcon,
+        'has-right-icon': hasRightSlot,
         'single-icon': singleIcon,
         'text-only': !!(hasChildren && typeof children === 'string' && !hasIcons),
         'raw-children': rawChildren,
-        ...mods,
     }), [
-        mods,
+        baseMods,
         children,
-        icon,
-        rightIcon,
-        isLoading,
-        isSelected,
+        hasLeftIcon,
+        hasRightSlot,
         singleIcon,
         hasIcons,
+        hasChildren,
         rawChildren,
     ]);
     const { actionProps } = useAction({ ...allProps, isDisabled, mods: modifiers, ...(label ? { label } : {}) }, ref);
@@ -246,8 +285,13 @@ export const Button = forwardRef(function Button(allProps, ref) {
                 tooltipRef.current = element;
             }
         };
-        return (_jsxs(ButtonElement, { download: download, ...mergeProps(actionProps, tooltipTriggerProps || {}), ref: handleRef, disabled: isDisabledElement, variant: `${theme}.${type ?? 'outline'}`, "data-theme": theme, "data-type": type ?? 'outline', "data-size": size ?? 'medium', styles: styles, children: [(icon || isLoading) && (_jsx("div", { "data-element": "Icon", children: isLoading ? _jsx(LoadingIcon, {}) : icon })), hasChildren &&
-                    (rawChildren ? (children) : (_jsx("div", { "data-element": "Label", ...finalLabelProps, ref: labelRef, children: children }))), rightIcon && _jsx("div", { "data-element": "RightIcon", children: rightIcon })] }));
+        // Determine if size is custom (number or unrecognized string)
+        const isCustomSize = typeof size === 'number' ||
+            (size != null &&
+                !BUTTON_SIZE_VALUES.includes(size));
+        const sizeTokenValue = typeof size === 'number' ? `${size}px` : isCustomSize ? size : undefined;
+        return (_jsxs(ButtonElement, { download: download, ...mergeProps(actionProps, tooltipTriggerProps || {}), ref: handleRef, disabled: isDisabledElement, variant: `${theme}.${type ?? 'outline'}`, "data-theme": theme, "data-type": type ?? 'outline', "data-size": size ?? 'medium', styles: styles, tokens: sizeTokenValue ? { $size: sizeTokenValue } : undefined, children: [hasLeftIcon ? (_jsx("div", { "data-element": "Icon", children: _jsx(IconSwitch, { noWrapper: true, contentKey: iconKey, children: isLoading ? _jsx(LoadingIcon, {}) : icon }) })) : null, hasChildren &&
+                    (rawChildren ? (children) : (_jsx("div", { "data-element": "Label", ...finalLabelProps, ref: labelRef, children: children }))), hasRightSlot ? (_jsx("div", { "data-element": "RightIcon", children: _jsx(IconSwitch, { noWrapper: true, contentKey: rightIconKey, children: rightIcon }) })) : null] }));
     };
     return renderWithTooltip(renderButtonElement, defaultTooltipPlacement);
 });

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/components/actions/ButtonGroup/ButtonGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

package/es/components/actions/ItemActionContext.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 
@@ -10,7 +10,10 @@ import { createContext, useContext } from 'react';
 const ItemActionContext = createContext(undefined);
 export function ItemActionProvider({ type, theme, disableActionsFocus, children, }) {
     return (_jsx(ItemActionContext.Provider, { value: {
-            type: type === 'item' || type === 'outline'
+            type: type === 'item' ||
+                type === 'outline' ||
+                type === 'title' ||
+                type === 'alert'
                 ? 'neutral'
                 : type === 'secondary'
                     ? 'clear'

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

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useLayoutEffect, useRef, useState, } from 'react';
-import { useHover } from 'react-aria';
+import { useFocusWithin, useHover } from 'react-aria';
 import { tasty } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
 import { Item } from '../../content/Item';
@@ -20,7 +20,6 @@ const StyledItem = tasty(Item, {
     as: 'button',
     type: 'neutral',
     theme: 'default',
-    isButton: true,
     styles: {
         reset: 'button',
         placeContent: 'center stretch',
@@ -32,11 +31,6 @@ const ActionsWrapper = tasty({
         position: 'relative',
         placeContent: 'stretch',
         placeItems: 'stretch',
-        preset: {
-            '': 't3m',
-            'size=xsmall': 't4',
-            'size=xlarge': 't2m',
-        },
         $size: {
             '': '$size-md',
             'size=xsmall': '$size-xs',
@@ -73,7 +67,7 @@ const ActionsWrapper = tasty({
     },
 });
 const ItemButton = forwardRef(function ItemButton(allProps, ref) {
-    const { mods, to, htmlType, as, type = 'neutral', theme, onPress, 
+    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, showActionsOnHover = false, disableActionsFocus = false, ...rest } = allProps;
@@ -89,7 +83,30 @@ const ItemButton = forwardRef(function ItemButton(allProps, ref) {
             }
         }
     }, [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 || !showActionsOnHover)
+            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, showActionsOnHover]);
+    const shouldShowActions = isHovered || isFocusWithin || hasPressed;
     const { actionProps } = useAction({ ...allProps, htmlType, to, as, mods }, ref);
     const button = (_jsx(StyledItem, { actions: actions ? true : undefined, ...mergeProps(rest, actionProps), htmlType: actionProps.type, type: type, theme: theme, size: size }));
     if (actions) {
@@ -98,12 +115,12 @@ const ItemButton = forwardRef(function ItemButton(allProps, ref) {
                     ? `${actionsWidth}px`
                     : '0px',
                 ...(typeof size === 'number' && { '--size': `${size}px` }),
-            }, children: [button, _jsx(ItemActionProvider, { type: type, theme: theme, disableActionsFocus: disableActionsFocus, children: showActionsOnHover ? (_jsx(DisplayTransition, { exposeUnmounted: true, isShown: isHovered, onPhaseChange: (phase) => {
+            }, children: [button, _jsx(ItemActionProvider, { type: type, theme: theme, disableActionsFocus: disableActionsFocus, children: showActionsOnHover ? (_jsx(DisplayTransition, { exposeUnmounted: true, isShown: shouldShowActions, onPhaseChange: (phase) => {
                             setAreActionsVisible(phase !== 'unmounted');
                         }, onToggle: (isShown) => {
                             setAreActionsShown(isShown);
                         }, children: ({ ref: transitionRef }) => {
-                            return (_jsx("div", { ref: (node) => {
+                            return (_jsx("div", { ...focusWithinProps, ref: (node) => {
                                     actionsRef.current = node;
                                     transitionRef(node);
                                 }, "data-element": "Actions", children: actions }));

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4676adc
+ * @cube-dev/ui-kit v0.0.0-canary-2397690
  * Released under the MIT license.
  */