@cube-dev/ui-kit 0.0.0-canary-6fbaa0d → 0.0.0-canary-7b7ab98

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-6fbaa0d
+ * @cube-dev/ui-kit v0.0.0-canary-7b7ab98
  * Released under the MIT license.
  */
 
@@ -15,7 +15,7 @@ import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '
 import { mergeProps, modAttrs, useCombinedRefs } from '../../../utils/react';
 import { useFocus } from '../../../utils/react/interactions';
 import { StyledHeader } from '../../actions/Menu/styled';
-import { ItemBase } from '../../content/ItemBase';
+import { Item as ItemElement } from '../../content/Item';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { ListBox } from '../ListBox/ListBox';
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, } from '../TextInput/TextInputBase';
@@ -240,70 +240,34 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
     // or the default `contains` helper from `useFilter`.
     // When filter={false}, disable filtering completely.
     const textFilterFn = useMemo(() => (filter === false ? () => true : filter || contains), [filter, contains]);
-    // Filter children based on search value
-    const filteredChildren = useMemo(() => {
+    // Create a filter function for collection nodes (similar to ComboBox pattern)
+    const filterFn = useCallback((nodes) => {
         const term = searchValue.trim();
-        if (!term || !mergedChildren) {
-            return mergedChildren;
+        // Don't filter if no search term
+        if (!term) {
+            return nodes;
         }
-        // Helper to check if a node matches the search term
-        const nodeMatches = (node) => {
-            if (!node?.props)
-                return false;
-            // Get text content from the node
-            const textValue = node.props.textValue ||
-                (typeof node.props.children === 'string' ? node.props.children : '') ||
-                String(node.props.children || '');
-            return textFilterFn(textValue, term);
-        };
-        // Helper to filter React children recursively
-        const filterChildren = (childNodes) => {
-            if (!childNodes)
-                return null;
-            const childArray = Array.isArray(childNodes) ? childNodes : [childNodes];
-            const filteredNodes = [];
-            childArray.forEach((child) => {
-                if (!child || typeof child !== 'object') {
-                    return;
-                }
-                // Handle ListBox.Section
-                if (child.type === BaseSection ||
-                    child.type?.displayName === 'Section') {
-                    const sectionChildren = Array.isArray(child.props.children)
-                        ? child.props.children
-                        : [child.props.children];
-                    const filteredSectionChildren = sectionChildren.filter((sectionChild) => {
-                        return (sectionChild &&
-                            typeof sectionChild === 'object' &&
-                            nodeMatches(sectionChild));
-                    });
-                    if (filteredSectionChildren.length > 0) {
-                        // Store filtered children in a way that doesn't require cloning the section
-                        const filteredSection = {
-                            ...child,
-                            filteredChildren: filteredSectionChildren,
-                        };
-                        filteredNodes.push(filteredSection);
-                    }
+        // Filter nodes based on their textValue and preserve section structure
+        return [...nodes]
+            .map((node) => {
+            if (node.type === 'section' && node.childNodes) {
+                const filteredNodes = [...node.childNodes].filter((child) => textFilterFn(child.textValue || '', term));
+                if (filteredNodes.length === 0) {
+                    return null;
                 }
-                // Handle ListBox.Item
-                else if (child.type === Item) {
-                    if (nodeMatches(child)) {
-                        filteredNodes.push(child);
-                    }
-                }
-                // Handle other components
-                else if (nodeMatches(child)) {
-                    filteredNodes.push(child);
-                }
-            });
-            return filteredNodes;
-        };
-        return filterChildren(mergedChildren);
-    }, [mergedChildren, searchValue, textFilterFn]);
+                return {
+                    ...node,
+                    childNodes: filteredNodes,
+                    hasChildNodes: true,
+                };
+            }
+            return textFilterFn(node.textValue || '', term) ? node : null;
+        })
+            .filter(Boolean);
+    }, [searchValue, textFilterFn]);
     // Handle custom values if allowed
     const enhancedChildren = useMemo(() => {
-        let childrenToProcess = filteredChildren;
+        let childrenToProcess = mergedChildren;
         // Handle custom values if allowed
         if (!allowsCustomValue)
             return childrenToProcess;
@@ -339,34 +303,15 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
             return [childrenToProcess, customOption];
         }
         return customOption;
-    }, [allowsCustomValue, filteredChildren, mergedChildren, searchValue]);
-    // Convert custom objects back to React elements for rendering
-    const finalChildren = useMemo(() => {
-        if (!enhancedChildren)
-            return enhancedChildren;
-        const convertToReactElements = (nodes) => {
-            if (!nodes)
-                return nodes;
-            const nodeArray = Array.isArray(nodes) ? nodes : [nodes];
-            return nodeArray.map((node, index) => {
-                if (!node || typeof node !== 'object') {
-                    return node;
-                }
-                // Handle our custom filtered section objects
-                if (node.filteredChildren) {
-                    const childrenToUse = node.filteredChildren;
-                    // Return the original section but with the processed children
-                    return React.cloneElement(node, {
-                        key: node.key || index,
-                        children: childrenToUse,
-                    });
-                }
-                // Handle regular React elements
-                return node;
-            });
-        };
-        return convertToReactElements(enhancedChildren);
-    }, [enhancedChildren]);
+    }, [
+        allowsCustomValue,
+        mergedChildren,
+        searchValue,
+        customKeys,
+        localCollectionState.collection,
+        customValueProps,
+        newCustomValueProps,
+    ]);
     styles = extractStyles(otherProps, PROP_STYLES, styles);
     ref = useCombinedRefs(ref);
     searchInputRef = useCombinedRefs(searchInputRef);
@@ -387,14 +332,11 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
             return;
         const { selectionManager, collection } = listState;
         // Helper to collect visible item keys (supports sections)
+        // Collection is already filtered by React Stately via filterFn
         const collectVisibleKeys = (nodes, out) => {
-            const term = searchValue.trim();
             for (const node of nodes) {
                 if (node.type === 'item') {
-                    const text = node.textValue ?? String(node.rendered ?? '');
-                    if (!term || textFilterFn(text, term)) {
-                        out.push(node.key);
-                    }
+                    out.push(node.key);
                 }
                 else if (node.childNodes) {
                     collectVisibleKeys(node.childNodes, out);
@@ -415,7 +357,7 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
         }
         // Set focus to the first visible item
         selectionManager.setFocusedKey(visibleKeys[0]);
-    }, [searchValue, enhancedChildren, textFilterFn]);
+    }, [searchValue, enhancedChildren]);
     // Keyboard navigation handler for search input
     const { keyboardProps } = useKeyboard({
         onKeyDown: (e) => {
@@ -426,14 +368,11 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
                     return;
                 const { selectionManager, collection } = listState;
                 // Helper to collect visible item keys (supports sections)
+                // Collection is already filtered by React Stately via filterFn
                 const collectVisibleKeys = (nodes, out) => {
-                    const term = searchValue.trim();
                     for (const node of nodes) {
                         if (node.type === 'item') {
-                            const text = node.textValue ?? String(node.rendered ?? '');
-                            if (!term || textFilterFn(text, term)) {
-                                out.push(node.key);
-                            }
+                            out.push(node.key);
                         }
                         else if (node.childNodes) {
                             collectVisibleKeys(node.childNodes, out);
@@ -493,14 +432,11 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
                     return;
                 const { selectionManager, collection } = listState;
                 // Helper to collect visible item keys (supports sections)
+                // Collection is already filtered by React Stately via filterFn
                 const collectVisibleKeys = (nodes, out) => {
-                    const term = searchValue.trim();
                     for (const node of nodes) {
                         if (node.type === 'item') {
-                            const text = node.textValue ?? String(node.rendered ?? '');
-                            if (!term || textFilterFn(text, term)) {
-                                out.push(node.key);
-                            }
+                            out.push(node.key);
                         }
                         else if (node.childNodes) {
                             collectVisibleKeys(node.childNodes, out);
@@ -569,10 +505,18 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
         isLoading,
         externalMods,
     ]);
-    const hasResults = enhancedChildren &&
-        (Array.isArray(enhancedChildren)
-            ? enhancedChildren.length > 0
-            : enhancedChildren !== null);
+    const hasResults = useMemo(() => {
+        if (!listStateRef.current?.collection)
+            return !!enhancedChildren;
+        // Collection is already filtered by React Stately, just check if it has items
+        for (const node of listStateRef.current.collection) {
+            if (node.type === 'item')
+                return true;
+            if (node.childNodes && [...node.childNodes].length > 0)
+                return true;
+        }
+        return false;
+    }, [listStateRef.current?.collection, enhancedChildren, searchValue]);
     const showEmptyMessage = !hasResults && searchValue.trim();
     // Handler must be defined before we render ListBox so we can pass it.
     const handleSelectionChange = (selection) => {
@@ -621,7 +565,7 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
                     const value = e.target.value;
                     handleSearchChange(value);
                 }, ...keyboardProps, ...modAttrs(mods) })] }));
-    const filterListBoxField = (_jsxs(FilterListBoxWrapperElement, { ref: ref, qa: "FilterListBoxWrapper", ...modAttrs(mods), styles: styles, ...focusProps, children: [header ? (_jsx(StyledHeaderWithoutBorder, { "data-size": size, styles: headerStyles, children: header })) : (_jsx("div", { role: "presentation" })), searchInput, showEmptyMessage ? (_jsx(ItemBase, { preset: "t4", color: "#dark-03", size: size, padding: "(.5x - 1bw)", children: emptyLabel !== undefined ? emptyLabel : 'No results found' })) : (_jsx(ListBox, { ref: listBoxRef, "aria-label": innerAriaLabel, selectedKey: selectedKey, defaultSelectedKey: defaultSelectedKey, selectedKeys: selectedKeys, defaultSelectedKeys: defaultSelectedKeys, selectionMode: selectionMode, isDisabled: isDisabled, listRef: listRef, stateRef: listStateRef, listStyles: listStyles, shouldFocusWrap: shouldFocusWrap, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, validationState: validationState, disallowEmptySelection: props.disallowEmptySelection, disabledKeys: props.disabledKeys, focusOnHover: focusOnHover, shouldUseVirtualFocus: true, showSelectAll: showSelectAll, selectAllLabel: selectAllLabel, footer: footer, footerStyles: footerStyles, mods: mods, size: size, styles: listBoxStyles, isCheckable: isCheckable, items: items, allValueProps: allValueProps, onSelectionChange: handleSelectionChange, onEscape: onEscape, onOptionClick: handleOptionClick, children: finalChildren }))] }));
+    const filterListBoxField = (_jsxs(FilterListBoxWrapperElement, { ref: ref, qa: "FilterListBoxWrapper", ...modAttrs(mods), styles: styles, ...focusProps, children: [header ? (_jsx(StyledHeaderWithoutBorder, { "data-size": size, styles: headerStyles, children: header })) : (_jsx("div", { role: "presentation" })), searchInput, showEmptyMessage ? (_jsx(ItemElement, { preset: "t4", color: "#dark-03", size: size, padding: "(.5x - 1bw)", children: emptyLabel !== undefined ? emptyLabel : 'No results found' })) : (_jsx(ListBox, { ref: listBoxRef, "aria-label": innerAriaLabel, selectedKey: selectedKey, defaultSelectedKey: defaultSelectedKey, selectedKeys: selectedKeys, defaultSelectedKeys: defaultSelectedKeys, selectionMode: selectionMode, isDisabled: isDisabled, listRef: listRef, stateRef: listStateRef, listStyles: listStyles, shouldFocusWrap: shouldFocusWrap, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, validationState: validationState, disallowEmptySelection: props.disallowEmptySelection, disabledKeys: props.disabledKeys, focusOnHover: focusOnHover, shouldUseVirtualFocus: true, showSelectAll: showSelectAll, selectAllLabel: selectAllLabel, footer: footer, footerStyles: footerStyles, mods: mods, size: size, styles: listBoxStyles, isCheckable: isCheckable, items: items, allValueProps: allValueProps, filter: filterFn, onSelectionChange: handleSelectionChange, onEscape: onEscape, onOptionClick: handleOptionClick, children: enhancedChildren }))] }));
     const finalProps = { ...props, styles: undefined };
     return wrapWithField(filterListBoxField, ref, mergeProps(finalProps, {}));
 });

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

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

package/es/components/fields/LegacyComboBox/LegacyComboBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-6fbaa0d
+ * @cube-dev/ui-kit v0.0.0-canary-7b7ab98
  * Released under the MIT license.
  */
 
@@ -17,9 +17,8 @@ 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 { Item } from '../../Item';
 import { OverlayWrapper } from '../../overlays/OverlayWrapper';
 import { InvalidIcon } from '../../shared/InvalidIcon';
 import { ValidIcon } from '../../shared/ValidIcon';
@@ -267,7 +266,7 @@ export const LegacyComboBox = forwardRef(function LegacyComboBox(props, ref) {
     let allInputProps = useMemo(() => mergeProps(inputProps, hoverProps, focusProps), [inputProps, hoverProps, focusProps]);
     let comboBoxField = (_jsxs(LegacyComboBoxWrapperElement, { ref: wrapperRef, qa: qa || 'LegacyComboBox', mods: mods, styles: wrapperStyles, style: {
             zIndex: isFocused ? 1 : 'initial',
-        }, "data-size": size, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx(InputElement, { ref: inputRef, qa: "Input", autoFocus: autoFocus, "data-autofocus": autoFocus ? '' : undefined, ...allInputProps, autoComplete: autoComplete, styles: inputStyles, mods: mods, "data-size": size }), _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: "LegacyComboBoxClearButton", "data-no-trigger": hideTrigger ? '' : undefined, onPress: clearValue })), !hideTrigger ? (_jsx(TriggerElement, { "data-popover-trigger": true, qa: "LegacyComboBoxTrigger", ...mergeProps(buttonProps, triggerFocusProps, triggerHoverProps), ref: triggerRef, mods: {
+        }, "data-size": size, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx(InputElement, { ref: inputRef, qa: "Input", autoFocus: autoFocus, "data-autofocus": autoFocus ? '' : undefined, ...allInputProps, autoComplete: autoComplete, styles: inputStyles, mods: mods, "data-size": size }), _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: "LegacyComboBoxClearButton", "data-no-trigger": hideTrigger ? '' : undefined, onPress: clearValue })), !hideTrigger ? (_jsx(TriggerElement, { "data-popover-trigger": true, qa: "LegacyComboBoxTrigger", ...mergeProps(buttonProps, triggerFocusProps, triggerHoverProps), ref: triggerRef, mods: {
                             pressed: isTriggerPressed,
                             focused: isTriggerFocused,
                             hovered: isTriggerHovered,

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-6fbaa0d
+ * @cube-dev/ui-kit v0.0.0-canary-7b7ab98
  * 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.0.0-canary-6fbaa0d
+ * @cube-dev/ui-kit v0.0.0-canary-7b7ab98
  * 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,
@@ -660,7 +661,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)}`, ...mergeProps(filteredOptionProps, hoverProps, {
             onClick: handleOptionClick,
             onKeyDown,
             onKeyUp,
@@ -669,6 +670,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 +694,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.0.0-canary-6fbaa0d
+ * @cube-dev/ui-kit v0.0.0-canary-7b7ab98
  * 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.0.0-canary-6fbaa0d
+ * @cube-dev/ui-kit v0.0.0-canary-7b7ab98
  * 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.0.0-canary-6fbaa0d
+ * @cube-dev/ui-kit v0.0.0-canary-7b7ab98
  * 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.0.0-canary-6fbaa0d
+ * @cube-dev/ui-kit v0.0.0-canary-7b7ab98
  * 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.0.0-canary-6fbaa0d
+ * @cube-dev/ui-kit v0.0.0-canary-7b7ab98
  * Released under the MIT license.
  */
 

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

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

package/es/components/fields/RadioGroup/Radio.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-6fbaa0d
+ * @cube-dev/ui-kit v0.0.0-canary-7b7ab98
  * Released under the MIT license.
  */
 
@@ -13,13 +13,13 @@ import { useProviderProps } from '../../../provider';
 import { extractStyles, filterBaseProps, OUTER_STYLES, tasty, } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
 import { useFocus } from '../../../utils/react/interactions';
-import { ItemBase } from '../../content/ItemBase/ItemBase';
+import { Item } from '../../content/Item/Item';
 import { INLINE_LABEL_STYLES, useFieldProps, useFormProps } from '../../form';
 import { HiddenInput } from '../../HiddenInput';
 import { useRadioProvider } from './context';
 import { RadioGroup } from './RadioGroup';
 export { useRadio };
-const RadioButtonElement = tasty(ItemBase, {
+const RadioButtonElement = tasty(Item, {
     qa: 'RadioButton',
     as: 'label',
     styles: {
@@ -135,9 +135,7 @@ function Radio(props, ref) {
     // Determine effective size with priority: prop > context > default
     let effectiveSize = (size ??
         contextSize ??
-        (effectiveType === 'tabs'
-            ? 'small'
-            : 'medium'));
+        (effectiveType === 'tabs' ? 'small' : 'medium'));
     // Apply size mapping for tabs mode button radios
     if (effectiveType === 'tabs' && isButton) {
         if (effectiveSize === 'small' || effectiveSize === 'medium') {
@@ -196,7 +194,7 @@ function Radio(props, ref) {
         isFocused,
         effectiveType,
     ]);
-    // Render button type using ItemBase
+    // Render button type using Item
     if (isButton) {
         const ButtonElement = isRadioSelected && contextType === 'tabs'
             ? TabRadioButtonSelectedElement

package/es/components/fields/RadioGroup/RadioGroup.js

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

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

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

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

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

package/es/components/fields/SearchInput/SearchInput.js

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

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

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

package/es/components/fields/Select/Select.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-6fbaa0d
+ * @cube-dev/ui-kit v0.0.0-canary-7b7ab98
  * Released under the MIT license.
  */
 
@@ -19,10 +19,10 @@ import { useFocus } from '../../../utils/react/interactions';
 import { useEventBus } from '../../../utils/react/useEventBus';
 import { ItemAction } from '../../actions';
 import { StyledDivider as ListDivider, StyledSectionHeading as ListSectionHeading, StyledSection as ListSectionWrapper, } from '../../actions/Menu/styled';
-import { ItemBase } from '../../content/ItemBase';
+import { CollectionItem } from '../../CollectionItem';
+import { Item } from '../../content/Item';
 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';
@@ -44,7 +44,7 @@ const SelectWrapperElement = tasty({
         },
     },
 });
-const SelectTrigger = tasty(ItemBase, {
+const SelectTrigger = tasty(Item, {
     as: 'button',
     qa: 'Trigger',
     styles: {
@@ -69,8 +69,8 @@ export const ListBoxElement = tasty({
         scrollbar: 'styled',
     },
 });
-// Use ItemBase for options to unify item visuals and reduce custom styling
-const OptionItem = tasty(ItemBase, {
+// Use Item for options to unify item visuals and reduce custom styling
+const OptionItem = tasty(Item, {
     as: 'li',
     qa: 'Option',
     styles: {
@@ -315,6 +315,7 @@ function Option({ item, state, styles, shouldUseVirtualFocus, size }) {
     let { isFocused, focusProps } = useFocus({ isDisabled });
     const { qa, description, icon, prefix, suffix, rightIcon, descriptionPlacement, tooltip, styles: itemStyles, } = (item?.props || {});
     return (_jsx(OptionItem, { ...mergeProps(optionProps, focusProps), ref: ref, qa: qa, mods: {
+            listboxitem: true,
             selected: isSelected,
             focused: shouldUseVirtualFocus ? isVirtualFocused : isFocused,
             disabled: isDisabled,
@@ -338,7 +339,7 @@ const SelectSectionComponent = Object.assign(BaseSection, {
     displayName: 'Section',
 });
 const __Select = Object.assign(_Select, {
-    Item,
+    Item: CollectionItem,
     Section: SelectSectionComponent,
 });
 __Select.displayName = 'Select';

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

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

package/es/components/fields/Slider/Gradation.js

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