Upgrade to Angular 7.0, Fabric 6.110.0; Fix build errors

apps/demo/src/polyfills.ts

@@ -42,7 +42,7 @@
 
 /** Evergreen browsers require these. **/
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-import 'core-js/es7/reflect';
+// import 'core-js/es7/reflect';
 
 /**
  * Required to support Web Animations `@angular/platform-browser/animations`.

apps/docs/src/app/components/navbar/navbar.component.ts

@@ -1,6 +1,5 @@
 import { Component, AfterViewInit, ViewChild, ElementRef, ViewContainerRef, OnInit } from '@angular/core';
-import { fromEvent } from 'rxjs/observable/fromEvent';
-import { throttleTime } from 'rxjs/operators';
+import { fromEvent } from 'rxjs';
 import { SubNavService } from '../../shared/sub-nav.service';
 
 @Component({

apps/docs/src/polyfills.ts

@@ -42,7 +42,7 @@ import 'core-js/es6/set';
 
 /** Evergreen browsers require these. **/
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-import 'core-js/es7/reflect';
+// import 'core-js/es7/reflect';
 
 /**
  * Required to support Web Animations `@angular/platform-browser/animations`.

libs/core/package.json

@@ -51,10 +51,10 @@
   ],
   "private": false,
   "peerDependencies": {
-    "@angular/compiler": "^6.1.0",
-    "@angular/core": "^6.1.0",
-    "@angular/platform-browser-dynamic": "^6.1.0",
-    "@angular/platform-browser": "^6.1.0",
+    "@angular/compiler": "^7.0.3",
+    "@angular/core": "^7.0.3",
+    "@angular/platform-browser-dynamic": "^7.0.3",
+    "@angular/platform-browser": "^7.0.3",
     "react-dom": "^16.4.1",
     "react": "^16.4.1"
   },

libs/core/src/lib/@types/geteventlisteners.d.ts

@@ -1,23 +1,21 @@
-interface EventListener<K extends keyof ElementEventMap> {
+interface IEventListener<K extends keyof ElementEventMap> {
   type: K;
   listener: (ev: ElementEventMap[K]) => void;
   options?: boolean | EventListenerOptions;
 }
 
-type EventListenerArray<K extends keyof ElementEventMap> = EventListener<K>[];
+type IEventListenerArray<K extends keyof ElementEventMap> = IEventListener<K>[];
 
-type EventListenersMap<K extends keyof ElementEventMap> = Record<K, EventListenerArray<K>>;
+type IEventListenersMap<K extends keyof ElementEventMap> = Record<K, IEventListenerArray<K>>;
 
-// declare global {
 interface Element {
   /**
    * Gets all the event listeners of the element.
    */
-  getEventListeners<K extends keyof ElementEventMap>(): EventListenersMap<K>;
+  getEventListeners<K extends keyof ElementEventMap>(): IEventListenersMap<K>;
 
   /**
    * Gets all the event listeners of a type of the element.
    */
-  getEventListeners<K extends keyof ElementEventMap>(type?: K): EventListenerArray<K>;
+  getEventListeners<K extends keyof ElementEventMap>(type?: K): IEventListenerArray<K>;
 }
-// }

libs/core/src/lib/declarations/known-keys.d.ts → libs/core/src/lib/declarations/known-keys.ts

@@ -16,6 +16,6 @@ type KnownKeysOfOptions = KnownKeys<Options>; // 'key' | 'title';
 
  * Taken from https://stackoverflow.com/questions/51465182/typescript-remove-index-signature-using-mapped-types
  */
-type KnownKeys<T> = {
+export type KnownKeys<T> = {
   [K in keyof T]: string extends K ? never : number extends K ? never : K
 } extends { [_ in keyof T]: infer U } ? U : never;

libs/core/src/lib/declarations/omit.d.ts → libs/core/src/lib/declarations/omit.ts

@@ -1,6 +1,8 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
+import { KnownKeys } from './known-keys';
+
 /**
  * Inverse of `Pick<T, K>`.
  */

libs/core/src/lib/declarations/public-api.d.ts → libs/core/src/lib/declarations/public-api.ts

@@ -1,7 +1,6 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-export * from './index-signature';
 export * from './known-keys';
 export * from './many';
 export * from './omit';

libs/fabric/package.json

@@ -71,12 +71,12 @@
   "private": false,
   "peerDependencies": {
     "@angular-react/core": "^0.4.10",
-    "@angular/common": "^6.1.0",
-    "@angular/core": "^6.1.0",
-    "@angular/platform-browser-dynamic": "^6.1.0",
-    "@angular/platform-browser": "^6.1.0",
-    "office-ui-fabric-react": "6.73.0",
-    "react-dom": "^16.4.1",
-    "react": "^16.4.1"
+    "@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",
+    "react-dom": "^16.6.3",
+    "react": "^16.6.3"
   }
 }

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

@@ -23,6 +23,7 @@ import { FabBaseButtonComponent } from './base-button.component';
       [primary]="primary"
       [uniqueId]="uniqueId"
       [disabled]="disabled"
+      [allowDisabledFocus]="allowDisabledFocus"
       [primaryDisabled]="primaryDisabled"
       [styles]="styles"
       [theme]="theme"

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

@@ -11,6 +11,7 @@ export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButt
   @Input() primary?: IButtonProps['primary'];
   @Input() uniqueId?: IButtonProps['uniqueId'];
   @Input() disabled?: IButtonProps['disabled'];
+  @Input() allowDisabledFocus?: IButtonProps['allowDisabledFocus'];
   @Input() primaryDisabled?: IButtonProps['primaryDisabled'];
   @Input() styles?: IButtonProps['styles'];
   @Input() theme?: IButtonProps['theme'];

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

@@ -23,6 +23,7 @@ import { FabBaseButtonComponent } from './base-button.component';
       [primary]="primary"
       [uniqueId]="uniqueId"
       [disabled]="disabled"
+      [allowDisabledFocus]="allowDisabledFocus"
       [primaryDisabled]="primaryDisabled"
       [styles]="styles"
       [theme]="theme"

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

@@ -23,6 +23,7 @@ import { FabBaseButtonComponent } from './base-button.component';
       [primary]="primary"
       [uniqueId]="uniqueId"
       [disabled]="disabled"
+      [allowDisabledFocus]="allowDisabledFocus"
       [primaryDisabled]="primaryDisabled"
       [styles]="styles"
       [theme]="theme"

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

@@ -23,6 +23,7 @@ import { FabBaseButtonComponent } from './base-button.component';
       [primary]="primary"
       [uniqueId]="uniqueId"
       [disabled]="disabled"
+      [allowDisabledFocus]="allowDisabledFocus"
       [primaryDisabled]="primaryDisabled"
       [styles]="styles"
       [theme]="theme"

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

@@ -23,6 +23,7 @@ import { FabBaseButtonComponent } from './base-button.component';
       [primary]="primary"
       [uniqueId]="uniqueId"
       [disabled]="disabled"
+      [allowDisabledFocus]="allowDisabledFocus"
       [primaryDisabled]="primaryDisabled"
       [styles]="styles"
       [theme]="theme"

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

@@ -23,6 +23,7 @@ import { FabBaseButtonComponent } from './base-button.component';
       [primary]="primary"
       [uniqueId]="uniqueId"
       [disabled]="disabled"
+      [allowDisabledFocus]="allowDisabledFocus"
       [primaryDisabled]="primaryDisabled"
       [styles]="styles"
       [theme]="theme"

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

@@ -23,6 +23,7 @@ import { FabBaseButtonComponent } from './base-button.component';
       [primary]="primary"
       [uniqueId]="uniqueId"
       [disabled]="disabled"
+      [allowDisabledFocus]="allowDisabledFocus"
       [primaryDisabled]="primaryDisabled"
       [styles]="styles"
       [theme]="theme"

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

@@ -23,6 +23,7 @@ import { FabBaseButtonComponent } from './base-button.component';
       [primary]="primary"
       [uniqueId]="uniqueId"
       [disabled]="disabled"
+      [allowDisabledFocus]="allowDisabledFocus"
       [primaryDisabled]="primaryDisabled"
       [styles]="styles"
       [theme]="theme"

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

@@ -46,6 +46,7 @@ import { ICalendarProps } from 'office-ui-fabric-react/lib/Calendar';
       [selectDateOnClick]="selectDateOnClick"
       [showCloseButton]="showCloseButton"
       [allFocusable]="allFocusable"
+      [yearPickerHidden]="yearPickerHidden"
       [SelectDate]="onSelectDateHandler"
       [Dismiss]="onDismissHandler"
     >
@@ -82,6 +83,7 @@ export class FabCalendarComponent extends ReactWrapperComponent<ICalendarProps>
   @Input() selectDateOnClick?: ICalendarProps['selectDateOnClick'];
   @Input() showCloseButton?: ICalendarProps['showCloseButton'];
   @Input() allFocusable?: ICalendarProps['allFocusable'];
+  @Input() yearPickerHidden?: ICalendarProps['yearPickerHidden'];
 
   @Output() readonly onSelectDate = new EventEmitter<{ date: Date; selectedDateRangeArray?: Date[] }>();
   @Output() readonly onDismiss = new EventEmitter<void>();

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

@@ -36,11 +36,13 @@ import { ICalloutPositionedInfo } from 'office-ui-fabric-react/lib/utilities/pos
       [preventDismissOnScroll]="preventDismissOnScroll"
       [preventDismissOnLostFocus]="preventDismissOnLostFocus"
       [coverTarget]="coverTarget"
+      [alignTargetEdge]="alignTargetEdge"
       [role]="role"
       [ariaLabel]="ariaLabel"
       [ariaLabelledBy]="ariaLabelledBy"
       [ariaDescribedBy]="ariaDescribedBy"
       [className]="className"
+      [layerProps]="layerProps"
       [doNotLayer]="doNotLayer"
       [directionalHintFixed]="directionalHintFixed"
       [finalHeight]="finalHeight"
@@ -78,11 +80,13 @@ export class FabCalloutComponent extends ReactWrapperComponent<ICalloutProps> {
   @Input() preventDismissOnScroll?: ICalloutProps['preventDismissOnScroll'];
   @Input() preventDismissOnLostFocus?: ICalloutProps['preventDismissOnLostFocus'];
   @Input() coverTarget?: ICalloutProps['coverTarget'];
+  @Input() alignTargetEdge?: ICalloutProps['alignTargetEdge'];
   @Input() role?: ICalloutProps['role'];
   @Input() ariaLabel?: ICalloutProps['ariaLabel'];
   @Input() ariaLabelledBy?: ICalloutProps['ariaLabelledBy'];
   @Input() ariaDescribedBy?: ICalloutProps['ariaDescribedBy'];
   @Input() className?: ICalloutProps['className'];
+  @Input() layerProps?: ICalloutProps['layerProps'];
   @Input() doNotLayer?: ICalloutProps['doNotLayer'];
   @Input() directionalHintFixed?: ICalloutProps['directionalHintFixed'];
   @Input() finalHeight?: ICalloutProps['finalHeight'];

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

@@ -27,6 +27,11 @@ export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<ICo
 
   @Input() renderLowerContent?: InputRendererOptions<IComboBoxProps>;
 
+  @Output() readonly onItemClick = new EventEmitter<{
+    event: Event;
+    option?: IComboBoxOption;
+    index?: number;
+  }>();
   @Output() readonly onChange = new EventEmitter<{
     event: Event;
     option?: IComboBoxOption;
@@ -48,6 +53,7 @@ export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<ICo
     super(elementRef, changeDetectorRef, renderer, { ngZone });
 
     // coming from React context - we need to bind to this so we can access the Angular Component properties
+    this.onItemClickHandler = this.onItemClickHandler.bind(this);
     this.onChangeHandler = this.onChangeHandler.bind(this);
     this.onPendingValueChangedHandler = this.onPendingValueChangedHandler.bind(this);
     this.onScrollToItemHandler = this.onScrollToItemHandler.bind(this);
@@ -57,6 +63,14 @@ export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<ICo
     this.onRenderLowerContent = this.createRenderPropHandler(this.renderLowerContent);
   }
 
+  onItemClickHandler(event: React.FormEvent<IComboBox>, option?: IComboBoxOption, index?: number) {
+    this.onItemClick.emit({
+      event: event.nativeEvent,
+      option,
+      index,
+    });
+  }
+
   onChangeHandler(event: React.FormEvent<IComboBox>, option?: IComboBoxOption, index?: number, value?: string) {
     this.onChange.emit({
       event: event.nativeEvent,

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

@@ -36,6 +36,7 @@ import { FabBaseComboBoxComponent } from './base-combo-box.component';
       [isButtonAriaHidden]="isButtonAriaHidden"
       [keytipProps]="keytipProps"
       [RenderLowerContent]="renderLowerContent && onRenderLowerContent"
+      [ItemClick]="onItemClickHandler"
       [Change]="onChangeHandler"
       [PendingValueChanged]="onPendingValueChangedHandler"
       [ResolveOptions]="resolveOptions"

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

@@ -36,6 +36,7 @@ import { FabBaseComboBoxComponent } from './base-combo-box.component';
       [isButtonAriaHidden]="isButtonAriaHidden"
       [keytipProps]="keytipProps"
       [RenderLowerContent]="renderLowerContent && onRenderLowerContent"
+      [ItemClick]="onItemClickHandler"
       [Change]="onChangeHandler"
       [PendingValueChanged]="onPendingValueChangedHandler"
       [ResolveOptions]="resolveOptions"

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

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { InputRendererOptions, ReactWrapperComponent } from '@angular-react/core';
+import { InputRendererOptions, KnownKeys, ReactWrapperComponent } from '@angular-react/core';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,

libs/fabric/src/lib/components/command-bar/directives/command-bar-item.directives.ts

@@ -36,9 +36,11 @@ export class CommandBarItemDirective extends ContextualMenuItemDirective
 
   // ICommandBarItemOptions implementation
   @Input() iconOnly?: ICommandBarItemOptions['iconOnly'];
+  @Input() tooltipHostProps?: ICommandBarItemOptions['tooltipHostProps'];
   @Input() buttonStyles?: ICommandBarItemOptions['buttonStyles'];
   @Input() cacheKey?: ICommandBarItemOptions['cacheKey'];
   @Input() renderedInOverflow?: ICommandBarItemOptions['renderedInOverflow'];
+  @Input() commandBarButtonAs?: ICommandBarItemOptions['commandBarButtonAs'];
   @Input() render: ICommandBarItemOptions['render'];
   @Input() renderIcon: ICommandBarItemOptions['renderIcon'];
 

libs/fabric/src/lib/components/contextual-menu/directives/contextual-menu-item.directive.ts

@@ -47,6 +47,7 @@ export class ContextualMenuItemDirective extends ChangeableItemDirective<IContex
   @Input() rel?: IContextualMenuItem['rel'];
   @Input() subMenuProps?: IContextualMenuItem['subMenuProps'];
   @Input() getItemClassNames?: IContextualMenuItem['getItemClassNames'];
+  @Input() itemProps?: IContextualMenuItem['itemProps'];
   @Input() getSplitButtonVerticalDividerClassNames?: IContextualMenuItem['getSplitButtonVerticalDividerClassNames'];
   @Input() sectionProps?: IContextualMenuItem['sectionProps'];
   @Input() className?: IContextualMenuItem['className'];

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

@@ -22,7 +22,10 @@ import { IDatePickerProps } from 'office-ui-fabric-react';
     <DatePicker
       #reactNode
       [componentRef]="componentRef"
+      [theme]="theme"
       [calendarProps]="calendarProps"
+      [calloutProps]="calloutProps"
+      [calendarAs]="calendarAs"
       [label]="label"
       [isRequired]="isRequired"
       [disabled]="disabled"
@@ -65,7 +68,10 @@ export class FabDatePickerComponent extends ReactWrapperComponent<IDatePickerPro
   @ViewChild('reactNode') protected reactNodeRef: ElementRef;
 
   @Input() componentRef?: IDatePickerProps['componentRef'];
+  @Input() theme?: IDatePickerProps['theme'];
+  @Input() calloutProps?: IDatePickerProps['calloutProps'];
   @Input() calendarProps?: IDatePickerProps['calendarProps'];
+  @Input() calendarAs?: IDatePickerProps['calendarAs'];
   @Input() label?: IDatePickerProps['label'];
   @Input() isRequired?: IDatePickerProps['isRequired'];
   @Input() disabled?: IDatePickerProps['disabled'];

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

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 import { AfterContentInit, ContentChild, Directive, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
-import { InputRendererOptions } from '@angular-react/core';
+import { InputRendererOptions, KnownKeys } from '@angular-react/core';
 import { IColumn } from 'office-ui-fabric-react';
 
 import { ChangeableItemDirective } from '../../core/shared/changeable-item.directive';

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

@@ -15,7 +15,7 @@ import {
   Renderer2,
   ViewChild,
 } from '@angular/core';
-import { IGroupedListProps, IGroupRenderProps } from 'office-ui-fabric-react/lib/GroupedList';
+import { IGroup, IGroupedListProps, IGroupRenderProps } from 'office-ui-fabric-react/lib/GroupedList';
 import { IListProps } from 'office-ui-fabric-react/lib/List';
 
 @Component({
@@ -25,10 +25,13 @@ import { IListProps } from 'office-ui-fabric-react/lib/List';
     <GroupedList
       #reactNode
       [componentRef]="componentRef"
+      [theme]="theme"
+      [styles]="styles"
       [className]="className"
       [dragDropEvents]="dragDropEvents"
       [dragDropHelper]="dragDropHelper"
       [eventsToRegister]="eventsToRegister"
+      [groupProps]="groupProps"
       [groups]="groups"
       [items]="items"
       [listProps]="listProps"
@@ -37,7 +40,7 @@ import { IListProps } from 'office-ui-fabric-react/lib/List';
       [viewport]="viewport"
       [usePageCache]="usePageCache"
       [shouldVirtualize]="shouldVirtualize"
-      [groupProps]="groupProps"
+      [getGroupHeight]="getGroupHeight"
       [RenderCell]="renderCell && onRenderCell"
       [GroupExpandStateChanged]="onGroupExpandStateChangedHandler"
     >
@@ -50,10 +53,13 @@ export class FabGroupedListComponent extends ReactWrapperComponent<IGroupedListP
   @ViewChild('reactNode') protected reactNodeRef: ElementRef;
 
   @Input() componentRef?: IGroupedListProps['componentRef'];
+  @Input() theme?: IGroupedListProps['theme']
+  @Input() styles?: IGroupedListProps['styles']
   @Input() className?: IGroupedListProps['className'];
   @Input() dragDropEvents?: IGroupedListProps['dragDropEvents'];
   @Input() dragDropHelper?: IGroupedListProps['dragDropHelper'];
   @Input() eventsToRegister?: IGroupedListProps['eventsToRegister'];
+  @Input() groupProps?: IGroupRenderProps;
   @Input() groups?: IGroupedListProps['groups'];
   @Input() items: IGroupedListProps['items'];
   @Input() listProps?: IGroupedListProps['listProps'];
@@ -62,7 +68,7 @@ export class FabGroupedListComponent extends ReactWrapperComponent<IGroupedListP
   @Input() viewport?: IGroupedListProps['viewport'];
   @Input() usePageCache?: IGroupedListProps['usePageCache'];
   @Input() shouldVirtualize?: (props: IListProps) => boolean;
-  @Input() groupProps?: IGroupRenderProps;
+  @Input() getGroupHeight?: (group: IGroup, groupIndex: number) => number;
 
   @Input() renderCell: InputRendererOptions<ICellRenderContext>;