@cube-dev/ui-kit 0.0.0-canary-8dfe8a6 → 0.0.0-canary-5141f6d

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

@@ -0,0 +1,782 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-5141f6d
+ * 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 { FocusScope, useKeyboard } from 'react-aria';
+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';
+import { useProviderProps } from '../../../provider';
+import { BASE_STYLES, COLOR_STYLES, extractStyles, filterBaseProps, OUTER_STYLES, tasty, } from '../../../tasty';
+import { generateRandomId } from '../../../utils/random';
+import { mergeProps } from '../../../utils/react';
+import { useEventBus } from '../../../utils/react/useEventBus';
+import { ItemAction, ItemButton } from '../../actions';
+import { Text } from '../../content/Text';
+import { useFieldProps, useFormProps, wrapWithField } from '../../form';
+import { Dialog, DialogTrigger } from '../../overlays/Dialog';
+import { ListBox } from '../ListBox/ListBox';
+const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
+const PickerWrapper = tasty({
+    qa: 'Picker',
+    styles: {
+        display: 'inline-grid',
+        flow: 'column',
+        gridRows: '1sf',
+        placeContent: 'stretch',
+        placeItems: 'stretch',
+    },
+});
+export const Picker = forwardRef(function Picker(props, ref) {
+    props = useProviderProps(props);
+    props = useFormProps(props);
+    props = useFieldProps(props, {
+        valuePropsMapper: ({ value, onChange }) => {
+            const fieldProps = {};
+            if (props.selectionMode === 'multiple') {
+                fieldProps.selectedKeys = value || [];
+            }
+            else {
+                fieldProps.selectedKey = value ?? null;
+            }
+            fieldProps.onSelectionChange = (key) => {
+                if (props.selectionMode === 'multiple') {
+                    // 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);
+                }
+            };
+            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, renderSummary, isCheckable, allValueProps, listStyles, optionStyles, sectionStyles, headingStyles, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, isClearable, onClear, ...otherProps } = props;
+    styles = extractStyles(otherProps, PROP_STYLES, styles);
+    // Generate a unique ID for this Picker instance
+    const pickerId = useMemo(() => generateRandomId(), []);
+    // Get event bus for menu synchronization
+    const { emit, on } = useEventBus();
+    // Warn if isCheckable is false in single selection mode
+    useWarn(isCheckable === false && selectionMode === 'single', {
+        key: ['picker-checkable-single-mode'],
+        args: [
+            'CubeUIKit: isCheckable=false is not recommended in single selection mode as it may confuse users about selection behavior.',
+        ],
+    });
+    // Internal selection state (uncontrolled scenario)
+    const [internalSelectedKey, setInternalSelectedKey] = useState(defaultSelectedKey ?? null);
+    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);
+    // ---------------------------------------------------------------------------
+    // Invalidate cached sorting whenever the available options change.
+    // This ensures newly provided options are displayed and properly sorted on
+    // the next popover open instead of re-using a stale order from a previous
+    // 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]);
+    const isControlledSingle = selectedKey !== undefined;
+    const isControlledMultiple = selectedKeys !== undefined;
+    const effectiveSelectedKey = isControlledSingle
+        ? selectedKey
+        : internalSelectedKey;
+    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, '=');
+    };
+    // ---------------------------------------------------------------------------
+    // 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 &&
+                    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 ? 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 = String(key);
+            if (resultSet.has(nKey)) {
+                resultSet.delete(nKey); // toggle off if clicked twice
+            }
+            else {
+                resultSet.add(nKey); // select
+            }
+        }
+        return Array.from(resultSet);
+    };
+    // Helper to get selected item labels for display
+    const getSelectedLabels = () => {
+        // 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 === 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) => normalizeKeyValue(k))
+            : effectiveSelectedKey != null
+                ? [normalizeKeyValue(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
+        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(normalizeKeyValue(key))) {
+                // This is a custom value, use the key as the label
+                labels.push(key);
+            }
+        });
+        return labels;
+    };
+    const selectedLabels = getSelectedLabels();
+    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 ? String(effectiveSelectedKey) : null,
+        multiple: effectiveSelectedKeys === 'all'
+            ? 'all'
+            : (effectiveSelectedKeys ?? []).map(String),
+    });
+    useEffect(() => {
+        latestSelectionRef.current = {
+            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 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;
+        }
+        // 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;
+        // 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) {
+            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();
+    // 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.
+        if (hasSelection && typeof renderSummary === 'function') {
+            if (selectionMode === 'single') {
+                return renderSummary({
+                    selectedLabel: selectedLabels[0],
+                    selectedKey: effectiveSelectedKey ?? null,
+                    selectedLabels,
+                    selectedKeys: effectiveSelectedKeys,
+                    selectionMode: 'single',
+                });
+            }
+            return renderSummary({
+                selectedLabels,
+                selectedKeys: effectiveSelectedKeys,
+                selectionMode: 'multiple',
+            });
+        }
+        else if (hasSelection && renderSummary === false) {
+            return null;
+        }
+        let content = '';
+        if (!hasSelection) {
+            content = placeholder;
+        }
+        else if (selectionMode === 'single') {
+            content = selectedLabels[0];
+        }
+        else if (effectiveSelectedKeys === 'all') {
+            content = selectAllLabel;
+        }
+        else {
+            content = selectedLabels.join(', ');
+        }
+        if (!content) {
+            return null;
+        }
+        return (_jsx(Text, { ellipsis: true, style: { opacity: hasSelection ? 1 : 'var(--disabled-opacity)' }, children: content }));
+    };
+    const [shouldUpdatePosition, setShouldUpdatePosition] = useState(true);
+    // The trigger is rendered as a function so we can access the dialog state
+    const renderTrigger = (state) => {
+        // Listen for other menus opening and close this one if needed
+        useEffect(() => {
+            const unsubscribe = on('popover:open', (data) => {
+                // If another menu is opening and this Picker is open, close this one
+                if (data.menuId !== pickerId && state.isOpen) {
+                    state.close();
+                }
+            });
+            return unsubscribe;
+        }, [on, pickerId, state]);
+        // Emit event when this Picker opens
+        useEffect(() => {
+            if (state.isOpen) {
+                emit('popover:open', { menuId: pickerId });
+            }
+        }, [state.isOpen, emit, pickerId]);
+        // Track popover open/close state to control sorting
+        useEffect(() => {
+            if (state.isOpen !== isPopoverOpen) {
+                setIsPopoverOpen(state.isOpen);
+                if (!state.isOpen) {
+                    // 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;
+                }
+            }
+        }, [state.isOpen, isPopoverOpen]);
+        // Add keyboard support for arrow keys to open the popover
+        const { keyboardProps } = useKeyboard({
+            onKeyDown: (e) => {
+                if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !state.isOpen) {
+                    e.preventDefault();
+                    state.open();
+                }
+            },
+        });
+        useEffect(() => {
+            // Allow initial positioning & flipping when opening, then lock placement after transition
+            // Popover transition is ~120ms, give it a bit more time to finalize placement
+            if (state.isOpen) {
+                setShouldUpdatePosition(true);
+                const id = window.setTimeout(() => setShouldUpdatePosition(false), 160);
+                return () => window.clearTimeout(id);
+            }
+            else {
+                setShouldUpdatePosition(true);
+            }
+        }, [state.isOpen]);
+        // Clear button logic
+        let showClearButton = isClearable && hasSelection && !isDisabled && !props.isReadOnly;
+        // Clear function
+        let clearValue = useEvent(() => {
+            if (selectionMode === 'multiple') {
+                if (!isControlledMultiple) {
+                    setInternalSelectedKeys([]);
+                }
+                onSelectionChange?.([]);
+            }
+            else {
+                if (!isControlledSingle) {
+                    setInternalSelectedKey(null);
+                }
+                onSelectionChange?.(null);
+            }
+            if (state.isOpen) {
+                state.close();
+            }
+            triggerRef?.current?.focus?.();
+            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: {
+                placeholder: !hasSelection,
+                selected: hasSelection,
+                ...externalMods,
+            }, icon: icon, rightIcon: isLoading ? (_jsx(LoadingIcon, {})) : rightIcon !== undefined ? (rightIcon) : showClearButton ? (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: size, theme: validationState === 'invalid' ? 'danger' : undefined, qa: "PickerClearButton", mods: { pressed: false }, onPress: clearValue })) : (_jsx(DirectionIcon, { to: state.isOpen ? 'top' : 'bottom' })), prefix: prefix, suffix: suffix, hotkeys: hotkeys, tooltip: triggerTooltip, description: triggerDescription, descriptionPlacement: descriptionPlacement, styles: styles, ...keyboardProps, "aria-label": `${props['aria-label'] ?? props.label ?? ''}`, children: renderTriggerContent() }));
+    };
+    const pickerField = (_jsx(PickerWrapper, { qa: props.qa || 'Picker', styles: styles, ...filterBaseProps(otherProps, { eventProps: true }), children: _jsxs(DialogTrigger, { type: "popover", placement: "bottom start", styles: triggerStyles, shouldUpdatePosition: shouldUpdatePosition, shouldFlip: shouldFlip && shouldUpdatePosition, isDismissable: true, shouldCloseOnInteractOutside: (el) => {
+                const menuTriggerEl = el.closest('[data-popover-trigger]');
+                // If no menu trigger was clicked, allow closing
+                if (!menuTriggerEl)
+                    return true;
+                // If the same trigger that opened this popover was clicked, allow closing (toggle)
+                if (menuTriggerEl === triggerRef?.current)
+                    return true;
+                // Otherwise, don't close here. Let the event bus handle closing when the other opens.
+                return false;
+            }, children: [renderTrigger, (close) => (_jsx(Dialog, { display: "grid", styles: {
+                        gridRows: '1sf',
+                        width: '30x max-content 50vw',
+                        ...popoverStyles,
+                    }, children: _jsx(FocusScope, { restoreFocus: true, children: _jsx(ListBox, { autoFocus: true, items: items ? finalItems : undefined, "aria-label": `${props['aria-label'] ?? props.label ?? ''} Picker`, selectedKey: selectionMode === 'single' ? mappedSelectedKey : undefined, selectedKeys: selectionMode === 'multiple' ? mappedSelectedKeys : undefined, listStyles: listStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, listRef: listRef, disallowEmptySelection: disallowEmptySelection, disabledKeys: disabledKeys, focusOnHover: focusOnHover, shouldFocusWrap: shouldFocusWrap, selectionMode: selectionMode, validationState: validationState, isDisabled: isDisabled, isLoading: isLoading, stateRef: 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 || 'Picker'}ListBox`, allValueProps: allValueProps, onEscape: () => close(), onOptionClick: (key) => {
+                                // For Picker, clicking the content area should close the popover
+                                // in multiple selection mode (single mode already closes via onSelectionChange)
+                                if ((selectionMode === 'multiple' && isCheckable) ||
+                                    key === '__ALL__') {
+                                    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);
+                                    }
+                                }
+                                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) {
+                                        latestSelectionRef.current.multiple = Array.from(new Set(processSelectionArray(selection)));
+                                    }
+                                    else {
+                                        latestSelectionRef.current.multiple =
+                                            selection === 'all'
+                                                ? 'all'
+                                                : Array.isArray(selection)
+                                                    ? selection.map(String)
+                                                    : [];
+                                    }
+                                }
+                                onSelectionChange?.(selection);
+                                if (selectionMode === 'single') {
+                                    close();
+                                }
+                            }, children: (children
+                                ? finalChildren
+                                : undefined) }) }) }))] }) }));
+    return wrapWithField(pickerField, ref, mergeProps({
+        ...props,
+        children: undefined,
+        styles: undefined,
+    }, {}));
+});
+Picker.Item = ListBox.Item;
+Picker.Section = BaseSection;
+Object.defineProperty(Picker, 'cubeInputType', {
+    value: 'Picker',
+    enumerable: false,
+    configurable: false,
+});
+
+