@yamada-ui/react/dist/types/components/autocomplete/use-autocomplete.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { HTMLProps, HTMLRefAttributes, PropGetter } from "../../core/components/index.types.js";
import "../../core/index.js";
import { FieldProps } from "../field/field.js";
import { Descendant, DescendantProps } from "../../hooks/use-descendants/index.js";
import { UsePopoverProps } from "../popover/use-popover.js";
import { ComboboxDescendant, ComboboxDescendantProps, ComboboxItem, ComboboxItemWithValue, UseComboboxItemProps, UseComboboxProps } from "../../hooks/use-combobox/index.js";
import "../../index.js";
import * as react66 from "react";
import { ChangeEvent, ReactNode } from "react";

//#region src/components/autocomplete/use-autocomplete.d.ts
interface AutocompleteRenderProps extends ComboboxItemWithValue {
  count: number;
  focused: boolean;
  index: number;
  separator: string;
  onClear: () => void;
  max?: number;
}
interface AutocompleteItemRender {
  (props: AutocompleteRenderProps): ReactNode;
}
interface AutocompleteFilter {
  (inputValue: string, items: ComboboxItem[], matcher: AutocompleteMatcher): ComboboxItem[];
}
interface AutocompleteMatcher {
  (input: string, target?: string): boolean;
}
interface AutocompleteContext extends Pick<UseAutocompleteReturn, "max" | "value"> {}
declare const AutocompleteContext: react66.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
interface UseAutocompleteProps<Multiple extends boolean = false> extends Omit<HTMLProps, "defaultValue" | "onChange" | "ref" | "value">, Omit<UseComboboxProps, "defaultValue" | "initialFocusValue" | "onChange" | "ref" | "value">, HTMLRefAttributes<"input">, FieldProps {
  /**
   * The `id` attribute of the input element.
   */
  id?: string;
  /**
   * The `name` attribute of the input element.
   */
  name?: string;
  /**
   * If `true`, the autocomplete will allow custom value.
   *
   * @default false
   */
  allowCustomValue?: boolean;
  /**
   * If `true`, the autocomplete will be closed when the input value changes.
   *
   * @default false
   */
  closeOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean;
  /**
   * The initial value of the input.
   */
  defaultInputValue?: string;
  /**
   * The initial value of the autocomplete.
   */
  defaultValue?: Multiple extends true ? string[] : string;
  /**
   * The message displayed when the search yields no hits.
   *
   * @default 'No results found'
   */
  emptyMessage?: ReactNode;
  /**
   * The function to filter the items.
   */
  filter?: AutocompleteFilter;
  /**
   * If `true`, the input will be focused when the clear icon is clicked.
   *
   * @default true
   */
  focusOnClear?: boolean;
  /**
   * The value of the input.
   */
  inputValue?: string;
  /**
   * If provided, generate options based on items.
   *
   * @default []
   */
  items?: ComboboxItem[];
  /**
   * The function to match the items.
   */
  matcher?: AutocompleteMatcher;
  /**
   * The maximum selectable value.
   */
  max?: number;
  /**
   * If `true`, the autocomplete will be multiple.
   *
   * @default false
   */
  multiple?: Multiple;
  /**
   * If `true`, the autocomplete will be opened when the input value changes.
   *
   * @default true
   */
  openOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean;
  /**
   * If `true`, the autocomplete will be opened when the input is focused.
   *
   * @default true
   */
  openOnFocus?: boolean;
  /**
   * The placeholder for autocomplete.
   */
  placeholder?: string;
  /**
   * The function to render the selected items.
   */
  render?: (props: AutocompleteRenderProps) => ReactNode;
  /**
   * The visual separator between each value.
   *
   * @default ','
   */
  separator?: string;
  /**
   * The value of the autocomplete.
   */
  value?: Multiple extends true ? string[] : string;
  /**
   * The callback invoked when value state changes.
   */
  onChange?: (value: Multiple extends true ? string[] : string) => void;
  /**
   * The callback invoked when input value state changes.
   */
  onInputChange?: (value: string) => void;
}
declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAutocompleteProps<Multiple>) => {
  children: ReactNode;
  descendants: {
    active: (target?: HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null | undefined, options?: FocusOptions) => void;
    count: () => number;
    destroy: () => void;
    enabledCount: () => number;
    enabledFirstValue: () => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
    enabledIndexOf: (target?: HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null | undefined) => number;
    enabledLastValue: () => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
    enabledNextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
    enabledPrevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
    enabledValue: (index: number) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
    enabledValues: () => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
    firstValue: () => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
    indexOf: (target?: HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null | undefined) => number;
    lastValue: () => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
    nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
    prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react66.RefCallback<HTMLDivElement>;
    unregister: (node?: HTMLDivElement | null | undefined) => void;
    value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
    values: () => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
  };
  inputValue: string;
  interactive: boolean;
  items: ComboboxItem[];
  max: number | undefined;
  open: boolean;
  setInputValue: react66.Dispatch<react66.SetStateAction<string>>;
  setValue: react66.Dispatch<react66.SetStateAction<Multiple extends true ? string[] : string>>;
  value: Multiple extends true ? string[] : string;
  valueMap: {
    [key: string]: ComboboxItemWithValue;
  };
  getClearIconProps: PropGetter<"div", undefined, undefined>;
  getContentProps: PropGetter<"div", undefined, undefined>;
  getFieldProps: PropGetter<"div", undefined, undefined>;
  getIconProps: PropGetter<"div", undefined, undefined>;
  getInputProps: PropGetter<"input", undefined, undefined>;
  getRootProps: PropGetter<"div", undefined, undefined>;
  getSeparatorProps: PropGetter<"div", undefined, undefined>;
  popoverProps: UsePopoverProps;
  onActiveDescendant: (descendant?: ComboboxDescendant) => void;
  onChange: (selectedValue: string) => void;
  onClose: () => void | Promise<void>;
  onInputChange: (ev: ChangeEvent<HTMLInputElement>) => void;
  onOpen: () => void | Promise<void>;
  onSelect: (value?: string, closeOnSelect?: boolean) => void;
};
type UseAutocompleteReturn = ReturnType<typeof useAutocomplete>;
interface UseAutocompleteOptionProps extends UseComboboxItemProps {}
declare const useAutocompleteOption: ({
  children,
  closeOnSelect,
  disabled,
  hidden,
  value,
  ...rest
}?: UseAutocompleteOptionProps) => {
  getIndicatorProps: PropGetter<"div", undefined, undefined>;
  getOptionProps: PropGetter<"div", undefined, undefined>;
};
type UseAutocompleteOptionReturn = ReturnType<typeof useAutocompleteOption>;
//#endregion
export { AutocompleteContext, AutocompleteFilter, AutocompleteItemRender, AutocompleteMatcher, UseAutocompleteOptionProps, UseAutocompleteOptionReturn, UseAutocompleteProps, UseAutocompleteReturn, useAutocomplete, useAutocompleteContext, useAutocompleteOption };
//# sourceMappingURL=use-autocomplete.d.ts.map