71 lines
2.8 KiB
TypeScript
71 lines
2.8 KiB
TypeScript
|
/// <reference types="react" />
|
||
|
|
|
||
|
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
||
|
|
import type { ComponentState } from '@fluentui/react-utilities';
|
||
|
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
||
|
|
import type { InputOnChangeData } from '@fluentui/react-input';
|
||
|
|
import type { InputProps } from '@fluentui/react-input';
|
||
|
|
import type { InputSlots } from '@fluentui/react-input';
|
||
|
|
import type { InputState } from '@fluentui/react-input';
|
||
|
|
import * as React_2 from 'react';
|
||
|
|
import type { Slot } from '@fluentui/react-utilities';
|
||
|
|
import type { SlotClassNames } from '@fluentui/react-utilities';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Render the final JSX of SearchBox
|
||
|
|
*/
|
||
|
|
export declare const renderSearchBox_unstable: (state: SearchBoxState) => JSX.Element;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* SearchBox component - TODO: add more docs
|
||
|
|
*/
|
||
|
|
export declare const SearchBox: ForwardRefComponent<SearchBoxProps>;
|
||
|
|
|
||
|
|
/** Overloaded onChange event type, used to merge functionality of regular text entry and the dismiss button */
|
||
|
|
export declare type SearchBoxChangeEvent = React_2.ChangeEvent<HTMLInputElement> | React_2.MouseEvent<HTMLSpanElement>;
|
||
|
|
|
||
|
|
export declare const searchBoxClassNames: SlotClassNames<SearchBoxSlots>;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* SearchBox Props
|
||
|
|
*/
|
||
|
|
export declare type SearchBoxProps = Omit<ComponentProps<Partial<SearchBoxSlots>, 'input'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'> & Omit<InputProps, 'onChange'> & {
|
||
|
|
/**
|
||
|
|
* Custom onChange callback.
|
||
|
|
* Will be traditionally supplied with a React.ChangeEvent<HTMLInputElement> for usual character entry.
|
||
|
|
* When the dismiss button is clicked, this will be called with an event of type React.MouseEvent<HTMLSpanElement>
|
||
|
|
* and an empty string as the `value` property of the data parameter
|
||
|
|
*/
|
||
|
|
onChange?: (event: SearchBoxChangeEvent, data: InputOnChangeData) => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
export declare type SearchBoxSlots = InputSlots & {
|
||
|
|
/** Last element in the input, within the input border */
|
||
|
|
dismiss?: Slot<'span'>;
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* State used in rendering SearchBox
|
||
|
|
*/
|
||
|
|
export declare type SearchBoxState = ComponentState<SearchBoxSlots> & InputState & Required<Pick<InputState, 'size'>> & Required<Pick<SearchBoxProps, 'disabled'>> & {
|
||
|
|
focused: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Create the state required to render SearchBox.
|
||
|
|
*
|
||
|
|
* The returned state can be modified with hooks such as useSearchBoxStyles_unstable,
|
||
|
|
* before being passed to renderSearchBox_unstable.
|
||
|
|
*
|
||
|
|
* @param props - props from this instance of SearchBox
|
||
|
|
* @param ref - reference to root HTMLElement of SearchBox
|
||
|
|
*/
|
||
|
|
export declare const useSearchBox_unstable: (props: SearchBoxProps, ref: React_2.Ref<HTMLInputElement>) => SearchBoxState;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Apply styling to the SearchBox slots based on the state
|
||
|
|
*/
|
||
|
|
export declare const useSearchBoxStyles_unstable: (state: SearchBoxState) => SearchBoxState;
|
||
|
|
|
||
|
|
export { }
|