[Fabric] Upgrade office-ui-fabric-react to v6.201.1

libs/fabric/package.json

@@ -49,7 +49,7 @@
     "@angular/core": "^8.0.2",
     "@angular/platform-browser-dynamic": "^8.0.2",
     "@angular/platform-browser": "^8.0.2",
-    "office-ui-fabric-react": "6.151.0",
+    "office-ui-fabric-react": "6.201.1",
     "react-dom": "^16.6.3",
     "react": "^16.6.3"
   }

libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts

@@ -30,6 +30,8 @@ import { IBreadcrumbItem, IBreadcrumbProps } from 'office-ui-fabric-react/lib/Br
       [overflowIndex]="overflowIndex"
       [styles]="styles"
       [theme]="theme"
+      [focusZoneProps]="focusZoneProps"
+      [tooltipHostProps]="tooltipHostProps"
       [RenderItem]="renderItem && onRenderItem"
       [ReduceData]="onReduceData"
     >
@@ -51,6 +53,8 @@ export class FabBreadcrumbComponent extends ReactWrapperComponent<IBreadcrumbPro
   @Input() overflowIndex?: IBreadcrumbProps['overflowIndex'];
   @Input() styles?: IBreadcrumbProps['styles'];
   @Input() theme?: IBreadcrumbProps['theme'];
+  @Input() focusZoneProps?: IBreadcrumbProps['focusZoneProps'];
+  @Input() tooltipHostProps?: IBreadcrumbProps['tooltipHostProps'];
 
   @Input() renderItem?: InputRendererOptions<IBreadcrumbItem>;
   @Input('reduceData') onReduceData?: IBreadcrumbProps['onReduceData'];

libs/fabric/src/lib/components/calendar/directives/calendar-strings-directive.component.ts

@@ -15,16 +15,30 @@ export class CalendarStringsDirective {
   @Input() days: ICalendarStrings['days'];
   @Input() shortDays: ICalendarStrings['shortDays'];
   @Input() goToToday: ICalendarStrings['goToToday'];
-  @Input() weekNumberFormatString: ICalendarStrings['weekNumberFormatString'];
+  @Input() prevMonthAriaLabel?: ICalendarStrings['prevMonthAriaLabel'];
+  @Input() nextMonthAriaLabel?: ICalendarStrings['nextMonthAriaLabel'];
+  @Input() prevYearAriaLabel?: ICalendarStrings['prevYearAriaLabel'];
+  @Input() nextYearAriaLabel?: ICalendarStrings['nextYearAriaLabel'];
+  @Input() prevYearRangeAriaLabel?: ICalendarStrings['prevYearRangeAriaLabel'];
+  @Input() nextYearRangeAriaLabel?: ICalendarStrings['nextYearRangeAriaLabel'];
+  @Input() closeButtonAriaLabel?: ICalendarStrings['closeButtonAriaLabel'];
+  @Input() weekNumberFormatString?: ICalendarStrings['weekNumberFormatString'];
+
 
-
   get strings(): ICalendarStrings {
     return {
       months: this.months,
       shortMonths: this.shortMonths,
       days: this.days,
       shortDays: this.shortDays,
       goToToday: this.goToToday,
+      prevMonthAriaLabel: this.prevMonthAriaLabel,
+      nextMonthAriaLabel: this.nextMonthAriaLabel,
+      prevYearAriaLabel: this.prevYearAriaLabel,
+      nextYearAriaLabel: this.nextYearAriaLabel,
+      prevYearRangeAriaLabel: this.prevYearRangeAriaLabel,
+      nextYearRangeAriaLabel: this.nextYearRangeAriaLabel,
+      closeButtonAriaLabel: this.closeButtonAriaLabel,
       weekNumberFormatString: this.weekNumberFormatString
     }
   }

libs/fabric/src/lib/components/callout/callout.component.ts

@@ -53,6 +53,7 @@ import { ICalloutPositionedInfo } from 'office-ui-fabric-react/lib/utilities/pos
       [theme]="theme"
       [styles]="styles"
       [hidden]="hidden"
+      [shouldRestoreFocus]="shouldRestoreFocus"
       (onLayerMounted)="onLayerMounted.emit()"
       (onPositioned)="onPositioned.emit($event)"
       (onDismiss)="onDismiss.emit($event)"
@@ -67,7 +68,6 @@ import { ICalloutPositionedInfo } from 'office-ui-fabric-react/lib/utilities/pos
 export class FabCalloutComponent extends ReactWrapperComponent<ICalloutProps> {
   @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
 
-  @Input() componentRef?: ICalloutProps['componentRef'];
   @Input() target?: ICalloutProps['target'];
   @Input() directionalHint?: ICalloutProps['directionalHint'];
   @Input() directionalHintForRTL?: ICalloutProps['directionalHintForRTL'];
@@ -98,6 +98,7 @@ export class FabCalloutComponent extends ReactWrapperComponent<ICalloutProps> {
   @Input() theme?: ICalloutProps['theme'];
   @Input() styles?: ICalloutProps['styles'];
   @Input() hidden?: ICalloutProps['hidden'];
+  @Input() shouldRestoreFocus?: ICalloutProps['shouldRestoreFocus'];
 
   @Output() readonly onLayerMounted = new EventEmitter<void>();
   @Output() readonly onPositioned = new EventEmitter<{ positions?: ICalloutPositionedInfo }>();

libs/fabric/src/lib/components/callout/focus-trap-callout.component.ts

@@ -54,6 +54,7 @@ import { ICalloutPositionedInfo } from 'office-ui-fabric-react/lib/utilities/pos
       [theme]="theme"
       [styles]="styles"
       [hidden]="hidden"
+      [shouldRestoreFocus]="shouldRestoreFocus"
       [focusTrapProps]="focusTrapProps"
       (onLayerMounted)="onLayerMounted.emit()"
       (onPositioned)="onPositioned.emit($event)"
@@ -67,9 +68,8 @@ import { ICalloutPositionedInfo } from 'office-ui-fabric-react/lib/utilities/pos
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabFocusTrapCalloutComponent extends ReactWrapperComponent<IFocusTrapCalloutProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
 
-  @Input() componentRef?: IFocusTrapCalloutProps['componentRef'];
   @Input() target?: IFocusTrapCalloutProps['target'];
   @Input() directionalHint?: IFocusTrapCalloutProps['directionalHint'];
   @Input() directionalHintForRTL?: IFocusTrapCalloutProps['directionalHintForRTL'];
@@ -100,6 +100,7 @@ export class FabFocusTrapCalloutComponent extends ReactWrapperComponent<IFocusTr
   @Input() theme?: IFocusTrapCalloutProps['theme'];
   @Input() styles?: IFocusTrapCalloutProps['styles'];
   @Input() hidden?: IFocusTrapCalloutProps['hidden'];
+  @Input() shouldRestoreFocus?: IFocusTrapCalloutProps['shouldRestoreFocus'];
   @Input() focusTrapProps?: IFocusTrapCalloutProps['focusTrapProps'];
 
   @Output() readonly onLayerMounted = new EventEmitter<void>();

libs/fabric/src/lib/components/combo-box/base-combo-box.component.ts

@@ -40,6 +40,8 @@ export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<ICo
   @Input() isButtonAriaHidden?: IComboBoxProps['isButtonAriaHidden'];
   @Input() ariaDescribedBy?: IComboBoxProps['ariaDescribedBy'];
   @Input() keytipProps?: IComboBoxProps['keytipProps'];
+  @Input() persistMenu?: IComboBoxProps['persistMenu'];
+  @Input() shouldRestoreFocus?: IComboBoxProps['shouldRestoreFocus'];
   @Input() resolveOptions?: (options: IComboBoxOption[]) => IComboBoxOption[] | PromiseLike<IComboBoxOption[]>;
 
   @Input() renderLowerContent?: InputRendererOptions<IComboBoxProps>;
@@ -62,6 +64,7 @@ export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<ICo
   }>();
   @Output() readonly onMenuOpen = new EventEmitter<void>();
   @Output() readonly onMenuDismissed = new EventEmitter<void>();
+  @Output() readonly onMenuDismiss = new EventEmitter<void>();
   @Output() readonly onScrollToItem = new EventEmitter<{ itemIndex: number }>();
 
   @ContentChild(ComboBoxOptionsDirective, { static: true }) readonly comboBoxOptionsDirective?: ComboBoxOptionsDirective;

libs/fabric/src/lib/components/combo-box/combo-box.component.ts

@@ -37,6 +37,8 @@ import { FabBaseComboBoxComponent } from './base-combo-box.component';
       [isButtonAriaHidden]="isButtonAriaHidden"
       [ariaDescribedBy]="ariaDescribedBy"
       [keytipProps]="keytipProps"
+      [persistMenu]="persistMenu"
+      [shouldRestoreFocus]="shouldRestoreFocus"
       [RenderLowerContent]="renderLowerContent && onRenderLowerContent"
       [ItemClick]="onItemClickHandler"
       [Change]="onChangeHandler"
@@ -45,6 +47,7 @@ import { FabBaseComboBoxComponent } from './base-combo-box.component';
       [ScrollToItem]="onScrollToItemHandler"
       (onMenuOpen)="onMenuOpen.emit()"
       (onMenuDismissed)="onMenuDismissed.emit()"
+      (onMenuDismiss)="onMenuDismiss.emit()"
     >
     </ComboBox>
   `,

libs/fabric/src/lib/components/combo-box/virtualized-combo-box.component.ts

@@ -37,6 +37,8 @@ import { FabBaseComboBoxComponent } from './base-combo-box.component';
       [isButtonAriaHidden]="isButtonAriaHidden"
       [ariaDescribedBy]="ariaDescribedBy"
       [keytipProps]="keytipProps"
+      [persistMenu]="persistMenu"
+      [shouldRestoreFocus]="shouldRestoreFocus"
       [RenderLowerContent]="renderLowerContent && onRenderLowerContent"
       [ItemClick]="onItemClickHandler"
       [Change]="onChangeHandler"
@@ -45,6 +47,7 @@ import { FabBaseComboBoxComponent } from './base-combo-box.component';
       [ScrollToItem]="onScrollToItemHandler"
       (onMenuOpen)="onMenuOpen.emit()"
       (onMenuDismissed)="onMenuDismissed.emit()"
+      (onMenuDismiss)="onMenuDismiss.emit()"
     >
     </VirtualizedComboBox>
   `,

libs/fabric/src/lib/components/command-bar/command-bar.component.ts

@@ -203,7 +203,7 @@ export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarPro
         onRenderIcon: (item: IContextualMenuItem) => iconRenderer({ contextualMenuItem: item }),
       },
       renderer &&
-        ({ onRender: (item, dismissMenu) => renderer({ item, dismissMenu }) } as Pick<ICommandBarItemProps, 'onRender'>)
+      ({ onRender: (item, dismissMenu) => renderer({ item, dismissMenu }) } as Pick<ICommandBarItemProps, 'onRender'>)
     ) as ICommandBarItemProps;
   }
 }

libs/fabric/src/lib/components/details-list/details-list.component.ts

@@ -22,6 +22,7 @@ import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@ang
 import {
   DetailsListBase,
   IColumn,
+  IDetailsListCheckboxProps,
   IDetailsFooterProps,
   IDetailsHeaderProps,
   IDetailsListProps,
@@ -64,7 +65,9 @@ import { DetailsListGroupsDirective } from './directives/details-list-groups.dir
       [disableSelectionZone]="disableSelectionZone"
       [dragDropEvents]="dragDropEvents"
       [enableShimmer]="enableShimmer"
+      [enableUpdateAnimations]="enableUpdateAnimations"
       [enterModalSelectionOnTouch]="enterModalSelectionOnTouch"
+      [getCellValueKey]="getCellValueKey"
       [getGroupHeight]="getGroupHeight"
       [getKey]="getKey"
       [getRowAriaDescribedBy]="getRowAriaDescribedBy"
@@ -87,9 +90,11 @@ import { DetailsListGroupsDirective } from './directives/details-list-groups.dir
       [skipViewportMeasures]="skipViewportMeasures"
       [styles]="styles"
       [theme]="theme"
+      [useFastIcons]="useFastIcons"
       [usePageCache]="usePageCache"
       [useReducedRowRenderer]="useReducedRowRenderer"
       [viewport]="viewport"
+      [RenderCheckbox]="renderCheckbox && onRenderCheckbox"
       [RenderDetailsFooter]="renderDetailsFooter && onRenderDetailsFooter"
       [RenderDetailsHeader]="renderDetailsHeader && onRenderDetailsHeader"
       [RenderMissingItem]="renderMissingItem && onRenderMissingItem"
@@ -136,6 +141,7 @@ export class FabDetailsListComponent extends ReactWrapperComponent<IDetailsListP
   @Input() isHeaderVisible?: IDetailsListProps['isHeaderVisible'];
   @Input() constrainMode?: IDetailsListProps['constrainMode'];
   @Input() rowElementEventMap?: IDetailsListProps['rowElementEventMap'];
+  @Input() getCellValueKey?: IDetailsListProps['getCellValueKey'];
   @Input() dragDropEvents?: IDetailsListProps['dragDropEvents'];
   @Input() enableShimmer?: IDetailsListProps['enableShimmer'];
   @Input() viewport?: IDetailsListProps['viewport'];
@@ -160,11 +166,14 @@ export class FabDetailsListComponent extends ReactWrapperComponent<IDetailsListP
   @Input() useReducedRowRenderer?: IDetailsListProps['useReducedRowRenderer'];
   @Input() cellStyleProps?: IDetailsListProps['cellStyleProps'];
   @Input() disableSelectionZone?: IDetailsListProps['disableSelectionZone'];
+  @Input() enableUpdateAnimations?: IDetailsListProps['enableUpdateAnimations'];
+  @Input() useFastIcons?: IDetailsListProps['useFastIcons'];
 
   // Inherited members (IWithViewportProps)
   @Input() skipViewportMeasures?: IDetailsListProps['skipViewportMeasures'];
 
   // Render members
+  @Input() renderCheckbox?: InputRendererOptions<IDetailsListCheckboxProps>;
   @Input() renderDetailsFooter?: InputRendererOptions<IDetailsFooterProps>;
   @Input() renderDetailsHeader?: InputRendererOptions<IDetailsHeaderProps>;
   @Input() renderMissingItem?: InputRendererOptions<IMissingItemRenderContext>;
@@ -191,6 +200,10 @@ export class FabDetailsListComponent extends ReactWrapperComponent<IDetailsListP
 
   private readonly _subscriptions: Subscription[] = [];
 
+  onRenderCheckbox: (
+    props?: IDetailsListCheckboxProps,
+    defaultRender?: JsxRenderFunc<IDetailsListCheckboxProps>
+  ) => JSX.Element;
   onRenderDetailsFooter: (
     props?: IDetailsFooterProps,
     defaultRender?: JsxRenderFunc<IDetailsFooterProps>
@@ -218,6 +231,7 @@ export class FabDetailsListComponent extends ReactWrapperComponent<IDetailsListP
   }
 
   ngOnInit() {
+    this.onRenderCheckbox = this.createRenderPropHandler(this.renderCheckbox);
     this.onRenderDetailsFooter = this.createRenderPropHandler(this.renderDetailsFooter);
     this.onRenderDetailsHeader = this.createRenderPropHandler(this.renderDetailsHeader);
     this.onRenderRow = this.createRenderPropHandler(this.renderRow);
@@ -340,9 +354,9 @@ export class FabDetailsListComponent extends ReactWrapperComponent<IDetailsListP
       {},
       omit(options, 'render'),
       renderer &&
-        ({
-          onRender: (item?: any, index?: number, column?: IColumn) => renderer({ item, index, column }),
-        } as Pick<IColumn, 'onRender'>)
+      ({
+        onRender: (item?: any, index?: number, column?: IColumn) => renderer({ item, index, column }),
+      } as Pick<IColumn, 'onRender'>)
     ) as IColumn;
   }
 

libs/fabric/src/lib/components/details-list/directives/details-list-column.directive.ts

@@ -40,6 +40,7 @@ export class DetailsListColumnDirective extends ChangeableItemDirective<IDetails
   @Input() isResizable?: IColumn['isResizable'];
   @Input() isMultiline?: IColumn['isMultiline'];
   @Input() onRender?: IColumn['onRender'];
+  @Input() getValueKey?: IColumn['getValueKey'];
   @Input() onRenderDivider?: IColumn['onRenderDivider'];
   @Input() isFiltered?: IColumn['isFiltered'];
   @Input() isGrouped?: IColumn['isGrouped'];

libs/fabric/src/lib/components/dialog/dialog.component.ts

@@ -121,6 +121,7 @@ export class FabDialogFooterComponent extends ReactWrapperComponent<IDialogFoote
       [responsiveMode]="responsiveMode"
       [closeButtonAriaLabel]="closeButtonAriaLabel"
       [type]="type"
+      [draggableHeaderClassName]="draggableHeaderClassName"
       (onDismiss)="onDismiss.emit($event && $event.nativeEvent)"
     >
       <ReactContent><ng-content></ng-content></ReactContent>
@@ -146,6 +147,7 @@ export class FabDialogContentComponent extends ReactWrapperComponent<IDialogCont
   @Input() responsiveMode?: IDialogContentProps['responsiveMode'];
   @Input() closeButtonAriaLabel?: IDialogContentProps['closeButtonAriaLabel'];
   @Input() type?: IDialogContentProps['type'];
+  @Input() draggableHeaderClassName?: IDialogContentProps['draggableHeaderClassName'];
 
   @Output() readonly onDismiss = new EventEmitter<MouseEvent>();
 

libs/fabric/src/lib/components/divider/divider.component.ts

@@ -17,7 +17,14 @@ import { IVerticalDividerProps } from 'office-ui-fabric-react/lib/Divider';
   selector: 'fab-vertical-divider',
   exportAs: 'fabVerticalDivider',
   template: `
-    <VerticalDivider #reactNode [getClassNames]="getClassNames"> </VerticalDivider>
+    <VerticalDivider
+      #reactNode
+      [getClassNames]="getClassNames"
+      [theme]="theme"
+      [styles]="styles"
+      [className]="className"
+    >
+    </VerticalDivider>
   `,
   styles: ['react-renderer'],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -26,6 +33,9 @@ export class FabDividerComponent extends ReactWrapperComponent<IVerticalDividerP
   @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
 
   @Input() getClassNames?: IVerticalDividerProps['getClassNames'];
+  @Input() theme?: IVerticalDividerProps['theme'];
+  @Input() styles?: IVerticalDividerProps['styles'];
+  @Input() className?: IVerticalDividerProps['className'];
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
     super(elementRef, changeDetectorRef, renderer);

libs/fabric/src/lib/components/dropdown/directives/dropdown-option.directive.ts

@@ -19,5 +19,6 @@ export class DropdownOptionDirective {
   @Input() ariaLabel?: IDropdownOption['ariaLabel'];
   @Input() selected?: IDropdownOption['selected'];
   @Input() disabled?: IDropdownOption['disabled'];
+  @Input() hidden?: IDropdownOption['hidden'];
   @Input() data?: IDropdownOption['data'];
 }

libs/fabric/src/lib/components/dropdown/dropdown.component.ts

@@ -39,6 +39,7 @@ import { DropdownOptionsDirective } from './directives/dropdown-options.directiv
       [panelProps]="panelProps"
       [errorMessage]="errorMessage"
       [placeholder]="placeholder"
+      [openOnKeyboardFocus]="openOnKeyboardFocus"
       [options]="options"
       [dropdownWidth]="dropdownWidth"
       [responsiveMode]="responsiveMode"
@@ -54,6 +55,7 @@ import { DropdownOptionsDirective } from './directives/dropdown-options.directiv
       [RenderList]="renderList && onRenderList"
       [RenderItem]="renderItem && onRenderItem"
       [RenderOption]="renderOption && onRenderOption"
+      [RenderPlaceholder]="renderPlaceholder && onRenderPlaceholder"
       [RenderPlaceHolder]="renderPlaceHolder && onRenderPlaceHolder"
       [RenderTitle]="renderTitle && onRenderTitle"
       [RenderCaretDown]="renderCaretDown && onRenderCaretDown"
@@ -80,8 +82,9 @@ export class FabDropdownComponent extends ReactWrapperComponent<IDropdownProps>
   @Input() calloutProps?: IDropdownProps['calloutProps'];
   @Input() panelProps?: IDropdownProps['panelProps'];
   @Input() errorMessage?: IDropdownProps['errorMessage'];
+  @Input() placeholder?: IDropdownProps['placeholder'];
+  @Input() openOnKeyboardFocus?: IDropdownProps['openOnKeyboardFocus'];
 
-  @Input() placeholder: IDropdownProps['placeholder'];
   @Input() options: IDropdownProps['options'];
   @Input() dropdownWidth?: IDropdownProps['dropdownWidth'];
   @Input() responsiveMode?: IDropdownProps['responsiveMode'];
@@ -98,6 +101,7 @@ export class FabDropdownComponent extends ReactWrapperComponent<IDropdownProps>
   @Input() renderList?: InputRendererOptions<ISelectableDroppableTextProps<IDropdown>>;
   @Input() renderItem?: InputRendererOptions<ISelectableOption>;
   @Input() renderOption?: InputRendererOptions<ISelectableOption>;
+  @Input() renderPlaceholder?: InputRendererOptions<IDropdownProps>;
   @Input() renderPlaceHolder?: InputRendererOptions<IDropdownProps>;
   @Input() renderTitle?: InputRendererOptions<IDropdownOption | IDropdownOption[]>;
   @Input() renderCaretDown?: InputRendererOptions<IDropdownProps>;
@@ -115,6 +119,7 @@ export class FabDropdownComponent extends ReactWrapperComponent<IDropdownProps>
   ) => JSX.Element;
   onRenderItem: (props?: ISelectableOption, defaultRender?: JsxRenderFunc<ISelectableOption>) => JSX.Element;
   onRenderOption: (props?: ISelectableOption, defaultRender?: JsxRenderFunc<ISelectableOption>) => JSX.Element;
+  onRenderPlaceholder: (props?: IDropdownProps, defaultRender?: JsxRenderFunc<IDropdownProps>) => JSX.Element;
   onRenderPlaceHolder: (props?: IDropdownProps, defaultRender?: JsxRenderFunc<IDropdownProps>) => JSX.Element;
   onRenderTitle: (
     props?: IDropdownOption | IDropdownOption[],
@@ -134,6 +139,7 @@ export class FabDropdownComponent extends ReactWrapperComponent<IDropdownProps>
     this.onRenderList = this.createRenderPropHandler(this.renderList);
     this.onRenderItem = this.createRenderPropHandler(this.renderItem);
     this.onRenderOption = this.createRenderPropHandler(this.renderOption);
+    this.onRenderPlaceholder = this.createRenderPropHandler(this.renderPlaceholder);
     this.onRenderPlaceHolder = this.createRenderPropHandler(this.renderPlaceHolder);
     this.onRenderTitle = this.createRenderPropHandler(this.renderTitle);
     this.onRenderCaretDown = this.createRenderPropHandler(this.renderCaretDown);