@cube-dev/ui-kit 0.84.0 → 0.85.1

package/es/components/content/ItemBase/ItemBase.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.84.0
+ * @cube-dev/ui-kit v0.85.1
  * Released under the MIT license.
  */
 
@@ -13,8 +13,11 @@ import { CheckIcon } from '../../../icons/CheckIcon';
 import { LoadingIcon } from '../../../icons/LoadingIcon';
 import { CONTAINER_STYLES, tasty, } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
+import { ItemAction } from '../../actions/ItemAction';
+import { ItemActionProvider } from '../../actions/ItemActionContext';
 import { TooltipProvider, } from '../../overlays/Tooltip/TooltipProvider';
 import { HotKeys } from '../HotKeys';
+import { ItemBadge } from '../ItemBadge';
 const DEFAULT_ICON_STYLES = {
     display: 'grid',
     placeItems: 'center',
@@ -36,6 +39,18 @@ const ADDITION_STYLES = {
     placeContent: 'stretch',
     gridRow: 'span 2',
 };
+const ACTIONS_EVENT_HANDLERS = {
+    onClick: (e) => e.stopPropagation(),
+    onPointerDown: (e) => e.stopPropagation(),
+    onPointerUp: (e) => e.stopPropagation(),
+    onMouseDown: (e) => e.stopPropagation(),
+    onMouseUp: (e) => e.stopPropagation(),
+    onKeyDown: (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.stopPropagation();
+        }
+    },
+};
 const ItemBaseElement = tasty({
     styles: {
         display: 'inline-grid',
@@ -46,8 +61,11 @@ const ItemBaseElement = tasty({
         placeContent: 'stretch',
         gridColumns: {
             '': '1sf max-content max-content',
+            'with-actions': '1sf max-content max-content max-content',
             'with-icon ^ with-prefix': 'max-content 1sf max-content max-content',
+            'with-icon ^ with-prefix & with-actions': 'max-content 1sf max-content max-content max-content',
             'with-icon & with-prefix': 'max-content max-content 1sf max-content max-content',
+            'with-icon & with-prefix & with-actions': 'max-content max-content 1sf max-content max-content max-content',
             '(with-icon ^ with-right-icon) & !with-description & !with-prefix & !with-suffix & !with-label': 'max-content',
         },
         gridRows: {
@@ -58,7 +76,10 @@ const ItemBaseElement = tasty({
         position: 'relative',
         padding: 0,
         margin: 0,
-        radius: true,
+        radius: {
+            '': true,
+            card: '1cr',
+        },
         height: {
             '': 'min $size',
             '[data-size="inline"]': 'initial',
@@ -127,12 +148,12 @@ const ItemBaseElement = tasty({
             padding: {
                 '': '$block-padding $inline-padding',
                 '(with-icon | with-prefix)': '$block-padding $inline-padding $block-padding 0',
-                '(with-right-icon | with-suffix)': '$block-padding 0 $block-padding $inline-padding',
-                '(with-icon | with-prefix) & (with-right-icon | with-suffix)': '$block-padding 0',
+                '(with-right-icon | with-suffix | with-actions)': '$block-padding 0 $block-padding $inline-padding',
+                '(with-icon | with-prefix) & (with-right-icon | with-suffix | with-actions)': '$block-padding 0',
                 'with-description & !with-description-block': '$block-padding $inline-padding 0 $inline-padding',
                 'with-description & !with-description-block & (with-icon | with-prefix)': '$block-padding $inline-padding 0 0',
-                'with-description & !with-description-block & (with-right-icon | with-suffix)': '$block-padding 0 0 $inline-padding',
-                'with-description & !with-description-block & (with-icon | with-prefix) & (with-right-icon | with-suffix)': '$block-padding 0 0 0',
+                'with-description & !with-description-block & (with-right-icon | with-suffix | with-actions)': '$block-padding 0 0 $inline-padding',
+                'with-description & !with-description-block & (with-icon | with-prefix) & (with-right-icon | with-suffix | with-actions)': '$block-padding 0 0 0',
             },
             gridRow: {
                 '': 'span 2',
@@ -162,11 +183,12 @@ const ItemBaseElement = tasty({
                 '(with-icon | with-prefix)': '0 $inline-padding $block-padding 0',
                 '(with-right-icon | with-suffix)': '0 0 $block-padding $inline-padding',
                 '(with-icon | with-prefix) & (with-right-icon | with-suffix)': '0 0 $block-padding 0',
-                'with-description-block': '0 ($inline-padding - $inline-compensation + 1bw) $block-padding ($inline-padding - $inline-compensation + 1bw)',
-                'with-description-block & !with-icon': '0 ($inline-padding - $inline-compensation + 1bw) $block-padding $inline-padding',
-                'with-description-block & !with-right-icon': '0 $inline-padding $block-padding ($inline-padding - $inline-compensation + 1bw)',
-                'with-description-block & !with-right-icon & !with-icon': '0 $inline-padding $block-padding $inline-padding',
+                'with-description-block': '0 ($inline-padding - $inline-compensation + 1bw) $bottom-padding ($inline-padding - $inline-compensation + 1bw)',
+                'with-description-block & !with-icon': '0 ($inline-padding - $inline-compensation + 1bw) $bottom-padding $inline-padding',
+                'with-description-block & !with-right-icon': '0 $inline-padding $bottom-padding ($inline-padding - $inline-compensation + 1bw)',
+                'with-description-block & !with-right-icon & !with-icon': '0 $inline-padding $bottom-padding $inline-padding',
             },
+            '$bottom-padding': 'max($block-padding, (($size - 4x) / 2) + $block-padding)',
         },
         Prefix: {
             ...ADDITION_STYLES,
@@ -182,6 +204,24 @@ const ItemBaseElement = tasty({
                 'with-right-icon': 0,
             },
         },
+        Actions: {
+            display: 'flex',
+            gap: '1bw',
+            placeItems: 'center',
+            placeContent: 'stretch',
+            placeSelf: 'stretch',
+            padding: '0 $side-padding',
+            boxSizing: 'border-box',
+            height: 'min ($size - 2bw)',
+            gridRow: 'span 2',
+            width: {
+                '': 'var(--actions-width, 0px)',
+                'with-actions-content': 'calc-size(max-content, size)',
+            },
+            transition: 'width $transition ease-out',
+            interpolateSize: 'allow-keywords',
+            '$side-padding': 'max(min(.5x, (($size - 3x + 2bw) / 2)), 1bw)',
+        },
     },
     variants: {
         // Default theme
@@ -219,7 +259,8 @@ const ItemBaseElement = tasty({
     },
     styleProps: CONTAINER_STYLES,
 });
-export function useAutoTooltip({ tooltip, children, labelProps, }) {
+export function useAutoTooltip({ tooltip, children, labelProps, isDynamicLabel = false, // if actions are set
+ }) {
     // Determine if auto tooltip is enabled
     // Auto tooltip only works when children is a string (overflow detection needs text)
     const isAutoTooltipEnabled = useMemo(() => {
@@ -325,8 +366,9 @@ export function useAutoTooltip({ tooltip, children, labelProps, }) {
             }
             // Boolean tooltip - auto tooltip on overflow
             if (tooltip === true) {
-                if ((children || labelProps) && isLabelOverflowed) {
-                    return (_jsx(TooltipProvider, { placement: defaultTooltipPlacement, title: children, children: (triggerProps, ref) => renderElement(triggerProps, ref) }));
+                if ((children || labelProps) &&
+                    (isLabelOverflowed || isDynamicLabel)) {
+                    return (_jsx(TooltipProvider, { placement: defaultTooltipPlacement, title: children, isDisabled: !isLabelOverflowed && isDynamicLabel, children: (triggerProps, ref) => renderElement(triggerProps, ref) }));
                 }
             }
             // Object tooltip - advanced configuration
@@ -337,8 +379,11 @@ export function useAutoTooltip({ tooltip, children, labelProps, }) {
                     return (_jsx(TooltipProvider, { placement: defaultTooltipPlacement, ...tooltipProps, children: (triggerProps, ref) => renderElement(triggerProps, ref) }));
                 }
                 // If title is provided with auto=true, OR no title but auto behavior enabled
-                if ((children || labelProps) && isLabelOverflowed) {
-                    return (_jsx(TooltipProvider, { placement: defaultTooltipPlacement, title: tooltipProps.title ?? children, ...tooltipProps, children: (triggerProps, ref) => renderElement(triggerProps, ref) }));
+                if ((children || labelProps) &&
+                    (isLabelOverflowed || isDynamicLabel)) {
+                    return (_jsx(TooltipProvider, { placement: defaultTooltipPlacement, title: tooltipProps.title ?? children, isDisabled: !isLabelOverflowed &&
+                            isDynamicLabel &&
+                            tooltipProps.isDisabled !== true, ...tooltipProps, children: (triggerProps, ref) => renderElement(triggerProps, ref) }));
                 }
             }
         }
@@ -354,7 +399,7 @@ export function useAutoTooltip({ tooltip, children, labelProps, }) {
     };
 }
 const ItemBase = (props, ref) => {
-    let { children, size, type = 'item', theme = 'default', mods, icon, rightIcon, prefix, suffix, description, descriptionPlacement = 'inline', labelProps, descriptionProps, keyboardShortcutProps, styles, htmlType, isSelected, hotkeys, tooltip = true, isDisabled, loadingSlot = 'auto', isLoading = false, defaultTooltipPlacement = 'top', ...rest } = props;
+    let { children, size = 'medium', type = 'item', theme = 'default', mods, icon, rightIcon, prefix, suffix, description, descriptionPlacement = 'inline', labelProps, descriptionProps, keyboardShortcutProps, styles, htmlType, isSelected, hotkeys, tooltip = true, isDisabled, style, loadingSlot = 'auto', isLoading = false, isCard = false, actions, defaultTooltipPlacement = 'top', ...rest } = props;
     // Loading state makes the component disabled
     const finalIsDisabled = isDisabled === true || (isLoading && isDisabled !== false);
     // Determine if we should show checkbox instead of icon
@@ -368,6 +413,11 @@ const ItemBase = (props, ref) => {
             return 'rightIcon';
         return 'icon'; // fallback
     }, [loadingSlot, icon, rightIcon]);
+    const showDescriptions = useMemo(() => {
+        const copyProps = { ...descriptionProps };
+        delete copyProps.id;
+        return !!(description || Object.keys(copyProps).length > 0);
+    }, [description, descriptionProps]);
     // Apply loading state to appropriate slots
     const finalIcon = isLoading && resolvedLoadingSlot === 'icon' ? _jsx(LoadingIcon, {}) : icon;
     const finalRightIcon = isLoading && resolvedLoadingSlot === 'rightIcon' ? (_jsx(LoadingIcon, {})) : (rightIcon);
@@ -398,12 +448,15 @@ const ItemBase = (props, ref) => {
             'with-label': !!(children || labelProps),
             'with-prefix': !!finalPrefix,
             'with-suffix': !!finalSuffix,
-            'with-description': !!description,
-            'with-description-block': !!description && descriptionPlacement === 'block',
+            'with-description': showDescriptions,
+            'with-description-block': showDescriptions && descriptionPlacement === 'block',
+            'with-actions': !!actions,
+            'with-actions-content': !!(actions && actions !== true),
             checkbox: hasCheckbox,
             disabled: finalIsDisabled,
             selected: isSelected === true,
             loading: isLoading,
+            card: isCard === true,
             ...mods,
         };
     }, [
@@ -411,14 +464,21 @@ const ItemBase = (props, ref) => {
         finalRightIcon,
         finalPrefix,
         finalSuffix,
-        description,
+        showDescriptions,
         descriptionPlacement,
         hasCheckbox,
         isSelected,
         isLoading,
+        isCard,
+        actions,
         mods,
     ]);
-    const { labelProps: finalLabelProps, labelRef, renderWithTooltip, } = useAutoTooltip({ tooltip, children, labelProps });
+    const { labelProps: finalLabelProps, labelRef, renderWithTooltip, } = useAutoTooltip({
+        tooltip,
+        children,
+        labelProps,
+        isDynamicLabel: !!actions,
+    });
     // Create a stable render function that doesn't call hooks
     const renderItemElement = useCallback((tooltipTriggerProps, tooltipRef) => {
         // Use callback ref to merge multiple refs without calling hooks
@@ -435,7 +495,11 @@ const ItemBase = (props, ref) => {
                 tooltipRef.current = element;
             }
         };
-        return (_jsxs(ItemBaseElement, { ref: handleRef, variant: theme && type ? `${theme}.${type}` : undefined, disabled: finalIsDisabled, "data-size": size, "data-type": type, "data-theme": theme, "aria-disabled": finalIsDisabled, "aria-selected": isSelected, mods: mods, styles: styles, type: htmlType, ...mergeProps(rest, tooltipTriggerProps || {}), children: [finalIcon && (_jsx("div", { "data-element": "Icon", children: hasCheckbox ? _jsx(CheckIcon, {}) : finalIcon })), finalPrefix && _jsx("div", { "data-element": "Prefix", children: finalPrefix }), children || labelProps ? (_jsx("div", { "data-element": "Label", ...finalLabelProps, ref: labelRef, children: children })) : null, description || descriptionProps ? (_jsx("div", { "data-element": "Description", ...descriptionProps, children: description })) : null, finalSuffix && _jsx("div", { "data-element": "Suffix", children: finalSuffix }), finalRightIcon && (_jsx("div", { "data-element": "RightIcon", children: finalRightIcon }))] }));
+        // Merge custom size style with provided style
+        const finalStyle = typeof size === 'number'
+            ? { ...style, '--size': `${size}px` }
+            : style;
+        return (_jsxs(ItemBaseElement, { ref: handleRef, variant: theme && type ? `${theme}.${type}` : undefined, disabled: finalIsDisabled, "data-size": typeof size === 'number' ? undefined : size, "data-type": type, "data-theme": theme, "aria-disabled": finalIsDisabled, "aria-selected": isSelected, mods: mods, styles: styles, type: htmlType, ...mergeProps(rest, tooltipTriggerProps || {}), style: finalStyle, children: [finalIcon && (_jsx("div", { "data-element": "Icon", children: hasCheckbox ? _jsx(CheckIcon, {}) : finalIcon })), finalPrefix && _jsx("div", { "data-element": "Prefix", children: finalPrefix }), children || labelProps ? (_jsx("div", { "data-element": "Label", ...finalLabelProps, ref: labelRef, children: children })) : null, showDescriptions ? (_jsx("div", { "data-element": "Description", ...descriptionProps, children: description })) : null, finalSuffix && _jsx("div", { "data-element": "Suffix", children: finalSuffix }), finalRightIcon && (_jsx("div", { "data-element": "RightIcon", children: finalRightIcon })), actions && (_jsx("div", { "data-element": "Actions", ...ACTIONS_EVENT_HANDLERS, children: actions !== true ? (_jsx(ItemActionProvider, { type: type, theme: theme, children: actions })) : null }))] }));
     }, [
         ref,
         theme,
@@ -457,10 +521,16 @@ const ItemBase = (props, ref) => {
         descriptionProps,
         finalSuffix,
         finalRightIcon,
+        actions,
+        size,
+        style,
     ]);
     return renderWithTooltip(renderItemElement, defaultTooltipPlacement);
 };
-const _ItemBase = forwardRef(ItemBase);
+const _ItemBase = Object.assign(forwardRef(ItemBase), {
+    Action: ItemAction,
+    Badge: ItemBadge,
+});
 export { _ItemBase as ItemBase };
 
         

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

@@ -1,10 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.84.0
+ * @cube-dev/ui-kit v0.85.1
  * Released under the MIT license.
  */
 
 export * from './ItemBase';
+export * from '../ItemBadge';
 
         

package/es/components/content/List/SectionHeading.js

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

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

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

package/es/components/content/Paragraph.js

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

package/es/components/content/Placeholder/Placeholder.js

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

package/es/components/content/PrismCode/PrismCode.js

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

package/es/components/content/PrismCode/prismSetup.js

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

package/es/components/content/PrismDiffCode/PrismDiffCode.js

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

package/es/components/content/Result/Result.js

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

package/es/components/content/Skeleton/Skeleton.js

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

package/es/components/content/Tag/Tag.js

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

package/es/components/content/Text.js

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

package/es/components/content/Title.js

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

package/es/components/fields/Checkbox/Checkbox.js

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

package/es/components/fields/Checkbox/CheckboxGroup.js

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

package/es/components/fields/Checkbox/context.js

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

package/es/components/fields/Checkbox/index.js

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

package/es/components/fields/ComboBox/ComboBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.84.0
+ * @cube-dev/ui-kit v0.85.1
  * Released under the MIT license.
  */
 
@@ -13,6 +13,7 @@ import { useEvent } from '../../../_internal';
 import { CloseIcon, DirectionIcon, LoadingIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
 import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
+import { chainRaf } from '../../../utils/raf';
 import { generateRandomId } from '../../../utils/random';
 import { mergeProps, useCombinedRefs, useLayoutEffect, } from '../../../utils/react';
 import { useFocus } from '../../../utils/react/interactions';
@@ -34,6 +35,13 @@ const InputElement = tasty({
     as: 'input',
     styles: DEFAULT_INPUT_STYLES,
 });
+const ComboBoxOverlayWrapper = tasty({
+    qa: 'ComboBoxOverlayWrapper',
+    styles: {
+        position: 'absolute',
+        zIndex: 1000,
+    },
+});
 const ComboBoxOverlayElement = tasty({
     qa: 'ComboBoxOverlay',
     styles: {
@@ -41,7 +49,7 @@ const ComboBoxOverlayElement = tasty({
         gridRows: '1sf',
         gridColumns: '1sf',
         width: '$min-width max-content 50vw',
-        height: 'initial max-content (50vh - $size)',
+        height: 'initial max-content (50vh - 5x)',
         overflow: 'auto',
         background: '#white',
         radius: '1cr',
@@ -348,9 +356,9 @@ function useComboBoxKeyboard({ isPopoverOpen, listStateRef, hasResults, allowsCu
     });
     return { keyboardProps };
 }
-const ComboBoxInput = forwardRef(function ComboBoxInput({ qa, inputRef, id, value, placeholder, isDisabled, isReadOnly, autoFocus, size, mods, inputStyles, keyboardProps, focusProps, onChange, onFocus, isPopoverOpen, hasResults, comboBoxId, listStateRef, }, ref) {
+const ComboBoxInput = forwardRef(function ComboBoxInput({ qa, inputRef, id, value, placeholder, isDisabled, isReadOnly, autoFocus, autoComplete, size, mods, inputStyles, keyboardProps, focusProps, onChange, onFocus, isPopoverOpen, hasResults, comboBoxId, listStateRef, }, ref) {
     const combinedRef = useCombinedRefs(ref, inputRef);
-    return (_jsx(InputElement, { ref: combinedRef, qa: qa, id: id, type: "text", value: value, placeholder: placeholder, isDisabled: isDisabled, readOnly: isReadOnly, autoFocus: autoFocus, "data-autofocus": autoFocus ? '' : undefined, onChange: onChange, onFocus: onFocus, onBlur: focusProps.onBlur, ...keyboardProps, styles: inputStyles, mods: mods, "data-size": size, role: "combobox", "aria-expanded": isPopoverOpen && hasResults, "aria-haspopup": "listbox", "aria-controls": isPopoverOpen && hasResults
+    return (_jsx(InputElement, { ref: combinedRef, qa: qa, id: id, type: "text", value: value, placeholder: placeholder, isDisabled: isDisabled, readOnly: isReadOnly, autoFocus: autoFocus, autoComplete: autoComplete, "data-autofocus": autoFocus ? '' : undefined, onChange: onChange, onFocus: onFocus, onBlur: focusProps.onBlur, ...keyboardProps, styles: inputStyles, mods: mods, "data-size": size, role: "combobox", "aria-expanded": isPopoverOpen && hasResults, "aria-haspopup": "listbox", "aria-controls": isPopoverOpen && hasResults
             ? `ComboBoxListBox-${comboBoxId}`
             : undefined, "aria-activedescendant": isPopoverOpen &&
             hasResults &&
@@ -358,7 +366,7 @@ const ComboBoxInput = forwardRef(function ComboBoxInput({ qa, inputRef, id, valu
             ? `ListBoxItem-${listStateRef.current?.selectionManager.focusedKey}`
             : undefined }));
 });
-function ComboBoxOverlay({ isOpen, triggerRef, popoverRef, listBoxRef, direction, shouldFlip, overlayOffset, comboBoxWidth, comboBoxId, overlayStyles, listBoxStyles, optionStyles, sectionStyles, headingStyles, effectiveSelectedKey, isDisabled, disabledKeys, items, children, listStateRef, onSelectionChange, onClose, label, ariaLabel, compositeFocusProps, filter, }) {
+function ComboBoxOverlay({ isOpen, triggerRef, popoverRef, listBoxRef, direction, shouldFlip, overlayOffset, comboBoxWidth, comboBoxId, overlayStyles, listBoxStyles, optionStyles, sectionStyles, headingStyles, effectiveSelectedKey, isDisabled, disabledKeys, items, children, listStateRef, onSelectionChange, onClose, label, ariaLabel, compositeFocusProps, filter, size = 'medium', }) {
     // Overlay positioning
     const { overlayProps: overlayPositionProps, placement, updatePosition, } = useOverlayPosition({
         targetRef: triggerRef,
@@ -383,31 +391,26 @@ function ComboBoxOverlay({ isOpen, triggerRef, popoverRef, listBoxRef, direction
             return false;
         },
     }, popoverRef);
-    // Update position when overlay opens
+    // Update position when overlay opens or content changes
     useLayoutEffect(() => {
-        if (isOpen) {
-            // Use double RAF to ensure layout is complete before positioning
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    updatePosition?.();
-                });
-            });
-        }
-    }, [isOpen, updatePosition]);
+        if (isOpen && updatePosition) {
+            // Use triple RAF to ensure layout is complete before positioning
+            // This gives enough time for the DisplayTransition and content to render
+            return chainRaf(() => {
+                updatePosition();
+            }, 3);
+        }
+    }, [isOpen]);
     // Extract primary placement direction for consistent styling
     const placementDirection = placement?.split(' ')[0] || direction;
-    const overlayContent = (_jsx(DisplayTransition, { isShown: isOpen, children: ({ phase, isShown, ref: transitionRef }) => (_jsx(ComboBoxOverlayElement, { ...mergeProps(overlayPositionProps, overlayBehaviorProps, compositeFocusProps), ref: (value) => {
-                transitionRef(value);
-                popoverRef.current = value;
-            }, "data-placement": placementDirection, "data-phase": phase, mods: {
-                open: isShown,
-                hidden: phase === 'unmounted',
-            }, styles: overlayStyles, style: {
-                '--min-width': comboBoxWidth ? `${comboBoxWidth}px` : undefined,
-                ...overlayPositionProps.style,
-            }, children: _jsx(ListBox, { ref: listBoxRef, focusOnHover: true, disableSelectionToggle: true, id: `ComboBoxListBox-${comboBoxId}`, "aria-label": ariaLabel || (typeof label === 'string' ? label : 'Options'), selectedKey: effectiveSelectedKey, selectionMode: "single", isDisabled: isDisabled, disabledKeys: disabledKeys, shouldUseVirtualFocus: true, items: items, filter: filter, styles: listBoxStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, stateRef: listStateRef, mods: {
-                    popover: true,
-                }, onSelectionChange: onSelectionChange, children: children }) })) }));
+    const overlayContent = (_jsx(DisplayTransition, { isShown: isOpen, children: ({ phase, isShown, ref: transitionRef }) => (_jsx(ComboBoxOverlayWrapper, { ...mergeProps(overlayPositionProps, overlayBehaviorProps, compositeFocusProps), ref: popoverRef, style: overlayPositionProps.style, children: _jsx(ComboBoxOverlayElement, { ref: transitionRef, "data-placement": placementDirection, "data-phase": phase, mods: {
+                    open: isShown,
+                    hidden: phase === 'unmounted',
+                }, styles: overlayStyles, style: {
+                    '--min-width': comboBoxWidth ? `${comboBoxWidth}px` : undefined,
+                }, children: _jsx(ListBox, { ref: listBoxRef, focusOnHover: true, disableSelectionToggle: true, id: `ComboBoxListBox-${comboBoxId}`, "aria-label": ariaLabel || (typeof label === 'string' ? label : 'Options'), selectedKey: effectiveSelectedKey, selectionMode: "single", isDisabled: isDisabled, disabledKeys: disabledKeys, shouldUseVirtualFocus: true, items: items, filter: filter, styles: listBoxStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, stateRef: listStateRef, size: "medium", mods: {
+                        popover: true,
+                    }, onSelectionChange: onSelectionChange, children: children }) }) })) }));
     return _jsx(Portal, { children: overlayContent });
 }
 // ============================================================================
@@ -428,7 +431,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
             };
         },
     });
-    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, id, icon, prefix, isDisabled, autoFocus, wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, fieldStyles, suffix, hideTrigger, message, description, size = 'medium', direction = 'bottom', shouldFlip = true, popoverTrigger = 'input', suffixPosition = 'before', filter, styles, labelSuffix, selectedKey, defaultSelectedKey, inputValue, defaultInputValue, onInputChange, isClearable, onClear, placeholder, allowsCustomValue, shouldCommitOnBlur = true, clearOnBlur, items, children: renderChildren, sectionStyles, headingStyles, isReadOnly, overlayOffset = 8, onSelectionChange: externalOnSelectionChange, sortSelectedToTop: sortSelectedToTopProp, onFocus, onBlur, onKeyDown, form, ...otherProps } = props;
+    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, id, icon, prefix, isDisabled, autoFocus, autoComplete = 'off', wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, fieldStyles, suffix, hideTrigger, message, description, size = 'medium', direction = 'bottom', shouldFlip = true, popoverTrigger = 'input', suffixPosition = 'before', filter, styles, labelSuffix, selectedKey, defaultSelectedKey, inputValue, defaultInputValue, onInputChange, isClearable, onClear, placeholder, allowsCustomValue, shouldCommitOnBlur = true, clearOnBlur, items, children: renderChildren, sectionStyles, headingStyles, isReadOnly, overlayOffset = 8, onSelectionChange: externalOnSelectionChange, sortSelectedToTop: sortSelectedToTopProp, onFocus, onBlur, onKeyDown, form, ...otherProps } = props;
     // Generate a unique ID for this combobox instance
     const comboBoxId = useMemo(() => generateRandomId(), []);
     // State management hook
@@ -961,7 +964,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
     }, [shouldShowPopover, ensureInitialFocus]);
     const comboBoxField = (_jsxs(ComboBoxWrapperElement, { ref: wrapperRef, mods: mods, styles: styles, style: {
             zIndex: isFocused ? 1 : 'initial',
-        }, "data-size": size, ...compositeFocusProps, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx(ComboBoxInput, { qa: qa || 'ComboBox', inputRef: inputRef, id: id, value: effectiveInputValue, placeholder: placeholder, isDisabled: isDisabled, isReadOnly: isReadOnly, autoFocus: autoFocus, size: size, mods: mods, inputStyles: inputStyles, keyboardProps: keyboardProps, focusProps: { ...focusProps, onBlur: handleInputBlur }, isPopoverOpen: isPopoverOpen, hasResults: hasResults, comboBoxId: comboBoxId, listStateRef: listStateRef, onChange: handleInputChange, onFocus: handleInputFocus }), _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState || isLoading ? (_jsxs(_Fragment, { children: [validationState && !isLoading ? validation : null, isLoading ? _jsx(LoadingIcon, {}) : null] })) : null, suffixPosition === 'after' ? suffix : null, showClearButton && (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: size, theme: validationState === 'invalid' ? 'danger' : undefined, qa: "ComboBoxClearButton", "data-no-trigger": hideTrigger ? '' : undefined, "aria-label": "Clear value", onPress: clearValue })), !hideTrigger ? (_jsx(ItemAction, { ref: triggerRef, "data-popover-trigger": true, icon: _jsx(DirectionIcon, { to: isPopoverOpen ? 'up' : 'down' }), qa: "ComboBoxTrigger", mods: {
+        }, "data-size": size, ...compositeFocusProps, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx(ComboBoxInput, { qa: qa || 'ComboBox', inputRef: inputRef, id: id, value: effectiveInputValue, placeholder: placeholder, isDisabled: isDisabled, isReadOnly: isReadOnly, autoFocus: autoFocus, autoComplete: autoComplete, size: size, mods: mods, inputStyles: inputStyles, keyboardProps: keyboardProps, focusProps: { ...focusProps, onBlur: handleInputBlur }, isPopoverOpen: isPopoverOpen, hasResults: hasResults, comboBoxId: comboBoxId, listStateRef: listStateRef, onChange: handleInputChange, onFocus: handleInputFocus }), _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState || isLoading ? (_jsxs(_Fragment, { children: [validationState && !isLoading ? validation : null, isLoading ? _jsx(LoadingIcon, {}) : null] })) : null, suffixPosition === 'after' ? suffix : null, showClearButton && (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: size, theme: validationState === 'invalid' ? 'danger' : undefined, qa: "ComboBoxClearButton", "data-no-trigger": hideTrigger ? '' : undefined, "aria-label": "Clear value", onPress: clearValue })), !hideTrigger ? (_jsx(ItemAction, { ref: triggerRef, "data-popover-trigger": true, icon: _jsx(DirectionIcon, { to: isPopoverOpen ? 'up' : 'down' }), qa: "ComboBoxTrigger", mods: {
                             pressed: isPopoverOpen,
                             disabled: isDisabled,
                             loading: isLoading,
@@ -977,7 +980,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
                                     }
                                 }
                             }
-                        } })) : null] }), _jsx(ComboBoxOverlay, { isOpen: shouldShowPopover, triggerRef: wrapperRef, popoverRef: popoverRef, listBoxRef: listBoxRef, direction: direction, shouldFlip: shouldFlip, overlayOffset: overlayOffset, comboBoxWidth: comboBoxWidth, comboBoxId: comboBoxId, overlayStyles: overlayStyles, listBoxStyles: listBoxStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, effectiveSelectedKey: effectiveSelectedKey, isDisabled: isDisabled, disabledKeys: props.disabledKeys, items: sortedItems, listStateRef: listStateRef, label: label, ariaLabel: props['aria-label'], compositeFocusProps: compositeFocusProps, filter: filterFn, onSelectionChange: handleSelectionChange, onClose: () => setIsPopoverOpen(false), children: children })] }));
+                        } })) : null] }), _jsx(ComboBoxOverlay, { isOpen: shouldShowPopover, triggerRef: wrapperRef, popoverRef: popoverRef, listBoxRef: listBoxRef, direction: direction, shouldFlip: shouldFlip, overlayOffset: overlayOffset, comboBoxWidth: comboBoxWidth, comboBoxId: comboBoxId, overlayStyles: overlayStyles, listBoxStyles: listBoxStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, effectiveSelectedKey: effectiveSelectedKey, isDisabled: isDisabled, disabledKeys: props.disabledKeys, items: sortedItems, listStateRef: listStateRef, label: label, ariaLabel: props['aria-label'], compositeFocusProps: compositeFocusProps, filter: filterFn, size: size, onSelectionChange: handleSelectionChange, onClose: () => setIsPopoverOpen(false), children: children })] }));
     const { children: _, ...propsWithoutChildren } = props;
     const finalProps = {
         ...propsWithoutChildren,

package/es/components/fields/ComboBox/index.js

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

package/es/components/fields/DatePicker/DateInput.js

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

package/es/components/fields/DatePicker/DateInputBase.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.84.0
+ * @cube-dev/ui-kit v0.85.1
  * Released under the MIT license.
  */
 
@@ -38,7 +38,7 @@ const DateInputElement = tasty({
 });
 function DateInputBase(props, ref) {
     let inputRef = useRef(null);
-    let { isDisabled, inputStyles, children, fieldProps, style, disableFocusRing, autoFocus, validationState, isLoading, size = 'medium', } = props;
+    let { isDisabled, inputStyles, children, fieldProps, style, disableFocusRing, autoFocus, validationState, isLoading, size = 'medium', suffix, } = props;
     let styles = extractStyles(props, CONTAINER_STYLES);
     let { focusProps, isFocused } = useFocusRing({
         isTextInput: true,
@@ -52,7 +52,8 @@ function DateInputBase(props, ref) {
             disabled: isDisabled,
             focused: isFocused && !disableFocusRing,
             invalid: isInvalid,
-        }, ...mergeProps(fieldProps ?? {}, focusProps), style: style, children: [_jsx("div", { "data-element": "Contents", role: "presentation", children: _jsx(DateInputElement, { ref: mergeRefs(ref, inputRef), "data-size": size, role: "presentation", styles: inputStyles, children: children }) }), validationState && !isLoading ? validation : undefined] }));
+            suffix: (validationState && !isLoading) || isLoading || !!suffix,
+        }, ...mergeProps(fieldProps ?? {}, focusProps), style: style, children: [_jsx("div", { "data-element": "Contents", role: "presentation", children: _jsx(DateInputElement, { ref: mergeRefs(ref, inputRef), "data-size": size, role: "presentation", styles: inputStyles, children: children }) }), (validationState && !isLoading) || isLoading || suffix ? (_jsxs("div", { "data-element": "Suffix", children: [(validationState && !isLoading) || isLoading ? (_jsx("div", { "data-element": "State", children: validationState && !isLoading ? validation : null })) : null, suffix] })) : null] }));
 }
 const _DateInputBase = React.forwardRef(DateInputBase);
 _DateInputBase.displayName = 'DateInputBase';