[Fabric] upgrade office-ui-fabric-react

libs/fabric/package.json

@@ -44,12 +44,12 @@
   ],
   "private": false,
   "peerDependencies": {
-    "@angular-react/core": "^0.5.12",
+    "@angular-react/core": "^0.5.13",
     "@angular/common": "^7.0.3",
     "@angular/core": "^7.0.3",
     "@angular/platform-browser-dynamic": "^7.0.3",
     "@angular/platform-browser": "^7.0.3",
-    "office-ui-fabric-react": "6.110.0",
+    "office-ui-fabric-react": "6.151.0",
     "react-dom": "^16.6.3",
     "react": "^16.6.3"
   }

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

@@ -41,6 +41,8 @@ import { ICalendarProps } from 'office-ui-fabric-react/lib/Calendar';
       [dateTimeFormatter]="dateTimeFormatter"
       [minDate]="minDate"
       [maxDate]="maxDate"
+      [maxDate]="restrictedDates"
+      [restrictedDates]="restrictedDates"
       [showSixWeeksByDefault]="showSixWeeksByDefault"
       [workWeekDays]="workWeekDays"
       [selectDateOnClick]="selectDateOnClick"
@@ -78,6 +80,7 @@ export class FabCalendarComponent extends ReactWrapperComponent<ICalendarProps>
   @Input() dateTimeFormatter?: ICalendarProps['dateTimeFormatter'];
   @Input() minDate?: ICalendarProps['minDate'];
   @Input() maxDate?: ICalendarProps['maxDate'];
+  @Input() restrictedDates?: ICalendarProps['restrictedDates'];
   @Input() showSixWeeksByDefault?: ICalendarProps['showSixWeeksByDefault'];
   @Input() workWeekDays?: ICalendarProps['workWeekDays'];
   @Input() selectDateOnClick?: ICalendarProps['selectDateOnClick'];

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

@@ -34,6 +34,7 @@ import { ICalloutPositionedInfo } from 'office-ui-fabric-react/lib/utilities/pos
       [minPagePadding]="minPagePadding"
       [isBeakVisible]="isBeakVisible"
       [preventDismissOnScroll]="preventDismissOnScroll"
+      [preventDismissOnResize]="preventDismissOnResize"
       [preventDismissOnLostFocus]="preventDismissOnLostFocus"
       [coverTarget]="coverTarget"
       [alignTargetEdge]="alignTargetEdge"
@@ -78,6 +79,7 @@ export class FabCalloutComponent extends ReactWrapperComponent<ICalloutProps> {
   @Input() minPagePadding?: ICalloutProps['minPagePadding'];
   @Input() isBeakVisible?: ICalloutProps['isBeakVisible'];
   @Input() preventDismissOnScroll?: ICalloutProps['preventDismissOnScroll'];
+  @Input() preventDismissOnResize?: ICalloutProps['preventDismissOnResize'];
   @Input() preventDismissOnLostFocus?: ICalloutProps['preventDismissOnLostFocus'];
   @Input() coverTarget?: ICalloutProps['coverTarget'];
   @Input() alignTargetEdge?: ICalloutProps['alignTargetEdge'];

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

@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Callout } from 'office-ui-fabric-react';
+import { Callout, FocusTrapCallout } from 'office-ui-fabric-react';
 import { FabCalloutComponent } from './callout.component';
 
 const components = [FabCalloutComponent];
@@ -19,5 +19,6 @@ export class FabCalloutModule {
   constructor() {
     // Add any React elements to the registry (used by the renderer).
     registerElement('Callout', () => Callout);
+    registerElement('FocusTrapCallout', () => FocusTrapCallout);
   }
 }

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

@@ -0,0 +1,113 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { ReactWrapperComponent } from '@angular-react/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
+import { IFocusTrapCalloutProps } from 'office-ui-fabric-react';
+import { ICalloutPositionedInfo } from 'office-ui-fabric-react/lib/utilities/positioning';
+
+@Component({
+  selector: 'fab-focus-trap-callout',
+  exportAs: 'fabFocusTrapCallout',
+  template: `
+    <FocusTrapCallout
+      #reactNode
+     #reactNode
+      [componentRef]="componentRef"
+      [target]="target"
+      [directionalHint]="directionalHint"
+      [directionalHintForRTL]="directionalHintForRTL"
+      [gapSpace]="gapSpace"
+      [beakWidth]="beakWidth"
+      [calloutWidth]="calloutWidth"
+      [backgroundColor]="backgroundColor"
+      [bounds]="bounds"
+      [minPagePadding]="minPagePadding"
+      [isBeakVisible]="isBeakVisible"
+      [preventDismissOnScroll]="preventDismissOnScroll"
+      [preventDismissOnResize]="preventDismissOnResize"
+      [preventDismissOnLostFocus]="preventDismissOnLostFocus"
+      [coverTarget]="coverTarget"
+      [alignTargetEdge]="alignTargetEdge"
+      [role]="role"
+      [ariaLabel]="ariaLabel"
+      [ariaLabelledBy]="ariaLabelledBy"
+      [ariaDescribedBy]="ariaDescribedBy"
+      [className]="className"
+      [layerProps]="layerProps"
+      [doNotLayer]="doNotLayer"
+      [directionalHintFixed]="directionalHintFixed"
+      [finalHeight]="finalHeight"
+      [hideOverflow]="hideOverflow"
+      [setInitialFocus]="setInitialFocus"
+      [calloutMaxHeight]="calloutMaxHeight"
+      [theme]="theme"
+      [styles]="styles"
+      [hidden]="hidden"
+      [focusTrapProps]="focusTrapProps"
+      (onLayerMounted)="onLayerMounted.emit()"
+      (onPositioned)="onPositioned.emit($event)"
+      (onDismiss)="onDismiss.emit($event)"
+      (onScroll)="onScroll.emit()"
+    >
+      <ReactContent><ng-content></ng-content></ReactContent>
+    </Callout>
+  `,
+  styles: ['react-renderer'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FabFocusTrapCalloutComponent extends ReactWrapperComponent<IFocusTrapCalloutProps> {
+  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+
+  @Input() componentRef?: IFocusTrapCalloutProps['componentRef'];
+  @Input() target?: IFocusTrapCalloutProps['target'];
+  @Input() directionalHint?: IFocusTrapCalloutProps['directionalHint'];
+  @Input() directionalHintForRTL?: IFocusTrapCalloutProps['directionalHintForRTL'];
+  @Input() gapSpace?: IFocusTrapCalloutProps['gapSpace'];
+  @Input() beakWidth?: IFocusTrapCalloutProps['beakWidth'];
+  @Input() calloutWidth?: IFocusTrapCalloutProps['calloutWidth'];
+  @Input() backgroundColor?: IFocusTrapCalloutProps['backgroundColor'];
+  @Input() bounds?: IFocusTrapCalloutProps['bounds'];
+  @Input() minPagePadding?: IFocusTrapCalloutProps['minPagePadding'];
+  @Input() isBeakVisible?: IFocusTrapCalloutProps['isBeakVisible'];
+  @Input() preventDismissOnScroll?: IFocusTrapCalloutProps['preventDismissOnScroll'];
+  @Input() preventDismissOnResize?: IFocusTrapCalloutProps['preventDismissOnResize'];
+  @Input() preventDismissOnLostFocus?: IFocusTrapCalloutProps['preventDismissOnLostFocus'];
+  @Input() coverTarget?: IFocusTrapCalloutProps['coverTarget'];
+  @Input() alignTargetEdge?: IFocusTrapCalloutProps['alignTargetEdge'];
+  @Input() role?: IFocusTrapCalloutProps['role'];
+  @Input() ariaLabel?: IFocusTrapCalloutProps['ariaLabel'];
+  @Input() ariaLabelledBy?: IFocusTrapCalloutProps['ariaLabelledBy'];
+  @Input() ariaDescribedBy?: IFocusTrapCalloutProps['ariaDescribedBy'];
+  @Input() className?: IFocusTrapCalloutProps['className'];
+  @Input() layerProps?: IFocusTrapCalloutProps['layerProps'];
+  @Input() doNotLayer?: IFocusTrapCalloutProps['doNotLayer'];
+  @Input() directionalHintFixed?: IFocusTrapCalloutProps['directionalHintFixed'];
+  @Input() finalHeight?: IFocusTrapCalloutProps['finalHeight'];
+  @Input() hideOverflow?: IFocusTrapCalloutProps['hideOverflow'];
+  @Input() setInitialFocus?: IFocusTrapCalloutProps['setInitialFocus'];
+  @Input() calloutMaxHeight?: IFocusTrapCalloutProps['calloutMaxHeight'];
+  @Input() theme?: IFocusTrapCalloutProps['theme'];
+  @Input() styles?: IFocusTrapCalloutProps['styles'];
+  @Input() hidden?: IFocusTrapCalloutProps['hidden'];
+  @Input() focusTrapProps?: IFocusTrapCalloutProps['focusTrapProps'];
+
+  @Output() readonly onLayerMounted = new EventEmitter<void>();
+  @Output() readonly onPositioned = new EventEmitter<{ positions?: ICalloutPositionedInfo }>();
+  @Output() readonly onDismiss = new EventEmitter<{ ev?: any }>();
+  @Output() readonly onScroll = new EventEmitter<void>();
+
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
+  }
+}

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

@@ -12,6 +12,7 @@ export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<ICo
   @Input() autoComplete?: IComboBoxProps['autoComplete'];
   @Input() text?: IComboBoxProps['text'];
   @Input() buttonIconProps?: IComboBoxProps['buttonIconProps'];
+  @Input() autofill?: IComboBoxProps['autofill'];
   @Input() theme?: IComboBoxProps['theme'];
   @Input() styles?: IComboBoxProps['styles'];
   @Input() getClassNames?: IComboBoxProps['getClassNames'];
@@ -22,6 +23,7 @@ export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<ICo
   @Input() useComboBoxAsMenuWidth?: IComboBoxProps['useComboBoxAsMenuWidth'];
   @Input() multiSelect?: IComboBoxProps['multiSelect'];
   @Input() isButtonAriaHidden?: IComboBoxProps['isButtonAriaHidden'];
+  @Input() ariaDescribedBy?: IComboBoxProps['ariaDescribedBy'];
   @Input() keytipProps?: IComboBoxProps['keytipProps'];
   @Input() resolveOptions?: (options: IComboBoxOption[]) => IComboBoxOption[] | PromiseLike<IComboBoxOption[]>;
 

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

@@ -24,6 +24,7 @@ import { FabBaseComboBoxComponent } from './base-combo-box.component';
       [autoComplete]="autoComplete"
       [text]="text"
       [buttonIconProps]="buttonIconProps"
+      [autofill]="autofill"
       [theme]="theme"
       [styles]="styles"
       [getClassNames]="getClassNames"
@@ -34,6 +35,7 @@ import { FabBaseComboBoxComponent } from './base-combo-box.component';
       [useComboBoxAsMenuWidth]="useComboBoxAsMenuWidth"
       [multiSelect]="multiSelect"
       [isButtonAriaHidden]="isButtonAriaHidden"
+      [ariaDescribedBy]="ariaDescribedBy"
       [keytipProps]="keytipProps"
       [RenderLowerContent]="renderLowerContent && onRenderLowerContent"
       [ItemClick]="onItemClickHandler"

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

@@ -24,6 +24,7 @@ import { FabBaseComboBoxComponent } from './base-combo-box.component';
       [autoComplete]="autoComplete"
       [text]="text"
       [buttonIconProps]="buttonIconProps"
+      [autofill]="autofill"
       [theme]="theme"
       [styles]="styles"
       [getClassNames]="getClassNames"
@@ -34,6 +35,7 @@ import { FabBaseComboBoxComponent } from './base-combo-box.component';
       [useComboBoxAsMenuWidth]="useComboBoxAsMenuWidth"
       [multiSelect]="multiSelect"
       [isButtonAriaHidden]="isButtonAriaHidden"
+      [ariaDescribedBy]="ariaDescribedBy"
       [keytipProps]="keytipProps"
       [RenderLowerContent]="renderLowerContent && onRenderLowerContent"
       [ItemClick]="onItemClickHandler"

libs/fabric/src/lib/components/date-picker/date-picker.component.ts

@@ -24,6 +24,7 @@ import { IDatePickerProps } from 'office-ui-fabric-react';
       [componentRef]="componentRef"
       [theme]="theme"
       [calendarProps]="calendarProps"
+      [textField]="textField"
       [calloutProps]="calloutProps"
       [calendarAs]="calendarAs"
       [label]="label"
@@ -71,6 +72,7 @@ export class FabDatePickerComponent extends ReactWrapperComponent<IDatePickerPro
   @Input() theme?: IDatePickerProps['theme'];
   @Input() calloutProps?: IDatePickerProps['calloutProps'];
   @Input() calendarProps?: IDatePickerProps['calendarProps'];
+  @Input() textField?: IDatePickerProps['textField'];
   @Input() calendarAs?: IDatePickerProps['calendarAs'];
   @Input() label?: IDatePickerProps['label'];
   @Input() isRequired?: IDatePickerProps['isRequired'];
@@ -102,6 +104,7 @@ export class FabDatePickerComponent extends ReactWrapperComponent<IDatePickerPro
   @Input() initialPickerDate?: IDatePickerProps['initialPickerDate'];
   @Input() allFocusable?: IDatePickerProps['allFocusable'];
   @Input() showCloseButton?: IDatePickerProps['showCloseButton'];
+  @Input() tabIndex?: IDatePickerProps['tabIndex'];
 
   @Output() readonly onSelectDate = new EventEmitter<{ date: Date | null | undefined }>();
   @Output() readonly onAfterMenuDismiss = new EventEmitter<void>();

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

@@ -28,6 +28,7 @@ import { IListProps } from 'office-ui-fabric-react/lib/List';
       [theme]="theme"
       [styles]="styles"
       [className]="className"
+      [compact]="compact"
       [dragDropEvents]="dragDropEvents"
       [dragDropHelper]="dragDropHelper"
       [eventsToRegister]="eventsToRegister"
@@ -53,9 +54,10 @@ export class FabGroupedListComponent extends ReactWrapperComponent<IGroupedListP
   @ViewChild('reactNode') protected reactNodeRef: ElementRef;
 
   @Input() componentRef?: IGroupedListProps['componentRef'];
-  @Input() theme?: IGroupedListProps['theme']
-  @Input() styles?: IGroupedListProps['styles']
+  @Input() theme?: IGroupedListProps['theme'];
+  @Input() styles?: IGroupedListProps['styles'];
   @Input() className?: IGroupedListProps['className'];
+  @Input() compact?: IGroupedListProps['compact'];
   @Input() dragDropEvents?: IGroupedListProps['dragDropEvents'];
   @Input() dragDropHelper?: IGroupedListProps['dragDropHelper'];
   @Input() eventsToRegister?: IGroupedListProps['eventsToRegister'];

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

@@ -25,6 +25,7 @@ import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
       [imageProps]="imageProps"
       [imageErrorAs]="imageErrorAs"
       [styles]="styles"
+      [theme]="theme"
     >
     </Icon>
   `,
@@ -42,6 +43,7 @@ export class FabIconComponent extends ReactWrapperComponent<IIconProps> {
   @Input() imageProps?: IIconProps['imageProps'];
   @Input() imageErrorAs?: IIconProps['imageErrorAs'];
   @Input() styles?: IIconProps['styles'];
+  @Input() theme?: IIconProps['theme'];
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
     super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true });

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

@@ -25,7 +25,6 @@ import { IMessageBarProps } from 'office-ui-fabric-react/lib/MessageBar';
       #reactNode
       [componentRef]="componentRef"
       [messageBarType]="messageBarType"
-      [ariaLabel]="ariaLabel"
       [isMultiline]="isMultiline"
       [dismissButtonAriaLabel]="dismissButtonAriaLabel"
       [truncated]="truncated"
@@ -47,7 +46,6 @@ export class FabMessageBarComponent extends ReactWrapperComponent<IMessageBarPro
 
   @Input() componentRef?: IMessageBarProps['componentRef'];
   @Input() messageBarType?: IMessageBarProps['messageBarType'];
-  @Input() ariaLabel?: IMessageBarProps['ariaLabel'];
   @Input() isMultiline?: IMessageBarProps['isMultiline'];
   @Input() dismissButtonAriaLabel?: IMessageBarProps['dismissButtonAriaLabel'];
   @Input() truncated?: IMessageBarProps['truncated'];

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

@@ -35,6 +35,7 @@ import { IWithResponsiveModeState } from 'office-ui-fabric-react/lib/utilities/d
       [isDarkOverlay]="isDarkOverlay"
       [layerProps]="layerProps"
       [isBlocking]="isBlocking"
+      [isModeless]="isModeless"
       [className]="className"
       [containerClassName]="containerClassName"
       [scrollableContentClassName]="scrollableContentClassName"
@@ -69,6 +70,7 @@ export class FabModalComponent extends ReactWrapperComponent<IModalProps>
   @Input() isDarkOverlay?: IModalProps['isDarkOverlay'];
   @Input() layerProps?: IModalProps['layerProps'];
   @Input() isBlocking?: IModalProps['isBlocking'];
+  @Input() isModeless?: IModalProps['isModeless'];
   @Input() className?: IModalProps['className'];
   @Input() containerClassName?: IModalProps['containerClassName'];
   @Input() scrollableContentClassName?: IModalProps['scrollableContentClassName'];

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

@@ -47,6 +47,7 @@ import { IPanelHeaderRenderer, IPanelProps } from 'office-ui-fabric-react/lib/Pa
       [componentId]="componentId"
       [RenderHeader]="renderHeader && onRenderHeader"
       [RenderNavigation]="renderNavigation && onRenderNavigation"
+      [RenderNavigationContent]="renderNavigationContent && onRenderNavigationContent"
       [RenderBody]="renderBody && onRenderBody"
       [RenderFooter]="renderFooter && onRenderFooter"
       [RenderFooterContent]="renderFooterContent && onRenderFooterContent"
@@ -87,6 +88,7 @@ export class FabPanelComponent extends ReactWrapperComponent<IPanelProps> implem
   @Input() componentId?: IPanelProps['componentId'];
 
   @Input() renderNavigation?: InputRendererOptions<IPanelProps>;
+  @Input() renderNavigationContent?: InputRendererOptions<IPanelProps>;
   @Input() renderHeader?: InputRendererOptions<IPanelHeaderRenderContext>;
   @Input() renderBody?: InputRendererOptions<IPanelProps>;
   @Input() renderFooter?: InputRendererOptions<IPanelProps>;
@@ -98,6 +100,7 @@ export class FabPanelComponent extends ReactWrapperComponent<IPanelProps> implem
 
   private _renderHeader: JsxRenderFunc<IPanelHeaderRenderContext>;
   onRenderNavigation: (props?: IPanelProps, defaultRender?: JsxRenderFunc<IPanelProps>) => JSX.Element;
+  onRenderNavigationContent: (props?: IPanelProps, defaultRender?: JsxRenderFunc<IPanelProps>) => JSX.Element;
   onRenderBody: (props?: IPanelProps, defaultRender?: JsxRenderFunc<IPanelProps>) => JSX.Element;
   onRenderFooter: (props?: IPanelProps, defaultRender?: JsxRenderFunc<IPanelProps>) => JSX.Element;
   onRenderFooterContent: (props?: IPanelProps, defaultRender?: JsxRenderFunc<IPanelProps>) => JSX.Element;
@@ -112,6 +115,7 @@ export class FabPanelComponent extends ReactWrapperComponent<IPanelProps> implem
 
   ngOnInit() {
     this.onRenderNavigation = this.createRenderPropHandler(this.renderNavigation);
+    this.onRenderNavigationContent = this.createRenderPropHandler(this.renderNavigationContent);
     this._renderHeader = this.createInputJsxRenderer(this.renderHeader);
     this.onRenderBody = this.createRenderPropHandler(this.renderBody);
     this.onRenderFooter = this.createRenderPropHandler(this.renderFooter);

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

@@ -87,8 +87,8 @@ export class FabPivotItemComponent extends ReactWrapperComponent<IPivotItemProps
       [styles]="styles"
       [theme]="theme"
       [className]="className"
-      [initialSelectedIndex]="initialSelectedIndex"
-      [initialSelectedKey]="initialSelectedKey"
+      [defaultSelectedKey]="defaultSelectedKey"
+      [defaultSelectedIndex]="defaultSelectedIndex"
       [selectedKey]="selectedKey"
       [linkSize]="linkSize"
       [linkFormat]="linkFormat"
@@ -114,8 +114,8 @@ export class FabPivotComponent extends ReactWrapperComponent<IPivotProps> {
   @Input() styles?: IPivotProps['styles'];
   @Input() theme?: IPivotProps['theme'];
   @Input() className?: IPivotProps['className'];
-  @Input() initialSelectedIndex?: IPivotProps['initialSelectedIndex'];
-  @Input() initialSelectedKey?: IPivotProps['initialSelectedKey'];
+  @Input() defaultSelectedKey?: IPivotProps['defaultSelectedKey'];
+  @Input() defaultSelectedIndex?: IPivotProps['defaultSelectedIndex'];
   @Input() selectedKey?: IPivotProps['selectedKey'];
   @Input() linkSize?: IPivotProps['linkSize'];
   @Input() linkFormat?: IPivotProps['linkFormat'];

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

@@ -37,6 +37,7 @@ import { ISliderProps } from 'office-ui-fabric-react/lib/Slider';
       [disabled]="disabled"
       [className]="className"
       [buttonProps]="buttonProps"
+      [valueFormat]="valueFormat"
       [Changed]="onChangedHandler"
       (onChange)="onChange.emit($event)"
     >
@@ -64,6 +65,7 @@ export class FabSliderComponent extends ReactWrapperComponent<ISliderProps> {
   @Input() disabled?: ISliderProps['disabled'];
   @Input() className?: ISliderProps['className'];
   @Input() buttonProps?: ISliderProps['buttonProps'];
+  @Input() valueFormat?: ISliderProps['valueFormat'];
 
   @Output() readonly onChange = new EventEmitter<number>();
   @Output() readonly onChanged = new EventEmitter<{ event: MouseEvent | TouchEvent; value: number }>();