@itwin/itwinui-react/esm/core/SearchBox/SearchBox.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { PolymorphicForwardRefComponent, InputFlexContainerProps } from '../../utils/index.js';
import type { IconButtonProps } from '../Buttons/IconButton.js';
import type { IconProps } from '../Icon/Icon.js';
type SearchBoxOwnProps = {
    /**
     * Whether the searchbox is expandable.
     * @default false
     */
    expandable?: boolean;
    /**
     * SearchBox state toggle.
     */
    isExpanded?: boolean;
    /**
     * Function that is called on expanding searchbox.
     */
    onExpand?: () => void;
    /**
     * Function that is called on collapsing searchbox.
     */
    onCollapse?: () => void;
    /**
     * Input props when using default searchbox.
     */
    inputProps?: React.ComponentPropsWithoutRef<'input'>;
    /**
     * Modify size of the searchbox and it's subcomponents.
     */
    size?: 'small' | 'large';
};
/**
 * SearchBox component.
 * Can be used to implement search functionality for pages, tables and more.
 * @example
 *  <SearchBox inputProps={{ placeholder: 'Basic search' }}/>
 *
 * @example
 * <SearchBox expandable inputProps={{ placeholder: 'Expandable search' }}/>
 *
 * @example
 * <SearchBox>
 *   <SearchBox.CollapsedState />
 *   <SearchBox.ExpandedState>
 *     <SearchBox.Icon />
 *     <SearchBox.Input />
 *     <SearchBox.CollapseButton />
 *   </SearchBox.ExpandedState>
 * </SearchBox>
 */
export declare const SearchBox: PolymorphicForwardRefComponent<"div", SearchBoxOwnProps & InputFlexContainerProps> & {
    /**
     * Icon to be placed within SearchBox.
     * @default Looking glass icon
     */
    Icon: PolymorphicForwardRefComponent<"span", IconProps>;
    /**
     * Input to be placed within SearchBox
     */
    Input: PolymorphicForwardRefComponent<"input", {}>;
    /**
     * Button to be placed within SearchBox. Default has looking glass icon.
     */
    Button: PolymorphicForwardRefComponent<"button", IconButtonProps>;
    /**
     * Collapse button for expandable SearchBox. Clicking on this button will collapse SearchBox.
     */
    CollapseButton: PolymorphicForwardRefComponent<"button", IconButtonProps>;
    /**
     * Expand button for expandable SearchBox. Clicking on this will expand SearchBox.
     */
    ExpandButton: PolymorphicForwardRefComponent<"button", IconButtonProps>;
    /**
     * Subcomponent to customise expanded state of the SearchBox
     */
    ExpandedState: {
        ({ children, }: {
            children: React.ReactNode;
        }): React.JSX.Element | null;
        displayName: string;
    };
    /**
     * Subcomponent to customise collapsed state.
     */
    CollapsedState: {
        ({ children, }: {
            children?: React.ReactNode;
        }): React.JSX.Element | null;
        displayName: string;
    };
};
export {};