Removing some deprecated components flagged when turning tslint depre…

…cation flag to true in oufr package (#7174)

* Removing some of the deprecated components flaged when turning the tslint deprecation flag to true in the office-ui-fabric-react package.

* Adding corresponding change file.

* Reverting changes that affected backwards compatibility because it removed own deprecated usage.

* Adding missing deprecation reversion in BaseButton.

* Removed some of the deprecated components flagged when turning the tslint deprecation flag to true in the office-ui-fabric-react package.

* Removed some of the deprecated components flagged when turning the tslint deprecation flag to true in the office-ui-fabric-react package.

* Removed some of the deprecated components flagged when turning the tslint deprecation flag to true in the office-ui-fabric-react package.

* Removed some of the deprecated components flagged when turning the tslint deprecation flag to true in the office-ui-fabric-react package.

* Updating api

* Adding change file.

common/changes/office-ui-fabric-react/changes4_2018-11-20-21-24.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Removing some deprecated components flagged when turning tslint deprecation flag to true in oufr package.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts

@@ -7964,7 +7964,7 @@ interface IGroupedList extends IList {
 }
 
 // @public (undocumented)
-interface IGroupedListProps extends React.Props<GroupedListBase> {
+interface IGroupedListProps extends React.ClassAttributes<GroupedListBase> {
   className?: string;
   componentRef?: IRefObject<IGroupedList>;
   dragDropEvents?: IDragDropEvents;
@@ -8231,7 +8231,7 @@ interface IKeytipLayer {
 }
 
 // @public (undocumented)
-interface IKeytipLayerProps extends React.Props<IKeytipLayer> {
+interface IKeytipLayerProps extends React.ClassAttributes<IKeytipLayer> {
   componentRef?: IRefObject<IKeytipLayer>;
   content: string;
   keytipExitSequences?: IKeytipTransitionKey[];
@@ -8629,7 +8629,7 @@ interface IModal {
 }
 
 // @public (undocumented)
-interface IModalProps extends React.Props<ModalBase>, IWithResponsiveModeState, IAccessiblePopupProps {
+interface IModalProps extends React.ClassAttributes<ModalBase>, IWithResponsiveModeState, IAccessiblePopupProps {
   className?: string;
   componentRef?: IRefObject<IModal>;
   containerClassName?: string;
@@ -8868,7 +8868,7 @@ interface IPage {
 }
 
 // @public (undocumented)
-interface IPageProps extends React.HTMLAttributes<HTMLDivElement>, React.Props<HTMLDivElement> {
+interface IPageProps extends React.HTMLAttributes<HTMLDivElement>, React.ClassAttributes<HTMLDivElement> {
   page: IPage;
   role?: string;
 }

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

@@ -535,8 +535,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
           currentPendingValue !== null && currentPendingValue !== undefined
             ? currentPendingValue
             : this._indexWithinBounds(currentOptions, index)
-              ? currentOptions[index].text
-              : ''
+            ? currentOptions[index].text
+            : ''
         );
       } else {
         for (let idx = 0; selectedIndices && idx < selectedIndices.length; idx++) {
@@ -563,8 +563,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
           currentPendingValue !== null && currentPendingValue !== undefined
             ? currentPendingValue
             : this._indexWithinBounds(currentOptions, index)
-              ? currentOptions[index].text
-              : ''
+            ? currentOptions[index].text
+            : ''
         );
       } else {
         // If we are not allowing freeform and have a
@@ -1273,10 +1273,10 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
       ? currentPendingValueValidIndexOnHover
       : currentPendingValueValidIndex >= 0 ||
         (includeCurrentPendingValue && (currentPendingValue !== null && currentPendingValue !== undefined))
-        ? currentPendingValueValidIndex
-        : this.props.multiSelect
-          ? 0
-          : this._getFirstSelectedIndex();
+      ? currentPendingValueValidIndex
+      : this.props.multiSelect
+      ? 0
+      : this._getFirstSelectedIndex();
   }
 
   /**

packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.base.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseComponent, IRectangle, assign, createRef, classNamesFunction, IClassNames } from '../../Utilities';
+import { BaseComponent, IRectangle, assign, classNamesFunction, IClassNames } from '../../Utilities';
 import { IGroupedList, IGroupedListProps, IGroup, IGroupedListStyleProps, IGroupedListStyles } from './GroupedList.types';
 import { GroupedListSection } from './GroupedListSection';
 import { List, ScrollToMode } from '../../List';
@@ -26,7 +26,7 @@ export class GroupedListBase extends BaseComponent<IGroupedListProps, IGroupedLi
 
   private _classNames: IClassNames<IGroupedListStyles>;
 
-  private _list = createRef<List>();
+  private _list = React.createRef<List>();
 
   private _isSomeGroupExpanded: boolean;
 

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

@@ -27,7 +27,7 @@ export interface IGroupedList extends IList {
   toggleCollapseAll: (allCollapsed: boolean) => void;
 }
 
-export interface IGroupedListProps extends React.Props<GroupedListBase> {
+export interface IGroupedListProps extends React.ClassAttributes<GroupedListBase> {
   /**
    * Theme that is passed in from Higher Order Component
    */

packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx

@@ -4,7 +4,7 @@ import { IGroupHeaderProps } from './GroupHeader.types';
 
 import { IDragDropContext, IDragDropEvents, IDragDropHelper } from '../../utilities/dragdrop/index';
 
-import { BaseComponent, IRenderFunction, IDisposable, createRef, IClassNames } from '../../Utilities';
+import { BaseComponent, IRenderFunction, IDisposable, IClassNames } from '../../Utilities';
 
 import { ISelection, SelectionMode, SELECTION_CHANGE } from '../../utilities/selection/index';
 
@@ -18,7 +18,7 @@ import { assign, css, getId } from '../../Utilities';
 import { IViewport } from '../../utilities/decorators/withViewport';
 import { IListProps } from '../List/index';
 
-export interface IGroupedListSectionProps extends React.Props<GroupedListSection> {
+export interface IGroupedListSectionProps extends React.ClassAttributes<GroupedListSection> {
   /** GroupedList resolved class names */
   groupedListClassNames?: IClassNames<IGroupedListStyles>;
 
@@ -107,8 +107,8 @@ export interface IGroupedListSectionState {
 const DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';
 
 export class GroupedListSection extends BaseComponent<IGroupedListSectionProps, IGroupedListSectionState> {
-  private _root = createRef<HTMLDivElement>();
-  private _list = createRef<List>();
+  private _root = React.createRef<HTMLDivElement>();
+  private _list = React.createRef<List>();
   private _id: string;
 
   private _dragDropSubscription: IDisposable;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { classNamesFunction, createRef, BaseComponent, KeyCodes } from '../../Utilities';
+import { classNamesFunction, BaseComponent, KeyCodes } from '../../Utilities';
 import { ExpandingCardMode, IExpandingCardProps, IExpandingCardStyles, IExpandingCardStyleProps } from './ExpandingCard.types';
 import { CardCallout } from './CardCallout/CardCallout';
 
@@ -19,7 +19,7 @@ export class ExpandingCardBase extends BaseComponent<IExpandingCardProps, IExpan
   };
 
   private _classNames: { [key in keyof IExpandingCardStyles]: string };
-  private _expandedElem = createRef<HTMLDivElement>();
+  private _expandedElem = React.createRef<HTMLDivElement>();
 
   constructor(props: IExpandingCardProps) {
     super(props);

packages/office-ui-fabric-react/src/components/Image/Image.base.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseComponent, classNamesFunction, createRef, getNativeProps, imageProperties } from '../../Utilities';
+import { BaseComponent, classNamesFunction, getNativeProps, imageProperties } from '../../Utilities';
 import { IImageProps, IImageStyleProps, IImageStyles, ImageCoverStyle, ImageFit, ImageLoadState } from './Image.types';
 
 const getClassNames = classNamesFunction<IImageStyleProps, IImageStyles>();
@@ -21,8 +21,8 @@ export class ImageBase extends BaseComponent<IImageProps, IImageState> {
   // check the rendered element. The value here only takes effect when
   // shouldStartVisible is true.
   private _coverStyle: ImageCoverStyle = ImageCoverStyle.portrait;
-  private _imageElement = createRef<HTMLImageElement>();
-  private _frameElement = createRef<HTMLDivElement>();
+  private _imageElement = React.createRef<HTMLImageElement>();
+  private _frameElement = React.createRef<HTMLDivElement>();
 
   constructor(props: IImageProps) {
     super(props);

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

@@ -3,14 +3,14 @@ import { KeytipManager } from '../../utilities/keytips/KeytipManager';
 import { mount, ReactWrapper } from 'enzyme';
 import { KeytipLayerBase } from './KeytipLayer.base';
 import { IKeytipProps } from '../../Keytip';
-import { createRef, find, EventGroup } from '../../Utilities';
+import { find, EventGroup } from '../../Utilities';
 import { KeytipTree } from './KeytipTree';
 import { KTP_FULL_PREFIX, KTP_SEPARATOR, KeytipEvents } from '../../utilities/keytips/KeytipConstants';
 import { KeytipTransitionModifier } from '../../utilities/keytips/IKeytipTransitionKey';
 
 describe('KeytipLayer', () => {
   const ktpMgr = KeytipManager.getInstance();
-  const layerRef = createRef<KeytipLayerBase>();
+  const layerRef = React.createRef<KeytipLayerBase>();
   let ktpLayer: ReactWrapper;
   let ktpTree: KeytipTree;
 
@@ -107,7 +107,7 @@ describe('KeytipLayer', () => {
       ktpMgr.enterKeytipMode();
       expect(ktpLayer.state('inKeytipMode')).toEqual(true);
       expect(onEnter).toBeCalled();
-      ktpTree = layerRef.value!.getKeytipTree();
+      ktpTree = layerRef.current!.getKeytipTree();
 
       // 4 nodes + the root
       expect(Object.keys(ktpTree.nodeMap)).toHaveLength(5);
@@ -128,12 +128,12 @@ describe('KeytipLayer', () => {
       ktpMgr.exitKeytipMode();
       expect(ktpLayer.state('inKeytipMode')).toEqual(false);
       expect(onExit).toBeCalled();
-      ktpTree = layerRef.value!.getKeytipTree();
+      ktpTree = layerRef.current!.getKeytipTree();
 
       visibleKeytips = ktpLayer.state('visibleKeytips');
       expect(visibleKeytips).toHaveLength(0);
 
-      expect(layerRef.value!.getCurrentSequence()).toEqual('');
+      expect(layerRef.current!.getCurrentSequence()).toEqual('');
       expect(ktpTree.currentKeytip).toBeUndefined();
     });
 
@@ -169,7 +169,7 @@ describe('KeytipLayer', () => {
           ktpLayer = mount(
             <KeytipLayerBase componentRef={layerRef} content="Alt Windows" onEnterKeytipMode={onEnter} onExitKeytipMode={onExit} />
           );
-          layerValue = layerRef.value!;
+          layerValue = layerRef.current!;
           ktpTree = layerValue.getKeytipTree();
         });
 
@@ -241,7 +241,7 @@ describe('KeytipLayer', () => {
         ktpLayer = mount(
           <KeytipLayerBase componentRef={layerRef} content="Alt Windows" onEnterKeytipMode={onEnter} onExitKeytipMode={onExit} />
         );
-        layerValue = layerRef.value!;
+        layerValue = layerRef.current!;
         ktpTree = layerValue.getKeytipTree();
       });
 
@@ -311,7 +311,7 @@ describe('KeytipLayer', () => {
         { keytip: keytipE2, uniqueID: uniqueIdE2 }
       ];
       ktpLayer = mount(<KeytipLayerBase componentRef={layerRef} content="Alt Windows" />);
-      layerRef.value!.showKeytips([keytipIdB, keytipIdC]);
+      layerRef.current!.showKeytips([keytipIdB, keytipIdC]);
       const visibleKeytips: IKeytipProps[] = ktpLayer.state('visibleKeytips');
       expect(visibleKeytips).toHaveLength(2);
       expect(getKeytip(visibleKeytips, 'B')).toBeDefined();
@@ -333,7 +333,7 @@ describe('KeytipLayer', () => {
         { keytip: keytipE2, uniqueID: uniqueIdE2 }
       ];
       ktpLayer = mount(<KeytipLayerBase componentRef={layerRef} content="Alt Windows" />);
-      layerRef.value!.showKeytips(['ktp-x-b']);
+      layerRef.current!.showKeytips(['ktp-x-b']);
       const visibleKeytips: IKeytipProps[] = ktpLayer.state('visibleKeytips');
       expect(visibleKeytips).toHaveLength(1);
       expect(getKeytip(visibleKeytips, 'B')).toBeDefined();
@@ -354,7 +354,7 @@ describe('KeytipLayer', () => {
 
       // Create layer
       ktpLayer = mount(<KeytipLayerBase componentRef={layerRef} content="Alt Windows" />);
-      ktpTree = layerRef.value!.getKeytipTree();
+      ktpTree = layerRef.current!.getKeytipTree();
     });
 
     it('keytipAdded event delay-shows a keytip if the current keytip is its parent', () => {

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

@@ -5,7 +5,7 @@ import { IKeytipTransitionKey } from '../../utilities/keytips/IKeytipTransitionK
 
 export interface IKeytipLayer {}
 
-export interface IKeytipLayerProps extends React.Props<IKeytipLayer> {
+export interface IKeytipLayerProps extends React.ClassAttributes<IKeytipLayer> {
   /**
    * Optional callback to access the KeytipLayer component. Use this instead of ref for accessing
    * the public methods and properties of the component.

packages/office-ui-fabric-react/src/components/Link/Link.base.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { BaseComponent, classNamesFunction, createRef } from '../../Utilities';
+import { BaseComponent, classNamesFunction } from '../../Utilities';
 import { ILink, ILinkProps, ILinkStyleProps, ILinkStyles } from './Link.types';
 import { KeytipData } from '../../KeytipData';
 
 const getClassNames = classNamesFunction<ILinkStyleProps, ILinkStyles>();
 
 export class LinkBase extends BaseComponent<ILinkProps, any> implements ILink {
-  private _link = createRef<HTMLAnchorElement | HTMLButtonElement | null>();
+  private _link = React.createRef<HTMLAnchorElement | HTMLButtonElement | null>();
 
   public render(): JSX.Element {
     const { disabled, children, className, href, theme, styles, keytipProps } = this.props;

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

@@ -8,8 +8,7 @@ import {
   getParent,
   divProperties,
   getNativeProps,
-  IRenderFunction,
-  createRef
+  IRenderFunction
 } from '../../Utilities';
 import { IList, IListProps, IPage, IPageProps, ScrollToMode } from './List.types';
 
@@ -92,8 +91,8 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
     [key: string]: React.ReactInstance;
   };
 
-  private _root = createRef<HTMLDivElement>();
-  private _surface = createRef<HTMLDivElement>();
+  private _root = React.createRef<HTMLDivElement>();
+  private _surface = React.createRef<HTMLDivElement>();
 
   private _estimatedPageHeight: number;
   private _totalEstimates: number;

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

@@ -176,7 +176,7 @@ export interface IPage {
   isSpacer?: boolean;
 }
 
-export interface IPageProps extends React.HTMLAttributes<HTMLDivElement>, React.Props<HTMLDivElement> {
+export interface IPageProps extends React.HTMLAttributes<HTMLDivElement>, React.ClassAttributes<HTMLDivElement> {
   /**
    * The role being assigned to the rendered page element by the list.
    */

packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.base.tsx

@@ -8,8 +8,7 @@ import {
   classNamesFunction,
   findScrollableParent,
   getDistanceBetweenPoints,
-  getRTL,
-  createRef
+  getRTL
 } from '../../Utilities';
 
 import { IMarqueeSelectionProps, IMarqueeSelectionStyleProps, IMarqueeSelectionStyles } from './MarqueeSelection.types';
@@ -38,7 +37,7 @@ export class MarqueeSelectionBase extends BaseComponent<IMarqueeSelectionProps,
     isEnabled: true
   };
 
-  private _root = createRef<HTMLDivElement>();
+  private _root = React.createRef<HTMLDivElement>();
   private _dragOrigin: IPoint | undefined;
   private _rootRect: IRectangle;
   private _lastMouseEvent: MouseEvent | undefined;

packages/office-ui-fabric-react/src/components/Modal/Modal.base.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseComponent, classNamesFunction, getId, createRef, allowScrollOnElement } from '../../Utilities';
+import { BaseComponent, classNamesFunction, getId, allowScrollOnElement } from '../../Utilities';
 import { FocusTrapZone, IFocusTrapZone } from '../FocusTrapZone/index';
 import { animationDuration, getOverlayStyles } from './Modal.styles';
 import { IModalProps, IModalStyleProps, IModalStyles, IModal } from './Modal.types';
@@ -36,7 +36,7 @@ export class ModalBase extends BaseComponent<IModalProps, IDialogState> implemen
   };
 
   private _onModalCloseTimer: number;
-  private _focusTrapZone = createRef<IFocusTrapZone>();
+  private _focusTrapZone = React.createRef<IFocusTrapZone>();
   private _scrollableContent: HTMLDivElement | null;
 
   constructor(props: IModalProps) {

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

@@ -13,7 +13,7 @@ export interface IModal {
   focus: () => void;
 }
 
-export interface IModalProps extends React.Props<ModalBase>, IWithResponsiveModeState, IAccessiblePopupProps {
+export interface IModalProps extends React.ClassAttributes<ModalBase>, IWithResponsiveModeState, IAccessiblePopupProps {
   /**
    * Optional callback to access the IDialog interface. Use this instead of ref for accessing
    * the public methods and properties of the component.

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

@@ -2,15 +2,7 @@ import * as React from 'react';
 
 import { FocusZone, FocusZoneDirection, IFocusZone } from '../../FocusZone';
 import { IKeytipProps } from '../../Keytip';
-import {
-  BaseComponent,
-  classNamesFunction,
-  createRef,
-  divProperties,
-  elementContains,
-  focusFirstChild,
-  getNativeProps
-} from '../../Utilities';
+import { BaseComponent, classNamesFunction, divProperties, elementContains, focusFirstChild, getNativeProps } from '../../Utilities';
 import { IProcessedStyleSet } from '../../Styling';
 import { KeytipManager } from '../../utilities/keytips/KeytipManager';
 import { IOverflowSet, IOverflowSetItemProps, IOverflowSetProps, IOverflowSetStyles, IOverflowSetStyleProps } from './OverflowSet.types';
@@ -23,10 +15,10 @@ export class OverflowSetBase extends BaseComponent<IOverflowSetProps, {}> implem
     role: 'menubar'
   };
 
-  private _focusZone = createRef<IFocusZone>();
+  private _focusZone = React.createRef<IFocusZone>();
   private _persistedKeytips: { [uniqueID: string]: IKeytipProps } = {};
   private _keytipManager: KeytipManager = KeytipManager.getInstance();
-  private _divContainer = createRef<HTMLDivElement>();
+  private _divContainer = React.createRef<HTMLDivElement>();
   private _classNames: IProcessedStyleSet<IOverflowSetStyles>;
 
   constructor(props: IOverflowSetProps) {