@navinc/base-react-components/dist/search-input.d.ts

Nav's Pattern Library

import { ComponentType, FocusEvent } from 'react';
export type SearchInputProps<T> = {
    value?: T;
    results?: T[];
    autoFocus?: boolean;
    className?: string;
    errors?: string[];
    helperText?: string;
    isLoading?: boolean;
    isInvalid?: boolean;
    label?: string;
    lede?: string;
    name?: string;
    NoResults?: ComponentType<{
        query: string;
    }>;
    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
    onChange?: (event: {
        target: {
            name?: string;
            value: T | null;
        };
    }) => void;
    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
    Result: ComponentType<{
        result: T;
    }>;
    required?: boolean;
    resultsMaxHeight?: string;
    resultToQuery?: (result: T) => string;
    search: (query: string) => void;
    shouldPositionResultsRelative?: boolean;
    touched?: boolean;
    type?: string;
    hasSpaceForErrors?: boolean;
};
declare const UnstyledSearchInput: <T>({ autoFocus, className, errors, helperText, isLoading, isInvalid, label, lede, name, NoResults, onBlur, onChange, onFocus, Result, required, results, resultsMaxHeight, resultToQuery, search, shouldPositionResultsRelative, touched, type, value, hasSpaceForErrors, ...inputProps }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
/**
All form-element components expect to be controlled components. This makes them
immediately compatible with form managers like formik or redux-form, as well as
within any stateful component.

Use the `<SearchInput />` component just as you would for any `input` type that
accepts textual input (`radio`, `checkbox` have their own respective
components). All props get passed on to the underlying `input`.

In addition to native form element attributes, all form-element components
implement these props

isInvalid: Boolean -- Indicates whether the value of the field is valid
(`false`) or invalid (`true`)

```
<SearchInput
  NoResults={({ query }) => `look bro I got your ${query}`}
  Result={({ result }) => result}
  resultToQuery={(result) => result}
  results={[]}
  value='abc'
/>
```
 *
 * @deprecated This component is deprecated and will be removed in a future release. Avoid using it in new code.
 */
export declare const SearchInput: typeof UnstyledSearchInput;
export {};