@cube-dev/ui-kit 0.81.0 → 0.82.1

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

@@ -1,14 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.81.0
+ * @cube-dev/ui-kit v0.82.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { FocusScope, useKeyboard } from 'react-aria';
-import { Section as BaseSection, Item as ReactAriaItem, } from 'react-stately';
+import { Section as BaseSection, useListState } from 'react-stately';
 import { useEvent } from '../../../_internal';
 import { useWarn } from '../../../_internal/hooks/use-warn';
 import { CloseIcon, DirectionIcon, LoadingIcon } from '../../../icons';
@@ -63,7 +63,11 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             return fieldProps;
         },
     });
-    let { qa, label, extra, icon, rightIcon, prefix, suffix, hotkeys, triggerTooltip, triggerDescription, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, descriptionPlacement, placeholder, size = 'medium', styles, listBoxStyles, popoverStyles, type = 'outline', theme = 'default', labelSuffix, shouldFocusWrap, children, shouldFlip = true, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = 'single', listStateRef, focusOnHover, showSelectAll, selectAllLabel = 'All', items, header, footer, headerStyles, footerStyles, triggerStyles, allowsCustomValue, renderSummary, isCheckable, allValueProps, customValueProps, newCustomValueProps, searchPlaceholder, autoFocus, filter, emptyLabel, searchInputStyles, searchInputRef, listStyles, optionStyles, sectionStyles, headingStyles, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, isClearable, searchValue, onSearchChange, ...otherProps } = props;
+    let { qa, label, extra, id, icon, rightIcon, prefix, suffix, hotkeys, triggerTooltip, triggerDescription, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, descriptionPlacement, placeholder, size = 'medium', styles, listBoxStyles, popoverStyles, type = 'outline', theme = 'default', labelSuffix, shouldFocusWrap, children, shouldFlip = true, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = 'single', listStateRef, focusOnHover, showSelectAll, selectAllLabel = 'All', items, header, footer, headerStyles, footerStyles, triggerStyles, allowsCustomValue, renderSummary, isCheckable, allValueProps, customValueProps, newCustomValueProps, searchPlaceholder, autoFocus, filter, emptyLabel, searchInputStyles, searchInputRef, listStyles, optionStyles, sectionStyles, headingStyles, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, isClearable, searchValue, onSearchChange, sortSelectedToTop: sortSelectedToTopProp, form, ...otherProps } = props;
+    // Track if sortSelectedToTop was explicitly provided
+    const sortSelectedToTopExplicit = sortSelectedToTopProp !== undefined;
+    // Default to true if items are provided, false otherwise
+    const sortSelectedToTop = sortSelectedToTopProp ?? (items ? true : false);
     styles = extractStyles(otherProps, PROP_STYLES, styles);
     // Generate a unique ID for this FilterPicker instance
     const filterPickerId = useMemo(() => generateRandomId(), []);
@@ -81,7 +85,6 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     const [internalSelectedKeys, setInternalSelectedKeys] = useState(defaultSelectedKeys ?? []);
     // Track popover open/close and capture children order for session
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-    const cachedChildrenOrder = useRef(null);
     // Cache for sorted items array when using `items` prop
     const cachedItemsOrder = useRef(null);
     const triggerRef = useRef(null);
@@ -92,9 +95,6 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     // session (which caused only the previously selected options to be rendered
     // or the list to appear unsorted).
     // ---------------------------------------------------------------------------
-    useEffect(() => {
-        cachedChildrenOrder.current = null;
-    }, [children]);
     useEffect(() => {
         cachedItemsOrder.current = null;
     }, [items]);
@@ -106,73 +106,47 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     const effectiveSelectedKeys = isControlledMultiple
         ? selectedKeys
         : internalSelectedKeys;
-    // Utility: remove React's ".$" / "." prefixes from element keys so that we
-    // can compare them with user-provided keys.
-    const normalizeKeyValue = (key) => {
-        if (key == null)
-            return '';
-        // React escapes "=" as "=0" and ":" as "=2" when it stores keys internally.
-        // We strip the possible React prefixes first and then un-escape those sequences
-        // so that callers work with the original key values supplied by the user.
-        let str = String(key);
-        // Remove React array/object key prefixes (".$" or ".") if present.
-        if (str.startsWith('.$')) {
-            str = str.slice(2);
-        }
-        else if (str.startsWith('.')) {
-            str = str.slice(1);
-        }
-        // Un-escape React's internal key encodings.
-        return str.replace(/=2/g, ':').replace(/=0/g, '=');
-    };
+    // Create a local collection for label extraction only (not for rendering)
+    // This gives us immediate access to textValue without waiting for FilterListBox
+    const localCollectionState = useListState({
+        children: children,
+        items: items,
+        selectionMode: 'none', // We don't need selection management
+    });
     // ---------------------------------------------------------------------------
-    // Map public-facing keys (without React's "." prefix) to the actual React
-    // element keys that appear in the collection (which usually have the `.$`
-    // or `.` prefix added by React when children are in an array). This ensures
-    // that the key we pass to ListBox exactly matches the keys it receives from
-    // React Aria, so the initial selection is highlighted correctly.
+    // Map user-provided keys to collection keys using the local collection.
+    // The collection handles key normalization internally, so we use direct
+    // string comparison.
     // ---------------------------------------------------------------------------
-    const findReactKey = useCallback((lookup) => {
+    const findCollectionKey = useCallback((lookup) => {
         if (lookup == null)
             return lookup;
-        const normalizedLookup = normalizeKeyValue(lookup);
-        let foundKey = lookup;
-        const traverse = (nodes) => {
-            Children.forEach(nodes, (child) => {
-                if (!child || typeof child !== 'object')
-                    return;
-                const element = child;
-                if (element.key != null) {
-                    if (normalizeKeyValue(element.key) === normalizedLookup) {
-                        foundKey = element.key;
-                    }
-                }
-                if (element.props &&
-                    typeof element.props === 'object' &&
-                    'children' in element.props) {
-                    traverse(element.props.children);
-                }
-            });
-        };
-        if (children)
-            traverse(children);
-        return foundKey;
-    }, [children]);
+        // Direct comparison - collection handles normalization internally
+        for (const item of localCollectionState.collection) {
+            if (String(item.key) === String(lookup)) {
+                return item.key;
+            }
+        }
+        // Fallback: return the lookup key as-is
+        return lookup;
+    }, [localCollectionState.collection]);
     const mappedSelectedKey = useMemo(() => {
         if (selectionMode !== 'single')
             return null;
-        return effectiveSelectedKey ? findReactKey(effectiveSelectedKey) : null;
-    }, [selectionMode, effectiveSelectedKey, findReactKey]);
+        return effectiveSelectedKey
+            ? findCollectionKey(effectiveSelectedKey)
+            : null;
+    }, [selectionMode, effectiveSelectedKey, findCollectionKey]);
     const mappedSelectedKeys = useMemo(() => {
         if (selectionMode !== 'multiple')
             return undefined;
         if (effectiveSelectedKeys === 'all')
             return 'all';
         if (Array.isArray(effectiveSelectedKeys)) {
-            return effectiveSelectedKeys.map((k) => findReactKey(k));
+            return effectiveSelectedKeys.map((k) => findCollectionKey(k));
         }
         return effectiveSelectedKeys;
-    }, [selectionMode, effectiveSelectedKeys, findReactKey]);
+    }, [selectionMode, effectiveSelectedKeys, findCollectionKey]);
     // Given an iterable of keys (array or Set) toggle membership for duplicates
     const processSelectionArray = (iterable) => {
         const resultSet = new Set();
@@ -187,149 +161,53 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         }
         return Array.from(resultSet);
     };
-    // Helper to get selected item labels for display
+    // Helper to get selected item labels for display using local collection
     const getSelectedLabels = () => {
-        // Handle "all" selection - return all available labels
-        if (selectionMode === 'multiple' && effectiveSelectedKeys === 'all') {
+        const collection = localCollectionState.collection;
+        // Helper to recursively collect all item labels from collection (including nested in sections)
+        const collectAllLabels = () => {
             const allLabels = [];
-            // Extract from items prop if available
-            if (items) {
-                const extractFromItems = (itemsArray) => {
-                    itemsArray.forEach((item) => {
-                        if (item && typeof item === 'object') {
-                            const itemObj = item;
-                            if (Array.isArray(itemObj.children)) {
-                                // Section-like object
-                                extractFromItems(itemObj.children);
-                            }
-                            else {
-                                // Regular item - extract label
-                                const label = itemObj.textValue ||
-                                    itemObj.label ||
-                                    (typeof itemObj.children === 'string'
-                                        ? itemObj.children
-                                        : '') ||
-                                    String(itemObj.children ||
-                                        itemObj.key ||
-                                        itemObj.id ||
-                                        item);
-                                allLabels.push(label);
-                            }
-                        }
-                    });
-                };
-                const itemsArray = Array.isArray(items)
-                    ? items
-                    : Array.from(items);
-                extractFromItems(itemsArray);
-                return allLabels;
-            }
-            // Extract from children if available
-            if (children) {
-                const extractAllLabels = (nodes) => {
-                    if (!nodes)
-                        return;
-                    Children.forEach(nodes, (child) => {
-                        if (!child || typeof child !== 'object')
-                            return;
-                        const element = child;
-                        if (element.type === ReactAriaItem) {
-                            const props = element.props;
-                            const label = props.textValue ||
-                                (typeof props.children === 'string' ? props.children : '') ||
-                                String(props.children || '');
-                            allLabels.push(label);
-                        }
-                        if (element.props &&
-                            typeof element.props === 'object' &&
-                            'children' in element.props) {
-                            extractAllLabels(element.props.children);
-                        }
-                    });
-                };
-                extractAllLabels(children);
-                return allLabels;
-            }
+            const traverse = (nodes) => {
+                for (const node of nodes) {
+                    if (node.type === 'item') {
+                        allLabels.push(node.textValue || String(node.key));
+                    }
+                    else if (node.childNodes) {
+                        traverse(node.childNodes);
+                    }
+                }
+            };
+            traverse(collection);
             return allLabels;
+        };
+        // Handle "all" selection - return all available labels
+        if (selectionMode === 'multiple' && effectiveSelectedKeys === 'all') {
+            return collectAllLabels();
         }
         const selectedSet = new Set(selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'
-            ? (effectiveSelectedKeys || []).map((k) => normalizeKeyValue(k))
+            ? (effectiveSelectedKeys || []).map((k) => String(k))
             : effectiveSelectedKey != null
-                ? [normalizeKeyValue(effectiveSelectedKey)]
+                ? [String(effectiveSelectedKey)]
                 : []);
         const labels = [];
         const processedKeys = new Set();
-        // Extract from items prop if available
-        if (items) {
-            const extractFromItems = (itemsArray) => {
-                itemsArray.forEach((item) => {
-                    if (item && typeof item === 'object') {
-                        const itemObj = item;
-                        if (Array.isArray(itemObj.children)) {
-                            // Section-like object
-                            extractFromItems(itemObj.children);
-                        }
-                        else {
-                            // Regular item - check if selected
-                            const itemKey = itemObj.key || itemObj.id;
-                            if (itemKey != null &&
-                                selectedSet.has(normalizeKeyValue(itemKey))) {
-                                const label = itemObj.textValue ||
-                                    itemObj.label ||
-                                    (typeof itemObj.children === 'string'
-                                        ? itemObj.children
-                                        : '') ||
-                                    String(itemObj.children || itemKey);
-                                labels.push(label);
-                                processedKeys.add(normalizeKeyValue(itemKey));
-                            }
-                        }
-                    }
-                });
-            };
-            const itemsArray = Array.isArray(items)
-                ? items
-                : Array.from(items);
-            extractFromItems(itemsArray);
-        }
-        // Extract from children if available (for mixed mode or fallback)
-        if (children) {
-            const extractLabelsWithTracking = (nodes) => {
-                if (!nodes)
-                    return;
-                Children.forEach(nodes, (child) => {
-                    if (!child || typeof child !== 'object')
-                        return;
-                    const element = child;
-                    if (element.type === ReactAriaItem) {
-                        const childKey = String(element.key);
-                        if (selectedSet.has(normalizeKeyValue(childKey))) {
-                            const props = element.props;
-                            const label = props.textValue ||
-                                (typeof props.children === 'string' ? props.children : '') ||
-                                String(props.children || '');
-                            labels.push(label);
-                            processedKeys.add(normalizeKeyValue(childKey));
-                        }
-                    }
-                    if (element.props &&
-                        typeof element.props === 'object' &&
-                        'children' in element.props) {
-                        extractLabelsWithTracking(element.props.children);
-                    }
-                });
-            };
-            extractLabelsWithTracking(children);
-        }
-        // Handle custom values that don't have corresponding items/children
+        // Use collection.getItem() to directly retrieve items by key (works with sections)
+        selectedSet.forEach((key) => {
+            const item = collection.getItem(key);
+            if (item) {
+                labels.push(item.textValue || String(item.key));
+                processedKeys.add(String(item.key));
+            }
+        });
+        // Handle custom values that aren't in the collection
         const selectedKeysArr = selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'
             ? (effectiveSelectedKeys || []).map(String)
             : effectiveSelectedKey != null
                 ? [String(effectiveSelectedKey)]
                 : [];
-        // Add labels for any selected keys that weren't processed (custom values)
+        // Add labels for any selected keys that weren't found in collection (custom values)
         selectedKeysArr.forEach((key) => {
-            if (!processedKeys.has(normalizeKeyValue(key))) {
+            if (!processedKeys.has(String(key))) {
                 // This is a custom value, use the key as the label
                 labels.push(key);
             }
@@ -361,133 +239,22 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     }, []); // run only once on mount
     // Function to sort children with selected items on top
     const getSortedChildren = useCallback(() => {
-        // If children is not provided or is a render function, return it as-is
-        if (!children || typeof children === 'function')
-            return children;
-        // Reuse the cached order if we have it. We only want to compute the sorted
-        // order once per pop-over opening session. The cache is cleared when the
-        // pop-over closes so the next opening can recompute.
-        if (cachedChildrenOrder.current) {
-            return cachedChildrenOrder.current;
-        }
-        // Popover is open – compute (or recompute) the sorted order for this
-        // session.
-        // Determine if there were any selections when the popover was previously closed.
-        const hadSelectionsWhenClosed = selectionMode === 'multiple'
-            ? selectionsWhenClosed.current.multiple.length > 0
-            : selectionsWhenClosed.current.single !== null;
-        // Only apply sorting when there were selections in the previous session.
-        // We intentionally do not depend on the `isPopoverOpen` flag here because that
-        // flag is updated **after** the first render triggered by clicking the
-        // trigger button. Relying on it caused a timing issue where the very first
-        // render of a freshly-opened popover was unsorted. By removing the
-        // `isPopoverOpen` check we ensure items are already sorted during that first
-        // render while still maintaining stable order within an open popover thanks
-        // to the `cachedChildrenOrder` guard above.
-        if (!hadSelectionsWhenClosed) {
-            return children;
+        // Warn if sorting is explicitly requested but not supported
+        if (sortSelectedToTopExplicit && sortSelectedToTop && !items) {
+            console.warn('FilterPicker: sortSelectedToTop only works with the items prop. ' +
+                'Sorting will be skipped when using JSX children.');
         }
-        // Create selected keys set for fast lookup
-        const selectedSet = new Set();
-        if (selectionMode === 'multiple') {
-            if (selectionsWhenClosed.current.multiple === 'all') {
-                // Don't sort when "all" is selected, just return original children
-                return children;
-            }
-            else {
-                selectionsWhenClosed.current.multiple.forEach((key) => selectedSet.add(String(key)));
-            }
-        }
-        else if (selectionMode === 'single' &&
-            selectionsWhenClosed.current.single != null) {
-            selectedSet.add(String(selectionsWhenClosed.current.single));
-        }
-        // Helper function to check if an item is selected
-        const isItemSelected = (child) => {
-            return (child?.key != null && selectedSet.has(normalizeKeyValue(child.key)));
-        };
-        // Helper function to sort children array
-        const sortChildrenArray = (childrenArray) => {
-            const cloneWithNormalizedKey = (item) => cloneElement(item, {
-                key: item.key ? normalizeKeyValue(item.key) : undefined,
-            });
-            const selected = [];
-            const unselected = [];
-            childrenArray.forEach((child) => {
-                if (!child || typeof child !== 'object') {
-                    unselected.push(child);
-                    return;
-                }
-                const element = child;
-                // Handle sections - sort items within each section
-                if (element.type === BaseSection ||
-                    element.type?.displayName === 'Section') {
-                    const props = element.props;
-                    const sectionChildren = Array.isArray(props.children)
-                        ? props.children
-                        : [props.children];
-                    const selectedItems = [];
-                    const unselectedItems = [];
-                    sectionChildren.forEach((sectionChild) => {
-                        if (sectionChild && typeof sectionChild === 'object') {
-                            const sectionElement = sectionChild;
-                            if (sectionElement.type === ReactAriaItem ||
-                                sectionElement.type?.displayName === 'Item') {
-                                const clonedItem = cloneWithNormalizedKey(sectionElement);
-                                if (isItemSelected(sectionElement)) {
-                                    selectedItems.push(clonedItem);
-                                }
-                                else {
-                                    unselectedItems.push(clonedItem);
-                                }
-                            }
-                            else {
-                                unselectedItems.push(sectionChild);
-                            }
-                        }
-                        else {
-                            unselectedItems.push(sectionChild);
-                        }
-                    });
-                    // Create new section with sorted children, preserving React element properly
-                    unselected.push(cloneElement(element, {
-                        ...element.props,
-                        children: [...selectedItems, ...unselectedItems],
-                    }));
-                }
-                // Handle non-section elements (items, dividers, etc.)
-                else {
-                    const clonedItem = cloneWithNormalizedKey(element);
-                    if (isItemSelected(element)) {
-                        selected.push(clonedItem);
-                    }
-                    else {
-                        unselected.push(clonedItem);
-                    }
-                }
-            });
-            return [...selected, ...unselected];
-        };
-        // Sort the children
-        const childrenArray = Children.toArray(children);
-        const sortedChildren = sortChildrenArray(childrenArray);
-        // Cache the sorted order when popover opens or when we compute it for the
-        // first time before opening.
-        if (isPopoverOpen || !cachedChildrenOrder.current) {
-            cachedChildrenOrder.current = sortedChildren;
-        }
-        return sortedChildren;
-    }, [
-        children,
-        effectiveSelectedKeys,
-        effectiveSelectedKey,
-        selectionMode,
-        isPopoverOpen,
-    ]);
+        // Return children as-is (no sorting for JSX children)
+        return children;
+    }, [children, sortSelectedToTop, sortSelectedToTopExplicit, items]);
     // Compute sorted items array when using `items` prop
     const getSortedItems = useCallback(() => {
         if (!items)
             return items;
+        // Only sort if explicitly enabled
+        if (!sortSelectedToTop) {
+            return items;
+        }
         // Reuse the cached order if we have it. We only compute the sorted array
         // once when the pop-over is opened. Cache is cleared on close.
         if (cachedItemsOrder.current) {
@@ -556,6 +323,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         return sorted;
     }, [
         items,
+        sortSelectedToTop,
         selectionMode,
         isPopoverOpen,
         selectionsWhenClosed.current.multiple,
@@ -631,7 +399,6 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                     // Popover just closed – record the latest selection for the next opening
                     // and clear the cached order so the next session can compute afresh.
                     selectionsWhenClosed.current = { ...latestSelectionRef.current };
-                    cachedChildrenOrder.current = null;
                     cachedItemsOrder.current = null;
                 }
             }
@@ -680,7 +447,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             props.onClear?.();
             return false;
         });
-        return (_jsx(ItemButton, { ref: triggerRef, "data-popover-trigger": true, type: type, theme: validationState === 'invalid' ? 'danger' : theme, size: size, isDisabled: isDisabled || isLoading, mods: {
+        return (_jsx(ItemButton, { ref: triggerRef, "data-popover-trigger": true, id: id, type: type, theme: validationState === 'invalid' ? 'danger' : theme, size: size, isDisabled: isDisabled || isLoading, mods: {
                 placeholder: !hasSelection,
                 selected: hasSelection,
                 ...externalMods,
@@ -700,7 +467,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                         gridRows: '1sf',
                         width: '30x max-content 50vw',
                         ...popoverStyles,
-                    }, children: _jsx(FocusScope, { restoreFocus: true, children: _jsx(FilterListBox, { autoFocus: true, items: items ? finalItems : undefined, "aria-label": `${props['aria-label'] ?? props.label ?? ''} Picker`, selectedKey: selectionMode === 'single' ? mappedSelectedKey : undefined, selectedKeys: selectionMode === 'multiple' ? mappedSelectedKeys : undefined, searchPlaceholder: searchPlaceholder, filter: filter, searchValue: searchValue, listStyles: listStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, listRef: listRef, disallowEmptySelection: disallowEmptySelection, emptyLabel: emptyLabel, searchInputStyles: searchInputStyles, searchInputRef: searchInputRef, disabledKeys: disabledKeys, focusOnHover: focusOnHover, shouldFocusWrap: shouldFocusWrap, allowsCustomValue: allowsCustomValue, selectionMode: selectionMode, validationState: validationState, isDisabled: isDisabled, isLoading: isLoading, stateRef: listStateRef, isCheckable: isCheckable, mods: {
+                    }, children: _jsx(FocusScope, { restoreFocus: true, children: _jsx(FilterListBox, { autoFocus: true, items: items ? finalItems : undefined, "aria-label": `${props['aria-label'] ?? props.label ?? ''} Picker`, _internalCollection: localCollectionState.collection, selectedKey: selectionMode === 'single' ? mappedSelectedKey : undefined, selectedKeys: selectionMode === 'multiple' ? mappedSelectedKeys : undefined, searchPlaceholder: searchPlaceholder, filter: filter, searchValue: searchValue, listStyles: listStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, listRef: listRef, disallowEmptySelection: disallowEmptySelection, emptyLabel: emptyLabel, searchInputStyles: searchInputStyles, searchInputRef: searchInputRef, disabledKeys: disabledKeys, focusOnHover: focusOnHover, shouldFocusWrap: shouldFocusWrap, allowsCustomValue: allowsCustomValue, selectionMode: selectionMode, validationState: validationState, isDisabled: isDisabled, isLoading: isLoading, stateRef: listStateRef, 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 || 'FilterPicker'}ListBox`, allValueProps: allValueProps, customValueProps: customValueProps, newCustomValueProps: newCustomValueProps, onSearchChange: onSearchChange, onEscape: () => close(), onOptionClick: (key) => {
                                 // For FilterPicker, clicking the content area should close the popover
@@ -767,11 +534,12 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                             }, children: (children
                                 ? finalChildren
                                 : undefined) }) }) }))] }) }));
-    return wrapWithField(filterPickerField, ref, mergeProps({
+    const finalProps = {
         ...props,
         children: undefined,
         styles: undefined,
-    }, {}));
+    };
+    return wrapWithField(filterPickerField, ref, mergeProps(finalProps, {}));
 });
 FilterPicker.Item = ListBox.Item;
 FilterPicker.Section = BaseSection;

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

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