office-ui-fabric-react/lib/components/pickers/Suggestions/SuggestionsItem.types.d.ts

Reusable React components for building experiences for Microsoft 365.

import * as React from 'react';
import { IStyle, ITheme } from '../../../Styling';
import { IRefObject, IStyleFunctionOrObject } from '../../../Utilities';
import { ISuggestionModel } from './Suggestions.types';
/**
 * SuggestionItem component.
 * {@docCategory Pickers}
 */
export interface ISuggestionsItem {
}
/**
 * Suggestion item props. Refers to the each individual suggested items rendered within Suggestions callout.
 * Type T is the type of the item that is displayed.
 * {@docCategory Pickers}
 */
export interface ISuggestionItemProps<T> {
    /**
     * Optional callback to access the ISuggestionItem interface. Use this instead of ref for accessing
     * the public methods and properties of the component.
     */
    componentRef?: IRefObject<ISuggestionsItem>;
    /** Individual suggestion object containing its properties. */
    suggestionModel: ISuggestionModel<T>;
    /** Optional renderer to override the default one for each type of picker. */
    RenderSuggestion: (item: T, suggestionItemProps: ISuggestionItemProps<T>) => JSX.Element;
    /** Callback for when the user clicks on the suggestion. */
    onClick: (ev: React.MouseEvent<HTMLButtonElement>) => void;
    /** Callback for when the item is removed from the array of suggested items. */
    onRemoveItem: (ev: React.MouseEvent<HTMLButtonElement>) => void;
    /** Optional className for the root element of the suggestion item. */
    className?: string;
    /** Unique id of the suggested item. */
    id?: string;
    /** Whether the remove button should be rendered or not. */
    showRemoveButton?: boolean;
    /** An override for the 'selected' property of the SuggestionModel. */
    isSelectedOverride?: boolean;
    /**
     * The ARIA label for the button to remove the suggestion from the list.
     */
    removeButtonAriaLabel?: string;
    /** Call to provide customized styling that will layer on top of the variant rules. */
    styles?: IStyleFunctionOrObject<ISuggestionsItemStyleProps, ISuggestionsItemStyles>;
    /** Theme provided by High-Order Component. */
    theme?: ITheme;
}
/**
 * The props needed to construct SuggestionItem styles.
 * {@docCategory Pickers}
 */
export declare type ISuggestionsItemStyleProps = Required<Pick<ISuggestionItemProps<any>, 'theme'>> & Pick<ISuggestionItemProps<any>, 'className'> & {
    /** Whether the suggestion item is selected or not. */
    suggested?: boolean;
};
/**
 * Represents the stylable areas of the SuggestionItem.
 * {@docCategory Pickers}
 */
export interface ISuggestionsItemStyles {
    /** Root element of the suggested item. */
    root: IStyle;
    /** Refers to the CommandButton holding the content of the suggested item. */
    itemButton: IStyle;
    /** Refers to the remove button in case it's rendered. */
    closeButton: IStyle;
}