@cube-dev/ui-kit 0.85.2 → 0.87.0

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

@@ -1,37 +1,20 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.2
+ * @cube-dev/ui-kit v0.87.0
  * Released under the MIT license.
  */
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import THEMES from '../../../data/themes';
 import { CloseIcon } from '../../../icons';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
-import { Action } from '../../actions';
-import { Suffix } from '../../layout/Suffix';
-const TagElement = tasty({
+import { tasty } from '../../../tasty';
+import { Item } from '../Item';
+const TagElement = tasty(Item, {
     qa: 'Tag',
     role: 'status',
     styles: {
-        position: 'relative',
-        display: 'inline-flex',
-        gap: '.5x',
-        placeContent: 'center',
-        placeItems: 'center start',
-        radius: '1r',
-        preset: 'tag',
-        boxSizing: 'border-box',
-        width: '2.5x max-content max-content',
-        height: 'min-content',
-        textAlign: 'left',
-        whiteSpace: 'nowrap',
-        padding: {
-            '': '0 (.5x - 1bw)',
-            closable: '0 (2.5x - 1bw) 0 (.75x - 1bw)',
-        },
         fill: {
             '': '#dark.04',
             ...Object.keys(THEMES).reduce((map, type) => {
@@ -53,34 +36,12 @@ const TagElement = tasty({
                 return map;
             }, {}),
         },
-        Content: {
-            display: 'block',
-            width: 'max 100%',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            pointerEvents: 'none',
-        },
-    },
-});
-const CloseAction = tasty(Action, {
-    label: 'Close',
-    styles: {
-        display: 'grid',
-        placeItems: 'center',
-        color: true,
-        placeSelf: 'stretch',
-        opacity: {
-            '': 0.85,
-            'pressed | hovered': 1,
-        },
-        transition: 'opacity',
-        padding: '0 .5x',
     },
 });
 function Tag(allProps, ref) {
-    let { type, theme, icon, isClosable, onClose, closeButtonStyles, children, mods, ...props } = allProps;
-    const styles = extractStyles(props, CONTAINER_STYLES);
-    return (_jsxs(TagElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, "data-type": theme ?? type, mods: { ...mods, closable: isClosable }, children: [icon, _jsx("div", { "data-element": "Content", children: children }), isClosable ? (_jsx(Suffix, { outerGap: "0", children: _jsx(CloseAction, { styles: closeButtonStyles, onPress: onClose, children: _jsx(CloseIcon, { size: 12, stroke: 3 }) }) })) : undefined] }));
+    let { type, theme, isClosable, onClose, closeButtonStyles, children, size = 'inline', mods, ...props } = allProps;
+    const tagTheme = theme ?? type;
+    return (_jsx(TagElement, { ref: ref, size: size, "data-type": tagTheme, type: tagTheme === 'special' ? 'primary' : 'neutral', mods: mods, actions: isClosable ? (_jsx(Item.Action, { "aria-label": "Close", styles: { color: 'currentColor', ...closeButtonStyles }, icon: _jsx(CloseIcon, {}), onPress: onClose })) : undefined, ...props, children: children }));
 }
 const _Tag = forwardRef(Tag);
 _Tag.displayName = 'Tag';

package/es/components/content/Text.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.2
+ * @cube-dev/ui-kit v0.87.0
  * 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.85.2
+ * @cube-dev/ui-kit v0.87.0
  * 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.85.2
+ * @cube-dev/ui-kit v0.87.0
  * 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.85.2
+ * @cube-dev/ui-kit v0.87.0
  * 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.85.2
+ * @cube-dev/ui-kit v0.87.0
  * 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.85.2
+ * @cube-dev/ui-kit v0.87.0
  * 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.85.2
+ * @cube-dev/ui-kit v0.87.0
  * Released under the MIT license.
  */
 
@@ -18,10 +18,9 @@ import { generateRandomId } from '../../../utils/random';
 import { mergeProps, useCombinedRefs, useLayoutEffect, } from '../../../utils/react';
 import { useFocus } from '../../../utils/react/interactions';
 import { useEventBus } from '../../../utils/react/useEventBus';
-import { ItemAction } from '../../actions';
+import { CollectionItem as Item } from '../../CollectionItem';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { DisplayTransition } from '../../helpers';
-import { Item } from '../../Item';
 import { Portal } from '../../portal';
 import { InvalidIcon } from '../../shared/InvalidIcon';
 import { ValidIcon } from '../../shared/ValidIcon';
@@ -964,7 +963,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, 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: {
+        }, "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(Item.Action, { 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(Item.Action, { ref: triggerRef, "data-popover-trigger": true, icon: _jsx(DirectionIcon, { to: isPopoverOpen ? 'up' : 'down' }), qa: "ComboBoxTrigger", mods: {
                             pressed: isPopoverOpen,
                             disabled: isDisabled,
                             loading: isLoading,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/es/components/fields/FileInput/FileInput.js

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

package/es/components/fields/FilterListBox/FilterListBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.2
+ * @cube-dev/ui-kit v0.87.0
  * Released under the MIT license.
  */
 
@@ -66,12 +66,9 @@ const SearchInputElement = tasty({
         ...DEFAULT_INPUT_STYLES,
         fill: '#clear',
         padding: {
-            '': '.5x $inline-padding',
-            prefix: '0 $inline-padding 0 .5x',
+            '': '.5x 1.5x',
+            prefix: '0 1.5x 0 .5x',
         },
-        '$inline-padding': 'max($min-inline-padding, (($size - 1lh) / 2 + $inline-compensation))',
-        '$inline-compensation': '1x',
-        '$min-inline-padding': '1x',
     },
 });
 const StyledHeaderWithoutBorder = tasty(StyledHeader, {

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

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

package/es/components/fields/FilterPicker/FilterPicker.js

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

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

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

package/es/components/fields/Input/Input.js

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

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

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

package/es/components/fields/ListBox/ListBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.2
+ * @cube-dev/ui-kit v0.87.0
  * Released under the MIT license.
  */
 
@@ -22,9 +22,9 @@ import { mergeProps, useCombinedRefs } from '../../../utils/react';
 import { useFocus } from '../../../utils/react/interactions';
 // Import Menu styled components for header and footer
 import { StyledDivider, StyledFooter, StyledHeader, StyledSectionHeading, } from '../../actions/Menu/styled';
-import { ItemBase } from '../../content/ItemBase/ItemBase';
+import { CollectionItem } from '../../CollectionItem';
+import { Item } from '../../content/Item/Item';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
-import { Item } from '../../Item';
 const ListBoxWrapperElement = tasty({
     qa: 'ListBox',
     styles: {
@@ -77,8 +77,8 @@ const ListBoxScrollElement = tasty({
         scrollbar: 'styled',
     },
 });
-// Create an extended ItemBase for ListBox options with 'all' modifier support
-const ListBoxItemBase = tasty(ItemBase, {
+// Create an extended Item for ListBox options with 'all' modifier support
+const ListBoxItem = tasty(Item, {
     as: 'li',
     styles: {
         margin: {
@@ -207,7 +207,8 @@ const SelectAllOption = ({ label = 'Select All', isSelected, isIndeterminate, is
             onClick?.(true);
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(ListBoxItemBase, { ref: localRef, "data-size": size, size: size, role: "option", "aria-selected": isSelected, isSelected: isSelected, isDisabled: isDisabled, icon: checkboxIcon, mods: {
+    return (_jsxs(_Fragment, { children: [_jsx(ListBoxItem, { ref: localRef, "data-size": size, size: size, role: "option", "aria-selected": isSelected, isSelected: isSelected, isDisabled: isDisabled, icon: checkboxIcon, mods: {
+                    listboxitem: true,
                     disabled: isDisabled,
                     checkable: isCheckable,
                     hovered: isHovered,
@@ -467,41 +468,35 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
             rowVirtualizer.measure();
         }
     }, [shouldVirtualize, itemsArray, rowVirtualizer]);
-    // Keep focused item visible when virtualizing, but only for keyboard navigation
-    useEffect(() => {
-        if (!shouldVirtualize)
-            return;
+    // Keep focused item visible, but only for keyboard navigation
+    useLayoutEffect(() => {
         const focusedKey = listState.selectionManager.focusedKey;
-        if (focusedKey != null) {
-            const idx = itemsArrayRef.current.findIndex((it) => it.key === focusedKey);
-            if (idx !== -1) {
-                // Check if the focused item is actually visible in the current viewport
-                // (not just rendered due to overscan)
-                const scrollElement = scrollRef.current;
-                if (scrollElement) {
-                    const scrollTop = scrollElement.scrollTop;
-                    const viewportHeight = scrollElement.clientHeight;
-                    const viewportBottom = scrollTop + viewportHeight;
-                    // Find the virtual item for this index
-                    const virtualItems = rowVirtualizer.getVirtualItems();
-                    const virtualItem = virtualItems.find((item) => item.index === idx);
-                    let isAlreadyVisible = false;
-                    if (virtualItem) {
-                        const itemTop = virtualItem.start;
-                        const itemBottom = virtualItem.start + virtualItem.size;
-                        // Check if the item is fully visible in the viewport
-                        // We should scroll if the item is partially hidden
-                        isAlreadyVisible =
-                            itemTop >= scrollTop && itemBottom <= viewportBottom;
-                    }
-                    // Only scroll if the item is not already visible AND the focus change was due to keyboard navigation
-                    if (!isAlreadyVisible && lastFocusSourceRef.current === 'keyboard') {
-                        rowVirtualizer.scrollToIndex(idx, { align: 'auto' });
-                    }
-                }
-            }
+        if (focusedKey == null)
+            return;
+        // Only scroll on keyboard navigation
+        if (lastFocusSourceRef.current !== 'keyboard')
+            return;
+        const scrollElement = scrollRef.current;
+        if (!scrollElement)
+            return;
+        const itemElement = scrollElement.querySelector(`[data-key="${CSS.escape(String(focusedKey))}"]`);
+        if (!itemElement)
+            return;
+        const scrollTop = scrollElement.scrollTop;
+        const viewportHeight = scrollElement.clientHeight;
+        const viewportBottom = scrollTop + viewportHeight;
+        const itemRect = itemElement.getBoundingClientRect();
+        const scrollRect = scrollElement.getBoundingClientRect();
+        // Calculate item position relative to scroll container
+        const itemTop = itemRect.top - scrollRect.top + scrollTop;
+        const itemBottom = itemTop + itemRect.height;
+        // Check if the item is fully visible in the viewport
+        const isAlreadyVisible = itemTop >= scrollTop && itemBottom <= viewportBottom;
+        if (!isAlreadyVisible) {
+            // Use scrollIntoView with block: 'nearest' to minimize scroll jumps
+            itemElement.scrollIntoView({ block: 'nearest', behavior: 'auto' });
         }
-    }, [shouldVirtualize, listState.selectionManager.focusedKey, itemsArray]);
+    }, [listState.selectionManager.focusedKey, itemsArray]);
     // Merge React Aria listbox props with custom keyboard props so both sets of
     // event handlers (e.g. Arrow navigation *and* our Escape handler) are
     // preserved.
@@ -526,7 +521,7 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
         props.selectionMode,
         externalMods,
     ]);
-    const listBoxField = (_jsxs(ListBoxWrapperElement, { ref: ref, qa: "ListBoxWrapper", mods: mods, styles: styles, children: [header ? (_jsx(StyledHeader, { styles: headerStyles, "data-size": size, children: header })) : (_jsx("div", { role: "presentation" })), showSelectAll && props.selectionMode === 'multiple' ? (_jsx(SelectAllOption, { label: selectAllLabel || 'Select All', state: listState, lastFocusSourceRef: lastFocusSourceRef, isSelected: selectAllState.isSelected, isIndeterminate: selectAllState.isIndeterminate, isDisabled: isDisabled, isCheckable: isCheckable, size: size, allValueProps: allValueProps, onClick: handleSelectAllClick })) : (_jsxs(_Fragment, { children: [_jsx("div", { role: "presentation" }), _jsx("div", { role: "presentation" })] })), _jsx(ListBoxScrollElement, { ref: scrollRef, mods: mods, ...focusProps, children: listState.collection.size === 0 ? (_jsx(ItemBase, { preset: "t4", color: "#dark-03", size: size, padding: "(.5x - 1bw)", children: emptyLabel })) : (_jsx(ListElement, { qa: qa || 'ListBox', ...mergedListBoxProps, ref: listRef, styles: listStyles, "aria-disabled": isDisabled || undefined, mods: { sections: hasSections }, style: shouldVirtualize
+    const listBoxField = (_jsxs(ListBoxWrapperElement, { ref: ref, qa: "ListBoxWrapper", mods: mods, styles: styles, children: [header ? (_jsx(StyledHeader, { styles: headerStyles, "data-size": size, children: header })) : (_jsx("div", { role: "presentation" })), showSelectAll && props.selectionMode === 'multiple' ? (_jsx(SelectAllOption, { label: selectAllLabel || 'Select All', state: listState, lastFocusSourceRef: lastFocusSourceRef, isSelected: selectAllState.isSelected, isIndeterminate: selectAllState.isIndeterminate, isDisabled: isDisabled, isCheckable: isCheckable, size: size, allValueProps: allValueProps, onClick: handleSelectAllClick })) : (_jsxs(_Fragment, { children: [_jsx("div", { role: "presentation" }), _jsx("div", { role: "presentation" })] })), _jsx(ListBoxScrollElement, { ref: scrollRef, mods: mods, ...focusProps, children: listState.collection.size === 0 ? (_jsx(Item, { preset: "t4", color: "#dark-03", size: size, padding: "(.5x - 1bw)", children: emptyLabel })) : (_jsx(ListElement, { qa: qa || 'ListBox', ...mergedListBoxProps, ref: listRef, styles: listStyles, "aria-disabled": isDisabled || undefined, mods: { sections: hasSections }, style: shouldVirtualize
                         ? {
                             position: 'relative',
                             height: `${rowVirtualizer.getTotalSize() + 3}px`,
@@ -660,7 +655,7 @@ function Option({ size = 'medium', item, state, styles, isParentDisabled, valida
     // Filter out React Aria props that shouldn't reach the DOM
     const { onKeyDown, onKeyUp, tabIndex, 'aria-selected': ariaSelected, 'aria-disabled': ariaDisabled, role, ...filteredOptionProps } = optionProps;
     const theme = { valid: 'success', invalid: 'danger' }[validationState] || 'default';
-    return (_jsx(ListBoxItemBase, { ref: combinedRef, qa: item.props?.qa, id: `ListBoxItem-${String(item.key)}`, ...mergeProps(filteredOptionProps, hoverProps, {
+    return (_jsx(ListBoxItem, { ref: combinedRef, qa: item.props?.qa, id: `ListBoxItem-${String(item.key)}`, "data-key": String(item.key), ...mergeProps(filteredOptionProps, hoverProps, {
             onClick: handleOptionClick,
             onKeyDown,
             onKeyUp,
@@ -669,6 +664,7 @@ function Option({ size = 'medium', item, state, styles, isParentDisabled, valida
             'aria-disabled': ariaDisabled,
             role,
         }), theme: theme, style: virtualStyle, "data-size": size, "data-index": virtualIndex, size: size, isSelected: isSelected, isDisabled: isDisabled, icon: effectiveIcon, rightIcon: item.props?.rightIcon, hotkeys: item.props?.hotkeys, suffix: item.props?.suffix, description: item.props?.description, descriptionPlacement: item.props?.descriptionPlacement, labelProps: labelProps, descriptionProps: descriptionProps, styles: styles, tooltip: item.props?.tooltip, defaultTooltipPlacement: "right", mods: {
+            listboxitem: true,
             focused: isFocused,
             pressed: isPressed,
             valid: isSelected && validationState === 'valid',
@@ -692,7 +688,7 @@ function ListBoxSection(props) {
 const ListBoxSectionComponent = Object.assign(BaseSection, {
     displayName: 'Section',
 });
-ListBox.Item = Item;
+ListBox.Item = CollectionItem;
 ListBox.Section = ListBoxSectionComponent;
 Object.defineProperty(ListBox, 'cubeInputType', {
     value: 'ListBox',

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

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

package/es/components/fields/NumberInput/NumberInput.js

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

package/es/components/fields/NumberInput/StepButton.js

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

package/es/components/fields/PasswordInput/PasswordInput.js

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

package/es/components/fields/Picker/Picker.js

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