@nexusui/components/core/SearchBar/SearchBar.component.d.ts

These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.

import React from 'react';
import { ButtonProps } from '@mui/material/Button';
import { InputProps } from '@mui/material/Input';
export interface ISearchBar extends Omit<InputProps, 'value' | 'onChange' | 'size'> {
    /**
     * the initial value for the input field
     */
    defaultSearchExpression?: string;
    /**
     * Callback function triggered when the clear button (x) is clicked
     */
    onClear?: () => void;
    /**
     * Callback function triggered when the close button is clicked or `Esc` key is pressed
     */
    onClose?: () => void;
    /**
     * Callback function triggered when the next page button is pressed. The next button is hidden if a value is not provided.
     */
    onNext?: (newIndex: number) => void;
    /**
     * Callback function triggered when the previous page button is pressed. The previous button is hidden if a value is not provided.
     */
    onPrevious?: (newIndex: number) => void;
    /**
     * The total number of results for the search parameter. Will display as "XX of YY".
     */
    totalResults?: number;
    /**
     * The index of the current result out of the total number. Will display as "XX of YY".
     * This value is zero-indexed, but presented as a 1-indexed string, so a value of 0 will display as 1 of YY.
     */
    currentResult?: number;
    /**
     * Set to true if the search is currently still processing. This will disable the next and previous buttons.
     *
     * @default false
     */
    searchInProgress?: boolean;
    /**
     * Callback function triggered when the input value changes
     */
    onChange?: (searchText: string, event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
    /**
     * Placeholder text shown when the value of the search input is empty
     */
    placeholder?: string;
    /**
     *  (ms) If nonzero, the onChange event will be debounced to avoid exessive function calls while the user is entering text. Set to zero/false to disable debounce.
     * @default 500
     */
    debounce?: number | boolean;
    /**
     * The variant of the search button
     */
    buttonVariant?: ButtonProps['variant'];
}
export declare const SearchBar: ({ defaultSearchExpression, searchInProgress, currentResult, onClick, placeholder, onClose, onClear, onNext, onPrevious, totalResults, onChange, debounce, buttonVariant, sx, ...rest }: ISearchBar) => import("react/jsx-runtime").JSX.Element;