import { CommunicationColors } from '@fluentui/theme'; import { ComponentsStyles } from '@fluentui/theme'; import { ComponentStyles } from '@fluentui/theme'; import { DateRangeType } from '@fluentui/date-time-utilities/lib/dateValues/dateValues'; import { DayOfWeek } from '@fluentui/date-time-utilities/lib/dateValues/dateValues'; import { DefaultSpacing } from '@fluentui/theme'; import { Depths } from '@fluentui/theme'; import { EventGroup } from '@uifabric/utilities'; import { FirstWeekOfYear } from '@fluentui/date-time-utilities/lib/dateValues/dateValues'; import { FluentTheme } from '@fluentui/theme'; import { IBaseProps } from '@uifabric/utilities'; import { IComponent } from '@uifabric/foundation'; import { IComponentAs } from '@uifabric/utilities'; import { IComponentStyles } from '@uifabric/foundation'; import { ICSSPixelUnitRule } from '@uifabric/merge-styles/lib/IRawStyleBase'; import { ICSSRule } from '@uifabric/merge-styles/lib/IRawStyleBase'; import { IFocusZone } from '@fluentui/react-focus'; import { IFocusZoneProps } from '@fluentui/react-focus'; import { IFontStyles } from '@uifabric/styling'; import { IHTMLSlot } from '@uifabric/foundation'; import { IObjectWithKey } from '@uifabric/utilities'; import { IPoint } from '@uifabric/utilities'; import { IProcessedStyleSet } from '@uifabric/styling'; import { IRawStyle } from '@uifabric/styling'; import { IRectangle } from '@uifabric/utilities'; import { IRefObject } from '@uifabric/utilities'; import { IRenderComponent } from '@uifabric/utilities'; import { IRenderFunction } from '@uifabric/utilities'; import { ISelection } from '@uifabric/utilities'; import { ISelectionOptions } from '@uifabric/utilities'; import { ISlotProp } from '@uifabric/foundation'; import { ISlottableProps } from '@uifabric/foundation'; import { IStyle } from '@uifabric/styling'; import { IStyleableComponentProps } from '@uifabric/foundation'; import { IStyleFunction } from '@uifabric/utilities'; import { IStyleFunctionOrObject } from '@uifabric/utilities'; import { ITheme } from '@uifabric/styling'; import { KeyCodes } from '@uifabric/utilities'; import { LocalizedFontFamilies } from '@fluentui/theme'; import { LocalizedFontNames } from '@fluentui/theme'; import { makeStyles } from '@fluentui/react-theme-provider'; import { mergeThemes } from '@fluentui/theme'; import { MotionAnimations } from '@fluentui/theme'; import { MotionDurations } from '@fluentui/theme'; import { MotionTimings } from '@fluentui/theme'; import { NeutralColors } from '@fluentui/theme'; import { Omit } from '@uifabric/utilities'; import { PartialTheme } from '@fluentui/theme'; import { Point } from '@uifabric/utilities'; import * as PropTypes from 'prop-types'; import * as React from 'react'; import { Rectangle } from '@uifabric/utilities'; import { Selection } from '@uifabric/utilities'; import { SELECTION_CHANGE } from '@uifabric/utilities'; import { SelectionDirection } from '@uifabric/utilities'; import { SelectionMode } from '@uifabric/utilities'; import { SharedColors } from '@fluentui/theme'; import { Target } from '@uifabric/react-hooks'; import { Theme } from '@fluentui/theme'; import { ThemeContext } from '@fluentui/react-theme-provider'; import { ThemeProvider } from '@fluentui/react-theme-provider'; import { ThemeProviderProps } from '@fluentui/react-theme-provider'; import { UseStylesOptions } from '@fluentui/react-theme-provider'; import { useTheme } from '@fluentui/react-theme-provider'; /** * {@docCategory Button} */ export declare class ActionButton extends React.Component { render(): JSX.Element; } /** * {@docCategory ActivityItem} */ export declare class ActivityItem extends React.Component { constructor(props: IActivityItemProps); render(): JSX.Element; private _onRenderIcon; private _onRenderActivityDescription; private _onRenderComments; private _onRenderTimeStamp; private _onRenderPersonaArray; private _getClassNames; } /** * Defines a type made by the union of the different values that the align-items and justify-content flexbox * properties can take. * {@docCategory Stack} */ export declare type Alignment = 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'baseline' | 'stretch'; export declare const Announced: React.FunctionComponent; /** * {@docCategory Announced} */ export declare class AnnouncedBase extends React.Component { static defaultProps: Partial; render(): JSX.Element; } /** * {@docCategory Autofill} */ export declare class Autofill extends React.Component implements IAutofill { static defaultProps: { enableAutofillOnKeyPress: number[]; }; private _inputElement; private _autoFillEnabled; private _value; private _isComposing; private _async; constructor(props: IAutofillProps); readonly cursorLocation: number | null; readonly isValueSelected: boolean; readonly value: string; readonly selectionStart: number | null; readonly selectionEnd: number | null; readonly inputElement: HTMLInputElement | null; UNSAFE_componentWillReceiveProps(nextProps: IAutofillProps): void; componentDidUpdate(): void; componentWillUnmount(): void; render(): JSX.Element; focus(): void; clear(): void; private _onCompositionStart; private _onCompositionUpdate; private _onCompositionEnd; private _onClick; private _onKeyDown; private _onInputChanged; private _onChanged; private _getCurrentInputValue; /** * Attempts to enable autofill. Whether or not autofill is enabled depends on the input value, * whether or not any text is selected, and only if the new input value is longer than the old input value. * Autofill should never be set to true if the value is composing. Once compositionEnd is called, then * it should be completed. * See https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent for more information on composition. * @param newValue - new input value * @param oldValue - old input value * @param isComposing - if true then the text is actively being composed and it has not completed. * @param isComposed - if the text is a composed text value. */ private _tryEnableAutofill; private _notifyInputChange; /** * Updates the current input value as well as getting a new display value. * @param newValue - The new value from the input */ private _updateValue; /** * Returns a string that should be used as the display value. * It evaluates this based on whether or not the suggested value starts with the input value * and whether or not autofill is enabled. * @param inputValue - the value that the input currently has. * @param suggestedDisplayValue - the possible full value */ private _getDisplayValue; private _doesTextStartWith; } /** * @deprecated do not use. * {@docCategory Autofill} */ export declare class BaseAutoFill extends Autofill { } /** * {@docCategory Button} */ export declare class BaseButton extends React.Component implements IButton { private readonly _isSplitButton; static defaultProps: Partial; private _async; private _events; private _buttonElement; private _splitButtonContainer; private _mergedRef; private _labelId; private _descriptionId; private _ariaDescriptionId; private _classNames; private _processingTouch; private _lastTouchTimeoutId; private _renderedVisibleMenu; private _menuShouldFocusOnContainer; private _menuShouldFocusOnMount; private _getMemoizedMenuButtonKeytipProps; constructor(props: IBaseButtonProps); render(): JSX.Element; componentDidMount(): void; componentDidUpdate(prevProps: IBaseButtonProps, prevState: IBaseButtonState): void; componentWillUnmount(): void; focus(): void; dismissMenu(): void; openMenu(shouldFocusOnContainer?: boolean, shouldFocusOnMount?: boolean): void; private _onRenderContent; /** * Method to help determine if the menu's component tree should * be rendered. It takes into account whether the menu is expanded, * whether it is a persisted menu and whether it has been shown to the user. */ private _shouldRenderMenu; private _onRenderIcon; private _onRenderTextContents; private _onRenderText; private _hasText; private _onRenderChildren; private _onRenderDescription; private _onRenderAriaDescription; private _onRenderMenuIcon; private _getMenuProps; private _onRenderMenu; private _onDismissMenu; private _dismissMenu; private _openMenu; private _onToggleMenu; private _onRenderSplitButtonContent; private _onSplitContainerFocusCapture; private _onSplitButtonPrimaryClick; private _onRenderSplitButtonDivider; private _onRenderSplitButtonMenuButton; private _onKeyDown; private _onKeyUp; private _onKeyPress; private _onMouseUp; private _onMouseDown; private _onClick; private _onSplitButtonContainerKeyDown; private _onMenuKeyDown; private _onTouchStart; private _onPointerDown; private _handleTouchAndPointerEvent; /** * Returns if the user hits a valid keyboard key to open the menu * @param ev - the keyboard event * @returns True if user clicks on custom trigger key if enabled or alt + down arrow if not. False otherwise. */ private _isValidMenuOpenKey; private _onMenuClick; } /** * {@docCategory ExtendedPeoplePicker} */ export declare class BaseExtendedPeoplePicker extends BaseExtendedPicker { } export declare class BaseExtendedPicker> extends React.Component> implements IBaseExtendedPicker { floatingPicker: React.RefObject>>; selectedItemsList: React.RefObject>>; protected root: React.RefObject; protected input: React.RefObject; protected selection: Selection; protected floatingPickerProps: IBaseFloatingPickerProps; protected selectedItemsListProps: IBaseSelectedItemsListProps; constructor(basePickerProps: P); readonly items: any; componentDidMount(): void; UNSAFE_componentWillReceiveProps(newProps: P): void; focus(): void; clearInput(): void; readonly inputElement: HTMLInputElement | null; readonly highlightedItems: T[]; render(): JSX.Element; protected onSelectionChange: () => void; protected canAddItems(): boolean; protected renderFloatingPicker(): JSX.Element; protected renderSelectedItemsList(): JSX.Element; protected onInputChange: (value: string, composing?: boolean | undefined) => void; protected onInputFocus: (ev: React.FocusEvent) => void; protected onInputClick: (ev: React.MouseEvent) => void; protected onBackspace: (ev: React.KeyboardEvent) => void; protected onCopy: (ev: React.ClipboardEvent) => void; protected onPaste: (ev: React.ClipboardEvent) => void; protected _onSuggestionSelected: (item: T) => void; protected _onSelectedItemsChanged: () => void; /** * The floating picker is the source of truth for if the menu has been opened or not. * * Because this isn't tracked inside the state of this component, we need to * force an update here to keep the rendered output that depends on the picker being open * in sync with the state * * Called when the suggestions is shown or closed */ private _onSuggestionsShownOrHidden; private _addProcessedItem; } /** * {@docCategory FloatingPeoplePicker} */ export declare class BaseFloatingPeoplePicker extends BaseFloatingPicker { } export declare class BaseFloatingPicker> extends React.Component implements IBaseFloatingPicker { protected selection: Selection; protected root: React.RefObject; protected suggestionStore: SuggestionsStore; protected suggestionsControl: React.RefObject>; protected SuggestionsControlOfProperType: new (props: ISuggestionsControlProps) => SuggestionsControl; protected currentPromise: PromiseLike; protected isComponentMounted: boolean; private _async; constructor(basePickerProps: P); readonly inputText: string; readonly suggestions: any[]; forceResolveSuggestion(): void; readonly currentSelectedSuggestionIndex: number; readonly isSuggestionsShown: boolean; onQueryStringChanged: (queryString: string) => void; hidePicker: () => void; showPicker: (updateValue?: boolean) => void; componentDidMount(): void; componentDidUpdate(): void; componentWillUnmount(): void; UNSAFE_componentWillReceiveProps(newProps: IBaseFloatingPickerProps): void; completeSuggestion: () => void; updateSuggestions(suggestions: T[], forceUpdate?: boolean): void; render(): JSX.Element; protected renderSuggestions(): JSX.Element | null; protected onSelectionChange(): void; protected updateValue(updatedValue: string): void; protected updateSuggestionWithZeroState(): void; protected updateSuggestionsList(suggestions: T[] | PromiseLike): void; protected onChange(item: T): void; protected onSuggestionClick: (ev: React.MouseEvent, item: T, index: number) => void; protected onSuggestionRemove: (ev: React.MouseEvent, item: T, index: number) => void; protected onKeyDown: (ev: MouseEvent) => void; private _updateActiveDescendant; private _onResolveSuggestions; private _onValidateInput; private _updateSuggestionsVisible; private _bindToInputElement; private _unbindFromInputElement; } /** * {@docCategory PeoplePicker} */ export declare class BasePeoplePicker extends BasePicker { } /** * {@docCategory SelectedPeopleList} */ export declare class BasePeopleSelectedItemsList extends BaseSelectedItemsList { } /** * {@docCategory Pickers} */ export declare class BasePicker> extends React.Component implements IBasePicker { protected root: React.RefObject; protected input: React.RefObject; protected focusZone: React.RefObject; protected suggestionElement: React.RefObject>; protected selection: Selection; protected suggestionStore: SuggestionsController; /** * @deprecated this is no longer necessary as typescript now supports generic elements */ protected SuggestionOfProperType: new (props: ISuggestionsProps) => Suggestions; protected currentPromise: PromiseLike | undefined; protected _ariaMap: IPickerAriaIds; private _styledSuggestions; private _id; private _async; static getDerivedStateFromProps(newProps: IBasePickerProps): { items: any[]; } | null; constructor(basePickerProps: P); readonly items: T[]; componentDidMount(): void; componentDidUpdate(oldProps: P, oldState: IBasePickerState): void; componentWillUnmount(): void; focus(): void; focusInput(): void; dismissSuggestions: (ev?: any) => void; completeSuggestion(forceComplete?: boolean): void; refocusSuggestions: (keyCode: number) => void; render(): JSX.Element; protected canAddItems(): boolean; protected renderSuggestions(): JSX.Element | null; protected renderItems(): JSX.Element[]; protected resetFocus(index?: number): void; protected onSuggestionSelect(): void; protected onSelectionChange(): void; protected updateSuggestions(suggestions: any[]): void; /** * Only to be called when there is nothing in the input. Checks to see if the consumer has * provided a function to resolve suggestions */ protected onEmptyInputFocus(): void; protected updateValue(updatedValue: string): void; protected updateSuggestionsList(suggestions: T[] | PromiseLike, updatedValue?: string): void; protected resolveNewValue(updatedValue: string, suggestions: T[]): void; protected onChange(items?: T[]): void; protected onInputChange: (value: string) => void; protected onSuggestionClick: (ev: React.MouseEvent, item: any, index: number) => void; protected onSuggestionRemove: (ev: React.MouseEvent, item: T, index: number) => void; protected onInputFocus: (ev: React.FocusEvent) => void; protected onInputBlur: (ev: React.FocusEvent) => void; protected onBlur: (ev: React.FocusEvent) => void; /** * Reveals suggestions any time the user clicks on the input element * without shifting focus. */ protected onClick: (ev: React.MouseEvent) => void; protected onKeyDown: (ev: React.KeyboardEvent) => void; protected onItemChange: (changedItem: T, index: number) => void; protected onGetMoreResults: () => void; protected completeSelection: (item: T) => void; protected addItemByIndex: (index: number) => void; protected addItem: (item: T) => void; protected removeItem: (item: IPickerItemProps, focusNextItem?: boolean | undefined) => void; protected removeItems: (itemsToRemove: any[]) => void; protected onBackspace(ev: React.KeyboardEvent): void; protected _shouldFocusZoneEnterInnerZone: (ev: React.KeyboardEvent) => boolean; protected getActiveDescendant(): string | undefined; protected getSuggestionsAlert(suggestionAlertClassName?: string): JSX.Element | undefined; /** * Takes in the current updated value and either resolves it with the new suggestions * or if updated value is undefined then it clears out currently suggested items */ private _updateAndResolveValue; /** * Controls what happens whenever there is an action that impacts the selected items. * If `selectedItems` is provided, this will act as a controlled component and it will not update its own state. */ private _updateSelectedItems; private _onSelectedItemsUpdated; /** * Suggestions are normally shown after the user updates text and the text * is non-empty, but also when the user clicks on the input element. * @returns True if suggestions should be shown. */ private _getShowSuggestions; private _onResolveSuggestions; private _completeGenericSuggestion; private _getTextFromItem; /** * This should be called when the user does something other than use text entry to trigger suggestions. * */ private _userTriggeredSuggestions; } export declare class BasePickerListBelow> extends BasePicker { render(): JSX.Element; protected onBackspace(ev: React.KeyboardEvent): void; } export declare class BaseSelectedItemsList> extends React.Component> implements IBaseSelectedItemsList { protected root: HTMLElement; protected selection: Selection; constructor(basePickerProps: P); readonly items: T[]; addItems: (items: T[]) => void; removeItemAt: (index: number) => void; removeItem: (item: T) => void; replaceItem: (itemToReplace: T, itemsToReplaceWith: T[]) => void; removeItems: (itemsToRemove: any[]) => void; removeSelectedItems(): void; /** * Controls what happens whenever there is an action that impacts the selected items. * If selectedItems is provided, this will act as a controlled component and will not update its own state. */ updateItems(items: T[], focusIndex?: number): void; onCopy: (ev: React.ClipboardEvent) => void; hasSelectedItems(): boolean; unselectAll(): void; highlightedItems(): T[]; UNSAFE_componentWillUpdate(newProps: P, newState: IBaseSelectedItemsListState): void; componentDidMount(): void; UNSAFE_componentWillReceiveProps(newProps: P): void; render(): any; protected renderItems: () => JSX.Element[]; protected onSelectionChanged: () => void; protected onChange(items?: T[]): void; protected onItemChange: (changedItem: T, index: number) => void; protected copyItems(items: T[]): void; private _onSelectedItemsUpdated; private _canRemoveItem; } export declare enum BaseSlots { primaryColor = 0, backgroundColor = 1, foregroundColor = 2 } export declare const Breadcrumb: React.FunctionComponent; /** * {@docCategory Breadcrumb} */ export declare class BreadcrumbBase extends React.Component { static defaultProps: IBreadcrumbProps; private _classNames; private _focusZone; constructor(props: IBreadcrumbProps); /** * Sets focus to the first breadcrumb link. */ focus(): void; render(): JSX.Element; /** * Remove the first rendered item past the overlow point and put it and the end the overflow set. */ private _onReduceData; /** * Remove the last item of the overflow set and insert the item as the start of the rendered set past the overflow * point. */ private _onGrowData; private _onRenderBreadcrumb; private _onRenderItem; private _onBreadcrumbClicked; /** * Validate incoming props * @param props - Props to validate */ private _validateProps; } export declare function buildColumns(items: any[], canResizeColumns?: boolean, onColumnClick?: (ev: React.MouseEvent, column: IColumn) => void, sortedColumnKey?: string, isSortedDescending?: boolean, groupedColumnKey?: string, isMultiline?: boolean): IColumn[]; /** * Builds a map of ID to IKeytipProps * * @param config - IKeytipConfig object * @returns Config map */ export declare function buildKeytipConfigMap(config: IKeytipConfig): IKeytipConfigMap; /** * This class is deprecated. Use the individual *Button components instead. * @deprecated Use the individual *Button components instead. * {@docCategory Button} */ export declare class Button extends React.Component { constructor(props: IButtonProps); render(): JSX.Element; } export declare const ButtonGrid: React.FunctionComponent; export declare class ButtonGridCell> extends React.Component { static defaultProps: { disabled: boolean; }; render(): JSX.Element; private _onClick; private _onMouseEnter; private _onMouseMove; private _onMouseLeave; private _onFocus; } /** * {@docCategory Button} */ export declare enum ButtonType { normal = 0, primary = 1, hero = 2, compound = 3, command = 4, icon = 5, default = 6 } export declare class Calendar extends React.Component implements ICalendar { static defaultProps: ICalendarProps; private _dayPicker; private _monthPicker; private _hasFocus; private _focusOnUpdate; constructor(props: ICalendarProps); UNSAFE_componentWillReceiveProps(nextProps: ICalendarProps): void; componentDidUpdate(): void; render(): JSX.Element; focus(): void; private _onBlur; private _onFocus; private _navigateDayPickerDay; private _navigateMonthPickerDay; private _onNavigateDayDate; private _onNavigateMonthDate; private _onSelectDate; private _onHeaderSelect; private _onGotoToday; private _onGotoTodayClick; private _onGotoTodayKeyDown; private _onDatePickerPopupKeyDown; private _handleEscKey; } export declare class Callout extends React.Component { render(): JSX.Element; } export declare const CalloutContent: React.FunctionComponent; export declare class CalloutContentBase extends React.Component { static defaultProps: { preventDismissOnLostFocus: boolean; preventDismissOnScroll: boolean; preventDismissOnResize: boolean; isBeakVisible: boolean; beakWidth: number; gapSpace: number; minPagePadding: number; directionalHint: 7; }; private _classNames; private _didSetInitialFocus; private _hostElement; private _calloutElement; private _targetWindow; private _bounds; private _positionAttempts; private _target; private _setHeightOffsetTimer; private _hasListeners; private _maxHeight; private _blockResetHeight; private _isMouseDownOnPopup; private _async; private _disposables; constructor(props: ICalloutProps); componentDidUpdate(): void; shouldComponentUpdate(newProps: ICalloutProps, newState: ICalloutState): boolean; UNSAFE_componentWillMount(): void; componentWillUnmount(): void; UNSAFE_componentWillUpdate(newProps: ICalloutProps): void; componentDidMount(): void; render(): JSX.Element | null; dismiss: (ev?: Event | React.MouseEvent | React.KeyboardEvent | undefined) => void; protected _dismissOnScroll: (ev: Event) => void; protected _dismissOnResize: (ev: Event) => void; protected _dismissOnLostFocus: (ev: Event) => void; protected _setInitialFocus: () => void; protected _onComponentDidMount: () => void; private _dismissOnClickOrScroll; private _dismissOnTargetWindowBlur; private _addListeners; private _removeListeners; private _updateAsyncPosition; private _getBeakPosition; private _updatePosition; private _getBounds; private _getMaxHeight; private _arePositionsEqual; private _comparePositions; private _setTargetWindowAndElement; private _setHeightOffsetEveryFrame; private _didPositionPropsChange; private _getTarget; private _mouseDownOnPopup; private _mouseUpOnPopup; } /** * Returns true if a list of menu items can contain a checkbox */ export declare function canAnyMenuItemsCheck(items: IContextualMenuItem[]): boolean; export declare const Check: React.FunctionComponent; export declare const CheckBase: React.FunctionComponent; export declare const Checkbox: React.FunctionComponent; export declare class CheckboxBase extends React.Component implements ICheckbox { static defaultProps: ICheckboxProps; private _checkBox; private _id; private _classNames; static getDerivedStateFromProps(nextProps: Readonly, prevState: Readonly): ICheckboxState | null; /** * Initialize a new instance of the Checkbox * @param props - Props for the component * @param context - Context or initial state for the base component. */ constructor(props: ICheckboxProps, context?: any); /** * Render the Checkbox based on passed props */ render(): JSX.Element; readonly indeterminate: boolean; readonly checked: boolean; focus(): void; private _renderContent; private _onFocus; private _onBlur; private _onChange; private _onRenderLabel; } /** * {@docCategory DetailsList} */ export declare enum CheckboxVisibility { /** Visible on hover. */ onHover = 0, /** Visible always. */ always = 1, /** Hide checkboxes. */ hidden = 2 } export declare const ChoiceGroup: React.FunctionComponent; /** * {@docCategory ChoiceGroup} */ export declare class ChoiceGroupBase extends React.Component implements IChoiceGroup { private _id; private _labelId; private _focusCallbacks; private _changeCallbacks; constructor(props: IChoiceGroupProps); /** * Gets the current checked option. */ readonly checkedOption: IChoiceGroupOption | undefined; componentDidUpdate(prevProps: IChoiceGroupProps, prevState: IChoiceGroupState): void; render(): JSX.Element; focus(): void; private _onFocus; private _onBlur; private _onChange; /** * Returns `selectedKey` if provided, or the key of the first option with the `checked` prop set. */ private _getKeyChecked; private _getOptionId; private _getOptionLabelId; } export declare const ChoiceGroupOption: React.FunctionComponent; /** Clamp a value to ensure it falls within a given range. */ export declare function clamp(value: number, max: number, min?: number): number; export declare const Coachmark: React.FunctionComponent; export declare const COACHMARK_ATTRIBUTE_NAME = "data-coachmarkid"; export declare class CoachmarkBase extends React.Component implements ICoachmark { static defaultProps: Partial; private _async; private _events; /** * The cached HTMLElement reference to the Entity Inner Host * element. */ private _entityHost; private _entityInnerHostElement; private _translateAnimationContainer; private _ariaAlertContainer; private _childrenContainer; private _positioningContainer; /** * The target element the mouse would be in * proximity to */ private _targetElementRect; constructor(props: ICoachmarkProps); private readonly _beakDirection; render(): JSX.Element; UNSAFE_componentWillReceiveProps(newProps: ICoachmarkProps): void; shouldComponentUpdate(newProps: ICoachmarkProps, newState: ICoachmarkState): boolean; componentDidUpdate(prevProps: ICoachmarkProps, prevState: ICoachmarkState): void; componentDidMount(): void; componentWillUnmount(): void; dismiss: (ev?: Event | React.MouseEvent | React.KeyboardEvent | undefined) => void; private _addListeners; private _dismissOnLostFocus; private _onKeyDown; private _onFocusHandler; private _onPositioned; private _getBounds; private _setBeakPosition; private _openCoachmark; private _addProximityHandler; private _setTargetElementRect; private _isInsideElement; } /** * {@docCategory GroupedList} */ export declare enum CollapseAllVisibility { hidden = 0, visible = 1 } declare type ColorComponent = keyof Pick; export declare const ColorPicker: React.FunctionComponent; /** * {@docCategory ColorPicker} */ export declare class ColorPickerBase extends React.Component implements IColorPicker { static defaultProps: Partial; private _textChangeHandlers; /** * Strings displayed in the UI as text field labels (these are in a separate object for convenient * indexing by short color component name). */ private _textLabels; /** Strings besides red/green/blue/alpha/hex, with defaults for all values except the deprecated `hue` */ private _strings; constructor(props: IColorPickerProps); readonly color: IColor; componentDidUpdate(prevProps: Readonly, prevState: Readonly): void; render(): JSX.Element; private _getDisplayValue; private _onSVChanged; private _onHChanged; /** Callback for when the alpha/transparency slider changes */ private _onATChanged; private _onTextChange; private _onBlur; /** * Update the displayed color and call change handlers if appropriate. * @param ev - Event if call was triggered by an event (undefined if triggered by props change) * @param newColor - Updated color */ private _updateColor; } export declare const ColorPickerGridCell: React.FunctionComponent; export declare class ColorPickerGridCellBase extends React.PureComponent { static defaultProps: Partial; private _classNames; render(): JSX.Element; /** * Render the core of a color cell * @returns - Element representing the core of the item */ private _onRenderColorOption; /** * Validate if the cell's color is white or not to apply whiteCell style * @param inputColor - The color of the current cell * @returns - Whether the cell's color is white or not. */ private _isWhiteCell; } /** * Enum to describe how a particular column header behaves. * This is used to to specify the property `IColumn.columnActionsMode`. * If `IColumn.columnActionsMode` is undefined, it's equivalent to `ColumnActionsMode.clickable`. * {@docCategory DetailsList} */ export declare enum ColumnActionsMode { /** Renders the column header as disabled. */ disabled = 0, /** Renders the column header as clickable. Default value. */ clickable = 1, /** Renders the column header as clickable and displays the dropdown chevron. */ hasDropdown = 2 } /** * Enum to describe where the column has been dropped, after starting the drag * {@docCategory DetailsList} */ export declare enum ColumnDragEndLocation { /** Drag ended outside of current list */ outside = 0, /** Drag ended within current list */ surface = 1, /** Drag ended on header */ header = 2 } export declare class ComboBox extends React.Component { static defaultProps: IComboBoxProps; private _root; /** The input aspect of the comboBox */ private _autofill; /** The wrapping div of the input and button */ private _comboBoxWrapper; /** The callout element */ private _comboBoxMenu; /** The menu item element that is currently selected */ private _selectedElement; /** The base id for the ComboBox */ private _id; /** * After a character is inserted when autocomplete is true and allowFreeform is false, * remember the task that will clear the pending string of characters. */ private _lastReadOnlyAutoCompleteChangeTimeoutId; /** Promise used when resolving the comboBox options */ private _currentPromise; /** The current visible value sent to the auto fill on render */ private _currentVisibleValue; private _classNames; private _isScrollIdle; private _hasPendingValue; private _scrollIdleTimeoutId; private _processingTouch; private _lastTouchTimeoutId; /** True if the most recent keydown event was for alt (option) or meta (command). */ private _lastKeyDownWasAltOrMeta; /** * Determines if we should be setting focus back to the input when the menu closes. * The general rule of thumb is if the menu was launched via the keyboard focus should go back * to the input, if it was dropped via the mouse focus should not be forced back to the input. */ private _focusInputAfterClose; /** Flag for when we get the first mouseMove */ private _gotMouseMove; private _processingClearPendingInfo; private _async; private _events; constructor(props: IComboBoxProps); /** * All selected options */ readonly selectedOptions: IComboBoxOption[]; componentDidMount(): void; UNSAFE_componentWillReceiveProps(newProps: IComboBoxProps): void; componentDidUpdate(prevProps: IComboBoxProps, prevState: IComboBoxState): void; componentWillUnmount(): void; render(): JSX.Element; /** * {@inheritdoc} */ focus: (shouldOpenOnFocus?: boolean | undefined, useFocusAsync?: boolean | undefined) => void; /** * Close menu callout if it is open */ dismissMenu: () => void; /** * componentWillReceiveProps handler for the auto fill component * Checks/updates the iput value to set, if needed * @param defaultVisibleValue - the defaultVisibleValue that got passed * in to the auto fill's componentWillReceiveProps * @returns - the updated value to set, if needed */ private _onUpdateValueInAutofillWillReceiveProps; private _renderComboBoxWrapper; /** * componentDidUpdate handler for the auto fill component * * @param defaultVisibleValue - the current defaultVisibleValue in the auto fill's componentDidUpdate * @param suggestedDisplayValue - the current suggestedDisplayValue in the auto fill's componentDidUpdate * @returns - should the full value of the input be selected? * True if the defaultVisibleValue equals the suggestedDisplayValue, false otherwise */ private _onShouldSelectFullInputValueInAutofillComponentDidUpdate; /** * Get the correct value to pass to the input * to show to the user based off of the current props and state * @returns the value to pass to the input */ private _getVisibleValue; private _getPendingString; /** * Returns a string that concatenates all of the selected values * for multiselect combobox. */ private _getMultiselectDisplayString; /** * Is the index within the bounds of the array? * @param options - options to check if the index is valid for * @param index - the index to check * @returns - true if the index is valid for the given options, false otherwise */ private _indexWithinBounds; /** * Handler for typing changes on the input * @param updatedValue - the newly changed value */ private _onInputChange; /** * Process the new input's new value when the comboBox * allows freeform entry * @param updatedValue - the input's newly changed value */ private _processInputChangeWithFreeform; /** * Process the new input's new value when the comboBox * does not allow freeform entry * @param updatedValue - the input's newly changed value */ private _processInputChangeWithoutFreeform; private _getFirstSelectedIndex; /** * Walk along the options starting at the index, stepping by the delta (positive or negative) * looking for the next valid selectable index (e.g. skipping headings and dividers) * @param index - the index to get the next selectable index from * @param delta - optional delta to step by when finding the next index, defaults to 0 * @returns - the next valid selectable index. If the new index is outside of the bounds, * it will snap to the edge of the options array. If delta == 0 and the given index is not selectable */ private _getNextSelectableIndex; /** * Set the selected index. Note, this is * the "real" selected index, not the pending selected index * @param index - the index to set (or the index to set from if a search direction is provided) * @param searchDirection - the direction to search along the options from the given index */ private _setSelectedIndex; /** * Focus (and select) the content of the input * and set the focused state */ private _onFocus; /** * Callback issued when the options should be resolved, if they have been updated or * if they need to be passed in the first time. This only does work if an onResolveOptions * callback was passed in */ private _onResolveOptions; /** * OnBlur handler. Set the focused state to false * and submit any pending value */ private _onBlur; /** * Submit a pending value if there is one */ private _submitPendingValue; private _onRenderContainer; private _onCalloutLayerMounted; private _onLayerMounted; private _onRenderLabel; private _onRenderList; private _onRenderItem; private _onRenderLowerContent; private _onRenderUpperContent; private _renderSeparator; private _renderHeader; private _renderOption; /** * If we are coming from a mouseOut: * there is no visible selected option. * * Else if We are hovering over an item: * that gets the selected look. * * Else: * Use the current valid pending index if it exists OR * we do not have a valid index and we currently have a pending input value, * otherwise use the selected index * */ private _isOptionSelected; private _isOptionChecked; /** * Gets the pending selected index taking into account hover, valueValidIndex, and selectedIndex * @param includeCurrentPendingValue - Should we include the currentPendingValue when * finding the index */ private _getPendingSelectedIndex; /** * Mouse clicks to headers, dividers and scrollbar should not make input lose focus */ private _onCalloutMouseDown; /** * Scroll handler for the callout to make sure the mouse events * for updating focus are not interacting during scroll */ private _onScroll; /** * Scroll the selected element into view */ private _scrollIntoView; private _onRenderOptionContent; /** * Click handler for the menu items * to select the item and also close the menu * @param index - the index of the item that was clicked */ private _onItemClick; /** * Handles dismissing (cancelling) the menu */ private _onDismiss; /** * Get the indices of the options that are marked as selected * @param options - the comboBox options * @param selectedKeys - the known selected keys to find * @returns - an array of the indices of the selected options, empty array if nothing is selected */ private _getSelectedIndices; /** * Reset the selected index by clearing the * input (of any pending text), clearing the pending state, * and setting the suggested display value to the last * selected state text */ private _resetSelectedIndex; /** * Clears the pending info state */ private _clearPendingInfo; private _onAfterClearPendingInfo; /** * Set the pending info * @param currentPendingValue - new pending value to set * @param currentPendingValueValidIndex - new pending value index to set * @param suggestedDisplayValue - new suggest display value to set */ private _setPendingInfo; /** * Set the pending info from the given index * @param index - the index to set the pending info from */ private _setPendingInfoFromIndex; /** * Sets the pending info for the comboBox * @param index - the index to search from * @param searchDirection - the direction to search */ private _setPendingInfoFromIndexAndDirection; private _notifyPendingValueChanged; /** * Sets the isOpen state and updates focusInputAfterClose */ private _setOpenStateAndFocusOnClose; /** * Handle keydown on the input * @param ev - The keyboard event that was fired */ private _onInputKeyDown; /** * Returns true if the key for the event is alt (Mac option) or meta (Mac command). */ private _isAltOrMeta; /** * Handle keyup on the input * @param ev - the keyboard event that was fired */ private _onInputKeyUp; private _onOptionMouseEnter; private _onOptionMouseMove; private _onOptionMouseLeave; private _shouldIgnoreMouseEvent; /** * Handle dismissing the menu and * eating the required key event when disabled * @param ev - the keyboard event that was fired */ private _handleInputWhenDisabled; /** * Click handler for the button of the comboBox * and the input when not allowing freeform. This * toggles the expand/collapse state of the comboBox (if enbled) */ private _onComboBoxClick; /** * Click handler for the autofill. */ private _onAutofillClick; private _onTouchStart; private _onPointerDown; private _handleTouchAndPointerEvent; /** * Get the styles for the current option. * @param item - Item props for the current option */ private _getCaretButtonStyles; /** * Get the styles for the current option. * @param item - Item props for the current option */ private _getCurrentOptionStyles; /** * Get the aria-activedescendant value for the comboxbox. * @returns the id of the current focused combo item, otherwise the id of the currently selected element, * null otherwise */ private _getAriaActiveDescendantValue; /** * Get the aria autocomplete value for the Combobox * @returns 'inline' if auto-complete automatically dynamic, 'both' if we have a list of possible values to pick from * and can dynamically populate input, and 'none' if auto-complete is not enabled as we can't give user inputs. */ private _getAriaAutoCompleteValue; private _isPendingOption; /** * Given default selected key(s) and selected key(s), return the selected keys(s). * When default selected key(s) are available, they take precedence and return them instead of selected key(s). * * @returns No matter what specific types the input parameters are, always return an array of * either strings or numbers instead of premitive type. This normlization makes caller's logic easier. */ private _buildDefaultSelectedKeys; private _buildSelectedKeys; private _getPreviewText; private _normalizeToString; /** * Returns true if the component has some kind of focus. If it's either focusing or if it's focused */ private _hasFocus; } export declare const CommandBar: React.FunctionComponent; export declare class CommandBarBase extends React.Component implements ICommandBar { static defaultProps: ICommandBarProps; private _overflowSet; private _resizeGroup; private _classNames; constructor(props: ICommandBarProps); render(): JSX.Element; focus(): void; remeasure(): void; private _onRenderData; private _onRenderItem; private _commandButton; private _onButtonClick; private _onRenderOverflowButton; private _computeCacheKey; private _onReduceData; private _onGrowData; } /** * {@docCategory Button} */ export declare class CommandBarButton extends React.Component { render(): JSX.Element; } /** * {@docCategory Button} */ export declare const CommandButton: typeof ActionButton; export { CommunicationColors } export declare const CompactPeoplePicker: React.FunctionComponent; /** * Compact layout. It uses personas without secondary text when displaying search results. * {@docCategory PeoplePicker} */ export declare class CompactPeoplePickerBase extends BasePeoplePicker { /** Default props for CompactPeoplePicker. */ static defaultProps: { onRenderItem: (props: IPeoplePickerItemSelectedProps) => JSX.Element; onRenderSuggestionsItem: (personaProps: IPersonaProps, suggestionsProps?: IBasePickerSuggestionsProps | undefined) => JSX.Element; createGenericItem: typeof createGenericItem; }; } export { ComponentsStyles } export { ComponentStyles } /** * {@docCategory Button} */ export declare class CompoundButton extends React.Component { render(): JSX.Element; } /** * {@docCategory DetailsList} */ export declare enum ConstrainMode { /** Lets the content grow which allows the page to manage scrolling. */ unconstrained = 0, /** Constrains the list to the given layout space. */ horizontalConstrained = 1 } /** * Constructs a keytip from an IKeytipConfigItem and puts it in the configMap * * @param configMap - IKeytipConfigMap to store the keytip in * @param parentSequence - string of the parent keytip * @param keytip - IKeytipConfigItem data */ export declare function constructKeytip(configMap: IKeytipConfigMap, parentSequence: string[], keytip: IKeytipConfigItem): void; /** * ContextualMenu description */ export declare const ContextualMenu: React.FunctionComponent; export declare class ContextualMenuBase extends React.Component { static defaultProps: IContextualMenuProps; private _async; private _events; private _id; private _host; private _previousActiveElement; private _enterTimerId; private _targetWindow; private _target; private _isScrollIdle; private _scrollIdleTimeoutId; /** True if the most recent keydown event was for alt (option) or meta (command). */ private _lastKeyDownWasAltOrMeta; private _shouldUpdateFocusOnMouseEvent; private _gotMouseMove; private _mounted; private _focusingPreviousElement; private _adjustedFocusZoneProps; private _classNames; constructor(props: IContextualMenuProps); dismiss: (ev?: any, dismissAll?: boolean | undefined) => void; shouldComponentUpdate(newProps: IContextualMenuProps, newState: IContextualMenuState): boolean; UNSAFE_componentWillUpdate(newProps: IContextualMenuProps): void; UNSAFE_componentWillMount(): void; componentDidMount(): void; componentWillUnmount(): void; render(): JSX.Element | null; /** * Return whether the contextual menu is hidden. * Undefined value for hidden is equivalent to hidden being false. * @param props - Props for the component */ private _isHidden; private _onMenuOpened; private _onMenuClosed; private _tryFocusPreviousActiveElement; /** * Gets the focusZoneDirection by using the arrowDirection if specified, * the direction specificed in the focusZoneProps, or defaults to FocusZoneDirection.vertical */ private _getFocusZoneDirection; private _onRenderSubMenu; private _onRenderMenuList; /** * !!!IMPORTANT!!! Avoid mutating `item: IContextualMenuItem` argument. It will * cause the menu items to always re-render because the component update is based on shallow comparison. */ private _renderMenuItem; private _defaultMenuItemRenderer; private _renderSectionItem; private _renderListItem; private _renderSeparator; private _renderNormalItem; private _renderHeaderMenuItem; private _renderAnchorMenuItem; private _renderButtonItem; private _renderSplitButton; private _onKeyDown; private _shouldHandleKeyDown; private _onMenuFocusCapture; private _onKeyUp; /** * We close the menu on key up only if ALL of the following are true: * - Most recent key down was alt or meta (command) * - The alt/meta key down was NOT followed by some other key (such as down/up arrow to * expand/collapse the menu) * - We're not on a Mac (or iOS) * * This is because on Windows, pressing alt moves focus to the application menu bar or similar, * closing any open context menus. There is not a similar behavior on Macs. */ private _shouldHandleKeyUp; /** * Returns true if the key for the event is alt (Mac option) or meta (Mac command). */ private _isAltOrMeta; /** * Calls `shouldHandleKey` to determine whether the keyboard event should be handled; * if so, stops event propagation and dismisses menu(s). * @param ev - The keyboard event. * @param shouldHandleKey - Returns whether we should handle this keyboard event. * @param dismissAllMenus - If true, dismiss all menus. Otherwise, dismiss only the current menu. * Only does anything if `shouldHandleKey` returns true. * @returns Whether the event was handled. */ private _keyHandler; /** * Checks if the submenu should be closed */ private _shouldCloseSubMenu; private _onMenuKeyDown; /** * Scroll handler for the callout to make sure the mouse events * for updating focus are not interacting during scroll */ private _onScroll; private _onItemMouseEnterBase; private _onItemMouseMoveBase; private _shouldIgnoreMouseEvent; private _onMouseItemLeave; /** * Handles updating focus when mouseEnter or mouseMove fire. * As part of updating focus, This function will also update * the expand/collapse state accordingly. */ private _updateFocusOnMouseEvent; private _onItemMouseDown; private _onItemClick; private _onItemClickBase; private _onAnchorClick; private _executeItemClick; private _onItemKeyDown; private _cancelSubMenuTimer; private _onItemSubMenuExpand; private _getSubmenuProps; private _findItemByKey; /** * Returns the item that mathes a given key if any. * @param key - The key of the item to match * @param items - The items to look for the key */ private _findItemByKeyFromItems; /** * This function is called ASYNCHRONOUSLY, and so there is a chance it is called * after the component is unmounted. The _mounted property is added to prevent * from calling setState() after unmount. Do NOT copy this pattern in synchronous * code. */ private _onSubMenuDismiss; private _setTargetWindowAndElement; private _onPointerAndTouchEvent; } /** * ContextualMenuItem description */ export declare const ContextualMenuItem: React.FunctionComponent; export declare class ContextualMenuItemBase extends React.Component { constructor(props: IContextualMenuItemProps); render(): JSX.Element; openSubMenu: () => void; dismissSubMenu: () => void; dismissMenu: (dismissAll?: boolean | undefined) => void; private _renderLayout; } /** * {@docCategory ContextualMenu} */ export declare enum ContextualMenuItemType { Normal = 0, Divider = 1, Header = 2, Section = 3 } /** * Corrects a hex color to have length 3 or 6. Defaults to white if too short. * Does NOT check anything besides the length (such as valid characters) and does NOT handle * hex values starting with # sign. */ export declare function correctHex(hex: string): string; /** Corrects an HSV color to fall within the valid range. */ export declare function correctHSV(color: IHSV): IHSV; /** Corrects an RGB color to fall within the valid range. */ export declare function correctRGB(color: IRGB): IRGB; /** * {@docCategory PeoplePicker} */ export declare function createGenericItem(name: string, currentValidationState: ValidationState): IGenericItem & { key: React.Key; }; export declare function createItem(name: string, isValid: boolean): ISuggestionModel; /** * Converts a valid CSS color string to an RGB color. * Note that hex colors *must* be prefixed with # to be considered valid. * Alpha in returned color defaults to 100. * Four and eight digit hex values (with alpha) are supported if the current browser supports them. */ export declare function cssColor(color?: string): IRGB | undefined; export declare const DATAKTP_ARIA_TARGET = "data-ktp-aria-target"; export declare const DATAKTP_EXECUTE_TARGET = "data-ktp-execute-target"; export declare const DATAKTP_TARGET = "data-ktp-target"; /** * DatePicker description */ export declare const DatePicker: React.FunctionComponent; export declare class DatePickerBase extends React.Component implements IDatePicker { static defaultProps: IDatePickerProps; private _calendar; private _datePickerDiv; private _textField; private _preventFocusOpeningPicker; private _id; constructor(props: IDatePickerProps); UNSAFE_componentWillReceiveProps(nextProps: IDatePickerProps): void; componentDidUpdate(prevProps: IDatePickerProps, prevState: IDatePickerState): void; render(): JSX.Element; focus(): void; reset(): void; private _setErrorMessage; private _onSelectDate; private _onCalloutPositioned; private _onTextFieldFocus; private _onTextFieldBlur; private _onTextFieldChanged; private _onTextFieldKeyDown; private _onTextFieldClick; private _onIconClick; private _showDatePickerPopup; private _dismissDatePickerPopup; /** * Callback for closing the calendar callout */ private _calendarDismissed; private _handleEscKey; private _validateTextInput; private _getDefaultState; private _isDateOutOfBounds; private _getErrorMessage; private _renderReadOnlyInput; } export { DateRangeType } export { DayOfWeek } export declare const DEFAULT_CELL_STYLE_PROPS: ICellStyleProps; export declare const DEFAULT_MASK_CHAR = "_"; export declare const DEFAULT_ROW_HEIGHTS: { rowHeight: number; compactRowHeight: number; }; /** * {@docCategory Button} */ export declare class DefaultButton extends React.Component { render(): JSX.Element; } export declare type DefaultProps = Required>; export { DefaultSpacing } export { Depths } export declare const DetailsColumn: React.FunctionComponent; /** * Component for rendering columns in a `DetailsList`. * * {@docCategory DetailsList} */ export declare class DetailsColumnBase extends React.Component { private _async; private _events; private _root; private _dragDropSubscription; private _classNames; constructor(props: IDetailsColumnProps); render(): JSX.Element; componentDidMount(): void; componentWillUnmount(): void; componentDidUpdate(): void; private _onRenderFilterIcon; private _onRenderColumnHeaderTooltip; private _onColumnClick; private _getColumnDragDropOptions; private _hasAccessibleLabel; private _renderAccessibleLabel; private _onDragStart; private _onDragEnd; private _updateHeaderDragInfo; private _onColumnContextMenu; private _onRootMouseDown; private _addDragDropHandling; } export declare const DetailsHeader: React.FunctionComponent; export declare class DetailsHeaderBase extends React.Component implements IDetailsHeader { static defaultProps: { selectAllVisibility: SelectAllVisibility; collapseAllVisibility: CollapseAllVisibility; useFastIcons: boolean; }; private _classNames; private _rootElement; private _events; private _rootComponent; private _id; private _draggedColumnIndex; private _dropHintDetails; private _dragDropHelper; private _currentDropHintIndex; private _subscriptionObject; private _onDropIndexInfo; constructor(props: IDetailsHeaderBaseProps); componentDidMount(): void; componentDidUpdate(prevProps: IDetailsHeaderBaseProps): void; componentWillUnmount(): void; render(): JSX.Element; /** Set focus to the active thing in the focus area. */ focus(): boolean; /** * Gets column reorder props from this.props. If the calling code is part of setting up or * handling drag/drop events, it's safe to assume that this method's return value is defined * (because drag/drop handling will only be set up if reorder props are given). */ private _getColumnReorderProps; private _getHeaderDragDropOptions; private _updateDroppingState; private _isValidCurrentDropHintIndex; private _onDragOver; private _onDrop; /** * @returns whether or not the "Select All" checkbox column is hidden. */ private _isCheckboxColumnHidden; private _updateDragInfo; private _resetDropHints; private _updateDropHintElement; private _getDropHintPositions; /** * Based on the given cursor position, finds the nearest drop hint and updates the state to make it visible */ private _computeDropHintToBeShown; private _isEventOnHeader; private _renderColumnSizer; private _renderColumnDivider; private _renderDropHint; private _onRenderColumnHeaderTooltip; /** * double click on the column sizer will auto ajust column width * to fit the longest content among current rendered rows. * * @param columnIndex - index of the column user double clicked * @param ev - mouse double click event */ private _onSizerDoubleClick; /** * Called when the select all toggle is clicked. */ private _onSelectAllClicked; private _onRootMouseDown; private _onRootMouseMove; private _onRootKeyDown; /** * mouse move event handler in the header * it will set isSizing state to true when user clicked on the sizer and move the mouse. * * @param ev - mouse move event */ private _onSizerMouseMove; private _onSizerBlur; /** * mouse up event handler in the header * clear the resize related state. * This is to ensure we can catch double click event * * @param ev - mouse up event */ private _onSizerMouseUp; private _onSelectionChanged; private _onToggleCollapseAll; } export declare const DetailsList: React.FunctionComponent; export declare class DetailsListBase extends React.Component implements IDetailsList { static defaultProps: { layoutMode: DetailsListLayoutMode; selectionMode: SelectionMode; constrainMode: ConstrainMode; checkboxVisibility: CheckboxVisibility; isHeaderVisible: boolean; compact: boolean; useFastIcons: boolean; }; private _async; private _root; private _header; private _groupedList; private _list; private _focusZone; private _selectionZone; private _selection; private _activeRows; private _dragDropHelper; private _initialFocusedIndex; private _columnOverrides; static getDerivedStateFromProps(nextProps: IDetailsListProps, previousState: IDetailsListState): IDetailsListState; constructor(props: IDetailsListProps); scrollToIndex(index: number, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode): void; focusIndex(index: number, forceIntoFirstElement?: boolean, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode): void; getStartItemIndexInView(): number; componentWillUnmount(): void; componentDidUpdate(prevProps: IDetailsListProps, prevState: IDetailsListState): void; render(): JSX.Element; forceUpdate(): void; protected _onRenderRow: (props: IDetailsRowProps, defaultRender?: IRenderFunction | undefined) => JSX.Element; private _getDerivedStateFromProps; private _onGroupExpandStateChanged; private _onColumnIsSizingChanged; private _getGroupNestingDepth; private _onRowDidMount; private _setFocusToRowIfPending; private _setFocusToRow; private _onRowWillUnmount; private _onToggleCollapse; private _forceListUpdates; private _notifyColumnsResized; private _adjustColumns; /** Returns adjusted columns, given the viewport size and layout mode. */ private _getAdjustedColumns; /** Builds a set of columns based on the given columns mixed with the current overrides. */ private _getFixedColumns; /** Builds a set of columns to fix within the viewport width. */ private _getJustifiedColumns; private _onColumnResized; private _rememberCalculatedWidth; private _getColumnOverride; /** * Callback function when double clicked on the details header column resizer * which will measure the column cells of all the active rows and resize the * column to the max cell width. * * @param column - double clicked column definition * @param columnIndex - double clicked column index * TODO: min width 100 should be changed to const value and should be consistent with the * value used on _onSizerMove method in DetailsHeader */ private _onColumnAutoResized; /** * Call back function when an element in FocusZone becomes active. It will translate it into item * and call onActiveItemChanged callback if specified. * * @param row - element that became active in Focus Zone * @param focus - event from Focus Zone */ private _onActiveRowChanged; private _onBlur; private _getItemKey; } /** * {@docCategory DetailsList} */ export declare enum DetailsListLayoutMode { /** * Lets the user resize columns and makes not attempt to fit them. */ fixedColumns = 0, /** * Manages which columns are visible, tries to size them according to their min/max rules and drops * off columns that can't fit and have isCollapsible set. */ justified = 1 } export declare const DetailsRow: React.FunctionComponent; export declare class DetailsRowBase extends React.Component { private _events; private _root; private _cellMeasurer; private _focusZone; private _droppingClassNames; /** Whether this.props.onDidMount has been called */ private _onDidMountCalled; private _dragDropSubscription; private _classNames; private _rowClassNames; private _ariaRowDescriptionId; static getDerivedStateFromProps(nextProps: IDetailsRowBaseProps, previousState: IDetailsRowState): IDetailsRowState; constructor(props: IDetailsRowBaseProps); componentDidMount(): void; componentDidUpdate(previousProps: IDetailsRowBaseProps): void; componentWillUnmount(): void; shouldComponentUpdate(nextProps: IDetailsRowBaseProps, nextState: IDetailsRowState): boolean; render(): JSX.Element; /** * measure cell at index. and call the call back with the measured cell width when finish measure * * @param index - The cell index * @param onMeasureDone - The call back function when finish measure */ measureCell(index: number, onMeasureDone: (width: number) => void): void; focus(forceIntoFirstElement?: boolean): boolean; protected _onRenderCheck(props: IDetailsRowCheckProps): JSX.Element; private _onSelectionChanged; private _getRowDragDropOptions; /** * update isDropping state based on the input value, which is used to change style during drag and drop * * when change to true, that means drag enter. we will add default dropping class name * or the custom dropping class name (return result from onDragEnter) to the root elemet. * * when change to false, that means drag leave. we will remove the dropping class name from root element. * * @param newValue - New isDropping state value * @param event - The event trigger dropping state change which can be dragenter, dragleave etc */ private _updateDroppingState; } export declare const DetailsRowCheck: React.FunctionComponent; /** * Component for rendering a row's cells in a `DetailsList`. * * {@docCategory DetailsList} */ export declare const DetailsRowFields: React.FunctionComponent; export declare const DetailsRowGlobalClassNames: { root: string; compact: string; cell: string; cellAnimation: string; cellCheck: string; check: string; cellMeasurer: string; listCellFirstChild: string; isContentUnselectable: string; isSelected: string; isCheckVisible: string; isRowHeader: string; fields: string; }; export declare const Dialog: React.FunctionComponent; export declare class DialogBase extends React.Component { static defaultProps: IDialogProps; private _id; private _defaultTitleTextId; private _defaultSubTextId; constructor(props: IDialogProps); render(): JSX.Element; private _getSubTextId; private _getTitleTextId; } export declare const DialogContent: React.FunctionComponent; export declare class DialogContentBase extends React.Component { static defaultProps: IDialogContentProps; constructor(props: IDialogContentProps); render(): JSX.Element; private _groupChildren; } export declare const DialogFooter: React.FunctionComponent; export declare class DialogFooterBase extends React.Component { private _classNames; constructor(props: IDialogFooterProps); render(): JSX.Element; private _renderChildrenAsActions; } /** * {@docCategory Dialog} */ export declare enum DialogType { /** Standard dialog */ normal = 0, /** Dialog with large header banner */ largeHeader = 1, /** Dialog with an 'x' close button in the upper-right corner */ close = 2 } export declare const DirectionalHint: { /** * Appear above the target element, with the left edges of the callout and target aligning. */ topLeftEdge: 0; /** * Appear above the target element, with the centers of the callout and target aligning. */ topCenter: 1; /** * Appear above the target element, with the right edges of the callout and target aligning. */ topRightEdge: 2; /** * Appear above the target element, aligning with the target element such that the callout tends toward * the center of the screen. */ topAutoEdge: 3; /** * Appear below the target element, with the left edges of the callout and target aligning. */ bottomLeftEdge: 4; /** * Appear below the target element, with the centers of the callout and target aligning. */ bottomCenter: 5; /** * Appear below the target element, with the right edges of the callout and target aligning. */ bottomRightEdge: 6; /** * Appear below the target element, aligning with the target element such that the callout tends toward * the center of the screen. */ bottomAutoEdge: 7; /** * Appear to the left of the target element, with the top edges of the callout and target aligning. */ leftTopEdge: 8; /** * Appear to the left of the target element, with the centers of the callout and target aligning. */ leftCenter: 9; /** * Appear to the left of the target element, with the bottom edges of the callout and target aligning. */ leftBottomEdge: 10; /** * Appear to the right of the target element, with the top edges of the callout and target aligning. */ rightTopEdge: 11; /** * Appear to the right of the target element, with the centers of the callout and target aligning. */ rightCenter: 12; /** * Appear to the right of the target element, with the bottom edges of the callout and target aligning. */ rightBottomEdge: 13; }; export declare type DirectionalHint = typeof DirectionalHint[keyof typeof DirectionalHint]; export declare const DocumentCard: React.FunctionComponent; export declare const DocumentCardActions: React.FunctionComponent; /** * {@docCategory DocumentCard} */ declare class DocumentCardActionsBase extends React.Component { private _classNames; constructor(props: IDocumentCardActionsProps); render(): JSX.Element; } export declare const DocumentCardActivity: React.FunctionComponent; /** * {@docCategory DocumentCard} */ declare class DocumentCardActivityBase extends React.Component { private _classNames; constructor(props: IDocumentCardActivityProps); render(): JSX.Element | null; private _renderAvatars; private _renderAvatar; private _getNameString; } export declare const DocumentCardDetails: React.FunctionComponent; /** * {@docCategory DocumentCard} */ declare class DocumentCardDetailsBase extends React.Component { private _classNames; constructor(props: IDocumentCardDetailsProps); render(): JSX.Element; } export declare const DocumentCardImage: React.FunctionComponent; export declare const DocumentCardLocation: React.FunctionComponent; /** * {@docCategory DocumentCard} */ declare class DocumentCardLocationBase extends React.Component { private _classNames; constructor(props: IDocumentCardLocationProps); render(): JSX.Element; } export declare const DocumentCardLogo: React.FunctionComponent; /** * {@docCategory DocumentCard} */ declare class DocumentCardLogoBase extends React.Component { private _classNames; constructor(props: IDocumentCardLogoProps); render(): JSX.Element; } export declare const DocumentCardPreview: React.FunctionComponent; export declare const DocumentCardStatus: React.FunctionComponent; /** * {@docCategory DocumentCard} */ declare class DocumentCardStatusBase extends React.Component { private _classNames; constructor(props: IDocumentCardStatusProps); render(): JSX.Element; } export declare const DocumentCardTitle: React.FunctionComponent; /** * {@docCategory DocumentCard} */ declare class DocumentCardTitleBase extends React.Component { private _titleElement; private _measureTitleElement; private _titleTruncationTimer; private _classNames; private _async; private _events; constructor(props: IDocumentCardTitleProps); componentDidUpdate(): void; componentDidMount(): void; componentWillUnmount(): void; render(): JSX.Element; private _truncateTitle; private _truncateWhenInAnimation; private _shrinkTitle; private _updateTruncation; } /** * {@docCategory DocumentCard} */ export declare enum DocumentCardType { /** * Standard DocumentCard. */ normal = 0, /** * Compact layout. Displays the preview beside the details, rather than above. */ compact = 1 } export declare class DragDropHelper implements IDragDropHelper { private _dragEnterCounts; private _isDragging; private _dragData; private _selection; private _activeTargets; private _events; private _lastId; private _initialized; constructor(params: IDragDropHelperParams); dispose(): void; subscribe(root: HTMLElement, events: EventGroup, dragDropOptions: IDragDropOptions): { key: string; dispose(): void; }; unsubscribe(root: HTMLElement, key: string): void; private _onDragEnd; /** * clear drag data when mouse up on body */ private _onMouseUp; /** * clear drag data when mouse up outside of the document */ private _onDocumentMouseUp; /** * when mouse move over a new drop target while dragging some items, * fire dragleave on the old target and fire dragenter to the new target * The target will handle style change on dragenter and dragleave events. */ private _onMouseMove; /** * when mouse leave a target while dragging some items, fire dragleave to the target */ private _onMouseLeave; /** * when mouse down on a draggable item, we start to track dragdata. */ private _onMouseDown; /** * determine whether the child target is a descendant of the parent */ private _isChild; private _isDraggable; private _isDroppable; } export declare const Dropdown: React.FunctionComponent; export declare class DropdownBase extends React.Component implements IDropdown { static defaultProps: { options: any[]; }; private _host; private _focusZone; private _dropDown; private _id; private _labelId; private _listId; private _optionId; private _isScrollIdle; private readonly _scrollIdleDelay; private _scrollIdleTimeoutId; /** True if the most recent keydown event was for alt (option) or meta (command). */ private _lastKeyDownWasAltOrMeta; private _sizePosCache; private _classNames; private _requestAnimationFrame; /** Flag for when we get the first mouseMove */ private _gotMouseMove; /** Flag for tracking whether focus is triggered by click (alternatively triggered by keyboard nav) */ private _isFocusedByClick; constructor(props: IDropdownProps); /** * All selected options */ readonly selectedOptions: IDropdownOption[]; componentWillUnmount(): void; UNSAFE_componentWillReceiveProps(newProps: IDropdownProps): void; componentDidUpdate(prevProps: IDropdownProps, prevState: IDropdownState): void; render(): JSX.Element; focus(shouldOpenOnFocus?: boolean): void; setSelectedIndex(event: React.FormEvent, index: number): void; private _onChange; /** Get either props.placeholder (new name) or props.placeHolder (old name) */ private _getPlaceholder; private _copyArray; /** * Finds the next valid Dropdown option and sets the selected index to it. * @param stepValue - Value of how many items the function should traverse. Should be -1 or 1. * @param index - Index of where the search should start * @param selectedIndex - The selectedIndex Dropdown's state * @returns The next valid dropdown option's index */ private _moveIndex; /** Get text in dropdown input as a string */ private _getTitle; /** Render text in dropdown input */ private _onRenderTitle; /** Render placeholder text in dropdown input */ private _onRenderPlaceholder; /** Render Callout or Panel container and pass in list */ private _onRenderContainer; /** Render Caret Down Icon */ private _onRenderCaretDown; /** Wrap item list in a FocusZone */ private _renderFocusableList; /** Render List of items */ private _onRenderList; private _onRenderItem; private _renderSeparator; private _renderHeader; private _renderOption; /** Render content of item (i.e. text/icon inside of button) */ private _onRenderOption; /** Render custom label for drop down item */ private _onRenderItemLabel; private _onPositioned; private _onItemClick; /** * Scroll handler for the callout to make sure the mouse events * for updating focus are not interacting during scroll */ private _onScroll; private _onItemMouseEnter; private _onItemMouseMove; private _onMouseItemLeave; private _shouldIgnoreMouseEvent; private _onDismiss; /** Get all selected indexes for multi-select mode */ private _getSelectedIndexes; private _getAllSelectedIndices; private _getSelectedIndex; private _onDropdownBlur; private _onDropdownKeyDown; private _onDropdownKeyUp; /** * Returns true if the key for the event is alt (Mac option) or meta (Mac command). */ private _isAltOrMeta; /** * We close the menu on key up only if ALL of the following are true: * - Most recent key down was alt or meta (command) * - The alt/meta key down was NOT followed by some other key (such as down/up arrow to * expand/collapse the menu) * - We're not on a Mac (or iOS) * * This is because on Windows, pressing alt moves focus to the application menu bar or similar, * closing any open context menus. There is not a similar behavior on Macs. */ private _shouldHandleKeyUp; private _onZoneKeyDown; private _onZoneKeyUp; private _onDropdownClick; private _onDropdownMouseDown; private _onFocus; /** * Because the isDisabled prop is deprecated, we have had to repeat this logic all over the place. * This helper method avoids all the repetition. */ private _isDisabled; private _onRenderLabel; /** * Returns true if dropdown should set to open on focus. * Otherwise, isOpen state should be toggled on click */ private _shouldOpenOnFocus; } /** * {@docCategory Button} */ export declare enum ElementType { /**