@carbon/react
Version:
React components for the Carbon Design System
147 lines (146 loc) • 6.23 kB
TypeScript
/**
* Copyright IBM Corp. 2016, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import PropTypes from 'prop-types';
import { ChangeEvent, FocusEvent, ReactNode } from 'react';
import { SearchProps } from '../Search';
import { TranslateWithId } from '../../types/common';
/**
* Message ids that will be passed to translateWithId().
*/
export type TableToolbarTranslationKey = 'carbon.table.toolbar.search.label' | 'carbon.table.toolbar.search.placeholder';
type ExcludedInheritedProps = 'defaultValue' | 'labelText' | 'onBlur' | 'onChange' | 'onExpand' | 'onFocus' | 'tabIndex';
export type TableToolbarSearchHandleExpand = (event: FocusEvent<HTMLInputElement>, newValue?: boolean) => void;
export interface TableToolbarSearchProps extends Omit<SearchProps, ExcludedInheritedProps>, TranslateWithId<TableToolbarTranslationKey> {
/**
* Specifies if the search should initially render in an expanded state
*/
defaultExpanded?: boolean;
/**
* Provide an optional default value for the Search component
*/
defaultValue?: string;
/**
* Specifies if the search should expand
*/
expanded?: boolean;
/**
* Provide an optional label text for the Search component icon
*/
labelText?: ReactNode;
/**
* Provide an optional function to be called when the search input loses focus, this will be
* passed the event as the first parameter and a function to handle the expanding of the search
* input as the second
*/
onBlur?(event: FocusEvent<HTMLInputElement>, handleExpand: TableToolbarSearchHandleExpand): void;
/**
* Provide an optional hook that is called each time the input is updated
*/
onChange?: (event: '' | ChangeEvent<HTMLInputElement>, value?: string) => void;
/**
* Provide an optional hook that is called each time the input is expanded
*/
onExpand?(event: FocusEvent<HTMLInputElement>, newExpand: boolean): void;
/**
* Provide an optional function to be called when the search input gains focus, this will be
* passed the event as the first parameter and a function to handle the expanding of the search
* input as the second.
*/
onFocus?(event: FocusEvent<HTMLInputElement>, handleExpand: TableToolbarSearchHandleExpand): void;
/**
* Whether the search should be allowed to expand.
*/
persistent?: boolean;
/**
* Provide an optional className for the overall container of the Search
*/
searchContainerClass?: string;
tabIndex?: number | string;
}
declare const TableToolbarSearch: {
({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size, tabIndex, ...rest }: TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element;
propTypes: {
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* Provide an optional class name for the search container
*/
className: PropTypes.Requireable<string>;
/**
* Specifies if the search should initially render in an expanded state
*/
defaultExpanded: PropTypes.Requireable<boolean>;
/**
* Provide an optional default value for the Search component
*/
defaultValue: PropTypes.Requireable<string>;
/**
* Specifies if the search should be disabled
*/
disabled: PropTypes.Requireable<boolean>;
/**
* Specifies if the search should expand
*/
expanded: PropTypes.Requireable<boolean>;
/**
* Provide an optional id for the search container
*/
id: PropTypes.Requireable<string>;
/**
* Provide an optional label text for the Search component icon
*/
labelText: PropTypes.Requireable<string>;
/**
* Provide an optional function to be called when the search input loses focus, this will be
* passed the event as the first parameter and a function to handle the expanding of the search
* input as the second
*/
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Provide an optional hook that is called each time the input is updated
*/
onChange: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Optional callback called when the search value is cleared.
*/
onClear: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Provide an optional hook that is called each time the input is expanded
*/
onExpand: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Provide an optional function to be called when the search input gains focus, this will be
* passed the event as the first parameter and a function to handle the expanding of the search
* input as the second.
*/
onFocus: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Whether the search should be allowed to expand
*/
persistent: PropTypes.Requireable<boolean>;
/**
* Provide an optional placeholder text for the Search component
*/
placeholder: PropTypes.Requireable<string>;
/**
* Provide an optional className for the overall container of the Search
*/
searchContainerClass: PropTypes.Requireable<string>;
/**
* Specify the size of the Search
*/
size: PropTypes.Requireable<string>;
/**
* Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
*/
tabIndex: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
/**
* Provide custom text for the component for each translation id
*/
translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
};
};
export default TableToolbarSearch;