import React from 'react';
import mapboxgl from 'mapbox-gl';
import { SearchBoxOptions, SearchBoxSuggestionResponse, SearchBoxRetrieveResponse } from '@mapbox/search-js-core';
import { MapboxSearchBox, MapboxSearchBoxComponentOptions, Theme, PopoverOptions, MapInstance } from '@mapbox/search-js-web';
declare global {
    namespace JSX {
        interface IntrinsicElements {
            'mapbox-search-box': any;
        }
    }
}
/**
 * Methods available on a `ref` when attached to the {@link SearchBox} component.
 * @typedef SearchBoxRefType
 */
export interface SearchBoxRefType {
    /**
     * @see {@link MapboxSearchBox#focus}
     */
    focus: typeof MapboxSearchBox.prototype.focus;
    /**
     * @see {@link MapboxSearchBox#search}
     */
    search: typeof MapboxSearchBox.prototype.search;
}
/**
 * Props for the {@link SearchBox} component
 * @typedef SearchBoxProps
 */
export interface SearchBoxProps {
    /**
     * The [Mapbox access token](https://docs.mapbox.com/help/glossary/access-token/) to use for all requests.
     */
    accessToken: string;
    /**
     * Options to pass to the underlying {@link SearchBoxCore} interface.
     * @example
     * ```typescript
     * <SearchBox options={{
     *  language: 'en',
     *  country: 'US',
     * }}>
     * ```
     */
    options?: Partial<SearchBoxOptions>;
    /**
     * Options defining the behavior of web component or its underlying search functionality.
     * @example
     * ```typescript
     * <SearchBox componentOptions={{
     *  allowReverse: true,
     *  flipCoordinates: true,
     * }}>
     * ```
     */
    componentOptions?: Partial<MapboxSearchBoxComponentOptions>;
    /**
     * The {@link Theme} to use for styling the search box.
     * @example
     * ```typescript
     * <SearchBox theme={{
     *   variables: {
     *     colorPrimary: 'myBrandRed'
     *   }
     * }}>
     * ```
     */
    theme?: Theme;
    /**
     * The {@link PopoverOptions} to define popover positioning.
     * @example
     * ```typescript
     * <SearchBox popoverOptions={{
     *   placement: 'top-start',
     *   flip: true,
     *   offset: 5
     * }}>
     * ```
     */
    popoverOptions?: Partial<PopoverOptions>;
    /**
     * The input element's placeholder text. The default value may be localized if {@link SearchBoxOptions#language} is set.
     */
    placeholder?: string;
    /**
     * If specified, the map will be centered on the retrieved suggestion.
     */
    map?: MapInstance;
    /**
     * If `true`, a [Marker](https://docs.mapbox.com/mapbox-gl-js/api/#marker) will be added to the map at the location of the user-selected result using a default set of Marker options.  If the value is an object, the marker will be constructed using these options. If `false`, no marker will be added to the map. Requires that {@link SearchBoxProps#mapboxgl} also be set.
     */
    marker?: boolean | mapboxgl.MarkerOptions;
    /**
     * A [mapbox-gl](https://github.com/mapbox/mapbox-gl-js) instance to use when creating [Markers](https://docs.mapbox.com/mapbox-gl-js/api/#marker). Required if {@link SearchBoxProps#marker} is `true`.
     */
    mapboxgl?: typeof mapboxgl;
    /**
     * Value to display in the search box.
     */
    value?: string;
    /**
     * Callback for when the value changes.
     */
    onChange?: (value: string) => void;
    /**
     * Fired when the user is typing in the input and provides a list of suggestions.
     * The underlying response from {@link SearchBoxCore} is passed.
     */
    onSuggest?: (res: SearchBoxSuggestionResponse) => void;
    /**
     * Fired when {@link SearchBoxCore} has errored providing a list of suggestions.
     * The underlying error is passed.
     */
    onSuggestError?: (error: Error) => void;
    /**
     * Fired when the user has selected a suggestion.
     * The underlying response from {@link SearchBoxCore} is passed.
     */
    onRetrieve?: (res: SearchBoxRetrieveResponse) => void;
    /**
     * Fired when the user has cleared the search box.
     */
    onClear?: () => void;
    /**
     * Fired when the user has blurred the search box.
     */
    onBlur?: () => void;
    /**
     * A callback providing the opportunity to validate and/or manipulate the input text before it triggers a search, for example by using a regular expression.
     * If a truthy string value is returned, it will be passed into the underlying search API. If `null`, `undefined` or empty string  is returned, no search request will be performed.
     */
    interceptSearch?: (value: string) => string;
}
/**
 * `<SearchBox>` is a React component that provides an interactive search box,
 * powered by the Mapbox Search Box API.
 *
 * To use this element, you must have a [Mapbox access token](https://www.mapbox.com/help/create-api-access-token/).
 *
 * @function SearchBox
 * @param {SearchBoxProps} props
 * @example
 * ```typescript
 * export function Component() {
 *   const [value, setValue] = React.useState('');
 *
 *   const handleChange = (d) => {
 *     setValue(d);
 *   };
 *   return (
 *     <SearchBox
 *       options={{
 *         proximity: {
 *           lng: -122.431297,
 *           lat: 37.773972,
 *         },
 *       }}
 *       value={value}
 *       onChange={handleChange}
 *       accessToken="YOUR_MAPBOX_ACCESS_TOKEN"
 *     />
 *   );
 * }
 * ```
 */
export declare const SearchBox: React.ForwardRefExoticComponent<SearchBoxProps & React.RefAttributes<SearchBoxRefType>>;