import React, { ChangeEvent, KeyboardEvent } from 'react';
import { SxProps } from '@mui/material';
export interface SearchBarProps {
    /** Whether to clear search on escape */
    cancelOnEscape?: boolean;
    /** Override or extend the styles applied to the component. */
    classes?: any;
    /** Custom top-level class */
    className?: string;
    /** Disables text field. */
    disabled?: boolean;
    /** Whenever this value is changed a clear of the search value is triggered */
    clearSearch?: boolean;
    /** Fired when the search is cancelled. */
    onCancelSearch?: () => any;
    /** Fired when the text value changes. */
    onChange?: (event: ChangeEvent<HTMLInputElement>) => any;
    /** Fired when the search icon is clicked. */
    onRequestSearch?: (event: any) => any;
    /** Fired when the search bar is focused */
    onFocus?: (event: any) => any;
    /** Fired when the focus on the search bar is lost */
    onBlur?: (event: any) => any;
    /** Fired when a key is released */
    onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => any;
    /** Sets placeholder text for the embedded text field. */
    placeholder?: string;
    /** Override the inline-styles of the root element. */
    sx?: SxProps;
    /** Override the paper element elevation */
    paperElevation?: number;
    /** Data-qa tag to apply to the search bar and input element */
    'data-qa'?: string;
}
/**
 * Constructs a search bar using pre-defined Rijkswaterstaat styling
 * @param props Props to pass to the searchbar
 * @example
 * ```jsx
 * <SearchBar
 *   data-qa='table-search-bar'
 *   placeholder='Search...'
 *   onChange={e => debouncedSearch(e.target.value)}
 *   onCancelSearch={console.log}
 *   paperElevation={2}
 * />
 * ```
 */
export declare const SearchBar: React.MemoExoticComponent<({ onFocus, onBlur, onChange, onCancelSearch, onRequestSearch, cancelOnEscape, onKeyUp, paperElevation, disabled, clearSearch, "data-qa": dataQa, placeholder, ...props }: SearchBarProps) => JSX.Element>;
//# sourceMappingURL=index.d.ts.map