@cube-dev/ui-kit 0.69.1 → 0.69.3

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

@@ -1,18 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, forwardRef, useCallback, useEffect, 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, Item } from 'react-stately';
 import { useWarn } from '../../../_internal/hooks/use-warn';
 import { DirectionIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
-import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, } from '../../../tasty';
+import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
 import { Button } from '../../actions';
 import { Text } from '../../content/Text';
@@ -21,6 +21,16 @@ import { Dialog, DialogTrigger } from '../../overlays/Dialog';
 import { FilterListBox, } from '../FilterListBox/FilterListBox';
 import { ListBox } from '../ListBox';
 const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
+const FilterPickerWrapper = tasty({
+    qa: 'FilterPicker',
+    styles: {
+        display: 'inline-grid',
+        flow: 'column',
+        gridRows: '1sf',
+        placeContent: 'stretch',
+        placeItems: 'stretch',
+    },
+});
 export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     props = useProviderProps(props);
     props = useFormProps(props);
@@ -35,7 +45,13 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             }
             fieldProps.onSelectionChange = (key) => {
                 if (props.selectionMode === 'multiple') {
-                    onChange(key ? (Array.isArray(key) ? key : [key]) : []);
+                    // Handle "all" selection and array selections
+                    if (key === 'all') {
+                        onChange('all');
+                    }
+                    else {
+                        onChange(key ? (Array.isArray(key) ? key : [key]) : []);
+                    }
                 }
                 else {
                     onChange(Array.isArray(key) ? key[0] : key);
@@ -44,7 +60,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             return fieldProps;
         },
     });
-    let { qa, label, extra, icon, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, placeholder, size = 'medium', styles, listBoxStyles, popoverStyles, type = 'outline', theme = 'default', labelSuffix, shouldFocusWrap, children, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = 'single', listStateRef, focusOnHover, header, footer, headerStyles, footerStyles, allowsCustomValue, renderSummary, isCheckable, ...otherProps } = props;
+    let { qa, label, extra, icon, rightIcon, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, 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, ...otherProps } = props;
     styles = extractStyles(otherProps, PROP_STYLES, styles);
     // Warn if isCheckable is false in single selection mode
     useWarn(isCheckable === false && selectionMode === 'single', {
@@ -59,6 +75,8 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     // 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);
     const isControlledSingle = selectedKey !== undefined;
     const isControlledMultiple = selectedKeys !== undefined;
@@ -68,7 +86,8 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     const effectiveSelectedKeys = isControlledMultiple
         ? selectedKeys
         : internalSelectedKeys;
-    // Utility to normalize React keys by stripping array prefixes like ".$" or "."
+    // 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 '';
@@ -79,11 +98,57 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                 ? str.slice(1)
                 : str;
     };
+    // ---------------------------------------------------------------------------
+    // 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 findReactKey = 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?.children) {
+                    traverse(element.props.children);
+                }
+            });
+        };
+        if (children)
+            traverse(children);
+        return foundKey;
+    }, [children]);
+    const mappedSelectedKey = useMemo(() => {
+        if (selectionMode !== 'single')
+            return null;
+        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) => findReactKey(k));
+        }
+        return effectiveSelectedKeys;
+    }, [selectionMode, effectiveSelectedKeys, findReactKey]);
     // Given an iterable of keys (array or Set) toggle membership for duplicates
     const processSelectionArray = (iterable) => {
         const resultSet = new Set();
         for (const key of iterable) {
-            const nKey = normalizeKeyValue(key);
+            const nKey = String(key);
             if (resultSet.has(nKey)) {
                 resultSet.delete(nKey); // toggle off if clicked twice
             }
@@ -95,66 +160,145 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     };
     // Helper to get selected item labels for display
     const getSelectedLabels = () => {
-        if (!children)
-            return [];
-        const selectedSet = new Set(selectionMode === 'multiple'
-            ? (effectiveSelectedKeys || []).map(String)
+        // Handle "all" selection - return all available labels
+        if (selectionMode === 'multiple' && effectiveSelectedKeys === 'all') {
+            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 === Item) {
+                            const label = element.props.textValue ||
+                                (typeof element.props.children === 'string'
+                                    ? element.props.children
+                                    : '') ||
+                                String(element.props.children || '');
+                            allLabels.push(label);
+                        }
+                        if (element.props?.children) {
+                            extractAllLabels(element.props.children);
+                        }
+                    });
+                };
+                extractAllLabels(children);
+                return allLabels;
+            }
+            return allLabels;
+        }
+        const selectedSet = new Set(selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'
+            ? (effectiveSelectedKeys || []).map((k) => normalizeKeyValue(k))
             : effectiveSelectedKey != null
-                ? [String(effectiveSelectedKey)]
+                ? [normalizeKeyValue(effectiveSelectedKey)]
                 : []);
         const labels = [];
-        const extractLabels = (nodes) => {
-            Children.forEach(nodes, (child) => {
-                if (!child || typeof child !== 'object')
-                    return;
-                if (child.type === Item) {
-                    if (selectedSet.has(String(child.key))) {
-                        const label = child.props.textValue ||
-                            (typeof child.props.children === 'string'
-                                ? child.props.children
-                                : '') ||
-                            String(child.props.children || '');
-                        labels.push(label);
-                    }
-                }
-                if (child.props?.children) {
-                    extractLabels(child.props.children);
-                }
-            });
-        };
         const processedKeys = new Set();
-        // Modified extractLabels to track which keys we've processed
-        const extractLabelsWithTracking = (nodes) => {
-            Children.forEach(nodes, (child) => {
-                if (!child || typeof child !== 'object')
+        // 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;
-                if (child.type === Item) {
-                    const childKey = String(child.key);
-                    if (selectedSet.has(childKey)) {
-                        const label = child.props.textValue ||
-                            (typeof child.props.children === 'string'
-                                ? child.props.children
-                                : '') ||
-                            String(child.props.children || '');
-                        labels.push(label);
-                        processedKeys.add(childKey);
+                Children.forEach(nodes, (child) => {
+                    if (!child || typeof child !== 'object')
+                        return;
+                    const element = child;
+                    if (element.type === Item) {
+                        const childKey = String(element.key);
+                        if (selectedSet.has(normalizeKeyValue(childKey))) {
+                            const label = element.props.textValue ||
+                                (typeof element.props.children === 'string'
+                                    ? element.props.children
+                                    : '') ||
+                                String(element.props.children || '');
+                            labels.push(label);
+                            processedKeys.add(normalizeKeyValue(childKey));
+                        }
                     }
-                }
-                if (child.props?.children) {
-                    extractLabelsWithTracking(child.props.children);
-                }
-            });
-        };
-        extractLabelsWithTracking(children);
-        // Handle custom values that don't have corresponding children
-        const selectedKeysArr = selectionMode === 'multiple'
+                    if (element.props?.children) {
+                        extractLabelsWithTracking(element.props.children);
+                    }
+                });
+            };
+            extractLabelsWithTracking(children);
+        }
+        // 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 processed (custom values)
         selectedKeysArr.forEach((key) => {
-            if (!processedKeys.has(key)) {
+            if (!processedKeys.has(normalizeKeyValue(key))) {
                 // This is a custom value, use the key as the label
                 labels.push(key);
             }
@@ -165,29 +309,36 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     const hasSelection = selectedLabels.length > 0;
     // Always keep the latest selection in a ref (with normalized keys) so that we can read it synchronously in the popover close effect.
     const latestSelectionRef = useRef({
-        single: effectiveSelectedKey != null
-            ? normalizeKeyValue(effectiveSelectedKey)
-            : null,
-        multiple: (effectiveSelectedKeys ?? []).map(normalizeKeyValue),
+        single: effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,
+        multiple: effectiveSelectedKeys === 'all'
+            ? 'all'
+            : (effectiveSelectedKeys ?? []).map(String),
     });
     useEffect(() => {
         latestSelectionRef.current = {
-            single: effectiveSelectedKey != null
-                ? normalizeKeyValue(effectiveSelectedKey)
-                : null,
-            multiple: (effectiveSelectedKeys ?? []).map(normalizeKeyValue),
+            single: effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,
+            multiple: effectiveSelectedKeys === 'all'
+                ? 'all'
+                : (effectiveSelectedKeys ?? []).map(String),
         };
     }, [effectiveSelectedKey, effectiveSelectedKeys]);
     const selectionsWhenClosed = useRef({ single: null, multiple: [] });
+    // Capture the initial selection (from defaultSelectedKey(s)) so that
+    // the very first popover open can already use it for sorting.
+    useEffect(() => {
+        selectionsWhenClosed.current = { ...latestSelectionRef.current };
+    }, []); // run only once on mount
     // Function to sort children with selected items on top
     const getSortedChildren = useCallback(() => {
-        if (!children)
+        // If children is not provided or is a render function, return it as-is
+        if (!children || typeof children === 'function')
             return children;
-        // When the popover is **closed** we don't want to trigger any resorting –
-        // that could cause visible re-flows during the fade-out animation. Simply
-        // reuse whatever order we had while it was open (if available).
-        if (!isPopoverOpen) {
-            return cachedChildrenOrder.current ?? children;
+        // When the popover is **closed**, reuse the cached order if we have it to
+        // avoid unnecessary reflows. If we don't have a cache yet (first open),
+        // fall through to compute the sorted order so the very first render is
+        // already correct.
+        if (!isPopoverOpen && cachedChildrenOrder.current) {
+            return cachedChildrenOrder.current;
         }
         // Popover is open – compute (or recompute) the sorted order for this
         // session.
@@ -209,11 +360,17 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         // Create selected keys set for fast lookup
         const selectedSet = new Set();
         if (selectionMode === 'multiple') {
-            selectionsWhenClosed.current.multiple.forEach((key) => selectedSet.add(normalizeKeyValue(key)));
+            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(normalizeKeyValue(selectionsWhenClosed.current.single));
+            selectedSet.add(String(selectionsWhenClosed.current.single));
         }
         // Helper function to check if an item is selected
         const isItemSelected = (child) => {
@@ -222,7 +379,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         // Helper function to sort children array
         const sortChildrenArray = (childrenArray) => {
             const cloneWithNormalizedKey = (item) => cloneElement(item, {
-                key: normalizeKeyValue(item.key),
+                key: item.key ? normalizeKeyValue(item.key) : undefined,
             });
             const selected = [];
             const unselected = [];
@@ -231,25 +388,30 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                     unselected.push(child);
                     return;
                 }
+                const element = child;
                 // Handle sections - sort items within each section
-                if (child.type === BaseSection ||
-                    child.type?.displayName === 'Section') {
-                    const sectionChildren = Array.isArray(child.props.children)
-                        ? child.props.children
-                        : [child.props.children];
+                if (element.type === BaseSection ||
+                    element.type?.displayName === 'Section') {
+                    const sectionChildren = Array.isArray(element.props.children)
+                        ? element.props.children
+                        : [element.props.children];
                     const selectedItems = [];
                     const unselectedItems = [];
                     sectionChildren.forEach((sectionChild) => {
-                        if (sectionChild &&
-                            typeof sectionChild === 'object' &&
-                            (sectionChild.type === Item ||
-                                sectionChild.type?.displayName === 'Item')) {
-                            const clonedItem = cloneWithNormalizedKey(sectionChild);
-                            if (isItemSelected(sectionChild)) {
-                                selectedItems.push(clonedItem);
+                        if (sectionChild && typeof sectionChild === 'object') {
+                            const sectionElement = sectionChild;
+                            if (sectionElement.type === Item ||
+                                sectionElement.type?.displayName === 'Item') {
+                                const clonedItem = cloneWithNormalizedKey(sectionElement);
+                                if (isItemSelected(sectionElement)) {
+                                    selectedItems.push(clonedItem);
+                                }
+                                else {
+                                    unselectedItems.push(clonedItem);
+                                }
                             }
                             else {
-                                unselectedItems.push(clonedItem);
+                                unselectedItems.push(sectionChild);
                             }
                         }
                         else {
@@ -257,15 +419,15 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                         }
                     });
                     // Create new section with sorted children, preserving React element properly
-                    unselected.push(cloneElement(child, {
-                        ...child.props,
+                    unselected.push(cloneElement(element, {
+                        ...element.props,
                         children: [...selectedItems, ...unselectedItems],
                     }));
                 }
                 // Handle non-section elements (items, dividers, etc.)
                 else {
-                    const clonedItem = cloneWithNormalizedKey(child);
-                    if (isItemSelected(child)) {
+                    const clonedItem = cloneWithNormalizedKey(element);
+                    if (isItemSelected(element)) {
                         selected.push(clonedItem);
                     }
                     else {
@@ -278,8 +440,9 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         // Sort the children
         const childrenArray = Children.toArray(children);
         const sortedChildren = sortChildrenArray(childrenArray);
-        // Cache the sorted order when popover opens
-        if (isPopoverOpen) {
+        // 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;
@@ -290,8 +453,85 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         selectionMode,
         isPopoverOpen,
     ]);
+    // Compute sorted items array when using `items` prop
+    const getSortedItems = useCallback(() => {
+        if (!items)
+            return items;
+        // Reuse cached order when popover is closed to avoid needless re-renders
+        if (!isPopoverOpen && cachedItemsOrder.current) {
+            return cachedItemsOrder.current;
+        }
+        const selectedSet = new Set();
+        const addSelected = (key) => {
+            if (key != null)
+                selectedSet.add(String(key));
+        };
+        if (selectionMode === 'multiple') {
+            if (selectionsWhenClosed.current.multiple === 'all') {
+                // Do not sort when all selected – keep original order
+                return items;
+            }
+            selectionsWhenClosed.current.multiple.forEach(addSelected);
+        }
+        else {
+            if (selectionsWhenClosed.current.single != null) {
+                addSelected(selectionsWhenClosed.current.single);
+            }
+        }
+        if (selectedSet.size === 0) {
+            return items;
+        }
+        // Helpers to extract key from item object
+        const getItemKey = (obj) => {
+            if (obj == null || typeof obj !== 'object')
+                return undefined;
+            const item = obj;
+            if (item.key != null)
+                return String(item.key);
+            if (item.id != null)
+                return String(item.id);
+            return undefined;
+        };
+        const sortArray = (arr) => {
+            const selectedArr = [];
+            const unselectedArr = [];
+            arr.forEach((obj) => {
+                const item = obj;
+                if (obj && Array.isArray(item.children)) {
+                    // Section-like object – keep order, but sort its children
+                    const sortedChildren = sortArray(item.children);
+                    unselectedArr.push({ ...item, children: sortedChildren });
+                }
+                else {
+                    const key = getItemKey(obj);
+                    if (key && selectedSet.has(key)) {
+                        selectedArr.push(obj);
+                    }
+                    else {
+                        unselectedArr.push(obj);
+                    }
+                }
+            });
+            return [...selectedArr, ...unselectedArr];
+        };
+        const itemsArray = Array.isArray(items)
+            ? items
+            : Array.from(items);
+        const sorted = sortArray(itemsArray);
+        if (isPopoverOpen || !cachedItemsOrder.current) {
+            cachedItemsOrder.current = sorted;
+        }
+        return sorted;
+    }, [
+        items,
+        selectionMode,
+        isPopoverOpen,
+        selectionsWhenClosed.current.multiple,
+        selectionsWhenClosed.current.single,
+    ]);
+    const finalItems = getSortedItems();
     // FilterListBox handles custom values internally when allowsCustomValue={true}
-    // We only provide the sorted original children
+    // We provide sorted children (if any) and sorted items
     const finalChildren = getSortedChildren();
     const renderTriggerContent = () => {
         // When there is a selection and a custom summary renderer is provided – use it.
@@ -321,6 +561,9 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         else if (selectionMode === 'single') {
             content = selectedLabels[0];
         }
+        else if (effectiveSelectedKeys === 'all') {
+            content = selectAllLabel;
+        }
         else {
             content = selectedLabels.join(', ');
         }
@@ -329,6 +572,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         }
         return (_jsx(Text, { ellipsis: true, style: { opacity: hasSelection ? 1 : 'var(--disabled-opacity)' }, children: content }));
     };
+    const [shouldUpdatePosition, setShouldUpdatePosition] = useState(false);
     // The trigger is rendered as a function so we can access the dialog state
     const renderTrigger = (state) => {
         // Track popover open/close state to control sorting
@@ -352,64 +596,83 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                 }
             },
         });
-        return (_jsx(Button, { ref: triggerRef, qa: props.qa || 'FilterPicker', type: type, theme: validationState === 'invalid' ? 'danger' : theme, size: size, isDisabled: isDisabled, isLoading: isLoading, mods: {
+        useEffect(() => {
+            // Disable the update of the position while the popover is open (with a delay) to avoid jumping
+            setShouldUpdatePosition(!state.isOpen);
+        }, [state.isOpen]);
+        return (_jsx(Button, { ref: triggerRef, "data-menu-trigger": true, type: type, theme: validationState === 'invalid' ? 'danger' : theme, size: size, isDisabled: isDisabled, isLoading: isLoading, mods: {
                 placeholder: !hasSelection,
                 selected: hasSelection,
                 ...externalMods,
-            }, icon: icon, rightIcon: _jsx(DirectionIcon, { to: state.isOpen ? 'top' : 'bottom' }), styles: styles, ...otherProps, ...keyboardProps, "aria-label": `${props['aria-label'] ?? props.label ?? ''}`, children: renderTriggerContent() }));
+            }, icon: icon, rightIcon: rightIcon !== undefined ? (rightIcon) : (_jsx(DirectionIcon, { to: state.isOpen ? 'top' : 'bottom' })), styles: styles, ...keyboardProps, "aria-label": `${props['aria-label'] ?? props.label ?? ''}`, children: renderTriggerContent() }));
     };
-    const filterPickerField = (_jsxs(DialogTrigger, { type: "popover", placement: "bottom start", shouldFlip: true, isDismissable: true, children: [renderTrigger, (close) => (_jsx(Dialog, { display: "grid", styles: { gridRows: '1sf', ...popoverStyles }, children: _jsx(FocusScope, { restoreFocus: true, children: _jsx(FilterListBox, { autoFocus: true, "aria-label": `${props['aria-label'] ?? props.label ?? ''} Picker`, selectedKey: selectionMode === 'single' ? effectiveSelectedKey : undefined, selectedKeys: selectionMode === 'multiple' ? effectiveSelectedKeys : undefined, disabledKeys: disabledKeys, focusOnHover: focusOnHover, shouldFocusWrap: shouldFocusWrap, allowsCustomValue: allowsCustomValue, selectionMode: selectionMode, validationState: validationState, isDisabled: isDisabled, stateRef: listStateRef, isCheckable: isCheckable, mods: {
-                            popover: true,
-                        }, size: size === 'small' ? 'medium' : size, header: header, footer: footer, headerStyles: headerStyles, footerStyles: footerStyles, qa: `${props.qa || 'FilterPicker'}ListBox`, onEscape: () => close(), onOptionClick: (key) => {
-                            // For FilterPicker, clicking the content area should close the popover
-                            // in multiple selection mode (single mode already closes via onSelectionChange)
-                            if (selectionMode === 'multiple' && isCheckable) {
-                                close();
-                            }
-                        }, onSelectionChange: (selection) => {
-                            // No need to change any flags - children order is cached
-                            // Update internal state if uncontrolled
-                            if (selectionMode === 'single') {
-                                if (!isControlledSingle) {
-                                    setInternalSelectedKey(selection);
+    const filterPickerField = (_jsx(FilterPickerWrapper, { qa: props.qa || 'FilterPicker', styles: styles, ...otherProps, children: _jsxs(DialogTrigger, { type: "popover", placement: "bottom start", styles: triggerStyles, shouldUpdatePosition: shouldUpdatePosition, shouldFlip: shouldFlip, isDismissable: true, children: [renderTrigger, (close) => (_jsx(Dialog, { display: "grid", styles: { gridRows: '1sf', ...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, disabledKeys: disabledKeys, focusOnHover: focusOnHover, shouldFocusWrap: shouldFocusWrap, allowsCustomValue: allowsCustomValue, selectionMode: selectionMode, validationState: validationState, isDisabled: isDisabled, 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`, onEscape: () => close(), onOptionClick: (key) => {
+                                // For FilterPicker, clicking the content area should close the popover
+                                // in multiple selection mode (single mode already closes via onSelectionChange)
+                                if ((selectionMode === 'multiple' && isCheckable) ||
+                                    key === '__ALL__') {
+                                    close();
                                 }
-                            }
-                            else {
-                                if (!isControlledMultiple) {
-                                    let normalized = selection;
-                                    if (Array.isArray(selection)) {
-                                        normalized = processSelectionArray(selection);
+                            }, onSelectionChange: (selection) => {
+                                // No need to change any flags - children order is cached
+                                // Update internal state if uncontrolled
+                                if (selectionMode === 'single') {
+                                    if (!isControlledSingle) {
+                                        setInternalSelectedKey(selection);
+                                    }
+                                }
+                                else {
+                                    if (!isControlledMultiple) {
+                                        let normalized = selection;
+                                        if (selection === 'all') {
+                                            normalized = 'all';
+                                        }
+                                        else if (Array.isArray(selection)) {
+                                            normalized = processSelectionArray(selection);
+                                        }
+                                        else if (selection &&
+                                            typeof selection === 'object' &&
+                                            selection instanceof Set) {
+                                            normalized = processSelectionArray(selection);
+                                        }
+                                        setInternalSelectedKeys(normalized);
+                                    }
+                                }
+                                // Update latest selection ref synchronously
+                                if (selectionMode === 'single') {
+                                    latestSelectionRef.current.single =
+                                        selection != null ? String(selection) : null;
+                                }
+                                else {
+                                    if (selection === 'all') {
+                                        latestSelectionRef.current.multiple = 'all';
+                                    }
+                                    else if (Array.isArray(selection)) {
+                                        latestSelectionRef.current.multiple = Array.from(new Set(processSelectionArray(selection)));
                                     }
                                     else if (selection &&
                                         typeof selection === 'object' &&
                                         selection instanceof Set) {
-                                        normalized = processSelectionArray(selection);
+                                        latestSelectionRef.current.multiple = Array.from(new Set(processSelectionArray(selection)));
+                                    }
+                                    else {
+                                        latestSelectionRef.current.multiple =
+                                            selection === 'all'
+                                                ? 'all'
+                                                : Array.isArray(selection)
+                                                    ? selection.map(String)
+                                                    : [];
                                     }
-                                    setInternalSelectedKeys(normalized);
-                                }
-                            }
-                            // Update latest selection ref synchronously
-                            if (selectionMode === 'single') {
-                                latestSelectionRef.current.single = selection;
-                            }
-                            else {
-                                if (Array.isArray(selection)) {
-                                    latestSelectionRef.current.multiple = Array.from(new Set(processSelectionArray(selection)));
-                                }
-                                else if (selection &&
-                                    typeof selection === 'object' &&
-                                    selection instanceof Set) {
-                                    latestSelectionRef.current.multiple = Array.from(new Set(processSelectionArray(selection)));
                                 }
-                                else {
-                                    latestSelectionRef.current.multiple = selection;
+                                onSelectionChange?.(selection);
+                                if (selectionMode === 'single') {
+                                    close();
                                 }
-                            }
-                            onSelectionChange?.(selection);
-                            if (selectionMode === 'single') {
-                                close();
-                            }
-                        }, children: finalChildren }) }) }))] }));
+                            }, children: (children
+                                ? finalChildren
+                                : undefined) }) }) }))] }) }));
     return wrapWithField(filterPickerField, ref, mergeProps({
         ...props,
         styles: undefined,