/** * Copyright Zendesk, Inc. * * Use of this source code is governed under the Apache License, Version 2.0 * found at http://www.apache.org/licenses/LICENSE-2.0. */ import { IUseFieldReturnValue } from '@zendeskgarden/container-field'; import { HTMLProps, ReactNode, RefObject } from 'react'; export type OptionValue = string; interface ISelectedOption { value: OptionValue; label?: string; disabled?: boolean; hidden?: boolean; } export interface IOption extends ISelectedOption { selected?: boolean; } export interface IUseComboboxProps { /** Prefixes IDs for the combobox */ idPrefix?: string; /** Provides ref access to the underlying trigger element */ triggerRef: RefObject; /** Provides ref access to the underlying input element */ inputRef: RefObject; /** Provides ref access to the underlying listbox element */ listboxRef: RefObject; /** Indicates that the combobox provides autocompletion */ isAutocomplete?: boolean; /** Determines whether multiple option values can be selected */ isMultiselectable?: boolean; /** Determines whether the combobox is editable or select-only */ isEditable?: boolean; /** Indicates that the element is not interactive */ disabled?: boolean; /** Indicates the combobox has a hint */ hasHint?: boolean; /** Indicates the combobox has a message */ hasMessage?: boolean; /** * Provides an ordered list of option groups and options * * @param {OptionValue} option.value Unique option value * @param {string} option.label Optional human-readable text (defaults to `option.value`) * @param {boolean} option.selected Sets initial selection for the option * @param {boolean} option.disabled Indicates that the option is not interactive * @param {IOption[]} option.options Groups a list of options */ options: (IOption | { options: IOption[]; label?: string; })[]; /** Sets the input value in a controlled combobox */ inputValue?: string; /** Sets the selection value (or `isMultiselectable` values) in a controlled combobox */ selectionValue?: OptionValue | OptionValue[] | null; /** Determines listbox expansion in a controlled combobox */ isExpanded?: boolean; /** Determines default listbox expansion in an uncontrolled combobox */ defaultExpanded?: boolean; /** Determines listbox expansion on combobox initialization */ initialExpanded?: boolean; /** Sets the currently active option index in a controlled combobox */ activeIndex?: number; /** Sets the default active option index in an uncontrolled combobox */ defaultActiveIndex?: number; /** Sets the active option index on combobox initialization */ initialActiveIndex?: number; /** * Handles combobox state changes * * @param {string} changes.type The event type that triggered the change * @param {boolean} [changes.isExpanded] The updated listbox expansion * @param {OptionValue|OptionValue[]} [changes.selectionValue] The updated selection value(s) * @param {string} [changes.inputValue] The updated input value * @param {number} [changes.activeIndex] The updated active option index */ onChange?: (changes: { type: string; isExpanded?: boolean; selectionValue?: OptionValue | OptionValue[] | null; inputValue?: string; activeIndex?: number; }) => void; /** Sets the environment where the combobox is rendered */ environment?: Window; } export interface IUseComboboxReturnValue { isExpanded: boolean; activeValue?: OptionValue; selection: ISelectedOption | ISelectedOption[] | null; inputValue?: string; getLabelProps: IUseFieldReturnValue['getLabelProps']; getHintProps: IUseFieldReturnValue['getHintProps']; getTriggerProps: (props?: HTMLProps) => HTMLProps; getInputProps: (props?: Omit, 'role'> & { role?: 'combobox' | null; }) => HTMLProps; getTagProps: (props: Omit, 'aria-label'> & { option: ISelectedOption; 'aria-label': NonNullable['aria-label']>; }) => HTMLProps; getListboxProps: (props: Omit, 'role' | 'aria-label'> & { role?: 'listbox' | null; 'aria-label': NonNullable['aria-label']>; }) => HTMLProps; getOptGroupProps: (props: Omit, 'role' | 'aria-label'> & { role?: 'group' | null; 'aria-label': NonNullable['aria-label']>; }) => HTMLProps; getOptionProps: (props?: Omit, 'role'> & { role?: 'option' | null; option?: IOption; }) => HTMLProps; getMessageProps: IUseFieldReturnValue['getMessageProps']; removeSelection: (value?: ISelectedOption | OptionValue) => void; } export interface IComboboxContainerProps extends IUseComboboxProps { /** * Provides combobox render prop functions, state, and actions * * @param {function} [options.getLabelProps] Label props getter * @param {function} [options.getHintProps] Hint props getter * @param {function} [options.getTriggerProps] Trigger props getter * @param {function} [options.getInputProps] Input props getter * @param {function} [options.getTagProps] Tag (multiselectable value) props getter * @param {function} [options.getListboxProps] Listbox props getter * @param {function} [options.getOptGroupProps] Option group props getter * @param {function} [options.getOptionProps] Option props getter * @param {function} [options.getMessageProps] Message props getter * @param {boolean} options.isExpanded Current listbox expansion * @param {OptionValue} [options.activeValue] Current active option value * @param {object|object[]} options.selection Current selection * @param {string} [options.inputValue] Current input value * @param {function} [options.removeSelection] Remove the specified selection value or all values if unspecified */ render?: (options: { getLabelProps: IUseComboboxReturnValue['getLabelProps']; getHintProps: IUseComboboxReturnValue['getHintProps']; getTriggerProps: IUseComboboxReturnValue['getTriggerProps']; getInputProps: IUseComboboxReturnValue['getInputProps']; getTagProps: IUseComboboxReturnValue['getTagProps']; getListboxProps: IUseComboboxReturnValue['getListboxProps']; getOptGroupProps: IUseComboboxReturnValue['getOptGroupProps']; getOptionProps: IUseComboboxReturnValue['getOptionProps']; getMessageProps: IUseComboboxReturnValue['getMessageProps']; isExpanded: IUseComboboxReturnValue['isExpanded']; activeValue?: IUseComboboxReturnValue['activeValue']; selection: IUseComboboxReturnValue['selection']; inputValue?: IUseComboboxReturnValue['inputValue']; removeSelection: IUseComboboxReturnValue['removeSelection']; }) => ReactNode; /** @ignore */ children?: (options: IUseComboboxReturnValue) => ReactNode; } export {};