@cube-dev/ui-kit 0.97.1 → 0.98.1

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @cube-dev/ui-kit
 
+## 0.98.1
+
+### Patch Changes
+
+- [#928](https://github.com/cube-js/cube-ui-kit/pull/928) [`45ff2f40`](https://github.com/cube-js/cube-ui-kit/commit/45ff2f40f7e33e2596d8e8b1de606e0b3800a6c3) Thanks [@tenphi](https://github.com/tenphi)! - Add icons: ColumnTotalIcon, RowTotalsIcon, SubtotalsIcon.
+
+## 0.98.0
+
+### Minor Changes
+
+- [#923](https://github.com/cube-js/cube-ui-kit/pull/923) [`cb6340ef`](https://github.com/cube-js/cube-ui-kit/commit/cb6340ef6b8faff274b7ebd52038587e60d72ff1) Thanks [@tenphi](https://github.com/tenphi)! - Rework of Button component to align its implementation and layout with Item and ItemButton components.
+
+- [#924](https://github.com/cube-js/cube-ui-kit/pull/924) [`fd497403`](https://github.com/cube-js/cube-ui-kit/commit/fd4974035a916cc7f6a17b9a3678571c806f04ea) Thanks [@tenphi](https://github.com/tenphi)! - Add `tokens` prop to tasty components for defining CSS custom properties as inline styles. Tokens support design system values (`$name` for regular properties, `#name` for colors with RGB variants) and are merged from component defaults to instance usage. Use `tokens` instead of `style` prop for dynamic CSS custom properties.
+
+- [#924](https://github.com/cube-js/cube-ui-kit/pull/924) [`fd497403`](https://github.com/cube-js/cube-ui-kit/commit/fd4974035a916cc7f6a17b9a3678571c806f04ea) Thanks [@tenphi](https://github.com/tenphi)! - Add dynamic icon support to Button and Item components. The `icon` and `rightIcon` props now support:
+
+  - `true` - renders an empty slot (reserves space but shows nothing)
+  - Function `({ loading, selected, ...mods }) => ReactNode | true` - dynamically renders icon based on component modifiers
+
+  Also made `Mods` type generic for better type definitions: `Mods<{ loading?: boolean }>` instead of extending interface.
+
+### Patch Changes
+
+- [#924](https://github.com/cube-js/cube-ui-kit/pull/924) [`fd497403`](https://github.com/cube-js/cube-ui-kit/commit/fd4974035a916cc7f6a17b9a3678571c806f04ea) Thanks [@tenphi](https://github.com/tenphi)! - Enlarge the size of the fullscreen dialog.
+
+- [#924](https://github.com/cube-js/cube-ui-kit/pull/924) [`fd497403`](https://github.com/cube-js/cube-ui-kit/commit/fd4974035a916cc7f6a17b9a3678571c806f04ea) Thanks [@tenphi](https://github.com/tenphi)! - Add IconSwitch component for icon transitions.
+
+- [#924](https://github.com/cube-js/cube-ui-kit/pull/924) [`fd497403`](https://github.com/cube-js/cube-ui-kit/commit/fd4974035a916cc7f6a17b9a3678571c806f04ea) Thanks [@tenphi](https://github.com/tenphi)! - Remove redundant `isButton` prop from Item component.
+
+- [#924](https://github.com/cube-js/cube-ui-kit/pull/924) [`fd497403`](https://github.com/cube-js/cube-ui-kit/commit/fd4974035a916cc7f6a17b9a3678571c806f04ea) Thanks [@tenphi](https://github.com/tenphi)! - Add `tight` modifier to `preset` style for setting line-height to the same value as font-size.
+
+- [#924](https://github.com/cube-js/cube-ui-kit/pull/924) [`fd497403`](https://github.com/cube-js/cube-ui-kit/commit/fd4974035a916cc7f6a17b9a3678571c806f04ea) Thanks [@tenphi](https://github.com/tenphi)! - Add `card` type to Item component.
+
+- [#924](https://github.com/cube-js/cube-ui-kit/pull/924) [`fd497403`](https://github.com/cube-js/cube-ui-kit/commit/fd4974035a916cc7f6a17b9a3678571c806f04ea) Thanks [@tenphi](https://github.com/tenphi)! - Add `preserveContent` prop to DisplayTransition component. When enabled (default: true), the component preserves children content during exit transitions, ensuring smooth animations even when parent components remove content immediately after hiding.
+
+- [#924](https://github.com/cube-js/cube-ui-kit/pull/924) [`fd497403`](https://github.com/cube-js/cube-ui-kit/commit/fd4974035a916cc7f6a17b9a3678571c806f04ea) Thanks [@tenphi](https://github.com/tenphi)! - Add `title` type support to Item component.
+
+- [#924](https://github.com/cube-js/cube-ui-kit/pull/924) [`fd497403`](https://github.com/cube-js/cube-ui-kit/commit/fd4974035a916cc7f6a17b9a3678571c806f04ea) Thanks [@tenphi](https://github.com/tenphi)! - Remove the selected mod in DisclosureTrigger.'
+
+- [#924](https://github.com/cube-js/cube-ui-kit/pull/924) [`fd497403`](https://github.com/cube-js/cube-ui-kit/commit/fd4974035a916cc7f6a17b9a3678571c806f04ea) Thanks [@tenphi](https://github.com/tenphi)! - Fix Layout.PanelHeader props type.
+
 ## 0.97.1
 
 ### Patch Changes

package/es/_internal/hooks/index.js

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

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

@@ -1,31 +1,53 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.97.1
+ * @cube-dev/ui-kit v0.98.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, forwardRef, useMemo } from 'react';
+import { Children, forwardRef, isValidElement, useMemo, useState, } from 'react';
+import { useIsFirstRender } from '../../../_internal/hooks/use-is-first-render';
 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 { Text } from '../../content/Text';
+import { mergeProps, resolveIcon } from '../../../utils/react';
+import { useAutoTooltip } from '../../content/use-auto-tooltip';
+import { DisplayTransition } from '../../helpers/DisplayTransition';
+import { IconSwitch } from '../../helpers/IconSwitch/IconSwitch';
 import { useAction } from '../use-action';
+const BUTTON_SIZE_VALUES = [
+    'xsmall',
+    'small',
+    'medium',
+    'large',
+    'xlarge',
+    'inline',
+];
 const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
+const DEFAULT_ICON_STYLES = {
+    $: '>',
+    position: 'relative',
+    display: 'grid',
+    placeItems: 'center',
+    placeContent: 'center',
+    placeSelf: 'stretch',
+    // overflow: 'hidden',
+    width: 'fixed ($size - 2bw)',
+    height: 'fixed ($size - 2bw)',
+    pointerEvents: 'none',
+    transition: 'theme, width, height, translate',
+};
 export const DEFAULT_BUTTON_STYLES = {
     display: 'inline-grid',
-    flow: 'column',
-    placeItems: 'center start',
-    placeContent: {
-        '': 'center',
-        'right-icon | suffix': 'center stretch',
-    },
-    gridColumns: {
-        '': 'initial',
-        'left-icon | loading | prefix': 'max-content',
+    flow: 'column dense',
+    gap: 0,
+    placeItems: {
+        '': 'stretch',
+        'raw-children': 'center stretch',
     },
+    placeContent: 'center',
     position: 'relative',
     margin: 0,
     boxSizing: 'border-box',
@@ -35,31 +57,23 @@ export const DEFAULT_BUTTON_STYLES = {
         ':is(button)': '$pointer',
         disabled: 'not-allowed',
     },
-    gap: {
-        '': '.75x',
-        'size=small': '.5x',
-    },
     preset: {
         '': 't3m',
         'size=xsmall': 't4',
         'size=xlarge': 't2m',
     },
     textDecoration: 'none',
-    transition: 'theme',
     reset: 'button',
     outline: 0,
     outlineOffset: 1,
     padding: {
-        '': '.5x (1.5x - 1bw)',
-        'size=small | size=xsmall': '.5x (1.25x - 1bw)',
-        'size=medium': '.5x (1.5x - 1bw)',
-        'size=large': '.5x (1.75x - 1bw)',
-        'size=xlarge': '.5x (2x - 1bw)',
-        'single-icon | type=link': 0,
+        '': 0,
+        'raw-children & !has-icons': '$block-padding $inline-padding $block-padding $inline-padding',
+        'type=link': '0',
     },
     width: {
         '': 'min $size',
-        'left-icon & right-icon': 'min ($size * 2 - 2bw)',
+        'has-icon & has-right-icon': 'min ($size * 2 - 2bw)',
         'single-icon': 'fixed $size',
         'type=link': 'min 1ch',
     },
@@ -72,6 +86,8 @@ export const DEFAULT_BUTTON_STYLES = {
         '': true,
         'type=link & !focused': 0,
     },
+    transition: 'theme, grid-template, padding',
+    verticalAlign: 'bottom',
     $size: {
         '': '$size-md',
         'size=xsmall': '$size-xs',
@@ -79,17 +95,73 @@ export const DEFAULT_BUTTON_STYLES = {
         'size=medium': '$size-md',
         'size=large': '$size-lg',
         'size=xlarge': '$size-xl',
+        'size=inline': '(1lh + 2bw)',
+    },
+    '$inline-padding': {
+        '': 'max($min-inline-padding, (($size - 1lh - 2bw) / 2 + $inline-compensation))',
     },
-    ButtonIcon: {
-        width: 'min 1fs',
+    '$block-padding': {
+        '': '.5x',
+        'size=xsmall | size=small': '.25x',
     },
-    '& [data-element="ButtonIcon"]:first-child:not(:last-child)': {
-        marginLeft: '-.5x',
-        placeSelf: 'center start',
+    '$inline-compensation': '.5x',
+    '$min-inline-padding': '(1x - 1bw)',
+    '$left-padding': {
+        '': '$inline-padding',
+        'is-icon-shown': '0px',
     },
-    '& [data-element="ButtonIcon"]:last-child:not(:first-child)': {
-        marginRight: '-.5x',
-        placeSelf: 'center end',
+    '$right-padding': {
+        '': '$inline-padding',
+        'is-right-icon-shown': '0px',
+    },
+    // Icon sub-element (recommended format)
+    Icon: {
+        ...DEFAULT_ICON_STYLES,
+        width: {
+            '': 'fixed 0px',
+            'is-icon-shown': 'fixed ($size - 2bw)',
+        },
+        opacity: {
+            '': 0,
+            'is-icon-shown': 1,
+        },
+        translate: {
+            '': '($size * 1 / 4) 0',
+            'is-icon-shown': '0 0',
+        },
+    },
+    // RightIcon sub-element (recommended format)
+    RightIcon: {
+        ...DEFAULT_ICON_STYLES,
+        width: {
+            '': 'fixed 0px',
+            'is-right-icon-shown': 'fixed ($size - 2bw)',
+        },
+        opacity: {
+            '': 0,
+            'is-right-icon-shown': 1,
+        },
+        translate: {
+            '': '($size * -1 / 4) 0',
+            'is-right-icon-shown': '0 0',
+        },
+    },
+    // Label sub-element (recommended format)
+    Label: {
+        $: '>',
+        display: 'block',
+        placeSelf: 'center stretch',
+        boxSizing: 'border-box',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        maxWidth: '100%',
+        textAlign: 'center',
+        transition: 'theme, padding',
+        padding: {
+            '': '$block-padding $right-padding $block-padding $left-padding',
+            'type=link': '0',
+        },
     },
 };
 const ButtonElement = tasty({
@@ -127,22 +199,51 @@ const ButtonElement = tasty({
     },
 });
 export const Button = forwardRef(function Button(allProps, ref) {
-    let { type, size, label, children, theme = 'default', icon, rightIcon, mods, download, ...props } = allProps;
-    const isDisabled = props.isDisabled || props.isLoading;
+    let { type, size: sizeProp, label, children, theme = 'default', icon: iconProp, rightIcon: rightIconProp, mods, download, tooltip = true, defaultTooltipPlacement = 'top', ...props } = allProps;
+    const size = sizeProp ?? (type === 'link' ? 'inline' : 'medium');
+    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.',
@@ -151,43 +252,75 @@ export const Button = forwardRef(function Button(allProps, ref) {
     if (!children && !specifiedLabel) {
         label = 'Unnamed'; // fix to avoid warning in production
     }
-    if (icon) {
-        icon = cloneElement(icon, {
-            'data-element': 'ButtonIcon',
-        });
-    }
-    if (rightIcon) {
-        rightIcon = cloneElement(rightIcon, {
-            'data-element': 'ButtonIcon',
-        });
-    }
-    const singleIcon = !!(((icon && !rightIcon) || (rightIcon && !icon)) &&
-        !children);
-    const hasIcons = !!icon || !!rightIcon;
+    const hasLeftIcon = !!(hasLeftSlot || isLoading);
+    const hasChildren = children != null;
+    const singleIcon = !!(((hasLeftIcon && !hasRightSlot) || (hasRightSlot && !hasLeftIcon)) &&
+        !hasChildren);
+    const hasIcons = hasLeftIcon || hasRightSlot;
+    const rawChildren = !!(hasChildren &&
+        typeof children !== 'string' &&
+        !Children.toArray(children).some((child) => typeof child === 'string'));
+    const [isIconShown, setIsIconShown] = useState(hasLeftIcon);
+    const [isRightIconShown, setIsRightIconShown] = useState(hasRightSlot);
+    const isFirstRender = useIsFirstRender();
     const modifiers = useMemo(() => ({
-        loading: isLoading,
-        selected: isSelected,
+        ...baseMods,
         'has-icons': hasIcons,
-        'left-icon': !!icon,
-        'right-icon': !!rightIcon,
+        'has-icon': hasLeftIcon,
+        'is-icon-shown': isIconShown,
+        'has-right-icon': hasRightSlot,
+        'is-right-icon-shown': isRightIconShown,
         'single-icon': singleIcon,
-        'text-only': !!(children && typeof children === 'string' && !hasIcons),
-        ...mods,
+        'text-only': !!(hasChildren && typeof children === 'string' && !hasIcons),
+        'raw-children': rawChildren,
+        'has-content': children != null,
     }), [
-        mods,
+        baseMods,
         children,
-        icon,
-        rightIcon,
-        isLoading,
-        isSelected,
+        hasLeftIcon,
+        hasRightSlot,
         singleIcon,
         hasIcons,
+        hasChildren,
+        rawChildren,
+        isIconShown,
+        isRightIconShown,
     ]);
     const { actionProps } = useAction({ ...allProps, isDisabled, mods: modifiers, ...(label ? { label } : {}) }, ref);
     const styles = extractStyles(props, STYLE_PROPS);
     const isDisabledElement = actionProps.isDisabled;
     delete actionProps.isDisabled;
-    return (_jsxs(ButtonElement, { download: download, ...actionProps, disabled: isDisabledElement, variant: `${theme}.${type ?? 'outline'}`, "data-theme": theme, "data-type": type ?? 'outline', "data-size": size ?? 'medium', styles: styles, children: [icon || isLoading ? (!isLoading ? (icon) : (_jsx(LoadingIcon, { "data-element": "ButtonIcon" }))) : null, typeof children === 'string' ? (_jsx(Text, { ellipsis: true, nowrap: true, children: children })) : (children), rightIcon] }));
+    const { labelProps: finalLabelProps, labelRef, renderWithTooltip, } = useAutoTooltip({
+        tooltip,
+        children,
+        labelProps: undefined,
+    });
+    // Render function that creates the button element
+    const renderButtonElement = (tooltipTriggerProps, tooltipRef) => {
+        // Use callback ref to merge multiple refs without calling hooks
+        const handleRef = (element) => {
+            // Set the component's forwarded ref from useAction
+            const domRef = actionProps.ref;
+            if (typeof domRef === 'function') {
+                domRef(element);
+            }
+            else if (domRef) {
+                domRef.current = element;
+            }
+            // Set the tooltip ref if provided
+            if (tooltipRef) {
+                tooltipRef.current = element;
+            }
+        };
+        // 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, styles: styles, tokens: sizeTokenValue ? { $size: sizeTokenValue } : undefined, children: [_jsx(DisplayTransition, { isShown: hasLeftIcon, animateOnMount: !isFirstRender, onToggle: setIsIconShown, children: ({ ref }) => (_jsx("div", { ref: ref, "data-element": "Icon", "aria-hidden": "true", children: _jsx(IconSwitch, { noWrapper: true, contentKey: iconKey, children: isLoading ? _jsx(LoadingIcon, {}) : icon }) })) }), hasChildren &&
+                    (rawChildren ? (children) : (_jsx("div", { "data-element": "Label", ...finalLabelProps, ref: labelRef, children: children }))), _jsx(DisplayTransition, { isShown: hasRightSlot, animateOnMount: !isFirstRender, onToggle: setIsRightIconShown, children: ({ ref }) => (_jsx("div", { ref: ref, "data-element": "RightIcon", "aria-hidden": "true", children: _jsx(IconSwitch, { noWrapper: true, contentKey: rightIconKey, children: rightIcon }) })) })] }));
+    };
+    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.97.1
+ * @cube-dev/ui-kit v0.98.1
  * 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.97.1
+ * @cube-dev/ui-kit v0.98.1
  * 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.97.1
+ * @cube-dev/ui-kit v0.98.1
  * Released under the MIT license.
  */