From 0ee3993a3b59967599583c90b83709642a674d01 Mon Sep 17 00:00:00 2001
From: Gavin Barron <gavinbarron@microsoft.com>
Date: Sun, 11 Dec 2022 22:13:55 -0800
Subject: [PATCH] improving type import generation logic for events

---
 .../src/components/mgt-agenda/mgt-agenda.ts   |  2 +-
 .../components/mgt-file-list/mgt-file-list.ts |  6 +-
 .../src/components/mgt-file/mgt-file.ts       |  2 +-
 .../src/components/mgt-get/mgt-get.ts         |  4 +-
 .../src/components/mgt-login/mgt-login.ts     |  8 +--
 .../mgt-people-picker/mgt-people-picker.ts    | 10 ++--
 .../src/components/mgt-people/mgt-people.ts   |  2 +-
 .../mgt-person-card/mgt-person-card.ts        | 25 ++++----
 .../src/components/mgt-person/mgt-person.ts   | 12 ++--
 .../mgt-tasks-base/mgt-tasks-base.ts          |  2 +-
 .../src/components/mgt-tasks/mgt-tasks.ts     |  8 +--
 .../mgt-teams-channel-picker.ts               |  4 +-
 .../src/components/mgt-todo/mgt-todo.ts       |  2 +-
 .../src/components/baseComponent.ts           | 28 ++++++++-
 .../src/components/baseProvider.ts            |  2 -
 .../src/components/templatedComponent.ts      | 13 ++++-
 packages/mgt-react/scripts/generate.js        | 58 +++++++++++++------
 packages/mgt-react/src/generated/react.ts     | 46 +++++++++------
 18 files changed, 149 insertions(+), 85 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts
index 0314388a8f..126101c35b 100644
--- a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts
+++ b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts
@@ -557,7 +557,7 @@ export class MgtAgenda extends MgtTemplatedComponent {
   }
 
   private async loadEvents(): Promise<MicrosoftGraph.Event[]> {
-    const p = Providers.globalProvider;
+    const p = this.provider;
     let events: MicrosoftGraph.Event[] = [];
 
     if (p && p.state === ProviderState.SignedIn) {
diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts
index 792127f2a6..6948296689 100644
--- a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts
+++ b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts
@@ -565,7 +565,7 @@ export class MgtFileList extends MgtTemplatedComponent {
   protected renderNoData(): TemplateResult {
     return (
       this.renderTemplate('no-data', null) ||
-      (this.enableFileUpload === true && Providers.globalProvider !== undefined
+      (this.enableFileUpload === true && this.provider !== undefined
         ? html`
       <fluent-design-system-provider use-defaults>
         <div id="file-list-wrapper" class="file-list-wrapper" dir=${this.direction}>
@@ -661,7 +661,7 @@ export class MgtFileList extends MgtTemplatedComponent {
    */
   protected renderFileUpload(): TemplateResult {
     const fileUploadConfig: MgtFileUploadConfig = {
-      graph: Providers.globalProvider.graph.forComponent(this),
+      graph: this.provider.graph.forComponent(this),
       driveId: this.driveId,
       excludedFileExtensions: this.excludedFileExtensions,
       groupId: this.groupId,
@@ -768,7 +768,7 @@ export class MgtFileList extends MgtTemplatedComponent {
    * @memberof MgtFileList
    */
   protected async loadState() {
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     if (!provider || provider.state === ProviderState.Loading) {
       return;
     }
diff --git a/packages/mgt-components/src/components/mgt-file/mgt-file.ts b/packages/mgt-components/src/components/mgt-file/mgt-file.ts
index bb59601cb0..031ba4e790 100644
--- a/packages/mgt-components/src/components/mgt-file/mgt-file.ts
+++ b/packages/mgt-components/src/components/mgt-file/mgt-file.ts
@@ -577,7 +577,7 @@ export class MgtFile extends MgtTemplatedComponent {
       return;
     }
 
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     if (!provider || provider.state === ProviderState.Loading) {
       return;
     }
diff --git a/packages/mgt-components/src/components/mgt-get/mgt-get.ts b/packages/mgt-components/src/components/mgt-get/mgt-get.ts
index 9d82697e62..07d11c5483 100644
--- a/packages/mgt-components/src/components/mgt-get/mgt-get.ts
+++ b/packages/mgt-components/src/components/mgt-get/mgt-get.ts
@@ -304,7 +304,7 @@ export class MgtGet extends MgtTemplatedComponent {
    * @memberof MgtGet
    */
   protected async loadState() {
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
 
     this.error = null;
 
@@ -400,7 +400,7 @@ export class MgtGet extends MgtTemplatedComponent {
 
             if (image) {
               response = {
-                image: image
+                image
               };
             }
           }
diff --git a/packages/mgt-components/src/components/mgt-login/mgt-login.ts b/packages/mgt-components/src/components/mgt-login/mgt-login.ts
index 7515463be8..a4dcb65e17 100644
--- a/packages/mgt-components/src/components/mgt-login/mgt-login.ts
+++ b/packages/mgt-components/src/components/mgt-login/mgt-login.ts
@@ -129,7 +129,7 @@ export class MgtLogin extends MgtTemplatedComponent {
       return;
     }
 
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
 
     if (provider && provider.login) {
       await provider.login();
@@ -153,7 +153,7 @@ export class MgtLogin extends MgtTemplatedComponent {
       return;
     }
 
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     if (provider && provider.logout) {
       await provider.logout();
       this.userDetails = null;
@@ -186,7 +186,7 @@ export class MgtLogin extends MgtTemplatedComponent {
    * @memberof MgtLogin
    */
   protected async loadState() {
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     if (provider && !this.userDetails) {
       if (provider.state === ProviderState.SignedIn) {
         this.userDetails = await getUserWithPhoto(provider.graph.forComponent(this));
@@ -209,7 +209,7 @@ export class MgtLogin extends MgtTemplatedComponent {
    * @memberof MgtLogin
    */
   protected renderButton() {
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     const signedInState = ProviderState.SignedIn;
 
     let ariaLabel = this.strings.signInLinkSubtitle;
diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
index be9bd29074..8481a1d3d4 100644
--- a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
+++ b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
@@ -550,8 +550,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    * @memberof MgtPeoplePicker
    */
   public async selectUsersById(userIds: readonly string[]): Promise<void> {
-    const provider = Providers.globalProvider;
-    const graph = Providers.globalProvider.graph;
+    const provider = this.provider;
+    const graph = this.provider.graph;
     if (provider && provider.state === ProviderState.SignedIn) {
       // tslint:disable-next-line: forin
       for (const id in userIds) {
@@ -582,8 +582,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    * @memberof MgtPeoplePicker
    */
   public async selectGroupsById(groupIds: readonly string[]): Promise<void> {
-    const provider = Providers.globalProvider;
-    const graph = Providers.globalProvider.graph;
+    const provider = this.provider;
+    const graph = this.provider.graph;
     if (provider && provider.state === ProviderState.SignedIn) {
       // tslint:disable-next-line: forin
       for (const id in groupIds) {
@@ -940,7 +940,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   protected async loadState(): Promise<void> {
     let people = this.people;
     const input = this.userInput.toLowerCase();
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
 
     if (people) {
       if (input) {
diff --git a/packages/mgt-components/src/components/mgt-people/mgt-people.ts b/packages/mgt-components/src/components/mgt-people/mgt-people.ts
index b50ac05f55..234d2ee485 100644
--- a/packages/mgt-components/src/components/mgt-people/mgt-people.ts
+++ b/packages/mgt-components/src/components/mgt-people/mgt-people.ts
@@ -418,7 +418,7 @@ export class MgtPeople extends MgtTemplatedComponent {
    */
   protected async loadState() {
     if (!this.people) {
-      const provider = Providers.globalProvider;
+      const provider = this.provider;
 
       if (provider && provider.state === ProviderState.SignedIn) {
         const graph = provider.graph.forComponent(this);
diff --git a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts
index ac6c79bbc1..52d7b0afcf 100644
--- a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts
+++ b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts
@@ -7,7 +7,7 @@
 
 import { customElement, html, internalProperty, property, TemplateResult } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { MgtTemplatedComponent, Providers, ProviderState, TeamsHelper } from '@microsoft/mgt-element';
+import { IProvider, MgtTemplatedComponent, Providers, ProviderState, TeamsHelper } from '@microsoft/mgt-element';
 import { Presence, User, Person } from '@microsoft/microsoft-graph-types';
 
 import { findPeople, getEmailFromGraphEntity } from '../../graph/graph.people';
@@ -49,7 +49,7 @@ interface MgtPersonCardStateHistory {
  * @class MgtPersonCard
  * @extends {MgtTemplatedComponent}
  *
- * @fires expanded - Fired when expanded details section is opened
+ * @fires {CustomEvent<null>} expanded - Fired when expanded details section is opened
  *
  * @cssprop --person-card-display-name-font-size - {Length} Font size of display name title
  * @cssprop --person-card-display-name-color - {Color} Color of display name font
@@ -604,9 +604,9 @@ export class MgtPersonCard extends MgtTemplatedComponent {
    */
   protected renderExpandedDetailsButton(): TemplateResult {
     return html`
-      <div 
-        class="expanded-details-button" 
-        @click=${() => this.showExpandedDetails()} 
+      <div
+        class="expanded-details-button"
+        @click=${() => this.showExpandedDetails()}
         @keydown=${this.handleKeyDown}
         tabindex=0>
           ${getSvg(SvgIcon.ExpandDown)}
@@ -632,7 +632,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
     }
     // load sections when details are expanded
     // when not singed in
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     if (provider.state === ProviderState.SignedOut) {
       this.loadSections();
     }
@@ -689,9 +689,9 @@ export class MgtPersonCard extends MgtTemplatedComponent {
       'section-nav__icon': true
     });
     return html`
-      <button 
+      <button
         aria-label="overview"
-        tabindex=0 
+        tabindex=0
         class=${overviewClasses}
         @click=${() => this.updateCurrentSection(null)}>
           ${getSvg(SvgIcon.Overview)}
@@ -717,7 +717,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
         <div class="section">
           <div class="section__header">
             <div class="section__title" tabindex="0">${section.displayName}</div>
-            <a 
+            <a
               class="section__show-more"
               tabindex=0
               @keydown=${(e: KeyboardEvent) => handleKeyDown(e, section)}
@@ -819,7 +819,8 @@ export class MgtPersonCard extends MgtTemplatedComponent {
         parent = parent.parentElement;
       }
 
-      let parentPerson = (parent as MgtPerson).personDetails || parent['personDetailsInternal'];
+      // tslint:disable-next-line: no-string-literal
+      const parentPerson = (parent as MgtPerson).personDetails || parent['personDetailsInternal'];
 
       if (parent && parentPerson) {
         this.personDetails = parentPerson;
@@ -827,7 +828,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
       }
     }
 
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
 
     // check if user is signed in
     if (!provider || provider.state !== ProviderState.SignedIn) {
@@ -1111,7 +1112,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
   }
 
   private handleKeyDown(e: KeyboardEvent) {
-    //enter activates person-card
+    // enter activates person-card
     if (e) {
       if (e.keyCode === 13) {
         this.showExpandedDetails();
diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
index 6d2ba470b2..78042f6e60 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.ts
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -106,9 +106,9 @@ const defaultPersonProperties = [
  * @class MgtPerson
  * @extends {MgtTemplatedComponent}
  *
- * @fires line1clicked - Fired when line1 is clicked
- * @fires line2clicked - Fired when line2 is clicked
- * @fires line3clicked - Fired when line3 is clicked
+ * @fires {CustomEvent<IDynamicPerson>} line1clicked - Fired when line1 is clicked
+ * @fires {CustomEvent<IDynamicPerson>} line2clicked - Fired when line2 is clicked
+ * @fires {CustomEvent<IDynamicPerson>} line3clicked - Fired when line3 is clicked
  *
  * @cssprop --avatar-size - {Length} Avatar size
  * @cssprop --avatar-border - {String} Avatar border
@@ -873,7 +873,7 @@ export class MgtPerson extends MgtTemplatedComponent {
       return html``;
     }
 
-    let person: IDynamicPerson & { presenceActivity?: string; presenceAvailability?: string } = personProps;
+    const person: IDynamicPerson & { presenceActivity?: string; presenceAvailability?: string } = personProps;
     if (presence) {
       person.presenceActivity = presence?.activity;
       person.presenceAvailability = presence?.availability;
@@ -1008,7 +1008,7 @@ export class MgtPerson extends MgtTemplatedComponent {
    * @memberof MgtPerson
    */
   protected async loadState() {
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     if (!provider || provider.state === ProviderState.Loading) {
       return;
     }
@@ -1239,7 +1239,7 @@ export class MgtPerson extends MgtTemplatedComponent {
   }
 
   private handleKeyDown(e: KeyboardEvent) {
-    //enter activates person-card
+    // enter activates person-card
     if (e) {
       if (e.key === 'Enter') {
         this.showPersonCard();
diff --git a/packages/mgt-components/src/components/mgt-tasks-base/mgt-tasks-base.ts b/packages/mgt-components/src/components/mgt-tasks-base/mgt-tasks-base.ts
index 9e3afee034..809ea820b4 100644
--- a/packages/mgt-components/src/components/mgt-tasks-base/mgt-tasks-base.ts
+++ b/packages/mgt-components/src/components/mgt-tasks-base/mgt-tasks-base.ts
@@ -133,7 +133,7 @@ export abstract class MgtTasksBase extends MgtTemplatedComponent {
    * trigger the element to update.
    */
   protected render() {
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     if (!provider || provider.state !== ProviderState.SignedIn) {
       return html``;
     }
diff --git a/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.ts b/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.ts
index a25893e620..6189885541 100644
--- a/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.ts
+++ b/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.ts
@@ -507,7 +507,7 @@ export class MgtTasks extends MgtTemplatedComponent {
       return;
     }
 
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     if (!provider || provider.state !== ProviderState.SignedIn) {
       return;
     }
@@ -690,7 +690,7 @@ export class MgtTasks extends MgtTemplatedComponent {
     this._hiddenTasks = this._hiddenTasks.filter(id => id !== task.id);
   }
 
-  private async assignPeople(task: ITask, people: Array<User | Person | Contact>) {
+  private async assignPeople(task: ITask, people: (User | Person | Contact)[]) {
     const ts = this.getTaskSource();
     if (!ts) {
       return;
@@ -799,7 +799,7 @@ export class MgtTasks extends MgtTemplatedComponent {
   }
 
   private renderPlanOptions() {
-    const p = Providers.globalProvider;
+    const p = this.provider;
 
     if (!p || p.state !== ProviderState.SignedIn) {
       return null;
@@ -1406,7 +1406,7 @@ export class MgtTasks extends MgtTemplatedComponent {
   }
 
   private getTaskSource(): ITaskSource {
-    const p = Providers.globalProvider;
+    const p = this.provider;
     if (!p || p.state !== ProviderState.SignedIn) {
       return null;
     }
diff --git a/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts b/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts
index c659e416a8..83ebe86ee5 100644
--- a/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts
+++ b/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts
@@ -288,7 +288,7 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
    * @memberof MgtTeamsChannelPicker
    */
   public async selectChannelById(channelId: string): Promise<boolean> {
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     if (provider && provider.state === ProviderState.SignedIn) {
       // since the component normally handles loading on hover, forces the load for items
       if (!this.items) {
@@ -640,7 +640,7 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
    * @memberof MgtTeamsChannelPicker
    */
   protected async loadState() {
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     let teams: MicrosoftGraph.Team[];
     if (provider && provider.state === ProviderState.SignedIn) {
       const graph = provider.graph.forComponent(this);
diff --git a/packages/mgt-components/src/components/mgt-todo/mgt-todo.ts b/packages/mgt-components/src/components/mgt-todo/mgt-todo.ts
index fb97af05fb..14b1be7408 100644
--- a/packages/mgt-components/src/components/mgt-todo/mgt-todo.ts
+++ b/packages/mgt-components/src/components/mgt-todo/mgt-todo.ts
@@ -379,7 +379,7 @@ export class MgtTodo extends MgtTasksBase {
    * @memberof MgtTasks
    */
   protected async loadState(): Promise<void> {
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     if (!provider || provider.state !== ProviderState.SignedIn) {
       return;
     }
diff --git a/packages/mgt-element/src/components/baseComponent.ts b/packages/mgt-element/src/components/baseComponent.ts
index 53827d1ffe..78d2570fbd 100644
--- a/packages/mgt-element/src/components/baseComponent.ts
+++ b/packages/mgt-element/src/components/baseComponent.ts
@@ -6,7 +6,7 @@
  */
 
 import { internalProperty, LitElement, PropertyValues } from 'lit-element';
-import { ProviderState } from '../providers/IProvider';
+import { IProvider, ProviderState } from '../providers/IProvider';
 import { Providers } from '../providers/Providers';
 import { LocalizationHelper } from '../utils/LocalizationHelper';
 
@@ -67,6 +67,30 @@ export abstract class MgtBaseComponent extends LitElement {
     }
   }
 
+  /**
+   * Backing field for the the provider for internal use only
+   *
+   * @protected
+   * @type {IProvider}
+   * @memberof MgtBaseComponent
+   */
+  protected _provider: IProvider;
+
+  /**
+   * Gets and sets the global provider for all components
+   * Will only set the provider if no provider is set
+   *
+   * @type {MgtElement.IProvider}
+   * @memberof MgtPersonCard
+   */
+  public get provider(): IProvider {
+    return this._provider || Providers.globalProvider;
+  }
+
+  public set provider(provider: IProvider) {
+    this._provider = provider;
+  }
+
   /**
    * A flag to check if the component is loading data state.
    *
@@ -231,7 +255,7 @@ export abstract class MgtBaseComponent extends LitElement {
       await this._currentLoadStatePromise;
     }
 
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
 
     if (!provider) {
       return Promise.resolve();
diff --git a/packages/mgt-element/src/components/baseProvider.ts b/packages/mgt-element/src/components/baseProvider.ts
index a5b8b0aada..12bb7c7b04 100644
--- a/packages/mgt-element/src/components/baseProvider.ts
+++ b/packages/mgt-element/src/components/baseProvider.ts
@@ -65,8 +65,6 @@ export abstract class MgtBaseProvider extends MgtBaseComponent {
   })
   public dependsOn: MgtBaseProvider;
 
-  private _provider: IProvider;
-
   /**
    * Invoked when the element is first updated. Implement to perform one time
    * work on the element after update.
diff --git a/packages/mgt-element/src/components/templatedComponent.ts b/packages/mgt-element/src/components/templatedComponent.ts
index 9f4d32c2ca..7c0fb1f2d0 100644
--- a/packages/mgt-element/src/components/templatedComponent.ts
+++ b/packages/mgt-element/src/components/templatedComponent.ts
@@ -28,6 +28,14 @@ interface RenderedTemplates {
   };
 }
 
+// tslint:disable: completed-docs
+export interface TemplateRenderedData {
+  templateType: string;
+  context: Record<string, unknown>;
+  element: HTMLElement;
+}
+// tslint:enable: completed-docs
+
 /**
  * An abstract class that defines a templatable web component
  *
@@ -36,7 +44,7 @@ interface RenderedTemplates {
  * @class MgtTemplatedComponent
  * @extends {MgtBaseComponent}
  *
- * @fires templateRendered - fires when a template is rendered
+ * @fires {CustomEvent<MgtElement.TemplateRenderedData>} templateRendered - fires when a template is rendered
  */
 export abstract class MgtTemplatedComponent extends MgtBaseComponent {
   /**
@@ -134,7 +142,8 @@ export abstract class MgtTemplatedComponent extends MgtBaseComponent {
 
     this._renderedTemplates[slotName] = { context: dataContext, slot: div };
 
-    this.fireCustomEvent('templateRendered', { templateType, context: dataContext, element: div });
+    const templateRenderedData: TemplateRenderedData = { templateType, context: dataContext, element: div };
+    this.fireCustomEvent('templateRendered', templateRenderedData);
 
     return template;
   }
diff --git a/packages/mgt-react/scripts/generate.js b/packages/mgt-react/scripts/generate.js
index 7331320a7d..dd2a957679 100644
--- a/packages/mgt-react/scripts/generate.js
+++ b/packages/mgt-react/scripts/generate.js
@@ -2,7 +2,7 @@ var fs = require('fs-extra');
 
 let wc = JSON.parse(fs.readFileSync(`${__dirname}/../temp/custom-elements.json`));
 
-const primitives = new Set(['string', 'boolean', 'number', 'any']);
+const primitives = new Set(['string', 'boolean', 'number', 'any', 'void', 'null', 'undefined']);
 const mgtComponentImports = new Set();
 const mgtElementImports = new Set();
 
@@ -34,6 +34,36 @@ for (const module of wc.modules) {
   }
 }
 
+const removeGenericTypeDecoration = type => {
+  if (type.endsWith('[]')) {
+    return type.substring(0, type.length - 2);
+  } else if (type.startsWith('Array<')) {
+    return removeGenericTypeDecoration(type.substring(6, type.length - 1));
+  } else if (type.startsWith('CustomEvent<')) {
+    return removeGenericTypeDecoration(type.substring(12, type.length - 1));
+  }
+  return type;
+};
+
+const addTypeToImports = type => {
+  if (type === '*') {
+    return;
+  }
+
+  for (let t of type.split('|')) {
+    t = removeGenericTypeDecoration(t.trim());
+    if (t.startsWith('MicrosoftGraph.') || t.startsWith('MicrosoftGraphBeta.')) {
+      return;
+    }
+
+    if (t.startsWith('MgtElement.') && !mgtElementImports.has(t)) {
+      mgtElementImports.add(t.split('.')[1]);
+    } else if (!primitives.has(t) && !mgtComponentImports.has(t)) {
+      mgtComponentImports.add(t);
+    }
+  }
+};
+
 for (const tag of customTags.sort((a, b) => (a.tagName > b.tagName ? 1 : -1))) {
   const className = tag.tagName
     .split('-')
@@ -70,23 +100,7 @@ for (const tag of customTags.sort((a, b) => (a.tagName > b.tagName ? 1 : -1))) {
         continue;
       }
 
-      if (type.endsWith('[]')) {
-        type = type.substring(0, type.length - 2);
-      } else if (type.startsWith('Array<')) {
-        type = type.substring(6, type.length - 1);
-      } else if (type === '*') {
-        continue;
-      }
-
-      if (type.startsWith('MicrosoftGraph.') || type.startsWith('MicrosoftGraphBeta.')) {
-        continue;
-      }
-
-      if (type.startsWith('MgtElement.') && !mgtElementImports.has(type)) {
-        mgtElementImports.add(type.split('.')[1]);
-      } else if (!primitives.has(type) && !mgtComponentImports.has(type)) {
-        mgtComponentImports.add(type);
-      }
+      addTypeToImports(type);
     }
   }
 
@@ -103,7 +117,13 @@ for (const tag of customTags.sort((a, b) => (a.tagName > b.tagName ? 1 : -1))) {
   if (tag.events) {
     for (const event of tag.events) {
       if (event.type && event.type.text) {
-        propsType += `\t${event.name}?: (e: ${event.type.text}) => void;\n`;
+        // remove MgtElement. prefix as this it only used to ensure it's imported from the correct package
+        propsType += `\t${event.name}?: (e: ${event.type.text.replace(
+          'CustomEvent<MgtElement.',
+          'CustomEvent<'
+        )}) => void;\n`;
+        // also ensure that the necessary import is added to either mgt-element or mgt-component imports
+        addTypeToImports(event.type.text);
       } else {
         propsType += `\t${event.name}?: (e: Event) => void;\n`;
       }
diff --git a/packages/mgt-react/src/generated/react.ts b/packages/mgt-react/src/generated/react.ts
index 300d4ff130..bb4d12aa2c 100644
--- a/packages/mgt-react/src/generated/react.ts
+++ b/packages/mgt-react/src/generated/react.ts
@@ -1,5 +1,5 @@
 import { OfficeGraphInsightString,ViewType,ResponseType,IDynamicPerson,PersonCardInteraction,PersonType,GroupType,UserType,AvatarSize,PersonViewType,TasksStringResource,TasksSource,TaskFilter,SelectedChannel,TodoFilter } from '@microsoft/mgt-components';
-import { TemplateContext,ComponentMediaQuery } from '@microsoft/mgt-element';
+import { TemplateContext,ComponentMediaQuery,IProvider,TemplateRenderedData } from '@microsoft/mgt-element';
 import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
 import * as MicrosoftGraphBeta from '@microsoft/microsoft-graph-types-beta';
 import {wrapMgt} from '../Mgt';
@@ -15,8 +15,9 @@ export type AgendaProps = {
 	preferredTimezone?: string;
 	templateContext?: TemplateContext;
 	mediaQuery?: ComponentMediaQuery;
+	provider?: IProvider;
 	eventClick?: (e: Event) => void;
-	templateRendered?: (e: Event) => void;
+	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 
 export type FileProps = {
@@ -39,7 +40,8 @@ export type FileProps = {
 	view?: ViewType;
 	templateContext?: TemplateContext;
 	mediaQuery?: ComponentMediaQuery;
-	templateRendered?: (e: Event) => void;
+	provider?: IProvider;
+	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 
 export type FileListProps = {
@@ -63,8 +65,9 @@ export type FileListProps = {
 	excludedFileExtensions?: string[];
 	templateContext?: TemplateContext;
 	mediaQuery?: ComponentMediaQuery;
+	provider?: IProvider;
 	itemClick?: (e: Event) => void;
-	templateRendered?: (e: Event) => void;
+	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 
 export type GetProps = {
@@ -80,20 +83,22 @@ export type GetProps = {
 	error?: any;
 	templateContext?: TemplateContext;
 	mediaQuery?: ComponentMediaQuery;
+	provider?: IProvider;
 	dataChange?: (e: Event) => void;
-	templateRendered?: (e: Event) => void;
+	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 
 export type LoginProps = {
 	userDetails?: IDynamicPerson;
 	templateContext?: TemplateContext;
 	mediaQuery?: ComponentMediaQuery;
+	provider?: IProvider;
 	loginInitiated?: (e: Event) => void;
 	loginCompleted?: (e: Event) => void;
 	loginFailed?: (e: Event) => void;
 	logoutInitiated?: (e: Event) => void;
 	logoutCompleted?: (e: Event) => void;
-	templateRendered?: (e: Event) => void;
+	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 
 export type PeopleProps = {
@@ -110,7 +115,8 @@ export type PeopleProps = {
 	fallbackDetails?: IDynamicPerson[];
 	templateContext?: TemplateContext;
 	mediaQuery?: ComponentMediaQuery;
-	templateRendered?: (e: Event) => void;
+	provider?: IProvider;
+	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 
 export type PeoplePickerProps = {
@@ -137,8 +143,9 @@ export type PeoplePickerProps = {
 	ariaLabel?: string;
 	templateContext?: TemplateContext;
 	mediaQuery?: ComponentMediaQuery;
+	provider?: IProvider;
 	selectionChanged?: (e: CustomEvent<IDynamicPerson[]>) => void;
-	templateRendered?: (e: Event) => void;
+	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 
 export type PersonProps = {
@@ -160,10 +167,11 @@ export type PersonProps = {
 	view?: ViewType | PersonViewType;
 	templateContext?: TemplateContext;
 	mediaQuery?: ComponentMediaQuery;
-	line1clicked?: (e: Event) => void;
-	line2clicked?: (e: Event) => void;
-	line3clicked?: (e: Event) => void;
-	templateRendered?: (e: Event) => void;
+	provider?: IProvider;
+	line1clicked?: (e: CustomEvent<IDynamicPerson>) => void;
+	line2clicked?: (e: CustomEvent<IDynamicPerson>) => void;
+	line3clicked?: (e: CustomEvent<IDynamicPerson>) => void;
+	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 
 export type PersonCardProps = {
@@ -179,8 +187,9 @@ export type PersonCardProps = {
 	personPresence?: MicrosoftGraph.Presence;
 	templateContext?: TemplateContext;
 	mediaQuery?: ComponentMediaQuery;
-	expanded?: (e: Event) => void;
-	templateRendered?: (e: Event) => void;
+	provider?: IProvider;
+	expanded?: (e: CustomEvent<null>) => void;
+	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 
 export type TasksProps = {
@@ -198,19 +207,21 @@ export type TasksProps = {
 	taskFilter?: TaskFilter;
 	templateContext?: TemplateContext;
 	mediaQuery?: ComponentMediaQuery;
+	provider?: IProvider;
 	taskAdded?: (e: Event) => void;
 	taskChanged?: (e: Event) => void;
 	taskClick?: (e: Event) => void;
 	taskRemoved?: (e: Event) => void;
-	templateRendered?: (e: Event) => void;
+	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 
 export type TeamsChannelPickerProps = {
 	selectedItem?: SelectedChannel;
 	templateContext?: TemplateContext;
 	mediaQuery?: ComponentMediaQuery;
+	provider?: IProvider;
 	selectionChanged?: (e: Event) => void;
-	templateRendered?: (e: Event) => void;
+	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 
 export type TodoProps = {
@@ -222,7 +233,8 @@ export type TodoProps = {
 	initialId?: string;
 	templateContext?: TemplateContext;
 	mediaQuery?: ComponentMediaQuery;
-	templateRendered?: (e: Event) => void;
+	provider?: IProvider;
+	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 
 export const Agenda = wrapMgt<AgendaProps>('mgt-agenda');