@cube-dev/ui-kit 0.85.0 → 0.85.2

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.0
+ * @cube-dev/ui-kit v0.85.2
  * Released under the MIT license.
  */
 
@@ -15,7 +15,6 @@ 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 { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { ListBox } from '../ListBox/ListBox';
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, } from '../TextInput/TextInputBase';
@@ -240,70 +239,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 +302,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 +331,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 +356,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 +367,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 +431,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,11 +504,6 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
         isLoading,
         externalMods,
     ]);
-    const hasResults = enhancedChildren &&
-        (Array.isArray(enhancedChildren)
-            ? enhancedChildren.length > 0
-            : enhancedChildren !== null);
-    const showEmptyMessage = !hasResults && searchValue.trim();
     // Handler must be defined before we render ListBox so we can pass it.
     const handleSelectionChange = (selection) => {
         if (allowsCustomValue) {
@@ -621,7 +551,11 @@ 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, _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, emptyLabel: searchValue.trim()
+                    ? emptyLabel !== undefined
+                        ? emptyLabel
+                        : 'No results found'
+                    : 'No items', 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.85.0
+ * @cube-dev/ui-kit v0.85.2
  * 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.0
+ * @cube-dev/ui-kit v0.85.2
  * 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.0
+ * @cube-dev/ui-kit v0.85.2
  * 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.0
+ * @cube-dev/ui-kit v0.85.2
  * 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.0
+ * @cube-dev/ui-kit v0.85.2
  * 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.0
+ * @cube-dev/ui-kit v0.85.2
  * 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
@@ -240,7 +240,7 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
             return fieldProps;
         },
     });
-    let { qa, label, extra, id, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, listStyles, optionStyles, sectionStyles, headingStyles, listRef, message, description, styles, mods: externalMods, size = 'medium', labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, onSelectionChange, disableSelectionToggle = false, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, onEscape, isCheckable, onOptionClick, showSelectAll, selectAllLabel, allValueProps, filter, form, ...otherProps } = props;
+    let { qa, label, extra, id, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, listStyles, optionStyles, sectionStyles, headingStyles, listRef, message, description, styles, mods: externalMods, size = 'medium', labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, onSelectionChange, disableSelectionToggle = false, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, onEscape, isCheckable, onOptionClick, showSelectAll, selectAllLabel, allValueProps, filter, emptyLabel = 'No items', form, ...otherProps } = props;
     const [, forceUpdate] = useState({});
     const lastSelectedKeyRef = useRef(null);
     // Wrap onSelectionChange to prevent selection when disabled and handle React Aria's Set format
@@ -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;
@@ -526,7 +526,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: _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(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
                         ? {
                             position: 'relative',
                             height: `${rowVirtualizer.getTotalSize() + 3}px`,
@@ -561,7 +561,7 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
                                 }
                             }
                             return renderedItems;
-                        })() }) }), footer ? (_jsx(StyledFooter, { styles: footerStyles, "data-size": size, children: footer })) : (_jsx("div", { role: "presentation" }))] }));
+                        })() })) }), footer ? (_jsx(StyledFooter, { styles: footerStyles, "data-size": size, children: footer })) : (_jsx("div", { role: "presentation" }))] }));
     const finalProps = { ...props, styles: undefined };
     return wrapWithField(listBoxField, ref, mergeProps(finalProps, {}));
 });

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.0
+ * @cube-dev/ui-kit v0.85.2
  * 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.0
+ * @cube-dev/ui-kit v0.85.2
  * 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.0
+ * @cube-dev/ui-kit v0.85.2
  * 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.0
+ * @cube-dev/ui-kit v0.85.2
  * 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.0
+ * @cube-dev/ui-kit v0.85.2
  * Released under the MIT license.
  */
 
@@ -364,7 +364,7 @@ export const Picker = forwardRef(function Picker(props, ref) {
                                 ? effectiveSelectedKeys
                                 : undefined, listStyles: listStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, listRef: listRef, disallowEmptySelection: disallowEmptySelection, disabledKeys: disabledKeys, focusOnHover: focusOnHover, shouldFocusWrap: shouldFocusWrap, selectionMode: selectionMode, validationState: validationState, isDisabled: isDisabled, isLoading: isLoading, stateRef: internalListStateRef, isCheckable: isCheckable, mods: {
                                 popover: true,
-                            }, size: size === 'small' ? 'medium' : size, showSelectAll: showSelectAll, selectAllLabel: selectAllLabel, header: header, footer: footer, headerStyles: headerStyles, footerStyles: footerStyles, qa: `${props.qa || 'Picker'}ListBox`, allValueProps: allValueProps, onEscape: () => close(), onOptionClick: (key) => {
+                            }, size: "medium", showSelectAll: showSelectAll, selectAllLabel: selectAllLabel, header: header, footer: footer, headerStyles: headerStyles, footerStyles: footerStyles, qa: `${props.qa || 'Picker'}ListBox`, allValueProps: allValueProps, onEscape: () => close(), onOptionClick: (key) => {
                                 // For Picker, clicking the content area should close the popover
                                 // in multiple selection mode (single mode already closes via onSelectionChange)
                                 if ((selectionMode === 'multiple' && isCheckable) ||

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.0
+ * @cube-dev/ui-kit v0.85.2
  * 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.85.0
+ * @cube-dev/ui-kit v0.85.2
  * 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.85.0
+ * @cube-dev/ui-kit v0.85.2
  * 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.85.0
+ * @cube-dev/ui-kit v0.85.2
  * 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.85.0
+ * @cube-dev/ui-kit v0.85.2
  * 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.85.0
+ * @cube-dev/ui-kit v0.85.2
  * Released under the MIT license.
  */
 
@@ -13,6 +13,7 @@ import { useEvent } from '../../../_internal';
 import { CloseIcon, DirectionIcon, LoadingIcon } from '../../../icons/index';
 import { useProviderProps } from '../../../provider';
 import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty/index';
+import { chainRaf } from '../../../utils/raf';
 import { generateRandomId } from '../../../utils/random';
 import { forwardRefWithGenerics, mergeProps, useCombinedRefs, useLayoutEffect, } from '../../../utils/react/index';
 import { useFocus } from '../../../utils/react/interactions';
@@ -235,15 +236,14 @@ export function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, ove
     const listItemSize = size === 'small' ? 'medium' : size;
     // Update position when overlay opens
     useLayoutEffect(() => {
-        if (state.isOpen) {
-            // Use double RAF to ensure layout is complete before positioning
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    updatePosition?.();
-                });
-            });
+        if (state.isOpen && updatePosition) {
+            // Use triple RAF to ensure layout is complete before positioning
+            // This gives enough time for the DisplayTransition and content to render
+            return chainRaf(() => {
+                updatePosition();
+            }, 3);
         }
-    }, [state.isOpen, updatePosition]);
+    }, [state.isOpen]);
     // Get props for the listbox
     let { listBoxProps } = useListBox({
         autoFocus: state.focusStrategy || true,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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