@spark-ui/components/dist/combobox/index.mjs.map

Spark (Leboncoin design system) components.

{"version":3,"sources":["../../src/combobox/ComboboxContext.tsx","../../src/combobox/useCombobox/multipleSelectionReducer.ts","../../src/combobox/utils/index.ts","../../src/combobox/useCombobox/singleSelectionReducer.ts","../../src/combobox/Combobox.tsx","../../src/combobox/ComboboxClearButton.tsx","../../src/combobox/ComboboxDisclosure.tsx","../../src/combobox/ComboboxEmpty.tsx","../../src/combobox/ComboboxGroup.tsx","../../src/combobox/ComboboxItemsGroupContext.tsx","../../src/combobox/ComboboxInput.tsx","../../src/combobox/ComboboxItem.tsx","../../src/combobox/ComboboxItemContext.tsx","../../src/combobox/ComboboxItemIndicator.tsx","../../src/combobox/ComboboxItems.tsx","../../src/combobox/ComboboxItemText.tsx","../../src/combobox/ComboboxLabel.tsx","../../src/combobox/ComboboxLeadingIcon.tsx","../../src/combobox/ComboboxPopover.tsx","../../src/combobox/ComboboxPortal.tsx","../../src/combobox/ComboboxSelectedItems.tsx","../../src/combobox/ComboboxTrigger.tsx","../../src/combobox/ComboboxTrigger.styles.tsx","../../src/combobox/utils/useWidthIncreaseCallback.ts","../../src/combobox/index.ts"],"sourcesContent":["/* eslint-disable complexity */\n/* eslint-disable max-lines-per-function */\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { useCombobox, useMultipleSelection } from 'downshift'\nimport {\n  createContext,\n  Dispatch,\n  Fragment,\n  PropsWithChildren,\n  RefObject,\n  SetStateAction,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react'\n\nimport { Popover } from '../popover'\nimport { type ComboboxItem, type DownshiftState, type ItemsMap } from './types'\nimport { multipleSelectionReducer } from './useCombobox/multipleSelectionReducer'\nimport { singleSelectionReducer } from './useCombobox/singleSelectionReducer'\nimport { getElementByIndex, getItemsFromChildren, hasChildComponent } from './utils'\n\nexport interface ComboboxContextState extends DownshiftState {\n  itemsMap: ItemsMap\n  filteredItemsMap: ItemsMap\n  highlightedItem: ComboboxItem | undefined\n  hasPopover: boolean\n  multiple: boolean\n  disabled: boolean\n  readOnly: boolean\n  wrap?: boolean\n  state?: 'error' | 'alert' | 'success'\n  lastInteractionType: 'mouse' | 'keyboard'\n  setHasPopover: Dispatch<SetStateAction<boolean>>\n  setLastInteractionType: (type: 'mouse' | 'keyboard') => void\n  setOnInputValueChange: Dispatch<SetStateAction<((v: string) => void) | null>>\n  innerInputRef: RefObject<HTMLInputElement | null>\n  triggerAreaRef: RefObject<HTMLDivElement | null>\n  isLoading?: boolean\n  isTyping?: boolean\n  setIsTyping: Dispatch<SetStateAction<boolean>>\n}\n\nexport type ComboboxContextCommonProps = PropsWithChildren<{\n  /**\n   * The controlled open state of the select. Must be used in conjunction with `onOpenChange`.\n   */\n  open?: boolean\n  /**\n   * Event handler called when the open state of the select changes.\n   */\n  onOpenChange?: (isOpen: boolean) => void\n  /**\n   * The open state of the select when it is initially rendered. Use when you do not need to control its open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Use `state` prop to assign a specific state to the combobox, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n   */\n  state?: 'error' | 'alert' | 'success'\n  /**\n   * When true, prevents the user from interacting with the combobox.\n   */\n  disabled?: boolean\n  /**\n   * Sets the combobox as interactive or not.\n   */\n  readOnly?: boolean\n  /**\n   * When true, the items will be filtered depending on the value of the input (not case-sensitive).\n   */\n  filtering?: 'none' | 'auto' | 'strict'\n  /**\n   * By default, the combobox will clear or restore the input value to the selected item value on blur.\n   */\n  allowCustomValue?: boolean\n  /**\n   * In multiple selection, many selected items might be displayed. Be default, the combobox trigger will expand vertically to display them all.\n   * If you wish to keep every item on a single line, disabled this property.\n   */\n  wrap?: boolean\n  /**\n   * Display a spinner to indicate to the user that the combobox is loading results for .\n   */\n  isLoading?: boolean\n}>\n\ninterface ComboboxPropsSingle {\n  /**\n   * Prop 'multiple' indicating whether multiple values are allowed.\n   */\n  multiple?: false\n  /**\n   * The value of the select when initially rendered. Use when you do not need to control the state of the select.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the select. Should be used in conjunction with `onValueChange`.\n   */\n  value?: string | null\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n}\n\ninterface ComboboxPropsMultiple {\n  /**\n   * Prop 'multiple' indicating whether multiple values are allowed.\n   */\n  multiple: true\n  /**\n   * The value of the select when initially rendered. Use when you do not need to control the state of the select.\n   */\n  defaultValue?: string[]\n  /**\n   * The controlled value of the select. Should be used in conjunction with `onValueChange`.\n   */\n  value?: string[]\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string[]) => void\n}\n\nexport type ComboboxContextProps = ComboboxContextCommonProps &\n  (ComboboxPropsSingle | ComboboxPropsMultiple)\n\nconst ComboboxContext = createContext<ComboboxContextState | null>(null)\n\nconst getFilteredItemsMap = (map: ItemsMap, inputValue: string | undefined): ItemsMap => {\n  if (!inputValue) return map\n\n  return new Map(\n    Array.from(map).filter(([_, { text }]) => text.toLowerCase().includes(inputValue.toLowerCase()))\n  )\n}\n\nexport const ID_PREFIX = ':combobox'\n\nexport const ComboboxProvider = ({\n  children,\n  state: stateProp,\n  allowCustomValue = false,\n  filtering = 'auto',\n  disabled: disabledProp = false,\n  multiple = false,\n  readOnly: readOnlyProp = false,\n  wrap = true,\n  // Value\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  // Open\n  open: controlledOpen,\n  defaultOpen,\n  onOpenChange,\n  isLoading,\n}: ComboboxContextProps) => {\n  const isMounted = useRef(false)\n\n  // Input state\n  const [inputValue, setInputValue] = useState<string | undefined>('')\n  const [isTyping, setIsTyping] = useState<boolean>(filtering === 'strict')\n  const triggerAreaRef = useRef<HTMLDivElement>(null)\n  const innerInputRef = useRef<HTMLInputElement>(null)\n  const [onInputValueChange, setOnInputValueChange] = useState<((v: string) => void) | null>(null)\n\n  const [comboboxValue] = useCombinedState(controlledValue, defaultValue)\n\n  const shouldFilterItems = filtering === 'strict' || (filtering === 'auto' && isTyping)\n\n  // Items state\n  const [itemsMap, setItemsMap] = useState<ItemsMap>(getItemsFromChildren(children))\n  const [filteredItemsMap, setFilteredItems] = useState(\n    shouldFilterItems ? getFilteredItemsMap(itemsMap, inputValue) : itemsMap\n  )\n\n  const [selectedItem, setSelectedItem] = useState<ComboboxItem | null>(\n    itemsMap.get(comboboxValue as string) || null\n  )\n\n  const [selectedItems, setSelectedItems] = useState<ComboboxItem[]>(\n    comboboxValue\n      ? [...itemsMap.values()].filter(item => (comboboxValue as string[]).includes(item.value))\n      : []\n  )\n\n  const onInternalSelectedItemChange = (item: ComboboxItem | null) => {\n    setIsTyping(false)\n\n    if (item?.value !== selectedItem?.value) {\n      setSelectedItem(item)\n      setTimeout(() => {\n        onValueChange?.(item?.value as string & string[])\n      }, 0)\n    }\n  }\n\n  const onInternalSelectedItemsChange = (items: ComboboxItem[]) => {\n    setSelectedItems(items)\n    setTimeout(() => {\n      onValueChange?.(items.map(i => i.value) as string & string[])\n    }, 0)\n  }\n\n  // Sync internal state with controlled value\n  useEffect(() => {\n    if (!isMounted.current) {\n      isMounted.current = true\n\n      return\n    }\n\n    if (multiple) {\n      const newSelectedItems = (comboboxValue as string[]).reduce(\n        (accum: ComboboxItem[], value) => {\n          const match = itemsMap.get(value)\n\n          return match ? [...accum, match] : accum\n        },\n        []\n      )\n\n      setSelectedItems(comboboxValue ? newSelectedItems : [])\n    } else {\n      setSelectedItem(itemsMap.get(comboboxValue as string) || null)\n    }\n  }, [multiple ? JSON.stringify(comboboxValue) : comboboxValue])\n\n  // Form field state\n  const field = useFormFieldControl()\n\n  const internalFieldLabelID = `${ID_PREFIX}-label-${useId()}`\n  const internalFieldID = `${ID_PREFIX}-field-${useId()}`\n  const id = field.id || internalFieldID\n  const labelId = field.labelId || internalFieldLabelID\n\n  const state = field.state || stateProp\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n\n  const [hasPopover, setHasPopover] = useState<boolean>(\n    hasChildComponent(children, 'Combobox.Popover')\n  )\n  const [lastInteractionType, setLastInteractionType] = useState<'mouse' | 'keyboard'>('mouse')\n\n  useEffect(() => {\n    setFilteredItems(shouldFilterItems ? getFilteredItemsMap(itemsMap, inputValue) : itemsMap)\n  }, [inputValue, itemsMap])\n\n  const multiselect = useMultipleSelection<ComboboxItem>({\n    selectedItems,\n    stateReducer: (state, { type, changes }) => {\n      const types = useMultipleSelection.stateChangeTypes\n\n      // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check\n      switch (type) {\n        case types.SelectedItemKeyDownBackspace:\n        case types.SelectedItemKeyDownDelete: {\n          onInternalSelectedItemsChange(changes.selectedItems || [])\n\n          let activeIndex\n\n          if (type === types.SelectedItemKeyDownDelete) {\n            const isLastItem = state?.activeIndex === changes.selectedItems?.length\n            activeIndex = isLastItem ? -1 : state.activeIndex\n          } else {\n            const hasItemBefore = (changes?.activeIndex || 0) - 1 >= 0\n            activeIndex = hasItemBefore ? state.activeIndex - 1 : changes?.activeIndex\n          }\n\n          return {\n            ...changes,\n            activeIndex,\n          }\n        }\n        case types.SelectedItemClick:\n          if (innerInputRef.current) {\n            innerInputRef.current.focus()\n          }\n\n          return {\n            ...changes,\n            activeIndex: -1, // the focus will remain on the input\n          }\n        case types.FunctionRemoveSelectedItem:\n          return {\n            ...changes,\n            activeIndex: -1, // the focus will remain on the input\n          }\n        case types.DropdownKeyDownNavigationPrevious:\n          downshift.closeMenu()\n\n          return changes\n        default:\n          return changes\n      }\n    },\n  })\n\n  const filteredItems = Array.from(filteredItemsMap.values())\n\n  useEffect(() => {\n    onInputValueChange?.(inputValue || '')\n  }, [inputValue])\n\n  /**\n   * - props: https://github.com/downshift-js/downshift/tree/master/src/hooks/useCombobox#basic-props\n   * - state (for state reducer): https://github.com/downshift-js/downshift/tree/master/src/hooks/useCombobox#statechangetypes\n   * - output: https://github.com/downshift-js/downshift/tree/master/src/hooks/useCombobox#returned-props\n   */\n  const downshift = useCombobox<ComboboxItem>({\n    inputId: id,\n    items: filteredItems,\n    selectedItem: multiple ? undefined : selectedItem,\n    id,\n    labelId,\n    // Input\n    inputValue,\n    onInputValueChange: ({ inputValue: newInputValue }) => {\n      setInputValue(newInputValue)\n\n      if (shouldFilterItems) {\n        const filtered = getFilteredItemsMap(itemsMap, newInputValue || '')\n        setFilteredItems(filtered)\n      }\n    },\n    // Open\n    initialIsOpen: defaultOpen,\n    ...(controlledOpen != null && { isOpen: controlledOpen }),\n    onIsOpenChange: changes => {\n      if (changes.isOpen != null) {\n        onOpenChange?.(changes.isOpen)\n      }\n    },\n    // Custom Spark item object parsing\n    itemToString: item => {\n      return (item as ComboboxItem)?.text\n    },\n    isItemDisabled: item => {\n      const isFilteredOut =\n        !!inputValue &&\n        !filteredItems.some(filteredItem => {\n          return item.value === filteredItem.value\n        })\n\n      return item.disabled || isFilteredOut\n    },\n    // Main reducer\n    stateReducer: multiple\n      ? multipleSelectionReducer({\n          multiselect,\n          selectedItems,\n          allowCustomValue,\n          setSelectedItems: onInternalSelectedItemsChange,\n          triggerAreaRef,\n          items: itemsMap,\n        })\n      : singleSelectionReducer({\n          allowCustomValue,\n          setSelectedItem: onInternalSelectedItemChange,\n          filteredItems: [...filteredItemsMap.values()],\n        }),\n    /**\n     * Downshift default behaviour is to scroll into view the highlighted item when the dropdown opens. This behaviour is not stable and scrolls the dropdown to the bottom of the screen.\n     */\n    scrollIntoView: node => {\n      if (node) {\n        node.scrollIntoView({ block: 'nearest' })\n      }\n\n      return undefined\n    },\n  })\n\n  /**\n   * Indices in a Map are set when an element is added to the Map.\n   * If for some reason, in the Combobox:\n   * - items order changes\n   * - items are added\n   * - items are removed\n   *\n   * The Map must be rebuilt from the new children in order to preserve logical indices.\n   *\n   * Downshift is heavily indices based for keyboard navigation, so it it important.\n   */\n  useEffect(() => {\n    const newMap = getItemsFromChildren(children)\n\n    const previousItems = [...itemsMap.values()]\n    const newItems = [...newMap.values()]\n\n    const hasItemsChanges =\n      previousItems.length !== newItems.length ||\n      previousItems.some((item, index) => {\n        const hasUpdatedValue = item.value !== newItems[index]?.value\n        const hasUpdatedText = item.text !== newItems[index]?.text\n\n        return hasUpdatedValue || hasUpdatedText\n      })\n\n    if (hasItemsChanges) {\n      setItemsMap(newMap)\n    }\n  }, [children])\n\n  /**\n   * Warning:\n   * Downshift is expecting the items list to always be rendered, as per a11y guidelines.\n   * This is why the `Popover` is always opened in this component, but visually hidden instead from Combobox.Popover.\n   */\n  const [WrapperComponent, wrapperProps] = hasPopover ? [Popover, { open: true }] : [Fragment, {}]\n\n  return (\n    <ComboboxContext.Provider\n      value={{\n        // Data\n        itemsMap,\n        filteredItemsMap,\n        highlightedItem: getElementByIndex(filteredItemsMap, downshift.highlightedIndex),\n        // State\n        multiple,\n        disabled,\n        readOnly,\n        hasPopover,\n        setHasPopover,\n        state,\n        lastInteractionType,\n        setLastInteractionType,\n        wrap,\n        // Refs\n        innerInputRef,\n        triggerAreaRef,\n        // Downshift state\n        ...downshift,\n        ...multiselect,\n        setInputValue,\n        selectItem: onInternalSelectedItemChange,\n        setSelectedItems: onInternalSelectedItemsChange,\n        isLoading,\n        setOnInputValueChange,\n        isTyping,\n        setIsTyping,\n      }}\n    >\n      <WrapperComponent {...wrapperProps}>{children}</WrapperComponent>\n    </ComboboxContext.Provider>\n  )\n}\n\nexport const useComboboxContext = () => {\n  const context = useContext(ComboboxContext)\n\n  if (!context) {\n    throw Error('useComboboxContext must be used within a Combobox provider')\n  }\n\n  return context\n}\n","import { useCombobox, UseComboboxProps, UseMultipleSelectionReturnValue } from 'downshift'\nimport { RefObject } from 'react'\n\nimport { ComboboxItem, ItemsMap } from '../types'\nimport { getIndexByKey } from '../utils'\n\ninterface Props {\n  allowCustomValue?: boolean\n  items: ItemsMap\n  selectedItems: ComboboxItem[]\n  multiselect: UseMultipleSelectionReturnValue<ComboboxItem>\n  setSelectedItems: (items: ComboboxItem[]) => void\n  triggerAreaRef: RefObject<HTMLDivElement | null>\n}\n\nexport const multipleSelectionReducer = ({\n  multiselect,\n  selectedItems,\n  allowCustomValue = false,\n  setSelectedItems,\n  triggerAreaRef,\n  items,\n}: Props) => {\n  const reducer: UseComboboxProps<ComboboxItem>['stateReducer'] = (_, { changes, type }) => {\n    const isFocusInsideTriggerArea = triggerAreaRef.current?.contains?.(document.activeElement)\n\n    // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check\n    switch (type) {\n      case useCombobox.stateChangeTypes.InputClick:\n        return {\n          ...changes,\n          isOpen: true, // keep menu opened\n        }\n      case useCombobox.stateChangeTypes.InputKeyDownEnter:\n      case useCombobox.stateChangeTypes.ItemClick: {\n        const newState = { ...changes }\n\n        if (changes.selectedItem != null) {\n          newState.inputValue = '' // keep input value after selection\n          newState.isOpen = true // keep menu opened after selection\n\n          const highlightedIndex = getIndexByKey(items, changes.selectedItem.value)\n\n          newState.highlightedIndex = highlightedIndex // preserve highlighted item index after selection\n\n          const isAlreadySelected = multiselect.selectedItems.some(\n            selectedItem => selectedItem.value === changes.selectedItem?.value\n          )\n\n          const updatedItems = isAlreadySelected\n            ? selectedItems.filter(item => item.value !== changes.selectedItem?.value)\n            : [...selectedItems, changes.selectedItem]\n\n          setSelectedItems(updatedItems)\n        }\n\n        return newState\n      }\n\n      case useCombobox.stateChangeTypes.ToggleButtonClick:\n        return {\n          ...changes,\n          inputValue: allowCustomValue ? changes.inputValue : '',\n        }\n      case useCombobox.stateChangeTypes.InputChange:\n        return {\n          ...changes,\n          selectedItem: changes.highlightedIndex === -1 ? null : changes.selectedItem,\n        }\n      case useCombobox.stateChangeTypes.InputBlur:\n        return {\n          ...changes,\n          inputValue: allowCustomValue ? changes.inputValue : '',\n          isOpen: isFocusInsideTriggerArea,\n        }\n\n      default:\n        return changes\n    }\n  }\n\n  return reducer\n}\n","import { type FC, isValidElement, type ReactElement, type ReactNode, Children } from 'react'\n\nimport { type ItemProps } from '../ComboboxItem'\nimport { type ItemTextProps } from '../ComboboxItemText'\nimport { type ComboboxItem, type ItemsMap } from '../types'\n\nexport function getIndexByKey(map: ItemsMap, targetKey: string) {\n  let index = 0\n  for (const [key] of map.entries()) {\n    if (key === targetKey) {\n      return index\n    }\n    index++\n  }\n\n  return -1\n}\n\nconst getKeyAtIndex = (map: ItemsMap, index: number) => {\n  let i = 0\n  for (const key of map.keys()) {\n    if (i === index) return key\n    i++\n  }\n\n  return undefined\n}\n\nexport const getElementByIndex = (map: ItemsMap, index: number) => {\n  const key = getKeyAtIndex(map, index)\n\n  return key !== undefined ? map.get(key) : undefined\n}\n\nconst getElementDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC & { displayName?: string }).displayName : ''\n}\n\nexport const getOrderedItems = (\n  children: ReactNode,\n  result: ComboboxItem[] = []\n): ComboboxItem[] => {\n  Children.forEach(children, child => {\n    if (!isValidElement(child)) return\n\n    if (getElementDisplayName(child) === 'Combobox.Item') {\n      const childProps = child.props as ItemProps\n      result.push({\n        value: childProps.value,\n        disabled: !!childProps.disabled,\n        text: getItemText(childProps.children),\n      })\n    }\n\n    if ((child.props as ItemProps).children) {\n      getOrderedItems((child.props as ItemProps).children, result)\n    }\n  })\n\n  return result\n}\n\nconst findNestedItemText = (children: ReactNode): string => {\n  if (!children) return ''\n\n  for (const child of Children.toArray(children)) {\n    if (isValidElement(child)) {\n      const childElement = child as ReactElement\n\n      if (getElementDisplayName(childElement) === 'Combobox.ItemText') {\n        return (childElement.props as ItemTextProps).children\n      }\n\n      const foundText = findNestedItemText((childElement.props as ItemTextProps).children)\n\n      if (foundText) return foundText\n    }\n  }\n\n  return ''\n}\n\n/**\n * If Combobox.Item children:\n * - is a string, then the string is used.\n * - is JSX markup, then we look for Combobox.ItemText to get its string value.\n */\nexport const getItemText = (children: ReactNode): string => {\n  return typeof children === 'string' ? children : findNestedItemText(children)\n}\n\nexport const getItemsFromChildren = (children: ReactNode): ItemsMap => {\n  const newMap: ItemsMap = new Map()\n\n  getOrderedItems(children).forEach(itemData => {\n    newMap.set(itemData.value, itemData)\n  })\n\n  return newMap\n}\n\nexport const hasChildComponent = (children: ReactNode, displayName: string): boolean => {\n  return Children.toArray(children).some(child => {\n    if (!isValidElement(child)) return false\n\n    if (getElementDisplayName(child) === displayName) {\n      return true\n    } else if ((child.props as { children: ReactNode }).children) {\n      return hasChildComponent((child.props as { children: ReactNode }).children, displayName)\n    }\n\n    return false\n  })\n}\n\nexport const findElement = (children: ReactNode, value: string) => {\n  return Children.toArray(children)\n    .filter(isValidElement)\n    .find(child => value === getElementDisplayName(child) || '')\n}\n","import { useCombobox, UseComboboxProps } from 'downshift'\n\nimport { ComboboxItem } from '../types'\n\ninterface Props {\n  allowCustomValue?: boolean\n  filteredItems: ComboboxItem[]\n  setSelectedItem: (value: ComboboxItem | null) => void\n}\n\nexport const singleSelectionReducer = ({\n  filteredItems,\n  allowCustomValue = false,\n  setSelectedItem,\n}: Props) => {\n  const reducer: UseComboboxProps<ComboboxItem>['stateReducer'] = (state, { changes, type }) => {\n    const exactMatch = filteredItems.find(\n      item => item.text.toLowerCase() === state.inputValue.toLowerCase()\n    )\n\n    // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check\n    switch (type) {\n      case useCombobox.stateChangeTypes.InputKeyDownEscape:\n        if (!changes.selectedItem) {\n          setSelectedItem(null)\n        }\n\n        return changes\n      case useCombobox.stateChangeTypes.ItemClick:\n      case useCombobox.stateChangeTypes.InputKeyDownEnter:\n        if (changes.selectedItem) {\n          setSelectedItem(changes.selectedItem)\n        }\n\n        return changes\n      case useCombobox.stateChangeTypes.InputClick:\n        return { ...changes, isOpen: true }\n      case useCombobox.stateChangeTypes.ToggleButtonClick:\n      case useCombobox.stateChangeTypes.InputBlur:\n        if (allowCustomValue) return changes\n\n        if (state.inputValue === '') {\n          setSelectedItem(null)\n\n          return { ...changes, selectedItem: null }\n        }\n\n        if (exactMatch) {\n          setSelectedItem(exactMatch)\n\n          return { ...changes, selectedItem: exactMatch, inputValue: exactMatch.text }\n        }\n\n        if (state.selectedItem) {\n          return { ...changes, inputValue: state.selectedItem.text }\n        }\n\n        return { ...changes, inputValue: '' }\n      default:\n        return changes\n    }\n  }\n\n  return reducer\n}\n","import { type ComboboxContextProps, ComboboxProvider } from './ComboboxContext'\n\nexport type ComboboxProps = ComboboxContextProps\n\nexport const Combobox = ({ children, ...props }: ComboboxProps) => {\n  return <ComboboxProvider {...props}>{children}</ComboboxProvider>\n}\n\nCombobox.displayName = 'Combobox'\n","import { DeleteOutline } from '@spark-ui/icons/DeleteOutline'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, MouseEventHandler, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useComboboxContext } from './ComboboxContext'\n\nexport interface ClearButtonProps extends ComponentPropsWithoutRef<'button'> {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const ClearButton = ({\n  className,\n  tabIndex = -1,\n  onClick,\n  ref,\n  ...others\n}: ClearButtonProps) => {\n  const ctx = useComboboxContext()\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n    event.stopPropagation()\n\n    if (ctx.multiple) {\n      ctx.setSelectedItems([])\n    } else {\n      ctx.selectItem(null)\n    }\n\n    ctx.setInputValue('')\n\n    if (ctx.innerInputRef.current) {\n      ctx.innerInputRef.current.focus()\n    }\n\n    if (onClick) {\n      onClick(event)\n    }\n  }\n\n  return (\n    <button\n      ref={ref}\n      className={cx(className, 'h-sz-44 text-neutral hover:text-neutral-hovered')}\n      tabIndex={tabIndex}\n      onClick={handleClick}\n      type=\"button\"\n      {...others}\n    >\n      <Icon size=\"sm\">\n        <DeleteOutline />\n      </Icon>\n    </button>\n  )\n}\n\nClearButton.displayName = 'Combobox.ClearButton'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { useComboboxContext } from './ComboboxContext'\n\ninterface DisclosureProps extends Omit<ComponentProps<typeof IconButton>, 'aria-label'> {\n  className?: string\n  closedLabel: string\n  openedLabel: string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const Disclosure = ({\n  className,\n  closedLabel,\n  openedLabel,\n  intent = 'neutral',\n  design = 'ghost',\n  size = 'sm',\n  ref: forwardedRef,\n  ...props\n}: DisclosureProps) => {\n  const ctx = useComboboxContext()\n\n  const { ref: downshiftRef, ...downshiftDisclosureProps } = ctx.getToggleButtonProps({\n    disabled: ctx.disabled || ctx.readOnly,\n    onClick: event => {\n      event.stopPropagation()\n    },\n  })\n  const isExpanded = downshiftDisclosureProps['aria-expanded']\n  const ref = useMergeRefs(forwardedRef, downshiftRef)\n\n  return (\n    <IconButton\n      ref={ref}\n      className={cx(className, 'mt-[calc((44px-32px)/2)]')}\n      intent={intent}\n      design={design}\n      size={size}\n      {...downshiftDisclosureProps}\n      {...props}\n      aria-label={isExpanded ? openedLabel : closedLabel}\n      disabled={ctx.disabled}\n    >\n      <Icon\n        className={cx('shrink-0', 'rotate-0 transition duration-100 ease-in', {\n          'rotate-180': isExpanded,\n        })}\n        size=\"sm\"\n      >\n        <ArrowHorizontalDown />\n      </Icon>\n    </IconButton>\n  )\n}\n\nDisclosure.displayName = 'Combobox.Disclosure'\n","import { cx } from 'class-variance-authority'\nimport { type ReactNode, Ref } from 'react'\n\nimport { useComboboxContext } from './ComboboxContext'\n\ninterface EmptyProps {\n  className?: string\n  children: ReactNode\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Empty = ({ className, children, ref: forwardedRef }: EmptyProps) => {\n  const ctx = useComboboxContext()\n  const hasNoItemVisible = ctx.filteredItemsMap.size === 0\n\n  return hasNoItemVisible ? (\n    <div\n      ref={forwardedRef}\n      className={cx('px-lg py-md text-body-1 text-on-surface/dim-1', className)}\n    >\n      {children}\n    </div>\n  ) : null\n}\n\nEmpty.displayName = 'Combobox.Empty'\n","import { cx } from 'class-variance-authority'\nimport { Children, isValidElement, ReactNode, Ref } from 'react'\n\nimport { useComboboxContext } from './ComboboxContext'\nimport { ComboboxGroupProvider, useComboboxGroupContext } from './ComboboxItemsGroupContext'\n\ninterface GroupProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Group = ({ children, ref: forwardedRef, ...props }: GroupProps) => {\n  return (\n    <ComboboxGroupProvider>\n      <GroupContent ref={forwardedRef} {...props}>\n        {children}\n      </GroupContent>\n    </ComboboxGroupProvider>\n  )\n}\n\nconst GroupContent = ({ children, className, ref: forwardedRef }: GroupProps) => {\n  const ctx = useComboboxContext()\n  const groupCtx = useComboboxGroupContext()\n\n  const hasVisibleOptions = Children.toArray(children).some(child => {\n    return (\n      isValidElement(child) && ctx.filteredItemsMap.get((child.props as { value: string }).value)\n    )\n  })\n\n  return hasVisibleOptions ? (\n    <div\n      ref={forwardedRef}\n      role=\"group\"\n      aria-labelledby={groupCtx.groupLabelId}\n      className={cx(className)}\n    >\n      {children}\n    </div>\n  ) : null\n}\n\nGroup.displayName = 'Combobox.Group'\n","import { createContext, type PropsWithChildren, useContext, useId } from 'react'\n\nimport { ID_PREFIX } from './ComboboxContext'\n\nexport interface ComboboxContextState {\n  groupLabelId: string\n}\n\ntype ComboboxContextProps = PropsWithChildren\n\nconst ComboboxGroupContext = createContext<ComboboxContextState | null>(null)\n\nexport const ComboboxGroupProvider = ({ children }: ComboboxContextProps) => {\n  const groupLabelId = `${ID_PREFIX}-group-label-${useId()}`\n\n  return (\n    <ComboboxGroupContext.Provider value={{ groupLabelId }}>\n      {children}\n    </ComboboxGroupContext.Provider>\n  )\n}\n\nexport const useComboboxGroupContext = () => {\n  const context = useContext(ComboboxGroupContext)\n\n  if (!context) {\n    throw Error('useComboboxGroupContext must be used within a ComboboxGroup provider')\n  }\n\n  return context\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport {\n  ChangeEvent,\n  ComponentPropsWithoutRef,\n  Fragment,\n  Ref,\n  SyntheticEvent,\n  useEffect,\n} from 'react'\n\nimport { Popover } from '../popover'\nimport { VisuallyHidden } from '../visually-hidden'\nimport { useComboboxContext } from './ComboboxContext'\n\ntype InputPrimitiveProps = ComponentPropsWithoutRef<'input'>\n\ninterface InputProps extends Omit<InputPrimitiveProps, 'value' | 'placeholder'> {\n  className?: string\n  placeholder?: string\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  ref?: Ref<HTMLInputElement>\n}\n\nexport const Input = ({\n  'aria-label': ariaLabel,\n  className,\n  placeholder,\n  value,\n  defaultValue,\n  onValueChange,\n  ref: forwardedRef,\n  ...props\n}: InputProps) => {\n  const ctx = useComboboxContext()\n  const field = useFormFieldControl()\n  const [inputValue] = useCombinedState(value, defaultValue)\n\n  const { isInvalid, description } = field\n\n  useEffect(() => {\n    if (inputValue != null) {\n      ctx.setInputValue(inputValue)\n    }\n  }, [inputValue])\n\n  useEffect(() => {\n    if (onValueChange) {\n      ctx.setOnInputValueChange(() => onValueChange)\n    }\n\n    // Sync input with combobox default value\n    if (!ctx.multiple && ctx.selectedItem) {\n      ctx.setInputValue(ctx.selectedItem.text)\n    }\n  }, [])\n\n  const [PopoverTrigger, popoverTriggerProps] = ctx.hasPopover\n    ? [Popover.Trigger, { asChild: true, type: undefined }]\n    : [Fragment, {}]\n\n  const multiselectInputProps = ctx.getDropdownProps()\n  const inputRef = useMergeRefs(forwardedRef, ctx.innerInputRef, multiselectInputProps.ref)\n  const downshiftInputProps = ctx.getInputProps({\n    disabled: ctx.disabled || ctx.readOnly,\n    ...multiselectInputProps,\n    onKeyDown: event => {\n      multiselectInputProps.onKeyDown?.(event)\n      ctx.setLastInteractionType('keyboard')\n      ctx.setIsTyping(true)\n    },\n    /**\n     *\n     * Important:\n     * - without this, the input cursor is moved to the end after every change.\n     * @see https://github.com/downshift-js/downshift/issues/1108#issuecomment-674180157\n     */\n    onChange: (e: ChangeEvent<HTMLInputElement>) => {\n      ctx.setInputValue(e.target.value)\n    },\n    ref: inputRef,\n  })\n\n  const hasPlaceholder = ctx.multiple ? ctx.selectedItems.length === 0 : ctx.selectedItem === null\n\n  function mergeHandlers<T extends SyntheticEvent>(\n    handlerA?: (event: T) => void,\n    handlerB?: (event: T) => void\n  ) {\n    return (event: T) => {\n      handlerA?.(event)\n      handlerB?.(event)\n    }\n  }\n\n  /**\n   * Downshift has its own callbacks set for a few events types.\n   * We must merge the event handlers with the (optional) forwarded props if consumer wish to use the same events for alernate purposes (ex: tracking)\n   */\n  const mergedEventProps = {\n    onBlur: mergeHandlers(props.onBlur, downshiftInputProps.onBlur),\n    onChange: mergeHandlers(props.onChange, downshiftInputProps.onChange),\n    onClick: mergeHandlers(props.onClick, downshiftInputProps.onClick),\n    onKeyDown: mergeHandlers(props.onKeyDown, downshiftInputProps.onKeyDown),\n  }\n\n  return (\n    <>\n      {ariaLabel && (\n        <VisuallyHidden>\n          <label {...ctx.getLabelProps()}>{ariaLabel}</label>\n        </VisuallyHidden>\n      )}\n      <PopoverTrigger {...popoverTriggerProps}>\n        <input\n          data-spark-component=\"combobox-input\"\n          type=\"text\"\n          {...(hasPlaceholder && { placeholder })}\n          className={cx(\n            'max-w-full shrink-0 grow basis-[80px]',\n            'h-sz-28 bg-surface px-sm text-body-1 text-ellipsis outline-hidden',\n            'disabled:text-on-surface/dim-3 disabled:cursor-not-allowed disabled:bg-transparent',\n            'read-only:text-on-surface read-only:cursor-default read-only:bg-transparent',\n            className\n          )}\n          {...props}\n          {...downshiftInputProps}\n          {...mergedEventProps}\n          value={ctx.inputValue}\n          aria-label={ariaLabel}\n          disabled={ctx.disabled}\n          readOnly={ctx.readOnly}\n          // FormField\n          aria-invalid={isInvalid}\n          aria-describedby={description}\n        />\n      </PopoverTrigger>\n    </>\n  )\n}\n\nInput.displayName = 'Combobox.Input'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cva, cx } from 'class-variance-authority'\nimport { type HTMLAttributes, type ReactNode, Ref } from 'react'\n\nimport { useComboboxContext } from './ComboboxContext'\nimport { ComboboxItemProvider, useComboboxItemContext } from './ComboboxItemContext'\n\nexport interface ItemProps extends HTMLAttributes<HTMLLIElement> {\n  disabled?: boolean\n  value: string\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\nexport const Item = ({ children, ref: forwardedRef, ...props }: ItemProps) => {\n  const { value, disabled } = props\n\n  return (\n    <ComboboxItemProvider value={value} disabled={disabled}>\n      <ItemContent ref={forwardedRef} {...props}>\n        {children}\n      </ItemContent>\n    </ComboboxItemProvider>\n  )\n}\n\nconst styles = cva('px-lg py-md text-body-1', {\n  variants: {\n    selected: {\n      true: 'font-bold',\n    },\n    disabled: {\n      true: 'opacity-dim-3 cursor-not-allowed',\n      false: 'cursor-pointer',\n    },\n    highlighted: {\n      true: '',\n    },\n    interactionType: {\n      mouse: '',\n      keyboard: '',\n    },\n  },\n  compoundVariants: [\n    {\n      highlighted: true,\n      interactionType: 'mouse',\n      class: 'bg-surface-hovered',\n    },\n    {\n      highlighted: true,\n      interactionType: 'keyboard',\n      class: 'u-outline',\n    },\n  ],\n})\n\nconst ItemContent = ({\n  className,\n  disabled = false,\n  value,\n  children,\n  ref: forwardedRef,\n}: ItemProps) => {\n  const ctx = useComboboxContext()\n  const itemCtx = useComboboxItemContext()\n\n  const isVisible = !!ctx.filteredItemsMap.get(value)\n\n  const { ref: downshiftRef, ...downshiftItemProps } = ctx.getItemProps({\n    item: itemCtx.itemData,\n    index: itemCtx.index,\n  })\n\n  const ref = useMergeRefs(forwardedRef, downshiftRef)\n\n  if (!isVisible) return null\n\n  return (\n    <li\n      ref={ref}\n      className={cx(\n        styles({\n          selected: itemCtx.isSelected,\n          disabled,\n          highlighted: ctx.highlightedItem?.value === value,\n          interactionType: ctx.lastInteractionType,\n          className,\n        })\n      )}\n      key={value}\n      {...downshiftItemProps}\n      aria-selected={itemCtx.isSelected}\n      aria-labelledby={itemCtx.textId}\n    >\n      {children}\n    </li>\n  )\n}\n\nItem.displayName = 'Combobox.Item'\n","import {\n  createContext,\n  Dispatch,\n  type PropsWithChildren,\n  SetStateAction,\n  useContext,\n  useState,\n} from 'react'\n\nimport { useComboboxContext } from './ComboboxContext'\nimport { ComboboxItem } from './types'\nimport { getIndexByKey, getItemText } from './utils'\n\ntype ItemTextId = string | undefined\n\ninterface ComboboxItemContextState {\n  textId: ItemTextId\n  setTextId: Dispatch<SetStateAction<ItemTextId>>\n  isSelected: boolean\n  itemData: ComboboxItem\n  index: number\n  disabled: boolean\n}\n\nconst ComboboxItemContext = createContext<ComboboxItemContextState | null>(null)\n\nexport const ComboboxItemProvider = ({\n  value,\n  disabled = false,\n  children,\n}: PropsWithChildren<{ value: string; disabled?: boolean }>) => {\n  const ctx = useComboboxContext()\n\n  const [textId, setTextId] = useState<ItemTextId>(undefined)\n\n  const index = getIndexByKey(ctx.filteredItemsMap, value)\n  const itemData: ComboboxItem = { disabled, value, text: getItemText(children) }\n\n  const isSelected = ctx.multiple\n    ? ctx.selectedItems.some(selectedItem => selectedItem.value === value)\n    : ctx.selectedItem?.value === value\n\n  return (\n    <ComboboxItemContext.Provider\n      value={{ textId, setTextId, isSelected, itemData, index, disabled }}\n    >\n      {children}\n    </ComboboxItemContext.Provider>\n  )\n}\n\nexport const useComboboxItemContext = () => {\n  const context = useContext(ComboboxItemContext)\n\n  if (!context) {\n    throw Error('useComboboxItemContext must be used within a ComboboxItem provider')\n  }\n\n  return context\n}\n","import { Check } from '@spark-ui/icons/Check'\nimport { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useComboboxItemContext } from './ComboboxItemContext'\n\nexport interface ItemIndicatorProps {\n  children?: ReactNode\n  className?: string\n  label?: string\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ItemIndicator = ({\n  className,\n  children,\n  label,\n  ref: forwardedRef,\n}: ItemIndicatorProps) => {\n  const { disabled, isSelected } = useComboboxItemContext()\n\n  const childElement = children || (\n    <Icon size=\"sm\">\n      <Check aria-label={label} />\n    </Icon>\n  )\n\n  return (\n    <span\n      ref={forwardedRef}\n      className={cx('min-h-sz-16 min-w-sz-16 flex', disabled && 'opacity-dim-3', className)}\n    >\n      {isSelected && childElement}\n    </span>\n  )\n}\n\nItemIndicator.displayName = 'Combobox.ItemIndicator'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, ReactNode, Ref, useLayoutEffect, useRef } from 'react'\n\nimport { Spinner } from '../spinner'\nimport { useComboboxContext } from './ComboboxContext'\n\ninterface ItemsProps extends ComponentPropsWithoutRef<'ul'> {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLUListElement>\n}\n\nexport const Items = ({ children, className, ref: forwardedRef, ...props }: ItemsProps) => {\n  const ctx = useComboboxContext()\n\n  const { ref: downshiftRef, ...downshiftMenuProps } = ctx.getMenuProps({\n    onMouseMove: () => {\n      ctx.setLastInteractionType('mouse')\n    },\n  })\n\n  const innerRef = useRef<HTMLElement>(null)\n\n  const ref = useMergeRefs(forwardedRef, downshiftRef, innerRef)\n\n  const isOpen = ctx.hasPopover ? ctx.isOpen : true\n\n  const isPointerEventsDisabled = ctx.hasPopover && !isOpen\n\n  useLayoutEffect(() => {\n    if (innerRef.current?.parentElement) {\n      innerRef.current.parentElement.style.pointerEvents = isPointerEventsDisabled ? 'none' : ''\n      innerRef.current.style.pointerEvents = isPointerEventsDisabled ? 'none' : ''\n    }\n  }, [isPointerEventsDisabled])\n\n  return (\n    <ul\n      ref={ref}\n      className={cx(\n        className,\n        'flex flex-col',\n        isOpen ? 'block' : 'pointer-events-none invisible opacity-0',\n        ctx.hasPopover && 'p-lg',\n        ctx.isLoading && 'items-center overflow-y-auto'\n      )}\n      {...props}\n      {...downshiftMenuProps}\n      aria-busy={ctx.isLoading}\n      data-spark-component=\"combobox-items\"\n    >\n      {ctx.isLoading ? <Spinner size=\"sm\" /> : children}\n    </ul>\n  )\n}\n\nItems.displayName = 'Combobox.Items'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX } from './ComboboxContext'\nimport { useComboboxItemContext } from './ComboboxItemContext'\n\nexport interface ItemTextProps {\n  children: string\n  className?: string\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ItemText = ({ children, className, ref: forwardedRef }: ItemTextProps) => {\n  const id = `${ID_PREFIX}-item-text-${useId()}`\n\n  const { setTextId } = useComboboxItemContext()\n\n  useEffect(() => {\n    setTextId(id)\n\n    return () => setTextId(undefined)\n  })\n\n  return (\n    <span id={id} className={cx('inline', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nItemText.displayName = 'Combobox.ItemText'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { useComboboxGroupContext } from './ComboboxItemsGroupContext'\n\ninterface LabelProps {\n  children: string\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Label = ({ children, className, ref: forwardedRef }: LabelProps) => {\n  const groupCtx = useComboboxGroupContext()\n\n  return (\n    <div\n      ref={forwardedRef}\n      id={groupCtx.groupLabelId}\n      className={cx('px-md py-sm text-body-2 text-neutral italic', className)}\n    >\n      {children}\n    </div>\n  )\n}\n\nLabel.displayName = 'Combobox.Label'\n","import { ReactElement } from 'react'\n\nimport { Icon } from '../icon'\n\nexport const LeadingIcon = ({ children }: { children: ReactElement }) => {\n  return (\n    <Icon size={'sm'} className=\"h-sz-44 shrink-0\">\n      {children}\n    </Icon>\n  )\n}\n\nLeadingIcon.displayName = 'Combobox.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref, useEffect } from 'react'\n\nimport { Popover as SparkPopover } from '../popover'\nimport { useComboboxContext } from './ComboboxContext'\n\ninterface PopoverProps extends ComponentProps<typeof SparkPopover.Content> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Popover = ({\n  children,\n  matchTriggerWidth = true,\n  sideOffset = 4,\n  className,\n  ref: forwardedRef,\n  ...props\n}: PopoverProps) => {\n  const ctx = useComboboxContext()\n\n  useEffect(() => {\n    ctx.setHasPopover(true)\n\n    return () => ctx.setHasPopover(false)\n  }, [])\n\n  return (\n    <SparkPopover.Content\n      ref={forwardedRef}\n      inset\n      asChild\n      matchTriggerWidth={matchTriggerWidth}\n      className={cx('z-dropdown! relative', className)}\n      sideOffset={sideOffset}\n      onOpenAutoFocus={e => {\n        /**\n         * With a combobox pattern, the focus should remain on the trigger at all times.\n         * Passing the focus to the combobox popover would break keyboard navigation.\n         */\n        e.preventDefault()\n      }}\n      {...props}\n      data-spark-component=\"combobox-popover\"\n    >\n      {children}\n    </SparkPopover.Content>\n  )\n}\n\nPopover.displayName = 'Combobox.Popover'\n","import { ReactElement } from 'react'\n\nimport { Popover as SparkPopover } from '../popover'\n\nexport const Portal: typeof SparkPopover.Portal = ({ children, ...rest }): ReactElement => (\n  <SparkPopover.Portal {...rest}>{children}</SparkPopover.Portal>\n)\n\nPortal.displayName = 'Combobox.Portal'\n","import { DeleteOutline } from '@spark-ui/icons/DeleteOutline'\nimport { cx } from 'class-variance-authority'\nimport { FocusEvent } from 'react'\n\nimport { Icon } from '../icon'\nimport { useComboboxContext } from './ComboboxContext'\nimport { ComboboxItem } from './types'\n\nconst SelectedItem = ({ item: selectedItem, index }: { item: ComboboxItem; index: number }) => {\n  const ctx = useComboboxContext()\n\n  const isCleanable = !ctx.disabled && !ctx.readOnly\n\n  const handleFocus = (e: FocusEvent<HTMLSpanElement>) => {\n    const element = e.target as HTMLSpanElement\n    if (ctx.lastInteractionType === 'keyboard') {\n      element.scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n        inline: 'nearest',\n      })\n    }\n  }\n\n  const { disabled, ...selectedItemProps } = ctx.getSelectedItemProps({\n    disabled: ctx.disabled || ctx.readOnly,\n    selectedItem,\n    index,\n  })\n\n  const Element = disabled ? 'button' : 'span'\n\n  return (\n    <Element\n      role=\"presentation\"\n      data-spark-component=\"combobox-selected-item\"\n      key={`selected-item-${index}`}\n      className={cx(\n        'h-sz-28 bg-neutral-container flex items-center rounded-md align-middle',\n        'text-body-2 text-on-neutral-container',\n        'disabled:opacity-dim-3 disabled:cursor-not-allowed',\n        'focus-visible:u-outline-inset outline-hidden',\n        { 'px-md': !isCleanable, 'pl-md': isCleanable }\n      )}\n      {...selectedItemProps}\n      tabIndex={-1}\n      {...(disabled && { disabled: true })}\n      onFocus={handleFocus}\n    >\n      <span\n        className={cx('line-clamp-1 overflow-x-hidden leading-normal break-all text-ellipsis', {\n          'w-max': !ctx.wrap,\n        })}\n      >\n        {selectedItem.text}\n      </span>\n      {ctx.disabled}\n      {isCleanable && (\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-hidden\n          className=\"px-md h-full cursor-pointer\"\n          onClick={e => {\n            e.stopPropagation()\n\n            const updatedSelectedItems = ctx.selectedItems.filter(\n              item => item.value !== selectedItem.value\n            )\n\n            ctx.setSelectedItems(updatedSelectedItems)\n\n            if (ctx.innerInputRef.current) {\n              ctx.innerInputRef.current.focus({ preventScroll: true })\n            }\n          }}\n        >\n          <Icon size=\"sm\">\n            <DeleteOutline />\n          </Icon>\n        </button>\n      )}\n    </Element>\n  )\n}\n\nexport const SelectedItems = () => {\n  const ctx = useComboboxContext()\n\n  return ctx.multiple && ctx.selectedItems.length ? (\n    <>\n      {ctx.selectedItems.map((item, index) => (\n        <SelectedItem key={item.value} item={item} index={index} />\n      ))}\n    </>\n  ) : null\n}\n\nSelectedItems.displayName = 'Combobox.SelectedItems'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { Fragment, ReactNode, Ref, useEffect, useRef } from 'react'\n\nimport { Popover } from '../popover'\nimport { useComboboxContext } from './ComboboxContext'\nimport { styles } from './ComboboxTrigger.styles'\nimport { findElement } from './utils'\nimport { useWidthIncreaseCallback } from './utils/useWidthIncreaseCallback'\n\ninterface TriggerProps {\n  className?: string\n  children: ReactNode\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Trigger = ({ className, children, ref: forwardedRef }: TriggerProps) => {\n  const ctx = useComboboxContext()\n  const field = useFormFieldControl()\n\n  // Trigger compound elements\n  const leadingIcon = findElement(children, 'Combobox.LeadingIcon')\n  const selectedItems = findElement(children, 'Combobox.SelectedItems')\n  const input = findElement(children, 'Combobox.Input')\n  const clearButton = findElement(children, 'Combobox.ClearButton')\n  const disclosure = findElement(children, 'Combobox.Disclosure')\n\n  const [PopoverAnchor, popoverAnchorProps] = ctx.hasPopover\n    ? [Popover.Anchor, { asChild: true, type: undefined }]\n    : [Fragment, {}]\n\n  const ref = useMergeRefs(forwardedRef, ctx.triggerAreaRef)\n  const scrollableAreaRef = useRef<HTMLDivElement>(null)\n\n  const disabled = field.disabled || ctx.disabled\n  const readOnly = field.readOnly || ctx.readOnly\n\n  const hasClearButton = !!clearButton && !disabled && !readOnly\n\n  /**\n   * In case wrap behaviour is disabled, we sometimes need to scroll to the right-side of the trigger:\n   * - when a selected item chip is added.\n   * - when the component width changes (window resizing, etc.)\n   *\n   * The goal is that the typing area remains visible at all times.\n   */\n  const scrollToRight = () => {\n    if (scrollableAreaRef.current && !ctx.wrap) {\n      const { scrollWidth, clientWidth } = scrollableAreaRef.current\n      // Scroll to the rightmost position\n      scrollableAreaRef.current.scrollLeft = scrollWidth - clientWidth\n    }\n  }\n\n  useWidthIncre