import { addDays } from '@fluentui/date-time-utilities'; import { addDirectionalKeyCode } from '@fluentui/utilities'; import { addElementAtIndex } from '@fluentui/utilities'; import { addMonths } from '@fluentui/date-time-utilities'; import { addWeeks } from '@fluentui/date-time-utilities'; import { addYears } from '@fluentui/date-time-utilities'; import { allowOverscrollOnElement } from '@fluentui/utilities'; import { allowScrollOnElement } from '@fluentui/utilities'; import { anchorProperties } from '@fluentui/utilities'; import { AnimationClassNames } from '@fluentui/style-utilities'; import { AnimationStyles } from '@fluentui/style-utilities'; import { AnimationVariables } from '@fluentui/style-utilities'; import { appendFunction } from '@fluentui/utilities'; import { arraysEqual } from '@fluentui/utilities'; import { asAsync } from '@fluentui/utilities'; import { assertNever } from '@fluentui/utilities'; import { assign } from '@fluentui/utilities'; import { Async } from '@fluentui/utilities'; import { audioProperties } from '@fluentui/utilities'; import { AutoScroll } from '@fluentui/utilities'; import { BaseComponent } from '@fluentui/utilities'; import { baseElementEvents } from '@fluentui/utilities'; import { baseElementProperties } from '@fluentui/utilities'; import { buildClassMap } from '@fluentui/style-utilities'; import { buttonProperties } from '@fluentui/utilities'; import { calculatePrecision } from '@fluentui/utilities'; import { canUseDOM } from '@fluentui/utilities'; import { classNamesFunction } from '@fluentui/utilities'; import { colGroupProperties } from '@fluentui/utilities'; import { ColorClassNames } from '@fluentui/style-utilities'; import { colProperties } from '@fluentui/utilities'; import { CommunicationColors } from '@fluentui/theme'; import { compareDatePart } from '@fluentui/date-time-utilities'; import { compareDates } from '@fluentui/date-time-utilities'; import { ComponentsStyles } from '@fluentui/theme'; import { ComponentStyles } from '@fluentui/theme'; import { composeComponentAs } from '@fluentui/utilities'; import { composeRenderFunction } from '@fluentui/utilities'; import { concatStyleSets } from '@fluentui/style-utilities'; import { concatStyleSetsWithProps } from '@fluentui/style-utilities'; import { createArray } from '@fluentui/utilities'; import { createFontStyles } from '@fluentui/style-utilities'; import { createMemoizer } from '@fluentui/utilities'; import { createMergedRef } from '@fluentui/utilities'; import { createTheme } from '@fluentui/theme'; import { css } from '@fluentui/utilities'; import { customizable } from '@fluentui/utilities'; import { Customizations } from '@fluentui/utilities'; import { Customizer } from '@fluentui/utilities'; import { CustomizerContext } from '@fluentui/utilities'; import { DATA_IS_SCROLLABLE_ATTRIBUTE } from '@fluentui/utilities'; import { DATA_PORTAL_ATTRIBUTE } from '@fluentui/utilities'; import { DateRangeType } from '@fluentui/date-time-utilities'; import { DayOfWeek } from '@fluentui/date-time-utilities'; import { DAYS_IN_WEEK } from '@fluentui/date-time-utilities'; import { DefaultEffects } from '@fluentui/style-utilities'; import { DefaultFontStyles } from '@fluentui/style-utilities'; import { DefaultPalette } from '@fluentui/style-utilities'; import { DefaultSpacing } from '@fluentui/theme'; import { DelayedRender } from '@fluentui/utilities'; import { Depths } from '@fluentui/theme'; import { disableBodyScroll } from '@fluentui/utilities'; import { divProperties } from '@fluentui/utilities'; import { doesElementContainFocus } from '@fluentui/utilities'; import { EdgeChromiumHighContrastSelector } from '@fluentui/style-utilities'; import { elementContains } from '@fluentui/utilities'; import { elementContainsAttribute } from '@fluentui/utilities'; import { enableBodyScroll } from '@fluentui/utilities'; import { EventGroup } from '@fluentui/utilities'; import { extendComponent } from '@fluentui/utilities'; import { FabricPerformance } from '@fluentui/utilities'; import { filteredAssign } from '@fluentui/utilities'; import { find } from '@fluentui/utilities'; import { findElementRecursive } from '@fluentui/utilities'; import { findIndex } from '@fluentui/utilities'; import { findScrollableParent } from '@fluentui/utilities'; import { FirstWeekOfYear } from '@fluentui/date-time-utilities'; import { fitContentToBounds } from '@fluentui/utilities'; import { FitMode } from '@fluentui/utilities'; import { flatten } from '@fluentui/utilities'; import { FluentTheme } from '@fluentui/theme'; import { focusAsync } from '@fluentui/utilities'; import { focusClear } from '@fluentui/style-utilities'; import { focusFirstChild } from '@fluentui/utilities'; import { FocusRects } from '@fluentui/utilities'; import { FocusRectsContext } from '@fluentui/utilities'; import { FocusRectsProvider } from '@fluentui/utilities'; import { FocusZone } from '@fluentui/react-focus'; import { FocusZoneDirection } from '@fluentui/react-focus'; import { FocusZoneTabbableElements } from '@fluentui/react-focus'; import { FontClassNames } from '@fluentui/style-utilities'; import { fontFace } from '@fluentui/style-utilities'; import { FontSizes } from '@fluentui/style-utilities'; import { FontWeights } from '@fluentui/style-utilities'; import { format } from '@fluentui/utilities'; import { formProperties } from '@fluentui/utilities'; import { getChildren } from '@fluentui/utilities'; import { getDatePartHashValue } from '@fluentui/date-time-utilities'; import { getDateRangeArray } from '@fluentui/date-time-utilities'; import { getDistanceBetweenPoints } from '@fluentui/utilities'; import { getDocument } from '@fluentui/utilities'; import { getEdgeChromiumNoHighContrastAdjustSelector } from '@fluentui/style-utilities'; import { getElementIndexPath } from '@fluentui/utilities'; import { getEndDateOfWeek } from '@fluentui/date-time-utilities'; import { getFadedOverflowStyle } from '@fluentui/style-utilities'; import { getFirstFocusable } from '@fluentui/utilities'; import { getFirstTabbable } from '@fluentui/utilities'; import { getFirstVisibleElementFromSelector } from '@fluentui/utilities'; import { getFocusableByIndexPath } from '@fluentui/utilities'; import { getFocusOutlineStyle } from '@fluentui/style-utilities'; import { getFocusStyle } from '@fluentui/style-utilities'; import { getGlobalClassNames } from '@fluentui/style-utilities'; import { getHighContrastNoAdjustStyle } from '@fluentui/style-utilities'; import { getIcon } from '@fluentui/style-utilities'; import { getIconClassName } from '@fluentui/style-utilities'; import { getId } from '@fluentui/utilities'; import { getInitials } from '@fluentui/utilities'; import { getInputFocusStyle } from '@fluentui/style-utilities'; import { getLanguage } from '@fluentui/utilities'; import { getLastFocusable } from '@fluentui/utilities'; import { getLastTabbable } from '@fluentui/utilities'; import { getMonthEnd } from '@fluentui/date-time-utilities'; import { getMonthStart } from '@fluentui/date-time-utilities'; import { getNativeElementProps } from '@fluentui/utilities'; import { getNativeProps } from '@fluentui/utilities'; import { getNextElement } from '@fluentui/utilities'; import { getParent } from '@fluentui/utilities'; import { getPlaceholderStyles } from '@fluentui/style-utilities'; import { getPreviousElement } from '@fluentui/utilities'; import { getPropsWithDefaults } from '@fluentui/utilities'; import { getRect } from '@fluentui/utilities'; import { getResourceUrl } from '@fluentui/utilities'; import { getRTL } from '@fluentui/utilities'; import { getRTLSafeKeyCode } from '@fluentui/utilities'; import { getScreenSelector } from '@fluentui/style-utilities'; import { getScrollbarWidth } from '@fluentui/utilities'; import { getStartDateOfWeek } from '@fluentui/date-time-utilities'; import { getTheme } from '@fluentui/style-utilities'; import { getThemedContext } from '@fluentui/style-utilities'; import { getVirtualParent } from '@fluentui/utilities'; import { getWeekNumber } from '@fluentui/date-time-utilities'; import { getWeekNumbersInMonth } from '@fluentui/date-time-utilities'; import { getWindow } from '@fluentui/utilities'; import { getYearEnd } from '@fluentui/date-time-utilities'; import { getYearStart } from '@fluentui/date-time-utilities'; import { GlobalClassNames } from '@fluentui/style-utilities'; import { GlobalSettings } from '@fluentui/utilities'; import { hasHorizontalOverflow } from '@fluentui/utilities'; import { hasOverflow } from '@fluentui/utilities'; import { hasVerticalOverflow } from '@fluentui/utilities'; import { hiddenContentStyle } from '@fluentui/style-utilities'; import { HighContrastSelector } from '@fluentui/style-utilities'; import { HighContrastSelectorBlack } from '@fluentui/style-utilities'; import { HighContrastSelectorWhite } from '@fluentui/style-utilities'; import { hoistMethods } from '@fluentui/utilities'; import { hoistStatics } from '@fluentui/utilities'; import { htmlElementProperties } from '@fluentui/utilities'; import { IAnimationStyles } from '@fluentui/style-utilities'; import { IAnimationVariables } from '@fluentui/style-utilities'; import { IAsAsyncOptions } from '@fluentui/utilities'; import { IBaseProps } from '@fluentui/utilities'; import { ICalendarStrings } from '@fluentui/date-time-utilities'; import { ICancelable } from '@fluentui/utilities'; import { IChangeDescription } from '@fluentui/utilities'; import { IChangeEventCallback } from '@fluentui/utilities'; import { IClassNames } from '@fluentui/utilities'; import { IClassNamesFunctionOptions } from '@fluentui/utilities'; import type { IComponent } from '@fluentui/foundation-legacy'; import { IComponentAs } from '@fluentui/utilities'; import { IComponentAsProps } from '@fluentui/utilities'; import type { IComponentStyles } from '@fluentui/foundation-legacy'; import { IconFontSizes } from '@fluentui/style-utilities'; import { IconNames } from '@fluentui/font-icons-mdl2'; import { ICSPSettings } from '@fluentui/style-utilities'; import { ICssInput } from '@fluentui/utilities'; import type { ICSSPixelUnitRule } from '@fluentui/merge-styles'; import type { ICSSRule } from '@fluentui/merge-styles'; import { ICustomizableProps } from '@fluentui/utilities'; import { ICustomizations } from '@fluentui/utilities'; import { ICustomizerContext } from '@fluentui/utilities'; import { ICustomizerProps } from '@fluentui/utilities'; import { IDateFormatting } from '@fluentui/date-time-utilities'; import type { IDayGridOptions } from '@fluentui/date-time-utilities'; import { IDeclaredEventsByName } from '@fluentui/utilities'; import { IDelayedRenderProps } from '@fluentui/utilities'; import { IDelayedRenderState } from '@fluentui/utilities'; import { IDictionary } from '@fluentui/utilities'; import { IDisposable } from '@fluentui/utilities'; import { IEffects } from '@fluentui/style-utilities'; import { IEventRecord } from '@fluentui/utilities'; import { IEventRecordList } from '@fluentui/utilities'; import { IEventRecordsByName } from '@fluentui/utilities'; import { IFitContentToBoundsOptions } from '@fluentui/utilities'; import { IFocusRectsContext } from '@fluentui/utilities'; import { IFocusZone } from '@fluentui/react-focus'; import { IFocusZoneProps } from '@fluentui/react-focus'; import { IFontFace } from '@fluentui/style-utilities'; import { IFontStyles } from '@fluentui/style-utilities'; import { IFontWeight } from '@fluentui/style-utilities'; import { iframeProperties } from '@fluentui/utilities'; import { IGetFocusStylesOptions } from '@fluentui/style-utilities'; import type { IHTMLSlot } from '@fluentui/foundation-legacy'; import { IIconOptions } from '@fluentui/style-utilities'; import { IIconRecord } from '@fluentui/style-utilities'; import { IIconSubset } from '@fluentui/style-utilities'; import { IIconSubsetRecord } from '@fluentui/style-utilities'; import { imageProperties } from '@fluentui/utilities'; import { imgProperties } from '@fluentui/utilities'; import { initializeComponentRef } from '@fluentui/utilities'; import { initializeFocusRects } from '@fluentui/utilities'; import { initializeIcons } from '@fluentui/font-icons-mdl2'; import { InjectionMode } from '@fluentui/style-utilities'; import { inputProperties } from '@fluentui/utilities'; import { IObjectWithKey } from '@fluentui/utilities'; import { IPalette } from '@fluentui/style-utilities'; import { IPartialTheme } from '@fluentui/style-utilities'; import { IPerfData } from '@fluentui/utilities'; import { IPerfMeasurement } from '@fluentui/utilities'; import { IPerfSummary } from '@fluentui/utilities'; import { IPoint } from '@fluentui/utilities'; import { IProcessedStyleSet } from '@fluentui/style-utilities'; import { IPropsWithStyles } from '@fluentui/utilities'; import { IRawStyle } from '@fluentui/style-utilities'; import { IReactProps } from '@fluentui/utilities'; import { IRectangle } from '@fluentui/utilities'; import { IRefObject } from '@fluentui/utilities'; import { IRenderComponent } from '@fluentui/utilities'; import { IRenderFunction } from '@fluentui/utilities'; import { IScheme } from '@fluentui/style-utilities'; import { ISchemeNames } from '@fluentui/style-utilities'; import { isControlled } from '@fluentui/utilities'; import { isDirectionalKeyCode } from '@fluentui/utilities'; import { ISelection } from '@fluentui/utilities'; import { ISelectionOptions } from '@fluentui/utilities'; import { ISelectionOptionsWithRequiredGetKey } from '@fluentui/utilities'; import { isElementFocusSubZone } from '@fluentui/utilities'; import { isElementFocusZone } from '@fluentui/utilities'; import { isElementTabbable } from '@fluentui/utilities'; import { isElementVisible } from '@fluentui/utilities'; import { isElementVisibleAndNotHidden } from '@fluentui/utilities'; import { ISemanticColors } from '@fluentui/style-utilities'; import { ISemanticTextColors } from '@fluentui/style-utilities'; import { ISerializableObject } from '@fluentui/utilities'; import { ISettings } from '@fluentui/utilities'; import { ISettingsFunction } from '@fluentui/utilities'; import { ISettingsMap } from '@fluentui/utilities'; import { IsFocusVisibleClassName } from '@fluentui/utilities'; import { isIE11 } from '@fluentui/utilities'; import { isInDateRangeArray } from '@fluentui/date-time-utilities'; import { isIOS } from '@fluentui/utilities'; import { ISize } from '@fluentui/utilities'; import type { ISlotProp } from '@fluentui/foundation-legacy'; import type { ISlottableProps } from '@fluentui/foundation-legacy'; import { isMac } from '@fluentui/utilities'; import { ISpacing } from '@fluentui/style-utilities'; import { IStyle } from '@fluentui/style-utilities'; import type { IStyleableComponentProps } from '@fluentui/foundation-legacy'; import { IStyleFunction } from '@fluentui/utilities'; import { IStyleFunctionOrObject } from '@fluentui/utilities'; import { IStyleSet } from '@fluentui/style-utilities'; import { IStyleSheetConfig } from '@fluentui/style-utilities'; import { isVirtualElement } from '@fluentui/utilities'; import { ITheme } from '@fluentui/style-utilities'; import { IVirtualElement } from '@fluentui/utilities'; import { IWarnControlledUsageParams } from '@fluentui/utilities'; import { KeyCodes } from '@fluentui/utilities'; import { keyframes } from '@fluentui/style-utilities'; import { labelProperties } from '@fluentui/utilities'; import { liProperties } from '@fluentui/utilities'; import { loadTheme } from '@fluentui/style-utilities'; import { LocalizedFontFamilies } from '@fluentui/theme'; import { LocalizedFontNames } from '@fluentui/theme'; import { mapEnumByName } from '@fluentui/utilities'; import { memoize } from '@fluentui/utilities'; import { memoizeFunction } from '@fluentui/utilities'; import { merge } from '@fluentui/utilities'; import { mergeAriaAttributeValues } from '@fluentui/utilities'; import { mergeCustomizations } from '@fluentui/utilities'; import { mergeScopedSettings } from '@fluentui/utilities'; import { mergeSettings } from '@fluentui/utilities'; import { mergeStyles } from '@fluentui/style-utilities'; import { mergeStyleSets } from '@fluentui/style-utilities'; import { MergeStylesRootProvider } from '@fluentui/utilities'; import { MergeStylesShadowRootProvider } from '@fluentui/utilities'; import { mergeThemes } from '@fluentui/theme'; import { modalize } from '@fluentui/utilities'; import { MonthOfYear } from '@fluentui/date-time-utilities'; import { MotionAnimations } from '@fluentui/theme'; import { MotionDurations } from '@fluentui/theme'; import { MotionTimings } from '@fluentui/theme'; import { NeutralColors } from '@fluentui/theme'; import { normalize } from '@fluentui/style-utilities'; import { noWrap } from '@fluentui/style-utilities'; import { nullRender } from '@fluentui/utilities'; import { olProperties } from '@fluentui/utilities'; import { omit } from '@fluentui/utilities'; import { Omit as Omit_2 } from '@fluentui/utilities'; import { on } from '@fluentui/utilities'; import { optionProperties } from '@fluentui/utilities'; import { PartialTheme } from '@fluentui/theme'; import { Point } from '@fluentui/utilities'; import { portalContainsElement } from '@fluentui/utilities'; import { precisionRound } from '@fluentui/utilities'; import { PulsingBeaconAnimationStyles } from '@fluentui/style-utilities'; import { raiseClick } from '@fluentui/utilities'; import * as React_2 from 'react'; import type { ReactNode } from 'react'; import { Rectangle } from '@fluentui/utilities'; import { RefObject } from '@fluentui/utilities'; import { registerDefaultFontFaces } from '@fluentui/theme'; import { registerIconAlias } from '@fluentui/style-utilities'; import { registerIcons } from '@fluentui/style-utilities'; import { registerOnThemeChangeCallback } from '@fluentui/style-utilities'; import { removeDirectionalKeyCode } from '@fluentui/utilities'; import { removeIndex } from '@fluentui/utilities'; import { removeOnThemeChangeCallback } from '@fluentui/style-utilities'; import { replaceElement } from '@fluentui/utilities'; import { resetControlledWarnings } from '@fluentui/utilities'; import { resetIds } from '@fluentui/utilities'; import { resetMemoizations } from '@fluentui/utilities'; import { safeRequestAnimationFrame } from '@fluentui/utilities'; import { safeSetTimeout } from '@fluentui/utilities'; import { ScreenWidthMaxLarge } from '@fluentui/style-utilities'; import { ScreenWidthMaxMedium } from '@fluentui/style-utilities'; import { ScreenWidthMaxSmall } from '@fluentui/style-utilities'; import { ScreenWidthMaxXLarge } from '@fluentui/style-utilities'; import { ScreenWidthMaxXXLarge } from '@fluentui/style-utilities'; import { ScreenWidthMinLarge } from '@fluentui/style-utilities'; import { ScreenWidthMinMedium } from '@fluentui/style-utilities'; import { ScreenWidthMinSmall } from '@fluentui/style-utilities'; import { ScreenWidthMinUhfMobile } from '@fluentui/style-utilities'; import { ScreenWidthMinXLarge } from '@fluentui/style-utilities'; import { ScreenWidthMinXXLarge } from '@fluentui/style-utilities'; import { ScreenWidthMinXXXLarge } from '@fluentui/style-utilities'; import { Selection as Selection_2 } from '@fluentui/utilities'; import { SELECTION_CHANGE } from '@fluentui/utilities'; import { SelectionDirection } from '@fluentui/utilities'; import { SelectionMode as SelectionMode_2 } from '@fluentui/utilities'; import { selectProperties } from '@fluentui/utilities'; import { setBaseUrl } from '@fluentui/utilities'; import { setFocusVisibility } from '@fluentui/utilities'; import { setIconOptions } from '@fluentui/style-utilities'; import { setLanguage } from '@fluentui/utilities'; import { setMemoizeWeakMap } from '@fluentui/utilities'; import { setMonth } from '@fluentui/date-time-utilities'; import { setPortalAttribute } from '@fluentui/utilities'; import { setRTL } from '@fluentui/utilities'; import { setSSR } from '@fluentui/utilities'; import { Settings } from '@fluentui/utilities'; import { SettingsFunction } from '@fluentui/utilities'; import { setVirtualParent } from '@fluentui/utilities'; import { setWarningCallback } from '@fluentui/utilities'; import type { ShadowConfig } from '@fluentui/style-utilities'; import { shallowCompare } from '@fluentui/utilities'; import { SharedColors } from '@fluentui/theme'; import { shouldWrapFocus } from '@fluentui/utilities'; import { styled } from '@fluentui/utilities'; import { StyleFunction } from '@fluentui/utilities'; import { Stylesheet } from '@fluentui/style-utilities'; import { tableProperties } from '@fluentui/utilities'; import { Target } from '@fluentui/react-hooks'; import { tdProperties } from '@fluentui/utilities'; import { textAreaProperties } from '@fluentui/utilities'; import { Theme } from '@fluentui/theme'; import { ThemeSettingName } from '@fluentui/style-utilities'; import { thProperties } from '@fluentui/utilities'; import { TimeConstants } from '@fluentui/date-time-utilities'; import { toMatrix } from '@fluentui/utilities'; import { trProperties } from '@fluentui/utilities'; import { unhoistMethods } from '@fluentui/utilities'; import { unregisterIcons } from '@fluentui/style-utilities'; import { useAdoptedStylesheet } from '@fluentui/utilities'; import { useAdoptedStylesheetEx } from '@fluentui/utilities'; import { useCustomizationSettings } from '@fluentui/utilities'; import { useDocument } from '@fluentui/react-window-provider'; import { useFocusRects } from '@fluentui/utilities'; import { useHasMergeStylesShadowRootContext } from '@fluentui/utilities'; import { useMergeStylesHooks } from '@fluentui/utilities'; import { useMergeStylesRootStylesheets } from '@fluentui/utilities'; import { useMergeStylesShadowRootContext } from '@fluentui/utilities'; import { useShadowConfig } from '@fluentui/utilities'; import { useStyled } from '@fluentui/utilities'; import { useWindow } from '@fluentui/react-window-provider'; import { values } from '@fluentui/utilities'; import { videoProperties } from '@fluentui/utilities'; import { warn } from '@fluentui/utilities'; import { warnConditionallyRequiredProps } from '@fluentui/utilities'; import { warnControlledUsage } from '@fluentui/utilities'; import { warnDeprecations } from '@fluentui/utilities'; import { warnMutuallyExclusive } from '@fluentui/utilities'; import { WindowContext } from '@fluentui/react-window-provider'; import { WindowProvider } from '@fluentui/react-window-provider'; import { WindowProviderProps } from '@fluentui/react-window-provider'; import { ZIndexes } from '@fluentui/style-utilities'; /** * {@docCategory Button} */ export declare class ActionButton extends React_2.Component { render(): JSX.Element; } /** * {@docCategory ActivityItem} */ export declare class ActivityItem extends React_2.Component { constructor(props: IActivityItemProps); render(): JSX.Element; private _onRenderIcon; private _onRenderActivityDescription; private _onRenderComments; private _onRenderTimeStamp; private _onRenderPersonaArray; private _getClassNames; } export { addDays } export { addDirectionalKeyCode } export { addElementAtIndex } export { addMonths } export { addWeeks } export { addYears } /** * 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 { allowOverscrollOnElement } export { allowScrollOnElement } export { anchorProperties } export { AnimationClassNames } /** * {@docCategory Calendar} */ export declare enum AnimationDirection { /** * Grid will transition out and in horizontally */ Horizontal = 0, /** * Grid will transition out and in vertically */ Vertical = 1 } export { AnimationStyles } export { AnimationVariables } export declare const Announced: React_2.FunctionComponent; /** * {@docCategory Announced} */ export declare class AnnouncedBase extends React_2.Component { static defaultProps: Partial; render(): JSX.Element; } export { appendFunction } export { arraysEqual } export { asAsync } export { assertNever } export { assign } export { Async } export { audioProperties } /** * {@docCategory Autofill} */ export declare class Autofill extends React_2.Component implements IAutofill { static defaultProps: { enableAutofillOnKeyPress: number[]; }; static contextType: React_2.Context; private _inputElement; private _autoFillEnabled; private _async; static getDerivedStateFromProps(props: IAutofillProps, state: IAutofillState): IAutofillState | null; constructor(props: IAutofillProps); get cursorLocation(): number | null; get isValueSelected(): boolean; get value(): string; get selectionStart(): number | null; get selectionEnd(): number | null; get inputElement(): HTMLInputElement | null; componentDidUpdate(_: any, _1: any, cursor: ICursorLocation | null): void; componentWillUnmount(): void; render(): JSX.Element; focus(): void; clear(): void; getSnapshotBeforeUpdate(): ICursorLocation | null; 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; /** * Updates the current input value as well as getting a new display value. * @param newValue - The new value from the input */ private _updateValue; private _getDisplayValue; private _getControlledValue; } export { AutoScroll } /** * {@docCategory Button} */ export declare class BaseButton extends React_2.Component implements IButton { private get _isSplitButton(); static defaultProps: Partial; static contextType: React_2.Context; context: IFocusRectsContext; 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; } export { BaseComponent } export { baseElementEvents } export { baseElementProperties } /** * {@docCategory ExtendedPeoplePicker} */ export declare class BaseExtendedPeoplePicker extends BaseExtendedPicker { } export declare class BaseExtendedPicker> extends React_2.Component> implements IBaseExtendedPicker { floatingPicker: React_2.RefObject>>; selectedItemsList: React_2.RefObject>>; protected root: React_2.RefObject; protected input: React_2.RefObject; protected selection: Selection_2; constructor(basePickerProps: P); get items(): any; componentDidMount(): void; focus(): void; clearInput(): void; get inputElement(): HTMLInputElement | null; get highlightedItems(): T[]; render(): JSX.Element; protected get floatingPickerProps(): IBaseFloatingPickerProps; protected get selectedItemsListProps(): IBaseSelectedItemsListProps; protected onSelectionChange: () => void; protected canAddItems(): boolean; protected renderFloatingPicker(): JSX.Element; protected renderSelectedItemsList(): JSX.Element; protected onInputChange: (value: string, composing?: boolean) => void; protected onInputFocus: (ev: React_2.FocusEvent) => void; protected onInputClick: (ev: React_2.MouseEvent) => void; protected onBackspace: (ev: React_2.KeyboardEvent) => void; protected onCopy: (ev: React_2.ClipboardEvent) => void; protected onPaste: (ev: React_2.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_2.Component implements IBaseFloatingPicker { protected selection: Selection; protected root: React_2.RefObject; protected suggestionStore: SuggestionsStore; protected suggestionsControl: React_2.RefObject>; protected SuggestionsControlOfProperType: new (props: ISuggestionsControlProps) => SuggestionsControl; protected currentPromise: PromiseLike; protected isComponentMounted: boolean; private _async; constructor(basePickerProps: P); get inputText(): string; get suggestions(): any[]; forceResolveSuggestion(): void; get currentSelectedSuggestionIndex(): number; get isSuggestionsShown(): boolean; onQueryStringChanged: (queryString: string) => void; hidePicker: () => void; showPicker: (updateValue?: boolean) => void; componentDidMount(): void; componentDidUpdate(): void; componentWillUnmount(): 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_2.MouseEvent, item: T, index: number) => void; protected onSuggestionRemove: (ev: React_2.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_2.Component> implements IBasePicker { static contextType: React_2.Context; protected root: React_2.RefObject; protected input: React_2.RefObject; protected suggestionElement: React_2.RefObject>; protected selection: Selection_2; 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; private _overrideScrollDismiss; private _overrideScrollDimissTimeout; static getDerivedStateFromProps(newProps: IBasePickerProps): { items: any[]; } | null; constructor(basePickerProps: P); get 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: KeyCodes) => 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_2.MouseEvent, item: any, index: number) => void; protected onSuggestionRemove: (ev: React_2.MouseEvent, item: T, index: number) => void; protected onInputFocus: (ev: React_2.FocusEvent) => void; protected onInputBlur: (ev: React_2.FocusEvent) => void; protected onBlur: (ev: React_2.FocusEvent) => void; /** * Resets focus to last element in wrapper div if clicking back into Picker that has hit item limit */ protected onWrapperClick: (ev: React_2.MouseEvent) => void; /** * Reveals suggestions any time the user clicks on the input element * without shifting focus. */ protected onClick: (ev: React_2.MouseEvent) => void; protected onFocus: () => void; protected onKeyDown: (ev: React_2.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: T) => void; protected removeItems: (itemsToRemove: any[]) => void; protected onBackspace(ev: React_2.KeyboardEvent): void; /** * @deprecated this is no longer necessary as focuszone has been removed */ protected _shouldFocusZoneEnterInnerZone: (ev: React_2.KeyboardEvent) => boolean; protected getActiveDescendant(): string | undefined; /** @deprecated use renderCustomAlert instead */ protected getSuggestionsAlert(suggestionAlertClassName?: string): JSX.Element | undefined; protected renderCustomAlert(alertClassName?: string): JSX.Element; private _preventDismissOnScrollOrResize; /** If suggestions are still loading after a predefined amount of time, set state to show user alert */ private _startLoadTimer; /** * 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_2.KeyboardEvent): void; } export declare class BaseSelectedItemsList> extends React_2.Component> implements IBaseSelectedItemsList { static contextType: React_2.Context; protected root: HTMLElement; private _defaultSelection; static getDerivedStateFromProps(newProps: IBaseSelectedItemsListProps): { items: any[]; } | null; constructor(basePickerProps: P); get 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_2.ClipboardEvent) => void; hasSelectedItems(): boolean; componentDidUpdate(oldProps: P, oldState: IBaseSelectedItemsListState): void; unselectAll(): void; highlightedItems(): T[]; componentDidMount(): void; protected get selection(): Selection_2; 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_2.FunctionComponent; /** * {@docCategory Breadcrumb} */ export declare class BreadcrumbBase extends React_2.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 { buildClassMap } export declare function buildColumns(items: any[], canResizeColumns?: boolean, onColumnClick?: (ev: React_2.MouseEvent, column: IColumn) => void, sortedColumnKey?: string, isSortedDescending?: boolean, groupedColumnKey?: string, isMultiline?: boolean, columnActionsMode?: ColumnActionsMode): 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_2.Component { constructor(props: IButtonProps); render(): JSX.Element; } export declare const ButtonGlobalClassNames: { msButton: string; msButtonHasMenu: string; msButtonIcon: string; msButtonMenuIcon: string; msButtonLabel: string; msButtonDescription: string; msButtonScreenReaderText: string; msButtonFlexContainer: string; msButtonTextContainer: string; }; export declare const ButtonGrid: React_2.FunctionComponent; export declare const ButtonGridCell: >(props: IButtonGridCellProps) => JSX.Element; export { buttonProperties } /** * {@docCategory Button} */ export declare enum ButtonType { normal = 0, primary = 1, hero = 2, compound = 3, command = 4, icon = 5, default = 6 } export { calculatePrecision } export declare const Calendar: React_2.FunctionComponent; export declare const Callout: React_2.FunctionComponent; export declare const CalloutContent: React_2.FunctionComponent; export declare const CalloutContentBase: React_2.FunctionComponent; /** * Returns true if a list of menu items can contain a checkbox */ export declare function canAnyMenuItemsCheck(items: IContextualMenuItem[]): boolean; export { canUseDOM } export declare const Check: React_2.FunctionComponent; export declare const CHECK_CELL_WIDTH = 48; export declare const CheckBase: React_2.FunctionComponent; export declare const Checkbox: React_2.FunctionComponent; export declare const CheckboxBase: React_2.FunctionComponent; /** * {@docCategory DetailsList} */ export declare enum CheckboxVisibility { /** Visible on hover. */ onHover = 0, /** Visible always. */ always = 1, /** Hide checkboxes. */ hidden = 2 } export declare const ChoiceGroup: React_2.FunctionComponent; export declare const ChoiceGroupBase: React_2.FunctionComponent; export declare const ChoiceGroupOption: React_2.FunctionComponent; /** Clamp a value to ensure it falls within a given range. */ export declare function clamp(value: number, max: number, min?: number): number; export { classNamesFunction } /** * This function can be optionally called to clean up the default layer host as needed. */ export declare function cleanupDefaultLayerHost(doc: Document, shadowRoot?: ShadowRoot | null): void; export declare const Coachmark: React_2.FunctionComponent; export declare const COACHMARK_ATTRIBUTE_NAME = "data-coachmarkid"; export declare const CoachmarkBase: React_2.FunctionComponent; export { colGroupProperties } /** * {@docCategory GroupedList} */ export declare enum CollapseAllVisibility { hidden = 0, visible = 1 } export { ColorClassNames } declare type ColorComponent = keyof Pick; export declare const ColorPicker: React_2.FunctionComponent; /** * {@docCategory ColorPicker} */ export declare class ColorPickerBase extends React_2.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); get color(): IColor; componentDidUpdate(prevProps: Readonly, prevState: Readonly): void; render(): JSX.Element; private _getDisplayValue; private _getTooltipValue; 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_2.FunctionComponent; export declare const ColorPickerGridCellBase: React_2.FunctionComponent; export { colProperties } /** * 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 const ComboBox: React_2.FunctionComponent; export declare const CommandBar: React_2.FunctionComponent; export declare class CommandBarBase extends React_2.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_2.Component { render(): JSX.Element; } /** * {@docCategory Button} */ export declare const CommandButton: typeof ActionButton; export { CommunicationColors } export declare const CompactPeoplePicker: React_2.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) => JSX.Element; createGenericItem: typeof createGenericItem; }; } export { compareDatePart } export { compareDates } export { ComponentsStyles } export { ComponentStyles } export { composeComponentAs } export { composeRenderFunction } /** * {@docCategory Button} */ export declare class CompoundButton extends React_2.Component { render(): JSX.Element; } export { concatStyleSets } export { concatStyleSetsWithProps } /** * {@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_2.FunctionComponent; export declare const ContextualMenuBase: React_2.FunctionComponent; /** * ContextualMenuItem description */ export declare const ContextualMenuItem: React_2.FunctionComponent; export declare class ContextualMenuItemBase extends React_2.Component { constructor(props: IContextualMenuItemProps); render(): JSX.Element; openSubMenu: () => void; dismissSubMenu: () => void; dismissMenu: (dismissAll?: boolean) => void; private _renderLayout; } /** * {@docCategory ContextualMenu} */ export declare enum ContextualMenuItemType { Normal = 0, Divider = 1, Header = 2, Section = 3 } declare class ContextualMenuItemWrapper extends React_2.Component { constructor(props: IContextualMenuItemWrapperProps); shouldComponentUpdate(newProps: IContextualMenuItemWrapperProps): boolean; protected _onItemMouseEnter: (ev: React_2.MouseEvent) => void; protected _onItemClick: (ev: React_2.MouseEvent) => void; protected _onItemMouseLeave: (ev: React_2.MouseEvent) => void; protected _onItemKeyDown: (ev: React_2.KeyboardEvent) => void; protected _onItemMouseMove: (ev: React_2.MouseEvent) => void; protected _getSubmenuTarget: () => HTMLElement | undefined; } /** * 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; export { createArray } /** * When no default layer host is provided, this function is executed to create the default host. */ export declare function createDefaultLayerHost(doc: Document, shadowRoot?: ShadowRoot | null): Node | null; export { createFontStyles } /** * {@docCategory PeoplePicker} */ export declare function createGenericItem(name: string, currentValidationState: ValidationState): IGenericItem & { key: React_2.Key; }; export declare function createItem(name: string, isValid: boolean): ISuggestionModel; export { createMemoizer } export { createMergedRef } export { createTheme } export { css } /** * 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, doc?: Document): IRGB | undefined; export { customizable } export { Customizations } export { Customizer } export { CustomizerContext } export { DATA_IS_SCROLLABLE_ATTRIBUTE } export { DATA_PORTAL_ATTRIBUTE } 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"; export declare const DatePicker: React_2.FunctionComponent; export declare const DatePickerBase: React_2.FunctionComponent; export { DateRangeType } export { DayOfWeek } export { DAYS_IN_WEEK } 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_2.Component { render(): JSX.Element; } export declare const defaultCalendarNavigationIcons: ICalendarNavigationIcons; export declare const defaultCalendarStrings: ICalendarStrings; export declare const defaultDatePickerStrings: IDatePickerStrings; /** * @deprecated Use `defaultCalendarStrings` */ export declare const defaultDayPickerStrings: ICalendarStrings; export { DefaultEffects } export { DefaultFontStyles } export { DefaultPalette } export { DefaultSpacing } export declare const defaultWeeklyDayPickerNavigationIcons: IWeeklyDayPickerNavigationIcons; export declare const defaultWeeklyDayPickerStrings: IWeeklyDayPickerStrings; export { DelayedRender } export { Depths } export declare const DetailsColumn: React_2.FunctionComponent; /** * Component for rendering columns in a `DetailsList`. * * {@docCategory DetailsList} */ export declare class DetailsColumnBase extends React_2.Component { private _async; private _events; private _root; private _dragDropSubscription?; private _classNames; private _tooltipRef; constructor(props: IDetailsColumnProps); render(): JSX.Element; componentDidMount(): void; componentWillUnmount(): void; componentDidUpdate(): void; private _onRenderFilterIcon; private _onRenderColumnHeaderTooltip; private _onColumnClick; private _onColumnKeyDown; private _onColumnBlur; private _onColumnFocus; private _getColumnDragDropOptions; private _hasAccessibleDescription; private _renderAccessibleDescription; private _onDragStart; private _onDragEnd; private _updateHeaderDragInfo; private _onColumnContextMenu; private _onRootMouseDown; private _addDragDropHandling; } export declare const DetailsHeader: React_2.FunctionComponent; export declare class DetailsHeaderBase extends React_2.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; private _computeColumnIndexOffset; /** * @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_2.FunctionComponent; export declare class DetailsListBase extends React_2.Component implements IDetailsList { static defaultProps: { layoutMode: DetailsListLayoutMode; selectionMode: SelectionMode_2; constrainMode: ConstrainMode; checkboxVisibility: CheckboxVisibility; isHeaderVisible: boolean; compact: boolean; useFastIcons: boolean; }; static contextType: React_2.Context; 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; updateColumn(column: IColumn, options: { width?: number; newColumnIndex?: number; }): void; componentWillUnmount(): void; componentDidUpdate(prevProps: IDetailsListProps, prevState: IDetailsListState): void; render(): JSX.Element; forceUpdate(): void; protected _onRenderRow: (props: IDetailsRowProps, defaultRender?: IRenderFunction) => 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_2.FunctionComponent; export declare class DetailsRowBase extends React_2.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_2.FunctionComponent; /** * Component for rendering a row's cells in a `DetailsList`. * * {@docCategory DetailsList} */ export declare const DetailsRowFields: React_2.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_2.FunctionComponent; export declare class DialogBase extends React_2.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_2.FunctionComponent; export declare class DialogContentBase extends React_2.Component { static defaultProps: IDialogContentProps; constructor(props: IDialogContentProps); render(): JSX.Element; private _groupChildren; } export declare const DialogFooter: React_2.FunctionComponent; export declare class DialogFooterBase extends React_2.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 { disableBodyScroll } export { divProperties } export declare const DocumentCard: React_2.FunctionComponent; export declare const DocumentCardActions: React_2.FunctionComponent; /** * {@docCategory DocumentCard} */ declare class DocumentCardActionsBase extends React_2.Component { private _classNames; constructor(props: IDocumentCardActionsProps); render(): JSX.Element; } export declare const DocumentCardActivity: React_2.FunctionComponent; /** * {@docCategory DocumentCard} */ declare class DocumentCardActivityBase extends React_2.Component { private _classNames; constructor(props: IDocumentCardActivityProps); render(): JSX.Element | null; private _renderAvatars; private _renderAvatar; private _getNameString; } export declare const DocumentCardDetails: React_2.FunctionComponent; /** * {@docCategory DocumentCard} */ declare class DocumentCardDetailsBase extends React_2.Component { private _classNames; constructor(props: IDocumentCardDetailsProps); render(): JSX.Element; } export declare const DocumentCardImage: React_2.FunctionComponent; export declare const DocumentCardLocation: React_2.FunctionComponent; /** * {@docCategory DocumentCard} */ declare class DocumentCardLocationBase extends React_2.Component { private _classNames; constructor(props: IDocumentCardLocationProps); render(): JSX.Element; } export declare const DocumentCardLogo: React_2.FunctionComponent; /** * {@docCategory DocumentCard} */ declare class DocumentCardLogoBase extends React_2.Component { private _classNames; constructor(props: IDocumentCardLogoProps); render(): JSX.Element; } export declare const DocumentCardPreview: React_2.FunctionComponent; export declare const DocumentCardStatus: React_2.FunctionComponent; /** * {@docCategory DocumentCard} */ declare class DocumentCardStatusBase extends React_2.Component { private _classNames; constructor(props: IDocumentCardStatusProps); render(): JSX.Element; } export declare const DocumentCardTitle: React_2.FunctionComponent; /** * {@docCategory DocumentCard} */ declare class DocumentCardTitleBase extends React_2.Component { static contextType: React_2.Context; private _titleElement; private _classNames; private _async; private _events; private _clientWidth; private _timerId; constructor(props: IDocumentCardTitleProps); componentDidUpdate(prevProps: IDocumentCardTitleProps): void; componentDidMount(): void; componentWillUnmount(): void; render(): JSX.Element; /** * In measuring, it will render a same style text with whiteSpace: 'nowrap', to get overflow rate. * So that the logic can predict truncated text well. */ private get _needMeasurement(); 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 { doesElementContainFocus } 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_2.FunctionComponent; export declare const DropdownBase: React_2.FunctionComponent; export { EdgeChromiumHighContrastSelector } export { elementContains } export { elementContainsAttribute } /** * {@docCategory Button} */ export declare enum ElementType { /** `button` element. */ button = 0, /** `a` element. */ anchor = 1 } export { enableBodyScroll } export { EventGroup } export declare const ExpandingCard: React_2.FunctionComponent; export declare class ExpandingCardBase extends React_2.Component { static defaultProps: { compactCardHeight: number; expandedCardHeight: number; directionalHintFixed: boolean; }; private _classNames; private _expandedElem; private _async; constructor(props: IExpandingCardProps); componentDidMount(): void; componentWillUnmount(): void; render(): JSX.Element; private _onKeyDown; private _onRenderCompactCard; private _onRenderExpandedCard; private _checkNeedsScroll; } /** * {@docCategory HoverCard} */ export declare enum ExpandingCardMode { /** * To have top compact card only */ compact = 0, /** * To have both top compact and bottom expanded card */ expanded = 1 } export { extendComponent } /** * {@docCategory ExtendedPeoplePicker} */ export declare class ExtendedPeoplePicker extends BaseExtendedPeoplePicker { } export declare class ExtendedSelectedItem extends React_2.Component { protected persona: React_2.RefObject; constructor(props: ISelectedPeopleItemProps); render(): JSX.Element; private _onClickIconButton; } /** * @deprecated This component is deprecated as of `@fluentui/react` version 8. Use `ThemeProvider` instead. */ export declare const Fabric: React_2.FunctionComponent; export declare const FabricBase: React_2.FunctionComponent; export { FabricPerformance } export declare enum FabricSlots { themePrimary = 0, themeLighterAlt = 1, themeLighter = 2, themeLight = 3, themeTertiary = 4, themeSecondary = 5, themeDarkAlt = 6, themeDark = 7, themeDarker = 8, neutralLighterAlt = 9, neutralLighter = 10, neutralLight = 11, neutralQuaternaryAlt = 12, neutralQuaternary = 13, neutralTertiaryAlt = 14, neutralTertiary = 15, neutralSecondaryAlt = 16, neutralSecondary = 17, neutralPrimaryAlt = 18, neutralPrimary = 19, neutralDark = 20, black = 21, white = 22 } /** * The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person. */ export declare const Facepile: React_2.FunctionComponent; /** * FacePile with no default styles. * [Use the `styles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Component-Styling) */ export declare class FacepileBase extends React_2.Component { static defaultProps: IFacepileProps; private _ariaDescriptionId; private _classNames; constructor(props: IFacepileProps); render(): JSX.Element; protected onRenderAriaDescription(): "" | JSX.Element | undefined; private _onRenderVisiblePersonas; private _getPersonaControl; private _getPersonaCoinControl; private _getElementWithOnClickEvent; private _getElementWithoutOnClickEvent; private _getElementProps; private _getOverflowElement; private _getDescriptiveOverflowElement; private _getIconElement; private _getAddNewElement; private _onPersonaClick; private _onPersonaMouseMove; private _onPersonaMouseOut; private _renderInitials; private _renderInitialsNotPictured; } export { filteredAssign } export { find } export { findElementRecursive } export { findIndex } export { findScrollableParent } export { FirstWeekOfYear } export { fitContentToBounds } export { FitMode } export { flatten } export declare class FloatingPeoplePicker extends BaseFloatingPeoplePicker { static defaultProps: any; } export { FluentTheme } export { focusAsync } export { focusClear } export { focusFirstChild } export { FocusRects } export { FocusRectsContext } export { FocusRectsProvider } /** * A special Callout that uses FocusTrapZone to trap focus * @param props - Props for the component */ export declare const FocusTrapCallout: React_2.FunctionComponent; export declare const FocusTrapZone: React_2.FunctionComponent & { /** * Stack of active FocusTrapZone identifiers, exposed for testing purposes only. * (This is always set, just marked as optional to avoid a cast in the component definition.) * @internal */ focusStack?: string[]; }; export { FocusZone } export { FocusZoneDirection } export { FocusZoneTabbableElements } export { FontClassNames } export { fontFace } /** * Fast icon component which only supports font glyphs (not images) and can't be targeted by customizations. * To style the icon, use `className` or reference `ms-Icon` in CSS. * {@docCategory Icon} */ export declare const FontIcon: React_2.FunctionComponent; export { FontSizes } export { FontWeights } export { format } export { formProperties } export declare const getActivityItemClassNames: (styles: IActivityItemStyles, className: string, activityPersonas: Array, isCompact: boolean) => IActivityItemClassNames; export declare const getActivityItemStyles: (theme?: ITheme, customStyles?: IActivityItemStyles, animateBeaconSignal?: IActivityItemProps['animateBeaconSignal'], beaconColorOne?: IActivityItemProps['beaconColorOne'], beaconColorTwo?: IActivityItemProps['beaconColorTwo'], isCompact?: IActivityItemProps['isCompact']) => IActivityItemStyles; export declare function getAllSelectedOptions(options: ISelectableOption[], selectedIndices: number[]): ISelectableOption[]; /** * Gets the aria-describedby value to put on the component with this keytip. * * @param keySequences - KeySequences of the keytip. * @returns The aria-describedby value to set on the component with this keytip. */ export declare function getAriaDescribedBy(keySequences: string[]): string; export declare function getBackgroundShade(color: IColor, shade: Shade, isInverted?: boolean): IColor | null; export declare function getBasePickerStyles(props: IBasePickerStyleProps): IBasePickerStyles; export declare function getBoundsFromTargetWindow(target: Element | MouseEvent | Point | Rectangle | null, targetWindow: IWindowWithSegments): IRectangle; export declare const getCellStyles: (props: { theme: ITheme; cellStyleProps?: ICellStyleProps | undefined; }) => IStyle; export { getChildren } /** * Converts an HSV color (and optional alpha value) to a color object. * If `a` is not given, a default of 100 is used. * Hex in the returned value will *not* be prefixed with #. * If `a` is unspecified or 100, the result's `str` property will contain a hex value * (*not* prefixed with #) */ export declare function getColorFromHSV(hsv: IHSV, a?: number): IColor; /** Converts an RGBA color to a color object (alpha defaults to 100). */ export declare function getColorFromRGBA(rgba: IRGB): IColor; /** * Converts a CSS color string to a color object. * Note that hex colors *must* be prefixed with # to be considered valid. * * `inputColor` will be used unmodified as the `str` property of the returned object. * Alpha defaults to 100 if not specified in `inputColor`. * Returns undefined if the color string is invalid/not recognized. */ export declare function getColorFromString(inputColor: string, doc?: Document): IColor | undefined; export declare const getCommandBarStyles: (props: ICommandBarStyleProps) => ICommandBarStyles; export declare const getCommandButtonStyles: (customStyles: IButtonStyles | undefined) => IButtonStyles; /** * @deprecated Will be removed in \>= 7.0. * This is a package-internal method that has been depended on. * It is being kept in this form for backwards compatibility. * @internal */ export declare const getContextualMenuItemClassNames: (theme: ITheme, disabled: boolean, expanded: boolean, checked: boolean, isAnchorLink: boolean, knownIcon: boolean, itemClassName?: string, dividerClassName?: string, iconClassName?: string, subMenuClassName?: string, primaryDisabled?: boolean, className?: string) => IContextualMenuItemStyles; /** * Wrapper function for generating ContextualMenuItem classNames which adheres to * the getStyles API, but invokes memoized className generator function with * primitive values. * * @param props - the ContextualMenuItem style props used to generate its styles. */ export declare const getContextualMenuItemStyles: (props: IContextualMenuItemStyleProps) => IContextualMenuItemStyles; export declare function getContrastRatio(color1: IColor, color2: IColor): number; export { getDatePartHashValue } export { getDateRangeArray } export declare const getDetailsColumnStyles: (props: IDetailsColumnStyleProps) => IDetailsColumnStyles; export declare const getDetailsHeaderStyles: (props: IDetailsHeaderStyleProps) => IDetailsHeaderStyles; export declare const getDetailsListStyles: (props: IDetailsListStyleProps) => IDetailsListStyles; export declare const getDetailsRowCheckStyles: (props: IDetailsRowCheckStyleProps) => IDetailsRowCheckStyles; export declare const getDetailsRowStyles: (props: IDetailsRowStyleProps) => IDetailsRowStyles; export { getDistanceBetweenPoints } export { getDocument } export { getEdgeChromiumNoHighContrastAdjustSelector } export { getElementIndexPath } export { getEndDateOfWeek } export { getFadedOverflowStyle } export { getFirstFocusable } export { getFirstTabbable } export { getFirstVisibleElementFromSelector } export { getFocusableByIndexPath } export { getFocusOutlineStyle } export { getFocusStyle } /** * Memoized helper for rendering a FontIcon. * @param iconName - The name of the icon to use from the icon font. * @param className - Class name for styling the icon. * @param ariaLabel - Label for the icon for the benefit of screen readers. * {@docCategory Icon} */ export declare const getFontIcon: (iconName: string, className?: string, ariaLabel?: string) => React_2.ReactElement | null; /** * Converts a color hue to an HTML color string (with # prefix). * This implementation ignores all components of `color` except hue. */ export declare function getFullColorString(color: IColor): string; export { getGlobalClassNames } /** * Takes an array of groups and returns a count of the groups and all descendant groups. * @param groups - The array of groups to count. */ export declare const GetGroupCount: (groups: IGroup[] | undefined) => number; export { getHighContrastNoAdjustStyle } export { getIcon } export { getIconClassName } export declare const getIconContent: (iconName?: string) => IIconContent | null; export { getId } export declare function getInitialResponsiveMode(): ResponsiveMode; export { getInitials } export { getInputFocusStyle } export { getLanguage } export { getLastFocusable } export { getLastTabbable } /** * Gets the number of layers currently registered with a host id. * @param hostId - Id of the layer host. * @returns The number of layers currently registered with the host. */ export declare function getLayerCount(hostId: string): number; /** * Gets the Layer Host instance associated with a hostId, if applicable. * @param hostId - Id of the layer host * @returns A component ref for the associated layer host. */ export declare function getLayerHost(hostId: string): ILayerHost | undefined; /** * Get the default target selector when determining a host */ export declare function getLayerHostSelector(): string | undefined; export declare const getLayerStyles: (props: ILayerStyleProps) => ILayerStyles; /** * Gets the maximum height that a rectangle can have in order to fit below or above a target. * If the directional hint specifies a left or right edge (i.e. leftCenter) it will limit the height to the topBorder * of the target given. * If no bounds are provided then the window is treated as the bounds. */ export declare function getMaxHeight(target: Element | MouseEvent | Point | Rectangle, targetEdge: DirectionalHint, gapSpace?: number, bounds?: IRectangle, coverTarget?: boolean, win?: Window): number; /** * Returns a simple object is able to store measurements with a given key. */ export declare const getMeasurementCache: () => { /** * Checks if the provided data has a cacheKey. If it has a cacheKey and there is a * corresponding entry in the measurementsCache, then it will return that value. * Returns undefined otherwise. */ getCachedMeasurement: (data: any) => number | undefined; /** * Should be called whenever there is a new measurement associated with a given data object. * If the data has a cacheKey, store that measurement in the measurementsCache. */ addMeasurementToCache: (data: any, measurement: number) => void; }; export declare const getMenuItemStyles: (theme: ITheme) => IMenuItemStyles; export { getMonthEnd } export { getMonthStart } export { getNativeElementProps } export { getNativeProps } export { getNextElement } /** * Returns a function that is able to compute the next state for the ResizeGroup given the current * state and any measurement updates. */ export declare const getNextResizeGroupStateProvider: (measurementCache?: { /** * Checks if the provided data has a cacheKey. If it has a cacheKey and there is a * corresponding entry in the measurementsCache, then it will return that value. * Returns undefined otherwise. */ getCachedMeasurement: (data: any) => number | undefined; /** * Should be called whenever there is a new measurement associated with a given data object. * If the data has a cacheKey, store that measurement in the measurementsCache. */ addMeasurementToCache: (data: any, measurement: number) => void; }) => { getNextState: (props: IResizeGroupProps, currentState: IResizeGroupState, getElementToMeasureDimension: () => number, newContainerDimension?: number) => IResizeGroupState | undefined; shouldRenderDataForMeasurement: (dataToMeasure: any | undefined) => boolean; getInitialResizeGroupState: (data: any) => IResizeGroupState; }; /** * Returns the opposite edge of the given RectangleEdge. */ export declare function getOppositeEdge(edge: RectangleEdge): RectangleEdge; export { getParent } export declare function getPeoplePickerItemStyles(props: IPeoplePickerItemSelectedStyleProps): IPeoplePickerItemSelectedStyles; export declare function getPeoplePickerItemSuggestionStyles(props: IPeoplePickerItemSuggestionStyleProps): IPeoplePickerItemSuggestionStyles; /** * Gets the hex color string (prefixed with #) for the given persona props. * This is the logic used internally by the Persona control. * @param props - Current persona props * @returns Hex color string prefixed with # */ export declare function getPersonaInitialsColor(props: Pick): string; export { getPlaceholderStyles } export { getPreviousElement } export { getPropsWithDefaults } export { getRect } export { getResourceUrl } /** * Hook to get the current responsive mode (window size category). * @param currentWindow - Use this window when determining the responsive mode. */ export declare function getResponsiveMode(currentWindow: Window | undefined): ResponsiveMode; export { getRTL } export { getRTLSafeKeyCode } export { getScreenSelector } export { getScrollbarWidth } /** * Given a color and a shade specification, generates the requested shade of the color. * Logic: * if white * darken via tables defined above * if black * lighten * if light * strongen * if dark * soften * else default * soften or strongen depending on shade# * @param color - The base color whose shade is to be computed * @param shade - The shade of the base color to compute * @param isInverted - Default false. Whether the given theme is inverted (reverse strongen/soften logic) */ export declare function getShade(color: IColor, shade: Shade, isInverted?: boolean): IColor | null; export declare const getShimmeredDetailsListStyles: (props: IShimmeredDetailsListStyleProps) => IShimmeredDetailsListStyles; export declare const getSplitButtonClassNames: (styles: IButtonStyles, disabled: boolean, expanded: boolean, checked: boolean, primaryDisabled?: boolean) => ISplitButtonClassNames; export { getStartDateOfWeek } export declare function getSubmenuItems(item: IContextualMenuItem, options?: { target?: Target; }): IContextualMenuItem[] | undefined; export declare function getSuggestionsItemStyles(props: ISuggestionsItemStyleProps): ISuggestionsItemStyles; export declare function getSuggestionsStyles(props: ISuggestionsStyleProps): ISuggestionsStyles; export declare function getTagItemStyles(props: ITagItemStyleProps): ITagItemStyles; export declare function getTagItemSuggestionStyles(props: ITagItemSuggestionStyleProps): ITagItemSuggestionStyles; export declare function getTextFieldStyles(props: ITextFieldStyleProps): ITextFieldStyles; export { getTheme } export { getThemedContext } export { getVirtualParent } export { getWeekNumber } export { getWeekNumbersInMonth } export { getWindow } export { getYearEnd } export { getYearStart } export { GlobalClassNames } export { GlobalSettings } export declare const GroupedList: React_2.FunctionComponent; export declare class GroupedListBase extends React_2.Component implements IGroupedList { static defaultProps: { selectionMode: SelectionMode_2; isHeaderVisible: boolean; groupProps: {}; compact: boolean; }; private _classNames; private _list; private _isSomeGroupExpanded; static getDerivedStateFromProps(nextProps: IGroupedListProps, previousState: IGroupedListState): IGroupedListState; constructor(props: IGroupedListProps); scrollToIndex(index: number, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode): void; getStartItemIndexInView(): number; componentDidMount(): void; render(): JSX.Element; forceUpdate(): void; toggleCollapseAll(allCollapsed: boolean): void; private _setGroupsCollapsedState; private _renderGroup; private _returnOne; private _getDefaultGroupItemLimit; private _getGroupItemLimit; private _getGroupHeight; private _getPageHeight; private _getGroupKey; private _getGroupNestingDepth; private _onToggleCollapse; private _onToggleSelectGroup; private _isInnerZoneKeystroke; private _forceListUpdates; private _onToggleSummarize; private _getPageSpecification; private _computeIsSomeGroupExpanded; private _updateIsSomeGroupExpanded; } export declare class GroupedListSection extends React_2.Component { private _root; private _list; private _subGroupRefs; private _id; private _events; private _dragDropSubscription?; private _droppingClassName; constructor(props: IGroupedListSectionProps); componentDidMount(): void; componentWillUnmount(): void; componentDidUpdate(previousProps: IGroupedListSectionProps): void; render(): JSX.Element; forceUpdate(): void; forceListUpdate(): void; private _onRenderGroupHeader; private _onRenderGroupShowAll; private _onRenderGroupFooter; private _onSelectionChange; private _onRenderGroupCell; private _onRenderGroup; private _renderSubGroup; private _returnOne; private _getGroupKey; /** * collect all the data we need to enable drag/drop for a group */ private _getGroupDragDropOptions; /** * update groupIsDropping state based on the input value, which is used to change style during drag and drop * * @param newValue - new isDropping state value * @param event - the event trigger dropping state change which can be dragenter, dragleave etc */ private _updateDroppingState; /** * get the correct css class to reflect the dropping state for a given group * * If the group is the current drop target, return the default dropping class name * Otherwise, return ''; * */ private _getDroppingClassName; } /** * NOTE: GroupedListV2 is "unstable" and meant for preview use. It passes * the same test suite as GroupedList but it is an entirely new implementation * so it may have bugs and implementation details may change without notice. * * GroupedListV2 is an API-compatible replacement for GroupedList with a new implementation * that addresses issues GroupedList has with virtualizing nested lists under certain * conditions. */ export declare const GroupedListV2_unstable: React_2.FunctionComponent; export declare const GroupFooter: React_2.FunctionComponent; export declare const GroupHeader: React_2.FunctionComponent; export declare const GroupShowAll: React_2.FunctionComponent; export declare const GroupSpacer: React_2.FunctionComponent; export { hasHorizontalOverflow } export { hasOverflow } export { hasVerticalOverflow } export declare const HEADER_HEIGHT = 42; /** Regular expression matching only valid hexadecimal chars */ export declare const HEX_REGEX: RegExp; export { hiddenContentStyle } export { HighContrastSelector } export { HighContrastSelectorBlack } export { HighContrastSelectorWhite } export { hoistMethods } export { hoistStatics } export declare const HoverCard: React_2.FunctionComponent; export declare class HoverCardBase extends React_2.Component implements IHoverCard { static defaultProps: { cardOpenDelay: number; cardDismissDelay: number; expandedCardOpenDelay: number; instantOpenOnClick: boolean; setInitialFocus: boolean; openHotKey: number; type: HoverCardType; }; private _hoverCard; private _dismissTimerId; private _openTimerId; private _currentMouseTarget; private _nativeDismissEvent; private _childDismissEvent; private _classNames; private _async; private _events; constructor(props: IHoverCardProps); componentDidMount(): void; componentWillUnmount(): void; componentDidUpdate(prevProps: IHoverCardProps, prevState: IHoverCardState): void; dismiss: (withTimeOut?: boolean) => void; render(): JSX.Element; private _getTargetElement; private _shouldBlockHoverCard; private _cardOpen; private _executeCardOpen; /** * Hide HoverCard * How we dismiss the card depends on where the callback is coming from. * This is provided by the `isNativeEvent` argument. * true: Event is coming from event listeners set up in componentDidMount. * false: Event is coming from the `onLeave` prop from the HoverCard component. */ private _cardDismiss; private _setDismissedState; private _instantOpenAsExpanded; private _setEventListeners; } /** * {@docCategory HoverCard} */ export declare enum HoverCardType { /** * Plain card consisting of one part responsive to the size of content. */ plain = "PlainCard", /** * File card consisting of two parts: compact and expanded. Has some default sizes if not specified. */ expanding = "ExpandingCard" } /** Converts HSL components to an HSV color. */ export declare function hsl2hsv(h: number, s: number, l: number): IHSV; /** Converts HSL components to an RGB color. Does not set the alpha value. */ export declare function hsl2rgb(h: number, s: number, l: number): IRGB; /** Converts HSV components to a hex color string (without # prefix). */ export declare function hsv2hex(h: number, s: number, v: number): string; /** Converts HSV components to an HSL color. */ export declare function hsv2hsl(h: number, s: number, v: number): IHSL; /** Converts HSV components to an RGB color. Does not set the alpha value. */ export declare function hsv2rgb(h: number, s: number, v: number): IRGB; export { htmlElementProperties } /** * {@docCategory IAccessiblePopupProps} */ export declare interface IAccessiblePopupProps { /** * Sets the element to focus on when exiting the control's FocusTrapZone. * @defaultvalue The `element.target` that triggered the control opening. */ elementToFocusOnDismiss?: HTMLElement; /** * If false (the default), the control's FocusTrapZone will restore focus to the element which activated it * once the trap zone is unmounted or disabled. Set to true to disable this behavior. * @defaultvalue false */ disableRestoreFocus?: boolean; /** * @deprecated Use `disableRestoreFocus` (it has the same behavior and a clearer name). */ ignoreExternalFocusing?: boolean; /** * Whether control should force focus inside its focus trap zone. * @defaultvalue true */ forceFocusInsideTrap?: boolean; /** * Class name (not actual selector) for first focusable item. Do not append a dot. */ firstFocusableSelector?: string | (() => string); /** * Aria label on close button. */ closeButtonAriaLabel?: string; /** * Whether this control will allow clicks outside its FocusTrapZone. * @defaultvalue false */ isClickableOutsideFocusTrap?: boolean; } export declare interface IActivityItemClassNames { root?: string; activityContent?: string; activityText?: string; personaContainer?: string; activityPersona?: string; activityTypeIcon?: string; commentText?: string; timeStamp?: string; pulsingBeacon?: string; } /** * {@docCategory ActivityItem} */ export declare interface IActivityItemProps extends React_2.AllHTMLAttributes { /** * An element describing the activity that took place. If no `activityDescription`, `activityDescriptionText`, or * `onRenderActivityDescription` are included, no description of the activity is shown. */ activityDescription?: React_2.ReactNode[] | React_2.ReactNode; /** * Text describing the activity that occurred and naming the people involved in it. * @deprecated Use `activityDescription` instead. */ activityDescriptionText?: string; /** * An element containing an icon shown next to the activity item. */ activityIcon?: React_2.ReactNode; /** * If `activityIcon` is not set, the personas in this array will be used as the icon for the this activity item. */ activityPersonas?: IPersonaSharedProps[]; /** * An element containing the text of comments or \@mention messages. * If no `comments`, `commentText`, or `onRenderComments` are included, no comments are shown. */ comments?: React_2.ReactNode[] | React_2.ReactNode; /** * Text of comments or \@mention messages. * @deprecated Use `comments` instead. */ commentText?: string; /** * Indicated if the compact styling should be used. */ isCompact?: boolean; /** * A renderer for the description of the current activity. */ onRenderActivityDescription?: IRenderFunction; /** * A renderer that adds the text of a comment below the activity description. */ onRenderComments?: IRenderFunction; /** * A renderer to create the icon next to the activity item. */ onRenderIcon?: IRenderFunction; /** * Custom renderer for a time stamp. If not included, `timeStamp` is shown as plain text below the activity. */ onRenderTimeStamp?: IRenderFunction; /** * Optional styling for the elements within the activity item. */ styles?: IActivityItemStyles; /** * Element shown as a timestamp on this activity. If not included, no timestamp is shown. */ timeStamp?: string | React_2.ReactNode[] | React_2.ReactNode; /** * Beacon color one */ beaconColorOne?: string; /** * Beacon color two */ beaconColorTwo?: string; /** * Enables/disables the beacon that radiates from the center of the center of the activity icon. * Signals an activity has started. * @defaultvalue false */ animateBeaconSignal?: boolean; } /** * {@docCategory ActivityItem} */ export declare interface IActivityItemStyles extends IShadowDomStyle { /** * Styles applied to the root activity item container. */ root?: IStyle; /** * Styles applied to the root activity item container. */ pulsingBeacon?: IStyle; /** * Styles applied to the main container of the activity's description. */ activityContent?: IStyle; /** * Styles applied to the persona of the user that did this activity. */ activityPersona?: IStyle; /** * Styles applied to the activity's description. */ activityText?: IStyle; /** * Styles applied to the icon indicating the type of the activity. Only shown when personas are unavailable. */ activityTypeIcon?: IStyle; /** * Styles applied to the text of comments. */ commentText?: IStyle; /** * Styles applied to personas when two users are involved in a single activity. */ doublePersona?: IStyle; /** * Styles applied to root in the compact variant. */ isCompactRoot?: IStyle; /** * Styles applied to personas and icons in the compact variant. */ isCompactIcon?: IStyle; /** * Styles applied to main text container in the compact variant. */ isCompactContent?: IStyle; /** * Styles applied to personas in the compact variant. */ isCompactPersona?: IStyle; /** * Styles applied to a wrapper around personas in the compact variant. */ isCompactPersonaContainer?: IStyle; /** * Styles applied to the container of the persona image or activity type icon. */ personaContainer?: IStyle; /** * Styles applied to the timestamp at the end of each activity item. */ timeStamp?: IStyle; /** * Styles applied to the timestamp in compact mode. * This can occur if a host overrides the render behavior to force the timestamp to render. */ isCompactTimeStamp?: IStyle; } export { IAnimationStyles } export { IAnimationVariables } /** * {@docCategory Announced} */ export declare interface IAnnouncedProps extends IReactProps, React_2.HTMLAttributes { /** * The status message the screen reader should announce. */ message?: string; /** * Priority with which the screen reader should treat updates to this region. * @default 'polite' */ 'aria-live'?: 'off' | 'polite' | 'assertive'; /** * Optionally render the root of this component as another component type or primitive. * The custom type **must** preserve any children or native props passed in. * @default 'div' */ as?: React_2.ElementType; /** Call to provide customized styling that will layer on top of the variant rules. */ styles?: IStyleFunctionOrObject<{}, IAnnouncedStyles>; } /** * {@docCategory Announced} */ export declare type IAnnouncedStyleProps = Pick; /** * {@docCategory Announced} */ export declare interface IAnnouncedStyles { /** * Style override for the root element. */ root: IStyle; /** * Style override for the screen reader text. */ screenReaderText: IStyle; } export { IAsAsyncOptions } /** * {@docCategory Autofill} */ export declare interface IAutofill { /** * The current index of the cursor in the input area. Returns -1 if the input element * is not ready. */ cursorLocation: number | null; /** * Whether there is a value selected in the input area. */ isValueSelected: boolean; /** * The current text value that the user has entered. */ value: string; /** * The current index of where the selection starts. Returns -1 if the input element * is not ready. */ selectionStart: number | null; /** * The current index of where the selection ends. Returns -1 if the input element * is not ready. */ selectionEnd: number | null; /** * The current input element. */ inputElement: HTMLInputElement | null; /** * Focus the input element. */ focus(): void; /** * Clear all text in the input. Sets value to `''`. */ clear(): void; } /** * {@docCategory Autofill} */ export declare interface IAutofillProps extends React_2.InputHTMLAttributes { /** * Gets the component ref. */ componentRef?: IRefObject; /** * The suggested autofill value that will display. */ suggestedDisplayValue?: string; /** * A callback for when the current input value changes. Called after * the state has been changed. * * @param composing - true if the change event was triggered while the * inner input was in the middle of a multi-character composition. * (for example, jp-hiragana IME input) */ onInputValueChange?: (newValue?: string, composing?: boolean) => void; /** * When the user uses left arrow, right arrow, clicks, or deletes text, autofill is disabled * since the user has taken control. It is automatically re-enabled when the user enters text and the * cursor is at the end of the text in the input box. This prop can be used to override the * default list of key presses that will re-enable autofill. * @defaultvalue [KeyCodes.down, KeyCodes.up] */ enableAutofillOnKeyPress?: KeyCodes[]; /** * The default value to be visible. This is different from placeholder * because it actually sets the current value of the picker. * Note: Updates to this prop will not be respected. */ defaultVisibleValue?: string; /** * Handler for checking and updating the value if needed in `componentWillReceiveProps`. * Returns the updated value to set, if needed. * * @deprecated use standard input `value` prop instead if the autofill should act like a controlled component */ updateValueInWillReceiveProps?: () => string | null; /** * Handler for checking if the full value of the input should be selected in `componentDidUpdate`. * Returns whether the full value of the input should be selected. */ shouldSelectFullInputValueInComponentDidUpdate?: () => boolean; /** * A callback used to modify the input string. Will entirely override the default behavior if provided. * If you just want to be notified of changes, use `onInputValueChange` instead. * Called before the state has been updated. * * @param composing - true if the change event was triggered while the * inner input was in the middle of a multi-character composition. * (for example, jp-hiragana IME input) * @deprecated To control the value, pass in `value` like in any other controlled component. * To be notified of changes, use `onInputValueChange`. */ onInputChange?: (value: string, composing: boolean) => string | void; /** * Should the value of the input be selected? True if we're focused on our input, false otherwise. * We need to explicitly not select the text in the autofill if we are no longer focused. * In IE11, selecting an input will also focus the input, causing other element's focus to be stolen. */ preventValueSelection?: boolean; } export declare interface IAutofillState { inputValue: string; isComposing: boolean; } /** * {@docCategory Button} */ export declare interface IBaseButtonProps extends IButtonProps { baseClassName?: string; variantClassName?: string; } /** * {@docCategory Button} */ export declare interface IBaseButtonState { menuHidden: boolean; } /** * Interface containing props common for all types of cards. */ declare interface IBaseCardProps extends React_2.HTMLAttributes { /** * Optional callback to access the TComponent interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * Additional CSS class(es) to apply to the Card content wrapper div. */ className?: string; /** * How the element should be positioned * @defaultvalue DirectionalHint.bottomLeftEdge */ directionalHint?: DirectionalHint; /** * Make callout content show on the set side * @defaultvalue true */ directionalHintFixed?: boolean; /** * Focus on first element by default on card or not */ firstFocus?: boolean; /** * The gap between the card and the target * @defaultvalue 0 */ gapSpace?: number; /** * Callback upon focus or mouse enter event */ onEnter?: (ev?: any) => void; /** * Callback upon blur or mouse leave event */ onLeave?: (ev?: any) => void; /** * Item to be returned with onRender functions */ renderData?: any; /** * Custom styles for this component */ styles?: IStyleFunctionOrObject; /** * Element to anchor the card to. */ targetElement?: HTMLElement; /** * Theme provided by HOC. */ theme?: ITheme; /** * Trap focus or not */ trapFocus?: boolean; /** * Custom overriding props to Callout */ calloutProps?: ICalloutProps; } /** * Interface containing styleProps common for all types of cards. */ declare interface IBaseCardStyleProps { /** * ClassName to inject into wrapper div of the content. */ className?: string; /** * Theme provided by High-Order Component. */ theme: ITheme; } /** * Interface containing style sections common for all types of cards. */ declare interface IBaseCardStyles { /** * Style for the root element in the default enabled, non-toggled state. */ root?: IStyle; } export declare interface IBaseExtendedPicker { /** Forces the picker to resolve */ forceResolve?: () => void; /** Gets the current value of the input. */ items: T[] | undefined; /** Sets focus to the input. */ focus: () => void; } export declare interface IBaseExtendedPickerProps { /** * Ref of the component */ componentRef?: IRefObject>; /** * Header/title element for the picker */ headerComponent?: JSX.Element; /** * Initial items that have already been selected and should appear in the people picker. */ defaultSelectedItems?: T[]; /** * A callback for when the selected list of items changes. */ onChange?: (items?: T[]) => void; /** * A callback for when text is pasted into the input */ onPaste?: (pastedText: string) => T[]; /** * A callback for when the user put focus on the picker */ onFocus?: React_2.FocusEventHandler; /** * A callback for when the user moves the focus away from the picker */ onBlur?: React_2.FocusEventHandler; /** * ClassName for the picker. */ className?: string; /** * Function that specifies how the floating picker will appear. */ onRenderFloatingPicker: React_2.ComponentType>; /** * Function that specifies how the floating picker will appear. */ onRenderSelectedItems: React_2.ComponentType>; /** * Floating picker properties */ floatingPickerProps: IBaseFloatingPickerProps; /** * Selected items list properties */ selectedItemsListProps: IBaseSelectedItemsListProps; /** * Autofill input native props * @defaultvalue undefined */ inputProps?: IInputProps; /** * Flag for disabling the picker. * @defaultvalue false */ disabled?: boolean; /** * Restrict the amount of selectable items. * @defaultvalue undefined */ itemLimit?: number; /** * A callback to process a selection after the user selects a suggestion from the picker. * The returned item will be added to the selected items list */ onItemSelected?: (selectedItem?: T) => T | PromiseLike; /** * A callback on when an item was added to the selected item list */ onItemAdded?: (addedItem: T) => void; /** * A callback on when an item or items were removed from the selected item list */ onItemsRemoved?: (removedItems: T[]) => void; /** * If using as a controlled component use selectedItems here instead of the SelectedItemsList */ selectedItems?: T[]; /** * If using as a controlled component use suggestionItems here instead of FloatingPicker */ suggestionItems?: T[]; /** * Focus zone props */ focusZoneProps?: IFocusZoneProps; /** * Current rendered query string that correlates to the rendered result **/ currentRenderedQueryString?: string; } export declare interface IBaseExtendedPickerState { queryString: string | null; } export declare interface IBaseFloatingPicker { /** Whether the suggestions are shown */ isSuggestionsShown: boolean; /** On queryString changed */ onQueryStringChanged: (input: string) => void; /** Hides the picker */ hidePicker: () => void; /** Shows the picker * @param updateValue - Optional param to indicate whether to update the query string */ showPicker: (updateValue?: boolean) => void; /** Gets the suggestions */ suggestions: any[]; /** Gets the input text */ inputText: string; } export declare interface IBaseFloatingPickerProps extends React_2.ClassAttributes { componentRef?: IRefObject; /** * The suggestions store */ suggestionsStore: SuggestionsStore; /** * The suggestions to show on zero query, return null if using as a controlled component */ onZeroQuerySuggestion?: (selectedItems?: T[]) => T[] | PromiseLike | null; /** * The input element to listen on events */ inputElement?: HTMLInputElement | null; /** * Function that specifies how an individual suggestion item will appear. */ onRenderSuggestionsItem?: (props: T, itemProps: ISuggestionItemProps) => JSX.Element; /** * A callback for what should happen when a person types text into the input. * Returns the already selected items so the resolver can filter them out. * If used in conjunction with resolveDelay this will only kick off after the delay throttle. * Return null if using as a controlled component */ onResolveSuggestions: (filter: string, selectedItems?: T[]) => T[] | PromiseLike | null; /** * A callback for when the input has been changed */ onInputChanged?: (filter: string) => void; /** * The delay time in ms before resolving suggestions, which is kicked off when input has been changed. * e.g. If a second input change happens within the resolveDelay time, the timer will start over. * Only until after the timer completes will onResolveSuggestions be called. */ resolveDelay?: number; /** * A callback for when a suggestion is clicked */ onChange?: (item: T) => void; /** * ClassName for the picker. */ className?: string; /** * The properties that will get passed to the Suggestions component. */ pickerSuggestionsProps?: IBaseFloatingPickerSuggestionProps; /** * The properties that will get passed to the Callout component. */ pickerCalloutProps?: ICalloutProps; /** * A callback for when an item is removed from the suggestion list */ onRemoveSuggestion?: (item: T) => void; /** * A function used to validate if raw text entered into the well can be added */ onValidateInput?: (input: string) => boolean; /** * The text to display while searching for more results in a limited suggestions list */ searchingText?: ((props: { input: string; }) => string) | string; /** * Function that specifies how arbitrary text entered into the well is handled. */ createGenericItem?: (input: string, isValid: boolean) => ISuggestionModel; /** * The callback that should be called to see if the force resolve command should be shown */ showForceResolve?: () => boolean; /** * The items that the base picker should currently display as selected. * If this is provided then the picker will act as a controlled component. */ selectedItems?: T[]; /** * A callback to get text from an item. Used to autofill text in the pickers. */ getTextFromItem?: (item: T, currentValue?: string) => string; /** * Width for the suggestions callout */ calloutWidth?: number; /** * The callback that should be called when the suggestions are shown */ onSuggestionsShown?: () => void; /** * The callback that should be called when the suggestions are hidden */ onSuggestionsHidden?: () => void; /** * If using as a controlled component, the items to show in the suggestion list */ suggestionItems?: T[]; } export declare interface IBaseFloatingPickerState { queryString: string; suggestionsVisible?: boolean; didBind: boolean; } /** * Props which are passed on to the inner Suggestions component */ export declare type IBaseFloatingPickerSuggestionProps = Pick, 'shouldSelectFirstItem' | 'headerItemsProps' | 'footerItemsProps' | 'showRemoveButtons'>; /** * BasePicker component. * {@docCategory Pickers} */ export declare interface IBasePicker { /** Gets the current value of the input. */ items: T[] | undefined; /** Sets focus to the focus zone. */ focus: () => void; /** Set focus to the input */ focusInput: () => void; /** * When called, will take the currently selected suggestion and complete it. * If called with forceComplete true, it will attempt to force the current suggestion * to complete, must provide both createGenericSuggestion, so the text can be turned into * an object in the right shape, and onValidateInput, so the object knows if it's correct or not. */ completeSuggestion: (forceComplete?: boolean) => void; } /** * Type T is the type of the item that is displayed * and searched for by the picker. For example, if the picker is * displaying persona's then type T could either be of Persona or IPersona props * {@docCategory Pickers} */ export declare interface IBasePickerProps extends IReactProps { /** * Optional callback to access the IBasePicker interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject>; /** * Function that specifies how the selected item will appear. */ onRenderItem?: (props: IPickerItemProps) => JSX.Element; /** * Function that specifies how an individual suggestion item will appear. */ onRenderSuggestionsItem?: (props: T, itemProps: ISuggestionItemProps) => JSX.Element; /** * A callback for what should happen when a person types text into the input. * Returns the already selected items so the resolver can filter them out. * If used in conjunction with resolveDelay this will only kick off after the delay throttle. */ onResolveSuggestions: (filter: string, selectedItems?: T[]) => T[] | PromiseLike; /** * The delay time in ms before resolving suggestions, which is kicked off when input has been changed. * e.g. If a second input change happens within the resolveDelay time, the timer will start over. * Only until after the timer completes will onResolveSuggestions be called. */ resolveDelay?: number; /** * A callback for what should happen when a user clicks within the input area. * @deprecated Please use `onEmptyResolveSuggestions` instead, as the suggestions aren't about * setting focus as they are about resolving suggestions when there is no input. */ onEmptyInputFocus?: (selectedItems?: T[]) => T[] | PromiseLike; /** * A callback for what should happen when suggestions are shown without * input provided. * Returns the already selected items so the resolver can filter them out. * If used in conjunction with resolveDelay this will only kick off after the delay throttle. */ onEmptyResolveSuggestions?: (selectedItems?: T[]) => T[] | PromiseLike; /** * Initial items that have already been selected and should appear in the people picker. */ defaultSelectedItems?: T[]; /** * A callback for when the selected list of items changes. */ onChange?: (items?: T[]) => void; /** * A callback for when the user put focus on the picker * @deprecated Use `inputProps.onFocus` instead */ onFocus?: React_2.FocusEventHandler; /** * A callback for when the user moves the focus away from the picker */ onBlur?: React_2.FocusEventHandler; /** * A callback to get text from an item. Used to autofill text in the pickers. */ getTextFromItem?: (item: T, currentValue?: string) => string; /** * A callback that gets the rest of the results when a user clicks get more results. */ onGetMoreResults?: (filter: string, selectedItems?: T[]) => T[] | PromiseLike; /** * ClassName for the picker. */ className?: string; /** * The properties that will get passed to the Suggestions component. */ pickerSuggestionsProps?: IBasePickerSuggestionsProps; /** * The properties that will get passed to the Callout component. */ pickerCalloutProps?: ICalloutProps; /** * AutoFill input native props * @defaultvalue undefined */ inputProps?: IInputProps; /** * A callback for when an item is removed from the suggestion list */ onRemoveSuggestion?: (item: T) => void; /** * A function used to validate if raw text entered into the well can be added into the selected items list */ onValidateInput?: (input: string) => ValidationState; /** * The text to display while searching for more results in a limited suggestions list */ searchingText?: ((props: { input: string; }) => string) | string; /** * Flag for disabling the picker. * @defaultvalue false */ disabled?: boolean; /** * Restrict the amount of selectable items. * @defaultvalue undefined */ itemLimit?: number; /** * Function that specifies how arbitrary text entered into the well is handled. */ createGenericItem?: (input: string, ValidationState: ValidationState) => ISuggestionModel | T; /** * Aria label for the "X" button in the selected item component. * @defaultvalue '' */ removeButtonAriaLabel?: string; /** * The text that will be announced when a suggestion is removed. A default value is only provided for English. * @default 'removed \{0\}' */ suggestionRemovedText?: string; /** * Optional aria-label that will be placed on the element that has the role "combobox" * attached. Additionally aria-labelled by will get added to the supporting input element contained * with in the combobox container */ ['aria-label']?: string; /** * A callback to process a selection after the user selects something from the picker. If the callback returns null, * the item will not be added to the picker. */ onItemSelected?: (selectedItem?: T) => T | PromiseLike | null; /** * The items that the base picker should currently display as selected. * If this is provided then the picker will act as a controlled component. */ selectedItems?: T[]; /** * Aria label for the displayed selection. A good value would be something like "Selected Contacts". * @defaultvalue '' */ selectionAriaLabel?: string; /** * Override the role used for the element containing selected items. * Update this if onRenderItem does not return elements with role="listitem". * A good alternative would be 'group'. * @defaultvalue 'list' */ selectionRole?: string; /** * A callback used to modify the input string. */ onInputChange?: (input: string) => string; /** * A callback to override the default behavior of adding the selected suggestion on dismiss. If it returns true or * nothing, the selected item will be added on dismiss. If false, the selected item will not be added on dismiss. * */ onDismiss?: (ev?: any, selectedItem?: T) => boolean | void; /** * Adds an additional alert for the currently selected suggestion. This prop should be set to true for IE11 and below, * as it enables proper screen reader behavior for each suggestion (since aria-activedescendant does not work * with IE11). It should not be set for modern browsers (Edge, Chrome). * @defaultvalue false */ enableSelectedSuggestionAlert?: boolean; /** * Call to provide customized styling that will layer on top of the variant rules. */ styles?: IStyleFunctionOrObject; /** * Theme provided by styled() function. */ theme?: ITheme; /** * Props for the icon used in the item's remove button. * @defaultvalue `{ iconName:'Cancel' }` */ removeButtonIconProps?: IIconProps; } export declare interface IBasePickerState { items?: any; suggestedDisplayValue?: string; moreSuggestionsAvailable?: boolean; isFocused?: boolean; isSearching?: boolean; isMostRecentlyUsedVisible?: boolean; suggestionsVisible?: boolean; suggestionsLoading?: boolean; suggestionsExtendedLoading?: boolean; isResultsFooterVisible?: boolean; selectedIndices?: number[]; selectionRemoved?: T; } /** * The props needed to construct styles. * {@docCategory Pickers} */ export declare type IBasePickerStyleProps = Pick, 'theme' | 'className' | 'disabled'> & { /** Whether text style area is focused */ isFocused?: boolean; /** Optional pickerInput className */ inputClassName?: string; }; /** * Represents the stylable areas of the control. * {@docCategory Pickers} */ export declare interface IBasePickerStyles { /** Root element of any picker extending from BasePicker (wraps all the elements). */ root: IStyle; /** * Refers to the elements already selected (picked) wrapped by `itemsWrapper` along with the input to type * a new selection. */ text: IStyle; /** Refers to the items already selected (picked). */ itemsWrapper: IStyle; /** Refers to the input were to type new selections (picks). */ input: IStyle; /** Refers to helper element used for accessibility tools (hidden from view on screen). */ screenReaderText: IStyle; } /** * Subset of picker options that may be legally passed through a picker to its * internal Suggestions component. * {@docCategory Pickers} */ export declare interface IBasePickerSuggestionsProps extends Pick, 'onRenderNoResultFound' | 'suggestionsHeaderText' | 'mostRecentlyUsedHeaderText' | 'noResultsFoundText' | 'className' | 'suggestionsClassName' | 'suggestionsItemClassName' | 'searchForMoreIcon' | 'searchForMoreText' | 'forceResolveText' | 'loadingText' | 'searchingText' | 'resultsFooterFull' | 'resultsFooter' | 'resultsMaximumNumber' | 'showRemoveButtons' | 'suggestionsAvailableAlertText' | 'suggestionsContainerAriaLabel' | 'showForceResolve' | 'removeButtonIconProps'> { } export { IBaseProps } export declare interface IBaseSelectedItemsList { /** Gets the current value of the input. */ items: T[] | undefined; addItems: (items: T[]) => void; } export declare interface IBaseSelectedItemsListProps extends React_2.ClassAttributes { componentRef?: IRefObject>; /** * The selection */ selection?: Selection_2; /** * A callback for when items are copied */ onCopyItems?: (items: T[]) => string; /** * Function that specifies how the selected item will appear. */ onRenderItem?: (props: ISelectedItemProps) => JSX.Element; /** * Initial items that have already been selected and should appear in the people picker. */ defaultSelectedItems?: T[]; /** * A callback for when the selected list of items changes. */ onChange?: (items?: T[]) => void; /** * Function that specifies how arbitrary text entered into the well is handled. */ createGenericItem?: (input: string, ValidationState: ValidationState) => ISuggestionModel; /** * A callback to process a selection after the user selects something from the picker. */ onItemSelected?: (selectedItem?: T | T[]) => T | PromiseLike | T[] | PromiseLike; /** * The items that the base picker should currently display as selected. * If this is provided then the picker will act as a controlled component. */ selectedItems?: T[]; /** * Aria label for the 'X' button in the selected item component. * @defaultvalue '' */ removeButtonAriaLabel?: string; /** * A callback when an item is deleted * @deprecated Use `onItemsDeleted` instead. */ onItemDeleted?: (deletedItem: T) => void; /** * A callback when and item or items are deleted */ onItemsDeleted?: (deletedItems: T[]) => void; /** * A callback on whether this item can be deleted */ canRemoveItem?: (item: T) => boolean; } export declare interface IBaseSelectedItemsListState { items: T[]; } /** * {@docCategory Breadcrumb} */ export declare interface IBreadcrumb { /** * Sets focus to the first breadcrumb link. */ focus(): void; } /** @deprecated Use IBreadcrumbData */ export declare type IBreadCrumbData = IBreadcrumbData; /** * {@docCategory Breadcrumb} */ export declare interface IBreadcrumbData { props: IBreadcrumbProps; renderedItems: IBreadcrumbItem[]; renderedOverflowItems: IBreadcrumbItem[]; } /** * {@docCategory Breadcrumb} */ export declare interface IBreadcrumbItem extends React_2.AllHTMLAttributes { /** * Text to display in the breadcrumb item. */ text: string; /** * Arbitrary unique string associated with the breadcrumb item. */ key: string; /** * Callback for when the breadcrumb item is selected. */ onClick?: (ev?: React_2.MouseEvent, item?: IBreadcrumbItem) => void; /** * URL to navigate to when this breadcrumb item is clicked. * If provided, the breadcrumb will be rendered as a link. */ href?: string; /** * Whether this is the breadcrumb item the user is currently navigated to. * If true, `aria-current="page"` will be applied to this breadcrumb item. */ isCurrentItem?: boolean; /** * A function to render the outer content of the crumb (the link). */ onRender?: IRenderFunction; /** * A function to render the inner content of the crumb (the text inside the link). */ onRenderContent?: IRenderFunction; /** * Optional prop to render the item as a heading of your choice. * * You can also use this to force items to render as links instead of buttons (by default, * any item with a `href` renders as a link, and any item without a `href` renders as a button). * This is not generally recommended because it may prevent activating the link using the keyboard. */ as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'a'; /** * Optional role for the breadcrumb item (which renders as a button by default) */ role?: string; } /** * {@docCategory Breadcrumb} */ export declare interface IBreadcrumbProps extends React_2.HTMLAttributes { /** * Optional callback to access the `IBreadcrumb` interface. Use this instead of `ref` for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * Collection of breadcrumbs to render */ items: IBreadcrumbItem[]; /** * Optional class for the root breadcrumb element. */ className?: string; /** * Render a custom divider in place of the default chevron `>` */ dividerAs?: IComponentAs; /** * Render a custom overflow icon in place of the default icon `...` */ onRenderOverflowIcon?: IRenderFunction; /** * Custom component for the overflow button. */ overflowButtonAs?: IComponentAs; /** * The maximum number of breadcrumbs to display before coalescing. * If not specified, all breadcrumbs will be rendered. */ maxDisplayedItems?: number; /** Custom render function to render each crumb. Default renders as a link. */ onRenderItem?: IRenderFunction; /** * Custom render function to render the content within a crumb. Default renders the text. */ onRenderItemContent?: IRenderFunction; /** * Method that determines how to reduce the length of the breadcrumb. * Return undefined to never reduce breadcrumb length. */ onReduceData?: (data: IBreadcrumbData) => IBreadcrumbData | undefined; /** * Method that determines how to group the length of the breadcrumb. * Return undefined to never increase breadcrumb length. */ onGrowData?: (data: IBreadcrumbData) => IBreadcrumbData | undefined; /** * Aria label for the root element of the breadcrumb (which is a navigation landmark). */ ariaLabel?: string; /** * Aria label for the overflow button. */ overflowAriaLabel?: string; /** * Optional index where overflow items will be collapsed. * @default 0 */ overflowIndex?: number; styles?: IStyleFunctionOrObject; theme?: ITheme; /** * Extra props for the root FocusZone. */ focusZoneProps?: IFocusZoneProps; /** * Extra props for the TooltipHost which wraps each breadcrumb item. */ tooltipHostProps?: ITooltipHostProps; } /** * {@docCategory Breadcrumb} */ export declare interface IBreadcrumbStyleProps { className?: string; theme: ITheme; } /** * {@docCategory Breadcrumb} */ export declare interface IBreadcrumbStyles { root: IStyle; list: IStyle; listItem: IStyle; chevron: IStyle; overflow: IStyle; overflowButton: IStyle; itemLink: IStyle; item: IStyle; } /** * {@docCategory Button} */ export declare interface IButton { /** * Sets focus to the button. */ focus: () => void; /** * If there is a menu associated with this button and it is visible, this will dismiss the menu */ dismissMenu: () => void; /** * If there is a menu associated with this button and it is visible, this will open the menu. * Params are optional overrides to the ones defined in `menuProps` to apply to just this instance of * opening the menu. * * @param shouldFocusOnContainer - override to the ContextualMenu `shouldFocusOnContainer` prop. * BaseButton implementation defaults to `undefined`. * Avoid using `shouldFocusOnContainer` as it breaks the default focus behaviour when using * assistive technologies. * @param shouldFocusOnMount - override to the ContextualMenu `shouldFocusOnMount` prop. * BaseButton implementation defaults to `true`. */ openMenu: (shouldFocusOnContainer?: boolean, shouldFocusOnMount?: boolean) => void; } export declare interface IButtonClassNames { root?: string; flexContainer?: string; textContainer?: string; icon?: string; label?: string; menuIcon?: string; description?: string; screenReaderText?: string; } export declare interface IButtonGrid { } export declare interface IButtonGridCellProps { /** * The option that will be made available to the user */ item: T; /** * Arbitrary unique string associated with this option */ id: string; /** * If the this option should be disabled */ disabled?: boolean; /** * If the cell is currently selected */ selected?: boolean; onClick?: (item: T, event?: React_2.MouseEvent) => void; /** * The render callback to handle rendering the item */ onRenderItem: (item: T) => JSX.Element; onHover?: (item?: T, event?: React_2.MouseEvent) => void; onFocus?: (item: T, event?: React_2.FocusEvent) => void; /** * The accessible role for this option */ role?: string; /** * className(s) to apply */ className?: string; /** * CSS classes to apply when the cell is disabled */ cellDisabledStyle?: string[]; /** * CSS classes to apply when the cell is selected */ cellIsSelectedStyle?: string[]; /** * Index for this option */ index?: number; /** * The label for this item. */ label?: string; /** * Method to provide the classnames to style a button. * The default value for this prop is `getClassnames` defined in `BaseButton.classNames`. */ getClassNames?: (theme: ITheme, className: string, variantClassName: string, iconClassName: string | undefined, menuIconClassName: string | undefined, disabled: boolean, checked: boolean, expanded: boolean, isSplit: boolean | undefined) => IButtonClassNames; onMouseEnter?: (ev: React_2.MouseEvent) => boolean; onMouseMove?: (ev: React_2.MouseEvent) => boolean; onMouseLeave?: (ev: React_2.MouseEvent) => void; onWheel?: (ev: React_2.MouseEvent) => void; onKeyDown?: (ev: React_2.KeyboardEvent) => void; } export declare interface IButtonGridProps extends React_2.TableHTMLAttributes, React_2.RefAttributes { /** * Gets the component ref. */ componentRef?: IRefObject; /** * Items to display in a ButtonGrid with the specified number of columns */ items: any[]; /** * The number of columns */ columnCount: number; /** * Custom renderer for the individual items */ onRenderItem: (item: any, index: number) => JSX.Element; /** * Whether focus should cycle back to the beginning once the user navigates past the end (and vice versa). * Only relevant if `doNotContainWithinFocusZone` is not true. */ shouldFocusCircularNavigate?: boolean; /** * If false (the default), the ButtonGrid is contained inside a FocusZone. * If true, a FocusZone is not used. * @default false */ doNotContainWithinFocusZone?: boolean; /** * Class name for the FocusZone container for the ButtonGrid. * @deprecated Use `styles.focusedContainer` to define styling for the focus zone container */ containerClassName?: string; /** * Handler for when focus leaves the ButtonGrid. */ onBlur?: () => void; /** * If true, uses radiogroup semantics for the ButtonGrid. * This should be set to true for single-row grids, for two reasons: * 1. Radios are a more simple and understandable control, * and a better fit for a single-dimensional selection control * 2. Multiple browsers use heuristics to strip table and grid roles from single-row tables with no column headers. */ isSemanticRadio?: boolean; /** * Position this ButtonGrid is in the parent set (index in a parent menu, for example) */ ariaPosInSet?: number; /** * @deprecated Use `ariaPosInSet` */ positionInSet?: number; /** * Size of the parent set (size of parent menu, for example) */ ariaSetSize?: number; /** * @deprecated Use `ariaSetSize` */ setSize?: number; /** * Theme to apply to the component. */ theme?: ITheme; /** * Optional styles for the component. */ styles?: IStyleFunctionOrObject; } /** * Properties required to build the styles for the ButtonGrid component. */ export declare interface IButtonGridStyleProps { /** * Theme to apply to the ButtonGrid */ theme: ITheme; } /** * Styles for the ButtonGrid Component. */ export declare interface IButtonGridStyles { /** * Style for the table container of a ButtonGrid. */ root: IStyle; /** * Style for the table cells of the ButtonGrid. */ tableCell: IStyle; /** * Style for the FocusZone container for the ButtonGrid. */ focusedContainer?: IStyle; } /** * {@docCategory Button} */ export declare interface IButtonProps extends React_2.AllHTMLAttributes { /** * Optional callback to access the `IButton` interface. Use this instead of `ref` for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * Optional callback to access the root DOM element. * @deprecated Temporary solution which will be replaced with ref in the V8 release. */ elementRef?: React_2.Ref; /** * If provided, this component will be rendered as an anchor. * @defaultvalue ElementType.anchor */ href?: string; /** * Changes the visual presentation of the button to be emphasized. * @defaultvalue false */ primary?: boolean; /** * Unique ID to identify the item. Typically a duplicate of key value. */ uniqueId?: string | number; /** * Whether the button is disabled */ disabled?: boolean; /** * Whether the button can have focus in disabled mode */ allowDisabledFocus?: boolean; /** * If set to true and this is a split button (`split` is true), the split button's primary action is disabled. */ primaryDisabled?: boolean; /** * Custom styling for individual elements within the button DOM. */ styles?: IButtonStyles; /** * Theme provided by HOC. */ theme?: ITheme; /** * Whether the button is checked. Should be used with the `toggle` attribute when creating a standalone on/off button. */ checked?: boolean; /** * Whether button is a toggle button with distinct on and off states. This should be true for buttons that permanently * change state when a press event finishes, such as a volume mute button. */ toggle?: boolean; /** * If provided, additional class name to provide on the root element. */ className?: string; /** * The aria label of the button for the benefit of screen readers. */ ariaLabel?: string; /** * Detailed description of the button for the benefit of screen readers. * * Besides the compound button, other button types will need more information provided to screen reader. */ ariaDescription?: string; /** * If true, add an `aria-hidden` attribute instructing screen readers to ignore the element. */ ariaHidden?: boolean; /** * Text to render button label. If text is supplied, it will override any string in button children. * Other children components will be passed through after the text. */ text?: string; /** * The props for the icon shown in the button. */ iconProps?: IIconProps; /** * Props for button menu. Providing this will default to showing the menu icon. See `menuIconProps` for overriding * how the default icon looks. Providing this in addition to `onClick` and setting the `split` property to `true` * will render a SplitButton. */ menuProps?: IContextualMenuProps; /** * Callback that runs after Button's contextual menu was closed (removed from the DOM) */ onAfterMenuDismiss?: () => void; /** * If set to true, and if `menuProps` and `onClick` are provided, the button will render as a SplitButton. * @default false */ split?: boolean; /** * The props for the icon shown when providing a menu dropdown. */ menuIconProps?: IIconProps; /** * Accessible label for the dropdown chevron button if this button is split. */ splitButtonAriaLabel?: string; /** * Optional callback when menu is clicked. */ onMenuClick?: (ev?: React_2.MouseEvent | React_2.KeyboardEvent, button?: IButtonProps) => void; /** * Custom render function for the icon */ onRenderIcon?: IRenderFunction; /** * Custom render function for the label text. */ onRenderText?: IRenderFunction; /** * Custom render function for the description text. */ onRenderDescription?: IRenderFunction; /** * Custom render function for the aria description element. */ onRenderAriaDescription?: IRenderFunction; /** * Custom render function for rendering the button children. */ onRenderChildren?: IRenderFunction; /** * Custom render function for button menu icon */ onRenderMenuIcon?: IRenderFunction; /** * @deprecated Deprecated at v6.3.2, to be removed at \>= v7.0.0. * Use `menuAs` instead. */ onRenderMenu?: IRenderFunction; /** * Render a custom menu in place of the normal one. */ menuAs?: IComponentAs; /** * Description of the action this button takes. * Only used for compound buttons. */ secondaryText?: string; /** * @defaultvalue ButtonType.default * @deprecated Deprecated at v1.2.3, to be removed at \>= v2.0.0. * Use specific button component instead. */ buttonType?: ButtonType; /** * @deprecated Deprecated at v0.56.2, to be removed at \>= v1.0.0. * Use native props on the Button itself instead. * They will be mixed into the button/anchor element rendered by the component. */ rootProps?: React_2.ButtonHTMLAttributes | React_2.AnchorHTMLAttributes; /** * @deprecated No longer used. Use `checked` if setting state. */ toggled?: boolean; /** * Any custom data the developer wishes to associate with the button. */ data?: any; /** * Method to provide the classnames to style a button. * The default value for this prop is the `getClassnames` func defined in `BaseButton.classnames.ts`. * @defaultvalue getBaseButtonClassNames */ getClassNames?: (theme: ITheme, className: string, variantClassName: string, iconClassName: string | undefined, menuIconClassName: string | undefined, disabled: boolean, checked: boolean, expanded: boolean, hasMenu: boolean, isSplit: boolean | undefined, allowDisabledFocus: boolean) => IButtonClassNames; /** * Method to provide the classnames to style a button. * The default value for this prop is the `getClassnames` func defined in `BaseButton.classnames.ts`. * @defaultvalue getBaseSplitButtonClassNames */ getSplitButtonClassNames?: (disabled: boolean, expanded: boolean, checked: boolean, allowDisabledFocus: boolean) => ISplitButtonClassNames; /** * Provides a custom KeyCode that can be used to open the button menu. * A value of `null` can be provided to disable opening the button menu with a key press. * @default KeyCodes.down */ menuTriggerKeyCode?: KeyCodes | null; /** * Optional keytip for this button */ keytipProps?: IKeytipProps; /** * Menu will not be created or destroyed when opened or closed, instead it * will be hidden. This will improve perf of the menu opening but could potentially * impact overall perf by having more elements in the dom. Should only be used * when menu perf is important. * * Note: This may increase the amount of time it takes for the button itself to mount. */ persistMenu?: boolean; /** * If true, the persisted menu is rendered hidden when the button initially mounts. * Non-persisted menus will not be in the component tree unless they are being shown. * * Note: This increases the time the button will take to mount, but * can improve perceived menu open perf. when the user opens the menu. * * @defaultvalue `undefined`, equivalent to false * * @deprecated There is known bug in Edge when this prop is true where scrollbars * overlap with the content when a menu is first rendered hidden. * Please do not start using this. If you are already using this, * please make sure that you are doing so only in non-Edge browsers. * See: https://github.com/microsoft/fluentui/issues/9034 */ renderPersistedMenuHiddenOnMount?: boolean; /** * Experimental prop that get passed into the menuButton that's rendered as part of * split button. Anything passed in will likely need to have accompanying * style changes. */ splitButtonMenuProps?: IButtonProps; /** * Style for the description text if applicable (for compound buttons). * @deprecated Use `secondaryText` instead. */ description?: string; /** * yet unknown docs */ defaultRender?: any; /** * Optional props to be applied only to the primary action button of SplitButton and not to the * overall SplitButton container */ primaryActionButtonProps?: IButtonProps; } /** * {@docCategory Button} */ export declare interface IButtonStyles extends IShadowDomStyle { /** * Style for the root element in the default enabled, non-toggled state. */ root?: IStyle; /** * Style override for the root element in a checked state, layered on top of the root style. */ rootChecked?: IStyle; /** * Style override for the root element in a disabled state, layered on top of the root style. */ rootDisabled?: IStyle; /** * Style override applied to the root on hover in the default, enabled, non-toggled state. */ rootHovered?: IStyle; /** * Style override applied to the root on focus in the default, enabled, non-toggled state. */ rootFocused?: IStyle; /** * Style override applied to the root on pressed in the default, enabled, non-toggled state. */ rootPressed?: IStyle; /** * Style override applied to the root on when menu is expanded in the default, enabled, non-toggled state. */ rootExpanded?: IStyle; /** * Style override applied to the root on hover in a checked, enabled state */ rootCheckedHovered?: IStyle; /** * Style override applied to the root on pressed in a checked, enabled state */ rootCheckedPressed?: IStyle; /** * Style override applied to the root on hover in a checked, disabled state */ rootCheckedDisabled?: IStyle; /** * Style override applied to the root on hover in a expanded state on hover */ rootExpandedHovered?: IStyle; /** * Style override for the root element when it has a menu button, layered on top of the root style. */ rootHasMenu?: IStyle; /** * Style for the flexbox container within the root element. */ flexContainer?: IStyle; /** * Style for the text container within the flexbox container element (and contains the text and description). */ textContainer?: IStyle; /** * Style for the icon on the near side of the label. */ icon?: IStyle; /** * Style for the icon on the near side of the label on hover. */ iconHovered?: IStyle; /** * Style for the icon on the near side of the label when pressed. */ iconPressed?: IStyle; /** * Style for the icon on the near side of the label when expanded. */ iconExpanded?: IStyle; /** * Style for the icon on the near side of the label when expanded and hovered. */ iconExpandedHovered?: IStyle; /** * Style override for the icon when the button is disabled. */ iconDisabled?: IStyle; /** * Style override for the icon when the button is checked. */ iconChecked?: IStyle; /** * Style for the text content of the button. */ label?: IStyle; /** * Style override for the text content when the button is hovered. */ labelHovered?: IStyle; /** * Style override for the text content when the button is disabled. */ labelDisabled?: IStyle; /** * Style override for the text content when the button is checked. */ labelChecked?: IStyle; /** * Style for the menu chevron. */ menuIcon?: IStyle; /** * Style for the menu chevron on hover. */ menuIconHovered?: IStyle; /** * Style for the menu chevron when pressed. */ menuIconPressed?: IStyle; /** * Style for the menu chevron when expanded. */ menuIconExpanded?: IStyle; /** * Style for the menu chevron when expanded and hovered. */ menuIconExpandedHovered?: IStyle; /** * Style override for the menu chevron when the button is disabled. */ menuIconDisabled?: IStyle; /** * Style override for the menu chevron when the button is checked. */ menuIconChecked?: IStyle; /** * Style for the description text if applicable (for compound buttons). */ description?: IStyle; /** * Style for the description text if applicable (for compound buttons). */ secondaryText?: IStyle; /** * Style override for the description text when the button is hovered. */ descriptionHovered?: IStyle; /** * Style for the description text when the button is pressed. */ descriptionPressed?: IStyle; /** * Style override for the description text when the button is disabled. */ descriptionDisabled?: IStyle; /** * Style override for the description text when the button is checked. */ descriptionChecked?: IStyle; /** * Style override for the screen reader text. */ screenReaderText?: IStyle; /** * Style override for the container div around a SplitButton element */ splitButtonContainer?: IStyle; /** * Style for container div around a SplitButton element when the button is hovered. */ splitButtonContainerHovered?: IStyle; /** * Style for container div around a SplitButton element when the button is focused. */ splitButtonContainerFocused?: IStyle; /** * Style for container div around a SplitButton element when the button is checked. */ splitButtonContainerChecked?: IStyle; /** * Style for container div around a SplitButton element when the button is checked and hovered. */ splitButtonContainerCheckedHovered?: IStyle; /** * Style override for the container div around a SplitButton element in a disabled state */ splitButtonContainerDisabled?: IStyle; /** * Style override for the divider element that appears between the button and menu button * for a split button. */ splitButtonDivider?: IStyle; /** * Style override for the divider element that appears between the button and menu button * for a split button in a disabled state. */ splitButtonDividerDisabled?: IStyle; /** * Style override for the SplitButton menu button */ splitButtonMenuButton?: IStyle; /** * Style override for the SplitButton menu button element in a disabled state. */ splitButtonMenuButtonDisabled?: IStyle; /** * Style override for the SplitButton menu button element in a checked state */ splitButtonMenuButtonChecked?: IStyle; /** * Style override for the SplitButton menu button element in an expanded state */ splitButtonMenuButtonExpanded?: IStyle; /** * Style override for the SplitButton menu icon element */ splitButtonMenuIcon?: IStyle; /** * Style override for the SplitButton menu icon element in a disabled state */ splitButtonMenuIconDisabled?: IStyle; /** * Style override for the SplitButton FlexContainer. */ splitButtonFlexContainer?: IStyle; /** * Style override for the SplitButton when only primaryButton is in a disabled state */ splitButtonMenuFocused?: IStyle; } /** * {@docCategory Calendar} */ export declare interface ICalendar { /** Sets focus to the selected date. */ focus: () => void; } /** * {@docCategory Calendar} */ export declare interface ICalendarDay { focus(): void; } /** * {@docCategory Calendar} */ export declare interface ICalendarDayGrid { focus(): void; } /** * {@docCategory Calendar} */ export declare interface ICalendarDayGridProps extends IDayGridOptions, IBaseProps { /** * Optional callback to access the ICalendarDayGrid interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * Customized styles for the component. */ styles?: IStyleFunctionOrObject; /** * Theme (provided through customization). */ theme?: ITheme; /** * Additional CSS class(es) to apply to the CalendarDayGrid. */ className?: string; /** * Localized strings to use in the CalendarDayGrid */ strings: ICalendarStrings; /** * The currently selected date */ selectedDate: Date; /** * The currently navigated date */ navigatedDate: Date; /** * Callback issued when a date is selected * @param date - The date the user selected * @param selectedDateRangeArray - The resultant list of dates that are selected based on the date range type set * for the component. */ onSelectDate?: (date: Date, selectedDateRangeArray?: Date[]) => void; /** * Callback issued when a date in the calendar is navigated * @param date - The date that is navigated to * @param focusOnNavigatedDay - Whether to set the focus to the navigated date. */ onNavigateDate: (date: Date, focusOnNavigatedDay: boolean) => void; /** * Callback issued when calendar day is closed */ onDismiss?: () => void; /** * The first day of the week for your locale. * @defaultvalue DayOfWeek.Sunday */ firstDayOfWeek: DayOfWeek; /** * Defines when the first week of the year should start, FirstWeekOfYear.FirstDay, * FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values * @defaultvalue FirstWeekOfYear.FirstDay */ firstWeekOfYear: FirstWeekOfYear; /** * The date range type indicating how many days should be selected as the user * selects days * @defaultValue DateRangeType.Day */ dateRangeType: DateRangeType; /** * The number of days to select while dateRangeType === DateRangeType.Day. Used in order to have multi-day * views. * @defaultValue 1 */ daysToSelectInDayView?: number; /** * Value of today. If unspecified, current time in client machine will be used. */ today?: Date; /** * Whether the calendar should show the week number (weeks 1 to 53) before each week row * @defaultvalue false */ showWeekNumbers?: boolean; /** * Apply additional formatting to dates, for example localized date formatting. */ dateTimeFormatter: IDateFormatting; /** * Ref callback for individual days. Allows for customization of the styling, properties, or listeners of the * specific day. */ customDayCellRef?: (element: HTMLElement, date: Date, classNames: IProcessedStyleSet) => void; /** * How many weeks to show by default. If not provided, will show enough weeks to display the current * month, between 4 and 6 depending * @defaultvalue undefined */ weeksToShow?: number; /** * If set the Calendar will not allow navigation to or selection of a date earlier than this value. */ minDate?: Date; /** * If set the Calendar will not allow navigation to or selection of a date later than this value. */ maxDate?: Date; /** * If set the Calendar will not allow selection of dates in this array. */ restrictedDates?: Date[]; /** * The days that are selectable when `dateRangeType` is WorkWeek. * If `dateRangeType` is not WorkWeek this property does nothing. * @defaultvalue [Monday,Tuesday,Wednesday,Thursday,Friday] */ workWeekDays?: DayOfWeek[]; /** * Whether the close button should be shown or not * @defaultvalue false */ showCloseButton?: boolean; /** * Allows all dates and buttons to be focused, including disabled ones * @defaultvalue false */ allFocusable?: boolean; /** * The ID of the control that labels this one */ labelledBy?: string; /** * Whether to show days outside the selected month with lighter styles * @defaultvalue true */ lightenDaysOutsideNavigatedMonth?: boolean; /** * The cardinal directions for animation to occur during transitions, either horizontal or veritcal */ animationDirection?: AnimationDirection; /** * Optional callback function to mark specific days with a small symbol. Fires when the date range changes, * gives the starting and ending displayed dates and expects the list of which days in between should be * marked. */ getMarkedDays?: (startingDate: Date, endingDate: Date) => Date[]; } /** * {@docCategory Calendar} */ export declare interface ICalendarDayGridStyleProps { /** * Theme provided by High-Order Component. */ theme: ITheme; /** * Accept custom classNames */ className?: string; /** * The date range type */ dateRangeType?: DateRangeType; /** * Whether week numbers are being shown */ showWeekNumbers?: boolean; /** * Whether to show days outside the selected month with lighter styles */ lightenDaysOutsideNavigatedMonth?: boolean; /** * Whether grid entering animation should be forwards or backwards */ animateBackwards?: boolean; /** * The cardinal directions for animation to occur during transitions, either horizontal or vertical */ animationDirection?: AnimationDirection; } /** * {@docCategory Calendar} */ export declare interface ICalendarDayGridStyles { /** * The style for the root div */ wrapper?: IStyle; /** * The style for the table containing the grid */ table?: IStyle; /** * The style to apply to the grid cells for days */ dayCell?: IStyle; /** * The style to apply to grid cells for days in the selected range */ daySelected?: IStyle; /** * The style to apply to row around weeks */ weekRow?: IStyle; /** * The style to apply to the column headers above the weeks */ weekDayLabelCell?: IStyle; /** * The style to apply to grid cells for week numbers */ weekNumberCell?: IStyle; /** * The style to apply to individual days that are outside the min/max date range */ dayOutsideBounds?: IStyle; /** * The style to apply to individual days that are outside the current month */ dayOutsideNavigatedMonth?: IStyle; /** * The style to apply to the button element within the day cells */ dayButton?: IStyle; /** * The style to apply to the individual button element that matches the "today" parameter */ dayIsToday?: IStyle; /** * The style applied to the first placeholder week used during transitions */ firstTransitionWeek?: IStyle; /** * The style applied to the last placeholder week used during transitions */ lastTransitionWeek?: IStyle; /** * The style applied to the marker on days to mark as important */ dayMarker?: IStyle; /** * The styles to apply to days for rounded corners. Can apply multiple to round multiple corners */ topRightCornerDate?: IStyle; topLeftCornerDate?: IStyle; bottomRightCornerDate?: IStyle; bottomLeftCornerDate?: IStyle; /** * The styles to apply to days for focus borders. Can apply multiple if there are multiple focused days * around the current focused date */ datesAbove?: IStyle; datesBelow?: IStyle; datesLeft?: IStyle; datesRight?: IStyle; } /** * {@docCategory Calendar} */ export declare interface ICalendarDayProps extends IBaseProps, ICalendarDayGridProps { /** * Optional callback to access the ICalendarDay interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * Customized styles for the calendar day component */ styles?: IStyleFunctionOrObject; /** * Theme (provided through customization). */ theme?: ITheme; /** * Additional CSS class(es) to apply to the CalendarDay. */ className?: string; /** * Localized strings to use in the Calendar */ strings: ICalendarStrings; /** * The currently navigated date */ navigatedDate: Date; /** * Callback issued when a date in the calendar is navigated * @param date - The date that is navigated to * @param focusOnNavigatedDay - Whether to set the focus to the navigated date. */ onNavigateDate: (date: Date, focusOnNavigatedDay: boolean) => void; /** * Callback issued when calendar day is closed */ onDismiss?: () => void; /** * Custom navigation icons. */ navigationIcons: ICalendarNavigationIcons; /** * Callback function when the header is selected */ onHeaderSelect?: () => void; /** * Whether the calendar should show the week number (weeks 1 to 53) before each week row * @defaultvalue false */ showWeekNumbers?: boolean; /** * Apply additional formatting to dates, for example localized date formatting. */ dateTimeFormatter: IDateFormatting; /** * Whether the calendar should show 6 weeks by default. * @defaultvalue false */ showSixWeeksByDefault?: boolean; /** * If set the Calendar will not allow navigation to or selection of a date earlier than this value. */ minDate?: Date; /** * If set the Calendar will not allow navigation to or selection of a date later than this value. */ maxDate?: Date; /** * If set the Calendar will not allow selection of dates in this array. */ restrictedDates?: Date[]; /** * Whether the close button should be shown or not * @defaultvalue false */ showCloseButton?: boolean; /** * Allows all dates and buttons to be focused, including disabled ones * @defaultvalue false */ allFocusable?: boolean; } /** * {@docCategory Calendar} */ export declare interface ICalendarDayStyleProps extends ICalendarDayGridStyleProps { /** * Theme provided by High-Order Component. */ theme: ITheme; /** * Accept custom classNames */ className?: string; /** * Whether the header is clickable */ headerIsClickable?: boolean; /** * Whether week numbers are being shown */ showWeekNumbers?: boolean; } /** * {@docCategory Calendar} */ export declare interface ICalendarDayStyles extends Partial { /** * Style for the root element. */ root: IStyle; /** * The style for the header button and forward/back navigation button container */ header: IStyle; /** * The style for the title text inside the header */ monthAndYear: IStyle; /** * The style for the wrapper around forward/back/close buttons */ monthComponents: IStyle; /** * The style for the forward/back/close buttons */ headerIconButton: IStyle; /** * The style to apply for disabled elements */ disabledStyle: IStyle; } /** * @deprecated Use `IDateFormatting` */ export declare type ICalendarFormatDateCallbacks = IDateFormatting; /** * @deprecated Use `ICalendarNavigationIcons` */ export declare type ICalendarIconStrings = ICalendarNavigationIcons; /** * {@docCategory Calendar} */ export declare interface ICalendarMonth { focus(): void; } /** * {@docCategory Calendar} */ export declare interface ICalendarMonthProps extends IBaseProps { /** * Optional callback to access the ICalendarMonth interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * Customized styles for the calendar month component */ styles?: IStyleFunctionOrObject; /** * Theme (provided through customization). */ theme?: ITheme; /** * Localized strings to use in the Calendar */ strings: ICalendarStrings; /** * The currently selected date */ selectedDate: Date; /** * The currently navigated date */ navigatedDate: Date; /** * Callback issued when a month is selected * @param date - The date the user selected * @param selectedDateRangeArray - The resultant list of dates that are selected based on the date range type set * for the component. */ onSelectDate?: (date: Date, selectedDateRangeArray?: Date[]) => void; /** * Callback issued when the year is navigated * @param date - The date that is navigated to * @param focusOnNavigatedDay - Whether to set the focus to the navigated date. */ onNavigateDate: (date: Date, focusOnNavigatedDay: boolean) => void; /** * Custom navigation icons. */ navigationIcons?: ICalendarNavigationIcons; /** * Value of today. If unspecified, current time in client machine will be used. */ today?: Date; /** * Callback function when the header is selected */ onHeaderSelect?: () => void; /** * Apply additional formatting to dates, for example localized date formatting. */ dateTimeFormatter?: IDateFormatting; /** * If set the Calendar will not allow navigation to or selection of a date earlier than this value. */ minDate?: Date; /** * If set the Calendar will not allow navigation to or selection of a date later than this value. */ maxDate?: Date; /** * Whether the month picker should highlight the current month * @defaultvalue false */ highlightCurrentMonth?: boolean; /** * Whether the month picker should highlight the selected month * @defaultvalue false */ highlightSelectedMonth?: boolean; /** * Allows all dates and buttons to be focused, including disabled ones * @defaultvalue false */ allFocusable?: boolean; /** * Additional CSS class(es) to apply to the CalendarMonth. */ className?: string; /** * Whether the year picker is hidden * @defaultvalue false */ yearPickerHidden?: boolean; /** * The cardinal directions for animation to occur during transitions, either horizontal or veritcal */ animationDirection?: AnimationDirection; } /** * {@docCategory Calendar} */ export declare interface ICalendarMonthStyleProps extends ICalendarPickerStyleProps { } /** * {@docCategory Calendar} */ export declare interface ICalendarMonthStyles extends ICalendarPickerStyles { } /** * {@docCategory Calendar} */ export declare interface ICalendarNavigationIcons { /** * FabricMDL2Icons name for the left navigation icon. Previous default: ChevronLeft. * @defaultvalue 'Up' */ leftNavigation?: string; /** * FabricMDL2Icons name for the right navigation icon. Previous default: ChevronRight. * @defaultvalue 'Down' */ rightNavigation?: string; /** * Close icon * @defaultvalue 'CalculatorMultiply' */ closeIcon?: string; } /** * {@docCategory Calendar} */ export declare interface ICalendarPickerStyleProps { /** * Theme provided by High-Order Component. */ theme: ITheme; /** * Accept custom classNames */ className?: string; /** * Whether the header can be clicked */ hasHeaderClickCallback?: boolean; /** * Whether the picker should highlight the current item */ highlightCurrent?: boolean; /** * Whether the picker should highlight the selected item */ highlightSelected?: boolean; /** * The cardinal directions for animation to occur during transitions, either horizontal or veritcal */ animationDirection?: AnimationDirection; /** * Whether grid entering animation should be forwards or backwards */ animateBackwards?: boolean; } /** * {@docCategory Calendar} */ export declare interface ICalendarPickerStyles { /** * Style for the root element. */ root: IStyle; headerContainer: IStyle; currentItemButton: IStyle; navigationButtonsContainer: IStyle; navigationButton: IStyle; gridContainer: IStyle; buttonRow: IStyle; itemButton: IStyle; current: IStyle; selected: IStyle; disabled: IStyle; } /** * {@docCategory Calendar} */ export declare interface ICalendarProps extends IBaseProps, React_2.RefAttributes { /** * Optional callback to access the ICalendar interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * Customized styles for the calendar component */ styles?: IStyleFunctionOrObject; /** * Customized props for the calendar day */ calendarDayProps?: Partial; /** * Customized props for the calendar month */ calendarMonthProps?: Partial; /** * Theme provided by High-Order Component. */ theme?: ITheme; /** * Optional class name to add to the root element. */ className?: string; /** * Callback for when a date is selected * @param date - The date the user selected * @param selectedDateRangeArray - The resultant list of dates that are selected based on the date range type set * for the component. */ onSelectDate?: (date: Date, selectedDateRangeArray?: Date[]) => void; /** * Callback for when calendar is closed */ onDismiss?: () => void; /** * ID for the calendar */ id?: string; /** * Default value of the Calendar, if any */ value?: Date; /** * Value of today. If unspecified, current time in client machine will be used. */ today?: Date; /** * The date range type indicating how many days should be selected as the user * selects days * @defaultValue DateRangeType.Day */ dateRangeType?: DateRangeType; /** * The first day of the week for your locale. * @defaultvalue DayOfWeek.Sunday */ firstDayOfWeek?: DayOfWeek; /** * Defines when the first week of the year should start. * @defaultvalue FirstWeekOfYear.FirstDay */ firstWeekOfYear?: FirstWeekOfYear; /** * Whether the month picker is shown beside the day picker or hidden. * @defaultvalue true */ isMonthPickerVisible?: boolean; /** * Whether the day picker is shown beside the month picker or hidden. * @defaultvalue true */ isDayPickerVisible?: boolean; /** * Show month picker on top of date picker when visible. * @defaultvalue false */ showMonthPickerAsOverlay?: boolean; /** * Whether the "Go to today" link should be shown or not */ showGoToToday?: boolean; /** * Whether the calendar should show the week number (weeks 1 to 53) before each week row * @defaultvalue false */ showWeekNumbers?: boolean; /** * Localized strings to use in the Calendar */ strings?: ICalendarStrings; /** * Custom navigation icons. */ navigationIcons?: ICalendarNavigationIcons; /** * Apply additional formatting to dates, for example localized date formatting. */ dateTimeFormatter?: IDateFormatting; /** * If set the Calendar will not allow navigation to or selection of a date earlier than this value. */ minDate?: Date; /** * If set the Calendar will not allow navigation to or selection of a date later than this value. */ maxDate?: Date; /** * If set the Calendar will not allow selection of dates in this array. */ restrictedDates?: Date[]; /** * Whether the calendar should show 6 weeks by default. * @defaultvalue false */ showSixWeeksByDefault?: boolean; /** * The days that are selectable when `dateRangeType` is `WorkWeek`. * If `dateRangeType` is not `WorkWeek` this property does nothing. * @defaultvalue [Monday,Tuesday,Wednesday,Thursday,Friday] */ workWeekDays?: DayOfWeek[]; /** * Whether the month picker should highlight the current month * @defaultvalue false */ highlightCurrentMonth?: boolean; /** * Whether the month picker should highlight the selected month * @defaultvalue false */ highlightSelectedMonth?: boolean; /** * Whether the close button should be shown or not * @defaultvalue false */ showCloseButton?: boolean; /** * Allows all dates and buttons to be focused, including disabled ones * @defaultvalue false */ allFocusable?: boolean; } export { ICalendarStrings } /** * {@docCategory Calendar} */ export declare interface ICalendarStyleProps { /** * Theme provided by higher-order component. */ theme: ITheme; /** * Custom CSS class for the calendar. */ className?: string; /** * Whether the month picker is visible */ isMonthPickerVisible?: boolean; /** * Whether the day picker is visible */ isDayPickerVisible?: boolean; /** * Whether only month picker is shown */ monthPickerOnly?: boolean; /** * Whether the month picker is overlaid on the day picker */ showMonthPickerAsOverlay?: boolean; /** * @deprecated Use `overlaidWithButton` */ overlayedWithButton?: boolean; /** * Whether the month and day picker are overlaid and the 'go to today' button is shown */ overlaidWithButton?: boolean; /** * Whether the go to today button is shown */ showGoToToday?: boolean; /** * Whether the week numbers are shown */ showWeekNumbers?: boolean; } /** * {@docCategory Calendar} */ export declare interface ICalendarStyles { /** * Style for the root element. */ root: IStyle; divider: IStyle; goTodayButton: IStyle; monthPickerWrapper: IStyle; liveRegion: IStyle; } /** * {@docCategory Calendar} */ export declare interface ICalendarYear { focus(): void; } export declare interface ICalendarYearHeaderProps extends ICalendarYearProps, ICalendarYearRange { /** * Callback action when the 'previous' navigation button is selected */ onSelectPrev?: () => void; /** * Callback action when the 'next' navigation button is selected */ onSelectNext?: () => void; /** * Whether title entering animation should be forwards or backwards */ animateBackwards?: boolean; } /** * {@docCategory Calendar} */ export declare interface ICalendarYearProps extends IBaseProps { /** * Optional callback to access the ICalendarYear interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * Customized styles for the calendar month component */ styles?: IStyleFunctionOrObject; /** * Theme (provided through customization). */ theme?: ITheme; /** * Localized strings to use in the Calendar */ strings?: ICalendarYearStrings; /** * The currently selected year */ selectedYear?: number; /** * The currently navigated year */ navigatedYear?: number; /** * Callback action when a year is selected * @param year - The year the user selected */ onSelectYear?: (year: number) => void; /** * Custom navigation icons. */ navigationIcons?: ICalendarNavigationIcons; /** * Callback action when the header is selected */ onHeaderSelect?: (focus: boolean) => void; /** * If set the Calendar will not allow navigation to or selection of a year earlier than this value. */ minYear?: number; /** * If set the Calendar will not allow navigation to or selection of a year later than this value. */ maxYear?: number; /** * Whether the year picker should highlight the current year * @defaultvalue false */ highlightCurrentYear?: boolean; /** * Whether the year picker should highlight the selected year * @defaultvalue false */ highlightSelectedYear?: boolean; /** * Accept custom classNames */ className?: string; /** * Custom renderer for the title */ onRenderTitle?: (props: ICalendarYearHeaderProps) => React_2.ReactNode; /** * Custom renderer for the year */ onRenderYear?: (year: number) => React_2.ReactNode; /** * The cardinal directions for animation to occur during transitions, either horizontal or veritcal */ animationDirection?: AnimationDirection; } /** * {@docCategory Calendar} */ export declare interface ICalendarYearRange { fromYear: number; toYear: number; } /** * {@docCategory Calendar} */ export declare interface ICalendarYearRangeToString { (range: ICalendarYearRange): string; } /** * {@docCategory Calendar} */ export declare interface ICalendarYearStrings { rangeAriaLabel?: string | ICalendarYearRangeToString; prevRangeAriaLabel?: string | ICalendarYearRangeToString; nextRangeAriaLabel?: string | ICalendarYearRangeToString; headerAriaLabelFormatString?: string; } export declare interface ICalendarYearStyleProps extends ICalendarPickerStyleProps { } export declare interface ICalendarYearStyles extends ICalendarPickerStyles { } export declare interface ICalloutBeakPositionedInfo extends IPositionedData { closestEdge: RectangleEdge; hideBeak?: boolean; } /** * {@docCategory Callout} */ export declare interface ICalloutContentStyleProps { /** * Theme to apply to the callout content. */ theme: ITheme; /** * Width for callout including borders. */ calloutWidth?: number; /** * CSS class to apply to the callout. */ className?: string; /** * Callout positioning data */ positions?: ICalloutPositionedInfo; /** * Whether or not to clip content of the callout, if it overflows vertically. */ overflowYHidden?: boolean; /** * Background color for the beak and callout. */ backgroundColor?: string; /** * Width of Callout beak */ beakWidth?: number; /** * Max width for callout including borders. */ calloutMaxWidth?: number; /** * Min width for callout including borders. */ calloutMinWidth?: number; /** * If true, a z-index should be set on the root element (since the Callout will not be rendered on a new layer). */ doNotLayer?: boolean; } /** * {@docCategory Callout} */ export declare interface ICalloutContentStyles { /** * Style for wrapper of Callout component. */ container: IStyle; /** * Style for callout container root element. */ root: IStyle; /** * Style for callout beak. */ beak: IStyle; /** * Style for callout beak curtain. */ beakCurtain: IStyle; /** * Style for content component of the callout. */ calloutMain: IStyle; } export declare interface ICalloutPositionedInfo extends IPositionedData { beakPosition: ICalloutBeakPositionedInfo; } export declare interface ICalloutPositionProps extends IPositionProps { /** * The width of the beak. */ beakWidth?: number; /** * Whether or not the beak is visible */ isBeakVisible?: boolean; } /** * {@docCategory Callout} */ export declare interface ICalloutProps extends React_2.HTMLAttributes, React_2.RefAttributes { /** * The target that the Callout should try to position itself based on. * It can be an element, a query selector string of a valid element, * or a `MouseEvent`. If a `MouseEvent` is given, the origin point of the event will be used. */ target?: Target; /** * How the element should be positioned * @defaultvalue DirectionalHint.BottomAutoEdge */ directionalHint?: DirectionalHint; /** * How the element should be positioned in RTL layouts. * If not specified, a mirror of the `directionalHint` alignment edge will be used instead. * This means that `DirectionalHint.BottomLeft` will change to `DirectionalHint.BottomRight` but * `DirectionalHint.LeftAuto` will not change. */ directionalHintForRTL?: DirectionalHint; /** * The gap between the Callout and the target, specified as number of pixels * @defaultvalue 0 */ gapSpace?: number; /** * The width of the beak. * @defaultvalue 16 */ beakWidth?: number; /** * Custom width for callout including borders. If value is 0, no width is applied. * @defaultvalue 0 */ calloutWidth?: number; /** * Maximum width for callout including borders. If value is 0, no width is applied. * @defaultvalue 0 */ calloutMaxWidth?: number; /** * Minimum width for callout including borders. If value is 0, no width is applied. * @defaultvalue 0 */ calloutMinWidth?: number; /** * The background color of the Callout in hex format ie. #ffffff. * @defaultvalue $ms-color-white */ backgroundColor?: string; /** * The bounding rectangle the callout can appear in (or callback that returns a rectangle). */ bounds?: IRectangle | ((target?: Target, targetWindow?: Window) => IRectangle | undefined); /** * The minimum distance the callout will be away from the edge of the screen. * @defaultvalue 8 */ minPagePadding?: number; /** * Whether the beak is visible. * @defaultvalue true */ isBeakVisible?: boolean; /** * If true then the callout will not dismiss on scroll * @defaultvalue false * @deprecated use preventDismissOnEvent callback instead */ preventDismissOnScroll?: boolean; /** * If true then the callout will not dismiss on resize * @defaultvalue false * @deprecated use preventDismissOnEvent callback instead */ preventDismissOnResize?: boolean; /** * If true then the callout will not dismiss when it loses focus * @defaultvalue false * @deprecated use preventDismissOnEvent callback instead */ preventDismissOnLostFocus?: boolean; /** * If true then the callout will dismiss when the target element is clicked * @defaultvalue false */ dismissOnTargetClick?: boolean; /** * If defined, then takes priority over `preventDismissOnLostFocus`, `preventDismissOnResize`, * and `preventDismissOnScroll`. * If it returns true, the callout will not dismiss for this event. * If not defined or returns false, the callout can dismiss for this event. */ preventDismissOnEvent?: (ev: Event | React_2.FocusEvent | React_2.KeyboardEvent | React_2.MouseEvent) => boolean; /** * If true, callout will dismiss when the window gets focus. * @defaultvalue false */ shouldDismissOnWindowFocus?: boolean; /** * If true, the callout element will be positioned to cover the target. * If false, it will position next to the target. * @defaultvalue false */ coverTarget?: boolean; /** * If true the positioning logic will prefer to flip edges rather than to nudge the rectangle to fit within bounds, * thus making sure the element aligns perfectly with target's alignment edge. */ alignTargetEdge?: boolean; /** * Aria role assigned to the callout (e.g. `dialog`, `alertdialog`). */ role?: string; /** * Accessible label text for callout. */ ariaLabel?: string; /** * ID of the element which contains label text for the callout. */ ariaLabelledBy?: string; /** * ID of the element which contains the description for the callout. */ ariaDescribedBy?: string; /** * CSS class to apply to the callout. * @defaultvalue null */ className?: string; /** * CSS style to apply to the callout. * * If you set `overflowY` in this object, it provides a performance optimization by preventing * Popup (underlying component of Callout) from calculating whether it needs a scroll bar. */ style?: React_2.CSSProperties; /** * Optional callback when the layer content has mounted. */ onLayerMounted?: () => void; /** * Optional props to pass to the Layer component hosting the callout. */ layerProps?: ILayerProps; /** * Optional props to pass the Popup component that the callout uses. */ popupProps?: IPopupProps; /** * Optional callback that is called once the callout has been correctly positioned. * @param positions - Gives the user information about how the callout is positioned such as the * final edge of the target that it positioned against, the beak position, and the beak's relationship to the * edges of the callout. */ onPositioned?: (positions?: ICalloutPositionedInfo) => void; /** * Callback when the Callout tries to close. */ onDismiss?: (ev?: Event | React_2.MouseEvent | React_2.KeyboardEvent) => void; /** * If true, do not render on a new layer. If false, render on a new layer. */ doNotLayer?: boolean; /** * If true the position will not change sides in an attempt to fit the callout within bounds. * It will still attempt to align it to whatever bounds are given. * @defaultvalue false */ directionalHintFixed?: boolean; /** * Specify the final height of the content. * To be used when expanding the content dynamically so that callout can adjust its position. */ finalHeight?: number; /** * Manually set `overflowYHidden` style prop to true on `calloutMain` element. * A variety of callout load animations will need this to hide the scollbar that can appear. */ hideOverflow?: boolean; /** * If true, then the callout will attempt to focus the first focusable element that it contains. * If it doesn't find a focusable element, no focus will be set. */ setInitialFocus?: boolean; /** * Set max height of callout. * When not set, the callout will expand with contents up to the bottom of the screen. */ calloutMaxHeight?: number; /** * Callback when the Callout body is scrolled. */ onScroll?: () => void; /** * Optional theme for component */ theme?: ITheme; /** * Optional styles for the component. */ styles?: IStyleFunctionOrObject; /** * If specified, renders the Callout in a hidden state. * Use this flag, rather than rendering a callout conditionally based on visibility, * to improve rendering performance when it becomes visible. * Note: When callout is hidden its content will not be rendered. It will only render * once the callout is visible. */ hidden?: boolean; /** * If true, the component will be updated even when `hidden` is true. * Note that this would consume resources to update even though nothing is being shown to the user. * This might be helpful though if your updates are small and you want the * callout to be revealed quickly to the user when `hidden` is set to false. */ shouldUpdateWhenHidden?: boolean; /** * If specified, determines whether the underlying {@link Popup} component should try to restore * focus when it is dismissed. When set to false, the Popup won't try to restore focus to * the last focused element. * @defaultvalue true * @deprecated use `onRestoreFocus` instead */ shouldRestoreFocus?: boolean; /** * Called when the component is unmounting, and focus needs to be restored. If this is provided, * focus will not be restored automatically, and you'll need to call `params.originalElement.focus()`. */ onRestoreFocus?: (params: IPopupRestoreFocusParams) => void; /** * The minimum height, in pixels, that the callout will scroll-resize down to on top/bottom edges * before repositioning to a new edge. * * Note: this prop has no effect if `directionalHintFixed=true`. * * Note: if `preferScrollResizing=false`, this prop will have no effect because the callout will not scroll-resize. * * Note: if `hideOverflow = true`, or if the computed callout style `overflowY` is `hidden` or `clip`, * the callout will not scroll-resize. * * @defaultvalue 200 */ minimumScrollResizeHeight?: number; /** * If true, the callout will scroll-resize when positioning on top / bottom edges, * rather than repositioning to a new edge. * * Example: if `directionalHint=DirectionalHint.bottomAutoEdge`, and the callout content height exceeds * the vertical space below the callout, the callout will position itself on the bottom edge of the target * (rather than repositioning to a new edge with more available vertical space), * and the callout will scroll-resize down to the available space. * * Use `minimumScrollResizeHeight` to change the minimum height the callout will resize down to * before repositioning to another edge (default 200px). * * Note: this prop has no effect if `directionalHintFixed=true`. * * Note: if `hideOverflow = true`, or if the computed callout style `overflowY` is `hidden` or `clip`, * the callout will not prefer scroll-resized positions (i.e. this prop will be ignored) * @defaultvalue false */ preferScrollResizePositioning?: boolean; } export { ICancelable } /** * {@docCategory DetailsList} */ export declare interface ICellStyleProps { cellLeftPadding: number; cellRightPadding: number; cellExtraRightPadding: number; } export { IChangeDescription } export { IChangeEventCallback } /** * Checkbox class interface. * {@docCategory Checkbox} */ export declare interface ICheckbox { /** Gets the current indeterminate state. */ indeterminate: boolean; /** Gets the current checked state. */ checked: boolean; /** Sets focus to the checkbox. */ focus: () => void; } /** * Checkbox properties. * {@docCategory Checkbox} */ export declare interface ICheckboxProps extends React_2.RefAttributes { /** * Optional callback to access the `ICheckbox` interface. Use this instead of `ref` for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * Class name to provide on the root element, in addition to the `ms-Checkbox` class. */ className?: string; /** * Checked state. Mutually exclusive with `defaultChecked`. Use this if you control the checked state at a higher * level and plan to pass in the correct value based on handling `onChange` events and re-rendering. */ checked?: boolean; /** * Default checked state. Mutually exclusive with `checked`. Use this if you want an uncontrolled component, * meaning the Checkbox instance maintains its own state. */ defaultChecked?: boolean; /** * Label to display next to the checkbox. */ label?: string; /** * Disabled state of the checkbox. */ disabled?: boolean; /** * Required state of the checkbox. */ required?: boolean; /** * Callback that is called when the checked value has changed. */ onChange?: (ev?: React_2.FormEvent, checked?: boolean) => void; /** * Title text applied to the root element and the hidden checkbox input. * (Use `label` instead for the visible label.) */ title?: string; /** * ID for the checkbox input. */ id?: string; /** * Name for the checkbox input. This is intended for use with forms and NOT displayed in the UI. */ name?: string; /** * Optional props that will be applied to the input element, *before* other props are applied. * Note that if you provide, for example, `disabled` as well as `inputProps.disabled`, the * top-level prop (`disabled` in this case) will take precedence. * * Including `data-*` props in `inputProps` is supported but currently requires casting since * TS 3.7 doesn't provide a way to allow all keys with a certain prefix. */ inputProps?: React_2.ButtonHTMLAttributes; /** * Determines whether the checkbox should be shown before the label (`start`) or after (`end`). * @defaultvalue 'start' */ boxSide?: 'start' | 'end'; /** * Theme provided by HOC. */ theme?: ITheme; /** * Accessible label for the checkbox. */ ariaLabel?: string; /** * ID for element that contains label information for the checkbox. */ ariaLabelledBy?: string; /** * ID for element that provides extended information for the checkbox. */ ariaDescribedBy?: string; /** * The position in the parent set (if in a set) for `aria-posinset`. */ ariaPositionInSet?: number; /** * The total size of the parent set (if in a set) for `aria-setsize`. */ ariaSetSize?: number; /** * Call to provide customized styling that will layer on top of the variant rules. */ styles?: IStyleFunctionOrObject; /** * Custom render function for the label. */ onRenderLabel?: IRenderFunction; /** * Custom icon props for the check mark rendered by the checkbox */ checkmarkIconProps?: IIconProps; /** * Optional controlled indeterminate visual state for checkbox. Setting indeterminate state takes visual precedence * over `checked` or `defaultChecked` props given but does not affect checked state. * * This should not be a toggleable state. On load, the checkbox will receive indeterminate visual state. * After the first user click, your supplied `onChange` callback should remove the indeterminate state * (without modifying the checked state), exposing the true state of the checkbox. */ indeterminate?: boolean; /** * Optional uncontrolled indeterminate visual state for checkbox. Setting indeterminate state takes visual precedence * over `checked` or `defaultChecked` props given but does not affect checked state. * * This should not be a toggleable state. On load, the checkbox will receive indeterminate visual state. * After the user's first click, it will be removed, exposing the true state of the checkbox. */ defaultIndeterminate?: boolean; } /** * {@docCategory Checkbox} */ export declare interface ICheckboxStyleProps { theme: ITheme; className?: string; disabled?: boolean; checked?: boolean; reversed?: boolean; indeterminate?: boolean; isUsingCustomLabelRender: boolean; } /** * {@docCategory Checkbox} */ export declare interface ICheckboxStyles { /** * Style for the root element (a button) of the checkbox component in the default enabled/unchecked state. */ root?: IStyle; /** * INTERNAL: This is mostly an internal implementation detail which you should avoid styling. * This refers to the `` element that is typically hidden and not rendered on screen. */ input?: IStyle; /** * Style for the label part (contains the customized checkbox + text) when enabled. */ label?: IStyle; /** * Style for checkbox in its default unchecked/enabled state. */ checkbox?: IStyle; /** * Style for the checkmark in the default enabled/unchecked state. */ checkmark?: IStyle; /** * Style for text appearing with the checkbox in its default enabled state. */ text?: IStyle; } /** * {@docCategory Check} */ export declare interface ICheckProps extends React_2.RefAttributes { /** * Gets the component ref. */ componentRef?: IRefObject; /** * Whether the component is currently checked. * @defaultvalue false */ checked?: boolean; /** * Call to provide customized styling that will layer on top of the variant rules */ styles?: IStyleFunctionOrObject; /** * @deprecated Not used */ alwaysShowCheck?: boolean; /** * Theme provided by HOC. */ theme?: ITheme; /** * Additional css class to apply to the Check */ className?: string; /** * Whether to use fast icon components. The icons can't be targeted by customization but are * still customizable via class names. * @defaultvalue true */ useFastIcons?: boolean; } /** * {@docCategory Check} */ export declare type ICheckStyleProps = Required> & Pick & { /** * Custom height/width for the checkbox. * @defaultvalue '18px' */ height?: string; /** * Custom height/width for the checkbox. * @defaultvalue '18px' * @deprecated Use `height` */ checkBoxHeight?: string; }; /** * {@docCategory Check} */ export declare interface ICheckStyles { /** * Style for the root element. */ root: IStyle; /** * The 'check' icon styles. */ check: IStyle; /** * The 'circle' icon styles. */ circle: IStyle; /** * Check host style * @deprecated Not used directly within the component. Instead, use `CheckGlobalClassNames.checkHost` from * `Check.styles.ts` to get the static class name to apply to the parent element of the Check. */ checkHost: IStyle; } /** * {@docCategory ChoiceGroup} */ export declare interface IChoiceGroup { /** * Gets the current checked option. */ checkedOption: IChoiceGroupOption | undefined; /** * Sets focus to the checked option or the first enabled option in the ChoiceGroup. */ focus: () => void; } /** * {@docCategory ChoiceGroup} */ export declare interface IChoiceGroupOption extends Omit, 'checked'> { /** * A required key to uniquely identify the option. */ key: string; /** * The text string for the option. */ text: string; /** * Used to customize option rendering. */ onRenderField?: IRenderFunction; /** * Used to customize label rendering. */ onRenderLabel?: IRenderFunction; /** * Props for an icon to display with this option. */ iconProps?: IIconProps; /** * Image to display with this option. */ imageSrc?: string; /** * Alt text if the option is an image. * @default `''` (empty string) */ imageAlt?: string; /** * The src of image for choice field which is selected. */ selectedImageSrc?: string; /** * The width and height of the image in px for choice field. * @defaultvalue `{ width: 32, height: 32 }` */ imageSize?: { width: number; height: number; }; /** * Whether or not the option is disabled. */ disabled?: boolean; /** * ID used on the option's input element. */ id?: string; /** * ID used on the option's label. */ labelId?: string; /** * Aria label of the option for the benefit of screen reader users. */ ariaLabel?: string; /** * Call to provide customized styling that will layer on top of the variant rules. */ styles?: IStyleFunctionOrObject; } /** * {@docCategory ChoiceGroup} */ export declare interface IChoiceGroupOptionProps extends Omit { /** * @deprecated Not used. */ componentRef?: IRefObject; /** * Unique key for the option, set based on `IChoiceGroupOption.key`. */ itemKey: string; /** * The option key. This will always be provided for callbacks (copied from `itemKey`) but is * optional when manually creating ChoiceGroupOptions. */ key?: string; /** * Whether or not the option is checked. Set by `ChoiceGroup` based on `selectedKey` or * `defaultSelectedKey` from `IChoiceGroupProps`. */ checked?: boolean; /** * Callback for the ChoiceGroup creating the option to be notified when the choice has been changed. */ onChange?: (evt?: React_2.FormEvent, props?: IChoiceGroupOption & IChoiceGroupOptionProps) => void; /** * Callback for the ChoiceGroup creating the option to be notified when the choice has received focus. */ onFocus?: (ev?: React_2.FocusEvent, props?: IChoiceGroupOption & IChoiceGroupOptionProps) => void | undefined; /** * Callback for the ChoiceGroup creating the option to be notified when the choice has lost focus. */ onBlur?: (ev?: React_2.FocusEvent, props?: IChoiceGroupOption & IChoiceGroupOptionProps) => void; /** * Indicates if the ChoiceGroupOption should appear focused, visually */ focused?: boolean; /** * Theme (provided through customization). */ theme?: ITheme; /** * If true, an option must be selected in the ChoiceGroup. */ required?: boolean; /** * This value is used to group each ChoiceGroupOption into the same logical ChoiceGroup */ name?: string; } /** * Defines props needed to construct styles. * {@docCategory ChoiceGroup} */ export declare interface IChoiceGroupOptionStyleProps { /** Theme provided by High-Order Component. */ theme: ITheme; /** Whether the option has an icon. */ hasIcon?: boolean; /** Whether the option icon is an image. */ hasImage?: boolean; /** Whether the option is checked or not. */ checked?: boolean; /** Whether the option is disabled or not. */ disabled?: boolean; /** Whether the image width or height are higher than `71`. */ imageIsLarge?: boolean; /** * Image sizes used when `hasImage` or `hasIcon` style props are enabled. * @defaultvalue `{ height: 32, width: 32 }` */ imageSize?: { height: number; width: number; }; /** Whether the option is in focus or not. */ focused?: boolean; } /** * {@docCategory ChoiceGroup} */ export declare interface IChoiceGroupOptionStyles { root?: IStyle; choiceFieldWrapper?: IStyle; input?: IStyle; field?: IStyle; innerField?: IStyle; imageWrapper?: IStyle; selectedImageWrapper?: IStyle; iconWrapper?: IStyle; labelWrapper?: IStyle; } /** * {@docCategory ChoiceGroup} */ export declare interface IChoiceGroupProps extends React_2.InputHTMLAttributes, React_2.RefAttributes { /** * Optional callback to access the `IChoiceGroup` interface. Use this instead of `ref` for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * The options for the choice group. */ options?: IChoiceGroupOption[]; /** * The key of the option that will be initially checked. */ defaultSelectedKey?: string | number; /** * The key of the selected option. If you provide this, you must maintain selection * state by observing onChange events and passing a new value in when changed. */ selectedKey?: string | number | null; /** * A callback for receiving a notification when the choice has been changed. */ onChange?: (ev?: React_2.FormEvent, option?: IChoiceGroupOption) => void; /** * Descriptive label for the choice group. */ label?: string; /** * Theme (provided through customization). */ theme?: ITheme; /** * Call to provide customized styling that will layer on top of the variant rules. */ styles?: IStyleFunctionOrObject; /** * ID of an element to use as the aria label for this ChoiceGroup. */ ariaLabelledBy?: string; } /** * {@docCategory ChoiceGroup} */ export declare interface IChoiceGroupStyleProps { theme: ITheme; className?: string; optionsContainIconOrImage?: boolean; } /** * {@docCategory ChoiceGroup} */ export declare interface IChoiceGroupStyles { root?: IStyle; label?: IStyle; flexContainer?: IStyle; } /** * Circle element interface * {@docCategory Shimmer} */ export declare interface ICircle extends IShimmerElement { /** * Sets the height of the shimmer circle in pixels. * Minimum supported 10px. * @defaultvalue 24px */ height?: number; } export { IClassNames } export { IClassNamesFunctionOptions } /** * {@docCategory Coachmark} */ export declare interface ICoachmark { /** * Forces the Coachmark to dismiss */ dismiss?: (ev?: Event | React_2.MouseEvent | React_2.KeyboardEvent) => void; } /** * Coachmark component props * {@docCategory Coachmark} */ export declare interface ICoachmarkProps extends React_2.RefAttributes { /** * Optional callback to access the `ICoachmark` interface. Use this instead of `ref` for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * If provided, additional class name to provide on the root element. */ className?: string; /** * Call to provide customized styling that will layer on top of the variant rules */ styles?: IStyleFunctionOrObject; /** * The target that the Coachmark should try to position itself based on. */ target: Target; /** * Props to pass to the PositioningContainer component. Specify the `directionalHint` to indicate * on which edge the Coachmark/TeachingBubble should be positioned. * @defaultvalue `{ directionalHint: DirectionalHint.bottomAutoEdge }` */ positioningContainerProps?: IPositioningContainerProps; /** * Whether or not to force the Coachmark/TeachingBubble content to fit within the window bounds. * @defaultvalue true */ isPositionForced?: boolean; /** * The starting collapsed state for the Coachmark. * @defaultvalue true * @deprecated Use `isCollapsed` instead. */ collapsed?: boolean; /** * The starting collapsed state for the Coachmark. * @defaultvalue true */ isCollapsed?: boolean; /** * The distance in pixels the mouse is located before opening up the Coachmark. * @defaultvalue 10 */ mouseProximityOffset?: number; /** * Callback when the opening animation begins. */ onAnimationOpenStart?: () => void; /** * Callback when the opening animation completes. */ onAnimationOpenEnd?: () => void; /** * @deprecated No longer used. */ beakWidth?: number; /** * @deprecated No longer used. */ beakHeight?: number; /** * Delay before allowing mouse movements to open the Coachmark. * @defaultvalue 3600 */ delayBeforeMouseOpen?: number; /** * Delay in milliseconds before Coachmark animation appears. * @defaultvalue 0 */ delayBeforeCoachmarkAnimation?: number; /** * Callback to run when the mouse moves. */ onMouseMove?: (e: MouseEvent) => void; /** * @deprecated No longer used. */ width?: number; /** * @deprecated No longer used. */ height?: number; /** * Color of the Coachmark/TeachingBubble. */ color?: string; /** * Beacon color one. */ beaconColorOne?: string; /** * Beacon color two. */ beaconColorTwo?: string; /** * Text for screen reader to announce when Coachmark is displayed */ ariaAlertText?: string; /** * @deprecated Not used. Coachmark uses `focusFirstChild` utility instead to focus on TeachingBubbleContent. */ teachingBubbleRef?: ITeachingBubble; /** * ID used for the internal element which contains label text for the Coachmark * (don't render an element with this ID yourself). */ ariaLabelledBy?: string; /** * ID used for the internal element which contains description text for the Coachmark * (don't render an element with this ID yourself). */ ariaDescribedBy?: string; /** * Defines the text content for the `ariaLabelledBy` element. * Not used unless `ariaLabelledBy` is also provided. */ ariaLabelledByText?: string; /** * Defines the text content for the `ariaDescribedBy` element * Not used unless `ariaDescribedBy` is also provided. */ ariaDescribedByText?: string; /** * If true then the Coachmark will not dismiss when it loses focus * @defaultvalue false */ preventDismissOnLostFocus?: boolean; /** * If true then the Coachmark beak (arrow pointing towards target) will always be visible as long as * Coachmark is visible * @defaultvalue false */ persistentBeak?: boolean; /** * If true then focus will not be set to the Coachmark when it mounts. Useful in cases where focus on coachmark * is causing other components in page to dismiss upon losing focus. * @defaultvalue false */ preventFocusOnMount?: boolean; /** * Callback when the Coachmark tries to close. */ onDismiss?: (ev?: Event | React_2.MouseEvent | React_2.KeyboardEvent) => void; /** * Theme provided by higher order component. */ theme?: ITheme; /** * Child nodes to render inside the Coachmark dialog */ children?: React_2.ReactNode; } /** * The props needed to construct styles. * {@docCategory Coachmark} */ export declare interface ICoachmarkStyleProps { /** * ClassName to provide on the root style area. */ className?: string; /** * Current theme. */ theme?: ITheme; /** * Is the Coachmark collapsed. * @deprecated Use `isCollapsed` instead. */ collapsed?: boolean; /** * Is the Coachmark collapsed */ isCollapsed: boolean; /** * Is the component taking measurements */ isMeasuring: boolean; /** * The height measured before the component has been mounted in pixels */ entityHostHeight?: string; /** * The width measured in pixels */ entityHostWidth?: string; /** * Width of the coachmark */ width?: string; /** * Height of the coachmark */ height?: string; /** * Color */ color?: string; /** * Beacon color one */ beaconColorOne?: string; /** * Beacon color two */ beaconColorTwo?: string; /** * Transform origin for teaching bubble content */ transformOrigin?: string; /** * Delay time for the animation to start */ delayBeforeCoachmarkAnimation?: string; } /** * Represents the stylable areas of the control. * {@docCategory Coachmark} */ export declare interface ICoachmarkStyles { /** * Style for the root element in the default enabled/unchecked state. */ root?: IStyle; /** * The pulsing beacon that animates when the Coachmark is collapsed. */ pulsingBeacon?: IStyle; /** * The layer, or div, that the translate animation will be applied to. */ translateAnimationContainer?: IStyle; /** * The layer the Scale animation will be applied to. */ scaleAnimationLayer?: IStyle; /** * The layer the Rotate animation will be applied to. */ rotateAnimationLayer?: IStyle; /** * The layer that content/components/elements will be hosted in. */ entityHost?: IStyle; /** * The inner layer that components will be hosted in * (primary purpose is scaling the layer down while the Coachmark collapses) */ entityInnerHost: IStyle; /** * The layer that directly contains the TeachingBubbleContent */ childrenContainer: IStyle; /** * The styles applied when the Coachmark has collapsed. */ collapsed?: IStyle; /** * The styles applied to the ARIA attribute container */ ariaContainer?: IStyle; } /** * @deprecated No longer used. * {@docCategory Coachmark} */ export declare type ICoachmarkTypes = ICoachmarkProps; export declare interface IColor extends IRGB, IHSV { /** Hex string for the color (excluding alpha component), *not* prefixed with #. */ hex: string; /** CSS color string. If a hex value, it must be prefixed with #. */ str: string; /** Transparency value, range 0 (opaque) to 100 (transparent). Usually assumed to be 0 if not specified. */ t?: number; } /** * {@docCategory SwatchColorPicker} */ export declare interface IColorCellProps { /** * Arbitrary unique string associated with this option */ id: string; /** * Tooltip and aria label for this item */ label?: string; /** * The CSS-compatible string to describe the color */ color: string; /** * Index for this option */ index?: number; /** * Determines if this individual cell is disabled */ disabled?: boolean; } /** * {@docCategory ColorPicker} */ export declare interface IColorPicker { /** The currently selected color. */ color: IColor; } /** * {@docCategory SwatchColorPicker} */ export declare interface IColorPickerGridCellProps { /** * Item to render */ item: IColorCellProps; /** * Used as a PREFIX for the cell's ID (the cell will not have this literal string as its ID). * @deprecated Deprecated due to misleading name. Use `idPrefix` instead. */ id?: string; /** * Prefix for this cell's ID. Will be required in a future version once `id` is removed. */ idPrefix?: string; /** * If true, uses radio semantics for the color cell. * This should be set to true for cells within a single-row colorpicker. * @defaultvalue false */ isRadio?: boolean; /** * Tooltip and aria label for this item */ label?: string; /** * The CSS-compatible string to describe the color */ color: string; /** * Index for this option */ index?: number; /** * The theme object to use for styling. */ theme?: ITheme; /** * True if this cell should be rendered as a circle, false if it should be a square. * @default `true` (render as circle) */ circle?: boolean; /** * Whether this cell should be disabled * @default false */ disabled?: boolean; /** * Whether this cell is currently selected */ selected: boolean; /** * Height of the cell, in pixels * @defaultvalue 20 */ height?: number; /** * Width of the cell, in pixels * @defaultvalue 20 */ width?: number; /** * Width of the border that indicates a selected/hovered cell, in pixels. * @defaultvalue 2 if `cellWidth` is less than 24; otherwise 4 */ borderWidth?: number; /** * Handler for when a color cell is clicked. */ onClick?: (item: IColorCellProps, event?: React_2.MouseEvent) => void; onHover?: (item?: IColorCellProps, event?: React_2.MouseEvent) => void; onFocus?: (item: IColorCellProps, event?: React_2.FormEvent) => void; /** * Custom styles for the component. */ styles?: IStyleFunctionOrObject; /** * Mouse enter handler. Returns true if the event should be processed, false otherwise. */ onMouseEnter?: (ev: React_2.MouseEvent) => boolean; /** * Mouse move handler. Returns true if the event should be processed, false otherwise. */ onMouseMove?: (ev: React_2.MouseEvent) => boolean; onMouseLeave?: (ev: React_2.MouseEvent) => void; onWheel?: (ev: React_2.MouseEvent) => void; onKeyDown?: (ev: React_2.KeyboardEvent) => void; /** * Custom render function for rendering internal content of the color cell. */ onRenderColorCellContent?: IRenderFunction; } /** * {@docCategory SwatchColorPicker} */ export declare interface IColorPickerGridCellStyleProps { /** * Theme to apply to the cell. */ theme: ITheme; /** * Whether the component is disabled or not. */ disabled?: boolean; /** * Whether the cell is currently selected or not. */ selected?: boolean; /** * Whether the svg color element should be rendered as a circle or not. */ circle?: boolean; /** * Whether the color being rendered is white or not. If it is white we show a border around it. */ isWhite?: boolean; /** * The height of this cell, in pixels. */ height?: number; /** * The width of this cell, in pixels. */ width?: number; /** * The width of the border indicating a hovered or selected cell, in pixels. */ borderWidth?: number; } /** * {@docCategory SwatchColorPicker} */ export declare interface IColorPickerGridCellStyles { /** * Style to apply to a colorCell in the color picker. */ colorCell: IStyle; /** * Style to apply to the svg element that renders the color. */ svg: IStyle; } /** * {@docCategory ColorPicker} */ export declare interface IColorPickerProps { /** * Gets the component ref. */ componentRef?: IRefObject; /** * Object or CSS-compatible string to describe the color. */ color: IColor | string; /** * Labels for elements within the ColorPicker. Defaults are provided in English only. */ strings?: IColorPickerStrings; /** * Callback for when the user changes the color. * (Not called when the color is changed via props.) */ onChange?: (ev: React_2.SyntheticEvent, color: IColor) => void; /** * `alpha` (the default) means display a slider and text field for editing alpha values. * `transparency` also displays a slider and text field but for editing transparency values. * `none` hides these controls. * * Alpha represents the opacity of the color, whereas transparency represents the transparentness * of the color: i.e. a 30% transparent color has 70% opaqueness. * * @defaultvalue 'alpha' */ alphaType?: 'alpha' | 'transparency' | 'none'; /** * Whether to hide the alpha (or transparency) slider and text field. * @deprecated Use `alphaType: 'none'` */ alphaSliderHidden?: boolean; /** * Label for the hex text field. * @defaultvalue Hex * @deprecated Use `strings` */ hexLabel?: string; /** * Label for the red text field. * @defaultvalue Red * @deprecated Use `strings` */ redLabel?: string; /** * Label for the green text field. * @defaultvalue Green * @deprecated Use `strings` */ greenLabel?: string; /** * Label for the blue text field. * @defaultvalue Blue * @deprecated Use `strings` */ blueLabel?: string; /** * Label for the alpha text field. * @defaultvalue Alpha * @deprecated Use `strings` */ alphaLabel?: string; /** * Additional CSS class(es) to apply to the ColorPicker. */ className?: string; /** * Theme (provided through customization). */ theme?: ITheme; /** * Call to provide customized styling that will layer on top of the variant rules. */ styles?: IStyleFunctionOrObject; /** * Whether to show color preview box. * @defaultvalue false */ showPreview?: boolean; /** * Optional props to pass through to the error message tooltips */ tooltipProps?: ITooltipHostProps; } export declare interface IColorPickerState { /** Most recently selected color */ color: IColor; /** Color component currently being edited via a text field (if intermediate value is invalid) */ editingColor?: { /** Which color component is being edited */ component: ColorComponent; /** Currently entered value, which is not valid */ value: string; }; } export declare interface IColorPickerStrings { /** * Accessible label for the root of the color picker region. * The string should contain a placeholder `{0}` for the currently selected color. * @defaultvalue `'Color picker, {0} selected.'` */ rootAriaLabelFormat?: string; /** * Label for the hex text field. * @defaultvalue Hex */ hex?: string; /** * Label for the red text field. * @defaultvalue Red */ red?: string; /** * Label for the green text field. * @defaultvalue Green */ green?: string; /** * Label for the blue text field. * @defaultvalue Blue */ blue?: string; /** * Label for the alpha text field. * Also used as the aria label for the alpha slider if `alphaAriaLabel` is not provided. * @defaultvalue Alpha */ alpha?: string; /** * Label for the transparency text field. * @defaultvalue Transparency */ transparency?: string; /** * Customized aria-label for the alpha slider. * This overrides the visible text label, and should be used with extreme care (and very rarely). */ alphaAriaLabel?: string; /** * Customized aria-label for the transparency slider. * This overrides the visible text label, and should be used with extreme care (and very rarely). */ transparencyAriaLabel?: string; /** * Aria label for the hue slider. * @defaultvalue Hue */ hueAriaLabel?: string; /** * Aria label for the hue slider. * @deprecated Use `hueAriaLabel` */ hue?: string; /** * Aria label for the color rectangle, which adjusts saturation and value (brightness). * @defaultvalue 'Saturation and brightness' */ svAriaLabel?: string; /** * Format string for the current values of the color rectangle. * The string must include descriptions and two placeholders for the current values: * `{0}` for saturation and `{1}` for value/brightness. * @defaultvalue `'Saturation {0} brightness {1}'` */ svAriaValueFormat?: string; /** * Detailed description for how to use the color rectangle. Moving the thumb horizontally adjusts * saturation and moving it vertically adjusts value (essentially, brightness). * @defaultvalue 'Use left and right arrow keys to set saturation. Use up and down arrow keys to set brightness.' */ svAriaDescription?: string; /** * Error message for invalid hex input * @defaultvalue 'Hex values must be between 3 and 6 characters long' */ hexError?: string; /** * Error message for invalid alpha input * @defaultvalue 'Alpha must be between 0 and 100' */ alphaError?: string; /** * Error message for invalid transparency input * @defaultvalue 'Transparency must be between 0 and 100' */ transparencyError?: string; /** * Error message for invalid red input * @defaultvalue 'Red must be between 0 and 255' */ redError?: string; /** * Error message for invalid green input * @defaultvalue 'Green must be between 0 and 255' */ greenError?: string; /** * Error message for invalid blue input * @defaultvalue 'Blue must be between 0 and 255' */ blueError?: string; } /** * {@docCategory ColorPicker} */ export declare type IColorPickerStyleProps = Required> & Pick; /** * {@docCategory ColorPicker} */ export declare interface IColorPickerStyles { /** * Style set for the root element. */ root?: IStyle; /** * Style set for the panel element that contains the color rectangle, color sliders and inputs . */ panel?: IStyle; /** * Style set for the panel element that contains the color rectangle */ colorRectangle?: IStyle; /** * Style set for the table element that contains the color sliders and inputs. */ table?: IStyle; /** * Style set for the table header that contains the labels. */ tableHeader?: IStyle; /** * Style set for the table cell that contains the hex label. */ tableHexCell?: IStyle; /** * Style set for the table cell that contains the alpha or transparency label. */ tableAlphaCell?: IStyle; /** * Style set for each text field input. */ input?: IStyle; /** * Color Square */ colorSquare?: IStyle; /** * flexContainer */ flexContainer?: IStyle; /** * flexSlider */ flexSlider?: IStyle; /** * flexPreviewBox */ flexPreviewBox?: IStyle; } /** * {@docCategory ColorPicker} */ export declare interface IColorRectangle { /** Currently selected color. */ color: IColor; } /** * {@docCategory ColorPicker} */ export declare interface IColorRectangleProps { /** * Gets the component ref. */ componentRef?: IRefObject; /** * Current color of the rectangle. */ color: IColor; /** * Label of the ColorRectangle for the benefit of screen reader users. * @defaultvalue 'Saturation and brightness' */ ariaLabel?: string; /** * Format string for the color rectangle's current value as read by screen readers. * The string must include descriptions and two placeholders for the current values: * `{0}` for saturation and `{1}` for value/brightness. * @defaultvalue `'Saturation {0} brightness {1}'` */ ariaValueFormat?: string; /** * Detailed description for how to use the color rectangle. Moving the thumb horizontally adjusts * saturation and moving it vertically adjusts value (essentially, brightness). * @defaultvalue 'Use left and right arrow keys to set saturation. Use up and down arrow keys to set brightness.' */ ariaDescription?: string; /** * Minimum width and height. */ minSize?: number; /** * Additional CSS class(es) to apply to the ColorRectangle. */ className?: string; /** * Theme (provided through customization). */ theme?: ITheme; /** * Call to provide customized styling that will layer on top of the variant rules. */ styles?: IStyleFunctionOrObject; /** * Callback for when the color changes. */ onChange?: (ev: React_2.MouseEvent | React_2.KeyboardEvent, color: IColor) => void; } /** * {@docCategory ColorPicker} */ export declare interface IColorRectangleStyleProps { /** * Theme (provided through customization). */ theme: ITheme; /** * Additional CSS class(es) to apply to the ColorRectangle. */ className?: string; /** * Minimum width and height. */ minSize?: number; } /** * {@docCategory ColorPicker} */ export declare interface IColorRectangleStyles { /** * Style set for the root element. */ root?: IStyle; /** * Style set for the light-colored rectangle. */ light?: IStyle; /** * Style set for the dark-colored rectangle. */ dark?: IStyle; /** * Style set for the draggable thumb element. */ thumb?: IStyle; /** * Style for a hidden detailed description for screen reader users. */ description?: IStyle; } /** * {@docCategory ColorPicker} */ export declare interface IColorSlider { /** Current value of the slider. */ value: number; } /** * {@docCategory ColorPicker} */ export declare interface IColorSliderProps { /** * Gets the component ref. */ componentRef?: IRefObject; /** * Minimum value of the slider. * @deprecated Will always be 0 */ minValue?: number; /** * Maximum value of the slider. * @deprecated Will be 100 for alpha or transparency sliders, or 359 for hue sliders. */ maxValue?: number; /** * Current value of the slider. */ value?: number; /** * Label of the ColorSlider for the benefit of screen reader users. */ ariaLabel?: string; /** * Type of slider to display. * @defaultvalue 'hue' */ type?: 'hue' | 'alpha' | 'transparency'; /** * If true, the slider represents an alpha slider and will display a gray checkered pattern * in the background. Otherwise, the slider represents a hue slider. * @defaultvalue false * @deprecated Use `type` */ isAlpha?: boolean; /** * Hex color to use when rendering an alpha or transparency slider's overlay, *without* the `#`. */ overlayColor?: string; /** * CSS-compatible string for the color of the thumb element. * @deprecated Not used. Use `styles.sliderThumb` instead. */ thumbColor?: string; /** * Custom style for the overlay element. * @deprecated Use `overlayColor` instead */ overlayStyle?: React_2.CSSProperties; /** * Callback issued when the value changes. */ onChange?: (event: React_2.MouseEvent | React_2.KeyboardEvent, newValue?: number) => void; /** * Additional CSS class(es) to apply to the ColorSlider. */ className?: string; /** * Theme (provided through customization). */ theme?: ITheme; /** * Call to provide customized styling that will layer on top of the variant rules. */ styles?: IStyleFunctionOrObject; } /** * {@docCategory ColorPicker} */ export declare type IColorSliderStyleProps = Required> & Pick & { /** * @deprecated Use `type` */ isAlpha?: boolean; }; /** * {@docCategory ColorPicker} */ export declare interface IColorSliderStyles { /** * Style set for the root element. */ root?: IStyle; /** * Style set for the draggable thumb element. */ sliderThumb?: IStyle; /** * Style set for the overlay element. */ sliderOverlay?: IStyle; } /** * {@docCategory DetailsList} */ export declare interface IColumn { /** A unique key for identifying the column. */ key: string; /** Name to render on the column header. */ name: string; /** * The field to pull the text value from for the column. * Can be unset if a custom `onRender` method is provided. */ fieldName?: string; /** * If specified, the width of the column is a portion of the available space equal to this value divided by the sum * of all proportional column widths in the list. For example, if there is a list with two proportional columns that * have widths of 1 and 3, they will respectively occupy (1/4) = 25% and (3/4) = 75% of the remaining space. Note that * this relies on viewport measures and will not work well with skipViewportMeasures. */ flexGrow?: number; /** Class name to apply to the column cell within each row. */ className?: string; /** Custom overrides to the themed or default styles. */ styles?: IStyleFunctionOrObject; /** Minimum width for the column. */ minWidth: number; /** * If specified, the width of the column is a portion of the available space equal to this value divided by the sum * of all proportional column widths in the list. For example, if there is a list with two proportional columns that * have widths of 1 and 3, they will respectively occupy (1/4) = 25% and (2/4) = 75% of the remaining space. Note that * this relies on viewport measures and will not work well with skipViewportMeasures. */ targetWidthProportion?: number; /** * Accessible label for the column. The column name will still be used as the primary label, * but this text (if specified) will be used as the column description. * WARNING: grid column descriptions are often ignored by screen readers, so any necessary information * should go directly in the column content */ ariaLabel?: string; /** Whether the column is a header for the given row. There should be only one column with this set to true. */ isRowHeader?: boolean; /** Maximum width for the column, if stretching is allowed in justified scenarios. */ maxWidth?: number; /** * Defines how the column's header should render. * @defaultvalue ColumnActionsMode.clickable */ columnActionsMode?: ColumnActionsMode; /** Custom icon to use in the column header. */ iconName?: string; /** * Whether only the icon should be displayed in the column header. * If true, the column name and dropdown chevron will not be displayed. */ isIconOnly?: boolean; /** Class name for the icon within the header. */ iconClassName?: string; /** * If true, allow the column to be collapsed when rendered in justified layout. * @deprecated Use `isCollapsible` */ isCollapsable?: boolean; /** If true, allow the column to be collapsed when rendered in justified layout. */ isCollapsible?: boolean; /** If true, column header will render an icon indicating column is sortable while unsorted */ showSortIconWhenUnsorted?: boolean; /** Determines if the column is currently sorted. Renders a sort arrow in the column header. */ isSorted?: boolean; /** Determines if the sort arrow is pointed down (descending) or up. */ isSortedDescending?: boolean; /** Determines if the column can be resized. */ isResizable?: boolean; /** Determines if the column can render multi-line text. */ isMultiline?: boolean; /** Custom renderer for cell content, instead of the default text rendering. */ onRender?: (item?: any, index?: number, column?: IColumn) => any; /** Custom override for the parent list's `getCellValueKey`. */ getValueKey?: (item?: any, index?: number, column?: IColumn) => string; onRenderField?: IRenderFunction; /** Custom renderer for column header divider. */ onRenderDivider?: IRenderFunction; /** Custom renderer for filter icon. */ onRenderFilterIcon?: IRenderFunction; /** Custom renderer for column header content, instead of the default text rendering. */ onRenderHeader?: IRenderFunction; /** Whether the list is filtered by this column. If true, shows a filter icon next to this column's name. */ isFiltered?: boolean; /** Callback for when the user clicks on the column header. */ onColumnClick?: (ev: React_2.MouseEvent, column: IColumn) => void; /** Callback for when the user opens the column header context menu. */ onColumnContextMenu?: (column?: IColumn, ev?: React_2.MouseEvent) => void; /** Callback for when the user performs a keyboard action on the column header */ onColumnKeyDown?: (ev: React_2.KeyboardEvent, column: IColumn) => void; /** * Callback for when the column is resized (`width` is the current width). * * Prefer this over `DetailsList`'s `onColumnResize` if you require the `IColumn` to report its width * after every resize event. Consider debouncing the callback if resize events occur frequently. */ onColumnResize?: (width?: number) => void; /** Whether the list is grouped by this column. If true, shows a grouped icon next to this column's name. */ isGrouped?: boolean; /** Arbitrary data passthrough which can be used by the caller. */ data?: any; /** Internal only value. */ calculatedWidth?: number; /** * Internal only value. * Remembers the actual width of the column in any case. * `calculatedWidth` is only saved when it's defined by user, not for justified calculations. */ currentWidth?: number; /** Class name to apply to the column header cell. */ headerClassName?: string; /** If true, add additional LTR padding-right to column and cells. */ isPadded?: boolean; /** * Accessible label for indicating that the list is sorted by this column in ascending order. * This will be read after the main column header label. */ sortAscendingAriaLabel?: string; /** * Accessible label for indicating that the list is sorted by this column in descending order. * This will be read after the main column header label. */ sortDescendingAriaLabel?: string; /** * Accessible label for indicating that the list could be sorted by this column but isn't currently. * This will be read after the main column header label. */ sortableAriaLabel?: string; /** Accessible label for the status of this column when grouped. */ groupAriaLabel?: string; /** Accessible label for the status of this column when filtered. */ filterAriaLabel?: string; /** Whether a dropdown menu is open so that the appropriate ARIA attributes are rendered. */ isMenuOpen?: boolean; } /** * {@docCategory DetailsList} */ export declare interface IColumnDragDropDetails { /** * Specifies the source column index * @defaultvalue -1 */ draggedIndex: number; /** * Specifies the target column index * @defaultvalue -1 */ targetIndex: number; } /** * {@docCategory DetailsList} */ export declare interface IColumnReorderHeaderProps extends IColumnReorderOptions { /** Callback to notify the column dragEnd event to List * Need this to check whether the dragEnd has happened on * corresponding list or outside of the list */ onColumnDragEnd?: (props: { dropLocation?: ColumnDragEndLocation; }, event: MouseEvent) => void; } /** * {@docCategory DetailsList} */ export declare interface IColumnReorderOptions { /** * Specifies the number fixed columns from left * @defaultvalue 0 */ frozenColumnCountFromStart?: number; /** * Specifies the number fixed columns from right * @defaultvalue 0 */ frozenColumnCountFromEnd?: number; /** * Callback to handle when dragging on this column's DetailsHeader has started. */ onColumnDragStart?: (dragStarted: boolean) => void; /** * Callback to handle column reordering. * `draggedIndex` is the source column index, which should be placed at `targetIndex`. * @deprecated Use `onColumnDrop` instead. */ handleColumnReorder?: (draggedIndex: number, targetIndex: number) => void; /** * Callback to handle column reordering. * `draggedIndex` is the source column index, which should be placed at `targetIndex`. */ onColumnDrop?: (dragDropDetails: IColumnDragDropDetails) => void; /** * Callback to handle when dragging on this column's DetailsHeader has finished. */ onDragEnd?: (columnDropLocationDetails: ColumnDragEndLocation) => void; } /** * {@docCategory DetailsList} */ export declare interface IColumnResizeDetails { columnIndex: number; originX?: number; columnMinWidth: number; } /** * {@docCategory ComboBox} */ export declare interface IComboBox { /** * All selected options. */ readonly selectedOptions: IComboBoxOption[]; /** * If there is a menu open, this will dismiss it. */ dismissMenu: () => void; /** * Sets focus to the input in the ComboBox. * @param shouldOpenOnFocus - Whether to open the menu when the input gets focus * @param useFocusAsync - Whether to focus the input asynchronously */ focus(shouldOpenOnFocus?: boolean, useFocusAsync?: boolean): void; } export declare interface IComboBoxClassNames { container: string; label: string; root: string; input: string; errorMessage: string; callout: string; optionsContainer: string; header: string; divider: string; optionsContainerWrapper: string; screenReaderText: string; } /** * {@docCategory ComboBox} */ export declare interface IComboBoxOption extends ISelectableOption { /** * Specific styles for each ComboBox option. To give common styles to all options, use * `IComboBoxProps.comboBoxOptionStyles` instead. */ styles?: Partial; /** * Whether to use the `ariaLabel` prop instead of the `text` prop to set the preview text as well * as the `aria-label`. This is for scenarios where the `text` prop is used for embedded data. */ useAriaLabelAsText?: boolean; } export declare interface IComboBoxOptionClassNames { optionText: string; root: string; optionTextWrapper: string; } /** * {@docCategory ComboBox} */ export declare interface IComboBoxOptionStyles extends IButtonStyles { /** * Styles for the text inside the ComboBox option. This should be used instead of the description * in IButtonStyles because we custom render the text in the ComboBox options. */ optionText: IStyle; /** * Styles for the ComboBox option text's wrapper. */ optionTextWrapper: IStyle; } /** * {@docCategory ComboBox} */ export declare interface IComboBoxProps extends ISelectableDroppableTextProps, React_2.RefAttributes { /** * Optional ref to access the `IComboBox` interface. Use this instead of `ref` for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * Collection of options for this ComboBox. */ options: IComboBoxOption[]; /** * Called when a ComboBox item is clicked. */ onItemClick?: (event: React_2.FormEvent, option?: IComboBoxOption, index?: number) => void; /** * Called when either: * 1) The selected option changes. * 2) A manually edited value is submitted. In this case there may not be a matched option if `allowFreeform` * is also true (and hence only `value` would be provided; the other parameters would be unspecified). * * The value passed to the callback (4th paramenter) reflects the changed option's text, or the user-typed input when * freeform is allowed. */ onChange?: (event: React_2.FormEvent, option?: IComboBoxOption, index?: number, value?: string) => void; /** * Called when the user changes the pending value in ComboBox, either by typing in the * input or hovering over options. When typing, the behavior varies depending on `autoComplete` * and `allowFreeform` settings. * * In all cases, when the pending value is reset, all parameters will be undefined. * * When hovering options: `option` and `index` will be provided, and `value` will be undefined. * * Typing with `allowFreeform` on: If there's an option matching the input (an exact match if * `autoComplete` is off, or a prefix match otherwise), `option` and `index` are provided and * `value` is undefined. Otherwise only `value` is provided. * * Typing with `allowFreeform` off (or unspecified): If `autoComplete` is on (or unspecified), * and the user types text matching the start of an option within a timeout, `option` and `index` * are provided and `value` is undefined. If `autoComplete` is off, typing does nothing. * * If you simply want to be notified of raw text input, use the prop `onInputValueChange`. */ onPendingValueChanged?: (option?: IComboBoxOption, index?: number, value?: string) => void; /** * Called when the user types in to the input of the combo box * * Ideal if you want to be notified of raw text input */ onInputValueChange?: (text: string) => void; /** * Called when the ComboBox menu is launched. */ onMenuOpen?: () => void; /** * Called when the ComboBox menu is dismissed. */ onMenuDismissed?: () => void; /** * Called before the menu gets dismissed. */ onMenuDismiss?: () => void; /** * Called when the options should be resolved, if they have been updated or * if they need to be passed in the first time. */ onResolveOptions?: (options: IComboBoxOption[]) => IComboBoxOption[] | PromiseLike; /** * Called when the ComboBox requests the list to scroll to a specific element. */ onScrollToItem?: (itemIndex: number) => void; /** * Whether the ComboBox allows freeform user input, rather than restricting to the provided options. */ allowFreeform?: boolean; /** * When true, the Combobox will allow the user to type freely while the Combobox is focused. * On Blur, the value will be set to the matching option, or the previous selection if there is no match. * @defaultvalue false */ allowFreeInput?: boolean; /** * When true this allows the parent element to navigate using left and right arrow keys. * * @defaultvalue false */ allowParentArrowNavigation?: boolean; /** * Whether the ComboBox auto completes. As the user is entering text, potential matches will be * suggested from the list of options. If the ComboBox is expanded, this will also scroll to the * suggested option and give it a selected style. * * @defaultvalue "on" */ autoComplete?: 'on' | 'off'; /** * Value to show in the input. Does not have to map to an option. */ text?: string; /** * When multiple items are selected, this will be used to separate values in the ComboBox input. * * @defaultvalue ", " */ multiSelectDelimiter?: string; /** * The IconProps to use for the caret down (expand) button of the ComboBox. */ buttonIconProps?: IIconProps; /** * Props to pass through to the Autofill component (the input field) inside the ComboBox. * WARNING: These props (except the callbacks) may override ComboBox's defaults and cause issues. */ autofill?: IAutofillProps; /** * Theme provided by HOC. */ theme?: ITheme; /** * Custom styles for this component. */ styles?: Partial; /** * Custom function for providing the classNames for the ComboBox. Can be used to provide * all styles for the component instead of applying them on top of the default styles. */ getClassNames?: (theme: ITheme, isOpen: boolean, disabled: boolean, required: boolean, focused: boolean, allowFreeForm: boolean, hasErrorMessage: boolean, className?: string) => IComboBoxClassNames; /** * Styles for the caret down (expand) button. */ caretDownButtonStyles?: Partial; /** * Default styles that should be applied to ComboBox options. */ comboBoxOptionStyles?: Partial; /** * If the options list is scrollable, whether to position the selected option at the top of the * callout when it is opened (unless it has reached the end of the scrollbar). * @defaultvalue false; */ scrollSelectedToTop?: boolean; /** * Add additional content above the option list in the callout. Content should not include interactive items. */ onRenderUpperContent?: IRenderFunction; /** * Add additional content below the option list in the callout. Content should not include interactive items. */ onRenderLowerContent?: IRenderFunction; /** * Custom width for options list dropdown. Mutually exclusive with `useComboBoxAsMenuWidth`. */ dropdownWidth?: number; /** * Whether to use the ComboBox field width as the menu's width. * Mutually exclusive with `dropdownWidth`. */ useComboBoxAsMenuWidth?: boolean; /** * Custom max width for the options list dropdown. */ dropdownMaxWidth?: number; /** * Whether to hide the ComboBox's caret (expand) button element from screen readers. This is false * (exposed to AT) by default because Android Talkback cannot otherwise expand the combobox. * @defaultvalue false */ isButtonAriaHidden?: boolean; /** * Optional ID of an element providing a description of the ComboBox for screen reader users. */ ariaDescribedBy?: string; /** * Whether to show/hide the menu when it's opened/closed (rather than creating/destroying it). * This will improve perf of the menu opening but could potentially have a negative impact on * overall perf by increasing initial render time (since the ComboBox will render the menu hidden * on mount) and keeping more elements in the DOM. Should only be used when perf to open/close * the menu is important. * * Note: This may increase the amount of time it takes for the ComboBox itself to mount. */ persistMenu?: boolean; /** * Whether the options list callout should restore focus after being dismissed. Set to false to * prevent the menu from trying to re-focus the element that had focus before the menu was opened. * @defaultvalue true; */ shouldRestoreFocus?: boolean; /** * Additional props for the caret down (expand) button. */ iconButtonProps?: IButtonProps; /** * Custom render function for the label text. */ onRenderLabel?: IRenderFunction; /** * Whether matching the ComboBox options when writing in the ComboBox input should be case-sensitive or not. * @defaultvalue false */ caseSensitive?: boolean; } export declare interface IComboBoxState { /** The open state */ isOpen?: boolean; /** The focused state of the combo box */ focusState?: 'none' | 'focused' | 'focusing'; /** * When taking input, this will store the index that the options input matches * (-1 if no input or match) */ currentPendingValueValidIndex: number; /** * Stores the hovered over value in the dropdown * (used for styling the options without updating the input) */ currentPendingValueValidIndexOnHover: number; /** When taking input, this will store the actual text that is being entered */ currentPendingValue?: string; /** * The id of the current focused combo item, otherwise the id of the currently selected element, * null otherwise */ ariaActiveDescendantValue?: string; } /** * {@docCategory ComboBox} */ export declare interface IComboBoxStyles extends IShadowDomStyle { /** * Style for the container which has the ComboBox and the label. * (In most other components this would be called `root`.) */ container: IStyle; /** * Style for the label element of the ComboBox. */ label: IStyle; /** * Style for the label element of the ComboBox in the disabled state. */ labelDisabled: IStyle; /** * Base styles for the wrapper element containing the input field and caret button, applied to * all state variants. * * Unlike in most components, this is NOT the actual root element which also contains the label * as well as the field; for that, use `container`. */ root: IStyle; /** * Styles for the wrapper element containing the input field and caret button, applied when * the ComboBox has an error message. */ rootError: IStyle; /** * Styles for the wrapper element containing the input field and caret button, applied when * `IComboBoxProps.allowFreeform` is false. */ rootDisallowFreeForm: IStyle; /** * Styles for the wrapper element containing the input field and caret button, applied any time * the ComboBox is hovered (unless it's disabled). */ rootHovered: IStyle; /** * Styles for the wrapper element containing the input field and caret button, applied any time * the ComboBox is active (unless it's disabled). */ rootPressed: IStyle; /** * Styles for the wrapper element containing the input field and caret button, applied any time * the ComboBox is focused (unless it's disabled). */ rootFocused: IStyle; /** * Styles for the wrapper element containing the input field and caret button, applied when the * ComboBox is disabled. These override all the other styles. * * NOTE: Hover/focused/active styles are not applied for disabled ComboBoxes. */ rootDisabled: IStyle; /** * Base styles for the input element which contains the currently selected option. */ input: IStyle; /** * Style override for the input element when ComboBox is disabled. */ inputDisabled: IStyle; /** * Styles for the error message text of the ComboBox. */ errorMessage: IStyle; /** * Styles for the callout. */ callout: IStyle; /** * Styles for the options list container element. */ optionsContainerWrapper: IStyle; /** * Styles for the container of all the ComboBox options. * Includes the headers and dividers. */ optionsContainer: IStyle; /** * Styles for a header in the options. */ header: IStyle; /** * Styles for a divider in the options. */ divider: IStyle; /** * Styles for hidden screen reader text. */ screenReaderText: IStyle; } /** * {@docCategory CommandBar} */ export declare interface ICommandBar { /** * Sets focus to the active command in the list. */ focus(): void; /** * Remeasures the available space. */ remeasure(): void; } export declare interface ICommandBarData { /** * Items being rendered in the primary region */ primaryItems: ICommandBarItemProps[]; /** * Items being rendered in the overflow */ overflowItems: ICommandBarItemProps[]; /** * Items being rendered on the far side */ farItems: ICommandBarItemProps[] | undefined; /** * Length of original overflowItems to ensure that they are not moved into primary region on resize */ minimumOverflowItems: number; /** * Unique string used to cache the width of the command bar */ cacheKey: string; } /** * ICommandBarItemProps extends IContextualMenuItem and adds a few CommandBar-specific props. * {@docCategory CommandBar} */ export declare interface ICommandBarItemProps extends IContextualMenuItem { /** * Show only an icon for this item, not text. * Does not apply if item is in the overflow. * @defaultvalue false */ iconOnly?: boolean; /** * Props for the tooltip when in `iconOnly` mode. */ tooltipHostProps?: ITooltipHostProps; /** * Custom styles for individual button */ buttonStyles?: IButtonStyles; /** * A custom cache key to be used for this item. If `cacheKey` is changed, the cache will invalidate. * Defaults to `key` value. */ cacheKey?: string; /** * Context under which the item is being rendered. * This value is mutated by the CommandBar and is useful for adjusting the `onRender` function. */ renderedInOverflow?: boolean; /** * Method to override the render of the individual command bar button. * Not used when item is rendered in overflow. * @defaultvalue CommandBarButton */ commandBarButtonAs?: IComponentAs; } /** * {@docCategory CommandBar} */ export declare interface ICommandBarProps extends React_2.HTMLAttributes { /** * Optional callback to access the ICommandBar interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * Items to render. ICommandBarItemProps extends IContextualMenuItem. */ items: ICommandBarItemProps[]; /** * Items to render on the right side (or left, in RTL). ICommandBarItemProps extends IContextualMenuItem. */ farItems?: ICommandBarItemProps[]; /** * Default items to have in the overflow menu. ICommandBarItemProps extends IContextualMenuItem. */ overflowItems?: ICommandBarItemProps[]; /** * Props to be passed to overflow button. * If `menuProps` are passed through this prop, any items provided will be prepended to any * computed overflow items. */ overflowButtonProps?: IButtonProps; /** * Custom component for the ResizeGroup. */ resizeGroupAs?: IComponentAs; /** * Custom component for the overflow button. */ overflowButtonAs?: IComponentAs; /** * Custom component for the near and far item buttons. Not used for overflow menu items. */ buttonAs?: IComponentAs; /** * When true, items will be 'shifted' off the front of the array when reduced, and unshifted during grow. */ shiftOnReduce?: boolean; /** * Custom function to reduce data if items do not fit in a given space. * Return `undefined` if no more steps can be taken to avoid an infinite loop. */ onReduceData?: (data: ICommandBarData) => ICommandBarData | undefined; /** * Custom function to grow data if items are too small for the given space. * Return `undefined` if no more steps can be taken to avoid an infinite loop. */ onGrowData?: (data: ICommandBarData) => ICommandBarData | undefined; /** * Callback invoked when data has been reduced. */ onDataReduced?: (movedItem: ICommandBarItemProps) => void; /** * Callback invoked when data has been grown. */ onDataGrown?: (movedItem: ICommandBarItemProps) => void; /** * Function to be called every time data is rendered. It provides the data that was actually rendered. * A use case would be adding telemetry when a particular control is shown in an overflow or dropped * as a result of `onReduceData`, or to count the number of renders that an implementation of * `onReduceData` triggers. */ dataDidRender?: (renderedData: any) => void; /** * Additional css class to apply to the command bar */ className?: string; /** * Accessibility text to be read by the screen reader when the user's * focus enters the command bar. The screen reader will read this text * after reading information about the first focusable item in the command bar. */ ariaLabel?: string; /** * When using farItems, primaryGroupAriaLabel and farItemsGroupAriaLabel function as * labels for each group that are exposed to screen reader users. * This helps clarify when a screen reader user is entering or leaving each group. */ primaryGroupAriaLabel?: string; /** * When using farItems, primaryGroupAriaLabel and farItemsGroupAriaLabel function as * labels for each group that are exposed to screen reader users. * This helps clarify when a screen reader user is entering or leaving each group. */ farItemsGroupAriaLabel?: string; /** * Customized styling that will layer on top of the variant rules. */ styles?: IStyleFunctionOrObject; /** * Theme provided by HOC. */ theme?: ITheme; } /** * {@docCategory CommandBar} */ export declare interface ICommandBarStyleProps { theme: ITheme; className?: string; } /** * {@docCategory CommandBar} */ export declare interface ICommandBarStyles { root?: IStyle; primarySet?: IStyle; secondarySet?: IStyle; } export { IComponentAs } export { IComponentAsProps } /** * Legacy Icon component which can be targeted by customization. It's recommended to use `FontIcon` * or `ImageIcon` instead, especially in scenarios where rendering performance is important. * {@docCategory Icon} */ export declare const Icon: React_2.FunctionComponent; export declare class IconBase extends React_2.Component { constructor(props: IIconProps); render(): JSX.Element; private _onImageLoadingStateChange; } /** * {@docCategory Button} */ export declare class IconButton extends React_2.Component { render(): JSX.Element; } export { IconFontSizes } export { IconNames } /** * {@docCategory ContextualMenu} */ export declare interface IContextualMenu { } /** * @deprecated Deprecated in favor of mergeStyles API. */ export declare interface IContextualMenuClassNames { container?: string; root?: string; list?: string; header?: string; title?: string; subComponentStyles?: IContextualMenuSubComponentStyles; } /** * {@docCategory ContextualMenu} */ export declare interface IContextualMenuItem { /** * Optional callback to access the IContextualMenuRenderItem interface. * This will get passed down to ContextualMenuItem. */ componentRef?: IRefObject; /** * Unique id to identify the item */ key: string; /** * Text of the menu item. * If a standard hyphen (-) is passed in, then the item will be rendered as a divider. * If a dash must appear as text, use an emdash (—), figuredash (‒), or minus symbol (−) instead. */ text?: string; /** * Secondary description for the menu item to display */ secondaryText?: string; itemType?: ContextualMenuItemType; /** * Props for an icon to display next to the item. */ iconProps?: IIconProps; /** * Custom render function for the menu item icon. * iconProps must be present on at least one item for onRenderIcon to be called. */ onRenderIcon?: IRenderFunction; /** * Props for the Icon used for the chevron. */ submenuIconProps?: IIconProps; /** * Whether the menu item is disabled * @defaultvalue false */ disabled?: boolean; /** * If the menu item is a split button, this prop disables purely the primary action of the button. * @defaultvalue false */ primaryDisabled?: boolean; /** * @deprecated Not used */ shortCut?: string; /** * Whether or not this menu item can be checked * @defaultvalue false */ canCheck?: boolean; /** * Whether or not this menu item is currently checked. * @defaultvalue false */ checked?: boolean; /** * Whether or not this menu item is a splitButton. * @defaultvalue false */ split?: boolean; /** * Any custom data the developer wishes to associate with the menu item. */ data?: any; /** * Callback for when the menu item is invoked. If `ev.preventDefault()` is called in `onClick`, * the click will not close the menu. * * Only for ContextualMenu items, returning true will dismiss the menu even if `ev.preventDefault()` * was called (does not apply for button or CommandBar sub-menu items). */ onClick?: (ev?: React_2.MouseEvent | React_2.KeyboardEvent, item?: IContextualMenuItem) => boolean | void; /** * Navigate to this URL when the menu item is clicked. */ href?: string; /** * Target window when using `href`. */ target?: string; /** * Link relation setting when using `href`. * If `target` is `_blank`, `rel` is defaulted to a value to prevent clickjacking. */ rel?: string; /** * Properties to apply to a submenu to this item. * * The ContextualMenu will provide default values for `target`, `onDismiss`, `isSubMenu`, * `id`, `shouldFocusOnMount`, `directionalHint`, `className`, and `gapSpace`, all of which * can be overridden. */ subMenuProps?: IContextualMenuProps; /** * Method to provide the classnames to style the individual items inside a menu. * @deprecated Use `styles` prop of `IContextualMenuItemProps` to leverage mergeStyles API. */ getItemClassNames?: (theme: ITheme, disabled: boolean, expanded: boolean, checked: boolean, isAnchorLink: boolean, knownIcon: boolean, itemClassName?: string, dividerClassName?: string, iconClassName?: string, subMenuClassName?: string, primaryDisabled?: boolean) => IMenuItemClassNames; /** * Optional IContextualMenuItemProps overrides to customize behaviors such as item styling via `styles`. */ itemProps?: Partial; /** * Method to provide the classnames to style the Vertical Divider of a split button inside a menu. * Default value is the `getSplitButtonVerticalDividerClassNames` func defined in `ContextualMenu.classnames.ts`. * @defaultvalue getSplitButtonVerticalDividerClassNames */ getSplitButtonVerticalDividerClassNames?: (theme: ITheme) => IVerticalDividerClassNames; /** * Properties to apply to render this item as a section. * This prop is mutually exclusive with `subMenuProps`. */ sectionProps?: IContextualMenuSection; /** * Additional CSS class to apply to the menu item. */ className?: string; /** * Additional styles to apply to the menu item * @deprecated Use `styles` instead to leverage mergeStyles API. */ style?: React_2.CSSProperties; /** * Custom accessible label for the element. * If no override is specified, the `aria-label` attribute will contain the item name. */ ariaLabel?: string; /** * Title (tooltip) text displayed when hovering over an item. */ title?: string; /** * Method to custom render this menu item. * For keyboard accessibility, the top-level rendered item should be a focusable element * (like an anchor or a button) or have the `data-is-focusable` property set to true. * * @param item - Item to render. Will typically be of type `IContextualMenuItem`. * (When rendering a command bar item, will be `ICommandBarItemProps`.) * @param dismissMenu - Function to dismiss the menu. Can be used to ensure that a custom menu * item click dismisses the menu. (Will be undefined if rendering a command bar item.) */ onRender?: (item: any, dismissMenu: (ev?: any, dismissAll?: boolean) => void) => React_2.ReactNode; /** * An override for the child content of the contextual menu item. */ contextualMenuItemAs?: IComponentAs; /** * An override for the entire component used to render the contextal menu item. */ contextualMenuItemWrapperAs?: IComponentAs; /** * Method to customize sub-components rendering of this menu item. * * @param props - Props used to pass into render functions * @param defaultRenders - Default render functions that renders default sub-components */ onRenderContent?: (props: IContextualMenuItemProps, defaultRenders: IContextualMenuItemRenderFunctions) => React_2.ReactNode; /** * A function to be executed on mouse down. This is executed before an `onClick` event and can * be used to interrupt native on click events as well. The click event should still handle * the commands. This should only be used in special cases when react and non-react are mixed. */ onMouseDown?: (item: IContextualMenuItem, event: React_2.MouseEvent) => void; /** * Optional override for the menu button's role. * @default `menuitem` or `menuitemcheckbox` */ role?: string; /** * When rendering a custom menu component that is passed in, the component might also be a list of * elements. We want to keep track of the correct index our menu is using based off of * the length of the custom list. It is up to the user to increment the count for their list. */ customOnRenderListLength?: number; /** * Keytip for this contextual menu item */ keytipProps?: IKeytipProps; /** * @deprecated Use subMenuProps.items instead. */ items?: IContextualMenuItem[]; /** * Any additional properties to use when custom rendering menu items. */ [propertyName: string]: any; /** * Detailed description of the menu item for the benefit of screen readers. */ ariaDescription?: string; /** * ID of the element that contains additional detailed descriptive information for screen readers */ ariaDescribedBy?: string; /** * @deprecated No longer used. All contextual menu items are now focusable when disabled. */ inactive?: boolean; /** * Text of the menu item. * @deprecated Use `text` instead. */ name?: string; /** * Flag which indicates that, when the item is clicked, the 'target' for the click event should be * overridden to reflect the launch target from the root menu. * This avoids a situation where the 'target' of the event may wind up detached from the DOM * when the menu is dismissed in response to the click. */ preferMenuTargetAsEventTarget?: boolean; } /** * {@docCategory ContextualMenu} */ export declare interface IContextualMenuItemProps extends React_2.HTMLAttributes { /** * Optional callback to access the IContextualMenuRenderItem interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * Call to provide customized styling that will layer on top of the variant rules. */ styles?: IStyleFunctionOrObject; /** * Theme provided by High-Order Component. */ theme?: ITheme; /** * Additional css class to apply to the ContextualMenuItem * @defaultvalue undefined */ className?: string; /** * The item to display */ item: IContextualMenuItem; /** * Classnames for different aspects of a menu item */ classNames: IMenuItemClassNames; /** * Index of the item */ index: number; /** * If this item has icons */ hasIcons: boolean | undefined; /** * Click handler for the checkmark */ onCheckmarkClick?: (item: IContextualMenuItem, ev: React_2.MouseEvent) => void; /** * This prop will get set by ContextualMenu and can be called to open this item's subMenu, if present. */ openSubMenu?: (item: any, target: HTMLElement) => void; /** * This prop will get set by ContextualMenu and can be called to close this item's subMenu, if present. */ dismissSubMenu?: () => void; /** * This prop will get set by ContextualMenu and can be called to close the menu this item belongs to. * If dismissAll is true, all menus will be closed. */ dismissMenu?: (ev?: any, dismissAll?: boolean) => void; /** * This prop will get set by the wrapping component and will return the element that wraps this ContextualMenuItem. * Used for openSubMenu. */ getSubmenuTarget?: () => HTMLElement | undefined; } export declare interface IContextualMenuItemRenderFunctions { /** * Rendering function for check mark icon */ renderCheckMarkIcon: (props: IContextualMenuItemProps, customClassNames?: string[]) => React_2.ReactNode; /** * Rendering function for item icon */ renderItemIcon: (props: IContextualMenuItemProps, customClassNames?: string[]) => React_2.ReactNode; /** * Rendering function for item label */ renderItemName: (props: IContextualMenuItemProps, customClassNames?: string[]) => React_2.ReactNode; /** * Rendering function for secondary text label */ renderSecondaryText: (props: IContextualMenuItemProps, customClassNames?: string[]) => React_2.ReactNode; /** * Rendering function for submenu icon */ renderSubMenuIcon: (props: IContextualMenuItemProps, customClassNames?: string[]) => React_2.ReactNode; } /** * {@docCategory ContextualMenu} */ export declare interface IContextualMenuItemRenderProps extends IContextualMenuItem { index: number; focusableElementIndex: number; totalItemCount: number; hasCheckmarks: boolean; hasIcons: boolean; } /** * {@docCategory ContextualMenu} */ export declare interface IContextualMenuItemStyleProps { /** * Theme provided by High-Order Component. */ theme: ITheme; /** * Accept custom classNames */ className?: string; /** * Whether or not the menu item is disabled. */ disabled: boolean; /** * Whether or not the menu item is expanded. */ expanded: boolean; /** * Whether or not the menu item is checked. */ checked: boolean; /** * Indicates if a menu item is an anchor link. */ isAnchorLink: boolean; /** * Indicates if the icon used is of the known set of icons. */ knownIcon: boolean; /** * The optional class name to apply to the item element. */ itemClassName?: string; /** * The optional class name to apply to the divider element. */ dividerClassName?: string; /** * The optional class name to apply to the icon element. */ iconClassName?: string; /** * The optional class name to apply to the sub-menu if present. */ subMenuClassName?: string; /** * Whether or not the primary section of a split menu item is disabled. */ primaryDisabled?: boolean; } /** * {@docCategory ContextualMenu} */ export declare interface IContextualMenuItemStyles extends IButtonStyles { /** * Style for the root element. */ root?: IStyle; /** * Styles for a menu item that is an anchor link. */ item?: IStyle; /** * Styles for a divider item of a ContextualMenu. */ divider?: IStyle; /** * Styles for the content inside the button/link of the menuItem. */ linkContent?: IStyle; /** * Styles for a menu item that is an anchor link. */ anchorLink?: IStyle; /** * Styles for the icon element of a menu item. */ icon?: IStyle; /** * Default icon color style for known icons. */ iconColor?: IStyle; /** * Default style for checkmark icons. */ checkmarkIcon?: IStyle; /** * Styles for the submenu icon of a menu item. */ subMenuIcon?: IStyle; /** * Styles for the label of a menu item. */ label?: IStyle; /** * Styles for the secondary text of a menu item. */ secondaryText?: IStyle; /** * Styles for the container of a split menu item. */ splitContainer?: IStyle; /** * Styles for the primary portion of a split menu item. */ splitPrimary?: IStyle; /** * Styles for the menu portion of a split menu item. */ splitMenu?: IStyle; /** * Styles for a menu item that is a link. */ linkContentMenu?: IStyle; /** * Styles for hidden screen reader text. */ screenReaderText?: IStyle; } declare interface IContextualMenuItemWrapperProps extends React_2.ClassAttributes { /** * Optional callback to access the ContextualMenuSplitButton interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * The IContextualMenuItem that is used to render the item in the menu. */ item: IContextualMenuItem; /** * CSS class to apply to the context menu. */ classNames: IMenuItemClassNames; /** * The index number of the wrapper among all items in the contextual menu including things like dividers and headers. */ index: number; /** * The index number of the wrapper among all items in the contextual menu excluding dividers and headers. */ focusableElementIndex: number; /** * The total number of items in the contextual menu. */ totalItemCount: number; /** * Whether or not if the item for the wrapper uses checkmarks. */ hasCheckmarks?: boolean; /** * Whether or not the item for the wrapper uses icons. */ hasIcons?: boolean; /** * Method to override the render of the individual menu items. * @defaultvalue ContextualMenuItem */ contextualMenuItemAs?: IComponentAs; /** * Callback for when the user's mouse enters the wrapper. */ onItemMouseEnter?: (item: IContextualMenuItem, ev: React_2.MouseEvent, target: HTMLElement) => boolean | void; /** * Callback for when the user's mouse leaves the wrapper. */ onItemMouseLeave?: (item: IContextualMenuItem, ev: React_2.MouseEvent) => void; /** * Callback for when the user's mouse moves in the wrapper. */ onItemMouseMove?: (item: IContextualMenuItem, ev: React_2.MouseEvent, target: HTMLElement) => void; /** * Callback for the mousedown event on the icon button in the wrapper. */ onItemMouseDown?: (item: IContextualMenuItem, ev: React_2.MouseEvent) => void; /** * Callback for when the click event on the primary button. */ executeItemClick?: (item: IContextualMenuItem, ev: React_2.MouseEvent | React_2.KeyboardEvent) => void; /** * Callback for when the click event on the icon button from the wrapper. */ onItemClick?: (item: IContextualMenuItem, ev: React_2.MouseEvent | React_2.KeyboardEvent) => void; /** * Callback for when the click event on the icon button which also takes in a specific HTMLElement * that will be focused. */ onItemClickBase?: (item: IContextualMenuItem, ev: React_2.MouseEvent | React_2.KeyboardEvent, target: HTMLElement) => void; /** * Callback for keyboard events on the wrapper. */ onItemKeyDown?: (item: IContextualMenuItem, ev: React_2.KeyboardEvent) => void; /** * Callback to get the subMenu ID for an IContextualMenuItem. * @deprecated ID relationship between a menu button and menu isn't necessary */ getSubMenuId?: (item: IContextualMenuItem) => string | undefined; /** * Key of the currently expanded subMenu. */ expandedMenuItemKey?: string; /** * Callback for touch/pointer events on the split button. */ onTap?: (ev: React_2.TouchEvent | PointerEvent) => void; /** * This prop will get set by ContextualMenu and can be called to open this item's subMenu, if present. */ openSubMenu?: (item: any, target: HTMLElement) => void; /** * This prop will get set by ContextualMenu and can be called to close this item's subMenu, if present. */ dismissSubMenu?: () => void; /** * This prop will get set by ContextualMenu and can be called to close the menu this item belongs to. * If dismissAll is true, all menus will be closed. */ dismissMenu?: (ev?: any, dismissAll?: boolean) => void; } /** * {@docCategory ContextualMenu} */ export declare interface IContextualMenuListProps { items: IContextualMenuItem[]; totalItemCount: number; hasCheckmarks: boolean; hasIcons: boolean; defaultMenuItemRenderer: (item: IContextualMenuItemRenderProps) => React_2.ReactNode; ariaLabel?: string; labelElementId?: string; role?: string; } /** * {@docCategory ContextualMenu} */ export declare interface IContextualMenuProps extends IBaseProps, React_2.RefAttributes, IWithResponsiveModeState { /** * Optional callback to access the IContextualMenu interface. Use this instead of ref for accessing * the public methods and properties of the component. * @deprecated ContextualMenu has no imperative methods, so componentRef no longer returns a ref */ componentRef?: IRefObject; /** * Call to provide customized styling that will layer on top of the variant rules. */ styles?: IStyleFunctionOrObject; /** * Theme provided by higher-order component. */ theme?: ITheme; /** * Additional CSS class to apply to the ContextualMenu. */ className?: string; /** * The target that the ContextualMenu should try to position itself based on. * It can be either an element, a query selector string resolving to a valid element, * or a MouseEvent. If a MouseEvent is given, the origin point of the event will be used. */ target?: Target; /** * How the menu should be positioned * @defaultvalue DirectionalHint.bottomAutoEdge */ directionalHint?: DirectionalHint; /** * How the menu should be positioned in RTL layouts. * If not specified, a mirror of `directionalHint` will be used. */ directionalHintForRTL?: DirectionalHint; /** * The gap between the ContextualMenu and the target * @defaultvalue 0 */ gapSpace?: number; /** * The width of the beak. * @defaultvalue 16 */ beakWidth?: number; /** * If true the context menu will render as the same width as the target element * @defaultvalue false */ useTargetWidth?: boolean; /** * If true the context menu will have a minimum width equal to the width of the target element * @defaultvalue false */ useTargetAsMinWidth?: boolean; /** * The bounding rectangle (or callback that returns a rectangle) which the contextual menu can appear in. */ bounds?: IRectangle | ((target?: Target, targetWindow?: Window) => IRectangle | undefined); /** * If true then the beak is visible. If false it will not be shown. */ isBeakVisible?: boolean; /** * If true, the menu will be positioned to cover the target. * If false, it will be positioned next to the target. * @defaultvalue false */ coverTarget?: boolean; /** * If true the positioning logic will prefer to flip edges rather than to nudge the rectangle to fit within bounds, * thus making sure the element aligns perfectly with target's alignment edge */ alignTargetEdge?: boolean; /** * Menu items to display. */ items: IContextualMenuItem[]; /** * Used as `aria-labelledby` for the menu element inside the callout. */ labelElementId?: string; /** * Whether to focus on the menu when mounted. * @defaultvalue true */ shouldFocusOnMount?: boolean; /** * Whether to focus on the contextual menu container (as opposed to the first menu item). * * Avoid using as it breaks the default focus behaviour when using assistive technologies. */ shouldFocusOnContainer?: boolean; /** * Callback when the ContextualMenu tries to close. If `dismissAll` is true then all * submenus will be dismissed. */ onDismiss?: (ev?: Event | React_2.MouseEvent | React_2.KeyboardEvent, dismissAll?: boolean) => void; /** * Click handler which is invoked if `onClick` is not passed for individual contextual * menu item. * Returning true will dismiss the menu even if `ev.preventDefault()` was called. */ onItemClick?: (ev?: React_2.MouseEvent | React_2.KeyboardEvent, item?: IContextualMenuItem) => boolean | void; /** * Whether this menu is a submenu of another menu. */ isSubMenu?: boolean; /** * ID for the ContextualMenu's root element (inside the callout). * Should be used for `aria-owns` and other such uses, rather than direct reference for programmatic purposes. */ id?: string; /** * Accessible label for the ContextualMenu's root element (inside the callout). */ ariaLabel?: string; /** * If true do not render on a new layer. If false render on a new layer. * @defaultvalue false */ doNotLayer?: boolean; /** * If true the position will not change sides in an attempt to fit the ContextualMenu within bounds. * It will still attempt to align it to whatever bounds are given. * @defaultvalue false */ directionalHintFixed?: boolean; /** * Callback for when the menu has been opened. */ onMenuOpened?: (contextualMenu?: IContextualMenuProps) => void; /** * Callback for when the menu is being closed (removing from the DOM). */ onMenuDismissed?: (contextualMenu?: IContextualMenuProps) => void; /** * Additional custom props for the Callout. */ calloutProps?: ICalloutProps; /** * Title to be displayed at the top of the menu, above the items. */ title?: string; /** * Method to provide the classnames to style the contextual menu. * @deprecated Use `styles` instead to leverage mergeStyles API. */ getMenuClassNames?: (theme: ITheme, className?: string) => IContextualMenuClassNames; /** Custom render function for a submenu. */ onRenderSubMenu?: IRenderFunction; /** * Method to override the render of the list of menu items. */ onRenderMenuList?: IRenderFunction; /** * Method to wrap menu items. Gives the ability to wrap a custom * tooltip to each menu item button. */ onRenderContextualMenuItem?: IRenderFunction; /** * Delay (in milliseconds) to wait before expanding / dismissing a submenu on mouseEnter or mouseLeave */ subMenuHoverDelay?: number; /** * Custom component to use for rendering individual menu items. * @defaultvalue ContextualMenuItem */ contextualMenuItemAs?: IComponentAs; /** * Props to pass down to the FocusZone. * NOTE: the default FocusZoneDirection will be used unless a direction * is specified in the focusZoneProps (even if other focusZoneProps are defined) * @defaultvalue \{ direction: FocusZoneDirection.vertical \} */ focusZoneProps?: IFocusZoneProps; /** * Custom component to use for rendering the focus zone (the root). * @defaultValue FocusZone */ focusZoneAs?: IComponentAs; /** * If true, renders the ContextualMenu in a hidden state. * Use this flag, rather than rendering a ContextualMenu conditionally based on visibility, * to improve rendering performance when it becomes visible. * Note: When ContextualMenu is hidden its content will not be rendered. It will only render * once the ContextualMenu is visible. */ hidden?: boolean; /** * If true, the menu will be updated even when `hidden=true`. Note that this will consume * resources to update even when nothing is being shown to the user. This might be helpful if * your updates are small and you want the menu to display quickly when `hidden` is set to false. */ shouldUpdateWhenHidden?: boolean; /** * If true, the contextual menu will not be updated until focus enters the menu via other means. * This will only result in different behavior when `shouldFocusOnMount = false`. */ delayUpdateFocusOnHover?: boolean; /** * Called when the component is unmounting, and focus needs to be restored. If this is provided, * focus will not be restored automatically, and you'll need to call `params.originalElement.focus()`. */ onRestoreFocus?: (params: IPopupRestoreFocusParams) => void; } /** * {@docCategory ContextualMenu} */ export declare interface IContextualMenuRenderItem { /** * Function to open this item's subMenu, if present. */ openSubMenu: () => void; /** * Function to close this item's subMenu, if present. */ dismissSubMenu: () => void; /** * Dismiss the menu this item belongs to. */ dismissMenu: (dismissAll?: boolean) => void; } /** * {@docCategory ContextualMenu} */ export declare interface IContextualMenuSection extends React_2.ClassAttributes { /** * The items to include inside the section. */ items: IContextualMenuItem[]; /** * The optional section title. */ title?: string | IContextualMenuItem; /** * If set to true, the section will display a divider at the top of the section. */ topDivider?: boolean; /** * If set to true, the section will display a divider at the bottom of the section. */ bottomDivider?: boolean; } /** * {@docCategory ContextualMenu} */ export declare interface IContextualMenuStyleProps { theme: ITheme; className?: string; } /** * {@docCategory ContextualMenu} */ export declare interface IContextualMenuStyles { /** * Style override for the contextual menu title. */ title: IStyle; /** * Style for the container which parents all menu items. */ container: IStyle; /** * Base styles for the root element of all ContextualMenus. */ root: IStyle; /** * Styles for the header item of a ContextualMenu */ header: IStyle; /** * Styles for the list that contains all menuItems. */ list: IStyle; /** * SubComponent styles. */ subComponentStyles: IContextualMenuSubComponentStyles; } /** * {@docCategory ContextualMenu} */ export declare interface IContextualMenuSubComponentStyles { /** Styles for the callout that hosts the ContextualMenu options. */ callout: IStyleFunctionOrObject; /** Styles for each menu item. */ menuItem: IStyleFunctionOrObject; } /** * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps` * {@docCategory Icon} */ export declare enum IconType { /** * Render using the fabric icon font. * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps` */ default = 0, /** * Render using an image, where imageProps would be used. * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps` */ image = 1, /** * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps` */ Default = 100000, /** * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps` */ Image = 100001 } export { ICSPSettings } export { ICssInput } declare interface ICursorLocation { start: number; end: number; dir: 'forward' | 'backward' | 'none' | undefined; } export { ICustomizableProps } export { ICustomizations } export { ICustomizerContext } export { ICustomizerProps } export { IDateFormatting } /** * {@docCategory DatePicker} */ export declare interface IDatePicker { /** Sets focus to the text field */ focus(): void; /** Reset the state of the picker to the default */ reset(): void; /** Open the datepicker callout */ showDatePickerPopup(): void; } /** * {@docCategory DatePicker} */ export declare interface IDatePickerProps extends IBaseProps, React_2.HTMLAttributes, React_2.RefAttributes { /** * Optional callback to access the IDatePicker interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * Call to provide customized styling that will layer on top of the variant rules. */ styles?: IStyleFunctionOrObject; /** * Theme provided by High-Order Component. */ theme?: ITheme; /** * Pass callout props to callout component */ calloutProps?: ICalloutProps; /** * Pass calendar props to calendar component */ calendarProps?: ICalendarProps; /** * Pass textField props to textField component. * Prop name is "textField" for compatibility with upcoming slots work. */ textField?: ITextFieldProps; /** * Custom Calendar to be used for date picking */ calendarAs?: IComponentAs; /** * Callback issued when a date is selected */ onSelectDate?: (date: Date | null | undefined) => void; /** * Label for the DatePicker */ label?: string; /** * Whether the DatePicker is a required field or not * @defaultvalue false */ isRequired?: boolean; /** * Disabled state of the DatePicker. * @defaultvalue false */ disabled?: boolean; /** * Aria Label for TextField of the DatePicker for screen reader users. */ ariaLabel?: string; /** * Whether or not the Textfield of the DatePicker is underlined. * @defaultvalue false */ underlined?: boolean; /** * Aria label for date picker popup for screen reader users. * @defaultvalue Calendar */ pickerAriaLabel?: string; /** * Whether the month picker is shown beside the day picker or hidden. * @defaultvalue true */ isMonthPickerVisible?: boolean; /** * Show month picker on top of date picker when visible. * @defaultvalue false */ showMonthPickerAsOverlay?: boolean; /** * Whether the DatePicker allows input a date string directly or not * @defaultvalue false */ allowTextInput?: boolean; /** * Whether the DatePicker should open automatically when the control is focused * WARNING: setting this to false creates an accessibility violation and is not recommended * @defaultvalue true */ disableAutoFocus?: boolean; /** * Whether the DatePicker should open when the input is clicked * @defaultvalue true */ openOnClick?: boolean; /** * Placeholder text for the DatePicker */ placeholder?: string; /** * Value of today. If unspecified, current time in client machine will be used. */ today?: Date; /** * Default value of the DatePicker, if any */ value?: Date; /** * Optional method to format the chosen date to a string to display in the DatePicker * @defaultvalue date.toString() */ formatDate?: (date?: Date) => string; /** * Optional method to parse the text input value to date, it is only useful when allowTextInput is set to true * @defaultvalue new Date(Date.parse(dateStr)) */ parseDateFromString?: (dateStr: string) => Date | null; /** * The first day of the week for your locale. * @defaultvalue DayOfWeek.Sunday */ firstDayOfWeek?: DayOfWeek; /** * Localized strings to use in the DatePicker */ strings?: IDatePickerStrings; /** * Whether the month picker should highlight the current month * @defaultvalue false */ highlightCurrentMonth?: boolean; /** * Whether the month picker should highlight the selected month * @defaultvalue false */ highlightSelectedMonth?: boolean; /** * Whether the calendar should show the week number (weeks 1 to 53) before each week row * @defaultvalue false */ showWeekNumbers?: boolean; /** * Defines when the first week of the year should start, FirstWeekOfYear.FirstDay, * FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values * @defaultvalue FirstWeekOfYear.FirstFullWeek */ firstWeekOfYear?: FirstWeekOfYear; /** * Whether the "Go to today" link should be shown or not */ showGoToToday?: boolean; /** * Determines if the DatePicker has a border. * @defaultvalue false */ borderless?: boolean; /** * Optional CSS class for the DatePicker root element. */ className?: string; /** * Apply additional formatting to dates, for example localized date formatting. */ dateTimeFormatter?: IDateFormatting; /** * The minimum allowable date. */ minDate?: Date; /** * The maximum allowable date. */ maxDate?: Date; /** * The initially highlighted date. */ initialPickerDate?: Date; /** * Allows all elements to be focused, including disabled ones * @defaultvalue false */ allFocusable?: boolean; /** * Callback that runs after DatePicker's menu (Calendar) is closed */ onAfterMenuDismiss?: () => void; /** * Whether the CalendarDay close button should be shown or not. */ showCloseButton?: boolean; /** * The tabIndex of the TextField */ tabIndex?: number; } /** * {@docCategory DatePicker} */ export declare interface IDatePickerStrings extends ICalendarStrings { /** * Error message to render for TextField if isRequired validation fails. */ isRequiredErrorMessage?: string; /** * Error message to render for TextField if input date string parsing fails. */ invalidInputErrorMessage?: string; /** * Error message to render for TextField if date boundary (minDate, maxDate) validation fails. */ isOutOfBoundsErrorMessage?: string; /** * Status message to render for TextField the input date parsing fails, * and the typed value is cleared and reset to the previous value. * e.g. "Invalid entry `{0}`, date reset to `{1}`" */ isResetStatusMessage?: string; } /** * {@docCategory DatePicker} */ export declare interface IDatePickerStyleProps { /** * Theme provided by High-Order Component. */ theme: ITheme; /** * Accept custom classNames */ className?: string; disabled?: boolean; underlined?: boolean; label?: boolean; isDatePickerShown?: boolean; } /** * {@docCategory DatePicker} */ export declare interface IDatePickerStyles { /** * Style for the root element. */ root: IStyle; textField: IStyle; callout: IStyle; icon: IStyle; statusMessage?: IStyle; wrapper?: IStyle; readOnlyTextField?: IStyle; readOnlyPlaceholder?: IStyle; } export { IDeclaredEventsByName } export { IDelayedRenderProps } export { IDelayedRenderState } export declare interface IDetailsCheckboxProps { checked: boolean; theme?: ITheme; } /** * {@docCategory DetailsList} */ export declare interface IDetailsColumnFieldProps { /** * Item data to render. */ item: any; /** * Index of the item in its list. */ itemIndex: number; /** * Whether or not the row is selected. */ isSelected?: boolean; /** * Column schema information. */ column: IColumn; /** * Key representing the cell value, for change-detection. */ cellValueKey?: string; /** * Class name to apply to the cell root element. */ className?: string; /** * Original content render function for the cell */ onRender: (item?: any, index?: any, column?: IColumn) => React_2.ReactNode; } /** * {@docCategory DetailsList} */ export declare interface IDetailsColumnFilterIconProps extends IIconProps { columnProps?: IDetailsColumnProps; } /** * {@docCategory DetailsList} */ export declare interface IDetailsColumnProps extends React_2.ClassAttributes { /** * The theme object to respect during render. */ theme?: ITheme; /** * The component styles to respect during render. */ styles?: IStyleFunctionOrObject; /** * A reference to the component instance. */ componentRef?: () => void; /** * The column definition for the component instance. */ column: IColumn; /** * The column index for the component instance. */ columnIndex: number; /** * Parent ID used for accessibility label(s). */ parentId?: string; /** * Render function for providing a column header tooltip. */ onRenderColumnHeaderTooltip?: IRenderFunction; /** * Callback fired when click event occurs. */ onColumnClick?: (ev: React_2.MouseEvent, column: IColumn) => void; /** * Callback fired on contextual menu event to provide contextual menu UI. */ onColumnContextMenu?: (column: IColumn, ev: React_2.MouseEvent) => void; /** * Callback fired when keydown event occurs. */ onColumnKeyDown?: (ev: React_2.KeyboardEvent, column: IColumn) => void; /** * The drag and drop helper for the component instance. */ dragDropHelper?: IDragDropHelper | null; /** * Whether or not the column can be re-ordered via drag and drop. */ isDraggable?: boolean; /** * @deprecated use `updateDragInfo` */ setDraggedItemIndex?: (itemIndex: number) => void; /** * Callback on drag and drop event. */ updateDragInfo?: (props: { itemIndex: number; }, event?: MouseEvent) => void; /** * Whether or not the column has been dropped via drag and drop. */ isDropped?: boolean; /** * Custom styles for cell rendering. */ cellStyleProps?: ICellStyleProps; /** * Whether to use fast icon and check components. The icons can't be targeted by customization * but are still customizable via class names. * @defaultvalue true */ useFastIcons?: boolean; } /** * {@docgategory DetailsList} */ export declare interface IDetailsColumnRenderTooltipProps extends ITooltipHostProps { /** * Information about the column for which the tooltip is being rendered. * Use this to format status information about the column, such as its filter or sort state. */ column?: IColumn; } /** * {@docCategory DetailsList} */ export declare type IDetailsColumnStyleProps = Required> & { /** * Classname to provide for header region. */ headerClassName?: string; /** * Whether or not the column is actionable. */ isActionable?: boolean; /** * Whether or not the column contains contents. */ isEmpty?: boolean; /** * Whether or not the column has a visible icon. */ isIconVisible?: boolean; /** * Whether or not the column is padded. */ isPadded?: boolean; /** * Whether or not the column has icon only content/ */ isIconOnly?: boolean; /** * Classname to provide for the header's icon region. */ iconClassName?: string; /** * CSS transition duration on drag event. */ transitionDurationDrag?: number; /** * CSS transition duration on drop event. */ transitionDurationDrop?: number; }; /** * {@docCategory DetailsList} */ export declare interface IDetailsColumnStyles { /** * Styleable root region. */ root: IStyle; /** * Styleable resize glyph region. */ gripperBarVerticalStyle: IStyle; /** * Styleable cell tooltip region. */ cellTooltip: IStyle; /** * Styleable cell title region. */ cellTitle: IStyle; /** * Styleable cell name region. */ cellName: IStyle; /** * Styleable icon region. */ iconClassName: IStyle; /** * Styleable margin by icon region. */ nearIcon: IStyle; /** * Styleable label region. */ accessibleLabel: IStyle; /** * Styleable column sort icon region. */ sortIcon: IStyle; /** * Styleable filter glyph. */ filterChevron: IStyle; /** * Styleable border region after drag & drop. */ borderAfterDropping: IStyle; /** * Transparent no border region after drag & drop to avoid content shift. */ noBorderAfterDropping: IStyle; /** * Styleable border while drag & drop occurs. */ borderWhileDragging: IStyle; /** * Transparent no border region while drag & drop occurs to avoid content shift. */ noBorderWhileDragging: IStyle; } /** * {@docCategory DetailsList} */ export declare interface IDetailsFooterBaseProps extends IDetailsItemProps { } /** * {@docCategory DetailsList} */ export declare interface IDetailsFooterProps extends IDetailsFooterBaseProps { /** * Column metadata */ columns: IColumn[]; /** * Selection from utilities */ selection: ISelection; /** * Selection mode */ selectionMode: SelectionMode_2; } /** * {@docCategory DetailsList} */ export declare interface IDetailsGroupDividerProps extends IGroupDividerProps, IDetailsItemProps { } /** * {@docCategory DetailsList} */ export declare interface IDetailsGroupRenderProps extends IGroupRenderProps { onRenderFooter?: IRenderFunction; onRenderHeader?: IRenderFunction; groupedListAs?: IComponentAs; } /** * {@docCategory DetailsList} */ export declare interface IDetailsHeader { /** sets focus into the header */ focus: () => boolean; } /** * {@docCategory DetailsList} */ export declare interface IDetailsHeaderBaseProps extends React_2.ClassAttributes, IDetailsItemProps { /** Theme from the Higher Order Component */ theme?: ITheme; /** Call to provide customized styling that will layer on top of the variant rules. */ styles?: IStyleFunctionOrObject; /** Ref to the component itself */ componentRef?: IRefObject; /** Layout mode - fixedColumns or justified */ layoutMode: DetailsListLayoutMode; /** Callback for when column sizing has changed */ onColumnIsSizingChanged?: (column: IColumn, isSizing: boolean) => void; /** Callback for when column is resized */ onColumnResized?: (column: IColumn, newWidth: number, columnIndex: number) => void; /** Callback for when column is automatically resized */ onColumnAutoResized?: (column: IColumn, columnIndex: number) => void; /** Callback for when the column is clicked */ onColumnClick?: (ev: React_2.MouseEvent, column: IColumn) => void; /** Callback for when the column needs to show a context menu */ onColumnContextMenu?: (column: IColumn, ev: React_2.MouseEvent) => void; /** Callback to render a tooltip for the column header */ onRenderColumnHeaderTooltip?: IRenderFunction; /** Whether to collapse for all visibility */ collapseAllVisibility?: CollapseAllVisibility; /** Whether or not all is collapsed */ isAllCollapsed?: boolean; /** Callback for when collapse all is toggled */ onToggleCollapseAll?: (isAllCollapsed: boolean) => void; /** ariaLabel for the entire header */ ariaLabel?: string; /** ariaLabel for expand/collapse group button */ ariaLabelForToggleAllGroupsButton?: string; /** ariaLabel for the header checkbox that selects or deselects everything */ ariaLabelForSelectAllCheckbox?: string; /** ariaLabel for the selection column */ ariaLabelForSelectionColumn?: string; /** Select all button visibility */ selectAllVisibility?: SelectAllVisibility; /** Column reordering options */ columnReorderOptions?: IColumnReorderOptions; /** Column reordering options */ columnReorderProps?: IColumnReorderHeaderProps; /** Minimum pixels to be moved before dragging is registered */ minimumPixelsForDrag?: number; /** Overriding class name */ className?: string; /** If provided, can be used to render a custom checkbox */ onRenderDetailsCheckbox?: IRenderFunction; /** * Whether to use fast icon and check components. The icons can't be targeted by customization * but are still customizable via class names. * @defaultvalue true */ useFastIcons?: boolean; } /** * {@docCategory DetailsList} */ export declare interface IDetailsHeaderProps extends IDetailsHeaderBaseProps { /** * Column metadata */ columns: IColumn[]; /** * Selection from utilities */ selection: ISelection; /** * Selection mode */ selectionMode: SelectionMode_2; } /** * {@docCategory DetailsList} */ export declare interface IDetailsHeaderState { columnResizeDetails?: IColumnResizeDetails; isAllSelected?: boolean; isSizing?: boolean; isAllCollapsed?: boolean; } /** * {@docCategory DetailsList} */ export declare type IDetailsHeaderStyleProps = Required> & Pick & { /** Whether to hide select all checkbox */ isSelectAllHidden?: boolean; /** Whether the "select all" checkbox is checked */ isAllSelected?: boolean; /** Is column being resized */ isResizingColumn?: boolean; /** Are all columns collapsed */ isAllCollapsed?: boolean; /** Whether the header is sizing */ isSizing?: boolean; /** Whether checkbox is hidden */ isCheckboxHidden?: boolean; cellStyleProps?: ICellStyleProps; }; /** * {@docCategory DetailsList} */ export declare interface IDetailsHeaderStyles { root: IStyle; check: IStyle; /** * @deprecated Not used */ cellWrapperPadded: IStyle; cellIsCheck: IStyle; /** * @deprecated Not used */ cellIsActionable: IStyle; /** * @deprecated Not used */ cellIsEmpty: IStyle; cellSizer: IStyle; cellSizerStart: IStyle; cellSizerEnd: IStyle; cellIsResizing: IStyle; cellIsGroupExpander: IStyle; collapseButton: IStyle; checkTooltip: IStyle; sizingOverlay: IStyle; dropHintCircleStyle: IStyle; dropHintCaretStyle: IStyle; dropHintLineStyle: IStyle; dropHintStyle: IStyle; accessibleLabel: IStyle; } /** * {@docCategory DetailsList} */ export declare interface IDetailsItemProps { /** * Column metadata */ columns?: IColumn[]; /** * Nesting depth of a grouping */ groupNestingDepth?: number; /** * How much to indent */ indentWidth?: number | undefined; /** * Selection from utilities */ selection?: ISelection | undefined; /** * Selection mode */ selectionMode?: SelectionMode_2 | undefined; /** * Viewport of the virtualized list * * @deprecated Use `rowWidth` instead */ viewport?: IViewport | undefined; /** * Checkbox visibility */ checkboxVisibility?: CheckboxVisibility | undefined; /** * Rules for rendering column cells. */ cellStyleProps?: ICellStyleProps; /** * Minimum width of the row. * * @defaultvalue 0 */ rowWidth?: number; } /** * {@docCategory DetailsList} */ export declare interface IDetailsList extends IList { /** * Ensures that the list content is updated. Call this in cases where the list prop updates don't change, but the list * still needs to be re-evaluated. For example, if a sizer bar is adjusted and causes the list width to change, * you can call this to force a re-evaluation. Be aware that this can be an expensive operation and should be * done sparingly. */ forceUpdate: () => void; /** * Scroll to and focus the item at the given index. focusIndex will call scrollToIndex on the specified index. * * @param index - Index of item to scroll to * @param forceIntoFirstElement - If true, focus will be set to the first focusable child element of the item rather * than the item itself. * @param measureItem - Optional callback to measure the height of an individual item * @param scrollToMode - Optional setting to determine where in the window the item should be scrolled to * when focused. */ focusIndex: (index: number, forceIntoFirstElement?: boolean, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode) => void; /** * Get the start index of the page that is currently in view */ getStartItemIndexInView: () => number; /** * Use to programatically resize and/or reorder columns in the DetailsList. * @param column - column to resize/reorder. * @param options - includes width which is desired width in pixels the column should be resized * to and newColumnIndex which is desired index position where the column should be moved to. */ updateColumn: (column: IColumn, options: { width?: number; newColumnIndex?: number; }) => void; } export declare interface IDetailsListCheckboxProps extends IDetailsCheckboxProps { } /** * {@docCategory DetailsList} */ export declare interface IDetailsListProps extends IBaseProps, IWithViewportProps { /** Theme provided by a higher-order component. */ theme?: ITheme; /** Custom overrides to the themed or default styles. */ styles?: IStyleFunctionOrObject; /** * Callback to access the IDetailsList interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** A key that uniquely identifies the given items. If provided, the selection will be reset when the key changes. */ setKey?: string; /** The items to render. */ items: any[]; /** Set this to true to indicate that the items being displayed are placeholder data. */ isPlaceholderData?: boolean; /** Properties to pass through to the List components being rendered. */ listProps?: IListProps; /** Default index to set focus to once the items have rendered and the index exists. */ initialFocusedIndex?: number; /** Class name to add to the root element. */ className?: string; /** Grouping instructions. */ groups?: IGroup[]; /** Override properties to render groups. */ groupProps?: IDetailsGroupRenderProps; /** Override for the indent width used for group nesting. */ indentWidth?: number; /** Selection model to track selection state. */ selection?: ISelection; /** Controls how/if the details list manages selection. Options include none, single, multiple */ selectionMode?: SelectionMode_2; /** * By default, selection is cleared when clicking on an empty (non-focusable) section of the screen. * Setting this value to true overrides that behavior and maintains selection. * @defaultvalue false **/ selectionPreservedOnEmptyClick?: boolean; /** * Additional props to pass through to the SelectionZone created by default. */ selectionZoneProps?: Partial; /** Controls how the columns are adjusted. */ layoutMode?: DetailsListLayoutMode; /** * Controls the visibility of selection check box. * @defaultvalue CheckboxVisibility.onHover */ checkboxVisibility?: CheckboxVisibility; /** * Controls the visibility of the header. * @defaultvalue true */ isHeaderVisible?: boolean; /** Column definitions. If none are provided, default columns will be created based on the items' properties. */ columns?: IColumn[]; /** Controls how the list constrains overflow. */ constrainMode?: ConstrainMode; /** Event names and corresponding callbacks that will be registered to rendered row elements. */ rowElementEventMap?: { eventName: string; callback: (context: IDragDropContext, event?: any) => void; }[]; /** Callback for when the list has been updated. Useful for telemetry tracking externally. */ onDidUpdate?: (detailsList?: DetailsListBase) => void; /** * Callback for when a given row has been mounted. Useful for identifying when a row has been rendered on the page. */ onRowDidMount?: (item?: any, index?: number) => void; /** * Callback for when a given row has been unmounted. * Useful for identifying when a row has been removed from the page. */ onRowWillUnmount?: (item?: any, index?: number) => void; /** Callback for when the user clicks on the column header. */ onColumnHeaderClick?: (ev?: React_2.MouseEvent, column?: IColumn) => void; /** Callback for when the user asks for a contextual menu (usually via right click) from a column header. */ onColumnHeaderContextMenu?: (column?: IColumn, ev?: React_2.MouseEvent) => void; /** Callback fired on column resize */ onColumnResize?: (column?: IColumn, newWidth?: number, columnIndex?: number) => void; /** Callback for when a given row has been invoked (by pressing enter while it is selected.) */ onItemInvoked?: (item?: any, index?: number, ev?: Event) => void; /** * Callback for when the context menu of an item has been accessed. * If undefined or false is returned, `ev.preventDefault()` will be called. */ onItemContextMenu?: (item?: any, index?: number, ev?: Event) => void | boolean; /** * Callback to override the default row rendering. */ onRenderRow?: IRenderFunction; /** * If provided, will be the "default" item column renderer method. * This affects cells within the rows, not the rows themselves. * If a column definition provides its own `onRender` method, that will be used instead of this. */ onRenderItemColumn?: (item?: any, index?: number, column?: IColumn) => React_2.ReactNode; /** * Render function which is composed around rendering every cell. */ onRenderField?: IRenderFunction; /** * If provided, will be the "default" item column cell value return. * A column's `getValueKey` can override `getCellValueKey`. */ getCellValueKey?: (item?: any, index?: number, column?: IColumn) => string; /** Map of callback functions related to row drag and drop functionality. */ dragDropEvents?: IDragDropEvents; /** Callback for what to render when the item is missing. */ onRenderMissingItem?: (index?: number, rowProps?: IDetailsRowProps) => React_2.ReactNode; /** An override to render the details header. */ onRenderDetailsHeader?: IRenderFunction; /** An override to render the details footer. */ onRenderDetailsFooter?: IRenderFunction; /** If provided, can be used to render a custom checkbox. */ onRenderCheckbox?: IRenderFunction; /** Viewport info, provided by the `withViewport` decorator. */ viewport?: IViewport; /** * Callback for when an item in the list becomes active by clicking anywhere inside the row or navigating to it * with the keyboard. */ onActiveItemChanged?: (item?: any, index?: number, ev?: React_2.FocusEvent) => void; /** Accessible label for the list header. */ ariaLabelForListHeader?: string; /** Accessible label for the select all checkbox. */ ariaLabelForSelectAllCheckbox?: string; /** Accessible label for the name of the selection column. */ ariaLabelForSelectionColumn?: string; /** Callback to get the aria-label string for a given item. */ getRowAriaLabel?: (item: any) => string; /** Callback to get the aria-describedby IDs (space-separated strings) of elements that describe the item. */ getRowAriaDescribedBy?: (item: any) => string; /** * Callback to get the item key, to be used in the selection and on render. * Must be provided if sorting or filtering is enabled. */ getKey?: (item: any, index?: number) => string; /** * Accessible label describing or summarizing the list. * @deprecated use `ariaLabelForGrid` */ ariaLabel?: string; /** Accessible label for the row check button, e.g. "select row". */ checkButtonAriaLabel?: string; /** Accessible label for the group header check button, e.g. "select section". */ checkButtonGroupAriaLabel?: string; /** Accessible label for the grid within the list. */ ariaLabelForGrid?: string; /** An optional margin for proportional columns, to e.g. account for scrollbars when laying out width. */ flexMargin?: number; /** * Whether the role `application` should be applied to the list. * @defaultvalue false * @deprecated using the application role in this case is an antipattern, and heavily discouraged. */ shouldApplyApplicationRole?: boolean; /** * The minimum mouse move distance to interpret the action as drag event. * @defaultvalue 5 */ minimumPixelsForDrag?: number; /** * Whether to render in compact mode. * @defaultvalue false */ compact?: boolean; /** * Whether to enable render page caching. This is an experimental performance optimization that is off by default. * @defaultvalue false */ usePageCache?: boolean; /** * Callback to determine whether the list should be rendered in full, or virtualized. * * Virtualization will add and remove pages of items as the user scrolls them into the visible range. * This benefits larger list scenarios by reducing the DOM on the screen, but can negatively affect performance * for smaller lists. * * The default implementation will virtualize when this callback is not provided. */ onShouldVirtualize?: (props: IListProps) => boolean; /** Class name to add to the cell of a checkbox. */ checkboxCellClassName?: string; /** Whether the selection zone should enter modal state on touch. */ enterModalSelectionOnTouch?: boolean; /** Options for column reordering using drag and drop. */ columnReorderOptions?: IColumnReorderOptions; /** Callback to override default group height calculation used by list virtualization. */ getGroupHeight?: IGroupedListProps['getGroupHeight']; /** * Whether to re-render a row only when props changed. Might cause regression when depending on external updates. * @defaultvalue false */ useReducedRowRenderer?: boolean; /** * Props impacting the render style of cells. Since these have an impact on calculated column widths, they are * handled separately from normal theme styling, but they are passed to the styling system. */ cellStyleProps?: ICellStyleProps; /** Whether to disable the built-in SelectionZone, so the host component can provide its own. */ disableSelectionZone?: boolean; /** * Determines if an item is selected on focus. * * @defaultvalue true */ isSelectedOnFocus?: boolean; /** Whether to animate updates */ enableUpdateAnimations?: boolean; /** * Whether to use fast icon and check components. The icons can't be targeted by customization * but are still customizable via class names. * @defaultvalue true */ useFastIcons?: boolean; /** Role for the list. */ role?: string; /** * Properties to pass through to the FocusZone. */ focusZoneProps?: IFocusZoneProps; } export declare interface IDetailsListState { focusedItemIndex: number; lastWidth?: number; lastSelectionMode?: SelectionMode_2; adjustedColumns: IColumn[]; isCollapsed?: boolean; isSizing?: boolean; isSomeGroupExpanded?: boolean; /** * A unique object used to force-update the List when it changes. */ version: {}; getDerivedStateFromProps(nextProps: IDetailsListProps, previousState: IDetailsListState): IDetailsListState; } /** * {@docCategory DetailsList} */ export declare type IDetailsListStyleProps = Required> & Pick & { /** Whether the list is horizontally constrained */ isHorizontalConstrained?: boolean; /** Whether the list is in compact mode */ compact?: boolean; /** Whether the list is fixed in size */ isFixed?: boolean; }; /** * {@docCategory DetailsList} */ export declare interface IDetailsListStyles { root: IStyle; focusZone: IStyle; headerWrapper: IStyle; contentWrapper: IStyle; } /** * {@docCategory DetailsList} */ export declare interface IDetailsRow { } /** * {@docCategory DetailsList} */ export declare interface IDetailsRowBaseProps extends Pick, IBaseProps, IDetailsItemProps { /** * Theme provided by styled() function */ theme?: ITheme; /** * Overriding styles to this row */ styles?: IStyleFunctionOrObject; /** * Ref of the component */ componentRef?: IRefObject; /** * Data source for this component */ item: any; /** * Index of the collection of items of the DetailsList */ itemIndex: number; /** * Offset used to calculate the aria-rowindex value based on itemIndex * @defaultvalue 2 */ flatIndexOffset?: number; /** * Whether to render in compact mode */ compact?: boolean; /** * A list of events to register */ eventsToRegister?: { eventName: string; callback: (item?: any, index?: number, event?: any) => void; }[]; /** * Callback for did mount for parent */ onDidMount?: (row?: DetailsRowBase) => void; /** * Callback for will mount for parent */ onWillUnmount?: (row?: DetailsRowBase) => void; /** * Callback for rendering a checkbox */ onRenderCheck?: (props: IDetailsRowCheckProps) => JSX.Element; /** * If provided, can be used to render a custom checkbox */ onRenderDetailsCheckbox?: IRenderFunction; /** * Handling drag and drop events */ dragDropEvents?: IDragDropEvents; /** * Helper for the drag and drop */ dragDropHelper?: IDragDropHelper; /** * Collapse all visibility */ collapseAllVisibility?: CollapseAllVisibility; /** * Callback for getting the row aria label */ getRowAriaLabel?: (item: any) => string; /** * Callback for getting the row aria description */ getRowAriaDescription?: (item: any) => string; /** * Callback for getting the row aria-describedby */ getRowAriaDescribedBy?: (item: any) => string; /** * Check button's aria label */ checkButtonAriaLabel?: string; /** * Class name for the checkbox cell */ checkboxCellClassName?: string; /** * DOM element into which to render row field */ rowFieldsAs?: IComponentAs; /** * Overriding class name */ className?: string; /** Whether to animate updates */ enableUpdateAnimations?: boolean; /** * Rerender DetailsRow only when props changed. Might cause regression when depending on external updates. * @defaultvalue false */ useReducedRowRenderer?: boolean; /** * Optional pre-rendered content per column. Preferred over onRender or onRenderItemColumn if provided. */ cellsByColumn?: { [columnKey: string]: React_2.ReactNode; }; /** * Whether to use fast icon and check components. The icons can't be targeted by customization * but are still customizable via class names. * @defaultvalue true */ useFastIcons?: boolean; /** Role for the row. */ role?: string; /** * Whether the row is rendered within a grid. * In DetailsList this should be true, and in GroupedList this should be false. */ isGridRow?: boolean; /** * Id for row */ id?: string; /** * Group row item belongs to. * When using GroupedList, this needs to be passed in order to calculate * the correct aria-posinset and aria-setsize values. */ group?: IGroup; /** * Properties to pass to the rows' FocusZone. */ focusZoneProps?: IFocusZoneProps; /** whether or not row should be rendered in disabled state */ disabled?: boolean; } /** * {@docCategory DetailsList} */ export declare interface IDetailsRowCheckProps extends React_2.HTMLAttributes { /** * Theme provided by High-Order Component. */ theme?: ITheme; /** * Style override */ styles?: IStyleFunctionOrObject; /** * Is the check part of the header in a DetailsList */ isHeader?: boolean; /** * Whether or not this check is selected */ selected?: boolean; /** * Is any selected - also true for isSelectionModal */ anySelected?: boolean; /** * Can this checkbox be selectable */ canSelect: boolean; /** * Selection mode */ selectionMode?: SelectionMode_2; /** * Is this in compact mode? */ compact?: boolean; /** * Optional className to attach to the slider root element. */ className?: string; /** * The classname to be passed down to Check component */ checkClassName?: string; /** * Whether or not this checkbox is visible */ isVisible?: boolean; /** * If provided, can be used to render a custom checkbox */ onRenderDetailsCheckbox?: IRenderFunction; /** * Whether to use fast icon and check components. The icons can't be targeted by customization * but are still customizable via class names. * @defaultvalue true */ useFastIcons?: boolean; } /** * {@docCategory DetailsList} */ export declare type IDetailsRowCheckStyleProps = Required> & Pick & { /** Is checkbox visible */ isVisible?: boolean; }; /** * {@docCategory DetailsList} */ export declare interface IDetailsRowCheckStyles { root: IStyle; /** @deprecated Use `root` (they're applied to the same element) */ check: IStyle; isDisabled: IStyle; } /** * Props interface for the DetailsRowFields component. * * {@docCategory DetailsList} */ export declare interface IDetailsRowFieldsProps extends IOverrideColumnRenderProps { /** * Data source for this component */ item: any; /** * The item index of the collection for the DetailsList */ itemIndex: number; /** * Index to start for the column */ columnStartIndex: number; /** * Columns metadata */ columns: IColumn[]; /** * whether to render as a compact field */ compact?: boolean; /** * Subset of classnames currently generated in DetailsRow that are used within DetailsRowFields. */ rowClassNames: { [k in keyof Pick]: string; }; /** * Whether or not the details row is in a selected state. */ isSelected?: boolean; /** * Id for the current row's row-header */ rowHeaderId?: string; /** * Style properties to customize cell render output. */ cellStyleProps?: ICellStyleProps; enableUpdateAnimations?: boolean; } /** * {@docCategory DetailsList} */ export declare interface IDetailsRowProps extends IDetailsRowBaseProps { /** * Column metadata */ columns: IColumn[]; /** * Selection from utilities */ selection: ISelection; /** * Selection mode */ selectionMode: SelectionMode_2; } export declare interface IDetailsRowSelectionState { isSelected: boolean; isSelectionModal: boolean; } export declare interface IDetailsRowState { selectionState: IDetailsRowSelectionState; columnMeasureInfo?: { index: number; column: IColumn; onMeasureDone: (measuredWidth: number) => void; }; isDropping?: boolean; } /** * {@docCategory DetailsList} */ export declare type IDetailsRowStyleProps = Required> & Pick & { /** Whether the row is selected */ isSelected?: boolean; /** Whether there are any rows in the list selected */ anySelected?: boolean; /** Whether this row can be selected */ canSelect?: boolean; /** Class name of when this becomes a drop target. */ droppingClassName?: string; /** Is the checkbox visible */ isCheckVisible?: boolean; /** Is this a row header */ isRowHeader?: boolean; /** A class name from the checkbox cell, so proper styling can be targeted */ checkboxCellClassName?: string; /** CSS class name for the component */ className?: string; /** Is list in compact mode */ compact?: boolean; cellStyleProps?: ICellStyleProps; /** Whether to animate updates */ enableUpdateAnimations?: boolean; }; /** * {@docCategory DetailsList} */ export declare interface IDetailsRowStyles { root: IStyle; cell: IStyle; cellAnimation: IStyle; cellUnpadded: IStyle; cellPadded: IStyle; checkCell: IStyle; isRowHeader: IStyle; isMultiline: IStyle; fields: IStyle; cellMeasurer: IStyle; /** * @deprecated Node removed, do not use */ checkCover?: IStyle; check: IStyle; } /** * {@docCategory Dialog} */ export declare interface IDialog { } /** * {@docCategory Dialog} */ export declare interface IDialogContent { } /** * {@docCategory Dialog} */ export declare interface IDialogContentProps extends React_2.ClassAttributes { children?: React_2.ReactNode; /** * Optional callback to access the IDialogContent interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * Call to provide customized styling that will layer on top of the variant rules */ styles?: IStyleFunctionOrObject; /** * Theme provided by HOC. */ theme?: ITheme; /** * Is inside a multiline wrapper */ isMultiline?: boolean; /** * Show an 'x' close button in the upper-right corner */ showCloseButton?: boolean; /** * Other top buttons that will show up next to the close button */ topButtonsProps?: IButtonProps[]; /** * Optional override class name */ className?: string; /** * Callback for when the Dialog is dismissed from the close button or light dismiss, before the animation completes. */ onDismiss?: (ev?: React_2.MouseEvent) => any; /** * The Id for subText container */ subTextId?: string; /** * The subtext to display in the dialog */ subText?: string; /** * The Id for title container * * @deprecated use the `id` attribute in `titleProps` instead. */ titleId?: string; /** * The title text to display at the top of the dialog. */ title?: string | JSX.Element; /** * The props for title container. */ titleProps?: React_2.HTMLAttributes; /** * Responsive mode passed in from decorator. */ responsiveMode?: ResponsiveMode; /** * Label to be passed to to aria-label of close button * @defaultvalue Close */ closeButtonAriaLabel?: string; /** * The type of Dialog to display. * @defaultvalue DialogType.normal */ type?: DialogType; /** * The classname for when the header is draggable */ draggableHeaderClassName?: string; } /** * {@docCategory Dialog} */ export declare interface IDialogContentStyleProps { /** * Accept theme prop. */ theme: ITheme; /** * Accept custom classNames */ className?: string; isLargeHeader?: boolean; isClose?: boolean; hidden?: boolean; /** * Is inside a multiline wrapper */ isMultiline?: boolean; /** * The classname for when the header is draggable */ draggableHeaderClassName?: string; } /** * {@docCategory Dialog} */ export declare interface IDialogContentStyles { /** * Style for the content element. */ content: IStyle; subText: IStyle; header: IStyle; button: IStyle; inner: IStyle; innerContent: IStyle; title: IStyle; topButton: IStyle; } /** * {@docCategory Dialog} */ export declare interface IDialogFooter { } /** * {@docCategory Dialog} */ export declare interface IDialogFooterProps extends IReactProps { children?: React_2.ReactNode; /** * Gets the component ref. */ componentRef?: IRefObject; /** * Call to provide customized styling that will layer on top of the variant rules */ styles?: IStyleFunctionOrObject; /** * Theme provided by HOC. */ theme?: ITheme; /** * Optional override class name */ className?: string; } /** * {@docCategory Dialog} */ export declare interface IDialogFooterStyleProps { /** * Accept theme prop. */ theme: ITheme; /** * Optional override class name */ className?: string; } /** * {@docCategory Dialog} */ export declare interface IDialogFooterStyles { /** * Style for the actions element. */ actions: IStyle; actionsRight: IStyle; action: IStyle; } /** * {@docCategory Dialog} */ export declare interface IDialogProps extends React_2.ClassAttributes, IWithResponsiveModeState, IAccessiblePopupProps { children?: React_2.ReactNode; /** * @deprecated Unused, returns no value */ componentRef?: IRefObject; /** * Call to provide customized styling that will layer on top of the variant rules */ styles?: IStyleFunctionOrObject; /** * Theme provided by HOC. */ theme?: ITheme; /** * Props to be passed through to Dialog Content */ dialogContentProps?: IDialogContentProps; /** * A callback function for when the Dialog is dismissed from the close button or light dismiss. * Can also be specified separately in content and modal. */ onDismiss?: (ev?: React_2.MouseEvent) => any; /** * Whether the dialog is hidden. * @defaultvalue true */ hidden?: boolean; /** * Props to be passed through to Modal */ modalProps?: IModalProps; /** * Whether the dialog is displayed. * @defaultvalue false * @deprecated Use `hidden` instead */ isOpen?: boolean; /** * Whether the overlay is dark themed. * @defaultvalue true * @deprecated Pass through via `modalProps` instead */ isDarkOverlay?: boolean; /** * A callback function which is called after the Dialog is dismissed and the animation is complete. * @deprecated Pass through via `modalProps` instead */ onDismissed?: () => any; /** * Whether the dialog can be light dismissed by clicking outside the dialog (on the overlay). * @defaultvalue false * @deprecated Pass through via `modalProps` instead */ isBlocking?: boolean; /** * Optional class name to be added to the root class * @deprecated Pass through via `modalProps.className` instead */ className?: string; /** * Optional override for container class * @deprecated Pass through via `modalProps.className` instead */ containerClassName?: string; /** * A callback function for when the Dialog content is mounted on the overlay layer * @deprecated Pass through via `modalProps.layerProps` instead */ onLayerDidMount?: () => void; /** * Deprecated at 0.81.2. * @deprecated Use `onLayerDidMount` instead. */ onLayerMounted?: () => void; /** * The type of Dialog to display. * @defaultvalue DialogType.normal * @deprecated Pass through via `dialogContentProps` instead. */ type?: DialogType; /** * The title text to display at the top of the dialog. * @deprecated Pass through via `dialogContentProps` instead. */ title?: string | JSX.Element; /** * The subtext to display in the dialog. * @deprecated Pass through via `dialogContentProps` instead. */ subText?: string; /** * Optional override content class * @deprecated Pass through via `dialogContentProps` instead as `className`. */ contentClassName?: string; /** * Other top buttons that will show up next to the close button * @deprecated Pass through via `dialogContentProps` instead. */ topButtonsProps?: IButtonProps[]; /** * Optional id for aria-LabelledBy * @deprecated Pass through via `modalProps.titleAriaId` instead. */ ariaLabelledById?: string; /** * Optional id for aria-DescribedBy * @deprecated Pass through via `modalProps.subtitleAriaId` instead. */ ariaDescribedById?: string; /** * Sets the minimum width of the dialog. It limits the width property to be not * smaller than the value specified in min-width. */ minWidth?: ICSSRule | ICSSPixelUnitRule; /** * Sets the maximum width for the dialog. It limits the width property to be larger * than the value specified in max-width. */ maxWidth?: ICSSRule | ICSSPixelUnitRule; } /** * {@docCategory Dialog} */ export declare interface IDialogStyleProps { /** * Accept theme prop. */ theme: ITheme; /** * Accept custom classNames */ className?: string; /** * Optional override for container class * @deprecated Pass through via `modalProps.className` instead. */ containerClassName?: string; /** * Optional override content class * @deprecated Pass through via `dialogContentProps` instead as `className`. */ contentClassName?: string; /** * Whether the dialog is hidden. * @defaultvalue false */ hidden?: boolean; /** * Default min-width for the dialog box. * @defaultvalue '288px' */ dialogDefaultMinWidth?: string | ICSSRule | ICSSPixelUnitRule; /** * Default max-width for the dialog box. * @defaultvalue '340px' */ dialogDefaultMaxWidth?: string | ICSSRule | ICSSPixelUnitRule; } /** * {@docCategory Dialog} */ export declare interface IDialogStyles { /** * Style for the root element. */ root: IStyle; main: IStyle; } export { IDictionary } export { IDisposable } /** * {@docCategory Breadcrumb} */ export declare interface IDividerAsProps extends IIconProps { /** * Breadcrumb item to left of the divider to be passed for custom rendering. * For overflowed items, it will be last item in the list. */ item?: IBreadcrumbItem; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCard { /** * Sets focus to the DocumentCard. */ focus: () => void; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardActions { } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardActionsProps extends React_2.ClassAttributes { /** * Gets the component ref. */ componentRef?: IRefObject; /** * The actions available for this document. */ actions: IButtonProps[]; /** * The number of views this document has received. */ views?: Number; /** * Call to provide customized styling that will layer on top of the variant rules */ styles?: IStyleFunctionOrObject; /** * Theme provided by HOC. */ theme?: ITheme; /** * Optional override class name */ className?: string; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardActionsStyleProps { /** * Accept theme prop. */ theme: ITheme; /** * Optional override class name */ className?: string; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardActionsStyles { root: IStyle; action: IStyle; views: IStyle; viewsIcon: IStyle; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardActivity { } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardActivityPerson { /** * The name of the person. */ name: string; /** * Path to the profile photo of the person. */ profileImageSrc: string; /** * The user's initials to display in the profile photo area when there is no image. */ initials?: string; /** * Whether initials are calculated for phone numbers and number sequences. * Example: Set property to true to get initials for project names consisting of numbers only. * @defaultvalue false */ allowPhoneInitials?: boolean; /** * The background color when the user's initials are displayed. * @defaultvalue PersonaInitialsColor.blue */ initialsColor?: PersonaInitialsColor; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardActivityProps extends React_2.ClassAttributes { /** * Gets the component ref. */ componentRef?: IRefObject; /** * Describes the activity that has taken place, such as "Created Feb 23, 2016". */ activity: string; /** * One or more people who are involved in this activity. */ people: IDocumentCardActivityPerson[]; /** * Call to provide customized styling that will layer on top of the variant rules */ styles?: IStyleFunctionOrObject; /** * Theme provided by HOC. */ theme?: ITheme; /** * Optional override class name */ className?: string; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardActivityStyleProps { /** * Accept theme prop. */ theme: ITheme; /** * Optional override class name */ className?: string; /** * Indicates if multiple people are being shown. */ multiplePeople?: boolean; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardActivityStyles { root: IStyle; avatars: IStyle; avatar: IStyle; details: IStyle; name: IStyle; activity: IStyle; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardContext { role?: string; tabIndex?: number; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardDetails { } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardDetailsProps extends IReactProps { /** * Gets the component ref. */ componentRef?: IRefObject; /** * Call to provide customized styling that will layer on top of the variant rules */ styles?: IStyleFunctionOrObject; /** * Theme provided by HOC. */ theme?: ITheme; /** * Optional override class name */ className?: string; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardDetailsStyleProps { /** * Accept theme prop. */ theme: ITheme; /** * Optional override class name */ className?: string; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardDetailsStyles { root: IStyle; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardImage { } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardImageProps extends IBaseProps<{}> { /** * Gets the component ref. */ componentRef?: IRefObject; /** * Call to provide customized styling that will layer on top of the variant rules */ styles?: IStyleFunctionOrObject; /** * Theme provided by HOC. */ theme?: ITheme; /** * Optional override class name */ className?: string; /** * Path to the preview image. */ imageSrc?: string; /** * The props for the icon associated with this document type. */ iconProps?: IIconProps; /** * If provided, forces the preview image to be this width. */ width?: number; /** * If provided, forces the preview image to be this height. */ height?: number; /** * Used to determine how to size the image to fit the dimensions of the component. * If both dimensions are provided, then the image is fit using ImageFit.scale, otherwise ImageFit.none is used. */ imageFit?: ImageFit; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardImageStyleProps extends IDocumentCardImageProps { } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardImageStyles { root: IStyle; cornerIcon: IStyle; centeredIcon: IStyle; centeredIconWrapper: IStyle; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardLocation { } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardLocationProps extends React_2.ClassAttributes { /** * Gets the component ref. */ componentRef?: IRefObject; /** * Text for the location of the document. */ location: string; /** * URL to navigate to for this location. */ locationHref?: string; /** * Function to call when the location is clicked. */ onClick?: (ev?: React_2.MouseEvent) => void; /** * Aria label for the link to the document location. */ ariaLabel?: string; /** * Call to provide customized styling that will layer on top of the variant rules */ styles?: IStyleFunctionOrObject; /** * Theme provided by HOC. */ theme?: ITheme; /** * Optional override class name */ className?: string; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardLocationStyleProps { /** * Accept theme prop. */ theme: ITheme; /** * Optional override class name */ className?: string; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardLocationStyles { root: IStyle; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardLogo { } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardLogoProps extends React_2.ClassAttributes { /** * Gets the component ref. */ componentRef?: IRefObject; /** * Describes DocumentCard Logo badge. */ logoIcon: string; /** * Describe Logo name, optional. */ logoName?: string; /** * Call to provide customized styling that will layer on top of the variant rules */ styles?: IStyleFunctionOrObject; /** * Theme provided by HOC. */ theme?: ITheme; /** * Optional override class name */ className?: string; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardLogoStyleProps { /** * Accept theme prop. */ theme: ITheme; /** * Optional override class name */ className?: string; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardLogoStyles { root: IStyle; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardPreview { } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardPreviewImage { /** * Gets the component ref. */ componentRef?: IRefObject<{}>; /** * File name for the document this preview represents. */ name?: string; /** * URL to view the file. * @deprecated Use `href` inside of `linkProps` instead. */ url?: string; /** * Props to pass to Link component */ linkProps?: ILinkProps; /** * Path to the preview image. */ previewImageSrc?: string; /** * @deprecated To be removed at \>= v2.0.0. */ errorImageSrc?: string; /** * Path to the icon associated with this document type. * */ iconSrc?: string; /** * If provided, forces the preview image to be this width. */ width?: number; /** * If provided, forces the preview image to be this height. */ height?: number; /** * Used to determine how to size the image to fit the dimensions of the component. * If both dimensions are provided, then the image is fit using ImageFit.scale, otherwise ImageFit.none is used. */ imageFit?: ImageFit; /** * Hex color value of the line below the preview, which should correspond to the document type. * * @deprecated To be removed at \>= v5.0.0. */ accentColor?: string; /** * The props for the preview icon. * If provided, icon will be rendered instead of image. */ previewIconProps?: IIconProps; /** * The props for the preview icon container classname. * If provided, icon container classname will be used.. */ previewIconContainerClass?: string; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardPreviewProps extends IBaseProps<{}> { /** * Gets the component ref. */ componentRef?: IRefObject; /** * One or more preview images to display. */ previewImages: IDocumentCardPreviewImage[]; /** * The function return string that will describe the number of overflow documents. * such as (overflowCount: number) =\> `+${ overflowCount } more`, */ getOverflowDocumentCountText?: (overflowCount: number) => string; /** * Maximum number of document previews to display * @default 3 */ maxDisplayCount?: number; /** * Call to provide customized styling that will layer on top of the variant rules */ styles?: IStyleFunctionOrObject; /** * Theme provided by HOC. */ theme?: ITheme; /** * Optional override class name */ className?: string; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardPreviewStyleProps { /** * Accept theme prop. */ theme: ITheme; /** * Optional override class name */ className?: string; /** * Is it a list of files rather than a preview image? */ isFileList?: boolean; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardPreviewStyles { root: IStyle; previewIcon: IStyle; icon: IStyle; fileList: IStyle; fileListIcon: IStyle; fileListLink: IStyle; fileListOverflowText: IStyle; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardProps extends IBaseProps, React_2.HTMLAttributes { /** * Optional callback to access the IDocumentCard interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * The type of DocumentCard to display. * @defaultvalue DocumentCardType.normal */ type?: DocumentCardType; /** * Function to call when the card is clicked or keyboard Enter/Space is pushed. */ onClick?: (ev?: React_2.SyntheticEvent) => void; /** * A URL to navigate to when the card is clicked. If a function has also been provided, * it will be used instead of the URL. */ onClickHref?: string; /** * A target browser context for opening the link. If not specified, will open in the same tab/window. */ onClickTarget?: string; /** * Aria role assigned to the documentCard (Eg. button, link). * Use this to override the default assignment. * @defaultvalue When `onClick` is provided, default role will be 'button'. * When `onClickHref` is provided, default role will be 'link'. */ role?: string; /** * Hex color value of the line below the card, which should correspond to the document type. * This should only be supplied when using the 'compact' card layout. * * @deprecated To be removed at \>= v5.0.0. */ accentColor?: string; /** * Child components to render within the card. */ children?: React_2.ReactNode; /** * Call to provide customized styling that will layer on top of the variant rules */ styles?: IStyleFunctionOrObject; /** * Theme provided by HOC. */ theme?: ITheme; /** * Optional override class name */ className?: string; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardStatus { } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardStatusProps extends IReactProps { /** * Gets the component ref. */ componentRef?: IRefObject; /** * Describes DocumentCard status icon. */ statusIcon?: string; /** * Describe status information. Required field. */ status: string; /** * Call to provide customized styling that will layer on top of the variant rules */ styles?: IStyleFunctionOrObject; /** * Theme provided by HOC. */ theme?: ITheme; /** * Optional override class name */ className?: string; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardStatusStyleProps { /** * Accept theme prop. */ theme: ITheme; /** * Optional override class name */ className?: string; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardStatusStyles { root: IStyle; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardStyleProps { /** * Accept theme prop. */ theme: ITheme; /** * Optional override class name */ className?: string; /** * True when the card has a click action. */ actionable?: boolean; /** * Compact variant of the card. */ compact?: boolean; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardStyles { root: IStyle; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardTitle { } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardTitleProps extends React_2.ClassAttributes { /** * Gets the component ref. */ componentRef?: IRefObject; /** * Title text. * If the card represents more than one document, this should be the title of one document and a "+X" string. * For example, a collection of four documents would have a string of "Document.docx +3". */ title: string; /** * Whether we truncate the title to fit within the box. May have a performance impact. * @defaultvalue true */ shouldTruncate?: boolean; /** * Whether show as title as secondary title style such as smaller font and lighter color. * @defaultvalue false */ showAsSecondaryTitle?: boolean; /** * Call to provide customized styling that will layer on top of the variant rules */ styles?: IStyleFunctionOrObject; /** * Theme provided by HOC. */ theme?: ITheme; /** * Optional override class name */ className?: string; } declare interface IDocumentCardTitleState { truncatedTitleFirstPiece?: string; truncatedTitleSecondPiece?: string; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardTitleStyleProps { /** * Accept theme prop. */ theme: ITheme; /** * Optional override class name */ className?: string; /** * Is this a secondary title? */ showAsSecondaryTitle?: boolean; } /** * {@docCategory DocumentCard} */ export declare interface IDocumentCardTitleStyles { root: IStyle; } /** * Drag & drop event contextual information. * * {@docCategory IDragDropHelper} */ export declare interface IDragDropContext { /** * Data associated with drag & drop action. */ data: any; /** * Index of drag & drop action. */ index: number; /** * Whether or not drag & drop region is indivual or group of content. */ isGroup?: boolean; } /** * {@docCategory IDragDropHelper} */ export declare interface IDragDropEvent { /** * Whether or not the drag & drop event was handled. */ isHandled?: boolean; } /** * Drag & drop event callback interface. * * {@docCategory IDragDropHelper} */ export declare interface IDragDropEvents { /** * Whether or not drop action is allowed. */ canDrop?: (dropContext?: IDragDropContext, dragContext?: IDragDropContext) => boolean; /** * Whether or not drag action is allowed. */ canDrag?: (item?: any) => boolean; /** * On drag enter region event callback. * Returned string is the css classes that will be added to the entering element. */ onDragEnter?: (item?: any, event?: DragEvent) => string; /** * On drag leave region event callback. */ onDragLeave?: (item?: any, event?: DragEvent) => void; /** * On drop event callback. */ onDrop?: (item?: any, event?: DragEvent) => void; /** * On drag start event callback. */ onDragStart?: (item?: any, itemIndex?: number, selectedItems?: any[], event?: MouseEvent) => void; /** * On drag end event callback. */ onDragEnd?: (item?: any, event?: DragEvent) => void; /** * On drag over event callback. */ onDragOver?: (item?: any, event?: DragEvent) => void; /** * Whether the whole group is draggable. This applies after canDrag returns true for the group. */ canDragGroups?: boolean; } /** * Helper for subscribing and unsubscribing to * drag and drop events on an HTMLElement. * * {@docCategory IDragDropHelper} */ export declare interface IDragDropHelper { /** * Subscribe to events on a DOM node with drag and drop configuration. */ subscribe: (root: HTMLElement, events: EventGroup, options: IDragDropOptions) => { key: string; dispose: () => void; }; /** * Unsubscribe to events registered on a DOM node with key. */ unsubscribe: (root: HTMLElement, key: string) => void; /** * Dispose of listeners bound to instance of helper. */ dispose: () => void; } export declare interface IDragDropHelperParams { selection: ISelection; minimumPixelsForDrag?: number; } /** * The drag and drop event listener configuration. * * {@docCategory IDragDropHelper} */ export declare interface IDragDropOptions { /** * Unique key to associate with instance. */ key?: string; /** * Map of event name to callback function to subscribe to. */ eventMap?: { eventName: string; callback: (context: IDragDropContext, event?: any) => void; }[]; /** * Selection index on drag and drop event. */ selectionIndex: number; /** * Context associated with drag and drop event. */ context: IDragDropContext; /** * Callback on drop state update. */ updateDropState: (isDropping: boolean, event: DragEvent) => void; /** * Whether or not drop action is allowed. */ canDrop?: (dropContext?: IDragDropContext, dragContext?: IDragDropContext) => boolean; /** * Whether or not drag action is allowed. */ canDrag?: (item?: any) => boolean; /** * On drag start event callback. */ onDragStart?: (item?: any, itemIndex?: number, selectedItems?: any[], event?: MouseEvent) => void; /** * On drop event callback. */ onDrop?: (item?: any, event?: DragEvent) => void; /** * On drag end event callback. */ onDragEnd?: (item?: any, event?: DragEvent) => void; /** * On drag over element(s) event callback. */ onDragOver?: (item?: any, event?: DragEvent) => void; } export declare interface IDragDropTarget { root: HTMLElement; options: IDragDropOptions; key: string; } export declare interface IDragOptions { /** * Optional selector for the element where the drag can be initiated. If not supplied when * isDraggable is true dragging can be initiated by the whole contents of the modal */ dragHandleSelector?: string; /** * IconProps for the icon used to indicate that the dialog is in keyboard move mode */ keyboardMoveIconProps?: IIconProps; /** * The text to use for the modal move menu item */ moveMenuItemText: string; /** * The text to use for the modal close menu item */ closeMenuItemText: string; /** * The Draggable Control Menu so that the draggable zone can be moved via the keyboard */ menu: React_2.FunctionComponent; /** * Whether the draggable content should be prevented from going off-screen */ keepInBounds?: boolean; } /** * {@docCategory Dropdown} */ export declare interface IDropdown { /** * All selected options */ readonly selectedOptions: IDropdownOption[]; /** * An imperative handle to dismiss the popup if it is open */ dismissMenu: () => void; focus: (shouldOpenOnFocus?: boolean) => void; } /** * {@docCategory Dropdown} */ export declare interface IDropdownOption extends ISelectableOption { /** * @deprecated Use `selected` instead. Deprecated at v.65.1. */ isSelected?: boolean; } /** * {@docCategory Dropdown} */ export declare interface IDropdownProps extends ISelectableDroppableTextProps, React_2.RefAttributes { /** * Input placeholder text. Displayed until option is selected. * @deprecated Use `placeholder` */ placeHolder?: string; /** * Options for the dropdown. If using `defaultSelectedKey` or `defaultSelectedKeys`, options must be * pure for correct behavior. */ options: IDropdownOption[]; /** * Callback issued when the selected option changes. */ onChange?: (event: React_2.FormEvent, option?: IDropdownOption, index?: number) => void; /** * @deprecated Use `onChange` instead. */ onChanged?: (option: IDropdownOption, index?: number) => void; /** * Custom render function for the label. */ onRenderLabel?: IRenderFunction; /** * Optional custom renderer for placeholder text */ onRenderPlaceholder?: IRenderFunction; /** * Optional custom renderer for placeholder text * @deprecated Use `onRenderPlaceholder` */ onRenderPlaceHolder?: IRenderFunction; /** * Optional custom renderer for selected option displayed in input */ onRenderTitle?: IRenderFunction; /** * Optional custom renderer for chevron icon */ onRenderCaretDown?: IRenderFunction; /** * Custom width for dropdown. If value is 0, width of the input field is used. * If value is 'auto', width of the input field is used by default, and it can grow wider to fit the content. * @defaultvalue 0 */ dropdownWidth?: number | 'auto'; /** * Pass in ResponsiveMode to manually overwrite the way the Dropdown renders. * ResponsiveMode.large would, for instance, disable the behavior where Dropdown options * get rendered into a Panel while ResponsiveMode.small would result in the Dropdown * options always getting rendered in a Panel. */ responsiveMode?: ResponsiveMode; /** * Keys that will be initially used to set selected items. This prop is used for `multiSelect` * scenarios. In other cases, `defaultSelectedKey` should be used. */ defaultSelectedKeys?: string[] | number[]; /** * Keys of the selected items. If you provide this, you must maintain selection * state by observing onChange events and passing a new value in when changed. * Passing null in will clear the selection. * Mutually exclusive with `defaultSelectedKeys`. */ selectedKeys?: string[] | number[] | null; /** * When multiple items are selected, this still will be used to separate values in * the dropdown title. * * @defaultvalue ", " */ multiSelectDelimiter?: string; /** * Optional preference to have onChanged still be called when an already selected item is * clicked in single select mode. Default to false */ notifyOnReselect?: boolean; /** * @deprecated Use `disabled` instead. Deprecated at v0.52.0. */ isDisabled?: boolean; /** * Theme provided by higher order component. */ theme?: ITheme; /** * Call to provide customized styling that will layer on top of the variant rules. */ styles?: IStyleFunctionOrObject; } /** * The props needed to construct styles. * This represents the simplified set of immutable things which control the class names. * {@docCategory Dropdown} */ export declare type IDropdownStyleProps = Pick & { /** * Whether the dropdown is in an error state. */ hasError: boolean; /** * Specifies if the dropdown has label content. */ hasLabel: boolean; /** * Whether the dropdown is in an opened state. */ isOpen: boolean; /** * Whether the dropdown is presently rendering a placeholder. */ isRenderingPlaceholder: boolean; /** * Optional custom className for the panel that displays in small viewports, hosting the Dropdown options. * This is primarily provided for backwards compatibility. */ panelClassName?: string; /** * Optional custom className for the callout that displays in larger viewports, hosting the Dropdown options. * This is primarily provided for backwards compatibility. */ calloutClassName?: string; /** * Prop to notify on what edge the dropdown callout was positioned respective to the title. */ calloutRenderEdge?: RectangleEdge; }; /** * Represents the stylable areas of the control. * {@docCategory Dropdown} */ export declare interface IDropdownStyles { /** Root element of the Dropdown (includes Label and the actual Dropdown). */ root: IStyle; /** Refers to the label associated with the dropdown. This is enclosed by the root. */ label: IStyle; /** Refers to the actual Dropdown element. */ dropdown: IStyle; /** Refers to the primary title of the Dropdown (rendering the selected options/placeholder/etc.). */ title: IStyle; /** Refers to the wrapping container around the downward pointing caret users click on to expand the Dropdown. */ caretDownWrapper: IStyle; /** Refers to the downward pointing caret icon users click on to expand the Dropdown. */ caretDown: IStyle; /** Refers to the error message being rendered under the Dropdown (if any). */ errorMessage: IStyle; /** Refers to the element that wraps `dropdownItems`. */ dropdownItemsWrapper: IStyle; /** Refers to the FocusZone wrapping the individual dropdown items. */ dropdownItems: IStyle; /** Refers to the individual dropdown item. */ dropdownItem: IStyle; /** Style for a dropdown item when it is being selected. */ dropdownItemSelected: IStyle; /** Style for a dropdown item when it is disabled. */ dropdownItemDisabled: IStyle; /** Style for a dropdown item when it is both selected and disabled. */ dropdownItemSelectedAndDisabled: IStyle; /** Style for a dropdown item when it is hidden */ dropdownItemHidden: IStyle; /** * Refers to the text element that renders the actual dropdown item/option text. This would be wrapped by the element * referred to by `dropdownItem`. */ dropdownOptionText: IStyle; /** Refers to the dropdown separator. */ dropdownDivider: IStyle; /** Style for dropdown separator when hidden. */ dropdownDividerHidden: IStyle; /** Refers to the individual dropdown items that are being rendered as a header. */ dropdownItemHeader: IStyle; /** Style for dropdown header when hidden. */ dropdownItemHeaderHidden: IStyle; /** * Refers to the panel that hosts the Dropdown options in small viewports. * @deprecated Use `subComponentStyles.panel` instead. */ panel: IStyle; /** Refers to the callout that hosts Dropdown options in larger viewports. */ callout: IStyle; /** Subcomponent styles. */ subComponentStyles: IDropdownSubComponentStyles; } /** * {@docCategory Dropdown} */ export declare interface IDropdownSubComponentStyles { /** Refers to the panel that hosts the Dropdown options in small viewports. */ panel: IStyleFunctionOrObject; /** Refers to the primary label for the Dropdown. */ label: IStyleFunctionOrObject; /** Refers to the individual dropdown item when the multiSelect prop is true. */ multiSelectItem: IStyleFunctionOrObject; } /** * {@docCategory DetailsList} */ export declare interface IDropHintDetails { originX: number; startX: number; endX: number; dropHintElementRef: HTMLElement; } export declare interface IEditingSelectedPeopleItemProps extends ISelectedPeopleItemProps { onEditingComplete: (oldItem: any, newItem: any) => void; onRenderFloatingPicker?: React_2.ComponentType>; floatingPickerProps?: IBaseFloatingPickerProps; getEditingItemText?: (item: IExtendedPersonaProps) => string; } export declare interface IEditingSelectedPeopleItemStyles { root: IStyle; input: IStyle; } export declare interface IEditingSelectedPeopleItemStylesProps { } export { IEffects } /** * Do not call methods from this directly, use either positionCallout or positionElement or make another function that * utilizes them. * START Private functions and interfaces */ export declare interface IElementPosition { elementRectangle: Rectangle; targetEdge: RectangleEdge; alignmentEdge: RectangleEdge | undefined; forcedInBounds?: boolean; } export declare interface IElementPositionInfo extends IElementPosition { targetRectangle: Rectangle; } /** * An interface for the cached dimensions of entity inner host. */ export declare interface IEntityRect { width?: number; height?: number; } export { IEventRecord } export { IEventRecordList } export { IEventRecordsByName } /** * {@docCategory HoverCard} */ export declare interface IExpandingCard { } /** * ExpandingCard component props. * {@docCategory HoverCard} */ export declare interface IExpandingCardProps extends IBaseCardProps { /** * Height of compact card * @defaultvalue 156 */ compactCardHeight?: number; /** * Height of expanded card * @defaultvalue 384 */ expandedCardHeight?: number; /** * Use to open the card in expanded format and not wait for the delay * @defaultvalue ExpandingCardMode.compact */ mode?: ExpandingCardMode; /** * Render function to populate compact content area */ onRenderCompactCard?: IRenderFunction; /** * Render function to populate expanded content area */ onRenderExpandedCard?: IRenderFunction; } export declare interface IExpandingCardState { firstFrameRendered: boolean; needsScroll: boolean; } /** * {@docCategory HoverCard} */ export declare interface IExpandingCardStyleProps extends IBaseCardStyleProps { /** * Height of the compact section of the card. */ compactCardHeight?: number; /** * Boolean flag that expanded card is in Expanded.mode === expanded && first frame was rendered. */ expandedCardFirstFrameRendered?: boolean; /** * Height of the expanded section of the card. */ expandedCardHeight?: number; /** * Whether the content of the expanded card overflows vertically. */ needsScroll?: boolean; } /** * {@docCategory HoverCard} */ export declare interface IExpandingCardStyles extends IBaseCardStyles { /** * Style for the main card element. */ compactCard?: IStyle; /** * Base Style for the expanded card content. */ expandedCard?: IStyle; /** * Style for the expanded card scroll content. */ expandedCardScroll?: IStyle; } /** * {@docCategory ExtendedPeoplePicker} */ export declare interface IExtendedPeoplePickerProps extends IBaseExtendedPickerProps { } /** * {@docCategory SelectedPeopleList} */ export declare interface IExtendedPersonaProps extends IPersonaProps { key?: React_2.Key; isValid: boolean; blockRecipientRemoval?: boolean; shouldBlockSelection?: boolean; canExpand?: boolean; isEditing?: boolean; } export declare interface IFabricProps extends React_2.HTMLAttributes, React_2.RefAttributes { componentRef?: IRefObject<{}>; /** * Overrides the root element type, defaults to `div`. */ as?: React_2.ElementType; /** * Injected by the `styled` HOC wrapper. */ theme?: ITheme; /** * Overrides the styles for the component. */ styles?: IStyleFunctionOrObject; /** * Applies the current body background specified in the theme to the root element. */ applyTheme?: boolean; /** * Applies the current body background specified in the theme to the body element. */ applyThemeToBody?: boolean; /** * Specifies the direction of the content. Will inject a `dir` attribute, and also ensure that the `rtl` flag of the * contextual theme object is set correctly so that css registered with merge-styles can be auto flipped correctly. */ dir?: 'rtl' | 'ltr' | 'auto'; /** * By default, the Fabric component has children selectors for button, input and textarea elements that apply the * style `fontFamily: 'inherit'`. This is done so the font family is consistent across all of these elements under a * Fabric component. However, this is expensive in style recalculation scenarios and it is not the responsibility of * the Fabric component to ensure that non-Fluent elements within it have these styles. * Setting this prop to true prevents the Fabric component from applying these children selectors. As long as only * v8 Fluent components are being used within it, no changes should be apparent since all Fluent components already * set the font family in their styles. * @defaultvalue false */ preventBlanketFontInheritance?: boolean; } export declare interface IFabricStyleProps extends IFabricProps { theme: ITheme; } export declare interface IFabricStyles { root: IStyle; bodyThemed: IStyle; } /** * {@docCategory Facepile} */ export declare interface IFacepile { } /** * {@docCategory Facepile} */ export declare interface IFacepilePersona extends React_2.ButtonHTMLAttributes { /** * Name of the person. */ personaName?: string; /** * Url to the image to use, should be a square aspect ratio and big enough to fit in the image area. */ imageUrl?: string; /** * The user's initials to display in the image area when there is no image. * @defaultvalue Derived from `personaName` */ imageInitials?: string; /** * Whether initials are calculated for phone numbers and number sequences. * Example: Set property to true to get initials for project names consisting of numbers only. * @defaultvalue false */ allowPhoneInitials?: boolean; /** * The background color when the user's initials are displayed. * @defaultvalue Derived from `personaName` */ initialsColor?: PersonaInitialsColor; /** * If provided, persona will be rendered with cursor:pointer and the handler will be * called on click. */ onClick?: (ev?: React_2.MouseEvent, persona?: IFacepilePersona) => void; /** * If provided, the handler will be called on mouse move. */ onMouseMove?: (ev?: React_2.MouseEvent, persona?: IFacepilePersona) => void; /** * If provided, the handler will be called when mouse moves out of the component. */ onMouseOut?: (ev?: React_2.MouseEvent, persona?: IFacepilePersona) => void; /** * Extra data - not used directly but can be handy for passing additional data to custom event * handlers. */ data?: any; /** * Optional keytip for this button that is only added when 'onClick' is defined for the persona */ keytipProps?: IKeytipProps; } /** * {@docCategory Facepile} */ export declare interface IFacepileProps extends React_2.ClassAttributes { /** * Optional callback to access the IFacepile interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * Whether the default tooltip (the persona name) is shown using the `title` prop. * Set this to false if you'd like to display a custom tooltip, for example using a custom renderer and TooltipHost * @defaultvalue true */ showTooltip?: boolean; /** * Call to provide customized styling that will layer on top of the variant rules. */ styles?: IStyleFunctionOrObject; /** * Theme provided by High-Order Component. */ theme?: ITheme; /** * Additional css class to apply to the Facepile * @defaultvalue undefined */ className?: string; /** * Array of IPersonaProps that define each Persona. */ personas: IFacepilePersona[]; /** * Personas to place in the overflow */ overflowPersonas?: IFacepilePersona[]; /** Maximum number of personas to show */ maxDisplayablePersonas?: number; /** Size to display the personas */ personaSize?: PersonaSize; /** ARIA label for persona list */ ariaDescription?: string; /** * Defines the aria label that the screen readers use when focus goes on a list of personas. */ ariaLabel?: string; /** Show add person button */ showAddButton?: boolean; /** Button properties for the add face button */ addButtonProps?: IButtonProps; /** * Deprecated at v0.70, use `overflowButtonProps` instead. * @deprecated Use `overflowButtonProps` instead. */ chevronButtonProps?: IButtonProps; /** * Properties for the overflow icon. It is used to provide an event handler for the overflow button. */ overflowButtonProps?: IButtonProps; /** * Type of overflow icon to use. If `overflowButtonType` is set to anything other than `none` * then we have to provide `overflowButtonProps` to render the overflow button. */ overflowButtonType?: OverflowButtonType; /** Optional custom renderer for the persona, gets called when there is one persona in personas array*/ onRenderPersona?: IRenderFunction; /** Optional custom renderer for the persona coins, gets called when there are multiple persona in personas array*/ onRenderPersonaCoin?: IRenderFunction; /** Optional custom renderer for the FacepileButton that renders each clickable Persona */ onRenderPersonaWrapper?: IRenderFunction; /** Method to access properties on the underlying Persona control */ getPersonaProps?: (persona: IFacepilePersona) => IPersonaSharedProps; } /** * {@docCategory Facepile} */ export declare interface IFacepileStyleProps { /** * Theme provided by High-Order Component. */ theme: ITheme; /** * Accept custom classNames */ className?: string; /** * Pixel value for spacing around button. Number value set in pixels */ spacingAroundItemButton?: number; } /** * {@docCategory Facepile} */ export declare interface IFacepileStyles { /** * Style for the root element. */ root: IStyle; addButton: IStyle; descriptiveOverflowButton: IStyle; itemContainer: IStyle; itemButton: IStyle; members: IStyle; member: IStyle; overflowButton: IStyle; overflowInitialsIcon: IStyle; screenReaderOnly: IStyle; } export { IFitContentToBoundsOptions } export { IFocusRectsContext } /** * {@docCategory Callout} */ export declare interface IFocusTrapCalloutProps extends ICalloutProps { /** * Optional props to be passed on to FocusTrapZone */ focusTrapProps?: IFocusTrapZoneProps; } /** * {@docCategory FocusTrapZone} */ export declare interface IFocusTrapZone { /** * Sets focus to a descendant in the Trap Zone. * See firstFocusableSelector and focusPreviouslyFocusedInnerElement for details. */ focus: () => void; } /** * {@docCategory FocusTrapZone} */ export declare interface IFocusTrapZoneProps extends React_2.HTMLAttributes, React_2.RefAttributes { /** * Optional callback to access the IFocusTrapZone interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * Whether to disable the FocusTrapZone's focus trapping behavior. * @defaultvalue false */ disabled?: boolean; /** * Sets the element to focus on when exiting the FocusTrapZone. * @defaultvalue The `element.target` that triggered the FTZ. */ elementToFocusOnDismiss?: HTMLElement; /** * Sets the aria-labelledby attribute. */ ariaLabelledBy?: string; /** * Whether clicks are allowed outside this FocusTrapZone. * @defaultvalue false */ isClickableOutsideFocusTrap?: boolean; /** * If false (the default), the trap zone will restore focus to the element which activated it * once the trap zone is unmounted or disabled. Set to true to disable this behavior. * @defaultvalue false */ disableRestoreFocus?: boolean; /** * @deprecated Use `disableRestoreFocus` (it has the same behavior and a clearer name). */ ignoreExternalFocusing?: boolean; /** * Whether the focus trap zone should force focus to stay inside of it. * @defaultvalue true */ forceFocusInsideTrap?: boolean; /** * Class name (not actual selector) for first focusable item. Do not append a dot. * Only applies if `focusPreviouslyFocusedInnerElement` is false. * @deprecated Use `firstFocusableTarget`, since it is more generic. `firstFocusableTarget` takes precedence if * supplied. */ firstFocusableSelector?: string | (() => string); /** * Either a full query selector for the first focusable element, or a function to select the focusable element * within the area directly. */ firstFocusableTarget?: string | ((element: HTMLElement) => HTMLElement | null); /** * Do not put focus onto the first element inside the focus trap zone. * @defaultvalue false */ disableFirstFocus?: boolean; /** * Specifies which descendant element to focus when `focus()` is called. * If false, use the first focusable descendant, filtered by the `firstFocusableSelector` property if present. * If true, use the element that was focused when the trap zone last had a focused descendant * (or fall back to the first focusable descendant if the trap zone has never been focused). * @defaultvalue false */ focusPreviouslyFocusedInnerElement?: boolean; /** * Puts aria-hidden=true on all non-ancestors of the current element, for screen readers. * In future versions of the library, this will be the default behavior. */ enableAriaHiddenSiblings?: boolean; } export { IFocusZone } export { IFocusZoneProps } export { IFontFace } /** * Props for a basic icon component which only supports font glyphs and can't be targeted by customizations. * {@docCategory Icon} */ export declare interface IFontIconProps extends React_2.HTMLAttributes { /** * The name of the icon to use from the icon font. * If string is empty, a placeholder icon will be rendered the same width as an icon. */ iconName?: string; /** * Custom class to style the icon. */ className?: string; } export { IFontStyles } export { IFontWeight } /** * A footer in a GroupedList. */ export declare type IFooterGroupedItem = { type: 'footer'; group: IGroup; }; export { iframeProperties } /** * Gap element interface * {@docCategory Shimmer} */ export declare interface IGap extends IShimmerElement { /** * Sets the height of the shimmer gap in pixels. * @defaultvalue 16px */ height?: number; /** * Gap width value. * @defaultvalue 10px */ width?: number | string; } /** * {@docCategory PeoplePicker} */ export declare interface IGenericItem { primaryText: string; imageInitials: string; ValidationState: ValidationState; } export { IGetFocusStylesOptions } /** * {@docCategory GroupedList} */ export declare interface IGroup { /** * Unique identifier for the group. */ key: string; /** * Display name for the group, rendered on the header. */ name: string; /** * Start index for the group within the given items. */ startIndex: number; /** * How many items should be rendered within the group. */ count: number; /** * Nested groups, if any. */ children?: IGroup[]; /** * Number indicating the level of nested groups. */ level?: number; /** * @deprecated At 1.0.0, selection state wil be controlled by the selection store only. */ isSelected?: boolean; /** * If all the items in the group are collapsed. */ isCollapsed?: boolean; /** * If the items within the group are summarized or showing all. */ isShowingAll?: boolean; /** * If drag/drop is enabled for the group header. */ isDropEnabled?: boolean; /** * Arbitrary data required to be preserved by the caller. */ data?: any; /** * Optional accessibility label (aria-label) attribute that will be stamped on to the element. * If none is specified, the arai-label attribute will contain the group name */ ariaLabel?: string; /** * Optional flag to indicate the group has more data to load than the current group count indicated. * This can be used to indicate that a plus should be rendered next to the group count in the header. */ hasMoreData?: boolean; } /** * {@docCategory GroupedList} */ export declare interface IGroupDividerProps { componentRef?: IRefObject<{}>; /** Boolean value to indicate if the component should render in compact mode. Set to false by default */ compact?: boolean; /** Callback to determine if a group has missing items and needs to load them from the server. */ isGroupLoading?: (group: IGroup) => boolean; /** Text shown on group headers to indicate the group is being loaded. */ loadingText?: string; /** The group to be rendered by the header. */ group?: IGroup; /** The index of the group. */ groupIndex?: number; /** The indent level of the group. */ groupLevel?: number; /** Defines the number of columns a group header needs to span in the case of a grid or treegrid */ ariaColSpan?: number; /** Defines an element's nesting depth in the current set of treeitems */ ariaLevel?: number; /** Defines the number of items in the current set of treeitems */ ariaSetSize?: number; /** Defines an element's number or position in the current set of treeitems */ ariaPosInSet?: number; /** Defines the number of items in the current set of grid items */ ariaRowCount?: number; /** Defines an element's number or position in the current set of grid items */ ariaRowIndex?: number; /** * Width corresponding to a single level. * This is multiplied by the groupLevel to get the full spacer width for the group. */ indentWidth?: number; /** If all items in the group are selected. */ selected?: boolean; /** * @deprecated Use `selected` instead. Deprecated at v.65.1. */ isSelected?: boolean; /** A reference to the viewport in which the header is rendered. */ viewport?: IViewport; /** The selection mode of the list the group lives within. */ selectionMode?: SelectionMode_2; /** Text to display for the group footer. */ footerText?: string; /** Text to display for the group "Show All" link. */ showAllLinkText?: string; /** Callback for when the group "Show All" link is clicked */ onToggleSummarize?: (group: IGroup) => void; /** Callback for when the group header is clicked. */ onGroupHeaderClick?: (group: IGroup) => void; /** Callback for when the "keyup" event is fired on the group header. */ onGroupHeaderKeyUp?: (ev: React_2.KeyboardEvent, group?: IGroup) => void; /** Callback for when the group is expanded or collapsed. */ onToggleCollapse?: (group: IGroup) => void; /** Callback for when the group is selected. */ onToggleSelectGroup?: (group: IGroup) => void; /** Determines if the group selection check box is shown for collapsed groups. */ isCollapsedGroupSelectVisible?: boolean; /** Override which allows the caller to provider a custom renderer for the GroupHeader title. */ onRenderTitle?: IRenderFunction; /** Override which allows the caller to provide a custom renderer for just the name. */ onRenderName?: IRenderFunction; /** Props for expand/collapse button * @deprecated Use {@link IGroupHeaderProps.expandButtonProps} instead. */ expandButtonProps?: React_2.HTMLAttributes; /** Stores parent group's children. */ groups?: IGroup[]; /** Custom className */ className?: string; /** Theme provided by the Higher Order Component */ theme?: ITheme; } /** * Union of GroupedList item types. */ export declare type IGroupedItem = IItemGroupedItem | IShowAllGroupedItem | IFooterGroupedItem | IHeaderGroupedItem; /** * {@docCategory GroupedList} */ export declare interface IGroupedList extends IList { /** * Ensures that the list content is updated. Call this in cases where the list props don't change, but the list still * needs to be re-evaluated. For example, if a sizer bar is adjusted and causes the list width to change, you can * call this to force a re-evaluation. Be aware that this can be an expensive operation and should be done sparingly. */ forceUpdate: () => void; /** * Toggles the collapsed state of all the groups in the list. */ toggleCollapseAll: (allCollapsed: boolean) => void; } /** * {@docCategory GroupedList} */ export declare interface IGroupedListProps extends React_2.ClassAttributes { /** * Theme that is passed in from Higher Order Component */ theme?: ITheme; /** * Style function to be passed in to override the themed or default styles */ styles?: IStyleFunctionOrObject; /** * Optional callback to access the IGroupedList interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** Optional class name to add to the root element. */ className?: string; /** Boolean value to indicate if the component should render in compact mode. Set to false by default */ compact?: boolean; /** Map of callback functions related to drag and drop functionality. */ dragDropEvents?: IDragDropEvents; /** helper to manage drag/drop across item and groups */ dragDropHelper?: IDragDropHelper; /** Event names and corresponding callbacks that will be registered to groups and rendered elements */ eventsToRegister?: { eventName: string; callback: (context: IDragDropContext, event?: any) => void; }[]; /** Optional override properties to render groups. */ groupProps?: IGroupRenderProps; /** Optional grouping instructions. */ groups?: IGroup[]; /** List of items to render. */ items: any[]; /** Optional properties to pass through to the FocusZone. */ focusZoneProps?: IFocusZoneProps; /** Optional properties to pass through to the list components being rendered. */ listProps?: IListProps; /** Optional properties to pass through to the root list component being rendered. */ rootListProps?: IListProps; /** Rendering callback to render the group items. */ onRenderCell: (nestingDepth?: number, item?: any, index?: number) => React_2.ReactNode; /** Override the default role for GroupedList. */ role?: string; /** Optional selection model to track selection state. */ selection?: ISelection; /** Controls how/if the list manages selection. */ selectionMode?: SelectionMode_2; /** Optional Viewport, provided by the parent component. */ viewport?: IViewport; /** Optional callback when the group expand state changes between all collapsed and at least one group is expanded. */ onGroupExpandStateChanged?: (isSomeGroupExpanded: boolean) => void; /** * boolean to control if pages containing unchanged items should be cached, this is a perf optimization * The same property in List.Props */ usePageCache?: boolean; /** * Optional callback to determine whether the list should be rendered in full, or virtualized. * Virtualization will add and remove pages of items as the user scrolls them into the visible range. * This benefits larger list scenarios by reducing the DOM on the screen, but can negatively affect performance for * smaller lists. * The default implementation will virtualize when this callback is not provided. */ onShouldVirtualize?: (props: IListProps) => boolean; /** * Optional function to override default group height calculation used by list virtualization. */ getGroupHeight?: (group: IGroup, groupIndex: number) => number; } export declare interface IGroupedListSectionProps extends React_2.ClassAttributes { /** GroupedList resolved class names */ groupedListClassNames?: IProcessedStyleSet; /** * Gets the component ref. */ componentRef?: () => void; /** Whether to render in compact mode */ compact?: boolean; /** Map of callback functions related to drag and drop functionality. */ dragDropEvents?: IDragDropEvents; /** helper to manage drag/drop across item rows and groups */ dragDropHelper?: IDragDropHelper; /** Event names and corresponding callbacks that will be registered to the group and the rendered elements */ eventsToRegister?: { eventName: string; callback: (context: IDragDropContext, event?: any) => void; }[]; /** Information to pass in to the group footer. */ footerProps?: IGroupFooterProps; /** Grouping item limit. */ getGroupItemLimit?: (group: IGroup) => number; /** Optional grouping instructions. */ groupIndex?: number; /** Optional group nesting level. */ groupNestingDepth?: number; /** Optional grouping instructions. */ group?: IGroup; /** Optional override properties to render groups. */ groupProps?: IGroupRenderProps; /** Information to pass in to the group header. */ headerProps?: IGroupHeaderProps; /** List of items to render. */ items: any[]; /** Optional list props to pass to list renderer. */ listProps?: IListProps; /** Rendering callback to render the group items. */ onRenderCell: (nestingDepth?: number, item?: any, index?: number) => React_2.ReactNode; /** Optional selection model to track selection state. */ selection?: ISelection; /** Controls how/if the details list manages selection. */ selectionMode?: SelectionMode_2; /** Information to pass in to the group Show All footer. */ showAllProps?: IGroupShowAllProps; /** Optional Viewport, provided by the parent component. */ viewport?: IViewport; /** Override for rendering the group header. */ onRenderGroupHeader?: IRenderFunction; /** Override for rendering the group Show All link. */ onRenderGroupShowAll?: IRenderFunction; /** Override for rendering the group footer. */ onRenderGroupFooter?: IRenderFunction; /** * Optional callback to determine whether the list should be rendered in full, or virtualized. * Virtualization will add and remove pages of items as the user scrolls them into the visible range. * This benefits larger list scenarios by reducing the DOM on the screen, but can negatively affect performance for * smaller lists. * The default implementation will virtualize when this callback is not provided. */ onShouldVirtualize?: (props: IListProps) => boolean; /** Stores parent group's children. */ groups?: IGroup[]; } export declare interface IGroupedListSectionState { isDropping?: boolean; isSelected?: boolean; } export declare interface IGroupedListState { selectionMode?: IGroupedListProps['selectionMode']; compact?: IGroupedListProps['compact']; groups?: IGroup[]; items?: IGroupedListProps['items']; listProps?: IGroupedListProps['listProps']; version: {}; } /** * {@docCategory GroupedList} */ export declare type IGroupedListStyleProps = Required> & Pick & { /** whether or not the group is collapsed */ isCollapsed?: boolean; /** Whether the group is in compact mode or not */ compact?: boolean; }; /** * {@docCategory GroupedList} */ export declare interface IGroupedListStyles { root: IStyle; group: IStyle; groupIsDropping: IStyle; } export declare interface IGroupedListV2 { scrollToIndex(index: number, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode): void; getStartItemIndexInView(): number; } export declare interface IGroupedListV2Props extends IGroupedListProps { /** Ref to the underlying List control */ listRef?: React_2.Ref; /** Ref to the underlying List control */ groupedListRef?: React_2.Ref; /** * For perf reasons, GroupedList avoids re-rendering unless certain props have changed. * Use this prop if you need to force it to re-render in other cases. You can pass any type of * value as long as it only changes (`===` comparison) when a re-render should happen. */ version?: {}; /** * For perf reasons, GroupedList avoids re-rendering unless certain props have changed. * Use this prop if you need to force it to re-render when a group has expanded or collapsed. * You can pass any type of value as long as it only changes (`===` comparison) * when a re-render should happen. */ groupExpandedVersion?: {}; /** Rendering callback to render the group items. */ onRenderCell: (nestingDepth?: number, item?: any, index?: number, group?: IGroup) => React_2.ReactNode; } export declare interface IGroupedListV2State { selectionMode?: IGroupedListV2Props['selectionMode']; compact?: IGroupedListV2Props['compact']; groups?: IGroup[]; items?: IGroupedListV2Props['items']; listProps?: IGroupedListV2Props['listProps']; version: {}; groupExpandedVersion: {}; } /** * {@docCategory GroupedList} */ export declare interface IGroupFooterProps extends IGroupDividerProps { /** * Style function to be passed in to override the themed or default styles */ styles?: IStyleFunctionOrObject; } /** * {@docCategory GroupedList} */ export declare type IGroupFooterStyleProps = Required> & Pick & { /** Whether the footer is collapsed */ isCollapsed?: boolean; }; /** * {@docCategory GroupedList} */ export declare interface IGroupFooterStyles { root: IStyle; } /** * {@docCategory GroupedList} */ export declare interface IGroupHeaderCheckboxProps { checked: boolean; theme?: ITheme; } /** * {@docCategory GroupedList} */ export declare interface IGroupHeaderProps extends IGroupDividerProps { /** Style function to be passed in to override the themed or default styles */ styles?: IStyleFunctionOrObject; /** GroupedList id for aria-controls */ groupedListId?: string; /** Native props for the GroupHeader expand and collapse button */ expandButtonProps?: React_2.HTMLAttributes; /** Defines the name of a custom icon to be used for group headers. If not set, the default icon will be used */ expandButtonIcon?: string; /** Native props for the GroupHeader select all button */ selectAllButtonProps?: React_2.HTMLAttributes; /** * If provided, can be used to render a custom checkbox */ onRenderGroupHeaderCheckbox?: IRenderFunction; /** * Whether to use fast icon and check components. The icons can't be targeted by customization * but are still customizable via class names. * @defaultvalue true */ useFastIcons?: boolean; } /** * {@docCategory GroupedList} */ export declare type IGroupHeaderStyleProps = Required> & Pick & { /** Is Header collapsed */ isCollapsed?: boolean; /** Whether the group header is in compact mode or not */ compact?: boolean; }; /** * {@docCategory GroupedList} */ export declare interface IGroupHeaderStyles { root: IStyle; groupHeaderContainer: IStyle; headerCount: IStyle; check: IStyle; dropIcon: IStyle; expand: IStyle; expandIsCollapsed: IStyle; title: IStyle; } /** * {@docCategory GroupedList} */ export declare interface IGroupRenderProps { /** Boolean indicating if all groups are in collapsed state. */ isAllGroupsCollapsed?: boolean; /** Grouping item limit. */ getGroupItemLimit?: (group: IGroup) => number; /** Callback for when all groups are expanded or collapsed. */ onToggleCollapseAll?: (isAllCollapsed: boolean) => void; /** Information to pass in to the group header. */ headerProps?: IGroupHeaderProps; /** Information to pass in to the group Show all footer. */ showAllProps?: IGroupShowAllProps; /** Information to pass in to the group footer. */ footerProps?: IGroupFooterProps; /** * Override which allows the caller to provide a custom header. */ onRenderHeader?: IRenderFunction; /** * Override which allows the caller to provide a custom Show All link. */ onRenderShowAll?: IRenderFunction; /** * Override which allows the caller to provide a custom footer. */ onRenderFooter?: IRenderFunction; /** * Flag to indicate whether to ignore the collapsing icon on header. * @defaultvalue CollapseAllVisibility.visible */ collapseAllVisibility?: CollapseAllVisibility; /** * Boolean indicating if empty groups are shown * @defaultvalue false */ showEmptyGroups?: boolean; /** * Override which allows the caller to provide a custom aria role */ role?: string; } /** * {@docCategory GroupedList} */ export declare interface IGroupShowAllProps extends IGroupDividerProps { /** * Style function to be passed in to override the themed or default styles */ styles?: IStyleFunctionOrObject; /** * The Show All link text. * @defaultvalue 'Show All' */ showAllLinkText?: string; } /** * {@docCategory GroupedList} */ export declare type IGroupShowAllStyleProps = Required>; /** * {@docCategory GroupedList} */ export declare interface IGroupShowAllStyles { root: IStyle; } /** * {@docCategory GroupedList} */ export declare interface IGroupSpacerProps { /** * @deprecated Unused. Will be removed in \>= 7.0 */ theme?: ITheme; /** * @deprecated Unused. Will be removed in \>= 7.0 */ styles?: IStyleFunctionOrObject; /** Count of spacer(s) */ count: number; /** How much to indent */ indentWidth?: number; /** Override the default role (presentation) */ role?: string; } /** * {@docCategory GroupedList} * @deprecated Unused. Use `IGroupSpacerProps.indentWidth`. Will be removed in \>= 7.0. */ export declare type IGroupSpacerStyleProps = Required> & { width?: number; }; /** * {@docCategory GroupedList} * @deprecated Unused. Will be removed in \>= 7.0. */ export declare interface IGroupSpacerStyles { root: IStyle; } /** * A header in a GroupedList. */ export declare type IHeaderGroupedItem = { type: 'header'; group: IGroup; groupId: string; groupIndex: number; }; /** * {@docCategory HoverCard} */ export declare interface IHoverCard { /** * Public `dismiss` method to be used through `componentRef` of the HoverCard. * Boolean argument controls if the dismiss happens with a timeout delay. */ dismiss: (withTimeOut?: boolean) => void; } /** * HoverCard component props. * {@docCategory HoverCard} */ export declare interface IHoverCardProps extends React_2.HTMLAttributes { /** * Optional callback to access the IHoverCardHost interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * Additional CSS class(es) to apply to the HoverCard root element. */ className?: string; /** * Length of card dismiss delay. A min number is necessary for pointer to hop between target and card * @defaultvalue 100 */ cardDismissDelay?: number; /** * Length of compact card delay * @defaultvalue 500 */ cardOpenDelay?: number; /** * Time in ms when expanded card should open after compact card * @defaultvalue 1500 */ expandedCardOpenDelay?: number; /** * Additional ExpandingCard props to pass through HoverCard like renderers, target. gapSpace etc. * Used along with 'type' prop set to HoverCardType.expanding. * Reference detail properties in ICardProps and IExpandingCardProps. */ expandingCardProps?: IExpandingCardProps; /** * Enables instant open of the full card upon click * @defaultvalue false */ instantOpenOnClick?: boolean; /** * Callback when card becomes visible */ onCardVisible?: () => void; /** * Callback when card hides */ onCardHide?: () => void; /** * HotKey used for opening the HoverCard when tabbed to target. * @defaultvalue 'KeyCodes.c' */ openHotKey?: KeyCodes; /** * Additional PlainCard props to pass through HoverCard like renderers, target, gapSpace etc. * Used along with 'type' prop set to HoverCardType.plain. * See for more details ICardProps and IPlainCardProps interfaces. */ plainCardProps?: IPlainCardProps; /** * Whether or not to mark the container as described by the hover card. * If not specified, the caller should mark as element as described by the hover card id. */ setAriaDescribedBy?: boolean; /** * Callback when visible card is expanded. */ onCardExpand?: () => void; /** * Set to true to set focus on the first focusable element in the card. Works in pair with the 'trapFocus' prop. * @defaultvalue false */ setInitialFocus?: boolean; /** * Should block hover card or not */ shouldBlockHoverCard?: () => void; /** * If true disables Card dismiss upon mouse leave, so that card sticks around. * @defaultvalue false */ sticky?: boolean; /** * Custom styles for this component */ styles?: IStyleFunctionOrObject; /** * Optional target element to tag hover card on. If not provided and using HoverCard as a wrapper, don't set the * 'data-is-focusable=true' attribute to the root of the wrapped child. * If no target is given, HoverCard will use its root as a target and become the focusable element with a * focus listener attached to it. */ target?: HTMLElement | string | null; /** * This prop is to separate the target to anchor hover card from the target to attach event listener. * If set, this prop separates the target to anchor the hover card from the target to attach the event listener. * When no `eventListenerTarget` given, HoverCard will use `target` prop or its root to set event listener. */ eventListenerTarget?: HTMLElement | string | null; /** * Theme provided by higher order component. */ theme?: ITheme; /** * Set to true if you want to render the content of the HoverCard in a FocusTrapZone for accessibility reasons. * Optionally 'setInitialFocus' prop can be set to true to move focus inside the FocusTrapZone. */ trapFocus?: boolean; /** * Type of the hover card to render. * @defaultvalue HoverCardType.expanding */ type?: HoverCardType; } export declare interface IHoverCardState { isHoverCardVisible?: boolean; mode?: ExpandingCardMode; openMode?: OpenCardMode; } /** * {@docCategory HoverCard} */ export declare interface IHoverCardStyleProps { /** * Theme provided by High-Order Component. */ theme: ITheme; /** * Optional className(s) for the host div of HoverCard. */ className?: string; } /** * {@docCategory HoverCard} */ export declare interface IHoverCardStyles { /** * Style for the host element in the default enabled, non-toggled state. */ host?: IStyle; } export declare interface IHSL { /** Hue, range 0-359. */ h: number; /** Saturation, range 0-100. */ s: number; /** Lightness, range 0-100. */ l: number; } export declare interface IHSV { /** Hue, range 0-359. */ h: number; /** Saturation, range 0-100. */ s: number; /** Value, range 0-100. */ v: number; } export declare interface IIconContent { children?: string | JSX.Element; iconClassName?: string; fontFamily?: string; mergeImageProps?: boolean; } export { IIconOptions } /** * {@docCategory Icon} */ export declare interface IIconProps extends IBaseProps, React_2.HTMLAttributes { /** * The name of the icon to use from the icon font. * If string is empty, a placeholder icon will be rendered the same width as an icon. */ iconName?: string; /** * The aria label of the icon for the benefit of screen readers. * @deprecated Use the native prop `aria-label` */ ariaLabel?: string; /** * The type of icon to render (image or icon font). * @deprecated Inferred based on the presence of `imageProps` */ iconType?: IconType; /** * If rendering an image icon, these props will be passed to the Image component. */ imageProps?: IImageProps; /** * If rendering an image icon, this component will be rendered in the event that loading the image fails. */ imageErrorAs?: React_2.ComponentType; /** * Gets the styles for an Icon. */ styles?: IStyleFunctionOrObject; theme?: ITheme; } export { IIconRecord } export declare interface IIconState { imageLoadError: boolean; } /** * {@docCategory Icon} */ export declare interface IIconStyleProps { className?: string; iconClassName?: string; isPlaceholder: boolean; isImage: boolean; styles?: Partial; theme?: ITheme; } /** * {@docCategory Icon} */ export declare interface IIconStyles { root?: IStyle; /** * @deprecated Use `root`. */ imageContainer?: IStyle; } export { IIconSubset } export { IIconSubsetRecord } /** * {@docCategory Image} */ export declare interface IImage { } /** * Props for a basic image icon component which doesn't directly provide image load error handling * and can't be targeted by customizations. * {@docCategory Icon} */ export declare interface IImageIconProps extends React_2.HTMLAttributes { /** * Props passed to the Image component. */ imageProps: IImageProps; /** * Custom class to style the icon. */ className?: string; } /** * {@docCategory Image} */ export declare interface IImageProps extends React_2.ImgHTMLAttributes, React_2.RefAttributes { /** * Call to provide customized styling that will layer on top of the variant rules */ styles?: IStyleFunctionOrObject; /** * Theme provided by HOC. */ theme?: ITheme; /** * Additional css class to apply to the Component * @defaultvalue undefined */ className?: string; /** * If true, fades the image in when loaded. * @defaultvalue true */ shouldFadeIn?: boolean; /** * If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until * it is successfully loaded. This disables shouldFadeIn. * @defaultvalue false; */ shouldStartVisible?: boolean; /** * Used to determine how the image is scaled and cropped to fit the frame. * * @defaultvalue If both dimensions are provided, then the image is fit using `ImageFit.scale`. * Otherwise, the image won't be scaled or cropped. */ imageFit?: ImageFit; /** * @deprecated Not used. Use `onLoadingStateChange` and re-render the Image with a different src. */ errorSrc?: string; /** * If true, the image frame will expand to fill its parent container. */ maximizeFrame?: boolean; /** * Optional callback method for when the image load state has changed. * The 'loadState' parameter indicates the current state of the Image. */ onLoadingStateChange?: (loadState: ImageLoadState) => void; /** * Specifies the cover style to be used for this image. If not * specified, this will be dynamically calculated based on the * aspect ratio for the image. */ coverStyle?: ImageCoverStyle; /** * Allows for browser-level image lazy-loading. */ loading?: 'lazy' | 'eager'; } export declare interface IImageState { loadState?: ImageLoadState; } /** * {@docCategory Image} */ export declare interface IImageStyleProps { /** * Accept theme prop. */ theme: ITheme; /** * Accept custom classNames */ className?: string; /** * If true, the image frame will expand to fill its parent container. */ maximizeFrame?: boolean; /** * If true, the image is loaded */ isLoaded?: boolean; /** * If true, fades the image in when loaded. * @defaultvalue true */ shouldFadeIn?: boolean; /** * If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until * it is successfully loaded. This disables shouldFadeIn. * @defaultvalue false; */ shouldStartVisible?: boolean; /** * If true the image is coverStyle landscape instead of portrait */ isLandscape?: boolean; /** * ImageFit booleans for center, cover, contain, centerContain, centerCover, none */ isCenter?: boolean; isContain?: boolean; isCover?: boolean; isCenterContain?: boolean; isCenterCover?: boolean; isNone?: boolean; /** * if true image load is in error */ isError?: boolean; /** * if true, imageFit is undefined */ isNotImageFit?: boolean; /** * Image width value */ width?: number | string; /** * Image height value */ height?: number | string; } /** * {@docCategory Image} */ export declare interface IImageStyles { /** * Style set for the root div element. */ root: IStyle; /** * Style set for the img element. */ image: IStyle; } /** * Pickers' input props interface * {@docCategory Pickers} */ export declare interface IInputProps extends React_2.InputHTMLAttributes { /** * Screen reader label to apply to an input element. */ 'aria-label'?: string; /** * The default value to be visible when the autofill first created. * This is different than placeholder text because the placeholder text will disappear and re-appear. This * text persists until deleted or changed. */ defaultVisibleValue?: string; } /** * An item rendered in a GroupedList. */ export declare type IItemGroupedItem = { type: 'item'; group: IGroup; item: any; itemIndex: number; }; export declare interface IKeytipConfig { keytips: IKeytipConfigItem[]; } export declare interface IKeytipConfigItem { /** * Key Sequence for this keytip only * If sequence is not defined it will be derived from the content string */ sequence?: string; /** * Content for the keytip */ content: string; /** * Identifier for the keytip, to be used to access in the configMap */ id: string; /** * Optional props in IKeytipProps */ optionalProps?: Partial; /** * Children keytips of this keytip */ children?: IKeytipConfigItem[]; } export declare interface IKeytipConfigMap { [id: string]: IKeytipProps; } export declare interface IKeytipDataProps { /** * IKeytipProps to create from this KeytipData * If no keytipProps are defined, a keytip won't be registered */ keytipProps?: IKeytipProps; /** * String to add to the aria-describedby generated by this KeytipData * It will prepend this string to the generated aria-describedby property */ ariaDescribedBy?: string; /** * T/F if this keytip should be disabled upon creation */ disabled?: boolean; } /** * {@docCategory Keytips} */ export declare interface IKeytipLayer { } /** * {@docCategory Keytips} */ export declare interface IKeytipLayerProps extends React_2.ClassAttributes { /** * Optional callback to access the KeytipLayer component. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * String to put inside the layer to be used for the aria-describedby for the component with the keytip * Should be one of the starting sequences */ content: string; /** * List of key sequences that will start keytips mode */ keytipStartSequences?: IKeytipTransitionKey[]; /** * List of key sequences that execute the return functionality in keytips * (going back to the previous level of keytips) */ keytipReturnSequences?: IKeytipTransitionKey[]; /** * List of key sequences that will exit keytips mode */ keytipExitSequences?: IKeytipTransitionKey[]; /** * Callback function triggered when keytip mode is exited. * ev is the Mouse or Keyboard Event that triggered the exit, if any. */ onExitKeytipMode?: (ev?: React_2.KeyboardEvent | React_2.MouseEvent) => void; /** * Callback function triggered when keytip mode is entered * @param transitionKey - The key sequence that triggered keytip mode, if any. */ onEnterKeytipMode?: (transitionKey?: IKeytipTransitionKey) => void; /** * (Optional) Call to provide customized styling. */ styles?: IStyleFunctionOrObject; } export declare interface IKeytipLayerState { inKeytipMode: boolean; keytips: IKeytipProps[]; visibleKeytips: IKeytipProps[]; } /** * {@docCategory Keytips} */ export declare interface IKeytipLayerStyleProps { } /** * {@docCategory Keytips} */ export declare interface IKeytipLayerStyles { innerContent: IStyle; } /** * {@docCategory Keytips} */ export declare interface IKeytipProps { /** * Content to put inside the keytip */ content: string; /** * Theme for the component */ theme?: ITheme; /** * T/F if the corresponding control for this keytip is disabled */ disabled?: boolean; /** * T/F if the keytip is visible */ visible?: boolean; /** * Function to call when this keytip is activated. * 'executeTarget' is the DOM element marked with 'data-ktp-execute-target'. * 'target' is the DOM element marked with 'data-ktp-target'. */ onExecute?: (executeTarget: HTMLElement | null, target: HTMLElement | null) => void; /** * Function to call when the keytip is the currentKeytip and a return sequence is pressed. * 'executeTarget' is the DOM element marked with 'data-ktp-execute-target'. * 'target' is the DOM element marked with 'data-ktp-target'. */ onReturn?: (executeTarget: HTMLElement | null, target: HTMLElement | null) => void; /** * Array of KeySequences which is the full key sequence to trigger this keytip * Should not include initial 'start' key sequence */ keySequences: string[]; /** * Full KeySequence of the overflow set button, will be set automatically if this keytip is inside an overflow */ overflowSetSequence?: string[]; /** * ICalloutProps to pass to the callout element */ calloutProps?: ICalloutProps; /** * Optional styles for the component. */ styles?: IStyleFunctionOrObject; /** * Offset x and y for the keytip, added from the top-left corner * By default the keytip will be anchored to the bottom-center of the element */ offset?: Point; /** * Whether or not this keytip will have children keytips that are dynamically created (DOM is generated on * keytip activation). Common cases are a Pivot or Modal. */ hasDynamicChildren?: boolean; /** * Whether or not this keytip belongs to a component that has a menu * Keytip mode will stay on when a menu is opened, even if the items in that menu have no keytips */ hasMenu?: boolean; /** * Whether or not this keytip belongs to a component that is in an overflow menu * and also has a menu */ hasOverflowSubMenu?: boolean; } /** * Props to style Keytip component * {@docCategory Keytips} */ export declare interface IKeytipStyleProps { /** * The theme for the keytip. */ theme: ITheme; /** * Whether the keytip is disabled or not. */ disabled?: boolean; /** * T/F if the keytip is visible */ visible?: boolean; } /** * {@docCategory Keytips} */ export declare interface IKeytipStyles { /** * Style for the div container surrounding the keytip content. */ container: IStyle; /** * Style for the keytip content element. */ root: IStyle; } export declare interface IKeytipTransitionKey { key: string; modifierKeys?: KeytipTransitionModifier[]; } declare interface IKeytipTreeNode { /** * ID of the DOM element. Needed to locate the correct keytip in the KeytipLayer's 'keytip' state array */ id: string; /** * KeySequence that invokes this KeytipTreeNode's onExecute function */ keySequences: string[]; /** * Overflow set sequence for this keytip */ overflowSetSequence?: string[]; /** * Control's execute function for when keytip is invoked, passed from the component to the Manager in the IKeytipProps */ onExecute?: (executeTarget: HTMLElement | null, target: HTMLElement | null) => void; /** * Function to execute when we return to this keytip */ onReturn?: (executeTarget: HTMLElement | null, target: HTMLElement | null) => void; /** * List of keytip IDs that should become visible when this keytip is pressed, can be empty */ children: string[]; /** * Parent keytip ID */ parent: string; /** * Whether or not this keytip will have children keytips that are dynamically created (DOM is generated on * keytip activation). Common cases are keytips in a menu or modal. */ hasDynamicChildren?: boolean; /** * Whether or not this keytip belongs to a component that has a menu * Keytip mode will stay on when a menu is opened, even if the items in that menu have no keytips */ hasMenu?: boolean; /** * T/F if this keytip's component is currently disabled */ disabled?: boolean; /** * T/F if this keytip is a persisted keytip */ persisted?: boolean; /** * Whether or not this keytip belongs to a component that is in an overflow menu * and also has a menu */ hasOverflowSubMenu?: boolean; } /** * {@docCategory Label} */ export declare interface ILabel { } /** * {@docCategory Label} */ export declare interface ILabelProps extends React_2.LabelHTMLAttributes { /** * Render the root element as another type. */ as?: IComponentAs>; /** * Optional callback to access the ILabel interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * Whether the associated form field is required or not * @defaultvalue false */ required?: boolean; /** * Renders the label as disabled. */ disabled?: boolean; /** * Theme provided by HOC. */ theme?: ITheme; /** * Styles for the label. */ styles?: IStyleFunctionOrObject; } /** * {@docCategory Label} */ export declare interface ILabelStyleProps { /** * */ theme: ITheme; className?: string; disabled?: boolean; required?: boolean; } /** * {@docCategory Label} */ export declare interface ILabelStyles { /** * Styles for the root element. */ root: IStyle; } /** * {@docCategory Layer} */ export declare interface ILayer { } /** * Represents a mounted layer host, and provides access to its `hostId` and root element. */ export declare interface ILayerHost { /** * The hostId for this host, to be propagatd to layers using Customizer. */ hostId: string; /** * An element ref to the layer host's content root. * This is the element to which layers will be added. */ rootRef: React_2.MutableRefObject; /** * Notifies the layer host that layers may have been added or removed within its root element. */ notifyLayersChanged(): void; } export declare interface ILayerHostProps extends React_2.HTMLAttributes { /** * Optional callback to access the ILayerHost interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * Defines the id for the layer host that Layers can target (using the hostId property.) */ id?: string; } /** * {@docCategory Layer} */ export declare interface ILayerProps extends React_2.HTMLAttributes, React_2.RefAttributes { /** * Optional callback to access the ILayer interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: IRefObject; /** * Call to provide customized styling that will layer on top of the variant rules */ styles?: IStyleFunctionOrObject; /** * Theme provided by HOC. */ theme?: ITheme; /** * Additional css class to apply to the Layer * @defaultvalue undefined */ className?: string; /** * Callback for when the layer is mounted. * @deprecated Use `onLayerDidMount`. */ onLayerMounted?: () => void; /** * Callback for when the layer is mounted. */ onLayerDidMount?: () => void; /** * Callback for when the layer is unmounted. */ onLayerWillUnmount?: () => void; /** * The optional id property provided on a LayerHost that this Layer should render within. The LayerHost does * not need to be immediately available but once has been rendered, and if missing, we'll avoid trying * to render the Layer content until the host is available. If an id is not provided, we will render the Layer * content in a fixed position element rendered at the end of the document. */ hostId?: string; /** * When enabled, Layer allows events to bubble up from Layer content. * Traditionally Layer has not had this behavior. This prop preserves backwards compatibility by * default while allowing users to opt in to the new event bubbling functionality. */ eventBubblingEnabled?: boolean; /** * Whether the layer should be added as the first child of the host. * If true, the layer will be inserted as the first child of the host * By default, the layer will be appended at the end to the host */ insertFirst?: boolean; /** * Props bag to forward to the Fabric component to allow customization of its behavior. */ fabricProps?: IFabricProps; } /** * {@docCategory Layer} */ export declare interface ILayerStyleProps { /** * Accept theme prop. */ theme: ITheme; /** * Accept custom classNames */ className?: string; /** * Check if Host */ isNotHost?: boolean; } /** * {@docCategory Layer} */ export declare interface ILayerStyles { /** * Style for the root element when fixed. */ root?: IStyle; /** * Style for the Fabric component. */ content?: IStyle; } /** * Line element interface * {@docCategory Shimmer} */ export declare interface ILine extends IShimmerElement { /** * Sets the height of the shimmer line in pixels. * @defaultvalue 16px */ height?: number; /** * Line width value. * @defaultvalue 100% */ width?: number | string; } /** * {@docCategory Link} */ export declare interface ILink { /** Sets focus to the link. */ focus(): void; } /** * @deprecated No longer used. */ export declare interface ILinkHTMLAttributes extends React_2.HTMLAttributes { type?: string; download?: any; href?: string; hrefLang?: string; media?: string; rel?: string; target?: string; autoFocus?: boolean; disabled?: boolean; form?: string; formAction?: string; formEncType?: string; formMethod?: string; formNoValidate?: boolean; formTarget?: string; name?: string; value?: string | string[] | number; /** Any other props for HTMLElements or a React component passed to `as` */ [key: string]: any; } /** * Link component props. All built-in props for `` and `