Upgrade office-ui-fabric-react to 6.73.0

.vscode/settings.json

@@ -16,6 +16,7 @@
     "messagebar",
     "nrwl",
     "renderprop",
+    "scrollable",
     "submenu",
     "uifabric",
     "unmount",

libs/fabric/package.json

@@ -75,7 +75,7 @@
     "@angular/core": "^6.1.0",
     "@angular/platform-browser-dynamic": "^6.1.0",
     "@angular/platform-browser": "^6.1.0",
-    "office-ui-fabric-react": "6.43.0",
+    "office-ui-fabric-react": "6.73.0",
     "react-dom": "^16.4.1",
     "react": "^16.4.1"
   }

libs/fabric/src/lib/components/button/action-button.component.ts

@@ -31,7 +31,7 @@ import { FabBaseButtonComponent } from './base-button.component';
       [splitButtonAriaLabel]="splitButtonAriaLabel"
       [menuAs]="menuAs"
       [secondaryText]="secondaryText"
-      [toggled]="toggled"
+      [toggle]="toggle"
       [data]="data"
       [getClassNames]="getClassNames"
       [getSplitButtonClassNames]="getSplitButtonClassNames"

libs/fabric/src/lib/components/button/base-button.component.ts

@@ -49,7 +49,7 @@ export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButt
   @Input()
   secondaryText?: IButtonProps['secondaryText'];
   @Input()
-  toggled?: IButtonProps['toggled'];
+  toggled?: IButtonProps['toggle'];
   @Input()
   data?: IButtonProps['data'];
   @Input()

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

@@ -31,7 +31,7 @@ import { FabBaseButtonComponent } from './base-button.component';
       [splitButtonAriaLabel]="splitButtonAriaLabel"
       [menuAs]="menuAs"
       [secondaryText]="secondaryText"
-      [toggled]="toggled"
+      [toggle]="toggle"
       [data]="data"
       [getClassNames]="getClassNames"
       [getSplitButtonClassNames]="getSplitButtonClassNames"

libs/fabric/src/lib/components/button/compound-button.component.ts

@@ -31,7 +31,7 @@ import { FabBaseButtonComponent } from './base-button.component';
       [splitButtonAriaLabel]="splitButtonAriaLabel"
       [menuAs]="menuAs"
       [secondaryText]="secondaryText"
-      [toggled]="toggled"
+      [toggle]="toggle"
       [data]="data"
       [getClassNames]="getClassNames"
       [getSplitButtonClassNames]="getSplitButtonClassNames"

libs/fabric/src/lib/components/button/default-button.component.ts

@@ -31,7 +31,7 @@ import { FabBaseButtonComponent } from './base-button.component';
       [splitButtonAriaLabel]="splitButtonAriaLabel"
       [menuAs]="menuAs"
       [secondaryText]="secondaryText"
-      [toggled]="toggled"
+      [toggle]="toggle"
       [data]="data"
       [getClassNames]="getClassNames"
       [getSplitButtonClassNames]="getSplitButtonClassNames"

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

@@ -31,7 +31,7 @@ import { FabBaseButtonComponent } from './base-button.component';
       [splitButtonAriaLabel]="splitButtonAriaLabel"
       [menuAs]="menuAs"
       [secondaryText]="secondaryText"
-      [toggled]="toggled"
+      [toggle]="toggle"
       [data]="data"
       [getClassNames]="getClassNames"
       [getSplitButtonClassNames]="getSplitButtonClassNames"

libs/fabric/src/lib/components/button/messagebar-button.component.ts

@@ -31,7 +31,7 @@ import { FabBaseButtonComponent } from './base-button.component';
       [splitButtonAriaLabel]="splitButtonAriaLabel"
       [menuAs]="menuAs"
       [secondaryText]="secondaryText"
-      [toggled]="toggled"
+      [toggle]="toggle"
       [data]="data"
       [getClassNames]="getClassNames"
       [getSplitButtonClassNames]="getSplitButtonClassNames"

libs/fabric/src/lib/components/button/primary-button.component.ts

@@ -31,7 +31,7 @@ import { FabBaseButtonComponent } from './base-button.component';
       [splitButtonAriaLabel]="splitButtonAriaLabel"
       [menuAs]="menuAs"
       [secondaryText]="secondaryText"
-      [toggled]="toggled"
+      [toggle]="toggle"
       [data]="data"
       [getClassNames]="getClassNames"
       [getSplitButtonClassNames]="getSplitButtonClassNames"

libs/fabric/src/lib/components/button/split-button.component.ts

@@ -31,7 +31,7 @@ import { FabBaseButtonComponent } from './base-button.component';
       [splitButtonAriaLabel]="splitButtonAriaLabel"
       [menuAs]="menuAs"
       [secondaryText]="secondaryText"
-      [toggled]="toggled"
+      [toggle]="toggle"
       [data]="data"
       [getClassNames]="getClassNames"
       [getSplitButtonClassNames]="getSplitButtonClassNames"

libs/fabric/src/lib/components/choice-group/choice-group.component.ts

@@ -2,7 +2,17 @@
 // 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 {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { IChoiceGroupOption, IChoiceGroupProps } from 'office-ui-fabric-react/lib/ChoiceGroup';
 
 @Component({
@@ -19,6 +29,7 @@ import { IChoiceGroupOption, IChoiceGroupProps } from 'office-ui-fabric-react/li
       [required]="required"
       [theme]="theme"
       [styles]="styles"
+      [ariaLabelledBy]="ariaLabelledBy"
       [Changed]="onChangedHandler"
       [Change]="onChangeHandler"
       >
@@ -45,6 +56,8 @@ export class FabChoiceGroupComponent extends ReactWrapperComponent<IChoiceGroupP
   theme?: IChoiceGroupProps['theme'];
   @Input()
   styles?: IChoiceGroupProps['styles'];
+  @Input()
+  ariaLabelledBy?: IChoiceGroupProps['ariaLabelledBy'];
 
   /** HTML Input props */
   @Input()

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

@@ -3,7 +3,7 @@
 
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
 import { ChangeDetectorRef, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2 } from '@angular/core';
-import { IComboBoxOption, IComboBoxProps } from 'office-ui-fabric-react/lib/ComboBox';
+import { IComboBox, IComboBoxOption, IComboBoxProps } from 'office-ui-fabric-react/lib/ComboBox';
 
 export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<IComboBoxProps> implements OnInit {
   @Input()
@@ -47,11 +47,11 @@ export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<ICo
   renderLowerContent?: InputRendererOptions<IComboBoxProps>;
 
   @Output()
-  readonly onChanged = new EventEmitter<{
+  readonly onChange = new EventEmitter<{
+    event: Event;
     option?: IComboBoxOption;
     index?: number;
     value?: string;
-    submitPendingValueEvent?: any;
   }>();
   @Output()
   readonly onPendingValueChanged = new EventEmitter<{ option?: IComboBoxOption; index?: number; value?: string }>();
@@ -68,7 +68,7 @@ export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<ICo
     super(elementRef, changeDetectorRef, renderer);
 
     // coming from React context - we need to bind to this so we can access the Angular Component properties
-    this.onChangedHandler = this.onChangedHandler.bind(this);
+    this.onChangeHandler = this.onChangeHandler.bind(this);
     this.onPendingValueChangedHandler = this.onPendingValueChangedHandler.bind(this);
     this.onScrollToItemHandler = this.onScrollToItemHandler.bind(this);
   }
@@ -77,12 +77,12 @@ export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<ICo
     this.onRenderLowerContent = this.createRenderPropHandler(this.renderLowerContent);
   }
 
-  onChangedHandler(option?: IComboBoxOption, index?: number, value?: string, submitPendingValueEvent?: any) {
-    this.onChanged.emit({
+  onChangeHandler(event: React.FormEvent<IComboBox>, option?: IComboBoxOption, index?: number, value?: string) {
+    this.onChange.emit({
+      event: event.nativeEvent,
       option,
       index,
       value,
-      submitPendingValueEvent,
     });
   }
 

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

@@ -28,7 +28,7 @@ import { FabBaseComboBoxComponent } from './base-combo-box.component';
       [isButtonAriaHidden]="isButtonAriaHidden"
       [keytipProps]="keytipProps"
       [RenderLowerContent]="renderLowerContent && onRenderLowerContent"
-      [Changed]="onChangedHandler"
+      [Change]="onChangeHandler"
       [PendingValueChanged]="onPendingValueChangedHandler"
       [ResolveOptions]="resolveOptions"
       [ScrollToItem]="onScrollToItemHandler"

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

@@ -28,7 +28,7 @@ import { FabBaseComboBoxComponent } from './base-combo-box.component';
       [isButtonAriaHidden]="isButtonAriaHidden"
       [keytipProps]="keytipProps"
       [RenderLowerContent]="renderLowerContent && onRenderLowerContent"
-      [Changed]="onChangedHandler"
+      [Change]="onChangeHandler"
       [PendingValueChanged]="onPendingValueChangedHandler"
       [ResolveOptions]="resolveOptions"
       [ScrollToItem]="onScrollToItemHandler"

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

@@ -27,6 +27,7 @@ import { IDatePickerProps } from 'office-ui-fabric-react';
       [isRequired]="isRequired"
       [disabled]="disabled"
       [ariaLabel]="ariaLabel"
+      [underlined]="underlined"
       [pickerAriaLabel]="pickerAriaLabel"
       [isMonthPickerVisible]="isMonthPickerVisible"
       [showMonthPickerAsOverlay]="showMonthPickerAsOverlay"
@@ -50,6 +51,8 @@ import { IDatePickerProps } from 'office-ui-fabric-react';
       [minDate]="minDate"
       [maxDate]="maxDate"
       [initialPickerDate]="initialPickerDate"
+      [allFocusable]="allFocusable"
+      [showCloseButton]="showCloseButton"
       [SelectDate]="onSelectDateHandler"
       (onAfterMenuDismiss)="onAfterMenuDismiss.emit()">
     </DatePicker>
@@ -74,6 +77,8 @@ export class FabDatePickerComponent extends ReactWrapperComponent<IDatePickerPro
   @Input()
   ariaLabel?: IDatePickerProps['ariaLabel'];
   @Input()
+  underlined?: IDatePickerProps['underlined'];
+  @Input()
   pickerAriaLabel?: IDatePickerProps['pickerAriaLabel'];
   @Input()
   isMonthPickerVisible?: IDatePickerProps['isMonthPickerVisible'];
@@ -119,6 +124,10 @@ export class FabDatePickerComponent extends ReactWrapperComponent<IDatePickerPro
   maxDate?: IDatePickerProps['maxDate'];
   @Input()
   initialPickerDate?: IDatePickerProps['initialPickerDate'];
+  @Input()
+  allFocusable?: IDatePickerProps['allFocusable'];
+  @Input()
+  showCloseButton?: IDatePickerProps['showCloseButton'];
 
   @Output()
   readonly onSelectDate = new EventEmitter<{ date: Date | null | undefined }>();

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

@@ -2,7 +2,17 @@
 // 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 {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { IDialogContentProps, IDialogFooterProps, IDialogProps } from 'office-ui-fabric-react/lib/Dialog';
 
 @Component({
@@ -24,6 +34,8 @@ import { IDialogContentProps, IDialogFooterProps, IDialogProps } from 'office-ui
       [dialogContentProps]="dialogContentProps"
       [hidden]="hidden"
       [modalProps]="modalProps"
+      [minWidth]="minWidth"
+      [maxWidth]="maxWidth"
       (onDismiss)="onDismissHandler($event)">
       <ReactContent><ng-content></ng-content></ReactContent>
     </Dialog>
@@ -61,6 +73,10 @@ export class FabDialogComponent extends ReactWrapperComponent<IDialogProps> {
   hidden?: IDialogProps['hidden'];
   @Input()
   modalProps?: IDialogProps['modalProps'];
+  @Input()
+  minWidth?: IDialogProps['minWidth'];
+  @Input()
+  maxWidth?: IDialogProps['maxWidth'];
 
   @Output()
   readonly onDismiss = new EventEmitter<MouseEvent>();

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

@@ -2,7 +2,17 @@
 // 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 {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { IAccessiblePopupProps } from 'office-ui-fabric-react/lib/common/IAccessiblePopupProps';
 import { IModalProps } from 'office-ui-fabric-react/lib/Modal';
 import { IWithResponsiveModeState } from 'office-ui-fabric-react/lib/utilities/decorators/withResponsiveMode';
@@ -29,6 +39,7 @@ import { IWithResponsiveModeState } from 'office-ui-fabric-react/lib/utilities/d
       [isBlocking]="isBlocking"
       [className]="className"
       [containerClassName]="containerClassName"
+      [scrollableContentClassName]="scrollableContentClassName"
       [titleAriaId]="titleAriaId"
       [subtitleAriaId]="subtitleAriaId"
       [Dismiss]="onDismissHandler"
@@ -74,6 +85,8 @@ export class FabModalComponent extends ReactWrapperComponent<IModalProps>
   @Input()
   containerClassName?: IModalProps['containerClassName'];
   @Input()
+  scrollableContentClassName?: IModalProps['scrollableContentClassName'];
+  @Input()
   titleAriaId?: IModalProps['titleAriaId'];
   @Input()
   subtitleAriaId?: IModalProps['subtitleAriaId'];

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

@@ -2,7 +2,18 @@
 // Licensed under the MIT License.
 
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { IPanelHeaderRenderer, IPanelProps } from 'office-ui-fabric-react/lib/Panel';
 
 @Component({
@@ -19,6 +30,8 @@ import { IPanelHeaderRenderer, IPanelProps } from 'office-ui-fabric-react/lib/Pa
       [isBlocking]="isBlocking"
       [isFooterAtBottom]="isFooterAtBottom"
       [headerText]="headerText"
+      [styles]="styles"
+      [theme]="theme"
       [className]="className"
       [type]="type"
       [customWidth]="customWidth"
@@ -36,7 +49,7 @@ import { IPanelHeaderRenderer, IPanelProps } from 'office-ui-fabric-react/lib/Pa
       [RenderBody]="renderBody && onRenderBody"
       [RenderFooter]="renderFooter && onRenderFooter"
       [RenderFooterContent]="renderFooterContent && onRenderFooterContent"
-      (onDismiss)="onDismiss.emit($event)"
+      [Dismiss]="onDismissHandler"
       (onDismissed)="onDismissed.emit($event)"
       (onLightDismissClick)="onLightDismissClick.emit($event)">
         <ReactContent><ng-content></ng-content></ReactContent>
@@ -66,6 +79,10 @@ export class FabPanelComponent extends ReactWrapperComponent<IPanelProps> implem
   @Input()
   headerText?: IPanelProps['headerText'];
   @Input()
+  styles?: IPanelProps['styles'];
+  @Input()
+  theme?: IPanelProps['theme'];
+  @Input()
   className?: IPanelProps['className'];
   @Input()
   type?: IPanelProps['type'];
@@ -104,7 +121,7 @@ export class FabPanelComponent extends ReactWrapperComponent<IPanelProps> implem
   @Output()
   readonly onLightDismissClick = new EventEmitter<void>();
   @Output()
-  readonly onDismiss = new EventEmitter<void>();
+  readonly onDismiss = new EventEmitter<{ ev?: Event }>();
   @Output()
   readonly onDismissed = new EventEmitter<void>();
 
@@ -119,6 +136,7 @@ export class FabPanelComponent extends ReactWrapperComponent<IPanelProps> implem
 
     // coming from React context - we need to bind to this so we can access the Angular Component properties
     this.onRenderHeader = this.onRenderHeader.bind(this);
+    this.onDismissHandler = this.onDismissHandler.bind(this);
   }
 
   ngOnInit() {
@@ -140,6 +158,12 @@ export class FabPanelComponent extends ReactWrapperComponent<IPanelProps> implem
 
     return this._renderHeader({ props, headerTextId });
   }
+
+  onDismissHandler(ev?: React.SyntheticEvent<HTMLElement>) {
+    this.onDismiss.emit({
+      ev: ev && ev.nativeEvent,
+    });
+  }
 }
 
 /**