@cube-dev/ui-kit 0.84.0 → 0.85.1

package/es/components/fields/DatePicker/DatePicker.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.
  */
 
@@ -17,7 +17,6 @@ import { Calendar } from '../../other/Calendar/Calendar';
 import { Dialog, DialogTrigger } from '../../overlays/Dialog';
 import { DateInputBase } from './DateInputBase';
 import { DatePickerButton } from './DatePickerButton';
-import { DatePickerElement } from './DatePickerElement';
 import { DatePickerInput } from './DatePickerInput';
 import { dateMessages } from './intl';
 import { DEFAULT_DATE_PROPS } from './props';
@@ -61,7 +60,7 @@ function DatePicker(props, ref) {
         : null;
     let showTimeField = !!timeGranularity;
     // let visibleMonths = useVisibleMonths(maxVisibleMonths);
-    const component = (_jsxs(DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, mods: { focused: isFocused && !isFocusedButton }, ...focusProps, children: [_jsx(DateInputBase, { disableFocusRing: true, radius: "left", border: "top left bottom", isDisabled: isDisabled, validationState: validationState, size: size, children: _jsx(DatePickerInput, { useLocale: useLocaleProp, ...fieldProps }) }), _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: props.shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(buttonProps, focusPropsButton), isDisabled: isDisabled }), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(Calendar, { ...calendarProps }), showTimeField && (_jsx(TimeInput, { padding: "1x", label: dateMessages['time'], value: state.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: state.setTimeValue }))] })] })] }));
+    const component = (_jsx(DateInputBase, { ref: targetRef, styles: props.wrapperStyles, disableFocusRing: isFocusedButton, isDisabled: isDisabled, validationState: validationState, size: size, ...focusProps, suffix: _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: props.shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(buttonProps, focusPropsButton), isDisabled: isDisabled }), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(Calendar, { ...calendarProps }), showTimeField && (_jsx(TimeInput, { padding: "1x", label: dateMessages['time'], value: state.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: state.setTimeValue }))] })] }), children: _jsx(DatePickerInput, { useLocale: useLocaleProp, ...fieldProps }) }));
     return wrapWithField(component, domRef, {
         ...props,
         styles,

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

@@ -1,21 +1,16 @@
 /**
  * @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.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CalendarIcon } from '../../../icons';
 import { tasty } from '../../../tasty';
-import { Button } from '../../actions';
-export const DatePickerButton = tasty(Button, {
+import { ItemAction } from '../../actions';
+export const DatePickerButton = tasty(ItemAction, {
     icon: _jsx(CalendarIcon, {}),
-    styles: {
-        radius: '1r right',
-        border: 'top right bottom',
-        backgroundClip: 'content-box',
-    },
 });
 
         

package/es/components/fields/DatePicker/DatePickerElement.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/DatePickerInput.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/DatePickerSegment.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.
  */
 
@@ -22,6 +22,8 @@ const EditableSegmentElement = tasty({
         fontVariantNumeric: 'tabular-nums lining-nums',
         textAlign: 'right',
         font: 'monospace',
+        border: 0,
+        outline: 0,
         color: {
             '': 'inherit',
             ':focus': '#white',

package/es/components/fields/DatePicker/DateRangePicker.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.
  */
 
@@ -18,7 +18,6 @@ import { RangeCalendar } from '../../other/Calendar/RangeCalendar';
 import { Dialog, DialogTrigger } from '../../overlays/Dialog';
 import { DateInputBase } from './DateInputBase';
 import { DatePickerButton } from './DatePickerButton';
-import { DatePickerElement } from './DatePickerElement';
 import { DatePickerInput } from './DatePickerInput';
 import { dateMessages } from './intl';
 import { DEFAULT_DATE_PROPS } from './props';
@@ -70,7 +69,7 @@ function DateRangePicker(props, ref) {
         : null;
     let showTimeField = !!timeGranularity;
     // let visibleMonths = useVisibleMonths(maxVisibleMonths);
-    const component = (_jsxs(DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, mods: { focused: isFocused && !isFocusedButton }, ...focusProps, children: [_jsxs(DateInputBase, { disableFocusRing: true, isDisabled: isDisabled, validationState: validationState, size: size, styles: { radius: 'left', border: 'top left bottom' }, children: [_jsx(DatePickerInput, { useLocale: useLocaleProp, ...startFieldProps }), _jsx(DateRangeDash, {}), _jsx(DatePickerInput, { useLocale: useLocaleProp, ...endFieldProps })] }), _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(buttonProps, focusPropsButton), isDisabled: isDisabled }), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(RangeCalendar, { ...calendarProps }), showTimeField && (_jsxs(Space, { children: [_jsx(TimeInput, { padding: "1x", label: dateMessages['startTime'], value: state.timeRange?.start || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('start', v) }), _jsx(TimeInput, { padding: "1x", label: dateMessages['endTime'], value: state.timeRange?.end || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('end', v) })] }))] })] })] }));
+    const component = (_jsxs(DateInputBase, { ref: targetRef, styles: props.wrapperStyles, disableFocusRing: isFocusedButton, isDisabled: isDisabled, validationState: validationState, size: size, ...focusProps, suffix: _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(buttonProps, focusPropsButton), isDisabled: isDisabled }), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(RangeCalendar, { ...calendarProps }), showTimeField && (_jsxs(Space, { children: [_jsx(TimeInput, { padding: "1x", label: dateMessages['startTime'], value: state.timeRange?.start || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('start', v) }), _jsx(TimeInput, { padding: "1x", label: dateMessages['endTime'], value: state.timeRange?.end || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('end', v) })] }))] })] }), children: [_jsx(DatePickerInput, { useLocale: useLocaleProp, ...startFieldProps }), _jsx(DateRangeDash, {}), _jsx(DatePickerInput, { useLocale: useLocaleProp, ...endFieldProps })] }));
     return wrapWithField(component, domRef, {
         ...props,
         styles,

package/es/components/fields/DatePicker/DateRangeSeparatedPicker.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.
  */
 
@@ -26,7 +26,7 @@ import { useFocusManagerRef } from './utils';
 const DateRangeDash = tasty({
     'aria-hidden': 'true',
     'data-qa': 'DateRangeDash',
-    children: '––',
+    children: '–',
     styles: {
         padding: '0 .5x',
         color: '#dark-03',
@@ -114,9 +114,13 @@ function DateRangeSeparatedPicker(props, ref) {
             endState.setOpen(false);
         }
     }
-    const component = (_jsxs(DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, children: [_jsxs(DatePickerElement, { ...startFocusRingProps.focusProps, mods: { focused: startFocusRingProps.isFocused }, children: [_jsx(DateInputBase, { disableFocusRing: true, isDisabled: isDisabled, validationState: validationState, size: size, styles: { radius: 'left', border: 'top left bottom' }, children: _jsx(DatePickerInput, { useLocale: useLocaleProp, ...startFieldProps }) }), _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: startState.isOpen, shouldFlip: props.shouldFlip, onOpenChange: startState.setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(startProps.buttonProps, startFocusProps.focusProps), isDisabled: isDisabled }), _jsxs(Dialog, { ...startProps.dialogProps, width: "max-content", children: [_jsx(Calendar, { ...startProps.calendarProps, defaultFocusedValue: state.value?.start || state.value?.end || undefined, selectedRange: state.value?.start && state.value?.end ? state.value : undefined, onChange: (value) => onChange(value, 'start') }), showTimeField && (_jsx(TimeInput, { padding: "1x", label: dateMessages['time'], value: startState.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: startState.setTimeValue }))] })] })] }), _jsx(DateRangeDash, {}), _jsxs(DatePickerElement, { ...endFocusRingProps.focusProps, mods: { focused: endFocusRingProps.isFocused }, children: [_jsx(DateInputBase, { disableFocusRing: true, isDisabled: isDisabled, validationState: validationState, size: size, radius: "left", border: "top left bottom", children: _jsx(DatePickerInput, { useLocale: useLocaleProp, ...endFieldProps }) }), _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: endState.isOpen, shouldFlip: props.shouldFlip, onOpenChange: endState.setOpen, children: [_jsx(DatePickerButton, { "aria-label": "Show calendar for the end date", size: size, ...mergeProps(endFocusProps.focusProps, endProps.buttonProps), isDisabled: isDisabled }), _jsxs(Dialog, { ...endProps.dialogProps, width: "max-content", children: [_jsx(Calendar, { ...endProps.calendarProps, defaultFocusedValue: state.value?.end || state.value?.start || undefined, selectedRange: state.value?.start && state.value?.end ? state.value : undefined, onChange: (value) => {
-                                            onChange(value, 'end');
-                                        } }), showTimeField && (_jsx(TimeInput, { padding: "1x", label: dateMessages['time'], value: endState.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: endState.setTimeValue }))] })] })] })] }));
+    const component = (_jsxs(DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, children: [_jsx(DateInputBase, { disableFocusRing: startFocusProps.isFocused, isDisabled: isDisabled, validationState: validationState, size: size, ...startFocusRingProps.focusProps, suffix: _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: startState.isOpen, shouldFlip: props.shouldFlip, onOpenChange: startState.setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(startProps.buttonProps, startFocusProps.focusProps), isDisabled: isDisabled }), _jsxs(Dialog, { ...startProps.dialogProps, width: "max-content", children: [_jsx(Calendar, { ...startProps.calendarProps, defaultFocusedValue: state.value?.start || state.value?.end || undefined, selectedRange: state.value?.start && state.value?.end
+                                        ? state.value
+                                        : undefined, onChange: (value) => onChange(value, 'start') }), showTimeField && (_jsx(TimeInput, { padding: "1x", label: dateMessages['time'], value: startState.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: startState.setTimeValue }))] })] }), children: _jsx(DatePickerInput, { useLocale: useLocaleProp, ...startFieldProps }) }), _jsx(DateRangeDash, {}), _jsx(DateInputBase, { disableFocusRing: endFocusProps.isFocused, isDisabled: isDisabled, validationState: validationState, size: size, ...endFocusRingProps.focusProps, suffix: _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: endState.isOpen, shouldFlip: props.shouldFlip, onOpenChange: endState.setOpen, children: [_jsx(DatePickerButton, { "aria-label": "Show calendar for the end date", size: size, ...mergeProps(endFocusProps.focusProps, endProps.buttonProps), isDisabled: isDisabled }), _jsxs(Dialog, { ...endProps.dialogProps, width: "max-content", children: [_jsx(Calendar, { ...endProps.calendarProps, defaultFocusedValue: state.value?.end || state.value?.start || undefined, selectedRange: state.value?.start && state.value?.end
+                                        ? state.value
+                                        : undefined, onChange: (value) => {
+                                        onChange(value, 'end');
+                                    } }), showTimeField && (_jsx(TimeInput, { padding: "1x", label: dateMessages['time'], value: endState.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: endState.setTimeValue }))] })] }), children: _jsx(DatePickerInput, { useLocale: useLocaleProp, ...endFieldProps }) })] }));
     return wrapWithField(component, domRef, {
         ...props,
         styles,

package/es/components/fields/DatePicker/TimeInput.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/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/intl.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/parseDate.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/props.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/types.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/utils.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/FileInput/FileInput.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/FilterListBox/FilterListBox.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.
  */
 
@@ -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(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: "medium", 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.84.0
+ * @cube-dev/ui-kit v0.85.1
  * 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.84.0
+ * @cube-dev/ui-kit v0.85.1
  * Released under the MIT license.
  */
 
@@ -449,7 +449,6 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         });
         return (_jsx(ItemButton, { ref: triggerRef, "data-popover-trigger": true, qa: qa || 'FilterPicker', id: id, type: type, theme: validationState === 'invalid' ? 'danger' : theme, size: size, isDisabled: isDisabled || isLoading, mods: {
                 placeholder: !hasSelection,
-                selected: hasSelection,
                 ...externalMods,
             }, icon: icon, rightIcon: isLoading ? (_jsx(LoadingIcon, {})) : rightIcon !== undefined ? (rightIcon) : showClearButton ? (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: size, theme: validationState === 'invalid' ? 'danger' : undefined, qa: "FilterPickerClearButton", mods: { pressed: false }, onPress: clearValue })) : (_jsx(DirectionIcon, { to: state.isOpen ? 'top' : 'bottom' })), prefix: prefix, suffix: suffix, hotkeys: hotkeys, tooltip: triggerTooltip, description: triggerDescription, descriptionPlacement: descriptionPlacement, styles: styles, ...keyboardProps, "aria-label": `${props['aria-label'] ?? props.label ?? ''}`, children: renderTriggerContent() }));
     };

package/es/components/fields/FilterPicker/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/Input/Input.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/Input/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/ListBox/ListBox.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.
  */
 
@@ -17,7 +17,7 @@ import { CheckIcon } from '../../../icons';
 import { Icon } from '../../../icons/index';
 import { useProviderProps } from '../../../provider';
 import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
-import { SIZES } from '../../../tokens';
+import { SIZES, SIZES_MAP } from '../../../tokens';
 import { mergeProps, useCombinedRefs } from '../../../utils/react';
 import { useFocus } from '../../../utils/react/interactions';
 // Import Menu styled components for header and footer
@@ -454,7 +454,7 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
             if (currentItem?.props?.description) {
                 return SIZES.XL + 1;
             }
-            return size === 'large' ? SIZES.XL + 1 : SIZES.MD + 1;
+            return SIZES[SIZES_MAP[size]] + 1;
         },
         measureElement: (el) => {
             return el.offsetHeight + 1;

package/es/components/fields/ListBox/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/NumberInput/NumberInput.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/NumberInput/StepButton.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/PasswordInput/PasswordInput.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.
  */
 
@@ -11,7 +11,7 @@ import { useTextField } from 'react-aria';
 import { EyeIcon, EyeInvisibleIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
-import { Button } from '../../actions';
+import { ItemAction } from '../../actions';
 import { useFieldProps } from '../../form';
 import { TextInputBase } from '../TextInput';
 function PasswordInput(props, ref) {
@@ -35,7 +35,7 @@ function PasswordInput(props, ref) {
     const toggleType = useCallback(() => {
         setType((type) => (type === 'password' ? 'text' : 'password'));
     }, []);
-    const wrappedSuffix = (_jsxs(_Fragment, { children: [suffix, _jsx(Button, { excludeFromTabOrder: true, type: "neutral", htmlType: "button", placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", icon: type === 'password' ? _jsx(EyeInvisibleIcon, {}) : _jsx(EyeIcon, {}), onPress: toggleType })] }));
+    const wrappedSuffix = (_jsxs(_Fragment, { children: [suffix, _jsx(ItemAction, { type: "neutral", tooltip: "Toggle masking", icon: type === 'password' ? _jsx(EyeInvisibleIcon, {}) : _jsx(EyeIcon, {}), onPress: toggleType })] }));
     return (_jsx(TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...rest }));
 }
 /**