@rws-air/webcomponents
Version:
Standard Webcomponents for AIR projects
50 lines • 2.06 kB
TypeScript
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