@cube-dev/ui-kit 0.67.0 → 0.68.0

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

@@ -1,30 +1,35 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.68.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useMemo, useRef, useState, } from 'react';
-import { useFilter, useKeyboard, useListBox, useListBoxSection, useOption, } from 'react-aria';
+import { useHover } from '@react-aria/interactions';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { forwardRef, useEffect, useMemo, useRef, } from 'react';
+import { useKeyboard, useListBox, useListBoxSection, useOption, } from 'react-aria';
 import { Section as BaseSection, Item, useListState } from 'react-stately';
-import { LoadingIcon, SearchIcon } from '../../../icons';
+import { useWarn } from '../../../_internal/hooks/use-warn';
+import { CheckIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
 import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
-import { mergeProps, modAttrs, useCombinedRefs } from '../../../utils/react';
+import { mergeProps, useCombinedRefs } from '../../../utils/react';
 import { useFocus } from '../../../utils/react/interactions';
-import { Block } from '../../Block';
+// Import Menu styled components for header and footer
+import { StyledDivider, StyledFooter, StyledHeader, StyledSectionHeading, } from '../../actions/Menu/styled';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
-import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, } from '../TextInput/TextInputBase';
 const ListBoxWrapperElement = tasty({
+    qa: 'ListBox',
     styles: {
-        display: 'flex',
+        display: 'grid',
+        gridColumns: '1sf',
+        gridRows: 'max-content 1sf max-content',
         flow: 'column',
         gap: 0,
         position: 'relative',
-        radius: true,
-        fill: '#white',
+        radius: '1cr',
         color: '#dark-02',
         transition: 'theme',
         outline: {
@@ -38,31 +43,31 @@ const ListBoxWrapperElement = tasty({
             valid: '#success-text.50',
             invalid: '#danger-text.50',
             disabled: true,
+            'popover | searchable': false,
         },
     },
 });
-const SearchWrapperElement = tasty({
-    styles: {
-        ...INPUT_WRAPPER_STYLES,
-        border: '#clear',
-        radius: '1r top',
-        borderBottom: '1bw solid #border',
-    },
-});
-const SearchInputElement = tasty({
-    as: 'input',
-    styles: DEFAULT_INPUT_STYLES,
-});
 const ListElement = tasty({
     as: 'ul',
     styles: {
-        display: 'flex',
-        gap: '1bw',
-        flow: 'column',
-        margin: '0',
-        padding: '.5x',
+        display: 'block',
+        padding: 0,
         listStyle: 'none',
-        height: 'auto',
+        boxSizing: 'border-box',
+        margin: {
+            '': '.5x .5x 0 .5x',
+            sections: '0 .5x',
+        },
+        height: 'max-content',
+    },
+});
+// NEW: dedicated scroll container for ListBox
+const ListBoxScrollElement = tasty({
+    as: 'div',
+    styles: {
+        display: 'grid',
+        gridColumns: '1sf',
+        gridRows: '1sf',
         overflow: 'auto',
         scrollbar: 'styled',
     },
@@ -71,13 +76,25 @@ const OptionElement = tasty({
     as: 'li',
     styles: {
         display: 'flex',
-        flow: 'column',
-        gap: '.25x',
-        padding: '.75x 1x',
+        flow: 'row',
+        placeItems: 'center start',
+        gap: '.75x',
+        padding: '.5x 1x',
+        margin: {
+            '': '0 0 1bw 0',
+            ':last-of-type': '0',
+        },
+        height: {
+            '[data-size="small"]': 'min 4x',
+            '[data-size="medium"]': 'min 5x',
+        },
+        boxSizing: 'border-box',
         radius: '1r',
-        cursor: 'pointer',
+        cursor: {
+            '': 'default',
+            disabled: 'not-allowed',
+        },
         transition: 'theme',
-        outline: 0,
         border: 0,
         userSelect: 'none',
         color: {
@@ -89,23 +106,75 @@ const OptionElement = tasty({
         },
         fill: {
             '': '#clear',
-            focused: '#dark.03',
-            selected: '#dark.06',
-            'selected & focused': '#dark.09',
-            pressed: '#dark.06',
+            'hovered | focused': '#dark.03',
+            selected: '#dark.09',
+            'selected & (hovered | focused)': '#dark.12',
+            'selected & hovered & focused': '#dark.15',
+            pressed: '#dark.09',
             valid: '#success-bg',
             invalid: '#danger-bg',
             disabled: '#clear',
         },
+        outline: 0,
+        backgroundClip: 'padding-box',
+        CheckboxWrapper: {
+            cursor: 'pointer',
+            padding: '.75x',
+            margin: '-.75x',
+        },
+        Checkbox: {
+            display: 'grid',
+            placeItems: 'center',
+            radius: '.5r',
+            width: '(2x - 2bw)',
+            height: '(2x - 2bw)',
+            flexShrink: 0,
+            transition: 'theme',
+            opacity: {
+                '': 0,
+                'selected | :hover | focused': 1,
+            },
+            fill: {
+                '': '#white',
+                selected: '#purple-text',
+                'invalid & !selected': '#white',
+                'invalid & selected': '#danger',
+                disabled: '#dark.12',
+            },
+            color: {
+                '': '#white',
+                'disabled & !selected': '#clear',
+            },
+            border: {
+                '': '#dark.30',
+                invalid: '#danger',
+                'disabled | (selected & !invalid)': '#clear',
+            },
+        },
+        Content: {
+            display: 'flex',
+            flow: 'column',
+            gap: '.25x',
+            flex: 1,
+            width: 'max 100%',
+        },
         Label: {
             preset: 't3',
             color: 'inherit',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            width: 'max 100%',
         },
         Description: {
             preset: 't4',
             color: {
                 '': '#dark-03',
             },
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            width: 'max 100%',
         },
     },
 });
@@ -113,35 +182,24 @@ const SectionWrapperElement = tasty({
     as: 'li',
     styles: {
         display: 'block',
-    },
-});
-const SectionHeadingElement = tasty({
-    styles: {
-        preset: 't4 strong',
-        color: '#dark-03',
-        padding: '.5x 1x .25x',
-        userSelect: 'none',
+        padding: {
+            '': 0,
+            ':last-of-type': '0 0 .5x 0',
+        },
     },
 });
 const SectionListElement = tasty({
+    qa: 'ListBoxSectionList',
     as: 'ul',
     styles: {
         display: 'flex',
-        gap: '1bw',
+        gap: '0',
         flow: 'column',
         margin: '0',
         padding: '0',
         listStyle: 'none',
     },
 });
-const DividerElement = tasty({
-    as: 'li',
-    styles: {
-        height: '1bw',
-        fill: '#border',
-        margin: '.5x 0',
-    },
-});
 const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
 export const ListBox = forwardRef(function ListBox(props, ref) {
     props = useProviderProps(props);
@@ -150,84 +208,23 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
         valuePropsMapper: ({ value, onChange }) => {
             const fieldProps = {};
             if (props.selectionMode === 'multiple') {
-                fieldProps.selectedKeys = Array.isArray(value)
-                    ? value
-                    : value
-                        ? [value]
-                        : [];
+                fieldProps.selectedKeys = value || [];
             }
             else {
                 fieldProps.selectedKey = value ?? null;
             }
             fieldProps.onSelectionChange = (key) => {
                 if (props.selectionMode === 'multiple') {
-                    if (Array.isArray(key)) {
-                        onChange(key);
-                    }
-                    else if (key instanceof Set) {
-                        onChange(Array.from(key));
-                    }
-                    else {
-                        onChange(key ? [key] : []);
-                    }
+                    onChange(key ? (Array.isArray(key) ? key : [key]) : []);
                 }
                 else {
-                    if (key instanceof Set) {
-                        onChange(key.size === 0 ? null : Array.from(key)[0]);
-                    }
-                    else {
-                        onChange(key);
-                    }
+                    onChange(Array.isArray(key) ? key[0] : key);
                 }
             };
             return fieldProps;
         },
     });
-    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, isSearchable = false, searchPlaceholder = 'Search...', autoFocus, filter, emptyLabel, searchInputStyles, listStyles, optionStyles, sectionStyles, headingStyles, searchInputRef, listRef, message, description, styles, labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, onSelectionChange, ...otherProps } = props;
-    const [searchValue, setSearchValue] = useState('');
-    const { contains } = useFilter({ sensitivity: 'base' });
-    // Choose the text filter function: user-provided `filter` prop (if any)
-    // or the default `contains` helper from `useFilter`.
-    const textFilterFn = useMemo(() => filter || contains, [filter, contains]);
-    // Collection-level filter function expected by `useListState`.
-    // It converts the text filter (textValue, searchValue) ⟶ boolean
-    // into the shape `(nodes) => Iterable<Node<T>>`.
-    // The current `searchValue` is captured in the closure – every re-render
-    // produces a new function so React Stately updates the collection when the
-    // search term changes.
-    const collectionFilter = useCallback((nodes) => {
-        const term = searchValue.trim();
-        // If there is no search term, return nodes untouched to avoid
-        // unnecessary object allocations.
-        if (!term) {
-            return nodes;
-        }
-        // Recursive helper to filter sections and items.
-        const filterNodes = (iter) => {
-            const result = [];
-            for (const node of iter) {
-                if (node.type === 'section') {
-                    const filteredChildren = filterNodes(node.childNodes);
-                    if (filteredChildren.length) {
-                        // Preserve the original node but replace `childNodes` with the
-                        // filtered iterable so that React-Stately can still traverse it.
-                        result.push({
-                            ...node,
-                            childNodes: filteredChildren,
-                        });
-                    }
-                }
-                else {
-                    const text = node.textValue ?? String(node.rendered ?? '');
-                    if (textFilterFn(text, term)) {
-                        result.push(node);
-                    }
-                }
-            }
-            return result;
-        };
-        return filterNodes(nodes);
-    }, [searchValue, textFilterFn]);
+    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, listStyles, optionStyles, sectionStyles, headingStyles, listRef, message, description, styles, mods: externalMods, size = 'small', labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, onSelectionChange, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, escapeKeyBehavior, onEscape, isCheckable, onOptionClick, ...otherProps } = props;
     // Wrap onSelectionChange to prevent selection when disabled and handle React Aria's Set format
     const externalSelectionHandler = onSelectionChange || props.onChange;
     const wrappedOnSelectionChange = useMemo(() => {
@@ -259,7 +256,6 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
     // Prepare props for useListState with correct selection props
     const listStateProps = {
         ...props,
-        filter: collectionFilter,
         onSelectionChange: wrappedOnSelectionChange,
         isDisabled,
         selectionMode: props.selectionMode || 'single',
@@ -267,14 +263,10 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
     // Set selection props based on mode
     if (listStateProps.selectionMode === 'multiple') {
         if (selectedKeys !== undefined) {
-            listStateProps.selectedKeys =
-                selectedKeys === 'all' ? 'all' : new Set(selectedKeys);
+            listStateProps.selectedKeys = new Set(selectedKeys);
         }
         if (defaultSelectedKeys !== undefined) {
-            listStateProps.defaultSelectedKeys =
-                defaultSelectedKeys === 'all'
-                    ? 'all'
-                    : new Set(defaultSelectedKeys);
+            listStateProps.defaultSelectedKeys = new Set(defaultSelectedKeys);
         }
         // Remove single-selection props if any
         delete listStateProps.selectedKey;
@@ -295,170 +287,264 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
         delete listStateProps.selectedKey;
         delete listStateProps.defaultSelectedKey;
     }
-    const listState = useListState(listStateProps);
+    const listState = useListState({
+        ...listStateProps,
+    });
+    // Track whether the last focus change was due to keyboard navigation
+    const lastFocusSourceRef = useRef('other');
+    // Expose the list state instance via the provided ref (if any)
+    if (stateRef) {
+        stateRef.current = {
+            ...listState,
+            lastFocusSourceRef,
+        };
+    }
+    // Warn if isCheckable is false in single selection mode
+    useWarn(isCheckable === false && props.selectionMode === 'single', {
+        key: ['listbox-checkable-single-mode'],
+        args: [
+            'CubeUIKit: isCheckable=false is not recommended in single selection mode as it may confuse users about selection behavior.',
+        ],
+    });
+    // Custom keyboard handling to prevent selection clearing on Escape while allowing overlay dismiss
+    const { keyboardProps } = useKeyboard({
+        onKeyDown: (e) => {
+            // Mark focus changes from keyboard navigation
+            if (e.key === 'ArrowDown' ||
+                e.key === 'ArrowUp' ||
+                e.key === 'Home' ||
+                e.key === 'End' ||
+                e.key === 'PageUp' ||
+                e.key === 'PageDown') {
+                lastFocusSourceRef.current = 'keyboard';
+            }
+            if (e.key === 'Escape' && onEscape) {
+                // Don't prevent default - let the overlay system handle closing
+                // But we'll call onEscape to potentially override the default selection clearing
+                onEscape();
+            }
+        },
+    });
     styles = extractStyles(otherProps, PROP_STYLES, styles);
     ref = useCombinedRefs(ref);
-    searchInputRef = useCombinedRefs(searchInputRef);
     listRef = useCombinedRefs(listRef);
     const { listBoxProps } = useListBox({
         ...props,
         'aria-label': props['aria-label'] || label?.toString(),
         isDisabled,
-        shouldUseVirtualFocus: isSearchable,
+        shouldUseVirtualFocus: shouldUseVirtualFocus ?? false,
         shouldFocusWrap: true,
+        escapeKeyBehavior: onEscape ? 'none' : 'clearSelection',
     }, listState, listRef);
     const { isFocused, focusProps } = useFocus({ isDisabled });
     const isInvalid = validationState === 'invalid';
-    // Keyboard navigation handler for search input
-    const { keyboardProps } = useKeyboard({
-        onKeyDown: (e) => {
-            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-                e.preventDefault();
-                const isArrowDown = e.key === 'ArrowDown';
-                const { selectionManager, collection } = listState;
-                const currentKey = selectionManager.focusedKey;
-                // Helper function to find next selectable item (skip section headers and disabled items)
-                const findNextSelectableKey = (startKey, direction) => {
-                    let nextKey = startKey;
-                    const keyGetter = direction === 'forward'
-                        ? collection.getKeyAfter.bind(collection)
-                        : collection.getKeyBefore.bind(collection);
-                    while (nextKey != null) {
-                        const item = collection.getItem(nextKey);
-                        // Use SelectionManager's canSelectItem method for proper validation
-                        if (item &&
-                            item.type !== 'section' &&
-                            selectionManager.canSelectItem(nextKey)) {
-                            return nextKey;
-                        }
-                        nextKey = keyGetter(nextKey);
-                    }
-                    return null;
-                };
-                // Helper function to find first/last selectable item
-                const findFirstLastSelectableKey = (direction) => {
-                    const allKeys = Array.from(collection.getKeys());
-                    const keysToCheck = direction === 'forward' ? allKeys : allKeys.reverse();
-                    for (const key of keysToCheck) {
-                        const item = collection.getItem(key);
-                        if (item &&
-                            item.type !== 'section' &&
-                            selectionManager.canSelectItem(key)) {
-                            return key;
-                        }
+    // ----- Virtualization logic -----
+    const itemsArray = useMemo(() => [...listState.collection], [listState.collection]);
+    const hasSections = useMemo(() => itemsArray.some((i) => i.type === 'section'), [itemsArray]);
+    const shouldVirtualize = !hasSections;
+    // Use ref to ensure estimateSize always accesses current itemsArray
+    const itemsArrayRef = useRef(itemsArray);
+    itemsArrayRef.current = itemsArray;
+    // Scroll container ref for virtualization
+    const scrollRef = useRef(null);
+    const rowVirtualizer = useVirtualizer({
+        count: shouldVirtualize ? itemsArray.length : 0,
+        getScrollElement: () => scrollRef.current,
+        estimateSize: (index) => {
+            const currentItem = itemsArrayRef.current[index];
+            if (currentItem?.props?.description) {
+                return 49;
+            }
+            return size === 'small' ? 33 : 41;
+        },
+        measureElement: (el) => {
+            return el.offsetHeight + 1;
+        },
+        overscan: 10,
+    });
+    // Trigger remeasurement when items change (for filtering scenarios)
+    useEffect(() => {
+        if (shouldVirtualize) {
+            rowVirtualizer.measure();
+        }
+    }, [shouldVirtualize, itemsArray, rowVirtualizer]);
+    // Keep focused item visible when virtualizing, but only for keyboard navigation
+    useEffect(() => {
+        if (!shouldVirtualize)
+            return;
+        const focusedKey = listState.selectionManager.focusedKey;
+        if (focusedKey != null) {
+            const idx = itemsArrayRef.current.findIndex((it) => it.key === focusedKey);
+            if (idx !== -1) {
+                // Check if the focused item is actually visible in the current viewport
+                // (not just rendered due to overscan)
+                const scrollElement = scrollRef.current;
+                if (scrollElement) {
+                    const scrollTop = scrollElement.scrollTop;
+                    const viewportHeight = scrollElement.clientHeight;
+                    const viewportBottom = scrollTop + viewportHeight;
+                    // Find the virtual item for this index
+                    const virtualItems = rowVirtualizer.getVirtualItems();
+                    const virtualItem = virtualItems.find((item) => item.index === idx);
+                    let isAlreadyVisible = false;
+                    if (virtualItem) {
+                        const itemTop = virtualItem.start;
+                        const itemBottom = virtualItem.start + virtualItem.size;
+                        // Check if the item is fully visible in the viewport
+                        // We should scroll if the item is partially hidden
+                        isAlreadyVisible =
+                            itemTop >= scrollTop && itemBottom <= viewportBottom;
                     }
-                    return null;
-                };
-                let nextKey = null;
-                const direction = isArrowDown ? 'forward' : 'backward';
-                if (currentKey == null) {
-                    // No current focus, find first/last selectable item
-                    nextKey = findFirstLastSelectableKey(direction);
-                }
-                else {
-                    // Find next selectable item from current position
-                    const candidateKey = direction === 'forward'
-                        ? collection.getKeyAfter(currentKey)
-                        : collection.getKeyBefore(currentKey);
-                    nextKey = findNextSelectableKey(candidateKey, direction);
-                    // If no next key found and focus wrapping is enabled, wrap to first/last selectable item
-                    if (nextKey == null) {
-                        nextKey = findFirstLastSelectableKey(direction);
+                    // Only scroll if the item is not already visible AND the focus change was due to keyboard navigation
+                    if (!isAlreadyVisible && lastFocusSourceRef.current === 'keyboard') {
+                        rowVirtualizer.scrollToIndex(idx, { align: 'auto' });
                     }
                 }
-                if (nextKey != null) {
-                    selectionManager.setFocusedKey(nextKey);
-                }
-            }
-            else if (e.key === 'Enter' || (e.key === ' ' && !searchValue.trim())) {
-                const focusedKey = listState.selectionManager.focusedKey;
-                if (focusedKey != null) {
-                    e.preventDefault();
-                    // Use the SelectionManager's select method which handles all selection logic
-                    // including single vs multiple selection modes and modifier keys
-                    listState.selectionManager.select(focusedKey, e);
-                }
             }
-        },
-    });
+        }
+    }, [shouldVirtualize, listState.selectionManager.focusedKey, itemsArray]);
+    // Merge React Aria listbox props with custom keyboard props so both sets of
+    // event handlers (e.g. Arrow navigation *and* our Escape handler) are
+    // preserved.
+    const mergedListBoxProps = mergeProps(listBoxProps, keyboardProps);
     const mods = useMemo(() => ({
         invalid: isInvalid,
         valid: validationState === 'valid',
         disabled: isDisabled,
         focused: isFocused,
-        loading: isLoading,
-        searchable: isSearchable,
+        header: !!header,
+        footer: !!footer,
+        ...externalMods,
     }), [
         isInvalid,
         validationState,
         isDisabled,
         isFocused,
-        isLoading,
-        isSearchable,
+        header,
+        footer,
+        externalMods,
     ]);
-    const searchInput = isSearchable ? (_jsxs(SearchWrapperElement, { mods: mods, "data-size": "small", children: [_jsx(SearchInputElement, { ref: searchInputRef, "data-is-prefix": true, type: "search", placeholder: searchPlaceholder, value: searchValue, disabled: isDisabled, autoFocus: autoFocus && isSearchable, "data-autofocus": autoFocus ? '' : undefined, styles: searchInputStyles, "data-size": "small", "aria-controls": listBoxProps.id, "aria-activedescendant": listState.selectionManager.focusedKey != null
-                    ? `${listBoxProps.id}-option-${listState.selectionManager.focusedKey}`
-                    : undefined, onChange: (e) => {
-                    const value = e.target.value;
-                    setSearchValue(value);
-                }, ...keyboardProps, ...modAttrs(mods) }), _jsx("div", { "data-element": "Prefix", children: _jsx("div", { "data-element": "InputIcon", children: isLoading ? _jsx(LoadingIcon, {}) : _jsx(SearchIcon, {}) }) })] })) : null;
-    const listBoxField = (_jsxs(ListBoxWrapperElement, { ref: ref, qa: qa || 'ListBox', ...modAttrs(mods), styles: styles, ...focusProps, children: [searchInput, _jsx(ListElement, { ...listBoxProps, ref: listRef, styles: listStyles, "aria-disabled": isDisabled || undefined, ...(!isSearchable ? keyboardProps : {}), children: (() => {
-                    const renderedItems = [];
-                    let isFirstSection = true;
-                    for (const item of listState.collection) {
-                        if (item.type === 'section') {
-                            if (!isFirstSection) {
-                                renderedItems.push(_jsx(DividerElement, { role: "separator", "aria-orientation": "horizontal" }, `divider-${String(item.key)}`));
-                            }
-                            renderedItems.push(_jsx(ListBoxSection, { item: item, state: listState, optionStyles: optionStyles, headingStyles: headingStyles, sectionStyles: sectionStyles, isParentDisabled: isDisabled, validationState: validationState }, item.key));
-                            isFirstSection = false;
-                        }
-                        else {
-                            renderedItems.push(_jsx(Option, { item: item, state: listState, styles: optionStyles, isParentDisabled: isDisabled, validationState: validationState }, item.key));
+    const listBoxField = (_jsxs(ListBoxWrapperElement, { ref: ref, qa: qa || 'ListBox', mods: mods, styles: styles, children: [header ? (_jsx(StyledHeader, { styles: headerStyles, "data-size": size, children: header })) : (_jsx("div", { role: "presentation" })), _jsx(ListBoxScrollElement, { ref: scrollRef, mods: mods, ...focusProps, children: _jsx(ListElement, { ...mergedListBoxProps, ref: listRef, styles: listStyles, "aria-disabled": isDisabled || undefined, mods: { sections: hasSections }, style: shouldVirtualize
+                        ? {
+                            position: 'relative',
+                            height: `${rowVirtualizer.getTotalSize() + 3}px`,
                         }
-                    }
-                    // Show "No results found" message when there are no items after filtration
-                    if (renderedItems.length === 0 &&
-                        isSearchable &&
-                        searchValue.trim()) {
-                        return (_jsx("li", { children: _jsx(Block, { preset: "t4", color: "#dark-03", children: emptyLabel !== undefined ? emptyLabel : 'No results found' }) }));
-                    }
-                    return renderedItems;
-                })() })] }));
+                        : undefined, children: shouldVirtualize
+                        ? rowVirtualizer.getVirtualItems().map((virtualItem) => {
+                            const item = itemsArray[virtualItem.index];
+                            return (_jsx(Option, { size: size, item: item, state: listState, styles: optionStyles, isParentDisabled: isDisabled, validationState: validationState, focusOnHover: focusOnHover, isCheckable: isCheckable, 
+                                // We don't need to measure the element here, because the height is already set by the virtualizer
+                                // This is a workaround to avoid glitches when selecting/deselecting items
+                                virtualRef: rowVirtualizer.measureElement, virtualStyle: {
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: 0,
+                                    right: 0,
+                                    transform: `translateY(${virtualItem.start}px)`,
+                                }, virtualIndex: virtualItem.index, lastFocusSourceRef: lastFocusSourceRef, onOptionClick: onOptionClick }, virtualItem.key));
+                        })
+                        : (() => {
+                            const renderedItems = [];
+                            let isFirstSection = true;
+                            for (const item of listState.collection) {
+                                if (item.type === 'section') {
+                                    if (!isFirstSection) {
+                                        renderedItems.push(_jsx(StyledDivider, { role: "separator", "aria-orientation": "horizontal" }, `divider-${String(item.key)}`));
+                                    }
+                                    renderedItems.push(_jsx(ListBoxSection, { item: item, state: listState, optionStyles: optionStyles, headingStyles: headingStyles, sectionStyles: sectionStyles, isParentDisabled: isDisabled, validationState: validationState, focusOnHover: focusOnHover, isCheckable: isCheckable, size: size, lastFocusSourceRef: lastFocusSourceRef, onOptionClick: onOptionClick }, item.key));
+                                    isFirstSection = false;
+                                }
+                                else {
+                                    renderedItems.push(_jsx(Option, { size: size, item: item, state: listState, styles: optionStyles, isParentDisabled: isDisabled, validationState: validationState, focusOnHover: focusOnHover, isCheckable: isCheckable, lastFocusSourceRef: lastFocusSourceRef, onOptionClick: onOptionClick }, item.key));
+                                }
+                            }
+                            return renderedItems;
+                        })() }) }), footer ? (_jsx(StyledFooter, { styles: footerStyles, "data-size": size, children: footer })) : (_jsx("div", { role: "presentation" }))] }));
     return wrapWithField(listBoxField, ref, mergeProps({ ...props, styles: undefined }, {}));
 });
-function Option({ item, state, styles, isParentDisabled, validationState }) {
-    const ref = useRef(null);
+function Option({ size = 'medium', item, state, styles, isParentDisabled, validationState, focusOnHover = false, isCheckable, onOptionClick, virtualStyle, virtualRef, virtualIndex, lastFocusSourceRef, }) {
+    const localRef = useRef(null);
+    // Merge local ref with react-virtual measure ref when provided
+    const combinedRef = useCombinedRefs(localRef, virtualRef);
     const isDisabled = isParentDisabled || state.disabledKeys.has(item.key);
     const isSelected = state.selectionManager.isSelected(item.key);
     const isFocused = state.selectionManager.focusedKey === item.key;
+    const { hoverProps, isHovered } = useHover({ isDisabled });
     const { optionProps, isPressed } = useOption({
         key: item.key,
         isDisabled,
         isSelected,
         shouldSelectOnPressUp: true,
-        shouldFocusOnHover: true,
-    }, state, ref);
+        shouldFocusOnHover: focusOnHover,
+    }, state, combinedRef);
     const description = item?.props?.description;
-    return (_jsxs(OptionElement, { ...optionProps, ref: ref, mods: {
+    // Custom click handler for the entire option
+    const handleOptionClick = (e) => {
+        // Mark focus changes from mouse clicks
+        if (lastFocusSourceRef) {
+            lastFocusSourceRef.current = 'mouse';
+        }
+        // If there's an onOptionClick callback and this is checkable in multiple mode,
+        // we need to distinguish between checkbox and content clicks
+        if (onOptionClick &&
+            isCheckable &&
+            state.selectionManager.selectionMode === 'multiple') {
+            // Check if the click target is within the checkbox area
+            const clickTarget = e.target;
+            const checkboxElement = localRef.current?.querySelector('[data-element="CheckboxWrapper"]');
+            if (checkboxElement &&
+                (checkboxElement === clickTarget ||
+                    checkboxElement.contains(clickTarget))) {
+                // Checkbox area clicked - only toggle, don't call onOptionClick
+                // Let React Aria handle the selection
+                optionProps.onClick?.(e);
+                // Set focus to the clicked item
+                state.selectionManager.setFocusedKey(item.key);
+            }
+            else {
+                // Content area clicked - toggle and trigger callback
+                // Let React Aria handle the selection first
+                optionProps.onClick?.(e);
+                // Set focus to the clicked item
+                state.selectionManager.setFocusedKey(item.key);
+                // Then call the callback (which will close the popover in FilterPicker)
+                if (onOptionClick) {
+                    onOptionClick(item.key);
+                }
+            }
+        }
+        else {
+            // Normal behavior - let React Aria handle it
+            optionProps.onClick?.(e);
+            // Set focus to the clicked item
+            state.selectionManager.setFocusedKey(item.key);
+            // Call onOptionClick if provided
+            if (onOptionClick) {
+                onOptionClick(item.key);
+            }
+        }
+    };
+    return (_jsxs(OptionElement, { id: `ListBoxItem-${String(item.key)}`, ...mergeProps(optionProps, hoverProps), ref: combinedRef, style: virtualStyle, "data-size": size, "data-index": virtualIndex, mods: {
             selected: isSelected,
             focused: isFocused,
             disabled: isDisabled,
             pressed: isPressed,
             valid: isSelected && validationState === 'valid',
             invalid: isSelected && validationState === 'invalid',
-        }, styles: styles, children: [_jsx("div", { "data-element": "Label", children: item.rendered }), description ? _jsx("div", { "data-element": "Description", children: description }) : null] }));
+            checkable: isCheckable,
+            hovered: isHovered, // We'll treat focus as hover for the checkbox visibility
+        }, styles: styles, onClick: handleOptionClick, children: [isCheckable && state.selectionManager.selectionMode === 'multiple' && (_jsx("div", { "data-element": "CheckboxWrapper", children: _jsx("div", { "data-element": "Checkbox", children: _jsx(CheckIcon, { size: 12, stroke: 3 }) }) })), _jsxs("div", { "data-element": "Content", children: [_jsx("div", { "data-element": "Label", children: item.rendered }), description ? (_jsx("div", { "data-element": "Description", children: description })) : null] })] }));
 }
 function ListBoxSection(props) {
-    const { item, state, optionStyles, headingStyles, sectionStyles, isParentDisabled, validationState, } = props;
+    const { item, state, optionStyles, headingStyles, sectionStyles, isParentDisabled, validationState, focusOnHover, isCheckable, onOptionClick, lastFocusSourceRef, } = props;
     const heading = item.rendered;
     const { itemProps, headingProps, groupProps } = useListBoxSection({
         heading,
         'aria-label': item['aria-label'],
     });
-    return (_jsxs(SectionWrapperElement, { ...itemProps, styles: sectionStyles, children: [heading && (_jsx(SectionHeadingElement, { ...headingProps, styles: headingStyles, children: heading })), _jsx(SectionListElement, { ...groupProps, children: [...item.childNodes]
+    return (_jsxs(SectionWrapperElement, { ...itemProps, styles: sectionStyles, children: [heading && (_jsx(StyledSectionHeading, { ...headingProps, styles: headingStyles, children: heading })), _jsx(SectionListElement, { ...groupProps, children: [...item.childNodes]
                     .filter((node) => state.collection.getItem(node.key))
-                    .map((node) => (_jsx(Option, { item: node, state: state, styles: optionStyles, isParentDisabled: isParentDisabled, validationState: validationState }, node.key))) })] }));
+                    .map((node) => (_jsx(Option, { size: props.size, item: node, state: state, styles: optionStyles, isParentDisabled: isParentDisabled, validationState: validationState, focusOnHover: focusOnHover, isCheckable: isCheckable, lastFocusSourceRef: lastFocusSourceRef, onOptionClick: onOptionClick }, node.key))) })] }));
 }
 const ListBoxSectionComponent = Object.assign(BaseSection, {
     displayName: 'Section',