@uifabric/experiments/lib-commonjs/components/UnifiedPicker/UnifiedPicker.types.d.ts

Experimental React components for building experiences for Microsoft 365.

import * as React from 'react';
import { IRefObject } from '@uifabric/utilities';
import { IBaseFloatingSuggestionsProps } from '../FloatingSuggestionsComposite/FloatingSuggestions.types';
import { ISelectedItemsListProps } from '../SelectedItemsList/SelectedItemsList.types';
import { IFocusZoneProps, IInputProps, Autofill, IDragDropEvents } from 'office-ui-fabric-react';
export interface IUnifiedPickerProps<T> {
    /**
     * Ref of the component
     */
    componentRef?: IRefObject<any>;
    /**
     * ClassName for the picker
     */
    className?: string;
    /**
     * Component to render selected items
     * selectedItemsListProps will be passed as props to this component
     */
    onRenderSelectedItems: (props: ISelectedItemsListProps<T>) => JSX.Element;
    /**
     * Props to pass to SelectedItems component
     */
    selectedItemsListProps: ISelectedItemsListProps<T>;
    /**
     * Component to render floating suggestions
     * floatingSuggestionProps will be passed as props to this component
     */
    onRenderFloatingSuggestions: (props: IBaseFloatingSuggestionsProps<T>) => JSX.Element;
    /**
     * Props to pass to floating suggestions component
     */
    floatingSuggestionProps: IBaseFloatingSuggestionsProps<T>;
    /**
     * Current query string to show in input component
     */
    currentRenderedQuerystring?: string;
    /**
     * Callback when input query string changes
     */
    onQueryStringChange?: (query: string) => void;
    /**
     * A callback for when the user put focus on the picker
     */
    onFocus?: React.FocusEventHandler<HTMLInputElement | Autofill>;
    /**
     * A callback for when the user moves the focus away from the picker
     */
    onBlur?: React.FocusEventHandler<HTMLInputElement | Autofill>;
    /**
     * Focus zone props
     */
    focusZoneProps?: IFocusZoneProps;
    /**
     * Autofill input native props
     * @defaultvalue undefined
     */
    inputProps?: IInputProps;
    /**
     * Header component
     */
    headerComponent?: JSX.Element;
    /**
     * On paste to input
     */
    onPaste?: (pastedValue: string, selectedItemsList: T[]) => void;
    /**
     * On input value change
     */
    onInputChange?: (filter: string, composing?: boolean, resultItemsList?: T[]) => void;
    /**
     * Callback for when a key is pressed
     */
    onKeyDown?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
    /**
     * Drag drop events callback interface
     */
    dragDropEvents?: IDragDropEvents;
    /**
     * String used in drag drop to identify information for this specific control
     * Is only used when dragDropEvents is not specified (default)
     * getSerializedItems and getDeserializedItems on the selectedItemsListProps should be specified as well
     * if this is used
     */
    customClipboardType?: string;
    /**
     * If dragDropEvents is set, this property will be ignored
     * @defaultvalue true
     */
    defaultDragDropEnabled?: boolean;
    /**
     * If this property is not specified, defaultDragDropEnabled will be used
     * @defaultvalue true
     */
    autofillDragDropEnabled?: boolean;
    /**
     * Function to customize drop behavior over the autofill portion
     * If this is not set, but autofillDragDropEnabled is, the built
     * in drop behavior will be used.
     */
    onDropAutoFill?: (event?: React.DragEvent<HTMLDivElement>) => void;
    /**
     * A function used to validate if raw text entered into the well can be added
     */
    onValidateInput?: (input: string) => boolean;
}