@cube-dev/ui-kit 0.201.0 → 0.203.0

package/dist/components/fields/FilterListBox/FilterListBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterListBox.js","names":["ItemElement","Key","BASE_STYLES","COLOR_STYLES","mergeStyles","OUTER_STYLES","Styles","tasty","cloneElement","ForwardedRef","forwardRef","isValidElement","ReactElement","ReactNode","RefObject","useCallback","useEffect","useLayoutEffect","useMemo","useRef","useState","useFilter","useFocusWithin","useId","useKeyboard","Section","BaseSection","useListState","useEvent","useI18n","LoadingIcon","mergeProps","modAttrs","useCombinedRefs","useFocus","extractStyles","StyledHeader","CubeCollectionItemProps","CollectionItem","Item","getValidationMods","useFieldProps","wrapWithField","CubeListBoxProps","ListBox","getListBoxOptionId","getEdgeVisibleKey","getNextVisibleKey","markKeyboardFocus","DEFAULT_INPUT_STYLES","INPUT_WRAPPER_STYLES","Collection","Node","FieldBaseProps","FilterFn","textValue","inputValue","FilterListBoxWrapperElement","styles","display","flow","gridColumns","gridRows","gap","position","radius","color","transition","outline","focused","border","valid","invalid","disabled","popover","SearchWrapperElement","qa","fill","height","$size","SearchInputElement","as","padding","prefix","suffix","StyledHeaderWithoutBorder","CubeFilterListBoxProps","Omit","T","searchPlaceholder","autoFocus","filter","emptyLabel","searchInputStyles","isLoading","isLoadingItems","searchInputRef","HTMLInputElement","allowsCustomValue","mods","Record","listBoxStyles","onEscape","isCheckable","onOptionClick","key","customValueProps","Partial","newCustomValueProps","searchValue","onSearchChange","value","_internalCollection","PROP_STYLES","FilterListBox","props","ref","HTMLDivElement","valuePropsMapper","onChange","fieldProps","selectionMode","selectedKeys","selectedKey","onSelectionChange","Array","isArray","t","label","extra","id","labelStyles","isRequired","necessityIndicator","isInvalid","isValid","isDisabled","externalMods","listStyles","optionStyles","sectionStyles","headingStyles","listGap","listRef","message","description","focusOnHover","shouldFocusWrap","labelSuffix","defaultSelectedKey","defaultSelectedKeys","externalOnSelectionChange","showSelectAll","selectAllLabel","header","footer","size","headerStyles","footerStyles","items","children","renderChildren","allValueProps","controlledSearchValue","isReorderable","onReorder","form","otherProps","renderFn","itemsArray","from","Iterable","map","item","idx","rendered","it","localCollectionState","collection","originalKeys","keys","Set","type","add","String","customKeys","setCustomKeys","internalSearchValue","setInternalSearchValue","isSearchControlled","undefined","contains","sensitivity","currentSelectedKeys","length","keysToAdd","k","has","prev","mergedChildren","term","trim","localFilter","customArray","selectedKeysSet","forEach","selectedCustom","unselectedCustom","push","originalArray","innerAriaLabel","handleSearchChange","textFilterFn","filterFn","nodes","node","childNodes","filteredNodes","child","hasChildNodes","Boolean","enhancedChildren","childrenToProcess","doesTermExist","hasVisibleFilteredItems","customKey","customOption","hasSections","some","customValueSection","filteredItemsSection","isFocused","focusProps","isFocusWithin","setIsFocusWithin","focusWithinProps","onFocusWithinChange","listBoxRef","listBoxId","listStateRef","activeOptionKey","setActiveOptionKey","setVirtualFocus","current","selectionManager","setFocusedKey","listState","newCustomValueKey","customValueHasMatches","collectFocusableKeys","out","inCustomSection","disabledKeys","isCustomSection","visibleKeys","customValueShouldBeFocused","currentFocused","focusedKey","includes","currentIsNewCustomValue","keepsFocus","findFirstVisibleSelectedKey","selectedKeyStr","keyStr","keyToFocus","firstRealKey","find","lastFocusSourceRef","keyboardProps","onKeyDown","e","preventDefault","nextKey","wrap","targetKey","keyToSelect","select","loading","searchable","handleSelectionChange","selection","selectedValues","nextSet","val","handleOptionClick","setTimeout","focus","searchInput","target","filterListBoxField","disallowEmptySelection","allowDuplicateSelectionEvents","Object","defineProperty","enumerable","configurable","Item","mergeProps","BaseSection","useFocus","useId"],"sources":["../../../../src/components/fields/FilterListBox/FilterListBox.tsx"],"sourcesContent":["import { ItemElement, Key } from '@react-types/shared';\nimport {\n  BASE_STYLES,\n  COLOR_STYLES,\n  mergeStyles,\n  OUTER_STYLES,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  cloneElement,\n  ForwardedRef,\n  forwardRef,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFilter, useFocusWithin, useId, useKeyboard } from 'react-aria';\nimport { Section as BaseSection, useListState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal/hooks/use-event';\nimport { useI18n } from '../../../i18n';\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { mergeProps, modAttrs, useCombinedRefs } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport { StyledHeader } from '../../actions/Menu/styled';\nimport {\n  CubeCollectionItemProps,\n  CollectionItem as Item,\n} from '../../CollectionItem';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport { CubeListBoxProps, ListBox } from '../ListBox/ListBox';\nimport { getListBoxOptionId } from '../ListBox/optionId';\nimport {\n  getEdgeVisibleKey,\n  getNextVisibleKey,\n  markKeyboardFocus,\n} from '../ListBoxPopover/listNavigation';\nimport {\n  DEFAULT_INPUT_STYLES,\n  INPUT_WRAPPER_STYLES,\n} from '../TextInput/TextInputBase';\n\nimport type { Collection, Node } from '@react-types/shared';\nimport type { FieldBaseProps } from '../../../shared';\n\ntype FilterFn = (textValue: string, inputValue: string) => boolean;\n\nconst FilterListBoxWrapperElement = tasty({\n  styles: {\n    display: 'grid',\n    flow: 'column',\n    gridColumns: '1sf',\n    gridRows: 'max-content max-content 1sf',\n    gap: 0,\n    position: 'relative',\n    radius: true,\n    color: '#dark-02',\n    transition: 'theme',\n    outline: {\n      '': '#purple-03.0',\n      'invalid & focused': '#danger.50',\n      focused: '#purple-03',\n    },\n    border: {\n      '': true,\n      focused: '#primary-text',\n      valid: '#success-text.50',\n      invalid: '#danger-text.50',\n      disabled: true,\n      popover: false,\n    },\n  },\n});\n\nconst SearchWrapperElement = tasty({\n  qa: 'FilterListBoxSearchWrapper',\n  styles: mergeStyles(INPUT_WRAPPER_STYLES, {\n    border: 'bottom',\n    radius: '1r top',\n    fill: '#clear',\n    height: '($size + 1x)',\n    $size: {\n      '': '$size-md',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n    },\n  }),\n});\n\nconst SearchInputElement = tasty({\n  as: 'input',\n  styles: mergeStyles(DEFAULT_INPUT_STYLES, {\n    fill: '#clear',\n    padding: {\n      '': '.5x 1.5x',\n      prefix: '0 1.5x 0 .5x',\n      suffix: '.5x .5x .5x 1.5x',\n      'prefix & suffix': '0 .5x 0 .5x',\n    },\n  }),\n});\n\nconst StyledHeaderWithoutBorder = tasty(StyledHeader, {\n  styles: {\n    border: false,\n  },\n});\n\nexport interface CubeFilterListBoxProps<T>\n  // It sets `isFocusWithin` on its list itself.\n  extends\n    Omit<CubeListBoxProps<T>, 'filter' | 'isFocusWithin'>,\n    FieldBaseProps<\n      string | number | readonly (string | number)[] | null | undefined\n    > {\n  /** Placeholder text for the search input */\n  searchPlaceholder?: string;\n  /** Whether the search input should have autofocus */\n  autoFocus?: boolean;\n  /**\n   * Custom filter function for determining if an option should be included in search results.\n   * Pass `false` to disable internal filtering completely (useful for external filtering).\n   */\n  filter?: FilterFn | false;\n  /** Label shown when the list is empty. When provided, overrides both the \"No results found\" and \"No items\" defaults. */\n  emptyLabel?: ReactNode;\n  /** Custom styles for the search input */\n  searchInputStyles?: Styles;\n  /** Whether the FilterListBox is in loading state (shows loading icon in search input) */\n  isLoading?: boolean;\n  /** Whether items are currently loading. Shows a loading icon in the search input suffix. */\n  isLoadingItems?: boolean;\n  /** Ref for accessing the search input element */\n  searchInputRef?: RefObject<HTMLInputElement | null>;\n  /** Whether to allow entering custom values that are not present in the predefined options */\n  allowsCustomValue?: boolean;\n  /** Additional modifiers for styling the FilterListBox */\n  mods?: Record<string, boolean>;\n  /** Custom styles for the list box */\n  listBoxStyles?: Styles;\n\n  /**\n   * Callback fired when the user presses Escape key while the search input is empty.\n   * Can be used by parent components (e.g. FilterPicker) to close an enclosing Dialog.\n   */\n  onEscape?: () => void;\n\n  /**\n   * Whether to show checkboxes for multiple selection mode.\n   * This adds a checkbox icon to the left of each option.\n   */\n  isCheckable?: boolean;\n\n  /**\n   * Callback fired when an option is clicked but not on the checkbox area.\n   * Used by FilterPicker to close the popover on non-checkbox clicks.\n   */\n  onOptionClick?: (key: Key) => void;\n\n  /**\n   * Props to apply to existing custom values (values that are already selected but not in the predefined options).\n   */\n  customValueProps?: Partial<CubeCollectionItemProps<T>>;\n\n  /**\n   * Props to apply to new custom values (values typed in the search input that are about to be added).\n   * These are merged with customValueProps for new custom values.\n   */\n  newCustomValueProps?: Partial<CubeCollectionItemProps<T>>;\n\n  /**\n   * Controlled search value. When provided, the search input becomes controlled.\n   * Use with `onSearchChange` to manage the search state externally.\n   */\n  searchValue?: string;\n\n  /**\n   * Callback fired when the search input value changes.\n   * Use with `searchValue` for controlled search input.\n   */\n  onSearchChange?: (value: string) => void;\n\n  /**\n   * Pre-built collection to use instead of creating a new one.\n   * Used internally by FilterPicker to avoid duplicate collection creation.\n   * @internal\n   */\n  _internalCollection?: Collection<Node<any>>;\n}\n\nconst PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];\n\nexport const FilterListBox = forwardRef(function FilterListBox<\n  T extends object,\n>(props: CubeFilterListBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n  props = useFieldProps(props, {\n    valuePropsMapper: ({ value, onChange }) => {\n      const fieldProps: any = {};\n\n      if (props.selectionMode === 'multiple') {\n        fieldProps.selectedKeys = value || [];\n      } else {\n        fieldProps.selectedKey = value ?? null;\n      }\n\n      fieldProps.onSelectionChange = (key: any) => {\n        if (props.selectionMode === 'multiple') {\n          // Handle \"all\" selection and array selections\n          if (key === 'all') {\n            onChange('all');\n          } else {\n            onChange(key ? (Array.isArray(key) ? key : [key]) : []);\n          }\n        } else {\n          onChange(Array.isArray(key) ? key[0] : key);\n        }\n      };\n\n      return fieldProps;\n    },\n  });\n\n  const { t } = useI18n();\n\n  let {\n    qa,\n    label,\n    extra,\n    id,\n    labelStyles,\n    isRequired,\n    necessityIndicator,\n    isInvalid,\n    isValid,\n    isDisabled,\n    isLoading,\n    isLoadingItems,\n    searchPlaceholder = t('filterListBox.searchPlaceholder', 'Search...'),\n    autoFocus,\n    filter,\n    mods: externalMods,\n    emptyLabel,\n    searchInputStyles,\n    listStyles,\n    optionStyles,\n    sectionStyles,\n    headingStyles,\n    listGap,\n    searchInputRef,\n    listRef,\n    message,\n    description,\n    styles,\n    focusOnHover,\n    shouldFocusWrap,\n    labelSuffix,\n    selectedKey,\n    defaultSelectedKey,\n    selectedKeys,\n    defaultSelectedKeys,\n    onSelectionChange: externalOnSelectionChange,\n    allowsCustomValue = false,\n    showSelectAll,\n    selectAllLabel,\n    header,\n    footer,\n    size = 'medium',\n    headerStyles,\n    footerStyles,\n    listBoxStyles,\n    items,\n    children: renderChildren,\n    onEscape,\n    isCheckable,\n    onOptionClick,\n    selectionMode = 'single',\n    allValueProps,\n    customValueProps,\n    newCustomValueProps,\n    searchValue: controlledSearchValue,\n    onSearchChange,\n    _internalCollection,\n    isReorderable = false,\n    onReorder,\n    form,\n    ...otherProps\n  } = props;\n\n  // Preserve the original `children` (may be a render function) before we\n  // potentially overwrite it.\n  let children: ReactNode = renderChildren as ReactNode;\n\n  const renderFn = renderChildren as unknown;\n\n  if (items && typeof renderFn === 'function') {\n    try {\n      const itemsArray = Array.from(items as Iterable<any>);\n      // Execute the render function for each item to obtain <Item/> / <Section/> nodes.\n      children = itemsArray.map((item, idx) => {\n        const rendered = (renderFn as (it: any) => ReactNode)(item);\n        // Ensure every element has a stable key: rely on the user-provided key\n        // inside the render function, otherwise fall back to the item itself or\n        // the index. This mirrors React Aria examples where the render function\n        // is expected to set keys, but we add a fallback for robustness.\n        if (\n          isValidElement(rendered) &&\n          (rendered as ReactElement).key == null\n        ) {\n          return cloneElement(rendered as ReactElement, {\n            key: (rendered as any)?.key ?? item?.key ?? idx,\n          });\n        }\n\n        return rendered as ReactNode;\n      });\n    } catch {\n      // If conversion fails for some reason, we silently ignore and proceed\n      // with the original children value so we don't break runtime.\n    }\n  }\n\n  // Use provided collection from FilterPicker or create our own\n  // Hook call order is stable: _internalCollection is consistent per component instance\n  const localCollectionState = _internalCollection\n    ? { collection: _internalCollection }\n    : useListState({\n        children: children as any,\n        items: items as any,\n        selectionMode: 'none' as any,\n      });\n\n  // Collect original option keys to avoid duplicating them as custom values.\n  const originalKeys = useMemo(() => {\n    const keys = new Set<string>();\n    for (const item of localCollectionState.collection) {\n      if (item.type === 'item') {\n        keys.add(String(item.key));\n      }\n    }\n    return keys;\n  }, [localCollectionState.collection]);\n\n  // State to keep track of custom (user-entered) items that were selected.\n  const [customKeys, setCustomKeys] = useState<Set<string>>(new Set());\n\n  // Controlled/uncontrolled search value pattern\n  const [internalSearchValue, setInternalSearchValue] = useState('');\n  const isSearchControlled = controlledSearchValue !== undefined;\n  const searchValue = isSearchControlled\n    ? controlledSearchValue\n    : internalSearchValue;\n\n  const { contains } = useFilter({ sensitivity: 'base' });\n\n  // Initialize custom keys from current selection\n  useEffect(() => {\n    if (!allowsCustomValue) return;\n\n    const currentSelectedKeys = selectedKeys\n      ? selectedKeys === 'all'\n        ? [] // Skip custom key detection when 'all' is selected\n        : Array.from(selectedKeys).map(String)\n      : selectedKey != null\n        ? [String(selectedKey)]\n        : [];\n\n    if (currentSelectedKeys.length === 0) return;\n\n    const keysToAdd = currentSelectedKeys.filter((k) => !originalKeys.has(k));\n\n    if (keysToAdd.length) {\n      setCustomKeys((prev) => new Set([...Array.from(prev), ...keysToAdd]));\n    }\n  }, [allowsCustomValue, selectedKeys, selectedKey, originalKeys]);\n\n  // Merge original children with any custom items so they persist in the list.\n  // If there are selected custom values, they should appear on top with other\n  // selected items (which are already sorted by the parent component, e.g. FilterPicker).\n  const mergedChildren: ReactNode = useMemo(() => {\n    if (!children && customKeys.size === 0) return children;\n\n    // Selected custom values are injected by FilterListBox itself, not by the\n    // parent. They must respect the search input regardless of the `filter`\n    // prop — `filter={false}` only describes the parent's authority over its\n    // own items. Filter them with the user-provided filter (if any) or the\n    // default `contains`.\n    const term = searchValue.trim();\n    const localFilter: FilterFn =\n      typeof filter === 'function' ? filter : contains;\n\n    // Build React elements for custom values (kept stable via their key).\n    const customArray = Array.from(customKeys)\n      .filter((key) => !term || localFilter(key, term))\n      .map((key) => (\n        <Item key={key} textValue={key} {...customValueProps}>\n          {key}\n        </Item>\n      ));\n\n    // Identify which custom keys are currently selected so we can promote them.\n    const selectedKeysSet = new Set<string>();\n\n    if (selectionMode === 'multiple') {\n      if (selectedKeys === 'all') {\n        // When 'all' is selected, no custom items should be treated as selected\n        // since 'all' means all available items, not custom ones\n      } else {\n        Array.from(selectedKeys ?? []).forEach((k) =>\n          selectedKeysSet.add(String(k)),\n        );\n      }\n    } else {\n      if (selectedKey != null) selectedKeysSet.add(String(selectedKey));\n    }\n\n    const selectedCustom: ReactNode[] = [];\n    const unselectedCustom: ReactNode[] = [];\n\n    customArray.forEach((item: any) => {\n      if (selectedKeysSet.has(String(item.key))) {\n        selectedCustom.push(item);\n      } else {\n        unselectedCustom.push(item);\n      }\n    });\n\n    if (!children) {\n      // No original items – just return selected custom followed by the rest.\n      return [...selectedCustom, ...unselectedCustom];\n    }\n\n    const originalArray = Array.isArray(children) ? children : [children];\n\n    // Final order: selected custom items -> original array (already possibly\n    // sorted by parent) -> unselected custom items.\n    return [...selectedCustom, ...originalArray, ...unselectedCustom];\n  }, [\n    children,\n    customKeys,\n    selectionMode,\n    selectedKey,\n    selectedKeys,\n    searchValue,\n    filter,\n    contains,\n    customValueProps,\n  ]);\n\n  // Determine an aria-label for the internal ListBox to avoid React Aria warnings.\n  const innerAriaLabel =\n    (props as any)['aria-label'] ||\n    (typeof label === 'string' ? label : undefined);\n\n  const handleSearchChange = useCallback(\n    (value: string) => {\n      if (!isSearchControlled) {\n        setInternalSearchValue(value);\n      }\n      onSearchChange?.(value);\n    },\n    [isSearchControlled, onSearchChange],\n  );\n\n  // Choose the text filter function: user-provided `filter` prop (if any),\n  // or the default `contains` helper from `useFilter`.\n  // When `filter={false}`, the parent owns filtering — we normally pass items\n  // through unchanged. The exception is when `isLoadingItems` is `true`: a\n  // server fetch is in flight and currently visible items are stale, so we\n  // fall back to client-side `contains` to hide non-matching stale items\n  // until the new items arrive.\n  const textFilterFn = useMemo<FilterFn>(() => {\n    if (filter === false) {\n      return isLoadingItems ? contains : () => true;\n    }\n    return filter || contains;\n  }, [filter, contains, isLoadingItems]);\n\n  // Create a filter function for collection nodes (similar to ComboBox pattern)\n  const filterFn = useCallback(\n    (nodes: Iterable<any>) => {\n      // Server-side filtering with no fetch in flight — items are\n      // authoritative and shown as-is.\n      if (filter === false && !isLoadingItems) return nodes;\n\n      const term = searchValue.trim();\n\n      if (!term) {\n        return nodes;\n      }\n\n      // Filter nodes based on their textValue and preserve section structure\n      return [...nodes]\n        .map((node: any) => {\n          if (node.type === 'section' && node.childNodes) {\n            const filteredNodes = [...node.childNodes].filter((child: any) =>\n              textFilterFn(child.textValue || '', term),\n            );\n\n            if (filteredNodes.length === 0) {\n              return null;\n            }\n\n            return {\n              ...node,\n              childNodes: filteredNodes,\n              hasChildNodes: true,\n            };\n          }\n\n          return textFilterFn(node.textValue || '', term) ? node : null;\n        })\n        .filter(Boolean);\n    },\n    [filter, searchValue, textFilterFn, isLoadingItems],\n  );\n\n  // Handle custom values if allowed\n  const enhancedChildren = useMemo(() => {\n    let childrenToProcess = mergedChildren;\n\n    // Handle custom values if allowed\n    if (!allowsCustomValue) return childrenToProcess;\n\n    const term = searchValue.trim();\n    if (!term) return childrenToProcess;\n\n    // Helper to determine if the term is already present (exact match on rendered textValue or the key).\n    const doesTermExist = (term: string): boolean => {\n      // Check if term exists in custom keys\n      if (customKeys.has(term)) {\n        return true;\n      }\n\n      // Check if term exists in original collection\n      for (const item of localCollectionState.collection) {\n        if (item.type === 'item') {\n          const textValue = item.textValue || String(item.rendered || '');\n          if (term === textValue || String(item.key) === term) {\n            return true;\n          }\n        }\n      }\n      return false;\n    };\n\n    if (doesTermExist(term)) {\n      return childrenToProcess;\n    }\n\n    // Check if there are any items that will match the filter.\n    // This determines whether we need to visually separate the custom value\n    // from real items (i.e. render a divider between sections). When there\n    // are no visible items, we skip the section wrapper so no divider is\n    // drawn above a lone custom-value option.\n    //\n    // Selected custom values (from `customKeys`) are filtered by `localFilter`\n    // in `mergedChildren` regardless of `filter={false}`, so this check must\n    // use the same logic — otherwise we'd report \"items visible\" and draw a\n    // divider while the actual collection only contains the custom value.\n    const localFilter: FilterFn =\n      typeof filter === 'function' ? filter : contains;\n\n    const hasVisibleFilteredItems = (() => {\n      for (const item of localCollectionState.collection) {\n        if (item.type === 'item') {\n          const textValue = item.textValue || String(item.rendered || '');\n          if (textFilterFn(textValue, term)) {\n            return true;\n          }\n        } else if (item.type === 'section' && item.childNodes) {\n          for (const child of item.childNodes) {\n            const textValue = child.textValue || String(child.rendered || '');\n            if (textFilterFn(textValue, term)) {\n              return true;\n            }\n          }\n        }\n      }\n\n      for (const customKey of customKeys) {\n        if (localFilter(customKey, term)) {\n          return true;\n        }\n      }\n\n      return false;\n    })();\n\n    // Create the custom option\n    const customOption = (\n      <Item\n        key={term}\n        textValue={term}\n        {...mergeProps(customValueProps ?? {}, newCustomValueProps ?? {})}\n      >\n        {term}\n      </Item>\n    );\n\n    // If there are visible filtered items, add visual separation for custom value\n    if (hasVisibleFilteredItems && childrenToProcess) {\n      // Check if the collection contains any sections\n      // If it does, we can't wrap childrenToProcess in another section (would create nested sections)\n      const hasSections = [...localCollectionState.collection].some(\n        (item) => item.type === 'section',\n      );\n\n      const customValueSection = (\n        <BaseSection\n          key=\"__custom_value__\"\n          aria-label={t('filterListBox.customValue', 'Custom value')}\n        >\n          {customOption}\n        </BaseSection>\n      );\n\n      if (hasSections) {\n        // Collection has sections - just append the custom value section without wrapping\n        if (Array.isArray(childrenToProcess)) {\n          return [...childrenToProcess, customValueSection];\n        }\n        return [childrenToProcess, customValueSection];\n      }\n\n      // No sections in collection - wrap items in a section for visual separation\n      const filteredItemsSection = (\n        <BaseSection\n          key=\"__filtered_items__\"\n          aria-label={t('filterListBox.filteredItems', 'Filtered items')}\n        >\n          {childrenToProcess as ItemElement<unknown>[]}\n        </BaseSection>\n      );\n\n      return [filteredItemsSection, customValueSection];\n    }\n\n    // No visible filtered items, just return the custom option without sections\n    if (Array.isArray(childrenToProcess)) {\n      return [...childrenToProcess, customOption];\n    }\n\n    if (childrenToProcess) {\n      return [childrenToProcess, customOption];\n    }\n\n    return customOption;\n  }, [\n    allowsCustomValue,\n    mergedChildren,\n    searchValue,\n    customKeys,\n    localCollectionState.collection,\n    customValueProps,\n    newCustomValueProps,\n    textFilterFn,\n    filter,\n    contains,\n    t,\n  ]);\n\n  styles = extractStyles(otherProps, PROP_STYLES, styles);\n\n  searchInputRef = useCombinedRefs(searchInputRef);\n  listRef = useCombinedRefs(listRef);\n\n  const { isFocused, focusProps } = useFocus();\n  // The search input moves the list's focused option, so the option shows as\n  // focused only while focus is in this component.\n  const [isFocusWithin, setIsFocusWithin] = useState(false);\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: setIsFocusWithin,\n  });\n\n  const listBoxRef = useRef<HTMLDivElement>(null);\n  // The search input points `aria-controls` and `aria-activedescendant` into\n  // the list, so the list needs an id the input knows.\n  const listBoxId = useId();\n\n  // Ref to access internal ListBox state (selection manager, etc.)\n  const listStateRef = useRef<any>(null);\n\n  // The option under virtual focus, mirrored in state for the search input's\n  // `aria-activedescendant`: the listbox's own state update does not re-render\n  // this component. Every focus move below goes through `setVirtualFocus`.\n  const [activeOptionKey, setActiveOptionKey] = useState<Key | null>(null);\n  const setVirtualFocus = useEvent((key: Key | null) => {\n    listStateRef.current?.selectionManager.setFocusedKey(key);\n    setActiveOptionKey(key);\n  });\n\n  // When the search value changes, the visible collection of items may change as well.\n  // If the currently focused item is no longer visible, move virtual focus to the first\n  // available item so that arrow navigation and Enter behaviour continue to work.\n  // If there are no available items, reset the selection so Enter won't select anything.\n  // Priority: focus on selected items first, then fall back to first visible item.\n  useLayoutEffect(() => {\n    const listState = listStateRef.current;\n\n    if (!listState) return;\n\n    const { selectionManager, collection } = listState;\n\n    // Walk the collection and:\n    //   1. Collect the enabled keys of the visible items (supports sections).\n    //   2. Detect the synthetic \"new custom value\" option — the one generated\n    //      from the current search term when `allowsCustomValue` is true.\n    //\n    // The custom value is rendered in one of two layouts depending on whether\n    // any real item text-matches the search term (`hasVisibleFilteredItems`\n    // in `enhancedChildren`):\n    //   • Some items match → wrapped in a `__custom_value__` section\n    //     (`customValueHasMatches = true`)\n    //   • No items match    → appended at the top level with key === term\n    //     (`customValueHasMatches = false`)\n    //\n    // The layout itself is the signal we use to decide whether the custom\n    // value should be the focus target (no matches) or whether focus should\n    // move to a real item (matches present).\n    const term = searchValue.trim();\n    let newCustomValueKey: Key | null = null;\n    let customValueHasMatches = false;\n\n    const collectFocusableKeys = (\n      nodes: Iterable<any>,\n      out: Key[],\n      inCustomSection = false,\n    ) => {\n      for (const node of nodes) {\n        if (node.type === 'item') {\n          if (!listState.disabledKeys.has(node.key)) out.push(node.key);\n          if (inCustomSection) {\n            newCustomValueKey = node.key;\n            customValueHasMatches = true;\n          }\n        } else if (node.childNodes) {\n          const isCustomSection =\n            inCustomSection || node.key === '__custom_value__';\n          collectFocusableKeys(node.childNodes, out, isCustomSection);\n        }\n      }\n    };\n\n    const visibleKeys: Key[] = [];\n    collectFocusableKeys(collection, visibleKeys);\n\n    // Detect the appended-at-top-level case (no items text-match). The custom\n    // option is added with key === trimmed search term and lives directly in\n    // the top-level collection (not nested in any section).\n    if (newCustomValueKey == null && allowsCustomValue && term) {\n      for (const node of collection) {\n        if (node.type === 'item' && String(node.key) === term) {\n          newCustomValueKey = node.key;\n          customValueHasMatches = false;\n          break;\n        }\n      }\n    }\n\n    // If there are no visible items, reset the focused key so Enter won't select anything\n    if (visibleKeys.length === 0) {\n      setVirtualFocus(null);\n      return;\n    }\n\n    // The custom value should be the focus target when it exists and there\n    // are no real text-matches — the user's typed value is then the only\n    // actionable option. During an in-flight server fetch (`filter === false`\n    // + `isLoadingItems`) `textFilterFn` falls back to client-side `contains`\n    // so non-matching stale items are hidden, which keeps this signal honest.\n    const customValueShouldBeFocused =\n      newCustomValueKey != null && !customValueHasMatches;\n\n    // Decide whether the current focus is already on the right thing. If yes,\n    // don't disturb it. Otherwise fall through and re-pick a focus target.\n    const currentFocused = selectionManager.focusedKey;\n    if (currentFocused != null && visibleKeys.includes(currentFocused)) {\n      const currentIsNewCustomValue =\n        newCustomValueKey != null && currentFocused === newCustomValueKey;\n      const keepsFocus = customValueShouldBeFocused\n        ? currentIsNewCustomValue\n        : newCustomValueKey != null\n          ? // Custom value exists but isn't the priority (matches available)\n            // — any non-custom focus is fine.\n            !currentIsNewCustomValue\n          : // No custom value involved at all.\n            true;\n\n      if (keepsFocus) {\n        setActiveOptionKey(currentFocused);\n        return;\n      }\n    }\n\n    // Helper to find the first selected item that's visible\n    const findFirstVisibleSelectedKey = (): Key | null => {\n      if (selectionMode === 'single') {\n        // Single selection: check if selectedKey is visible\n        if (selectedKey != null) {\n          const selectedKeyStr = String(selectedKey);\n          if (visibleKeys.some((k) => String(k) === selectedKeyStr)) {\n            return selectedKey;\n          }\n        }\n      } else if (selectionMode === 'multiple') {\n        // Multiple selection: find first selected key that's visible\n        if (selectedKeys && selectedKeys !== 'all') {\n          for (const key of selectedKeys) {\n            const keyStr = String(key);\n            if (visibleKeys.some((k) => String(k) === keyStr)) {\n              return key;\n            }\n          }\n        }\n      }\n      return null;\n    };\n\n    // Determine which key to focus\n    let keyToFocus: Key | null = null;\n\n    if (customValueShouldBeFocused) {\n      // No real matches — promote the custom value over any selected/stale\n      // item so the user can press Enter to add the value they just typed.\n      keyToFocus = newCustomValueKey;\n    } else {\n      keyToFocus = findFirstVisibleSelectedKey();\n\n      // Fallback to first visible item if no selected item found. Prefer the\n      // first real (non-custom-value) item so focus doesn't land on the\n      // bottom-of-list custom-value suggestion when real items are available.\n      if (keyToFocus == null) {\n        const firstRealKey = visibleKeys.find((k) => k !== newCustomValueKey);\n        keyToFocus = firstRealKey ?? visibleKeys[0];\n      }\n    }\n\n    // Mark this focus change as keyboard navigation so ListBox will scroll to it\n    if (listState.lastFocusSourceRef) {\n      listState.lastFocusSourceRef.current = 'keyboard';\n    }\n\n    // Set focus to the determined key\n    setVirtualFocus(keyToFocus);\n  }, [\n    searchValue,\n    enhancedChildren,\n    selectionMode,\n    selectedKey,\n    selectedKeys,\n    allowsCustomValue,\n    setVirtualFocus,\n  ]);\n\n  // Keyboard navigation handler for search input\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: (e) => {\n      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n        e.preventDefault();\n\n        const listState = listStateRef.current;\n        if (!listState) return;\n\n        // The collection is already filtered by React Stately via filterFn;\n        // disabled options are skipped.\n        const nextKey = getNextVisibleKey(\n          listState,\n          e.key === 'ArrowDown' ? 1 : -1,\n          { wrap: shouldFocusWrap },\n        );\n\n        if (nextKey != null) {\n          markKeyboardFocus(listState);\n          setVirtualFocus(nextKey);\n        }\n      } else if (\n        e.key === 'Home' ||\n        e.key === 'End' ||\n        e.key === 'PageUp' ||\n        e.key === 'PageDown'\n      ) {\n        e.preventDefault();\n\n        const listState = listStateRef.current;\n        if (!listState) return;\n\n        const targetKey = getEdgeVisibleKey(\n          listState,\n          e.key === 'Home' || e.key === 'PageUp' ? 'first' : 'last',\n        );\n\n        if (targetKey == null) return;\n\n        markKeyboardFocus(listState);\n        setVirtualFocus(targetKey);\n      } else if (e.key === 'Enter' || (e.key === ' ' && !searchValue)) {\n        const listState = listStateRef.current;\n\n        if (!listState) return;\n\n        const keyToSelect = listState.selectionManager.focusedKey;\n\n        if (keyToSelect != null) {\n          e.preventDefault();\n          listState.selectionManager.select(keyToSelect, e);\n\n          if (\n            e.key === 'Enter' &&\n            isCheckable &&\n            onEscape &&\n            selectionMode === 'multiple'\n          ) {\n            onEscape();\n          }\n        }\n      } else if (e.key === 'Escape') {\n        if (searchValue) {\n          // Clear the current search if any text is present.\n          e.preventDefault();\n          handleSearchChange('');\n        } else {\n          // Notify parent that Escape was pressed on an empty input.\n          if (onEscape) {\n            e.preventDefault();\n            onEscape();\n          }\n        }\n      }\n    },\n  });\n\n  const mods = useMemo(\n    () => ({\n      ...getValidationMods({ isInvalid, isValid }),\n      disabled: !!isDisabled,\n      focused: isFocused,\n      loading: !!isLoading,\n      'loading-items': !!isLoadingItems,\n      searchable: true,\n      prefix: !!isLoading,\n      suffix: !!isLoadingItems,\n      ...externalMods,\n    }),\n    [\n      isInvalid,\n      isInvalid,\n      isValid,\n      isDisabled,\n      isFocused,\n      isLoading,\n      isLoadingItems,\n      externalMods,\n    ],\n  );\n\n  // Handler must be defined before we render ListBox so we can pass it.\n  const handleSelectionChange = (selection: any) => {\n    if (allowsCustomValue) {\n      // Normalize current selection into an array of string keys\n      let selectedValues: string[] = [];\n\n      if (selection != null) {\n        if (Array.isArray(selection)) {\n          selectedValues = selection.map(String);\n        } else {\n          selectedValues = [String(selection)];\n        }\n      }\n\n      // Build next custom keys set based on selected values\n      const nextSet = new Set<string>();\n\n      selectedValues.forEach((val) => {\n        if (!originalKeys.has(val)) {\n          nextSet.add(val);\n        }\n      });\n\n      // Update internal custom keys state\n      setCustomKeys(nextSet);\n    }\n\n    if (externalOnSelectionChange) {\n      (externalOnSelectionChange as any)(selection);\n    }\n  };\n\n  // Custom option click handler that ensures search input receives focus\n  const handleOptionClick = (key: Key) => {\n    // Focus the search input to enable keyboard navigation\n    // Use setTimeout to ensure this happens after React state updates\n    setTimeout(() => {\n      if (searchInputRef.current) {\n        searchInputRef.current.focus();\n      }\n    }, 0);\n\n    // Call the original onOptionClick if provided\n    if (onOptionClick) {\n      onOptionClick(key);\n    }\n  };\n\n  const searchInput = (\n    <SearchWrapperElement mods={mods} data-size={size}>\n      {isLoading && (\n        <div data-element=\"Prefix\">\n          <div data-element=\"InputIcon\">\n            {isLoading ? <LoadingIcon /> : null}\n          </div>\n        </div>\n      )}\n      <SearchInputElement\n        ref={searchInputRef}\n        qa={qa || 'FilterListBox'}\n        id={id}\n        data-prefix={isLoading ? '' : undefined}\n        data-suffix={isLoadingItems ? '' : undefined}\n        type=\"search\"\n        placeholder={searchPlaceholder}\n        value={searchValue}\n        disabled={isDisabled}\n        autoFocus={autoFocus}\n        {...(autoFocus ? { 'data-autofocus': '' } : undefined)}\n        styles={searchInputStyles}\n        data-size={size}\n        data-input-type=\"filterlistbox\"\n        role=\"combobox\"\n        aria-expanded=\"true\"\n        aria-haspopup=\"listbox\"\n        aria-controls={listBoxId}\n        aria-activedescendant={\n          activeOptionKey != null\n            ? getListBoxOptionId(listBoxId, activeOptionKey)\n            : undefined\n        }\n        // The search input is the control the label points at, so it also\n        // takes the caller's naming and the field's description and message.\n        aria-label={(props as any)['aria-label']}\n        aria-labelledby={(props as any)['aria-labelledby']}\n        aria-describedby={(props as any)['aria-describedby']}\n        aria-invalid={isInvalid || undefined}\n        onChange={(e) => {\n          handleSearchChange(e.target.value);\n        }}\n        {...keyboardProps}\n        {...modAttrs(mods)}\n      />\n      {isLoadingItems && (\n        <div data-element=\"Suffix\">\n          <LoadingIcon data-element=\"InputIcon\" />\n        </div>\n      )}\n    </SearchWrapperElement>\n  );\n\n  const filterListBoxField = (\n    <FilterListBoxWrapperElement\n      ref={ref}\n      qa=\"FilterListBoxWrapper\"\n      {...modAttrs(mods)}\n      styles={styles}\n      {...mergeProps(focusProps, focusWithinProps)}\n    >\n      {header ? (\n        <StyledHeaderWithoutBorder data-size={size} styles={headerStyles}>\n          {header}\n        </StyledHeaderWithoutBorder>\n      ) : (\n        <div role=\"presentation\" />\n      )}\n      {searchInput}\n      <ListBox\n        isBare\n        ref={listBoxRef}\n        id={listBoxId}\n        aria-label={innerAriaLabel}\n        selectedKey={selectedKey}\n        defaultSelectedKey={defaultSelectedKey}\n        selectedKeys={selectedKeys}\n        defaultSelectedKeys={defaultSelectedKeys}\n        selectionMode={selectionMode}\n        isDisabled={isDisabled}\n        listRef={listRef}\n        stateRef={listStateRef}\n        listStyles={listStyles}\n        shouldFocusWrap={shouldFocusWrap}\n        optionStyles={optionStyles}\n        sectionStyles={sectionStyles}\n        headingStyles={headingStyles}\n        listGap={listGap}\n        isInvalid={isInvalid}\n        isValid={isValid}\n        disallowEmptySelection={props.disallowEmptySelection}\n        allowDuplicateSelectionEvents={props.allowDuplicateSelectionEvents}\n        disabledKeys={props.disabledKeys}\n        focusOnHover={focusOnHover}\n        shouldUseVirtualFocus={!(isReorderable && !searchValue.trim())}\n        isFocusWithin={isFocusWithin}\n        showSelectAll={showSelectAll}\n        selectAllLabel={selectAllLabel}\n        footer={footer}\n        footerStyles={footerStyles}\n        mods={mods}\n        styles={listBoxStyles}\n        isCheckable={isCheckable}\n        items={items as any}\n        allValueProps={allValueProps}\n        filter={filterFn}\n        emptyLabel={\n          emptyLabel !== undefined\n            ? emptyLabel\n            : searchValue.trim()\n              ? t('filterListBox.noResults', 'No results found')\n              : t('filterListBox.noItems', 'No items')\n        }\n        isReorderable={isReorderable && !searchValue.trim()}\n        onReorder={onReorder}\n        onSelectionChange={handleSelectionChange}\n        onEscape={onEscape}\n        onOptionClick={handleOptionClick}\n      >\n        {enhancedChildren as any}\n      </ListBox>\n    </FilterListBoxWrapperElement>\n  );\n\n  return wrapWithField<Omit<CubeFilterListBoxProps<T>, 'children'>>(\n    filterListBoxField,\n    props,\n  );\n}) as unknown as (<T>(\n  props: CubeFilterListBoxProps<T> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement) & { Item: typeof Item; Section: typeof BaseSection };\n\nFilterListBox.Item = Item;\n\nFilterListBox.Section = BaseSection;\n\nObject.defineProperty(FilterListBox, 'cubeInputType', {\n  value: 'FilterListBox',\n  enumerable: false,\n  configurable: false,\n});\n"],"mappings":"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"}
+{"version":3,"file":"FilterListBox.js","names":["ItemElement","Key","Styles","cloneElement","ForwardedRef","forwardRef","isValidElement","ReactElement","ReactNode","RefObject","useCallback","useEffect","useLayoutEffect","useMemo","useRef","useState","useFilter","useFocusWithin","useId","useKeyboard","Section","BaseSection","useListState","useEvent","useI18n","LoadingIcon","mergeProps","modAttrs","useCombinedRefs","useFocus","CubeCollectionItemProps","CollectionItem","Item","getValidationMods","useFieldProps","wrapWithField","splitFieldLayout","CubeListBoxProps","ListBox","getListBoxOptionId","getEdgeVisibleKey","getNextVisibleKey","markKeyboardFocus","FilterListBoxWrapperElement","SearchInputElement","SearchWrapperElement","StyledHeaderWithoutBorder","Collection","Node","FieldBaseProps","FilterFn","textValue","inputValue","CubeFilterListBoxProps","Omit","T","searchPlaceholder","autoFocus","filter","emptyLabel","searchInputStyles","isLoading","isLoadingItems","searchInputRef","HTMLInputElement","allowsCustomValue","mods","Record","listBoxStyles","onEscape","isCheckable","onOptionClick","key","customValueProps","Partial","newCustomValueProps","searchValue","onSearchChange","value","_internalCollection","FilterListBox","props","ref","HTMLDivElement","valuePropsMapper","onChange","fieldProps","selectionMode","selectedKeys","selectedKey","onSelectionChange","Array","isArray","t","qa","label","extra","id","labelStyles","isRequired","necessityIndicator","isInvalid","isValid","isDisabled","externalMods","listStyles","optionStyles","sectionStyles","headingStyles","listGap","listRef","message","description","styles","focusOnHover","shouldFocusWrap","labelSuffix","defaultSelectedKey","defaultSelectedKeys","externalOnSelectionChange","showSelectAll","selectAllLabel","header","footer","size","headerStyles","footerStyles","items","children","renderChildren","allValueProps","controlledSearchValue","isReorderable","onReorder","form","renderFn","itemsArray","from","Iterable","map","item","idx","rendered","it","localCollectionState","collection","originalKeys","keys","Set","type","add","String","customKeys","setCustomKeys","internalSearchValue","setInternalSearchValue","isSearchControlled","undefined","contains","sensitivity","currentSelectedKeys","length","keysToAdd","k","has","prev","mergedChildren","term","trim","localFilter","customArray","selectedKeysSet","forEach","selectedCustom","unselectedCustom","push","originalArray","innerAriaLabel","handleSearchChange","textFilterFn","filterFn","nodes","node","childNodes","filteredNodes","child","hasChildNodes","Boolean","enhancedChildren","childrenToProcess","doesTermExist","hasVisibleFilteredItems","customKey","customOption","hasSections","some","customValueSection","filteredItemsSection","fieldLayout","fillHeightOnFlex","isFocused","focusProps","isFocusWithin","setIsFocusWithin","focusWithinProps","onFocusWithinChange","listBoxRef","listBoxId","listStateRef","activeOptionKey","setActiveOptionKey","setVirtualFocus","current","selectionManager","setFocusedKey","listState","newCustomValueKey","customValueHasMatches","collectFocusableKeys","out","inCustomSection","disabledKeys","isCustomSection","visibleKeys","customValueShouldBeFocused","currentFocused","focusedKey","includes","currentIsNewCustomValue","keepsFocus","findFirstVisibleSelectedKey","selectedKeyStr","keyStr","keyToFocus","firstRealKey","find","lastFocusSourceRef","keyboardProps","onKeyDown","e","preventDefault","nextKey","wrap","targetKey","keyToSelect","select","disabled","focused","loading","searchable","prefix","suffix","handleSelectionChange","selection","selectedValues","nextSet","val","handleOptionClick","setTimeout","focus","searchInput","target","filterListBoxField","disallowEmptySelection","allowDuplicateSelectionEvents","field","Object","defineProperty","enumerable","configurable","Item","mergeProps","BaseSection","useFocus","useId"],"sources":["../../../../src/components/fields/FilterListBox/FilterListBox.tsx"],"sourcesContent":["import { ItemElement, Key } from '@react-types/shared';\nimport { Styles } from '@tenphi/tasty';\nimport {\n  cloneElement,\n  ForwardedRef,\n  forwardRef,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFilter, useFocusWithin, useId, useKeyboard } from 'react-aria';\nimport { Section as BaseSection, useListState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal/hooks/use-event';\nimport { useI18n } from '../../../i18n';\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { mergeProps, modAttrs, useCombinedRefs } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  CubeCollectionItemProps,\n  CollectionItem as Item,\n} from '../../CollectionItem';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport { splitFieldLayout } from '../../form/field-layout';\nimport { CubeListBoxProps, ListBox } from '../ListBox/ListBox';\nimport { getListBoxOptionId } from '../ListBox/optionId';\nimport {\n  getEdgeVisibleKey,\n  getNextVisibleKey,\n  markKeyboardFocus,\n} from '../ListBoxPopover/listNavigation';\n\nimport {\n  FilterListBoxWrapperElement,\n  SearchInputElement,\n  SearchWrapperElement,\n  StyledHeaderWithoutBorder,\n} from './styled';\n\nimport type { Collection, Node } from '@react-types/shared';\nimport type { FieldBaseProps } from '../../../shared';\n\ntype FilterFn = (textValue: string, inputValue: string) => boolean;\n\nexport interface CubeFilterListBoxProps<T>\n  // It sets `isFocusWithin` on its list itself.\n  extends\n    Omit<CubeListBoxProps<T>, 'filter' | 'isFocusWithin'>,\n    FieldBaseProps<\n      string | number | readonly (string | number)[] | null | undefined\n    > {\n  /** Placeholder text for the search input */\n  searchPlaceholder?: string;\n  /** Whether the search input should have autofocus */\n  autoFocus?: boolean;\n  /**\n   * Custom filter function for determining if an option should be included in search results.\n   * Pass `false` to disable internal filtering completely (useful for external filtering).\n   */\n  filter?: FilterFn | false;\n  /** Label shown when the list is empty. When provided, overrides both the \"No results found\" and \"No items\" defaults. */\n  emptyLabel?: ReactNode;\n  /** Custom styles for the search input */\n  searchInputStyles?: Styles;\n  /** Whether the FilterListBox is in loading state (shows loading icon in search input) */\n  isLoading?: boolean;\n  /** Whether items are currently loading. Shows a loading icon in the search input suffix. */\n  isLoadingItems?: boolean;\n  /** Ref for accessing the search input element */\n  searchInputRef?: RefObject<HTMLInputElement | null>;\n  /** Whether to allow entering custom values that are not present in the predefined options */\n  allowsCustomValue?: boolean;\n  /** Additional modifiers for styling the FilterListBox */\n  mods?: Record<string, boolean>;\n  /** Custom styles for the list box */\n  listBoxStyles?: Styles;\n\n  /**\n   * Callback fired when the user presses Escape key while the search input is empty.\n   * Can be used by parent components (e.g. FilterPicker) to close an enclosing Dialog.\n   */\n  onEscape?: () => void;\n\n  /**\n   * Whether to show checkboxes for multiple selection mode.\n   * This adds a checkbox icon to the left of each option.\n   */\n  isCheckable?: boolean;\n\n  /**\n   * Callback fired when an option is clicked but not on the checkbox area.\n   * Used by FilterPicker to close the popover on non-checkbox clicks.\n   */\n  onOptionClick?: (key: Key) => void;\n\n  /**\n   * Props to apply to existing custom values (values that are already selected but not in the predefined options).\n   */\n  customValueProps?: Partial<CubeCollectionItemProps<T>>;\n\n  /**\n   * Props to apply to new custom values (values typed in the search input that are about to be added).\n   * These are merged with customValueProps for new custom values.\n   */\n  newCustomValueProps?: Partial<CubeCollectionItemProps<T>>;\n\n  /**\n   * Controlled search value. When provided, the search input becomes controlled.\n   * Use with `onSearchChange` to manage the search state externally.\n   */\n  searchValue?: string;\n\n  /**\n   * Callback fired when the search input value changes.\n   * Use with `searchValue` for controlled search input.\n   */\n  onSearchChange?: (value: string) => void;\n\n  /**\n   * Pre-built collection to use instead of creating a new one.\n   * Used internally by FilterPicker to avoid duplicate collection creation.\n   * @internal\n   */\n  _internalCollection?: Collection<Node<any>>;\n}\n\nexport const FilterListBox = forwardRef(function FilterListBox<\n  T extends object,\n>(props: CubeFilterListBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n  props = useFieldProps(props, {\n    valuePropsMapper: ({ value, onChange }) => {\n      const fieldProps: any = {};\n\n      if (props.selectionMode === 'multiple') {\n        fieldProps.selectedKeys = value || [];\n      } else {\n        fieldProps.selectedKey = value ?? null;\n      }\n\n      fieldProps.onSelectionChange = (key: any) => {\n        if (props.selectionMode === 'multiple') {\n          // Handle \"all\" selection and array selections\n          if (key === 'all') {\n            onChange('all');\n          } else {\n            onChange(key ? (Array.isArray(key) ? key : [key]) : []);\n          }\n        } else {\n          onChange(Array.isArray(key) ? key[0] : key);\n        }\n      };\n\n      return fieldProps;\n    },\n  });\n\n  const { t } = useI18n();\n\n  let {\n    qa,\n    label,\n    extra,\n    id,\n    labelStyles,\n    isRequired,\n    necessityIndicator,\n    isInvalid,\n    isValid,\n    isDisabled,\n    isLoading,\n    isLoadingItems,\n    searchPlaceholder = t('filterListBox.searchPlaceholder', 'Search...'),\n    autoFocus,\n    filter,\n    mods: externalMods,\n    emptyLabel,\n    searchInputStyles,\n    listStyles,\n    optionStyles,\n    sectionStyles,\n    headingStyles,\n    listGap,\n    searchInputRef,\n    listRef,\n    message,\n    description,\n    styles,\n    focusOnHover,\n    shouldFocusWrap,\n    labelSuffix,\n    selectedKey,\n    defaultSelectedKey,\n    selectedKeys,\n    defaultSelectedKeys,\n    onSelectionChange: externalOnSelectionChange,\n    allowsCustomValue = false,\n    showSelectAll,\n    selectAllLabel,\n    header,\n    footer,\n    size = 'medium',\n    headerStyles,\n    footerStyles,\n    listBoxStyles,\n    items,\n    children: renderChildren,\n    onEscape,\n    isCheckable,\n    onOptionClick,\n    selectionMode = 'single',\n    allValueProps,\n    customValueProps,\n    newCustomValueProps,\n    searchValue: controlledSearchValue,\n    onSearchChange,\n    _internalCollection,\n    isReorderable = false,\n    onReorder,\n    form,\n  } = props;\n\n  // Preserve the original `children` (may be a render function) before we\n  // potentially overwrite it.\n  let children: ReactNode = renderChildren as ReactNode;\n\n  const renderFn = renderChildren as unknown;\n\n  if (items && typeof renderFn === 'function') {\n    try {\n      const itemsArray = Array.from(items as Iterable<any>);\n      // Execute the render function for each item to obtain <Item/> / <Section/> nodes.\n      children = itemsArray.map((item, idx) => {\n        const rendered = (renderFn as (it: any) => ReactNode)(item);\n        // Ensure every element has a stable key: rely on the user-provided key\n        // inside the render function, otherwise fall back to the item itself or\n        // the index. This mirrors React Aria examples where the render function\n        // is expected to set keys, but we add a fallback for robustness.\n        if (\n          isValidElement(rendered) &&\n          (rendered as ReactElement).key == null\n        ) {\n          return cloneElement(rendered as ReactElement, {\n            key: (rendered as any)?.key ?? item?.key ?? idx,\n          });\n        }\n\n        return rendered as ReactNode;\n      });\n    } catch {\n      // If conversion fails for some reason, we silently ignore and proceed\n      // with the original children value so we don't break runtime.\n    }\n  }\n\n  // Use provided collection from FilterPicker or create our own\n  // Hook call order is stable: _internalCollection is consistent per component instance\n  const localCollectionState = _internalCollection\n    ? { collection: _internalCollection }\n    : useListState({\n        children: children as any,\n        items: items as any,\n        selectionMode: 'none' as any,\n      });\n\n  // Collect original option keys to avoid duplicating them as custom values.\n  const originalKeys = useMemo(() => {\n    const keys = new Set<string>();\n    for (const item of localCollectionState.collection) {\n      if (item.type === 'item') {\n        keys.add(String(item.key));\n      }\n    }\n    return keys;\n  }, [localCollectionState.collection]);\n\n  // State to keep track of custom (user-entered) items that were selected.\n  const [customKeys, setCustomKeys] = useState<Set<string>>(new Set());\n\n  // Controlled/uncontrolled search value pattern\n  const [internalSearchValue, setInternalSearchValue] = useState('');\n  const isSearchControlled = controlledSearchValue !== undefined;\n  const searchValue = isSearchControlled\n    ? controlledSearchValue\n    : internalSearchValue;\n\n  const { contains } = useFilter({ sensitivity: 'base' });\n\n  // Initialize custom keys from current selection\n  useEffect(() => {\n    if (!allowsCustomValue) return;\n\n    const currentSelectedKeys = selectedKeys\n      ? selectedKeys === 'all'\n        ? [] // Skip custom key detection when 'all' is selected\n        : Array.from(selectedKeys).map(String)\n      : selectedKey != null\n        ? [String(selectedKey)]\n        : [];\n\n    if (currentSelectedKeys.length === 0) return;\n\n    const keysToAdd = currentSelectedKeys.filter((k) => !originalKeys.has(k));\n\n    if (keysToAdd.length) {\n      setCustomKeys((prev) => new Set([...Array.from(prev), ...keysToAdd]));\n    }\n  }, [allowsCustomValue, selectedKeys, selectedKey, originalKeys]);\n\n  // Merge original children with any custom items so they persist in the list.\n  // If there are selected custom values, they should appear on top with other\n  // selected items (which are already sorted by the parent component, e.g. FilterPicker).\n  const mergedChildren: ReactNode = useMemo(() => {\n    if (!children && customKeys.size === 0) return children;\n\n    // Selected custom values are injected by FilterListBox itself, not by the\n    // parent. They must respect the search input regardless of the `filter`\n    // prop — `filter={false}` only describes the parent's authority over its\n    // own items. Filter them with the user-provided filter (if any) or the\n    // default `contains`.\n    const term = searchValue.trim();\n    const localFilter: FilterFn =\n      typeof filter === 'function' ? filter : contains;\n\n    // Build React elements for custom values (kept stable via their key).\n    const customArray = Array.from(customKeys)\n      .filter((key) => !term || localFilter(key, term))\n      .map((key) => (\n        <Item key={key} textValue={key} {...customValueProps}>\n          {key}\n        </Item>\n      ));\n\n    // Identify which custom keys are currently selected so we can promote them.\n    const selectedKeysSet = new Set<string>();\n\n    if (selectionMode === 'multiple') {\n      if (selectedKeys === 'all') {\n        // When 'all' is selected, no custom items should be treated as selected\n        // since 'all' means all available items, not custom ones\n      } else {\n        Array.from(selectedKeys ?? []).forEach((k) =>\n          selectedKeysSet.add(String(k)),\n        );\n      }\n    } else {\n      if (selectedKey != null) selectedKeysSet.add(String(selectedKey));\n    }\n\n    const selectedCustom: ReactNode[] = [];\n    const unselectedCustom: ReactNode[] = [];\n\n    customArray.forEach((item: any) => {\n      if (selectedKeysSet.has(String(item.key))) {\n        selectedCustom.push(item);\n      } else {\n        unselectedCustom.push(item);\n      }\n    });\n\n    if (!children) {\n      // No original items – just return selected custom followed by the rest.\n      return [...selectedCustom, ...unselectedCustom];\n    }\n\n    const originalArray = Array.isArray(children) ? children : [children];\n\n    // Final order: selected custom items -> original array (already possibly\n    // sorted by parent) -> unselected custom items.\n    return [...selectedCustom, ...originalArray, ...unselectedCustom];\n  }, [\n    children,\n    customKeys,\n    selectionMode,\n    selectedKey,\n    selectedKeys,\n    searchValue,\n    filter,\n    contains,\n    customValueProps,\n  ]);\n\n  // Determine an aria-label for the internal ListBox to avoid React Aria warnings.\n  const innerAriaLabel =\n    (props as any)['aria-label'] ||\n    (typeof label === 'string' ? label : undefined);\n\n  const handleSearchChange = useCallback(\n    (value: string) => {\n      if (!isSearchControlled) {\n        setInternalSearchValue(value);\n      }\n      onSearchChange?.(value);\n    },\n    [isSearchControlled, onSearchChange],\n  );\n\n  // Choose the text filter function: user-provided `filter` prop (if any),\n  // or the default `contains` helper from `useFilter`.\n  // When `filter={false}`, the parent owns filtering — we normally pass items\n  // through unchanged. The exception is when `isLoadingItems` is `true`: a\n  // server fetch is in flight and currently visible items are stale, so we\n  // fall back to client-side `contains` to hide non-matching stale items\n  // until the new items arrive.\n  const textFilterFn = useMemo<FilterFn>(() => {\n    if (filter === false) {\n      return isLoadingItems ? contains : () => true;\n    }\n    return filter || contains;\n  }, [filter, contains, isLoadingItems]);\n\n  // Create a filter function for collection nodes (similar to ComboBox pattern)\n  const filterFn = useCallback(\n    (nodes: Iterable<any>) => {\n      // Server-side filtering with no fetch in flight — items are\n      // authoritative and shown as-is.\n      if (filter === false && !isLoadingItems) return nodes;\n\n      const term = searchValue.trim();\n\n      if (!term) {\n        return nodes;\n      }\n\n      // Filter nodes based on their textValue and preserve section structure\n      return [...nodes]\n        .map((node: any) => {\n          if (node.type === 'section' && node.childNodes) {\n            const filteredNodes = [...node.childNodes].filter((child: any) =>\n              textFilterFn(child.textValue || '', term),\n            );\n\n            if (filteredNodes.length === 0) {\n              return null;\n            }\n\n            return {\n              ...node,\n              childNodes: filteredNodes,\n              hasChildNodes: true,\n            };\n          }\n\n          return textFilterFn(node.textValue || '', term) ? node : null;\n        })\n        .filter(Boolean);\n    },\n    [filter, searchValue, textFilterFn, isLoadingItems],\n  );\n\n  // Handle custom values if allowed\n  const enhancedChildren = useMemo(() => {\n    let childrenToProcess = mergedChildren;\n\n    // Handle custom values if allowed\n    if (!allowsCustomValue) return childrenToProcess;\n\n    const term = searchValue.trim();\n    if (!term) return childrenToProcess;\n\n    // Helper to determine if the term is already present (exact match on rendered textValue or the key).\n    const doesTermExist = (term: string): boolean => {\n      // Check if term exists in custom keys\n      if (customKeys.has(term)) {\n        return true;\n      }\n\n      // Check if term exists in original collection\n      for (const item of localCollectionState.collection) {\n        if (item.type === 'item') {\n          const textValue = item.textValue || String(item.rendered || '');\n          if (term === textValue || String(item.key) === term) {\n            return true;\n          }\n        }\n      }\n      return false;\n    };\n\n    if (doesTermExist(term)) {\n      return childrenToProcess;\n    }\n\n    // Check if there are any items that will match the filter.\n    // This determines whether we need to visually separate the custom value\n    // from real items (i.e. render a divider between sections). When there\n    // are no visible items, we skip the section wrapper so no divider is\n    // drawn above a lone custom-value option.\n    //\n    // Selected custom values (from `customKeys`) are filtered by `localFilter`\n    // in `mergedChildren` regardless of `filter={false}`, so this check must\n    // use the same logic — otherwise we'd report \"items visible\" and draw a\n    // divider while the actual collection only contains the custom value.\n    const localFilter: FilterFn =\n      typeof filter === 'function' ? filter : contains;\n\n    const hasVisibleFilteredItems = (() => {\n      for (const item of localCollectionState.collection) {\n        if (item.type === 'item') {\n          const textValue = item.textValue || String(item.rendered || '');\n          if (textFilterFn(textValue, term)) {\n            return true;\n          }\n        } else if (item.type === 'section' && item.childNodes) {\n          for (const child of item.childNodes) {\n            const textValue = child.textValue || String(child.rendered || '');\n            if (textFilterFn(textValue, term)) {\n              return true;\n            }\n          }\n        }\n      }\n\n      for (const customKey of customKeys) {\n        if (localFilter(customKey, term)) {\n          return true;\n        }\n      }\n\n      return false;\n    })();\n\n    // Create the custom option\n    const customOption = (\n      <Item\n        key={term}\n        textValue={term}\n        {...mergeProps(customValueProps ?? {}, newCustomValueProps ?? {})}\n      >\n        {term}\n      </Item>\n    );\n\n    // If there are visible filtered items, add visual separation for custom value\n    if (hasVisibleFilteredItems && childrenToProcess) {\n      // Check if the collection contains any sections\n      // If it does, we can't wrap childrenToProcess in another section (would create nested sections)\n      const hasSections = [...localCollectionState.collection].some(\n        (item) => item.type === 'section',\n      );\n\n      const customValueSection = (\n        <BaseSection\n          key=\"__custom_value__\"\n          aria-label={t('filterListBox.customValue', 'Custom value')}\n        >\n          {customOption}\n        </BaseSection>\n      );\n\n      if (hasSections) {\n        // Collection has sections - just append the custom value section without wrapping\n        if (Array.isArray(childrenToProcess)) {\n          return [...childrenToProcess, customValueSection];\n        }\n        return [childrenToProcess, customValueSection];\n      }\n\n      // No sections in collection - wrap items in a section for visual separation\n      const filteredItemsSection = (\n        <BaseSection\n          key=\"__filtered_items__\"\n          aria-label={t('filterListBox.filteredItems', 'Filtered items')}\n        >\n          {childrenToProcess as ItemElement<unknown>[]}\n        </BaseSection>\n      );\n\n      return [filteredItemsSection, customValueSection];\n    }\n\n    // No visible filtered items, just return the custom option without sections\n    if (Array.isArray(childrenToProcess)) {\n      return [...childrenToProcess, customOption];\n    }\n\n    if (childrenToProcess) {\n      return [childrenToProcess, customOption];\n    }\n\n    return customOption;\n  }, [\n    allowsCustomValue,\n    mergedChildren,\n    searchValue,\n    customKeys,\n    localCollectionState.collection,\n    customValueProps,\n    newCustomValueProps,\n    textFilterFn,\n    filter,\n    contains,\n    t,\n  ]);\n\n  const fieldLayout = splitFieldLayout(props, { fillHeightOnFlex: true });\n\n  styles = fieldLayout.styles;\n\n  searchInputRef = useCombinedRefs(searchInputRef);\n  listRef = useCombinedRefs(listRef);\n\n  const { isFocused, focusProps } = useFocus();\n  // The search input moves the list's focused option, so the option shows as\n  // focused only while focus is in this component.\n  const [isFocusWithin, setIsFocusWithin] = useState(false);\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: setIsFocusWithin,\n  });\n\n  const listBoxRef = useRef<HTMLDivElement>(null);\n  // The search input points `aria-controls` and `aria-activedescendant` into\n  // the list, so the list needs an id the input knows.\n  const listBoxId = useId();\n\n  // Ref to access internal ListBox state (selection manager, etc.)\n  const listStateRef = useRef<any>(null);\n\n  // The option under virtual focus, mirrored in state for the search input's\n  // `aria-activedescendant`: the listbox's own state update does not re-render\n  // this component. Every focus move below goes through `setVirtualFocus`.\n  const [activeOptionKey, setActiveOptionKey] = useState<Key | null>(null);\n  const setVirtualFocus = useEvent((key: Key | null) => {\n    listStateRef.current?.selectionManager.setFocusedKey(key);\n    setActiveOptionKey(key);\n  });\n\n  // When the search value changes, the visible collection of items may change as well.\n  // If the currently focused item is no longer visible, move virtual focus to the first\n  // available item so that arrow navigation and Enter behaviour continue to work.\n  // If there are no available items, reset the selection so Enter won't select anything.\n  // Priority: focus on selected items first, then fall back to first visible item.\n  useLayoutEffect(() => {\n    const listState = listStateRef.current;\n\n    if (!listState) return;\n\n    const { selectionManager, collection } = listState;\n\n    // Walk the collection and:\n    //   1. Collect the enabled keys of the visible items (supports sections).\n    //   2. Detect the synthetic \"new custom value\" option — the one generated\n    //      from the current search term when `allowsCustomValue` is true.\n    //\n    // The custom value is rendered in one of two layouts depending on whether\n    // any real item text-matches the search term (`hasVisibleFilteredItems`\n    // in `enhancedChildren`):\n    //   • Some items match → wrapped in a `__custom_value__` section\n    //     (`customValueHasMatches = true`)\n    //   • No items match    → appended at the top level with key === term\n    //     (`customValueHasMatches = false`)\n    //\n    // The layout itself is the signal we use to decide whether the custom\n    // value should be the focus target (no matches) or whether focus should\n    // move to a real item (matches present).\n    const term = searchValue.trim();\n    let newCustomValueKey: Key | null = null;\n    let customValueHasMatches = false;\n\n    const collectFocusableKeys = (\n      nodes: Iterable<any>,\n      out: Key[],\n      inCustomSection = false,\n    ) => {\n      for (const node of nodes) {\n        if (node.type === 'item') {\n          if (!listState.disabledKeys.has(node.key)) out.push(node.key);\n          if (inCustomSection) {\n            newCustomValueKey = node.key;\n            customValueHasMatches = true;\n          }\n        } else if (node.childNodes) {\n          const isCustomSection =\n            inCustomSection || node.key === '__custom_value__';\n          collectFocusableKeys(node.childNodes, out, isCustomSection);\n        }\n      }\n    };\n\n    const visibleKeys: Key[] = [];\n    collectFocusableKeys(collection, visibleKeys);\n\n    // Detect the appended-at-top-level case (no items text-match). The custom\n    // option is added with key === trimmed search term and lives directly in\n    // the top-level collection (not nested in any section).\n    if (newCustomValueKey == null && allowsCustomValue && term) {\n      for (const node of collection) {\n        if (node.type === 'item' && String(node.key) === term) {\n          newCustomValueKey = node.key;\n          customValueHasMatches = false;\n          break;\n        }\n      }\n    }\n\n    // If there are no visible items, reset the focused key so Enter won't select anything\n    if (visibleKeys.length === 0) {\n      setVirtualFocus(null);\n      return;\n    }\n\n    // The custom value should be the focus target when it exists and there\n    // are no real text-matches — the user's typed value is then the only\n    // actionable option. During an in-flight server fetch (`filter === false`\n    // + `isLoadingItems`) `textFilterFn` falls back to client-side `contains`\n    // so non-matching stale items are hidden, which keeps this signal honest.\n    const customValueShouldBeFocused =\n      newCustomValueKey != null && !customValueHasMatches;\n\n    // Decide whether the current focus is already on the right thing. If yes,\n    // don't disturb it. Otherwise fall through and re-pick a focus target.\n    const currentFocused = selectionManager.focusedKey;\n    if (currentFocused != null && visibleKeys.includes(currentFocused)) {\n      const currentIsNewCustomValue =\n        newCustomValueKey != null && currentFocused === newCustomValueKey;\n      const keepsFocus = customValueShouldBeFocused\n        ? currentIsNewCustomValue\n        : newCustomValueKey != null\n          ? // Custom value exists but isn't the priority (matches available)\n            // — any non-custom focus is fine.\n            !currentIsNewCustomValue\n          : // No custom value involved at all.\n            true;\n\n      if (keepsFocus) {\n        setActiveOptionKey(currentFocused);\n        return;\n      }\n    }\n\n    // Helper to find the first selected item that's visible\n    const findFirstVisibleSelectedKey = (): Key | null => {\n      if (selectionMode === 'single') {\n        // Single selection: check if selectedKey is visible\n        if (selectedKey != null) {\n          const selectedKeyStr = String(selectedKey);\n          if (visibleKeys.some((k) => String(k) === selectedKeyStr)) {\n            return selectedKey;\n          }\n        }\n      } else if (selectionMode === 'multiple') {\n        // Multiple selection: find first selected key that's visible\n        if (selectedKeys && selectedKeys !== 'all') {\n          for (const key of selectedKeys) {\n            const keyStr = String(key);\n            if (visibleKeys.some((k) => String(k) === keyStr)) {\n              return key;\n            }\n          }\n        }\n      }\n      return null;\n    };\n\n    // Determine which key to focus\n    let keyToFocus: Key | null = null;\n\n    if (customValueShouldBeFocused) {\n      // No real matches — promote the custom value over any selected/stale\n      // item so the user can press Enter to add the value they just typed.\n      keyToFocus = newCustomValueKey;\n    } else {\n      keyToFocus = findFirstVisibleSelectedKey();\n\n      // Fallback to first visible item if no selected item found. Prefer the\n      // first real (non-custom-value) item so focus doesn't land on the\n      // bottom-of-list custom-value suggestion when real items are available.\n      if (keyToFocus == null) {\n        const firstRealKey = visibleKeys.find((k) => k !== newCustomValueKey);\n        keyToFocus = firstRealKey ?? visibleKeys[0];\n      }\n    }\n\n    // Mark this focus change as keyboard navigation so ListBox will scroll to it\n    if (listState.lastFocusSourceRef) {\n      listState.lastFocusSourceRef.current = 'keyboard';\n    }\n\n    // Set focus to the determined key\n    setVirtualFocus(keyToFocus);\n  }, [\n    searchValue,\n    enhancedChildren,\n    selectionMode,\n    selectedKey,\n    selectedKeys,\n    allowsCustomValue,\n    setVirtualFocus,\n  ]);\n\n  // Keyboard navigation handler for search input\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: (e) => {\n      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n        e.preventDefault();\n\n        const listState = listStateRef.current;\n        if (!listState) return;\n\n        // The collection is already filtered by React Stately via filterFn;\n        // disabled options are skipped.\n        const nextKey = getNextVisibleKey(\n          listState,\n          e.key === 'ArrowDown' ? 1 : -1,\n          { wrap: shouldFocusWrap },\n        );\n\n        if (nextKey != null) {\n          markKeyboardFocus(listState);\n          setVirtualFocus(nextKey);\n        }\n      } else if (\n        e.key === 'Home' ||\n        e.key === 'End' ||\n        e.key === 'PageUp' ||\n        e.key === 'PageDown'\n      ) {\n        e.preventDefault();\n\n        const listState = listStateRef.current;\n        if (!listState) return;\n\n        const targetKey = getEdgeVisibleKey(\n          listState,\n          e.key === 'Home' || e.key === 'PageUp' ? 'first' : 'last',\n        );\n\n        if (targetKey == null) return;\n\n        markKeyboardFocus(listState);\n        setVirtualFocus(targetKey);\n      } else if (e.key === 'Enter' || (e.key === ' ' && !searchValue)) {\n        const listState = listStateRef.current;\n\n        if (!listState) return;\n\n        const keyToSelect = listState.selectionManager.focusedKey;\n\n        if (keyToSelect != null) {\n          e.preventDefault();\n          listState.selectionManager.select(keyToSelect, e);\n\n          if (\n            e.key === 'Enter' &&\n            isCheckable &&\n            onEscape &&\n            selectionMode === 'multiple'\n          ) {\n            onEscape();\n          }\n        }\n      } else if (e.key === 'Escape') {\n        if (searchValue) {\n          // Clear the current search if any text is present.\n          e.preventDefault();\n          handleSearchChange('');\n        } else {\n          // Notify parent that Escape was pressed on an empty input.\n          if (onEscape) {\n            e.preventDefault();\n            onEscape();\n          }\n        }\n      }\n    },\n  });\n\n  const mods = useMemo(\n    () => ({\n      ...getValidationMods({ isInvalid, isValid }),\n      disabled: !!isDisabled,\n      focused: isFocused,\n      loading: !!isLoading,\n      'loading-items': !!isLoadingItems,\n      searchable: true,\n      prefix: !!isLoading,\n      suffix: !!isLoadingItems,\n      ...externalMods,\n    }),\n    [\n      isInvalid,\n      isInvalid,\n      isValid,\n      isDisabled,\n      isFocused,\n      isLoading,\n      isLoadingItems,\n      externalMods,\n    ],\n  );\n\n  // Handler must be defined before we render ListBox so we can pass it.\n  const handleSelectionChange = (selection: any) => {\n    if (allowsCustomValue) {\n      // Normalize current selection into an array of string keys\n      let selectedValues: string[] = [];\n\n      if (selection != null) {\n        if (Array.isArray(selection)) {\n          selectedValues = selection.map(String);\n        } else {\n          selectedValues = [String(selection)];\n        }\n      }\n\n      // Build next custom keys set based on selected values\n      const nextSet = new Set<string>();\n\n      selectedValues.forEach((val) => {\n        if (!originalKeys.has(val)) {\n          nextSet.add(val);\n        }\n      });\n\n      // Update internal custom keys state\n      setCustomKeys(nextSet);\n    }\n\n    if (externalOnSelectionChange) {\n      (externalOnSelectionChange as any)(selection);\n    }\n  };\n\n  // Custom option click handler that ensures search input receives focus\n  const handleOptionClick = (key: Key) => {\n    // Focus the search input to enable keyboard navigation\n    // Use setTimeout to ensure this happens after React state updates\n    setTimeout(() => {\n      if (searchInputRef.current) {\n        searchInputRef.current.focus();\n      }\n    }, 0);\n\n    // Call the original onOptionClick if provided\n    if (onOptionClick) {\n      onOptionClick(key);\n    }\n  };\n\n  const searchInput = (\n    <SearchWrapperElement mods={mods} data-size={size}>\n      {isLoading && (\n        <div data-element=\"Prefix\">\n          <div data-element=\"InputIcon\">\n            {isLoading ? <LoadingIcon /> : null}\n          </div>\n        </div>\n      )}\n      <SearchInputElement\n        ref={searchInputRef}\n        qa={qa || 'FilterListBox'}\n        id={id}\n        data-prefix={isLoading ? '' : undefined}\n        data-suffix={isLoadingItems ? '' : undefined}\n        type=\"search\"\n        placeholder={searchPlaceholder}\n        value={searchValue}\n        disabled={isDisabled}\n        autoFocus={autoFocus}\n        {...(autoFocus ? { 'data-autofocus': '' } : undefined)}\n        styles={searchInputStyles}\n        data-size={size}\n        data-input-type=\"filterlistbox\"\n        role=\"combobox\"\n        aria-expanded=\"true\"\n        aria-haspopup=\"listbox\"\n        aria-controls={listBoxId}\n        aria-activedescendant={\n          activeOptionKey != null\n            ? getListBoxOptionId(listBoxId, activeOptionKey)\n            : undefined\n        }\n        // The search input is the control the label points at, so it also\n        // takes the caller's naming and the field's description and message.\n        aria-label={(props as any)['aria-label']}\n        aria-labelledby={(props as any)['aria-labelledby']}\n        aria-describedby={(props as any)['aria-describedby']}\n        aria-invalid={isInvalid || undefined}\n        onChange={(e) => {\n          handleSearchChange(e.target.value);\n        }}\n        {...keyboardProps}\n        {...modAttrs(mods)}\n      />\n      {isLoadingItems && (\n        <div data-element=\"Suffix\">\n          <LoadingIcon data-element=\"InputIcon\" />\n        </div>\n      )}\n    </SearchWrapperElement>\n  );\n\n  const filterListBoxField = (\n    <FilterListBoxWrapperElement\n      ref={ref}\n      qa=\"FilterListBoxWrapper\"\n      {...modAttrs(mods)}\n      styles={styles}\n      {...mergeProps(focusProps, focusWithinProps)}\n    >\n      {header ? (\n        <StyledHeaderWithoutBorder data-size={size} styles={headerStyles}>\n          {header}\n        </StyledHeaderWithoutBorder>\n      ) : (\n        <div role=\"presentation\" />\n      )}\n      {searchInput}\n      <ListBox\n        isBare\n        ref={listBoxRef}\n        id={listBoxId}\n        aria-label={innerAriaLabel}\n        selectedKey={selectedKey}\n        defaultSelectedKey={defaultSelectedKey}\n        selectedKeys={selectedKeys}\n        defaultSelectedKeys={defaultSelectedKeys}\n        selectionMode={selectionMode}\n        isDisabled={isDisabled}\n        listRef={listRef}\n        stateRef={listStateRef}\n        listStyles={listStyles}\n        shouldFocusWrap={shouldFocusWrap}\n        optionStyles={optionStyles}\n        sectionStyles={sectionStyles}\n        headingStyles={headingStyles}\n        listGap={listGap}\n        isInvalid={isInvalid}\n        isValid={isValid}\n        disallowEmptySelection={props.disallowEmptySelection}\n        allowDuplicateSelectionEvents={props.allowDuplicateSelectionEvents}\n        disabledKeys={props.disabledKeys}\n        focusOnHover={focusOnHover}\n        shouldUseVirtualFocus={!(isReorderable && !searchValue.trim())}\n        isFocusWithin={isFocusWithin}\n        showSelectAll={showSelectAll}\n        selectAllLabel={selectAllLabel}\n        footer={footer}\n        footerStyles={footerStyles}\n        mods={mods}\n        styles={listBoxStyles}\n        isCheckable={isCheckable}\n        items={items as any}\n        allValueProps={allValueProps}\n        filter={filterFn}\n        emptyLabel={\n          emptyLabel !== undefined\n            ? emptyLabel\n            : searchValue.trim()\n              ? t('filterListBox.noResults', 'No results found')\n              : t('filterListBox.noItems', 'No items')\n        }\n        isReorderable={isReorderable && !searchValue.trim()}\n        onReorder={onReorder}\n        onSelectionChange={handleSelectionChange}\n        onEscape={onEscape}\n        onOptionClick={handleOptionClick}\n      >\n        {enhancedChildren as any}\n      </ListBox>\n    </FilterListBoxWrapperElement>\n  );\n\n  return wrapWithField<Omit<CubeFilterListBoxProps<T>, 'children'>>(\n    filterListBoxField,\n    { ...props, ...fieldLayout.field },\n  );\n}) as unknown as (<T>(\n  props: CubeFilterListBoxProps<T> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement) & { Item: typeof Item; Section: typeof BaseSection };\n\nFilterListBox.Item = Item;\n\nFilterListBox.Section = BaseSection;\n\nObject.defineProperty(FilterListBox, 'cubeInputType', {\n  value: 'FilterListBox',\n  enumerable: false,\n  configurable: false,\n});\n"],"mappings":"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"}

package/dist/components/fields/FilterListBox/styled.js

@@ -0,0 +1,66 @@
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
+import { StyledHeader } from "../../actions/Menu/styled.js";
+import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from "../TextInput/TextInputBase.js";
+import { mergeStyles, tasty } from "@tenphi/tasty";
+//#region src/components/fields/FilterListBox/styled.ts
+/**
+* The chrome FilterListBox draws around its list: the frame, the search row
+* and the header above it. FilterPicker's tree mode draws the same chrome
+* around a `Tree`, so both read as one control.
+*/
+const FilterListBoxWrapperElement = tasty({ styles: {
+	display: "grid",
+	flow: "column",
+	gridColumns: "1sf",
+	gridRows: "max-content max-content 1sf",
+	gap: 0,
+	position: "relative",
+	radius: true,
+	color: "#dark-02",
+	transition: "theme",
+	outline: {
+		"": "#purple-03.0",
+		"invalid & focused": "#danger.50",
+		focused: "#purple-03"
+	},
+	border: {
+		"": true,
+		focused: "#primary-text",
+		valid: "#success-text.50",
+		invalid: "#danger-text.50",
+		disabled: true,
+		popover: false
+	}
+} });
+const SearchWrapperElement = tasty({
+	qa: "FilterListBoxSearchWrapper",
+	styles: mergeStyles(INPUT_WRAPPER_STYLES, {
+		border: "bottom",
+		radius: "1r top",
+		fill: "#clear",
+		height: "($size + 1x)",
+		$size: {
+			"": "$size-md",
+			"size=small": "$size-sm",
+			"size=medium": "$size-md",
+			"size=large": "$size-lg"
+		}
+	})
+});
+const SearchInputElement = tasty({
+	as: "input",
+	styles: mergeStyles(DEFAULT_INPUT_STYLES, {
+		fill: "#clear",
+		padding: {
+			"": ".5x 1.5x",
+			prefix: "0 1.5x 0 .5x",
+			suffix: ".5x .5x .5x 1.5x",
+			"prefix & suffix": "0 .5x 0 .5x"
+		}
+	})
+});
+const StyledHeaderWithoutBorder = tasty(StyledHeader, { styles: { border: false } });
+//#endregion
+export { FilterListBoxWrapperElement, SearchInputElement, SearchWrapperElement, StyledHeaderWithoutBorder };
+
+//# sourceMappingURL=styled.js.map

package/dist/components/fields/FilterListBox/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","names":["mergeStyles","tasty","StyledHeader","DEFAULT_INPUT_STYLES","INPUT_WRAPPER_STYLES","FilterListBoxWrapperElement","styles","display","flow","gridColumns","gridRows","gap","position","radius","color","transition","outline","focused","border","valid","invalid","disabled","popover","SearchWrapperElement","qa","fill","height","$size","SearchInputElement","as","padding","prefix","suffix","StyledHeaderWithoutBorder"],"sources":["../../../../src/components/fields/FilterListBox/styled.ts"],"sourcesContent":["import { mergeStyles, tasty } from '@tenphi/tasty';\n\nimport { StyledHeader } from '../../actions/Menu/styled';\nimport {\n  DEFAULT_INPUT_STYLES,\n  INPUT_WRAPPER_STYLES,\n} from '../TextInput/TextInputBase';\n\n/**\n * The chrome FilterListBox draws around its list: the frame, the search row\n * and the header above it. FilterPicker's tree mode draws the same chrome\n * around a `Tree`, so both read as one control.\n */\n\nexport const FilterListBoxWrapperElement = tasty({\n  styles: {\n    display: 'grid',\n    flow: 'column',\n    gridColumns: '1sf',\n    gridRows: 'max-content max-content 1sf',\n    gap: 0,\n    position: 'relative',\n    radius: true,\n    color: '#dark-02',\n    transition: 'theme',\n    outline: {\n      '': '#purple-03.0',\n      'invalid & focused': '#danger.50',\n      focused: '#purple-03',\n    },\n    border: {\n      '': true,\n      focused: '#primary-text',\n      valid: '#success-text.50',\n      invalid: '#danger-text.50',\n      disabled: true,\n      popover: false,\n    },\n  },\n});\n\nexport const SearchWrapperElement = tasty({\n  qa: 'FilterListBoxSearchWrapper',\n  styles: mergeStyles(INPUT_WRAPPER_STYLES, {\n    border: 'bottom',\n    radius: '1r top',\n    fill: '#clear',\n    height: '($size + 1x)',\n    $size: {\n      '': '$size-md',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n    },\n  }),\n});\n\nexport const SearchInputElement = tasty({\n  as: 'input',\n  styles: mergeStyles(DEFAULT_INPUT_STYLES, {\n    fill: '#clear',\n    padding: {\n      '': '.5x 1.5x',\n      prefix: '0 1.5x 0 .5x',\n      suffix: '.5x .5x .5x 1.5x',\n      'prefix & suffix': '0 .5x 0 .5x',\n    },\n  }),\n});\n\nexport const StyledHeaderWithoutBorder = tasty(StyledHeader, {\n  styles: {\n    border: false,\n  },\n});\n"],"mappings":";;;;;;;;;;AAcA,MAAaK,8BAA8BJ,MAAM,EAC/CK,QAAQ;CACNC,SAAS;CACTC,MAAM;CACNC,aAAa;CACbC,UAAU;CACVC,KAAK;CACLC,UAAU;CACVC,QAAQ;CACRC,OAAO;CACPC,YAAY;CACZC,SAAS;EACP,IAAI;EACJ,qBAAqB;EACrBC,SAAS;CACX;CACAC,QAAQ;EACN,IAAI;EACJD,SAAS;EACTE,OAAO;EACPC,SAAS;EACTC,UAAU;EACVC,SAAS;CACX;AACF,EACF,CAAC;AAED,MAAaC,uBAAuBtB,MAAM;CACxCuB,IAAI;CACJlB,QAAQN,YAAYI,sBAAsB;EACxCc,QAAQ;EACRL,QAAQ;EACRY,MAAM;EACNC,QAAQ;EACRC,OAAO;GACL,IAAI;GACJ,cAAc;GACd,eAAe;GACf,cAAc;EAChB;CACF,CAAC;AACH,CAAC;AAED,MAAaC,qBAAqB3B,MAAM;CACtC4B,IAAI;CACJvB,QAAQN,YAAYG,sBAAsB;EACxCsB,MAAM;EACNK,SAAS;GACP,IAAI;GACJC,QAAQ;GACRC,QAAQ;GACR,mBAAmB;EACrB;CACF,CAAC;AACH,CAAC;AAED,MAAaC,4BAA4BhC,MAAMC,cAAc,EAC3DI,QAAQ,EACNY,QAAQ,MACV,EACF,CAAC"}

package/dist/components/fields/FilterPicker/FilterPicker.d.ts

@@ -6,15 +6,20 @@ import "../../content/Item/index.js";
 import { CubeItemButtonProps } from "../../actions/ItemButton/ItemButton.js";
 import "../../actions/index.js";
 import { CubeItemBaseProps as CubeItemProps } from "../../content/Item/Item.js";
+import { CubeTreeNodeData } from "../../content/Tree/types.js";
+import { FieldLayoutStyleProps } from "../../form/field-layout.js";
 import { ListBox } from "../ListBox/ListBox.js";
 import "../ListBox/index.js";
 import { CubeFilterListBoxProps } from "../FilterListBox/FilterListBox.js";
-import { BasePropsWithoutChildren, BaseStyleProps, ColorStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
+import { BasePropsWithoutChildren, ContainerStyleProps, Styles } from "@tenphi/tasty";
 import { ForwardedRef, ReactElement, ReactNode, RefObject } from "react";
 import { Placement } from "react-aria";
 import { ListState, Section } from "react-stately";
+import { CollectionChildren } from "@react-types/shared";
 //#region src/components/fields/FilterPicker/FilterPicker.d.ts
-export interface CubeFilterPickerProps<T> extends Omit<CubeFilterListBoxProps<T>, 'size' | 'shape'>, Omit<CubeItemProps, 'children' | 'size' | 'tooltip'>, BasePropsWithoutChildren, BaseStyleProps, OuterStyleProps, ColorStyleProps, FieldBaseProps<string | number | readonly (string | number)[] | null | undefined>, Pick<CubeItemButtonProps, 'type' | 'theme' | 'icon' | 'rightIcon' | 'prefix' | 'suffix' | 'hotkeys' | 'shape'> {
+export interface CubeFilterPickerProps<T> extends Omit<CubeFilterListBoxProps<T>, 'size' | 'shape' | 'children'>, Omit<CubeItemProps, 'children' | 'size' | 'tooltip' | keyof ContainerStyleProps>, BasePropsWithoutChildren, FieldLayoutStyleProps, FieldBaseProps<string | number | readonly (string | number)[] | null | undefined>, Pick<CubeItemButtonProps, 'type' | 'theme' | 'icon' | 'rightIcon' | 'prefix' | 'suffix' | 'hotkeys' | 'shape'> {
+  /** The options, or a render function over `items`. Required unless `treeData` is set. */
+  children?: CollectionChildren<T>;
   /** Accessible name for the picker trigger when there is no visible label. */
   'aria-label'?: string;
   /** Ids of elements that also describe the trigger, beside the field's own description and message. */
@@ -51,7 +56,12 @@ export interface CubeFilterPickerProps<T> extends Omit<CubeFilterListBoxProps<T>
   targetRef?: RefObject<HTMLElement | null>;
   /** Minimum padding in pixels between the popover and viewport edges */
   containerPadding?: number;
-  /** Tooltip for the trigger button (separate from `labelTooltip`) */
+  /**
+   * Tooltip for the trigger. The info badge next to the field's label is
+   * `labelTooltip`.
+   */
+  tooltip?: CubeItemProps['tooltip'];
+  /** @deprecated Use `tooltip`. */
   triggerTooltip?: CubeItemProps['tooltip'];
   /** Description for the trigger button (separate from field description) */
   triggerDescription?: CubeItemProps['description'];
@@ -113,6 +123,28 @@ export interface CubeFilterPickerProps<T> extends Omit<CubeFilterListBoxProps<T>
   sortSelectedToTop?: boolean;
   /** Callback called when the popover open state changes */
   onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * Tree-shaped options. When set, the popover shows a checkable `Tree` in
+   * place of the list, and `items` and `children` are not used.
+   *
+   * Tree mode is always multiple selection. The value (`selectedKeys`) is
+   * every fully checked key, parents included: checking a parent checks its
+   * children, and a parent with only some children checked is half-checked.
+   * The cascade runs over the whole tree, so a search never unchecks the
+   * nodes it hides. A press on a row toggles its checkbox. Disable a node
+   * with its own `isDisabled`, not `disabledKeys`.
+   *
+   * The search keeps a node that matches with its whole subtree, and the
+   * ancestors of deeper matches with only their matching branches, opened.
+   * The default summary lists the topmost checked nodes.
+   */
+  treeData?: CubeTreeNodeData[];
+  /** Expanded nodes in tree mode (controlled). A search expands on its own and restores these when cleared. */
+  expandedKeys?: string[];
+  /** Initially expanded nodes in tree mode (uncontrolled). */
+  defaultExpandedKeys?: string[];
+  /** Called when the user expands or collapses a node in tree mode, outside a search. */
+  onExpand?: (expandedKeys: string[]) => void;
 }
 export declare const FilterPicker: (<T>(props: CubeFilterPickerProps<T> & {
   ref?: ForwardedRef<HTMLElement>;

package/dist/components/fields/FilterPicker/FilterPicker.js

@@ -1,5 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
-import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
+import { mergeStyleLayers } from "../../../utils/styles.js";
 import { Text as _Text } from "../../content/Text.js";
 import { isTextOnly } from "../../../utils/react/isTextOnly.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -12,27 +12,41 @@ import { ItemActionIcon } from "../../actions/ItemActionsWrapper.js";
 import { ItemButton as _ItemButton } from "../../actions/ItemButton/ItemButton.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
+import { buildTreeIndex, getTreeNodeText } from "../../content/Tree/tree-index.js";
 import { allowOverlayKeysToPropagate } from "../../../utils/react/overlayKeyPropagation.js";
 import { getValidationTheme } from "../../form/validation/resolve-validation-props.js";
 import { getValidationIcon } from "../../form/validation/ValidationIndicator.js";
+import { TRIGGER_TOOLTIP_WARNING } from "../../form/legacy-tooltip.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
+import { splitFieldLayout } from "../../form/field-layout.js";
+import { deriveCheckedSets, toOrderedKeys } from "../../content/Tree/checked-keys.js";
 import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
 import { ListBox } from "../ListBox/ListBox.js";
 import { TriggerActions } from "../TriggerActions.js";
 import { processSelectionArray } from "../../../utils/selection.js";
 import { FilterListBox } from "../FilterListBox/FilterListBox.js";
-import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
+import { FilterTree } from "./FilterTree.js";
+import { filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { FocusScope, mergeProps, useLabel } from "react-aria";
 import { Section, useListState } from "react-stately";
 //#region src/components/fields/FilterPicker/FilterPicker.tsx
-const PROP_STYLES = [
-	...BASE_STYLES,
-	...OUTER_STYLES,
-	...COLOR_STYLES
-];
+/**
+* Tree mode's summary: the topmost checked nodes, since a checked parent
+* stands for its children. Keys the tree lacks are listed as they are.
+*/
+function getTreeSummaryLabels(index, checked) {
+	const labels = [];
+	for (const [key, node] of index.byKey) {
+		const parentKey = index.parentOf.get(key);
+		if (!checked.has(key) || parentKey != null && checked.has(parentKey)) continue;
+		labels.push(getTreeNodeText(node));
+	}
+	for (const key of checked) if (!index.byKey.has(key)) labels.push(key);
+	return labels;
+}
 const FilterPickerWrapper = tasty({
 	qa: "FilterPicker",
 	styles: {
@@ -47,20 +61,24 @@ const FilterPicker = forwardRef(function FilterPicker(inputProps, ref) {
 	const { t } = useI18n();
 	const props = useFieldProps(inputProps, { valuePropsMapper: ({ value, onChange }) => {
 		const fieldProps = {};
-		if (inputProps.selectionMode === "multiple") fieldProps.selectedKeys = value || [];
+		const isMultiple = inputProps.selectionMode === "multiple" || !!inputProps.treeData;
+		if (isMultiple) fieldProps.selectedKeys = value || [];
 		else fieldProps.selectedKey = value ?? null;
 		fieldProps.onSelectionChange = (key) => {
-			if (inputProps.selectionMode === "multiple") {
+			if (isMultiple) {
 				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, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, extra, id, icon, rightIcon, prefix, suffix, actions, hotkeys, triggerTooltip, triggerDescription, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, isDisabled, isLoading, message, mods: externalMods, description, descriptionPlacement, placeholder, size = "medium", styles, listBoxStyles, popoverStyles, type = "outline", theme = "default", shape, labelSuffix, shouldFocusWrap, children, shouldFlip = true, placement = "bottom start", targetRef, containerPadding = 8, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = "single", listStateRef, focusOnHover, showSelectAll, selectAllLabel = t("picker.all", "All"), items, header, footer, headerStyles, footerStyles, triggerStyles, allowsCustomValue, renderSummary, isCheckable, allValueProps, customValueProps, newCustomValueProps, searchPlaceholder, autoFocus, filter, emptyLabel, searchInputStyles, searchInputRef, listStyles, optionStyles, sectionStyles, headingStyles, listGap, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, isClearable, clearLabel, isLoadingItems, searchValue, onSearchChange, sortSelectedToTop: sortSelectedToTopProp, onOpenChange, isReorderable, onReorder, form, ...otherProps } = props;
+	let { qa, label, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, extra, id, icon, rightIcon, prefix, suffix, actions, hotkeys, tooltip, triggerTooltip, triggerDescription, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, isDisabled, isLoading, message, mods: externalMods, description, descriptionPlacement, placeholder, size = "medium", styles, listBoxStyles, popoverStyles, type = "outline", theme = "default", shape, labelSuffix, shouldFocusWrap, children, shouldFlip = true, placement = "bottom start", targetRef, containerPadding = 8, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = "single", listStateRef, focusOnHover, showSelectAll, selectAllLabel = t("picker.all", "All"), items, header, footer, headerStyles, footerStyles, triggerStyles, allowsCustomValue, renderSummary, isCheckable, allValueProps, customValueProps, newCustomValueProps, searchPlaceholder, autoFocus, filter, emptyLabel, searchInputStyles, searchInputRef, listStyles, optionStyles, sectionStyles, headingStyles, listGap, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, isClearable, clearLabel, isLoadingItems, searchValue, onSearchChange, sortSelectedToTop: sortSelectedToTopProp, onOpenChange, isReorderable, onReorder, form, treeData, expandedKeys, defaultExpandedKeys, onExpand, ...otherProps } = props;
+	if (treeData) selectionMode = "multiple";
 	const sortSelectedToTopExplicit = sortSelectedToTopProp !== void 0;
 	const sortSelectedToTop = sortSelectedToTopProp ?? (items ? true : false);
-	styles = extractStyles(otherProps, PROP_STYLES, styles);
+	const fieldLayout = splitFieldLayout(props);
+	styles = fieldLayout.styles;
+	useWarn(triggerTooltip !== void 0, TRIGGER_TOOLTIP_WARNING);
 	useWarn(isCheckable === false && selectionMode === "single", {
 		key: ["filterpicker-checkable-single-mode"],
 		args: ["CubeUIKit: isCheckable=false is not recommended in single selection mode as it may confuse users about selection behavior."]
@@ -133,10 +151,25 @@ const FilterPicker = forwardRef(function FilterPicker(inputProps, ref) {
 		effectiveSelectedKeys,
 		keyMap
 	]);
+	const treeIndex = useMemo(() => treeData ? buildTreeIndex(treeData) : null, [treeData]);
+	const treeCheckedKeys = useMemo(() => effectiveSelectedKeys === "all" ? [...treeIndex?.byKey.keys() ?? []] : (effectiveSelectedKeys ?? []).map(String), [effectiveSelectedKeys, treeIndex]);
+	const treeSelectedKeys = useMemo(() => treeData && treeIndex ? toOrderedKeys(treeIndex, deriveCheckedSets(treeData, treeIndex, treeCheckedKeys).checked) : null, [
+		treeData,
+		treeIndex,
+		treeCheckedKeys
+	]);
+	const [internalExpandedKeys, setInternalExpandedKeys] = useState(defaultExpandedKeys ?? []);
+	const handleExpand = (keys) => {
+		if (expandedKeys === void 0) setInternalExpandedKeys(keys);
+		onExpand?.(keys);
+	};
 	const selectedLabels = useMemo(() => {
+		if (treeIndex && treeSelectedKeys) return getTreeSummaryLabels(treeIndex, new Set(treeSelectedKeys));
 		if (selectionMode === "multiple" && effectiveSelectedKeys === "all") return Array.from(labelMap.values());
 		return (selectionMode === "multiple" && effectiveSelectedKeys !== "all" ? (effectiveSelectedKeys || []).map(String) : effectiveSelectedKey != null ? [String(effectiveSelectedKey)] : []).map((k_0) => labelMap.get(k_0) ?? k_0);
 	}, [
+		treeIndex,
+		treeSelectedKeys,
 		selectionMode,
 		effectiveSelectedKey,
 		effectiveSelectedKeys,
@@ -258,7 +291,7 @@ const FilterPicker = forwardRef(function FilterPicker(inputProps, ref) {
 			});
 			return renderSummary({
 				selectedLabels,
-				selectedKeys: effectiveSelectedKeys,
+				selectedKeys: treeSelectedKeys ?? effectiveSelectedKeys,
 				selectionMode: "multiple"
 			});
 		} else if (renderSummary === false) return null;
@@ -272,6 +305,7 @@ const FilterPicker = forwardRef(function FilterPicker(inputProps, ref) {
 		selectedLabels,
 		effectiveSelectedKey,
 		effectiveSelectedKeys,
+		treeSelectedKeys,
 		hasSelection,
 		placeholder,
 		selectAllLabel
@@ -320,7 +354,7 @@ const FilterPicker = forwardRef(function FilterPicker(inputProps, ref) {
 		prefix,
 		suffix,
 		hotkeys,
-		tooltip: triggerTooltip,
+		tooltip: tooltip ?? triggerTooltip,
 		description: triggerDescription,
 		descriptionPlacement,
 		styles: triggerStyles,
@@ -383,7 +417,32 @@ const FilterPicker = forwardRef(function FilterPicker(inputProps, ref) {
 				tokens: triggerWidthRef.current ? { "$overlay-min-width": `${triggerWidthRef.current}px` } : void 0,
 				children: /* @__PURE__ */ jsx(FocusScope, {
 					restoreFocus: true,
-					children: /* @__PURE__ */ jsx(FilterListBox, {
+					children: treeData ? /* @__PURE__ */ jsx(FilterTree, {
+						autoFocus: true,
+						treeData,
+						checkedKeys: treeCheckedKeys,
+						expandedKeys: expandedKeys ?? internalExpandedKeys,
+						"aria-label": pickerAriaLabel,
+						searchPlaceholder,
+						searchValue,
+						searchInputStyles,
+						searchInputRef,
+						filter,
+						emptyLabel,
+						header,
+						headerStyles,
+						footer,
+						footerStyles,
+						size: size === "small" ? "medium" : size,
+						isDisabled,
+						isLoadingItems,
+						shouldFocusWrap,
+						onExpand: handleExpand,
+						onSearchChange,
+						onCheckedKeysChange: handleSelectionChange,
+						onEscape: handleEscape,
+						onCommit: handleEscape
+					}) : /* @__PURE__ */ jsx(FilterListBox, {
 						isBare: true,
 						autoFocus: true,
 						items: items ? finalItems : void 0,
@@ -442,6 +501,8 @@ const FilterPicker = forwardRef(function FilterPicker(inputProps, ref) {
 	});
 	return wrapWithField(filterPickerField, {
 		...props,
+		...fieldLayout.field,
+		tooltip: void 0,
 		labelProps: mergeProps(labelProps, props.labelProps)
 	});
 });