npm - @mattermost/compass-ui - Versions diffs - 0.1.0-alpha.3 → 0.1.0-alpha.31 - Mend

@mattermost/compass-ui 0.1.0-alpha.3 → 0.1.0-alpha.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2007) hide show

package/dist/components/combobox/Combobox.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Combobox.cjs","sources":["../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import type {\n ChangeEvent,\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n} from 'react';\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport Chip from '@/components/chip/Chip';\nimport type { ChipSize } from '@/components/chip/Chip';\nimport Icon from '@/components/icon/Icon';\nimport MenuItem from '@/components/menu-item/MenuItem';\nimport PopoverMenu, {\n PopoverMenuScroll,\n} from '@/components/popover-menu/PopoverMenu';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport { useAnchoredPopupPortal } from '@/hooks/use-anchored-popup-portal';\nimport { useOutsideClose } from '@/hooks/use-outside-close';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport { toKebab } from '@/utils/string';\nimport styles from './Combobox.module.scss';\n\nexport type ComboboxSize = 'small' \| 'medium' \| 'large';\n\nexport type ComboboxOption = {\n value: string;\n label: string;\n disabled?: boolean;\n /** Leading content for the list row (icon or avatar node). /\n leadingVisual?: ReactNode;\n /* Avatar for chips / list when a photo is preferred over `leadingVisual`. /\n leadingAvatar?: { src: string; alt: string };\n secondaryLabel?: string;\n};\n\nexport interface ComboboxProps {\n options: ComboboxOption[];\n /* When true, selected values render as removable chips. Default: false. /\n multiple?: boolean;\n value?: string \| string[] \| null;\n defaultValue?: string \| string[] \| null;\n onChange?: (value: string \| string[] \| null) => void;\n inputValue?: string;\n defaultInputValue?: string;\n onInputChange?: (value: string) => void;\n label?: ReactNode;\n placeholder?: string;\n leadingIcon?: ReactNode;\n size?: ComboboxSize;\n invalid?: boolean;\n disabled?: boolean;\n /\n Client-side filter. `true` (default) matches labels case-insensitively.\n * `false` shows all options (caller filters via `inputValue` / `onInputChange`).\n /\n filter?: boolean \| ((option: ComboboxOption, query: string) => boolean);\n emptyMessage?: string;\n className?: string;\n id?: string;\n 'aria-label'?: string;\n /* Portal mount node for the menu; defaults to `document.body`. /\n portalContainer?: HTMLElement \| null;\n /* Stacking order for the portaled menu. /\n zIndex?: number;\n}\n\nconst POPUP_MAX_HEIGHT = 280;\n\nconst CHIP_SIZE_BY_COMBOBOX: Record<ComboboxSize, ChipSize> = {\n small: 'small',\n medium: 'medium',\n large: 'large',\n};\n\nfunction defaultFilter(option: ComboboxOption, query: string): boolean {\n if (!query) return true;\n return option.label.toLowerCase().includes(query.toLowerCase());\n}\n\nfunction toSingleValue(\n value: string \| string[] \| null \| undefined,\n): string \| null {\n if (value == null) return null;\n if (Array.isArray(value)) return value[0] ?? null;\n return value === '' ? null : value;\n}\n\nfunction toMultiValue(\n value: string \| string[] \| null \| undefined,\n): string[] {\n if (value == null) return [];\n if (Array.isArray(value)) return value;\n return value === '' ? [] : [value];\n}\n\nfunction optionLeadingVisual(option: ComboboxOption): ReactNode \| undefined {\n if (option.leadingVisual != null) return option.leadingVisual;\n if (option.leadingAvatar != null) {\n return (\n <UserAvatar\n src={option.leadingAvatar.src}\n alt={option.leadingAvatar.alt}\n size=\"24\"\n />\n );\n }\n return undefined;\n}\n\n/\n { value: 'town-square', label: 'Town Square' }, { value: 'off-topic', label: 'Off-Topic'\n * }, { value: 'design', label: 'Design' }, { value: 'engineering', label: 'Engineering' }, {\n * value: 'releases', label: 'Releases' }, ];\n */\nconst Combobox = forwardRef<HTMLInputElement, ComboboxProps>(function Combobox(\n {\n options,\n multiple = false,\n value: valueProp,\n defaultValue,\n onChange,\n inputValue: inputValueProp,\n defaultInputValue = '',\n onInputChange,\n label,\n placeholder,\n leadingIcon,\n size = 'medium',\n invalid = false,\n disabled = false,\n filter = true,\n emptyMessage = 'No results',\n className = '',\n id: idProp,\n 'aria-label': ariaLabel,\n portalContainer = null,\n zIndex,\n },\n ref,\n) {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const listboxId = `${id}-listbox`;\n\n const rootRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n const setInputRef = useCallback(\n (node: HTMLInputElement \| null) => {\n inputRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n },\n [ref],\n );\n\n const isValueControlled = valueProp !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState<\n string \| string[] \| null\n >(() => {\n if (defaultValue !== undefined) return defaultValue;\n return multiple ? [] : null;\n });\n\n const rawValue = isValueControlled ? valueProp! : uncontrolledValue;\n const singleValue = multiple ? null : toSingleValue(rawValue);\n const multiValue = multiple ? toMultiValue(rawValue) : [];\n\n const isInputControlled = inputValueProp !== undefined;\n const [uncontrolledInput, setUncontrolledInput] = useState(defaultInputValue);\n const [isOpen, setIsOpen] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n const [queryOverride, setQueryOverride] = useState<string \| null>(null);\n\n const selectedOption = useMemo(\n () =>\n singleValue == null\n ? undefined\n : options.find((o) => o.value === singleValue),\n [options, singleValue],\n );\n\n // Single-select: show the selected label until the user starts typing a filter.\n // `queryOverride !== null` means the field is in filter-edit mode.\n const displayInput = (() => {\n if (isInputControlled) return inputValueProp!;\n if (multiple) return uncontrolledInput;\n if (queryOverride !== null) return queryOverride;\n return selectedOption?.label ?? uncontrolledInput;\n })();\n\n const filterQuery = (() => {\n if (isInputControlled) return inputValueProp!;\n if (multiple) return uncontrolledInput;\n if (queryOverride !== null) return queryOverride;\n return '';\n })();\n\n const setInputDisplay = useCallback(\n (next: string) => {\n if (!isInputControlled) {\n setUncontrolledInput(next);\n if (!multiple) setQueryOverride(next);\n }\n onInputChange?.(next);\n },\n [isInputControlled, multiple, onInputChange],\n );\n\n const commitValue = useCallback(\n (next: string \| string[] \| null) => {\n if (!isValueControlled) setUncontrolledValue(next);\n onChange?.(next);\n },\n [isValueControlled, onChange],\n );\n\n const filteredOptions = useMemo(() => {\n if (filter === false) return options;\n const fn = typeof filter === 'function' ? filter : defaultFilter;\n return options.filter((o) => fn(o, filterQuery));\n }, [options, filter, filterQuery]);\n\n const { mounted: popupMounted, visible: popupVisible } =\n usePopoverTransition(isOpen);\n\n const {\n placement,\n maxHeight,\n style: popupStyle,\n portalRef,\n renderPortal,\n } = useAnchoredPopupPortal(anchorRef, popupMounted, {\n preferredHeight: POPUP_MAX_HEIGHT,\n maxHeightCap: POPUP_MAX_HEIGHT,\n portalContainer,\n zIndex,\n });\n\n const close = useCallback(() => {\n setIsOpen(false);\n setActiveIndex(-1);\n if (!multiple && !isInputControlled) {\n setQueryOverride(null);\n setUncontrolledInput('');\n }\n }, [multiple, isInputControlled]);\n\n const open = useCallback(() => {\n if (disabled) return;\n setIsOpen(true);\n }, [disabled]);\n\n useOutsideClose(rootRef, isOpen, close, portalRef);\n\n useEffect(() => {\n if (!isOpen) return;\n setActiveIndex((prev) => {\n if (filteredOptions.length === 0) return -1;\n if (prev >= 0 && prev < filteredOptions.length) return prev;\n const selectedIdx = multiple\n ? filteredOptions.findIndex((o) => multiValue.includes(o.value))\n : filteredOptions.findIndex((o) => o.value === singleValue);\n return selectedIdx >= 0 ? selectedIdx : 0;\n });\n }, [isOpen, filteredOptions, multiple, multiValue, singleValue]);\n\n const isSelected = useCallback(\n (optionValue: string) =>\n multiple\n ? multiValue.includes(optionValue)\n : singleValue === optionValue,\n [multiple, multiValue, singleValue],\n );\n\n const selectOption = useCallback(\n (option: ComboboxOption) => {\n if (option.disabled) return;\n\n if (multiple) {\n const next = multiValue.includes(option.value)\n ? multiValue.filter((v) => v !== option.value)\n : [...multiValue, option.value];\n commitValue(next);\n setInputDisplay('');\n close();\n inputRef.current?.focus();\n return;\n }\n\n commitValue(option.value);\n if (!isInputControlled) {\n setUncontrolledInput('');\n setQueryOverride(null);\n } else {\n onInputChange?.(option.label);\n }\n close();\n },\n [\n multiple,\n multiValue,\n commitValue,\n setInputDisplay,\n isInputControlled,\n onInputChange,\n close,\n ],\n );\n\n const removeValue = useCallback(\n (optionValue: string) => {\n if (!multiple) return;\n commitValue(multiValue.filter((v) => v !== optionValue));\n inputRef.current?.focus();\n },\n [multiple, multiValue, commitValue],\n );\n\n const moveActive = useCallback(\n (delta: number) => {\n const enabled = filteredOptions\n .map((o, i) => ({ o, i }))\n .filter(({ o }) => !o.disabled);\n if (enabled.length === 0) {\n setActiveIndex(-1);\n return;\n }\n setActiveIndex((prev) => {\n const currentPos = enabled.findIndex(({ i }) => i === prev);\n const nextPos =\n currentPos < 0\n ? delta > 0\n ? 0\n : enabled.length - 1\n : (currentPos + delta + enabled.length) % enabled.length;\n return enabled[nextPos].i;\n });\n },\n [filteredOptions],\n );\n\n useEffect(() => {\n if (!isOpen \|\| activeIndex < 0) return;\n const option = filteredOptions[activeIndex];\n if (!option) return;\n const el = document.getElementById(\n `${listboxId}-option-${option.value}`,\n );\n el?.scrollIntoView({ block: 'nearest' });\n }, [isOpen, activeIndex, filteredOptions, listboxId]);\n\n const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n const next = e.target.value;\n setInputDisplay(next);\n if (!isOpen) open();\n setActiveIndex(0);\n };\n\n const handleFocus = () => {\n setIsFocused(true);\n open();\n // Select-all so the next keystroke replaces the selected label (filter mode).\n if (!multiple && !isInputControlled && selectedOption) {\n requestAnimationFrame(() => {\n inputRef.current?.select();\n });\n }\n };\n\n const handleBlur = (e: FocusEvent<HTMLInputElement>) => {\n // Delay so option mousedown can run first\n const related = e.relatedTarget as Node \| null;\n if (related && rootRef.current?.contains(related)) return;\n setIsFocused(false);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (disabled) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen) open();\n else moveActive(1);\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (!isOpen) open();\n else moveActive(-1);\n break;\n case 'Home':\n if (isOpen && filteredOptions.length > 0) {\n e.preventDefault();\n setActiveIndex(\n filteredOptions.findIndex((o) => !o.disabled) >= 0\n ? filteredOptions.findIndex((o) => !o.disabled)\n : 0,\n );\n }\n break;\n case 'End':\n if (isOpen && filteredOptions.length > 0) {\n e.preventDefault();\n for (let i = filteredOptions.length - 1; i >= 0; i--) {\n if (!filteredOptions[i]?.disabled) {\n setActiveIndex(i);\n break;\n }\n }\n }\n break;\n case 'Enter':\n if (isOpen && activeIndex >= 0 && filteredOptions[activeIndex]) {\n e.preventDefault();\n selectOption(filteredOptions[activeIndex]);\n }\n break;\n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n close();\n }\n break;\n case 'Backspace':\n if (\n multiple &&\n displayInput === '' &&\n multiValue.length > 0\n ) {\n e.preventDefault();\n removeValue(multiValue[multiValue.length - 1]);\n }\n break;\n case 'Tab':\n close();\n break;\n default:\n break;\n }\n };\n\n const handleWrapperMouseDown = (e: MouseEvent<HTMLDivElement>) => {\n if (disabled) return;\n // Don't steal focus from chip remove buttons\n if ((e.target as HTMLElement).closest('button')) return;\n if (e.target !== inputRef.current) {\n e.preventDefault();\n inputRef.current?.focus();\n }\n if (!isOpen) open();\n };\n\n const hasSelection = multiple\n ? multiValue.length > 0\n : singleValue != null && singleValue !== '';\n const hasInputText = displayInput.length > 0;\n const labelFloated = isFocused \|\| isOpen \|\| hasSelection \|\| hasInputText;\n\n const activeOption =\n activeIndex >= 0 ? filteredOptions[activeIndex] : undefined;\n const activeDescendant =\n activeOption != null ? `${listboxId}-option-${activeOption.value}` : undefined;\n\n const selectedOptions = useMemo(\n () => options.filter((o) => multiValue.includes(o.value)),\n [options, multiValue],\n );\n\n const sizeClass = styles[`combobox--size-${toKebab(size)}`];\n const hasChips = multiple && selectedOptions.length > 0;\n const rootClass = [\n styles.combobox,\n sizeClass,\n invalid ? styles['combobox--invalid'] : '',\n label != null && labelFloated ? styles['combobox--label-floated'] : '',\n leadingIcon != null ? styles['combobox--has-leading-icon'] : '',\n hasChips ? styles['combobox--has-chips'] : '',\n isOpen ? styles['combobox--open'] : '',\n disabled ? styles['combobox--disabled'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass} ref={rootRef}>\n <div\n className={styles.combobox__wrapper}\n ref={anchorRef}\n >\n {label != null && (\n <label className={styles.combobox__label} htmlFor={id}>\n {label}\n </label>\n )}\n <div\n className={styles.combobox__inner}\n onMouseDown={handleWrapperMouseDown}\n >\n {leadingIcon != null && (\n <span className={styles.combobox__leadingIcon} aria-hidden>\n {leadingIcon}\n </span>\n )}\n <div className={styles.combobox__value}>\n {multiple &&\n selectedOptions.map((option) => (\n <Chip\n key={option.value}\n size={CHIP_SIZE_BY_COMBOBOX[size]}\n leadingAvatar={option.leadingAvatar}\n leadingIcon={\n option.leadingAvatar == null\n ? option.leadingVisual\n : undefined\n }\n onRemove={\n disabled\n ? undefined\n : (ev) => {\n ev.stopPropagation();\n removeValue(option.value);\n }\n }\n removeLabel={`Remove ${option.label}`}\n >\n {option.label}\n </Chip>\n ))}\n <input\n ref={setInputRef}\n id={id}\n className={styles.combobox__control}\n type=\"text\"\n role=\"combobox\"\n autoComplete=\"off\"\n spellCheck={false}\n disabled={disabled}\n placeholder={\n multiple && selectedOptions.length > 0\n ? undefined\n : placeholder\n }\n value={displayInput}\n aria-label={ariaLabel}\n aria-invalid={invalid ? true : undefined}\n aria-expanded={isOpen}\n aria-controls={listboxId}\n aria-autocomplete=\"list\"\n aria-activedescendant={activeDescendant}\n onChange={handleInputChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n />\n </div>\n <span className={styles.combobox__trailingIcon} aria-hidden>\n <Icon size=\"12\" glyph={<ChevronDownIcon />} />\n </span>\n </div>\n </div>\n\n {popupMounted &&\n renderPortal(\n <div\n ref={portalRef}\n className={[\n styles.combobox__popup,\n placement === 'above' ? styles['combobox__popup--above'] : '',\n popupVisible ? styles['combobox__popup--visible'] : '',\n ]\n .filter(Boolean)\n .join(' ')}\n style={popupStyle}\n >\n <PopoverMenu className={styles.combobox__menu}>\n <PopoverMenuScroll maxHeight={maxHeight}>\n {filteredOptions.length === 0 ? (\n <p className={styles.combobox__empty}>{emptyMessage}</p>\n ) : (\n <ul\n id={listboxId}\n className={styles.combobox__list}\n role=\"listbox\"\n aria-multiselectable={multiple \|\| undefined}\n aria-label={\n typeof label === 'string'\n ? label\n : (ariaLabel ?? 'Options')\n }\n >\n {filteredOptions.map((option, index) => {\n const selected = isSelected(option.value);\n const active = index === activeIndex;\n const leading = optionLeadingVisual(option);\n return (\n <li\n key={option.value}\n className={styles.combobox__option}\n role=\"presentation\"\n >\n <MenuItem\n id={`${listboxId}-option-${option.value}`}\n role=\"option\"\n label={option.label}\n secondaryLabel={option.secondaryLabel}\n leadingElement={leading != null}\n leadingVisual={leading}\n trailingElement={selected}\n active={active}\n disabled={option.disabled}\n aria-selected={selected}\n onMouseDown={(ev) => {\n // Prevent input blur before click handler\n ev.preventDefault();\n }}\n onMouseEnter={() => setActiveIndex(index)}\n onClick={() => selectOption(option)}\n />\n </li>\n );\n })}\n </ul>\n )}\n </PopoverMenuScroll>\n </PopoverMenu>\n </div>,\n )}\n </div>\n );\n});\n\nexport default Combobox;\n"],"names":["POPUP_MAX_HEIGHT","CHIP_SIZE_BY_COMBOBOX","defaultFilter","option","query","toSingleValue","value","toMultiValue","optionLeadingVisual","jsx","UserAvatar","Combobox","forwardRef","options","multiple","valueProp","defaultValue","onChange","inputValueProp","defaultInputValue","onInputChange","label","placeholder","leadingIcon","size","invalid","disabled","filter","emptyMessage","className","idProp","ariaLabel","portalContainer","zIndex","ref","generatedId","useId","id","listboxId","rootRef","useRef","anchorRef","inputRef","setInputRef","useCallback","node","isValueControlled","uncontrolledValue","setUncontrolledValue","useState","rawValue","singleValue","multiValue","isInputControlled","uncontrolledInput","setUncontrolledInput","isOpen","setIsOpen","isFocused","setIsFocused","activeIndex","setActiveIndex","queryOverride","setQueryOverride","selectedOption","useMemo","o","displayInput","filterQuery","setInputDisplay","next","commitValue","filteredOptions","fn","popupMounted","popupVisible","usePopoverTransition","placement","maxHeight","popupStyle","portalRef","renderPortal","useAnchoredPopupPortal","close","open","useOutsideClose","useEffect","prev","selectedIdx","isSelected","optionValue","selectOption","v","_a","removeValue","moveActive","delta","enabled","i","currentPos","nextPos","el","handleInputChange","handleFocus","handleBlur","related","handleKeyDown","handleWrapperMouseDown","hasSelection","hasInputText","labelFloated","activeOption","activeDescendant","selectedOptions","sizeClass","styles","toKebab","hasChips","rootClass","jsxs","Chip","ev","Icon","ChevronDownIcon","PopoverMenu","PopoverMenuScroll","index","selected","active","leading","MenuItem"],"mappings":"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"}
1	+ {"version":3,"file":"Combobox.cjs","sources":["../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import type {\n ChangeEvent,\n FocusEvent,\n FocusEventHandler,\n InputHTMLAttributes,\n KeyboardEvent,\n KeyboardEventHandler,\n MouseEvent,\n ReactNode,\n} from 'react';\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport PlusIcon from '@mattermost/compass-icons/components/plus';\nimport Chip from '@/components/chip/Chip';\nimport ChipGroup from '@/components/chip/ChipGroup';\nimport type { ChipSize } from '@/components/chip/Chip';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport {\n hasFieldMessage,\n isFieldInvalid,\n mergeFieldDescribedBy,\n} from '@/components/field/fieldDescribedBy';\nimport FieldMessage from '@/components/field-message/FieldMessage';\nimport type { FieldMessageTone } from '@/components/field-message/FieldMessage';\nimport MenuItem from '@/components/menu-item/MenuItem';\nimport type {\n MenuItemOwnedProps,\n MenuItemPassthroughProps,\n} from '@/components/menu-item/MenuItem';\nimport PopoverMenu, {\n PopoverMenuScroll,\n} from '@/components/popover-menu/PopoverMenu';\nimport Spinner from '@/components/spinner/Spinner';\nimport TeamAvatar from '@/components/team-avatar/TeamAvatar';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport { useAnchoredPopupPortal } from '@/hooks/use-anchored-popup-portal';\nimport { useOutsideClose } from '@/hooks/use-outside-close';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport { mergeMenuItemProps } from '@/utils/menuItemProps';\nimport type { BuiltInButtonProps, DataAttributes } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './Combobox.module.scss';\n\nexport type ComboboxSize = 'small' \| 'medium' \| 'large';\n\n// Combobox rows use `onClick`, so `onPointerUp` is left for callers.\ntype ComboboxMenuItemProps = MenuItemPassthroughProps<\n Exclude<MenuItemOwnedProps, 'onPointerUp'>\n>;\n\nexport type ComboboxOption = {\n value: string;\n /** Kept as `string`: the default filter, create-row matching, and the single-select input text all read it. /\n label: string;\n disabled?: boolean;\n /* Leading content for the list row (icon or avatar node). /\n leadingVisual?: ReactNode;\n /* Avatar for chips / list when a photo is preferred over `leadingVisual`. /\n leadingAvatar?: { src: string; alt: string };\n /\n Team avatar for the list row — a non-interactive `TeamAvatar` (`variant=\"menu\"`, 24px) with an\n * image or an initials fallback. The row's `label` names the team and `MenuItem` hides the\n * leading visual from assistive tech, so `alt` is optional. List rows only; chips don't render\n * it. With neither `src` nor `initials`, the fallback shows the first two letters of `label`.\n * `leadingVisual` and `leadingAvatar` take precedence.\n /\n leadingTeamAvatar?: { src?: string; initials?: string; alt?: string };\n /* Accepts translated nodes. /\n secondaryLabel?: ReactNode;\n /\n Extra `MenuItem` props for this row (e.g. `secondaryLabelPosition`, `tag`,\n * `trailingVisual`, `className`). Overrides the `menuItemProps` set on the\n * Combobox; the props Combobox owns (ARIA, selection, handlers) can't be set.\n /\n menuItemProps?: ComboboxMenuItemProps;\n};\n\n/\n Native input attributes `Combobox` sets or can't honor, so they're left out\n * of `ComboboxProps`. The ones it renders (`role`, `type`, `autoComplete`,\n * `aria-expanded`, …) also win at runtime over anything spread onto the input.\n /\nexport type ComboboxOwnedInputProps =\n // Value model: Combobox's own `value` / `defaultValue` / `onChange` / `multiple` / `size`.\n \| 'value'\n \| 'defaultValue'\n \| 'onChange'\n \| 'multiple'\n \| 'size'\n \| 'type'\n \| 'children'\n \| 'dangerouslySetInnerHTML'\n // Combobox semantics.\n \| 'role'\n \| 'autoComplete'\n \| 'spellCheck'\n \| 'list'\n \| 'aria-expanded'\n \| 'aria-controls'\n \| 'aria-activedescendant'\n \| 'aria-autocomplete'\n \| 'aria-busy'\n \| 'aria-haspopup'\n \| 'aria-invalid'\n \| 'aria-required'\n // First-class props with Combobox meaning (re-declared below).\n \| 'required'\n // No form participation or constraint validation yet.\n \| 'name'\n \| 'form'\n \| 'formAction'\n \| 'formEncType'\n \| 'formMethod'\n \| 'formNoValidate'\n \| 'formTarget'\n \| 'readOnly'\n \| 'maxLength'\n \| 'minLength'\n \| 'pattern'\n \| 'min'\n \| 'max'\n \| 'step'\n // Not meaningful for a text combobox.\n \| 'accept'\n \| 'alt'\n \| 'capture'\n \| 'checked'\n \| 'defaultChecked'\n \| 'height'\n \| 'width'\n \| 'src';\n\n/\n Extra native input attributes (`data-`, `aria-describedby`,\n `aria-errormessage`, `aria-labelledby`, `autoFocus`, `tabIndex`, `style`,\n * `onFocus`, …) go on the `<input role=\"combobox\">`, the element the ref\n * targets. `className` goes on the root. Attributes in\n * `ComboboxOwnedInputProps` can't be set.\n /\nexport interface ComboboxProps\n extends\n Omit<InputHTMLAttributes<HTMLInputElement>, ComboboxOwnedInputProps>,\n DataAttributes {\n options: ComboboxOption[];\n /\n `MenuItem` props applied to every option row, e.g.\n * `menuItemProps={{ secondaryLabelPosition: 'inline' }}`. A row's own\n * `menuItemProps` wins. Not applied to the create row.\n /\n menuItemProps?: ComboboxMenuItemProps;\n /* When true, selected values render as removable chips. Default: false. /\n multiple?: boolean;\n value?: string \| string[] \| null;\n defaultValue?: string \| string[] \| null;\n onChange?: (value: string \| string[] \| null) => void;\n inputValue?: string;\n defaultInputValue?: string;\n onInputChange?: (value: string) => void;\n label?: ReactNode;\n placeholder?: string;\n leadingIcon?: ReactNode;\n size?: ComboboxSize;\n /* When true, shows invalid/error styling. /\n invalid?: boolean;\n /\n Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).\n * Defaults to error tone (invalid chrome) when set without `messageTone`. It is linked to\n * the input with `aria-describedby`.\n /\n message?: ReactNode;\n /* Visual tone for `message`. Default: `error` when `message` is set. /\n messageTone?: FieldMessageTone;\n disabled?: boolean;\n /\n Marks the field required for assistive tech (`aria-required=\"true\"`).\n * No native `required`, so the browser doesn't validate; the host does.\n * Safe in `multiple` mode, where the input is empty once chips are picked.\n * Default: false.\n /\n required?: boolean;\n /\n Client-side filter. `true` (default) matches labels case-insensitively.\n * `false` shows all options (caller filters via `inputValue` / `onInputChange`).\n /\n filter?: boolean \| ((option: ComboboxOption, query: string) => boolean);\n /* Shown when there are no rows to pick from. Default: \"No results\". /\n emptyMessage?: ReactNode;\n /\n When true, the menu shows a loading row (with Spinner) in place of the\n * empty message. Set while async results are in flight.\n /\n loading?: boolean;\n /* Loading row text. Default: \"Loading…\". /\n loadingMessage?: ReactNode;\n /\n Option objects for the current value(s), used for chips and the\n * single-select label when a value is missing from `options` (e.g. an async\n * search that no longer returns it, or values preselected on load). Values\n * found in `options` resolve from there first.\n /\n selectedOptions?: ComboboxOption[];\n /\n When true, typed text that matches no option offers a create row. Created\n * values not found in `options` or `selectedOptions` display their raw value\n * as the label.\n /\n creatable?: boolean;\n /\n Called with the trimmed input when the create row is chosen. When set, the\n * host owns adding the value (`onChange` is not called). When omitted, the\n * input is committed as the value through `onChange`.\n /\n onCreateOption?: (inputValue: string) => void;\n /* Create row label. Default: `Create \"{inputValue}\"`. /\n formatCreateLabel?: (inputValue: string) => ReactNode;\n /\n Single mode: when a value is set, shows a clear button inside the control\n * that calls `onChange(null)`. Ignored with `multiple` (chips have their own\n * remove control). Default: false.\n /\n clearable?: boolean;\n /\n Opens the menu when the input receives focus, including keyboard Tab focus,\n * `autoFocus` and focus handed back by the clear button. Off by default:\n * focus alone doesn't open the menu, which then opens on pointer press,\n * typing, or ↓ / ↑. Turn it on only for hosts that need the old\n * focus-to-open behavior.\n /\n openOnFocus?: boolean;\n /\n When false, Enter on the input with the menu closed is prevented and stops\n * propagating, so it can't submit a surrounding form or reach host key\n * listeners. Default: true (Enter with the menu closed behaves like Enter in a\n * text input). Enter with the menu open is always handled by Combobox.\n /\n submitOnEnter?: boolean;\n /* Accessible name for the clear button. Default: \"Clear\". /\n clearLabel?: string;\n /* Extra attributes for the clear button (e.g. `data-testid`). /\n clearButtonProps?: BuiltInButtonProps;\n /\n Accessible name for the chip group in `multiple` mode. Default:\n * `{label} selections` when `label` is a string, otherwise \"Selected\".\n /\n selectionsLabel?: string;\n /\n Accessible name for the options list when `label` isn't a string and no\n * `aria-label` is set. Default: \"Options\".\n /\n listboxLabel?: string;\n className?: string;\n id?: string;\n 'aria-label'?: string;\n /\n Runs after Combobox's own focus handling. Focus alone doesn't open the\n * menu. Also runs when the clear button hands focus back to the input.\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Runs after Combobox's own blur handling, on every input blur — including\n * when focus moves to the clear button or a chip's remove button. Not called\n * when those buttons blur.\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Runs after Combobox's own key handling. `event.defaultPrevented` is true\n * when Combobox handled the key (arrows, Home / End while open, Enter while\n * the menu is open (picking the highlighted row, if any), Enter with the menu\n * closed when `submitOnEnter` is false, Escape while open, Backspace removing\n * a chip); those Enter and Escape presses also stop propagating. Calling\n * `preventDefault()` here doesn't stop Combobox's handling. Any `onChange`\n * the key caused has already been called, but host state read here is\n * still from before that change.\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /* Portal mount node for the menu; defaults to `document.body`. /\n portalContainer?: HTMLElement \| null;\n /* Stacking order for the portaled menu. /\n zIndex?: number;\n}\n\nconst POPUP_MAX_HEIGHT = 280;\n\nconst CHIP_SIZE_BY_COMBOBOX: Record<ComboboxSize, ChipSize> = {\n small: 'small',\n medium: 'medium',\n large: 'large',\n};\n\nconst CLEAR_ICON_SIZE: Record<ComboboxSize, IconSize> = {\n small: '12',\n medium: '16',\n large: '16',\n};\n\nfunction defaultSelectionsLabel(label: ReactNode): string {\n return typeof label === 'string' ? `${label} selections` : 'Selected';\n}\n\ntype ComboboxRow =\n \| { kind: 'option'; option: ComboboxOption }\n \| { kind: 'create'; inputValue: string };\n\nfunction defaultFormatCreateLabel(inputValue: string): ReactNode {\n return `Create \"${inputValue}\"`;\n}\n\nfunction isRowDisabled(row: ComboboxRow): boolean {\n return row.kind === 'option' && row.option.disabled === true;\n}\n\nfunction defaultFilter(option: ComboboxOption, query: string): boolean {\n if (!query) return true;\n return option.label.toLowerCase().includes(query.toLowerCase());\n}\n\nfunction toSingleValue(\n value: string \| string[] \| null \| undefined,\n): string \| null {\n if (value == null) return null;\n if (Array.isArray(value)) return value[0] ?? null;\n return value === '' ? null : value;\n}\n\nfunction toMultiValue(value: string \| string[] \| null \| undefined): string[] {\n if (value == null) return [];\n if (Array.isArray(value)) return value;\n return value === '' ? [] : [value];\n}\n\nfunction optionLeadingVisual(option: ComboboxOption): ReactNode \| undefined {\n if (option.leadingVisual != null) return option.leadingVisual;\n if (option.leadingAvatar != null) {\n return (\n <UserAvatar\n src={option.leadingAvatar.src}\n alt={option.leadingAvatar.alt}\n size=\"24\"\n />\n );\n }\n if (option.leadingTeamAvatar != null) {\n return (\n <TeamAvatar\n src={option.leadingTeamAvatar.src}\n initials={\n option.leadingTeamAvatar.initials ??\n (option.leadingTeamAvatar.src\n ? undefined\n : Array.from(option.label).slice(0, 2).join(''))\n }\n alt={option.leadingTeamAvatar.alt}\n size=\"24\"\n variant=\"menu\"\n />\n );\n }\n return undefined;\n}\n\n/\n { value: 'town-square', label: 'Town Square' }, { value: 'off-topic', label: 'Off-Topic'\n * }, { value: 'design', label: 'Design' }, { value: 'engineering', label: 'Engineering' }, {\n * value: 'releases', label: 'Releases' }, ];\n /\nconst Combobox = forwardRef<HTMLInputElement, ComboboxProps>(function Combobox(\n {\n options,\n menuItemProps,\n multiple = false,\n value: valueProp,\n defaultValue,\n onChange,\n inputValue: inputValueProp,\n defaultInputValue = '',\n onInputChange,\n label,\n placeholder,\n leadingIcon,\n size = 'medium',\n invalid = false,\n message,\n messageTone,\n disabled = false,\n filter = true,\n emptyMessage = 'No results',\n loading = false,\n loadingMessage = 'Loading…',\n selectedOptions,\n creatable = false,\n onCreateOption,\n formatCreateLabel = defaultFormatCreateLabel,\n clearable = false,\n openOnFocus = false,\n submitOnEnter = true,\n clearLabel = 'Clear',\n clearButtonProps,\n selectionsLabel,\n listboxLabel = 'Options',\n className = '',\n id: idProp,\n 'aria-label': ariaLabel,\n 'aria-describedby': describedBy,\n required = false,\n onFocus,\n onBlur,\n onKeyDown,\n portalContainer = null,\n zIndex,\n ...rest\n },\n ref,\n) {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const listboxId = `${id}-listbox`;\n\n const rootRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n const setInputRef = useCallback(\n (node: HTMLInputElement \| null) => {\n inputRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n },\n [ref],\n );\n\n const isValueControlled = valueProp !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState<\n string \| string[] \| null\n >(() => {\n if (defaultValue !== undefined) return defaultValue;\n return multiple ? [] : null;\n });\n\n const rawValue = isValueControlled ? valueProp! : uncontrolledValue;\n const singleValue = multiple ? null : toSingleValue(rawValue);\n const multiValue = useMemo(\n () => (multiple ? toMultiValue(rawValue) : []),\n [multiple, rawValue],\n );\n\n const isInputControlled = inputValueProp !== undefined;\n const [uncontrolledInput, setUncontrolledInput] = useState(defaultInputValue);\n const [isOpen, setIsOpen] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n // Hover moves the highlight without scrolling; only keyboard changes scroll the row into view.\n const activatedByPointer = useRef(false);\n const selectAllFrame = useRef<number \| null>(null);\n const hoverRow = useCallback(\n (index: number) => {\n if (index === activeIndex) return;\n activatedByPointer.current = true;\n setActiveIndex(index);\n },\n [activeIndex],\n );\n const [queryOverride, setQueryOverride] = useState<string \| null>(null);\n\n const resolveOption = useCallback(\n (optionValue: string): ComboboxOption \| undefined =>\n options.find((o) => o.value === optionValue) ??\n selectedOptions?.find((o) => o.value === optionValue) ??\n (creatable ? { value: optionValue, label: optionValue } : undefined),\n [options, selectedOptions, creatable],\n );\n\n const selectedOption = useMemo(\n () => (singleValue == null ? undefined : resolveOption(singleValue)),\n [resolveOption, singleValue],\n );\n\n // Single-select: show the selected label until the user starts typing a filter.\n // `queryOverride !== null` means the field is in filter-edit mode.\n const displayInput = (() => {\n if (isInputControlled) return inputValueProp!;\n if (multiple) return uncontrolledInput;\n if (queryOverride !== null) return queryOverride;\n return selectedOption?.label ?? uncontrolledInput;\n })();\n\n const filterQuery = (() => {\n if (isInputControlled) return inputValueProp!;\n if (multiple) return uncontrolledInput;\n if (queryOverride !== null) return queryOverride;\n return '';\n })();\n\n const setInputDisplay = useCallback(\n (next: string) => {\n if (!isInputControlled) {\n setUncontrolledInput(next);\n if (!multiple) setQueryOverride(next);\n }\n onInputChange?.(next);\n },\n [isInputControlled, multiple, onInputChange],\n );\n\n const commitValue = useCallback(\n (next: string \| string[] \| null) => {\n if (!isValueControlled) setUncontrolledValue(next);\n onChange?.(next);\n },\n [isValueControlled, onChange],\n );\n\n const filteredOptions = useMemo(() => {\n if (filter === false) return options;\n const fn = typeof filter === 'function' ? filter : defaultFilter;\n return options.filter((o) => fn(o, filterQuery));\n }, [options, filter, filterQuery]);\n\n const createInput = creatable ? filterQuery.trim() : '';\n const showCreateRow = useMemo(() => {\n if (createInput === '') return false;\n const needle = createInput.toLowerCase();\n const matches = (text: string) => text.toLowerCase() === needle;\n const knownOptions = [...options, ...(selectedOptions ?? [])];\n if (knownOptions.some((o) => matches(o.label) \|\| matches(o.value))) {\n return false;\n }\n const current = multiple\n ? multiValue\n : singleValue != null\n ? [singleValue]\n : [];\n return !current.some(matches);\n }, [\n createInput,\n options,\n selectedOptions,\n multiple,\n multiValue,\n singleValue,\n ]);\n\n const rows = useMemo<ComboboxRow[]>(\n () => [\n ...filteredOptions.map((option) => ({ kind: 'option' as const, option })),\n ...(showCreateRow\n ? [{ kind: 'create' as const, inputValue: createInput }]\n : []),\n ],\n [filteredOptions, showCreateRow, createInput],\n );\n\n const rowId = useCallback(\n (row: ComboboxRow) =>\n row.kind === 'option'\n ? `${listboxId}-option-${row.option.value}`\n : `${listboxId}-create`,\n [listboxId],\n );\n\n const { mounted: popupMounted, visible: popupVisible } =\n usePopoverTransition(isOpen);\n\n const {\n placement,\n maxHeight,\n style: popupStyle,\n portalRef,\n renderPortal,\n } = useAnchoredPopupPortal(anchorRef, popupMounted, {\n preferredHeight: POPUP_MAX_HEIGHT,\n maxHeightCap: POPUP_MAX_HEIGHT,\n portalContainer,\n zIndex,\n });\n\n const close = useCallback(() => {\n setIsOpen(false);\n setActiveIndex(-1);\n if (!multiple && !isInputControlled) {\n setQueryOverride(null);\n setUncontrolledInput('');\n }\n }, [multiple, isInputControlled]);\n\n const open = useCallback(() => {\n if (disabled) return;\n setIsOpen(true);\n }, [disabled]);\n\n useOutsideClose(rootRef, isOpen, close, portalRef);\n\n useEffect(() => {\n if (!isOpen) return;\n setActiveIndex((prev) => {\n if (rows.length === 0) return -1;\n if (prev >= 0 && prev < rows.length) return prev;\n const selectedIdx = rows.findIndex(\n (row) =>\n row.kind === 'option' &&\n (multiple\n ? multiValue.includes(row.option.value)\n : row.option.value === singleValue),\n );\n return selectedIdx >= 0 ? selectedIdx : 0;\n });\n }, [isOpen, rows, multiple, multiValue, singleValue]);\n\n const isSelected = useCallback(\n (optionValue: string) =>\n multiple ? multiValue.includes(optionValue) : singleValue === optionValue,\n [multiple, multiValue, singleValue],\n );\n\n const selectOption = useCallback(\n (option: ComboboxOption) => {\n if (option.disabled) return;\n\n if (multiple) {\n const next = multiValue.includes(option.value)\n ? multiValue.filter((v) => v !== option.value)\n : [...multiValue, option.value];\n commitValue(next);\n setInputDisplay('');\n close();\n inputRef.current?.focus();\n return;\n }\n\n commitValue(option.value);\n if (!isInputControlled) {\n setUncontrolledInput('');\n setQueryOverride(null);\n } else {\n onInputChange?.(option.label);\n }\n close();\n },\n [\n multiple,\n multiValue,\n commitValue,\n setInputDisplay,\n isInputControlled,\n onInputChange,\n close,\n ],\n );\n\n const createValue = useCallback(\n (inputValue: string) => {\n if (onCreateOption) {\n onCreateOption(inputValue);\n } else if (multiple) {\n commitValue([...multiValue, inputValue]);\n } else {\n commitValue(inputValue);\n }\n\n if (multiple) {\n setInputDisplay('');\n close();\n inputRef.current?.focus();\n return;\n }\n if (!isInputControlled) {\n setUncontrolledInput('');\n setQueryOverride(null);\n } else {\n onInputChange?.(inputValue);\n }\n close();\n },\n [\n onCreateOption,\n multiple,\n multiValue,\n commitValue,\n setInputDisplay,\n isInputControlled,\n onInputChange,\n close,\n ],\n );\n\n const selectRow = useCallback(\n (row: ComboboxRow) => {\n if (row.kind === 'create') createValue(row.inputValue);\n else selectOption(row.option);\n },\n [createValue, selectOption],\n );\n\n const clearValue = useCallback(() => {\n commitValue(null);\n if (!isInputControlled) {\n setUncontrolledInput('');\n setQueryOverride(null);\n } else {\n onInputChange?.('');\n }\n inputRef.current?.focus();\n }, [commitValue, isInputControlled, onInputChange]);\n\n const removeValue = useCallback(\n (optionValue: string) => {\n if (!multiple) return;\n commitValue(multiValue.filter((v) => v !== optionValue));\n },\n [multiple, multiValue, commitValue],\n );\n\n const moveActive = useCallback(\n (delta: number) => {\n activatedByPointer.current = false;\n const enabled = rows\n .map((row, i) => ({ row, i }))\n .filter(({ row }) => !isRowDisabled(row));\n if (enabled.length === 0) {\n setActiveIndex(-1);\n return;\n }\n setActiveIndex((prev) => {\n const currentPos = enabled.findIndex(({ i }) => i === prev);\n const nextPos =\n currentPos < 0\n ? delta > 0\n ? 0\n : enabled.length - 1\n : (currentPos + delta + enabled.length) % enabled.length;\n return enabled[nextPos].i;\n });\n },\n [rows],\n );\n\n useEffect(() => {\n if (!isOpen \|\| activeIndex < 0) return;\n if (activatedByPointer.current) {\n activatedByPointer.current = false;\n return;\n }\n const row = rows[activeIndex];\n if (!row) return;\n document.getElementById(rowId(row))?.scrollIntoView?.({ block: 'nearest' });\n }, [isOpen, activeIndex, rows, rowId]);\n\n const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n cancelSelectAll();\n const next = e.target.value;\n setInputDisplay(next);\n if (!isOpen) open();\n setActiveIndex(0);\n };\n\n const cancelSelectAll = () => {\n if (selectAllFrame.current === null) return;\n cancelAnimationFrame(selectAllFrame.current);\n selectAllFrame.current = null;\n };\n\n useEffect(() => cancelSelectAll, []);\n\n const handleFocus = () => {\n setIsFocused(true);\n if (openOnFocus) open();\n // Select-all so the next keystroke replaces the selected label (filter mode).\n // Cancelled if the user types, navigates or leaves before the frame runs.\n if (!multiple && !isInputControlled && selectedOption) {\n cancelSelectAll();\n selectAllFrame.current = requestAnimationFrame(() => {\n selectAllFrame.current = null;\n inputRef.current?.select();\n });\n }\n };\n\n const handleBlur = (e: FocusEvent<HTMLElement>) => {\n // Delay so option mousedown can run first\n const related = e.relatedTarget as Node \| null;\n if (related && rootRef.current?.contains(related)) return;\n cancelSelectAll();\n setIsFocused(false);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (disabled) return;\n cancelSelectAll();\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen) open();\n else moveActive(1);\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (!isOpen) {\n // APG: opening with ArrowUp puts the highlight on the last option.\n for (let i = rows.length - 1; i >= 0; i--) {\n if (!isRowDisabled(rows[i])) {\n setActiveIndex(i);\n break;\n }\n }\n open();\n } else moveActive(-1);\n break;\n case 'Home':\n if (isOpen && rows.length > 0) {\n e.preventDefault();\n setActiveIndex(\n Math.max(\n 0,\n rows.findIndex((row) => !isRowDisabled(row)),\n ),\n );\n }\n break;\n case 'End':\n if (isOpen && rows.length > 0) {\n e.preventDefault();\n for (let i = rows.length - 1; i >= 0; i--) {\n if (!isRowDisabled(rows[i])) {\n setActiveIndex(i);\n break;\n }\n }\n }\n break;\n case 'Enter':\n // keyCode 229 covers older Safari, which doesn't set isComposing\n if (e.nativeEvent.isComposing \|\| e.keyCode === 229) break;\n if (isOpen \|\| !submitOnEnter) {\n e.preventDefault();\n e.stopPropagation();\n }\n if (isOpen && activeIndex >= 0 && rows[activeIndex]) {\n selectRow(rows[activeIndex]);\n }\n break;\n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n e.stopPropagation();\n close();\n }\n break;\n case 'Backspace':\n if (multiple && displayInput === '' && multiValue.length > 0) {\n e.preventDefault();\n removeValue(multiValue[multiValue.length - 1]);\n }\n break;\n case 'Tab':\n close();\n break;\n default:\n break;\n }\n };\n\n const handleInputFocus = (e: FocusEvent<HTMLInputElement>) => {\n handleFocus();\n onFocus?.(e);\n };\n\n const handleInputBlur = (e: FocusEvent<HTMLInputElement>) => {\n handleBlur(e);\n onBlur?.(e);\n };\n\n const handleInputKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n handleKeyDown(e);\n onKeyDown?.(e);\n };\n\n const handleWrapperMouseDown = (e: MouseEvent<HTMLDivElement>) => {\n if (disabled) return;\n // Don't steal focus from chips, their remove buttons, or the clear button\n if ((e.target as HTMLElement).closest('[data-chip], [data-combobox-clear]'))\n return;\n if (e.target !== inputRef.current) {\n e.preventDefault();\n inputRef.current?.focus();\n }\n if (!isOpen) open();\n };\n\n const handlePopupMouseDown = (e: MouseEvent<HTMLDivElement>) => {\n // Text fields in a custom empty or loading message still need to take focus\n if (\n (e.target as HTMLElement).closest(\n 'input, textarea, select, [contenteditable=\"true\"]',\n )\n )\n return;\n e.preventDefault();\n };\n\n const hasSelection = multiple\n ? multiValue.length > 0\n : singleValue != null && singleValue !== '';\n const hasInputText = displayInput.length > 0;\n const showClearButton = clearable && !multiple && hasSelection && !disabled;\n const labelFloated = isFocused \|\| isOpen \|\| hasSelection \|\| hasInputText;\n\n const activeRow = activeIndex >= 0 ? rows[activeIndex] : undefined;\n const activeDescendant = activeRow != null ? rowId(activeRow) : undefined;\n\n // Without `selectedOptions`, values in `options` keep their list order (the\n // original behavior); with it, chips follow value order so they don't jump\n // around as async results change.\n const chipOptions = useMemo<ComboboxOption[]>(() => {\n if (!multiple) return [];\n if (selectedOptions == null) {\n const fromOptions = options.filter((o) => multiValue.includes(o.value));\n if (!creatable) return fromOptions;\n const listed = new Set(fromOptions.map((o) => o.value));\n return [\n ...fromOptions,\n ...multiValue\n .filter((v) => !listed.has(v))\n .map((v) => ({ value: v, label: v })),\n ];\n }\n return multiValue\n .map(resolveOption)\n .filter((o): o is ComboboxOption => o != null);\n }, [\n multiple,\n selectedOptions,\n options,\n multiValue,\n creatable,\n resolveOption,\n ]);\n\n const sizeClass = styles[`combobox--size-${toKebab(size)}`];\n const hasChips = multiple && chipOptions.length > 0;\n const showInvalid = isFieldInvalid(invalid, message, messageTone);\n const showMessage = hasFieldMessage(message);\n const messageId = showMessage ? `${id}-message` : undefined;\n const rootClass = [\n styles.combobox,\n sizeClass,\n showInvalid ? styles['combobox--invalid'] : '',\n label != null && labelFloated ? styles['combobox--label-floated'] : '',\n leadingIcon != null ? styles['combobox--has-leading-icon'] : '',\n hasChips ? styles['combobox--has-chips'] : '',\n isOpen ? styles['combobox--open'] : '',\n disabled ? styles['combobox--disabled'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass} ref={rootRef}>\n <div className={styles.combobox__wrapper} ref={anchorRef}>\n {label != null && (\n <label className={styles.combobox__label} htmlFor={id}>\n {label}\n </label>\n )}\n {/ eslint-disable-next-line jsx-a11y/no-static-element-interactions -- pointer convenience; the input owns keyboard interaction */}\n <div\n className={styles.combobox__inner}\n onMouseDown={handleWrapperMouseDown}\n >\n {leadingIcon != null && (\n <span className={styles['combobox__leading-icon']} aria-hidden>\n <IconSlotContext.Provider value={{ size: '16' }}>\n {leadingIcon}\n </IconSlotContext.Provider>\n </span>\n )}\n <div className={styles.combobox__value}>\n {multiple && chipOptions.length > 0 && (\n <ChipGroup\n aria-label={selectionsLabel ?? defaultSelectionsLabel(label)}\n disabled={disabled}\n >\n {chipOptions.map((option) => (\n <Chip\n key={option.value}\n size={CHIP_SIZE_BY_COMBOBOX[size]}\n leadingAvatar={option.leadingAvatar}\n leadingIcon={\n option.leadingAvatar == null\n ? option.leadingVisual\n : undefined\n }\n onRemove={\n disabled\n ? undefined\n : (ev) => {\n ev.stopPropagation();\n removeValue(option.value);\n }\n }\n >\n {option.label}\n </Chip>\n ))}\n </ChipGroup>\n )}\n <input\n {...rest}\n ref={setInputRef}\n id={id}\n className={styles.combobox__control}\n type=\"text\"\n role=\"combobox\"\n autoComplete=\"off\"\n spellCheck={false}\n disabled={disabled}\n placeholder={\n multiple && chipOptions.length > 0 ? undefined : placeholder\n }\n value={displayInput}\n aria-label={ariaLabel}\n aria-describedby={mergeFieldDescribedBy(\n describedBy,\n messageId,\n undefined,\n )}\n aria-required={required ? true : undefined}\n aria-invalid={showInvalid ? true : undefined}\n aria-expanded={isOpen}\n aria-controls={listboxId}\n aria-autocomplete=\"list\"\n aria-activedescendant={activeDescendant}\n aria-busy={loading \|\| undefined}\n onChange={handleInputChange}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onKeyDown={handleInputKeyDown}\n />\n </div>\n {showClearButton && (\n <button\n {...clearButtonProps}\n type=\"button\"\n className={mergeClassNames(\n styles.combobox__clear,\n clearButtonProps?.className,\n )}\n aria-label={clearLabel}\n data-combobox-clear=\"\"\n onClick={clearValue}\n onKeyDown={(e) => {\n // preventDefault() cancels the native click, so clear here.\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n clearValue();\n }\n clearButtonProps?.onKeyDown?.(e);\n }}\n onBlur={(e) => {\n clearButtonProps?.onBlur?.(e);\n handleBlur(e);\n }}\n >\n <Icon size={CLEAR_ICON_SIZE[size]} glyph={<CloseCircleIcon />} />\n </button>\n )}\n <span className={styles['combobox__trailing-icon']} aria-hidden>\n <Icon size=\"12\" glyph={<ChevronDownIcon />} />\n </span>\n </div>\n </div>\n\n {showMessage && (\n <FieldMessage\n id={messageId}\n className={styles['combobox__message']}\n message={message}\n tone={messageTone ?? 'error'}\n />\n )}\n\n {popupMounted &&\n renderPortal(\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- keeps focus on the input for presses anywhere in the menu\n <div\n ref={portalRef}\n className={[\n styles.combobox__popup,\n placement === 'above' ? styles['combobox__popup--above'] : '',\n popupVisible ? styles['combobox__popup--visible'] : '',\n ]\n .filter(Boolean)\n .join(' ')}\n style={popupStyle}\n onMouseDown={handlePopupMouseDown}\n >\n <PopoverMenu className={styles.combobox__menu}>\n <PopoverMenuScroll maxHeight={maxHeight}>\n {rows.length > 0 && (\n <ul\n id={listboxId}\n className={styles.combobox__list}\n role=\"listbox\"\n aria-multiselectable={multiple \|\| undefined}\n aria-label={\n typeof label === 'string'\n ? label\n : (ariaLabel ?? listboxLabel)\n }\n >\n {rows.map((row, index) => {\n const active = index === activeIndex;\n if (row.kind === 'create') {\n return (\n <li\n key={rowId(row)}\n className={styles.combobox__option}\n role=\"presentation\"\n >\n <MenuItem\n id={rowId(row)}\n role=\"option\"\n label={formatCreateLabel(row.inputValue)}\n leadingVisual={<Icon glyph={<PlusIcon />} />}\n active={active}\n aria-selected={false}\n onMouseEnter={() => hoverRow(index)}\n onClick={() => createValue(row.inputValue)}\n />\n </li>\n );\n }\n const { option } = row;\n const selected = isSelected(option.value);\n const leading = optionLeadingVisual(option);\n return (\n <li\n key={option.value}\n className={styles.combobox__option}\n role=\"presentation\"\n >\n <MenuItem\n {...mergeMenuItemProps(\n menuItemProps,\n option.menuItemProps,\n )}\n id={rowId(row)}\n role=\"option\"\n label={option.label}\n secondaryLabel={option.secondaryLabel}\n leadingElement={leading != null}\n leadingVisual={leading}\n trailingElement={selected}\n active={active}\n disabled={option.disabled}\n aria-selected={selected}\n onMouseEnter={() => hoverRow(index)}\n onClick={() => selectOption(option)}\n />\n </li>\n );\n })}\n </ul>\n )}\n {loading ? (\n <div className={styles.combobox__loading} role=\"status\">\n <Spinner size=\"16\" aria-hidden />\n <span>{loadingMessage}</span>\n </div>\n ) : (\n rows.length === 0 && (\n <p className={styles.combobox__empty}>{emptyMessage}</p>\n )\n )}\n </PopoverMenuScroll>\n </PopoverMenu>\n </div>,\n )}\n </div>\n );\n});\n\nexport default Combobox;\n"],"names":["POPUP_MAX_HEIGHT","CHIP_SIZE_BY_COMBOBOX","CLEAR_ICON_SIZE","defaultSelectionsLabel","label","defaultFormatCreateLabel","inputValue","isRowDisabled","row","defaultFilter","option","query","toSingleValue","value","toMultiValue","optionLeadingVisual","jsx","UserAvatar","TeamAvatar","Combobox","forwardRef","options","menuItemProps","multiple","valueProp","defaultValue","onChange","inputValueProp","defaultInputValue","onInputChange","placeholder","leadingIcon","size","invalid","message","messageTone","disabled","filter","emptyMessage","loading","loadingMessage","selectedOptions","creatable","onCreateOption","formatCreateLabel","clearable","openOnFocus","submitOnEnter","clearLabel","clearButtonProps","selectionsLabel","listboxLabel","className","idProp","ariaLabel","describedBy","required","onFocus","onBlur","onKeyDown","portalContainer","zIndex","rest","ref","generatedId","useId","id","listboxId","rootRef","useRef","anchorRef","inputRef","setInputRef","useCallback","node","isValueControlled","uncontrolledValue","setUncontrolledValue","useState","rawValue","singleValue","multiValue","useMemo","isInputControlled","uncontrolledInput","setUncontrolledInput","isOpen","setIsOpen","isFocused","setIsFocused","activeIndex","setActiveIndex","activatedByPointer","selectAllFrame","hoverRow","index","queryOverride","setQueryOverride","resolveOption","optionValue","o","selectedOption","displayInput","filterQuery","setInputDisplay","next","commitValue","filteredOptions","fn","createInput","showCreateRow","needle","matches","text","rows","rowId","popupMounted","popupVisible","usePopoverTransition","placement","maxHeight","popupStyle","portalRef","renderPortal","useAnchoredPopupPortal","close","open","useOutsideClose","useEffect","prev","selectedIdx","isSelected","selectOption","v","_a","createValue","selectRow","clearValue","removeValue","moveActive","delta","enabled","i","currentPos","nextPos","_b","handleInputChange","cancelSelectAll","handleFocus","handleBlur","related","handleKeyDown","handleInputFocus","handleInputBlur","handleInputKeyDown","handleWrapperMouseDown","handlePopupMouseDown","hasSelection","hasInputText","showClearButton","labelFloated","activeRow","activeDescendant","chipOptions","fromOptions","listed","sizeClass","styles","toKebab","hasChips","showInvalid","isFieldInvalid","showMessage","hasFieldMessage","messageId","rootClass","jsxs","IconSlotContext","ChipGroup","Chip","ev","mergeFieldDescribedBy","mergeClassNames","Icon","CloseCircleIcon","ChevronDownIcon","FieldMessage","PopoverMenu","PopoverMenuScroll","active","MenuItem","PlusIcon","selected","leading","mergeMenuItemProps","Spinner"],"mappings":"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"}

package/dist/components/combobox/Combobox.css ADDED Viewed

@@ -0,0 +1 @@

+ ._combobox_kv957_13{position:relative;display:flex;flex-direction:column;width:100%}._combobox__wrapper_kv957_19{position:relative;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition);cursor:text}._combobox_kv957_13:not(._combobox--disabled_kv957_27):hover:not(:focus-within) ._combobox__wrapper_kv957_19{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._combobox_kv957_13:focus-within ._combobox__wrapper_kv957_19{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._combobox--disabled_kv957_27 ._combobox__wrapper_kv957_19{opacity:.56;cursor:not-allowed}._combobox__label_kv957_37{position:absolute;left:var(--spacing-xs);top:50%;z-index:1;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.64);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:transform var(--duration-quick) var(--ease-transition),font-size var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._combobox--label-floated_kv957_58 ._combobox__label_kv957_37{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4}._combobox_kv957_13:focus-within ._combobox__label_kv957_37{color:var(--button-bg)}._combobox__message_kv957_67{margin-top:var(--spacing-xs)}._combobox__inner_kv957_70{display:flex;align-items:center;position:relative;gap:var(--spacing-xs);width:100%;box-sizing:border-box}._combobox__leading-icon_kv957_78{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64);pointer-events:none}._combobox__value_kv957_86{display:flex;flex:1 1 0;flex-wrap:wrap;align-items:center;align-self:stretch;gap:var(--spacing-xxs);min-width:0;margin:-1px 0}._combobox__control_kv957_96{flex:1 1 0;width:100%;min-width:0;align-self:stretch;margin:0;padding:0;border:0;background:transparent;font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);color:var(--center-channel-color)}._combobox__control_kv957_96::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._combobox__control_kv957_96:focus{outline:none}._combobox__control_kv957_96:disabled{cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.64)}._combobox__trailing-icon_kv957_121{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64);pointer-events:none;margin-right:var(--spacing-xxxs);transition:transform var(--duration-quick) var(--ease-transition)}._combobox--open_kv957_131 ._combobox__trailing-icon_kv957_121{transform:rotate(180deg)}._combobox__clear_kv957_134{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin:0;padding:0;border:0;border-radius:var(--radius-pill);background:transparent;color:rgba(var(--center-channel-color-rgb),.64);cursor:pointer;outline:none}._combobox__clear_kv957_134:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:3px;animation:_focus-ring-in_kv957_1 var(--duration-quick) var(--ease-transition)}@media(prefers-reduced-motion:reduce){._combobox__clear_kv957_134:focus-visible{animation:none}}@keyframes _focus-ring-in_kv957_1{0%{outline-color:transparent;outline-offset:0}}._combobox__clear_kv957_134:hover{transition:color var(--duration-quick) var(--ease-transition);color:var(--center-channel-color)}._combobox__popup_kv957_168{opacity:0;transform:scale(.9);transform-origin:top center;transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit);pointer-events:none}._combobox__popup--above_kv957_175{transform-origin:bottom center}._combobox__popup--visible_kv957_178{opacity:1;transform:scale(1);pointer-events:auto;transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}._combobox__popup_kv957_168 ._combobox__menu_kv957_184{width:100%;min-width:100%;max-width:none}._combobox__empty_kv957_189{margin:0;padding:var(--spacing-s) var(--spacing-l);font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.64)}._combobox__loading_kv957_197{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-s) var(--spacing-l);font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.72)}._combobox__list_kv957_207{margin:0;padding:0;list-style:none}._combobox__option_kv957_212{display:block;width:100%}._combobox--size-small_kv957_216 ._combobox__wrapper_kv957_19{min-height:32px}._combobox--size-small_kv957_216 ._combobox__inner_kv957_70{min-height:32px;padding:var(--spacing-xs) var(--spacing-m);gap:var(--spacing-xs)}._combobox--size-small_kv957_216._combobox--has-chips_kv957_224 ._combobox__inner_kv957_70{padding-block:var(--spacing-xxs)}._combobox--size-small_kv957_216._combobox--has-chips_kv957_224:not(._combobox--has-leading-icon_kv957_227) ._combobox__inner_kv957_70{padding-inline-start:var(--spacing-xxs)}._combobox--size-small_kv957_216 ._combobox__control_kv957_96{font-size:var(--font-size-75);line-height:var(--line-height-75)}._combobox--size-small_kv957_216 ._combobox__trailing-icon_kv957_121 svg{width:var(--icon-size-12);height:var(--icon-size-12)}._combobox--size-small_kv957_216._combobox--label-floated_kv957_58 ._combobox__label_kv957_37{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4}._combobox--size-medium_kv957_244 ._combobox__wrapper_kv957_19{min-height:40px}._combobox--size-medium_kv957_244 ._combobox__inner_kv957_70{min-height:40px;padding:var(--spacing-s) var(--spacing-l);gap:var(--spacing-s)}._combobox--size-medium_kv957_244._combobox--has-chips_kv957_224 ._combobox__inner_kv957_70{padding-block:var(--spacing-xs)}._combobox--size-medium_kv957_244._combobox--has-chips_kv957_224:not(._combobox--has-leading-icon_kv957_227) ._combobox__inner_kv957_70{padding-inline-start:var(--spacing-xs)}._combobox--size-medium_kv957_244 ._combobox__control_kv957_96{font-size:var(--font-size-100);line-height:var(--line-height-100)}._combobox--size-medium_kv957_244 ._combobox__label_kv957_37{font-size:var(--font-size-100);left:var(--spacing-m);line-height:var(--line-height-100)}._combobox--size-medium_kv957_244 ._combobox__trailing-icon_kv957_121 svg{width:var(--icon-size-16);height:var(--icon-size-16)}._combobox--size-medium_kv957_244._combobox--label-floated_kv957_58 ._combobox__label_kv957_37{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4}._combobox--size-large_kv957_277 ._combobox__wrapper_kv957_19{min-height:48px}._combobox--size-large_kv957_277 ._combobox__inner_kv957_70{min-height:48px;padding:var(--spacing-m) var(--spacing-l);gap:var(--spacing-s)}._combobox--size-large_kv957_277._combobox--has-chips_kv957_224 ._combobox__inner_kv957_70{padding-block:var(--spacing-xs)}._combobox--size-large_kv957_277._combobox--has-chips_kv957_224:not(._combobox--has-leading-icon_kv957_227) ._combobox__inner_kv957_70{padding-inline-start:var(--spacing-xs)}._combobox--size-large_kv957_277 ._combobox__control_kv957_96{font-size:var(--font-size-200);line-height:var(--line-height-200)}._combobox--size-large_kv957_277 ._combobox__label_kv957_37{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._combobox--size-large_kv957_277 ._combobox__trailing-icon_kv957_121 svg{width:var(--icon-size-16);height:var(--icon-size-16)}._combobox--size-large_kv957_277._combobox--label-floated_kv957_58 ._combobox__label_kv957_37{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4}._combobox--invalid_kv957_310 ._combobox__wrapper_kv957_19{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._combobox--invalid_kv957_310:focus-within ._combobox__wrapper_kv957_19{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._combobox--invalid_kv957_310 ._combobox__label_kv957_37{color:var(--error-text, var(--color-danger))}._combobox--invalid_kv957_310:focus-within ._combobox__label_kv957_37{color:var(--error-text, var(--color-danger))}._combobox--has-leading-icon_kv957_227 ._combobox__label_kv957_37{left:32px}._combobox--has-leading-icon_kv957_227._combobox--label-floated_kv957_58 ._combobox__label_kv957_37{left:var(--spacing-xs)}._combobox--has-leading-icon_kv957_227._combobox--size-medium_kv957_244 ._combobox__label_kv957_37,._combobox--has-leading-icon_kv957_227._combobox--size-large_kv957_277 ._combobox__label_kv957_37{left:38px}._combobox--has-leading-icon_kv957_227._combobox--size-medium_kv957_244._combobox--label-floated_kv957_58 ._combobox__label_kv957_37,._combobox--has-leading-icon_kv957_227._combobox--size-large_kv957_277._combobox--label-floated_kv957_58 ._combobox__label_kv957_37{left:var(--spacing-m)}._combobox_kv957_13:not(._combobox--label-floated_kv957_58) ._combobox__label_kv957_37~* ._combobox__control_kv957_96{color:transparent}._combobox_kv957_13:not(._combobox--label-floated_kv957_58) ._combobox__label_kv957_37~* ._combobox__control_kv957_96::placeholder{color:transparent}

package/dist/components/combobox/Combobox.d.ts CHANGED Viewed

@@ -1,7 +1,12 @@
-import { ReactNode } from 'react';
+import { FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, ReactNode } from 'react';
+import { FieldMessageTone } from '../field-message/FieldMessage';
+import { MenuItemOwnedProps, MenuItemPassthroughProps } from '../menu-item/MenuItem';
+import { BuiltInButtonProps, DataAttributes } from '../../utils/props';
 export type ComboboxSize = 'small' | 'medium' | 'large';
+type ComboboxMenuItemProps = MenuItemPassthroughProps<Exclude<MenuItemOwnedProps, 'onPointerUp'>>;
 export type ComboboxOption = {
     value: string;
+    /** Kept as `string`: the default filter, create-row matching, and the single-select input text all read it. */
     label: string;
     disabled?: boolean;
     /** Leading content for the list row (icon or avatar node). */
@@ -11,10 +16,48 @@ export type ComboboxOption = {
         src: string;
         alt: string;
     };
-    secondaryLabel?: string;
+    /**
+     * Team avatar for the list row — a non-interactive `TeamAvatar` (`variant="menu"`, 24px) with an
+     * image or an initials fallback. The row's `label` names the team and `MenuItem` hides the
+     * leading visual from assistive tech, so `alt` is optional. List rows only; chips don't render
+     * it. With neither `src` nor `initials`, the fallback shows the first two letters of `label`.
+     * `leadingVisual` and `leadingAvatar` take precedence.
+     */
+    leadingTeamAvatar?: {
+        src?: string;
+        initials?: string;
+        alt?: string;
+    };
+    /** Accepts translated nodes. */
+    secondaryLabel?: ReactNode;
+    /**
+     * Extra `MenuItem` props for this row (e.g. `secondaryLabelPosition`, `tag`,
+     * `trailingVisual`, `className`). Overrides the `menuItemProps` set on the
+     * Combobox; the props Combobox owns (ARIA, selection, handlers) can't be set.
+     */
+    menuItemProps?: ComboboxMenuItemProps;
 };
-export interface ComboboxProps {
+/**
+ * Native input attributes `Combobox` sets or can't honor, so they're left out
+ * of `ComboboxProps`. The ones it renders (`role`, `type`, `autoComplete`,
+ * `aria-expanded`, …) also win at runtime over anything spread onto the input.
+ */
+export type ComboboxOwnedInputProps = 'value' | 'defaultValue' | 'onChange' | 'multiple' | 'size' | 'type' | 'children' | 'dangerouslySetInnerHTML' | 'role' | 'autoComplete' | 'spellCheck' | 'list' | 'aria-expanded' | 'aria-controls' | 'aria-activedescendant' | 'aria-autocomplete' | 'aria-busy' | 'aria-haspopup' | 'aria-invalid' | 'aria-required' | 'required' | 'name' | 'form' | 'formAction' | 'formEncType' | 'formMethod' | 'formNoValidate' | 'formTarget' | 'readOnly' | 'maxLength' | 'minLength' | 'pattern' | 'min' | 'max' | 'step' | 'accept' | 'alt' | 'capture' | 'checked' | 'defaultChecked' | 'height' | 'width' | 'src';
+/**
+ * Extra native input attributes (`data-*`, `aria-describedby`,
+ * `aria-errormessage`, `aria-labelledby`, `autoFocus`, `tabIndex`, `style`,
+ * `onFocus`, …) go on the `<input role="combobox">`, the element the ref
+ * targets. `className` goes on the root. Attributes in
+ * `ComboboxOwnedInputProps` can't be set.
+ */
+export interface ComboboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, ComboboxOwnedInputProps>, DataAttributes {
     options: ComboboxOption[];
+    /**
+     * `MenuItem` props applied to every option row, e.g.
+     * `menuItemProps={{ secondaryLabelPosition: 'inline' }}`. A row's own
+     * `menuItemProps` wins. Not applied to the create row.
+     */
+    menuItemProps?: ComboboxMenuItemProps;
     /** When true, selected values render as removable chips. Default: false. */
     multiple?: boolean;
     value?: string | string[] | null;
@@ -27,17 +70,119 @@ export interface ComboboxProps {
     placeholder?: string;
     leadingIcon?: ReactNode;
     size?: ComboboxSize;
+    /** When true, shows invalid/error styling. */
     invalid?: boolean;
+    /**
+     * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).
+     * Defaults to error tone (invalid chrome) when set without `messageTone`. It is linked to
+     * the input with `aria-describedby`.
+     */
+    message?: ReactNode;
+    /** Visual tone for `message`. Default: `error` when `message` is set. */
+    messageTone?: FieldMessageTone;
     disabled?: boolean;
+    /**
+     * Marks the field required for assistive tech (`aria-required="true"`).
+     * No native `required`, so the browser doesn't validate; the host does.
+     * Safe in `multiple` mode, where the input is empty once chips are picked.
+     * Default: false.
+     */
+    required?: boolean;
     /**
      * Client-side filter. `true` (default) matches labels case-insensitively.
      * `false` shows all options (caller filters via `inputValue` / `onInputChange`).
      */
     filter?: boolean | ((option: ComboboxOption, query: string) => boolean);
-    emptyMessage?: string;
+    /** Shown when there are no rows to pick from. Default: "No results". */
+    emptyMessage?: ReactNode;
+    /**
+     * When true, the menu shows a loading row (with Spinner) in place of the
+     * empty message. Set while async results are in flight.
+     */
+    loading?: boolean;
+    /** Loading row text. Default: "Loading…". */
+    loadingMessage?: ReactNode;
+    /**
+     * Option objects for the current value(s), used for chips and the
+     * single-select label when a value is missing from `options` (e.g. an async
+     * search that no longer returns it, or values preselected on load). Values
+     * found in `options` resolve from there first.
+     */
+    selectedOptions?: ComboboxOption[];
+    /**
+     * When true, typed text that matches no option offers a create row. Created
+     * values not found in `options` or `selectedOptions` display their raw value
+     * as the label.
+     */
+    creatable?: boolean;
+    /**
+     * Called with the trimmed input when the create row is chosen. When set, the
+     * host owns adding the value (`onChange` is not called). When omitted, the
+     * input is committed as the value through `onChange`.
+     */
+    onCreateOption?: (inputValue: string) => void;
+    /** Create row label. Default: `Create "{inputValue}"`. */
+    formatCreateLabel?: (inputValue: string) => ReactNode;
+    /**
+     * Single mode: when a value is set, shows a clear button inside the control
+     * that calls `onChange(null)`. Ignored with `multiple` (chips have their own
+     * remove control). Default: false.
+     */
+    clearable?: boolean;
+    /**
+     * Opens the menu when the input receives focus, including keyboard Tab focus,
+     * `autoFocus` and focus handed back by the clear button. Off by default:
+     * focus alone doesn't open the menu, which then opens on pointer press,
+     * typing, or ↓ / ↑. Turn it on only for hosts that need the old
+     * focus-to-open behavior.
+     */
+    openOnFocus?: boolean;
+    /**
+     * When false, Enter on the input with the menu closed is prevented and stops
+     * propagating, so it can't submit a surrounding form or reach host key
+     * listeners. Default: true (Enter with the menu closed behaves like Enter in a
+     * text input). Enter with the menu open is always handled by Combobox.
+     */
+    submitOnEnter?: boolean;
+    /** Accessible name for the clear button. Default: "Clear". */
+    clearLabel?: string;
+    /** Extra attributes for the clear button (e.g. `data-testid`). */
+    clearButtonProps?: BuiltInButtonProps;
+    /**
+     * Accessible name for the chip group in `multiple` mode. Default:
+     * `{label} selections` when `label` is a string, otherwise "Selected".
+     */
+    selectionsLabel?: string;
+    /**
+     * Accessible name for the options list when `label` isn't a string and no
+     * `aria-label` is set. Default: "Options".
+     */
+    listboxLabel?: string;
     className?: string;
     id?: string;
     'aria-label'?: string;
+    /**
+     * Runs after Combobox's own focus handling. Focus alone doesn't open the
+     * menu. Also runs when the clear button hands focus back to the input.
+     */
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * Runs after Combobox's own blur handling, on every input blur — including
+     * when focus moves to the clear button or a chip's remove button. Not called
+     * when those buttons blur.
+     */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * Runs after Combobox's own key handling. `event.defaultPrevented` is true
+     * when Combobox handled the key (arrows, Home / End while open, Enter while
+     * the menu is open (picking the highlighted row, if any), Enter with the menu
+     * closed when `submitOnEnter` is false, Escape while open, Backspace removing
+     * a chip); those Enter and Escape presses also stop propagating. Calling
+     * `preventDefault()` here doesn't stop Combobox's handling. Any `onChange`
+     * the key caused has already been called, but host state read here is
+     * still from before that change.
+     */
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
     /** Portal mount node for the menu; defaults to `document.body`. */
     portalContainer?: HTMLElement | null;
     /** Stacking order for the portaled menu. */

package/dist/components/combobox/Combobox.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,~~EAKV~~,SAAS,EACV,MAAM,OAAO,CAAC;AAyBf,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;~~AAExD~~,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,8EAA8E;IAC9E,aAAa,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,~~cAAc~~,CAAC,EAAE,MAAM,CAAC;~~CACzB~~,CAAC;AAEF,MAAM,WAAW,aAAa;~~IAC5B~~,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IACxE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;~~AA6CD~~;;;;GAIG;AACH,QAAA,MAAM,QAAQ,~~4GAugBZ~~,CAAC;AAEH,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/Combobox.tsx"],"names":[],"mappings":"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"}