[Fabric] Upgrade office-ui-fabric-react to v6.201.1 (#135)

* Update to Fabric v6.201.1

* Minor binding fixes

Author: xjerwa

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;
   }