microsoft · dzearing · Mar 23, 2018 · Mar 21, 2018 · Mar 21, 2018
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Update componentRef types",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "[email protected]"
+}
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "Update createRef type",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "[email protected]"
+}
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Update componentRef types",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}
@@ -24,7 +24,7 @@ export interface ICommandBarProps extends React.HTMLAttributes<HTMLDivElement> {
    * Optional callback to access the ICommandBar interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: ICommandBar) => void;
+  componentRef?: (component: ICommandBar | null) => void;
 
   /**
    * Items to render

@@ -17,7 +17,7 @@ export interface IBaseExtendedPicker<T> {
 // and searched for by the people picker. For example, if the picker is
 // displaying persona's than type T could either be of Persona or Ipersona props
 export interface IBaseExtendedPickerProps<T> {
-  componentRef?: (component?: IBaseExtendedPicker<T>) => void;
+  componentRef?: (component?: IBaseExtendedPicker<T> | null) => void;
 
   /**
    * Header/title element for the picker

@@ -1,11 +1,14 @@
 /* tslint:disable:no-any */
 import * as React from 'react';
 
+export interface IForm {
+}
+
 /**
  * The props for Form
  */
 export interface IFormProps extends React.AllHTMLAttributes<HTMLFormElement> {
-  componentRef?: (component: any) => void;
+  componentRef?: (component: IForm | null) => void;
 
   /** The submit handler. Passes back results keyed by the names of the inputs */
   onSubmit?: (results: { [key: string]: any }) => void;

@@ -11,7 +11,7 @@ export interface IKeytipProps {
    * Optional callback to access the Keytip component. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: IKeytip) => void;
+  componentRef?: (component: IKeytip | null) => void;
 
   /**
    * Content to put inside the keytip

@@ -7,7 +7,7 @@ export interface IKeytipLayerProps extends React.Props<KeytipLayer> {
    * Optional callback to access the KeytipLayer component. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: KeytipLayer) => void;
+  componentRef?: (component: KeytipLayer | null) => void;
 
   /**
    * The DOM ID to use as the hostId for the child keytips

@@ -17,7 +17,7 @@ export interface ISelectedItemProps<T> extends IPickerItemProps<T> {
 // For example, if the picker is displaying persona's than type T could either be of Persona or Ipersona props
 // tslint:disable-next-line:no-any
 export interface IBaseSelectedItemsListProps<T> extends React.Props<any> {
-  componentRef?: (component?: IBaseSelectedItemsList<T>) => void;
+  componentRef?: (component?: IBaseSelectedItemsList<T> | null) => void;
 
   /**
    * The selection

@@ -16,7 +16,7 @@ export interface IShimmerProps extends React.AllHTMLAttributes<HTMLElement> {
    * Optional callback to access the IShimmer interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: IShimmer) => void;
+  componentRef?: (component: IShimmer | null) => void;
 
   /**
    * Sets the width of the shimmer wave wrapper in percentages.

@@ -17,7 +17,7 @@ export interface IShimmerCircleProps extends React.AllHTMLAttributes<HTMLElement
    * Optional callback to access the IShimmerCircle interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: IShimmerCircle) => void;
+  componentRef?: (component: IShimmerCircle | null) => void;
 
   /**
    * Sets the height of the circle.

@@ -17,7 +17,7 @@ export interface IShimmerLineProps extends React.AllHTMLAttributes<HTMLElement>
    * Optional callback to access the IShimmerLine interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: IShimmerLine) => void;
+  componentRef?: (component: IShimmerLine | null) => void;
 
   /**
    * Sets the height of the rectangle.

@@ -107,7 +107,7 @@ export interface ITilesListProps<TItem> extends IBaseProps, React.Props<TilesLis
   /**
    * Component ref for the focus zone within the list. Use this to control auto-focus.
    */
-  focusZoneComponentRef?: (focusZone: IFocusZone) => void;
+  focusZoneComponentRef?: (focusZone: IFocusZone | null) => void;
   /**
    * Callback for when the active element within the list's FocusZone changes.
    */

@@ -45,7 +45,7 @@ export interface IAutofillProps extends
   /**
    * Gets the compoonent ref.
    */
-  componentRef?: (componentRef?: IAutofill) => void;
+  componentRef?: (componentRef?: IAutofill | null) => void;
 
   /**
    * The suggested autofill value that will display.

@@ -13,7 +13,7 @@ export interface IBreadcrumbProps extends React.Props<Breadcrumb> {
    * Optional callback to access the IBreadcrumb interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: IBreadcrumb) => void;
+  componentRef?: (component: IBreadcrumb | null) => void;
 
   /**
    * Collection of breadcrumbs to render

@@ -30,7 +30,7 @@ export interface IButtonProps extends React.AllHTMLAttributes<HTMLAnchorElement
    * Optional callback to access the IButton interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: IButton) => void;
+  componentRef?: (component: IButton | null) => void;
 
   /**
    * If provided, this component will be rendered as an anchor.

@@ -14,7 +14,7 @@ export interface ICalendarProps extends React.Props<Calendar> {
    * Optional callback to access the ICalendar interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: ICalendar) => void;
+  componentRef?: (component: ICalendar | null) => void;
 
   /**
   * Callback issued when a date is selected

@@ -16,7 +16,7 @@ export interface ICalloutProps {
    * Optional callback to access the ICallout interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: ICallout) => void;
+  componentRef?: (component: ICallout | null) => void;
 
   /**
    * The target that the Callout should try to position itself based on.

@@ -7,7 +7,7 @@ export interface ICheckProps extends React.Props<CheckBase> {
   /**
    * Gets the component ref.
    */
-  componentRef?: (component: ICheckProps) => void;
+  componentRef?: (component: ICheckProps | null) => void;
 
   /**
    * Whether or not this menu item is currently checked.

@@ -23,7 +23,7 @@ export interface ICheckboxProps extends React.ButtonHTMLAttributes<HTMLElement |
    * Optional callback to access the ICheckbox interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: ICheckbox) => void;
+  componentRef?: (component: ICheckbox | null) => void;
 
   /**
    * Additional class name to provide on the root element, in addition to the ms-Checkbox class.

@@ -11,7 +11,7 @@ export interface IChoiceGroupProps extends React.InputHTMLAttributes<HTMLElement
    * Optional callback to access the IChoiceGroup interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: IChoiceGroup) => void;
+  componentRef?: (component: IChoiceGroup | null) => void;
 
   /**
    * The options for the choice group.

@@ -7,7 +7,7 @@ export interface IBeakProps extends React.Props<Beak> {
   /**
   * All props for your component are to be defined here.
   */
-  componentRef?: (component: IBeak) => void;
+  componentRef?: (component: IBeak | null) => void;
 
   /**
    * Beak width.

@@ -8,7 +8,7 @@ export interface ICoachmark {
 }
 
 export interface ICoachmarkTypes extends React.Props<Coachmark> {
-  componentRef?: (component: ICoachmark) => void;
+  componentRef?: (component: ICoachmark | null) => void;
 
   /**
    * Get styles method.

@@ -21,7 +21,7 @@ export interface IPositioningContainerTypes extends React.Props<PositioningConta
   /**
   * All props for your component are to be defined here.
   */
-  componentRef?: (component: IPositioningContainer) => void;
+  componentRef?: (component: IPositioningContainer | null) => void;
   /**
    * The target that the positioningContainer should try to position itself based on.
    * It can be either an HTMLElement a querySelector string of a valid HTMLElement

@@ -33,7 +33,7 @@ export interface IComboBoxProps extends ISelectableDroppableTextProps<IComboBox>
    * Optional callback to access the IComboBox interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: IComboBox) => void;
+  componentRef?: (component: IComboBox | null) => void;
 
   /**
    * Collection of options for this ComboBox

@@ -13,7 +13,7 @@ export interface ICommandBarProps extends React.HTMLAttributes<HTMLDivElement> {
    * Optional callback to access the ICommandBar interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: ICommandBar) => void;
+  componentRef?: (component: ICommandBar | null) => void;
 
   /**
    * Whether or not the search box is visible

@@ -33,7 +33,7 @@ export interface IContextualMenuProps extends React.Props<ContextualMenu>, IWith
    * Optional callback to access the IContextualMenu interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: IContextualMenu) => void;
+  componentRef?: (component: IContextualMenu | null) => void;
 
   /**
    * The target that the ContextualMenu should try to position itself based on.

@@ -14,7 +14,7 @@ export interface IDatePickerProps extends React.Props<DatePicker> {
    * Optional callback to access the IDatePicker interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: IDatePicker) => void;
+  componentRef?: (component: IDatePicker | null) => void;
 
   /**
    * Pass calendar props to calendar component

@@ -33,7 +33,7 @@ export interface IDetailsHeader {
 }
 
 export interface IDetailsHeaderProps extends React.Props<DetailsHeader> {
-  componentRef?: (component: IDetailsHeader) => void;
+  componentRef?: (component: IDetailsHeader | null) => void;
   columns: IColumn[];
   selection: ISelection;
   selectionMode: SelectionMode;

@@ -44,7 +44,7 @@ export interface IDetailsListProps extends React.Props<DetailsList>, IWithViewpo
    * Optional callback to access the IDetailsList interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: IDetailsList) => void;
+  componentRef?: (component: IDetailsList | null) => void;
 
   /** A key that uniquely identifies the given items. If provided, the selection will be reset when the key changes. */
   setKey?: string;

@@ -18,7 +18,7 @@ export interface IDialogProps extends React.Props<DialogBase>, IWithResponsiveMo
    * Optional callback to access the IDialog interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: IDialog) => void;
+  componentRef?: (component: IDialog | null) => void;
 
   /**
    * Call to provide customized styling that will layer on top of the variant rules

@@ -14,7 +14,7 @@ export interface IDialogContentProps extends React.Props<DialogContentBase> {
   * Optional callback to access the IDialogContent interface. Use this instead of ref for accessing
   * the public methods and properties of the component.
   */
-  componentRef?: (component: IDialogContent) => void;
+  componentRef?: (component: IDialogContent | null) => void;
 
   /**
    * Call to provide customized styling that will layer on top of the variant rules

@@ -7,7 +7,7 @@ export interface IDialogFooterProps extends React.Props<DialogFooterBase> {
   /**
    * Gets the component ref.
    */
-  componentRef?: (component: IDialogFooterProps) => void;
+  componentRef?: (component: IDialogFooterProps | null) => void;
 
   /**
    * Call to provide customized styling that will layer on top of the variant rules

@@ -19,7 +19,7 @@ export interface IDocumentCardProps extends React.Props<DocumentCard> {
    * Optional callback to access the IDocumentCard interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: IDocumentCard) => void;
+  componentRef?: (component: IDocumentCard | null) => void;
 
   /**
   * The type of DocumentCard to display.

@@ -16,7 +16,7 @@ export interface IFacepileProps extends React.Props<Facepile> {
    * Optional callback to access the IFacepile interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: IFacepile) => void;
+  componentRef?: (component: IFacepile | null) => void;
 
   /**
    * Array of IPersonaProps that define each Persona.

@@ -12,7 +12,7 @@ export interface IFocusTrapZoneProps extends React.HTMLAttributes<HTMLDivElement
    * Optional callback to access the IFocusTrapZone interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: IFocusTrapZone) => void;
+  componentRef?: (component: IFocusTrapZone | null) => void;
 
   /**
    * Sets the HTMLElement to focus on when exiting the FocusTrapZone.

@@ -30,7 +30,7 @@ export interface IFocusZoneProps extends React.HTMLAttributes<HTMLElement | Focu
    * Optional callback to access the IFocusZone interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: IFocusZone) => void;
+  componentRef?: (component: IFocusZone | null) => void;
 
   /**
    * Additional class name to provide on the root element, in addition to the ms-FocusZone class.

@@ -42,7 +42,7 @@ export interface IGroupedListProps extends React.Props<GroupedList> {
    * Optional callback to access the IGroupedList interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component?: IGroupedList) => void;
+  componentRef?: (component?: IGroupedList | null) => void;
 
   /** Optional class name to add to the root element. */
   className?: string;

@@ -16,7 +16,7 @@ export interface IExpandingCardProps extends React.HTMLAttributes<HTMLDivElement
    * Optional callback to access the IExpandingCard interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: IExpandingCard) => void;
+  componentRef?: (component: IExpandingCard | null) => void;
 
   /**
    *  Item to be returned with onRender functions

@@ -15,7 +15,7 @@ export interface IHoverCardProps extends React.HTMLAttributes<HTMLDivElement | H
    * Optional callback to access the IHoverCardHost interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: IHoverCard) => void;
+  componentRef?: (component: IHoverCard | null) => void;
 
   /**
    * Additional properties to pass through for HoverCard, reference detail properties in IHoverCardProps

@@ -11,7 +11,7 @@ export interface IImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
    * Optional callback to access the ICheckbox interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: IImage) => void;
+  componentRef?: (component: IImage | null) => void;
 
   /**
    * Call to provide customized styling that will layer on top of the variant rules

@@ -12,7 +12,7 @@ export interface ILabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
    * Optional callback to access the ILabel interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
-  componentRef?: (component: ILabel) => void;
+  componentRef?: (component: ILabel | null) => void;
 
   /**
    * Whether the associated form field is required or not