ComponentRef values should use public interfaces

common/changes/office-ui-fabric-react/refs_2018-04-02-02-53.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Updating various `componentRef` values to refer to the component public interfaces, rather than to the components themselves.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "dzearing@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx

@@ -4,7 +4,7 @@ import { BaseComponent, classNamesFunction, createRef } from '../../Utilities';
 import { DefaultPalette } from '../../Styling';
 
 // Component Dependencies
-import { PositioningContainer } from './PositioningContainer/PositioningContainer';
+import { PositioningContainer, IPositioningContainer } from './PositioningContainer/index';
 import { Beak } from './Beak/Beak';
 
 // Coachmark
@@ -82,7 +82,7 @@ export class Coachmark extends BaseComponent<ICoachmarkTypes, ICoachmarkState> {
    */
   private _entityInnerHostElement = createRef<HTMLDivElement>();
   private _translateAnimationContainer = createRef<HTMLDivElement>();
-  private _positioningContainer = createRef<PositioningContainer>();
+  private _positioningContainer = createRef<IPositioningContainer>();
 
   constructor(props: ICoachmarkTypes) {
     super(props);

packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  IPositioningContainer,
   IPositioningContainerTypes
 } from './PositioningContainer.types';
 import { getClassNames } from './PositioningContainer.styles';
@@ -57,7 +58,9 @@ export interface IPositioningContainerState {
   heightOffset?: number;
 }
 
-export class PositioningContainer extends BaseComponent<IPositioningContainerTypes, IPositioningContainerState> {
+export class PositioningContainer
+  extends BaseComponent<IPositioningContainerTypes, IPositioningContainerState>
+  implements PositioningContainer {
 
   public static defaultProps: IPositioningContainerTypes = {
     preventDismissOnScroll: false,

packages/office-ui-fabric-react/src/components/ComboBox/VirtualizedComboBox.tsx

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { BaseComponent, createRef } from '../../Utilities';
 import { ComboBox } from './ComboBox';
 import { IComboBoxProps, IComboBox } from './ComboBox.types';
-import { List } from '../../List';
+import { IList, List } from '../../List';
 import { ISelectableOption } from '../../utilities/selectableOption/SelectableOption.types';
 
 export class VirtualizedComboBox extends BaseComponent<IComboBoxProps, {}> implements IComboBox {
   /** The combo box element */
   private _comboBox = createRef<IComboBox>();
   /** The virtualized list element */
-  private _list = createRef<List>();
+  private _list = createRef<IList>();
 
   public dismissMenu(): void {
     if (this._comboBox.value) {

packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx

@@ -9,7 +9,7 @@ import {
   getNativeProps
 } from '../../Utilities';
 import { ICommandBar, ICommandBarProps, ICommandBarItemProps } from './CommandBar.types';
-import { FocusZone, FocusZoneDirection } from '../../FocusZone';
+import { IFocusZone, FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { ContextualMenu, IContextualMenuProps, IContextualMenuItem } from '../../ContextualMenu';
 import { hasSubmenu } from '../../utilities/contextualMenu/index';
 import { DirectionalHint } from '../../common/DirectionalHint';
@@ -52,7 +52,7 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
   private _commandSurface = createRef<HTMLDivElement>();
   private _commandBarRegion = createRef<HTMLDivElement>();
   private _farCommandSurface = createRef<HTMLDivElement>();
-  private _focusZone = createRef<FocusZone>();
+  private _focusZone = createRef<IFocusZone>();
   private _overflow = createRef<HTMLDivElement>();
 
   private _id: string;
@@ -194,7 +194,7 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
     let tooltipContent = '';
 
     if (item.title) {
-        tooltipContent = item.title;
+      tooltipContent = item.title;
     }
 
     const hasIcon = !!item.icon || !!item.iconProps;
@@ -211,8 +211,8 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
           className={ className }
           href={ item.disabled ? undefined : item.href }
           onClick={ item.onClick }
-          title={''}
-          aria-disabled={item.inactive}
+          title={ '' }
+          aria-disabled={ item.inactive }
           data-command-key={ itemKey }
           aria-haspopup={ hasSubmenu(item) }
           role='menuitem'
@@ -237,8 +237,8 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
           id={ this._id + item.key }
           className={ className }
           onClick={ this._onItemClick(item) }
-          title={''}
-          aria-disabled={item.inactive}
+          title={ '' }
+          aria-disabled={ item.inactive }
           data-command-key={ itemKey }
           aria-haspopup={ hasSubmenu(item) }
           aria-expanded={ hasSubmenu(item) ? expandedMenuItemKey === item.key : undefined }
@@ -267,8 +267,8 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
           { ...getNativeProps(item, divProperties.concat(['disabled'])) }
           id={ this._id + item.key }
           className={ className }
-          title={''}
-          aria-disabled={item.inactive}
+          title={ '' }
+          aria-disabled={ item.inactive }
           data-command-key={ itemKey }
           aria-haspopup={ hasSubmenu(item) }
           aria-label={ ariaLabel }

packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DetailsHeader } from './DetailsHeader';
+import { IDetailsHeader, DetailsHeader } from './DetailsHeader';
 import { DetailsListLayoutMode, IColumn } from './DetailsList.types';
 import { Selection, SelectionMode } from '../../utilities/selection/index';
 import { EventGroup, createRef } from '../../Utilities';
@@ -37,7 +37,7 @@ describe('DetailsHeader', () => {
       size: number,
       index: number
     ): { size: number; index: number; } => lastResize = { size, index };
-    const headerRef = createRef<any>();
+    const headerRef = createRef<IDetailsHeader>();
 
     const columns = [];
     const wrapper = mount(

packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx

@@ -23,8 +23,9 @@ import {
 } from '../DetailsList/DetailsList.types';
 import { DetailsHeader, IDetailsHeader, SelectAllVisibility, IDetailsHeaderProps } from '../DetailsList/DetailsHeader';
 import { DetailsRow, IDetailsRowProps } from '../DetailsList/DetailsRow';
-import { FocusZone, FocusZoneDirection } from '../../FocusZone';
+import { IFocusZone, FocusZone, FocusZoneDirection } from '../../FocusZone';
 import {
+  ISelectionZone,
   IObjectWithKey,
   ISelection,
   Selection,
@@ -33,8 +34,8 @@ import {
 } from '../../utilities/selection/index';
 
 import { DragDropHelper } from '../../utilities/dragdrop/DragDropHelper';
-import { GroupedList } from '../../GroupedList';
-import { List, IListProps } from '../../List';
+import { IGroupedList, GroupedList } from '../../GroupedList';
+import { IList, List, IListProps } from '../../List';
 import { withViewport } from '../../utilities/decorators/withViewport';
 import { GetGroupCount } from '../../utilities/groupedList/GroupedListUtility';
 
@@ -73,10 +74,10 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
   // References
   private _root = createRef<HTMLDivElement>();
   private _header = createRef<IDetailsHeader>();
-  private _groupedList = createRef<GroupedList>();
-  private _list = createRef<List>();
-  private _focusZone = createRef<FocusZone>();
-  private _selectionZone = createRef<SelectionZone>();
+  private _groupedList = createRef<IGroupedList>();
+  private _list = createRef<IList>();
+  private _focusZone = createRef<IFocusZone>();
+  private _selectionZone = createRef<ISelectionZone>();
 
   private _selection: ISelection;
   private _activeRows: { [key: string]: DetailsRow };

packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx

@@ -7,7 +7,7 @@ import {
 } from 'office-ui-fabric-react/lib/Utilities';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
-import { DetailsList, IColumn } from 'office-ui-fabric-react/lib/DetailsList';
+import { IDetailsList, DetailsList, IColumn } from 'office-ui-fabric-react/lib/DetailsList';
 import './DetailsList.Grouped.Example.scss';
 
 const _columns = [
@@ -58,7 +58,7 @@ const _items = [
 export class DetailsListGroupedExample extends BaseComponent<{}, {
   items: {}[];
 }> {
-  private _root = createRef<DetailsList>();
+  private _root = createRef<IDetailsList>();
 
   constructor(props: {}) {
     super(props);

packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx

@@ -7,7 +7,7 @@ import { Label } from '../../Label';
 import { CommandButton } from '../../Button';
 import { Panel } from '../../Panel';
 import { Icon } from '../../Icon';
-import { FocusZone, FocusZoneDirection } from '../../FocusZone';
+import { IFocusZone, FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { withResponsiveMode, ResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
 import { IWithResponsiveModeState } from '../../utilities/decorators/withResponsiveMode';
 import {
@@ -48,9 +48,8 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
   private static Option = 'option';
 
   private _host = createRef<HTMLDivElement>();
-  private _focusZone = createRef<FocusZone>();
+  private _focusZone = createRef<IFocusZone>();
   private _dropDown = createRef<HTMLDivElement>();
-  private _dropdownLabel = createRef<Label>();
   private _id: string;
   private _isScrollIdle: boolean;
   private readonly _scrollIdleDelay: number = 250 /* ms */;
@@ -152,7 +151,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
     return (
       <div className={ css('ms-Dropdown-container') }>
         { label && (
-          <Label className={ css('ms-Dropdown-label') } id={ id + '-label' } htmlFor={ id } ref={ this._dropdownLabel } required={ required }>{ label }</Label>
+          <Label className={ css('ms-Dropdown-label') } id={ id + '-label' } htmlFor={ id } required={ required }>{ label }</Label>
         ) }
         <div
           data-is-focusable={ !disabled }

packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx

@@ -35,7 +35,6 @@ export class HoverCard extends BaseComponent<IHoverCardProps, IHoverCardState> {
 
   // The wrapping div that gets the hover events
   private _hoverCard = createRef<HTMLDivElement>();
-  private _expandingCard = createRef<ExpandingCard>();
   private _dismissTimerId: number;
   private _openTimerId: number;
   private _currentMouseTarget: EventTarget;
@@ -113,7 +112,6 @@ export class HoverCard extends BaseComponent<IHoverCardProps, IHoverCardState> {
         { children }
         { isHoverCardVisible &&
           <ExpandingCard
-            componentRef={ this._expandingCard }
             { ...getNativeProps(this.props, divProperties) }
             id={ hoverCardId }
             trapFocus={ !!this.props.trapFocus }
@@ -140,7 +138,7 @@ export class HoverCard extends BaseComponent<IHoverCardProps, IHoverCardState> {
         return target as HTMLElement;
 
       default:
-        return this._hoverCard.value ? this._hoverCard.value : undefined;
+        return this._hoverCard.value || undefined;
     }
   }
 

packages/office-ui-fabric-react/src/components/List/List.types.ts

@@ -3,6 +3,11 @@ import { IRectangle, IRenderFunction } from '../../Utilities';
 import { List } from './List';
 
 export interface IList {
+  /**
+   * Force the component to update.
+   */
+  forceUpdate: () => void;
+
   /**
    * Scroll to the given index. By default will bring the page the specified item is on into the view. If a callback
    * to measure the height of an individual item is specified, will only scroll to bring the specific item into view.
@@ -13,7 +18,7 @@ export interface IList {
    * @param index Index of item to scroll to
    * @param measureItem Optional callback to measure the height of an individual item
    */
-  scrollToIndex(index: number, measureItem?: (itemIndex: number) => number): void;
+  scrollToIndex: (index: number, measureItem?: (itemIndex: number) => number) => void;
 }
 
 export interface IListProps extends React.HTMLAttributes<List | HTMLDivElement> {

packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx

@@ -9,14 +9,14 @@ import {
 } from '../../Utilities';
 import { mergeStyles } from '../../Styling';
 import { IOverflowSet, IOverflowSetProps, IOverflowSetItemProps } from './OverflowSet.types';
-import { FocusZone, FocusZoneDirection } from '../../FocusZone';
+import { IFocusZone, FocusZone, FocusZoneDirection } from '../../FocusZone';
 
 import * as stylesImport from './OverflowSet.scss';
 const styles: any = stylesImport;
 
 export class OverflowSet extends BaseComponent<IOverflowSetProps, {}> implements IOverflowSet {
 
-  private _focusZone = createRef<FocusZone>();
+  private _focusZone = createRef<IFocusZone>();
   private _divContainer = createRef<HTMLDivElement>();
 
   constructor(props: IOverflowSetProps) {

packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx

@@ -6,14 +6,14 @@ import {
   createRef,
   elementContains
 } from '../../Utilities';
-import { FocusZone, FocusZoneDirection } from '../../FocusZone';
+import { IFocusZone, FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { Callout, DirectionalHint } from '../../Callout';
 import { Selection, SelectionZone, SelectionMode } from '../../utilities/selection/index';
 import { Suggestions } from './Suggestions/Suggestions';
 import { ISuggestionsProps } from './Suggestions/Suggestions.types';
 import { SuggestionsController } from './Suggestions/SuggestionsController';
 import { IBasePicker, IBasePickerProps, ValidationState } from './BasePicker.types';
-import { Autofill } from '../Autofill/Autofill';
+import { IAutofill, Autofill } from '../Autofill/index';
 import { IPickerItemProps } from './PickerItem.types';
 import { IPersonaProps } from '../Persona/Persona.types';
 import * as stylesImport from './BasePicker.scss';
@@ -36,8 +36,8 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
   protected selection: Selection;
 
   protected root = createRef<HTMLDivElement>();
-  protected input = createRef<Autofill>();
-  protected focusZone = createRef<FocusZone>();
+  protected input = createRef<IAutofill>();
+  protected focusZone = createRef<IFocusZone>();
   protected suggestionElement = createRef<Suggestions<T>>();
 
   protected suggestionStore: SuggestionsController<T>;

packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx

@@ -36,6 +36,10 @@ const SELECTION_TOGGLE_ATTRIBUTE_NAME = 'data-selection-toggle';
 const SELECTION_INVOKE_ATTRIBUTE_NAME = 'data-selection-invoke';
 const SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME = 'data-selection-all-toggle';
 
+export interface ISelectionZone {
+  ignoreNextFocus: () => void;
+}
+
 export interface ISelectionZoneProps extends React.Props<SelectionZone> {
   componentRef?: () => void;
   selection: ISelection;