@cube-dev/ui-kit 0.0.0-canary-e521c67 → 0.0.0-canary-810714b

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

@@ -1,14 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e521c67
+ * @cube-dev/ui-kit v0.0.0-canary-810714b
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { Children, cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { FocusScope, useKeyboard } from 'react-aria';
-import { Section as BaseSection, useListState } from 'react-stately';
+import { Section as BaseSection, Item as ReactAriaItem, } from 'react-stately';
 import { useEvent } from '../../../_internal';
 import { useWarn } from '../../../_internal/hooks/use-warn';
 import { CloseIcon, DirectionIcon, LoadingIcon } from '../../../icons';
@@ -63,15 +63,8 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             return fieldProps;
         },
     });
-    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, ...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);
+    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;
     styles = extractStyles(otherProps, PROP_STYLES, styles);
-    // Generate ID for label-trigger linking if not provided
-    const generatedId = useId();
-    const triggerId = id || generatedId;
     // Generate a unique ID for this FilterPicker instance
     const filterPickerId = useMemo(() => generateRandomId(), []);
     // Get event bus for menu synchronization
@@ -88,6 +81,7 @@ 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);
@@ -98,6 +92,9 @@ 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]);
@@ -109,47 +106,73 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     const effectiveSelectedKeys = isControlledMultiple
         ? selectedKeys
         : internalSelectedKeys;
-    // 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
-    });
+    // 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, '=');
+    };
     // ---------------------------------------------------------------------------
-    // Map user-provided keys to collection keys using the local collection.
-    // The collection handles key normalization internally, so we use direct
-    // string comparison.
+    // 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.
     // ---------------------------------------------------------------------------
-    const findCollectionKey = useCallback((lookup) => {
+    const findReactKey = useCallback((lookup) => {
         if (lookup == null)
             return lookup;
-        // 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 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]);
     const mappedSelectedKey = useMemo(() => {
         if (selectionMode !== 'single')
             return null;
-        return effectiveSelectedKey
-            ? findCollectionKey(effectiveSelectedKey)
-            : null;
-    }, [selectionMode, effectiveSelectedKey, findCollectionKey]);
+        return effectiveSelectedKey ? findReactKey(effectiveSelectedKey) : null;
+    }, [selectionMode, effectiveSelectedKey, findReactKey]);
     const mappedSelectedKeys = useMemo(() => {
         if (selectionMode !== 'multiple')
             return undefined;
         if (effectiveSelectedKeys === 'all')
             return 'all';
         if (Array.isArray(effectiveSelectedKeys)) {
-            return effectiveSelectedKeys.map((k) => findCollectionKey(k));
+            return effectiveSelectedKeys.map((k) => findReactKey(k));
         }
         return effectiveSelectedKeys;
-    }, [selectionMode, effectiveSelectedKeys, findCollectionKey]);
+    }, [selectionMode, effectiveSelectedKeys, findReactKey]);
     // Given an iterable of keys (array or Set) toggle membership for duplicates
     const processSelectionArray = (iterable) => {
         const resultSet = new Set();
@@ -164,42 +187,149 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         }
         return Array.from(resultSet);
     };
-    // Helper to get selected item labels for display using local collection
+    // Helper to get selected item labels for display
     const getSelectedLabels = () => {
-        const collection = localCollectionState.collection;
         // Handle "all" selection - return all available labels
         if (selectionMode === 'multiple' && effectiveSelectedKeys === 'all') {
             const allLabels = [];
-            for (const item of collection) {
-                if (item.type === 'item') {
-                    allLabels.push(item.textValue || String(item.key));
-                }
+            // 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;
             }
             return allLabels;
         }
         const selectedSet = new Set(selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'
-            ? (effectiveSelectedKeys || []).map((k) => String(k))
+            ? (effectiveSelectedKeys || []).map((k) => normalizeKeyValue(k))
             : effectiveSelectedKey != null
-                ? [String(effectiveSelectedKey)]
+                ? [normalizeKeyValue(effectiveSelectedKey)]
                 : []);
         const labels = [];
         const processedKeys = new Set();
-        // Use collection to get labels for selected items
-        for (const item of collection) {
-            if (item.type === 'item' && selectedSet.has(String(item.key))) {
-                labels.push(item.textValue || String(item.key));
-                processedKeys.add(String(item.key));
-            }
+        // 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 aren't in the collection
+        // Handle custom values that don't have corresponding items/children
         const selectedKeysArr = selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'
             ? (effectiveSelectedKeys || []).map(String)
             : effectiveSelectedKey != null
                 ? [String(effectiveSelectedKey)]
                 : [];
-        // Add labels for any selected keys that weren't found in collection (custom values)
+        // Add labels for any selected keys that weren't processed (custom values)
         selectedKeysArr.forEach((key) => {
-            if (!processedKeys.has(String(key))) {
+            if (!processedKeys.has(normalizeKeyValue(key))) {
                 // This is a custom value, use the key as the label
                 labels.push(key);
             }
@@ -231,22 +361,133 @@ 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(() => {
-        // 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.');
+        // 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;
         }
-        // Return children as-is (no sorting for JSX children)
-        return children;
-    }, [children, sortSelectedToTop, sortSelectedToTopExplicit, items]);
+        // 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,
+    ]);
     // 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) {
@@ -315,7 +556,6 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         return sorted;
     }, [
         items,
-        sortSelectedToTop,
         selectionMode,
         isPopoverOpen,
         selectionsWhenClosed.current.multiple,
@@ -391,6 +631,7 @@ 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;
                 }
             }
@@ -439,7 +680,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             props.onClear?.();
             return false;
         });
-        return (_jsx(ItemButton, { ref: triggerRef, "data-popover-trigger": true, id: triggerId, type: type, theme: validationState === 'invalid' ? 'danger' : theme, size: size, isDisabled: isDisabled || isLoading, mods: {
+        return (_jsx(ItemButton, { ref: triggerRef, "data-popover-trigger": true, type: type, theme: validationState === 'invalid' ? 'danger' : theme, size: size, isDisabled: isDisabled || isLoading, mods: {
                 placeholder: !hasSelection,
                 selected: hasSelection,
                 ...externalMods,
@@ -459,7 +700,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`, _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: {
+                    }, 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: {
                                 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
@@ -526,19 +767,11 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                             }, children: (children
                                 ? finalChildren
                                 : undefined) }) }) }))] }) }));
-    const finalProps = {
+    return wrapWithField(filterPickerField, ref, mergeProps({
         ...props,
         children: undefined,
         styles: undefined,
-    };
-    // Ensure labelProps has the for attribute for label-trigger linking
-    if (!finalProps.labelProps) {
-        finalProps.labelProps = {};
-    }
-    if (!finalProps.labelProps.for) {
-        finalProps.labelProps.for = triggerId;
-    }
-    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.0.0-canary-e521c67
+ * @cube-dev/ui-kit v0.0.0-canary-810714b
  * Released under the MIT license.
  */
 

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

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e521c67
+ * @cube-dev/ui-kit v0.0.0-canary-810714b
  * Released under the MIT license.
  */
 
@@ -9,7 +9,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useHover } from '@react-aria/interactions';
 import { IconMinus } from '@tabler/icons-react';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { forwardRef, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { forwardRef, useEffect, useMemo, useRef, useState, } from 'react';
 import { useKeyboard, useListBox, useListBoxSection, useOption, } from 'react-aria';
 import { Section as BaseSection, useListState } from 'react-stately';
 import { useWarn } from '../../../_internal/hooks/use-warn';
@@ -240,12 +240,8 @@ 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, ...otherProps } = props;
-    // Generate ID for label-listbox linking if not provided
-    const generatedId = useId();
-    const listBoxId = id || generatedId;
+    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, listStyles, optionStyles, sectionStyles, headingStyles, listRef, message, description, styles, mods: externalMods, size = 'medium', labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, onSelectionChange, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, onEscape, isCheckable, onOptionClick, showSelectAll, selectAllLabel, allValueProps, ...otherProps } = props;
     const [, forceUpdate] = useState({});
-    const lastSelectedKeyRef = useRef(null);
     // Wrap onSelectionChange to prevent selection when disabled and handle React Aria's Set format
     const externalSelectionHandler = onSelectionChange || props.onChange;
     const wrappedOnSelectionChange = useMemo(() => {
@@ -263,26 +259,16 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
             }
             else if (keys instanceof Set) {
                 if (keys.size === 0) {
-                    if (disableSelectionToggle && props.selectionMode === 'single') {
-                        const prevKey = lastSelectedKeyRef.current;
-                        if (prevKey != null) {
-                            externalSelectionHandler(prevKey);
-                            return;
-                        }
-                    }
                     externalSelectionHandler(props.selectionMode === 'multiple' ? [] : null);
                 }
                 else if (props.selectionMode === 'multiple') {
                     externalSelectionHandler(Array.from(keys));
                 }
                 else {
-                    const key = Array.from(keys)[0];
-                    lastSelectedKeyRef.current = key ?? null;
-                    externalSelectionHandler(key);
+                    externalSelectionHandler(Array.from(keys)[0]);
                 }
             }
             else {
-                lastSelectedKeyRef.current = keys;
                 externalSelectionHandler(keys);
             }
         };
@@ -335,13 +321,6 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
     const listState = useListState({
         ...listStateProps,
     });
-    useLayoutEffect(() => {
-        const selected = listState.selectionManager.selectedKeys;
-        if (selected && selected.size > 0) {
-            const first = Array.from(selected)[0];
-            lastSelectedKeyRef.current = first ?? null;
-        }
-    }, [listState.selectionManager.selectedKeys]);
     // Calculate select all state for multiple selection mode
     const selectAllState = useMemo(() => {
         // Select-all only makes sense for multiple selection mode *and* when the UI is enabled
@@ -431,7 +410,6 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
     listRef = useCombinedRefs(listRef);
     const { listBoxProps } = useListBox({
         ...props,
-        id: listBoxId,
         'aria-label': props['aria-label'] || label?.toString(),
         isDisabled,
         shouldUseVirtualFocus: shouldUseVirtualFocus ?? false,
@@ -564,15 +542,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" }))] }));
-    const finalProps = { ...props, styles: undefined };
-    // Ensure labelProps has the for attribute for label-listbox linking
-    if (!finalProps.labelProps) {
-        finalProps.labelProps = {};
-    }
-    if (!finalProps.labelProps.for) {
-        finalProps.labelProps.for = listBoxId;
-    }
-    return wrapWithField(listBoxField, ref, mergeProps(finalProps, {}));
+    return wrapWithField(listBoxField, ref, mergeProps({ ...props, styles: undefined }, {}));
 });
 function Option({ size = 'medium', item, state, styles, isParentDisabled, validationState, focusOnHover = false, isCheckable, onClick: onOptionClick, virtualStyle, virtualRef, virtualIndex, lastFocusSourceRef, }) {
     const localRef = useRef(null);