From 473865739e1d5594a91096b47c8bdb2ee90877fd Mon Sep 17 00:00:00 2001
From: Thomas Pentenrieder <pentenrieder@outlook.com>
Date: Fri, 3 Jan 2025 23:17:12 +0100
Subject: [PATCH 01/16] feat: expose updated event

makes updated event of MgtBaseTaskComponent accessible on Person control
---
 .../mgt-components/src/components/mgt-person/mgt-person.ts | 7 ++++---
 packages/mgt-react/src/generated/person.ts                 | 1 +
 stories/components/person/person.html.stories.js           | 4 ++++
 stories/components/person/person.react.stories.js          | 5 +++++
 4 files changed, 14 insertions(+), 3 deletions(-)

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 9a20d91b2e..19382566d1 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.ts
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -75,6 +75,7 @@ export const registerMgtPersonComponent = () => {
  * @class MgtPerson
  * @extends {MgtTemplatedComponent}
  *
+ * @fires {CustomEvent<null>} updated - Fired when the component is updated
  * @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
@@ -952,7 +953,7 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
     }
 
     // if we have more than one line we add the second line
-    if (this.view !== 'oneline') {
+    if (!this.isOneLine()) {
       const text = this.getTextFromProperty(person, this.line2Property);
       if (this.hasTemplate('line2')) {
         // Render the line2 template
@@ -973,7 +974,7 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
     }
 
     // if we have a third or fourth line we add the third line
-    if (this.view === 'threelines' || this.view === 'fourlines') {
+    if (this.isThreeLines() || this.isFourLines()) {
       const text = this.getTextFromProperty(person, this.line3Property);
       if (this.hasTemplate('line3')) {
         // Render the line3 template
@@ -994,7 +995,7 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
     }
 
     // add the fourth line if necessary
-    if (this.view === 'fourlines') {
+    if (this.isFourLines()) {
       const text = this.getTextFromProperty(person, this.line4Property);
       if (this.hasTemplate('line4')) {
         // Render the line4 template
diff --git a/packages/mgt-react/src/generated/person.ts b/packages/mgt-react/src/generated/person.ts
index 4ab45723f3..465b74b807 100644
--- a/packages/mgt-react/src/generated/person.ts
+++ b/packages/mgt-react/src/generated/person.ts
@@ -37,6 +37,7 @@ export type PersonProps = {
 	line4Property?: string;
 	view?: ViewType;
 	templateContext?: TemplateContext;
+	updated?: (e: CustomEvent<null>) => void;
 	line1clicked?: (e: CustomEvent<IDynamicPerson>) => void;
 	line2clicked?: (e: CustomEvent<IDynamicPerson>) => void;
 	line3clicked?: (e: CustomEvent<IDynamicPerson>) => void;
diff --git a/stories/components/person/person.html.stories.js b/stories/components/person/person.html.stories.js
index 4a8ab9bd81..d759c93651 100644
--- a/stories/components/person/person.html.stories.js
+++ b/stories/components/person/person.html.stories.js
@@ -36,6 +36,10 @@ export const events = () => html`
 
   <script>
   const person = document.querySelector('mgt-person');
+  person.addEventListener('updated', e => {
+      console.log('updated', e);
+  });
+
   person.addEventListener('line1clicked', e => {
       const output = document.querySelector('.output');
 
diff --git a/stories/components/person/person.react.stories.js b/stories/components/person/person.react.stories.js
index fc8323fc39..d07dc10e46 100644
--- a/stories/components/person/person.react.stories.js
+++ b/stories/components/person/person.react.stories.js
@@ -82,6 +82,10 @@ export const events = () => html`
     import { Person, IDynamicPerson } from '@microsoft/mgt-react';
 
     export default () => {
+      const onUpdated = useCallback((e: CustomEvent<null>) => {
+        console.log('component updated', e);
+      }, []);
+
       const onLineClicked = useCallback((e: CustomEvent<IDynamicPerson>) => {
         console.log(e.detail);
       }, []);
@@ -90,6 +94,7 @@ export const events = () => html`
         <Person
           personQuery="me"
           view="fourlines"
+          updated={onUpdated}
           line1clicked={onLineClicked}
           line2clicked={onLineClicked}
           line3clicked={onLineClicked}

From dce63c43dd52b1a2dbd652e8e07cc0cfd5aa17ea Mon Sep 17 00:00:00 2001
From: Thomas Pentenrieder <pentenrieder@outlook.com>
Date: Tue, 7 Jan 2025 10:11:39 +0100
Subject: [PATCH 02/16] add updated event to baseTaskComponent

---
 .../mgt-components/src/components/mgt-agenda/mgt-agenda.ts    | 1 +
 .../src/components/mgt-file-list/mgt-file-list.ts             | 1 +
 packages/mgt-components/src/components/mgt-file/mgt-file.ts   | 2 ++
 packages/mgt-components/src/components/mgt-get/mgt-get.ts     | 1 +
 packages/mgt-components/src/components/mgt-login/mgt-login.ts | 1 +
 .../src/components/mgt-people-picker/mgt-people-picker.ts     | 1 +
 .../mgt-components/src/components/mgt-people/mgt-people.ts    | 2 ++
 .../src/components/mgt-person-card/mgt-person-card.ts         | 1 +
 .../mgt-components/src/components/mgt-person/mgt-person.ts    | 2 +-
 .../mgt-components/src/components/mgt-picker/mgt-picker.ts    | 2 ++
 .../mgt-components/src/components/mgt-planner/mgt-planner.ts  | 1 +
 .../src/components/mgt-search-box/mgt-search-box.ts           | 1 +
 .../src/components/mgt-search-results/mgt-search-results.ts   | 1 +
 .../src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.ts | 2 ++
 .../mgt-teams-channel-picker/mgt-teams-channel-picker.ts      | 1 +
 .../src/components/mgt-theme-toggle/mgt-theme-toggle.ts       | 2 ++
 packages/mgt-components/src/components/mgt-todo/mgt-todo.ts   | 2 ++
 packages/mgt-element/src/components/baseTaskComponent.ts      | 2 ++
 packages/mgt-react/src/generated/agenda.ts                    | 1 +
 packages/mgt-react/src/generated/file-list.ts                 | 1 +
 packages/mgt-react/src/generated/file.ts                      | 1 +
 packages/mgt-react/src/generated/get.ts                       | 1 +
 packages/mgt-react/src/generated/login.ts                     | 1 +
 packages/mgt-react/src/generated/people-picker.ts             | 1 +
 packages/mgt-react/src/generated/people.ts                    | 1 +
 packages/mgt-react/src/generated/person-card.ts               | 1 +
 packages/mgt-react/src/generated/person.ts                    | 2 +-
 packages/mgt-react/src/generated/picker.ts                    | 1 +
 packages/mgt-react/src/generated/planner.ts                   | 1 +
 packages/mgt-react/src/generated/search-box.ts                | 1 +
 packages/mgt-react/src/generated/search-results.ts            | 1 +
 packages/mgt-react/src/generated/spinner.ts                   | 4 +++-
 packages/mgt-react/src/generated/taxonomy-picker.ts           | 1 +
 packages/mgt-react/src/generated/teams-channel-picker.ts      | 1 +
 packages/mgt-react/src/generated/theme-toggle.ts              | 1 +
 packages/mgt-react/src/generated/todo.ts                      | 1 +
 36 files changed, 45 insertions(+), 3 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 6ccca87572..3016da84b2 100644
--- a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts
+++ b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts
@@ -27,6 +27,7 @@ import { registerComponent } from '@microsoft/mgt-element';
  * @class MgtAgenda
  * @extends {MgtTemplatedComponent}
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
  * @fires {CustomEvent<MicrosoftGraph.Event>} eventClick - Fired when user click an event
  *
  * @cssprop --event-box-shadow - {String} Event box shadow color and size
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 5ac5c60742..d7077f78f2 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
@@ -71,6 +71,7 @@ const isSharedInsight = (sharedInsightFile: SharedInsight): sharedInsightFile is
  * @export
  * @class MgtFileList
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
  * @fires {CustomEvent<MicrosoftGraph.DriveItem>} itemClick - Fired when a user clicks on a file.
  * it returns the file (DriveItem) details.
  *
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 e44a6aaba5..6a97ac311f 100644
--- a/packages/mgt-components/src/components/mgt-file/mgt-file.ts
+++ b/packages/mgt-components/src/components/mgt-file/mgt-file.ts
@@ -42,6 +42,8 @@ export const registerMgtFileComponent = () => registerComponent('file', MgtFile)
  * @class MgtFile
  * @extends {MgtTemplatedComponent}
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
+ *
  * @cssprop --file-type-icon-height - {Length} file type icon height. Default value is 28px.
  * @cssprop --file-border - {String} file item border style. Default value is "1px solid transparent".
  * @cssprop --file-border-radius - {String} the border radius of the file component. Default value is 4px.
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 62d62ecb5b..577493a89f 100644
--- a/packages/mgt-components/src/components/mgt-get/mgt-get.ts
+++ b/packages/mgt-components/src/components/mgt-get/mgt-get.ts
@@ -83,6 +83,7 @@ export const registerMgtGetComponent = () => registerComponent('get', MgtGet);
 /**
  * Custom element for making Microsoft Graph get queries
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
  * @fires {CustomEvent<DataChangedDetail>} dataChange - Fired when data changes bubbles, composed, and is not cancelable.
  *
  * @export
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 1ff6b5c078..1278989771 100644
--- a/packages/mgt-components/src/components/mgt-login/mgt-login.ts
+++ b/packages/mgt-components/src/components/mgt-login/mgt-login.ts
@@ -54,6 +54,7 @@ export const registerMgtLoginComponent = () => {
  * @class MgtLogin
  * @extends {MgtTemplatedTaskComponent}
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
  * @fires {CustomEvent<undefined>} loginInitiated - Fired when login is initiated by the user
  * @fires {CustomEvent<undefined>} loginCompleted - Fired when login completes
  * @fires {CustomEvent<undefined>} loginFailed - Fired when login fails
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 cce5d04000..6d9a8a6cf0 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
@@ -77,6 +77,7 @@ export const registerMgtPeoplePickerComponent = () => {
  * @class MgtPicker
  * @extends {MgtTemplatedTaskComponent}
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
  * @fires {CustomEvent<IDynamicPerson[]>} selectionChanged - Fired when set of selected people changes
  *
  * @cssprop --people-picker-selected-option-background-color - {Color} the background color of the selected person.
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 f9a066ec62..14d1b34c8b 100644
--- a/packages/mgt-components/src/components/mgt-people/mgt-people.ts
+++ b/packages/mgt-components/src/components/mgt-people/mgt-people.ts
@@ -33,6 +33,8 @@ import { MgtPerson, registerMgtPersonComponent } from '../mgt-person/mgt-person'
  * @class MgtPeople
  * @extends {MgtTemplatedTaskComponent}
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
+ *
  * @cssprop --people-list-margin- {String} the margin around the list of people. Default is 8px 4px 8px 8px.
  * @cssprop --people-avatar-gap - {String} the gap between the people in the list. Default is 4px.
  * @cssprop --people-overflow-font-color - {Color} the color of the overflow text.
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 6a1958bd0b..51975ea8c1 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
@@ -86,6 +86,7 @@ export const registerMgtPersonCardComponent = () => {
  * @class MgtPersonCard
  * @extends {MgtTemplatedComponent}
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
  * @fires {CustomEvent<null>} expanded - Fired when expanded details section is opened
  *
  * @cssprop --person-card-line1-font-size - {Length} Font size of line 1
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 19382566d1..c00448010d 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.ts
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -75,7 +75,7 @@ export const registerMgtPersonComponent = () => {
  * @class MgtPerson
  * @extends {MgtTemplatedComponent}
  *
- * @fires {CustomEvent<null>} updated - Fired when the component is updated
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
  * @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
diff --git a/packages/mgt-components/src/components/mgt-picker/mgt-picker.ts b/packages/mgt-components/src/components/mgt-picker/mgt-picker.ts
index 5ff757e931..97251295c2 100644
--- a/packages/mgt-components/src/components/mgt-picker/mgt-picker.ts
+++ b/packages/mgt-components/src/components/mgt-picker/mgt-picker.ts
@@ -34,6 +34,8 @@ export const registerMgtPickerComponent = () => {
  * @class MgtPicker
  * @extends {MgtTemplatedTaskComponent}
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
+ *
  * @cssprop --picker-background-color - {Color} Picker component background color
  * @cssprop --picker-list-max-height - {String} max height for options list. Default value is 380px.
  */
diff --git a/packages/mgt-components/src/components/mgt-planner/mgt-planner.ts b/packages/mgt-components/src/components/mgt-planner/mgt-planner.ts
index 1162eb233b..60df8b03cc 100644
--- a/packages/mgt-components/src/components/mgt-planner/mgt-planner.ts
+++ b/packages/mgt-components/src/components/mgt-planner/mgt-planner.ts
@@ -73,6 +73,7 @@ export const registerMgtPlannerComponent = () => {
  * @class MgtPlanner
  * @extends {MgtBaseComponent}
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
  * @fires {CustomEvent<ITask>} taskAdded - Fires when a new task has been created.
  * @fires {CustomEvent<ITask>} taskChanged - Fires when task metadata has been changed, such as marking completed.
  * @fires {CustomEvent<ITask>} taskClick - Fires when the user clicks or taps on a task.
diff --git a/packages/mgt-components/src/components/mgt-search-box/mgt-search-box.ts b/packages/mgt-components/src/components/mgt-search-box/mgt-search-box.ts
index 25db884abd..fd049db847 100644
--- a/packages/mgt-components/src/components/mgt-search-box/mgt-search-box.ts
+++ b/packages/mgt-components/src/components/mgt-search-box/mgt-search-box.ts
@@ -23,6 +23,7 @@ export const registerMgtSearchBoxComponent = () => {
 /**
  * Web component used to enter a search value to power search scenarios.
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
  * @fires {CustomEvent<string>} searchTermChanged - Fired when the search term is changed
  *
  * @class MgtSearchBox
diff --git a/packages/mgt-components/src/components/mgt-search-results/mgt-search-results.ts b/packages/mgt-components/src/components/mgt-search-results/mgt-search-results.ts
index d48a2d9cdf..0bdded3cf0 100644
--- a/packages/mgt-components/src/components/mgt-search-results/mgt-search-results.ts
+++ b/packages/mgt-components/src/components/mgt-search-results/mgt-search-results.ts
@@ -130,6 +130,7 @@ export const registerMgtSearchResultsComponent = () => {
  * **Preview component** Custom element for making Microsoft Graph get queries.
  * Component may change before general availability release.
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
  * @fires {CustomEvent<DataChangedDetail>} dataChange - Fired when data changes
  *
  * @cssprop --answer-border-radius - {Length} Border radius of an answer
diff --git a/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.ts b/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.ts
index 4f6d08c0d8..c005834718 100644
--- a/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.ts
+++ b/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.ts
@@ -39,6 +39,8 @@ export const registerMgtTaxonomyPickerComponent = () => {
  * @class MgtTaxonomyPicker
  * @extends {MgtTemplatedTaskComponent}
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
+ *
  * @cssprop --taxonomy-picker-background-color - {Color} Picker component background color
  * @cssprop --taxonomy-picker-list-max-height - {String} max height for options list. Default value is 380px.
  * @cssprop --taxonomy-picker-placeholder-color - {Color} Text color for the placeholder in the picker
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 fa6fe04ec0..3dcd07c6eb 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
@@ -51,6 +51,7 @@ export const registerMgtTeamsChannelPickerComponent = () => {
  * @class MgtTeamsChannelPicker
  * @extends {MgtTemplatedTaskComponent}
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
  * @fires {CustomEvent<SelectedChannel | null>} selectionChanged - Fired when the selection changes
  *
  * @cssprop --channel-picker-input-border-color - {Color} Input border color
diff --git a/packages/mgt-components/src/components/mgt-theme-toggle/mgt-theme-toggle.ts b/packages/mgt-components/src/components/mgt-theme-toggle/mgt-theme-toggle.ts
index ceff7c66b5..0f658e5371 100644
--- a/packages/mgt-components/src/components/mgt-theme-toggle/mgt-theme-toggle.ts
+++ b/packages/mgt-components/src/components/mgt-theme-toggle/mgt-theme-toggle.ts
@@ -27,6 +27,8 @@ export const registerMgtThemeToggleComponent = () => {
  *
  * @class MgtDarkToggle
  * @extends {MgtBaseTaskComponent}
+ *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
  */
 export class MgtThemeToggle extends MgtBaseTaskComponent {
   constructor() {
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 d41c5343b9..4cfd7e88df 100644
--- a/packages/mgt-components/src/components/mgt-todo/mgt-todo.ts
+++ b/packages/mgt-components/src/components/mgt-todo/mgt-todo.ts
@@ -47,6 +47,8 @@ export const registerMgtTodoComponent = () => {
  * @class MgtTodo
  * @extends {MgtTasksBase}
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
+ *
  * @cssprop --task-color - {Color} - Task text color
  * @cssprop --task-background-color - {Color} - Task background color
  * @cssprop --task-complete-background - {Color} - Task background color when completed
diff --git a/packages/mgt-element/src/components/baseTaskComponent.ts b/packages/mgt-element/src/components/baseTaskComponent.ts
index d1ef5460fa..ae25c97bfa 100644
--- a/packages/mgt-element/src/components/baseTaskComponent.ts
+++ b/packages/mgt-element/src/components/baseTaskComponent.ts
@@ -22,6 +22,8 @@ import { ComponentMediaQuery } from './baseComponent';
  * @abstract
  * @class MgtBaseTaskComponent
  * @extends {LitElement}
+ *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
  */
 export abstract class MgtBaseTaskComponent extends LitElement {
   /**
diff --git a/packages/mgt-react/src/generated/agenda.ts b/packages/mgt-react/src/generated/agenda.ts
index 7129394646..7a13728000 100644
--- a/packages/mgt-react/src/generated/agenda.ts
+++ b/packages/mgt-react/src/generated/agenda.ts
@@ -26,6 +26,7 @@ export type AgendaProps = {
 	preferredTimezone?: string;
 	templateContext?: TemplateContext;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
+	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const Agenda = wrapMgt<AgendaProps>('agenda', registerMgtAgendaComponent);
diff --git a/packages/mgt-react/src/generated/file-list.ts b/packages/mgt-react/src/generated/file-list.ts
index 02bb628a17..afd97b8256 100644
--- a/packages/mgt-react/src/generated/file-list.ts
+++ b/packages/mgt-react/src/generated/file-list.ts
@@ -39,6 +39,7 @@ export type FileListProps = {
 	templateContext?: TemplateContext;
 	itemClick?: (e: CustomEvent<MicrosoftGraph.DriveItem>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
+	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const FileList = wrapMgt<FileListProps>('file-list', registerMgtFileListComponent);
diff --git a/packages/mgt-react/src/generated/file.ts b/packages/mgt-react/src/generated/file.ts
index 2e94b7ab69..727fed8270 100644
--- a/packages/mgt-react/src/generated/file.ts
+++ b/packages/mgt-react/src/generated/file.ts
@@ -36,6 +36,7 @@ export type FileProps = {
 	view?: ViewType;
 	templateContext?: TemplateContext;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
+	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const File = wrapMgt<FileProps>('file', registerMgtFileComponent);
diff --git a/packages/mgt-react/src/generated/get.ts b/packages/mgt-react/src/generated/get.ts
index 4a42690894..79333b38a7 100644
--- a/packages/mgt-react/src/generated/get.ts
+++ b/packages/mgt-react/src/generated/get.ts
@@ -29,6 +29,7 @@ export type GetProps = {
 	templateContext?: TemplateContext;
 	dataChange?: (e: CustomEvent<DataChangedDetail>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
+	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const Get = wrapMgt<GetProps>('get', registerMgtGetComponent);
diff --git a/packages/mgt-react/src/generated/login.ts b/packages/mgt-react/src/generated/login.ts
index a6fccd8ded..86e877ef0b 100644
--- a/packages/mgt-react/src/generated/login.ts
+++ b/packages/mgt-react/src/generated/login.ts
@@ -27,6 +27,7 @@ export type LoginProps = {
 	logoutInitiated?: (e: CustomEvent<undefined>) => void;
 	logoutCompleted?: (e: CustomEvent<undefined>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
+	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const Login = wrapMgt<LoginProps>('login', registerMgtLoginComponent);
diff --git a/packages/mgt-react/src/generated/people-picker.ts b/packages/mgt-react/src/generated/people-picker.ts
index c2336005c7..aab22a0845 100644
--- a/packages/mgt-react/src/generated/people-picker.ts
+++ b/packages/mgt-react/src/generated/people-picker.ts
@@ -44,6 +44,7 @@ export type PeoplePickerProps = {
 	templateContext?: TemplateContext;
 	selectionChanged?: (e: CustomEvent<IDynamicPerson[]>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
+	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const PeoplePicker = wrapMgt<PeoplePickerProps>('people-picker', registerMgtPeoplePickerComponent);
diff --git a/packages/mgt-react/src/generated/people.ts b/packages/mgt-react/src/generated/people.ts
index d51d7b749e..85cf0d2671 100644
--- a/packages/mgt-react/src/generated/people.ts
+++ b/packages/mgt-react/src/generated/people.ts
@@ -30,6 +30,7 @@ export type PeopleProps = {
 	fallbackDetails?: IDynamicPerson[];
 	templateContext?: TemplateContext;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
+	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const People = wrapMgt<PeopleProps>('people', registerMgtPeopleComponent);
diff --git a/packages/mgt-react/src/generated/person-card.ts b/packages/mgt-react/src/generated/person-card.ts
index c357ec6795..0063f8d9c4 100644
--- a/packages/mgt-react/src/generated/person-card.ts
+++ b/packages/mgt-react/src/generated/person-card.ts
@@ -30,6 +30,7 @@ export type PersonCardProps = {
 	templateContext?: TemplateContext;
 	expanded?: (e: CustomEvent<null>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
+	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const PersonCard = wrapMgt<PersonCardProps>('person-card', registerMgtPersonCardComponent);
diff --git a/packages/mgt-react/src/generated/person.ts b/packages/mgt-react/src/generated/person.ts
index 465b74b807..e933bd6152 100644
--- a/packages/mgt-react/src/generated/person.ts
+++ b/packages/mgt-react/src/generated/person.ts
@@ -37,12 +37,12 @@ export type PersonProps = {
 	line4Property?: string;
 	view?: ViewType;
 	templateContext?: TemplateContext;
-	updated?: (e: CustomEvent<null>) => void;
 	line1clicked?: (e: CustomEvent<IDynamicPerson>) => void;
 	line2clicked?: (e: CustomEvent<IDynamicPerson>) => void;
 	line3clicked?: (e: CustomEvent<IDynamicPerson>) => void;
 	line4clicked?: (e: CustomEvent<IDynamicPerson>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
+	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const Person = wrapMgt<PersonProps>('person', registerMgtPersonComponent);
diff --git a/packages/mgt-react/src/generated/picker.ts b/packages/mgt-react/src/generated/picker.ts
index 0f72badf92..c44aefba3b 100644
--- a/packages/mgt-react/src/generated/picker.ts
+++ b/packages/mgt-react/src/generated/picker.ts
@@ -29,6 +29,7 @@ export type PickerProps = {
 	templateContext?: TemplateContext;
 	selectionChanged?: (e: CustomEvent<any>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
+	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const Picker = wrapMgt<PickerProps>('picker', registerMgtPickerComponent);
diff --git a/packages/mgt-react/src/generated/planner.ts b/packages/mgt-react/src/generated/planner.ts
index 5e2cee8e6e..9932f73d2a 100644
--- a/packages/mgt-react/src/generated/planner.ts
+++ b/packages/mgt-react/src/generated/planner.ts
@@ -33,6 +33,7 @@ export type PlannerProps = {
 	taskClick?: (e: CustomEvent<ITask>) => void;
 	taskRemoved?: (e: CustomEvent<ITask>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
+	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const Planner = wrapMgt<PlannerProps>('planner', registerMgtPlannerComponent);
diff --git a/packages/mgt-react/src/generated/search-box.ts b/packages/mgt-react/src/generated/search-box.ts
index e5508ebe82..f674afdb18 100644
--- a/packages/mgt-react/src/generated/search-box.ts
+++ b/packages/mgt-react/src/generated/search-box.ts
@@ -19,6 +19,7 @@ export type SearchBoxProps = {
 	searchTerm?: string;
 	debounceDelay?: number;
 	searchTermChanged?: (e: CustomEvent<string>) => void;
+	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const SearchBox = wrapMgt<SearchBoxProps>('search-box', registerMgtSearchBoxComponent);
diff --git a/packages/mgt-react/src/generated/search-results.ts b/packages/mgt-react/src/generated/search-results.ts
index bc893b5690..5ff1a47b90 100644
--- a/packages/mgt-react/src/generated/search-results.ts
+++ b/packages/mgt-react/src/generated/search-results.ts
@@ -34,6 +34,7 @@ export type SearchResultsProps = {
 	templateContext?: TemplateContext;
 	dataChange?: (e: CustomEvent<DataChangedDetail>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
+	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const SearchResults = wrapMgt<SearchResultsProps>('search-results', registerMgtSearchResultsComponent);
diff --git a/packages/mgt-react/src/generated/spinner.ts b/packages/mgt-react/src/generated/spinner.ts
index d3fab82725..878db46680 100644
--- a/packages/mgt-react/src/generated/spinner.ts
+++ b/packages/mgt-react/src/generated/spinner.ts
@@ -14,7 +14,9 @@ import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
 import * as MicrosoftGraphBeta from '@microsoft/microsoft-graph-types-beta';
 import {wrapMgt} from '../Mgt';
 
-type SpinnerProps = Record<string, never>
+export type SpinnerProps = {
+	updated?: (e: CustomEvent<undefined>) => void;
+}
 
 export const Spinner = wrapMgt<SpinnerProps>('spinner', registerMgtSpinnerComponent);
 
diff --git a/packages/mgt-react/src/generated/taxonomy-picker.ts b/packages/mgt-react/src/generated/taxonomy-picker.ts
index 49d5c6d06c..6c9d676486 100644
--- a/packages/mgt-react/src/generated/taxonomy-picker.ts
+++ b/packages/mgt-react/src/generated/taxonomy-picker.ts
@@ -31,6 +31,7 @@ export type TaxonomyPickerProps = {
 	templateContext?: TemplateContext;
 	selectionChanged?: (e: CustomEvent<MicrosoftGraph.TermStore.Term>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
+	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const TaxonomyPicker = wrapMgt<TaxonomyPickerProps>('taxonomy-picker', registerMgtTaxonomyPickerComponent);
diff --git a/packages/mgt-react/src/generated/teams-channel-picker.ts b/packages/mgt-react/src/generated/teams-channel-picker.ts
index d01a7b830d..c2e2798e19 100644
--- a/packages/mgt-react/src/generated/teams-channel-picker.ts
+++ b/packages/mgt-react/src/generated/teams-channel-picker.ts
@@ -20,6 +20,7 @@ export type TeamsChannelPickerProps = {
 	templateContext?: TemplateContext;
 	selectionChanged?: (e: CustomEvent<SelectedChannel | null>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
+	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const TeamsChannelPicker = wrapMgt<TeamsChannelPickerProps>('teams-channel-picker', registerMgtTeamsChannelPickerComponent);
diff --git a/packages/mgt-react/src/generated/theme-toggle.ts b/packages/mgt-react/src/generated/theme-toggle.ts
index 114bba02c6..29c3eb4435 100644
--- a/packages/mgt-react/src/generated/theme-toggle.ts
+++ b/packages/mgt-react/src/generated/theme-toggle.ts
@@ -17,6 +17,7 @@ import {wrapMgt} from '../Mgt';
 export type ThemeToggleProps = {
 	darkModeActive?: boolean;
 	darkmodechanged?: (e: CustomEvent<boolean>) => void;
+	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const ThemeToggle = wrapMgt<ThemeToggleProps>('theme-toggle', registerMgtThemeToggleComponent);
diff --git a/packages/mgt-react/src/generated/todo.ts b/packages/mgt-react/src/generated/todo.ts
index d92a0cd7b7..d2eadec1ee 100644
--- a/packages/mgt-react/src/generated/todo.ts
+++ b/packages/mgt-react/src/generated/todo.ts
@@ -25,6 +25,7 @@ export type TodoProps = {
 	initialId?: string;
 	templateContext?: TemplateContext;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
+	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const Todo = wrapMgt<TodoProps>('todo', registerMgtTodoComponent);

From e24b14712e024d6c7f92804967271f36f6a3f517 Mon Sep 17 00:00:00 2001
From: Thomas Pentenrieder <pentenrieder@outlook.com>
Date: Tue, 7 Jan 2025 10:12:49 +0100
Subject: [PATCH 03/16] method order

---
 packages/mgt-react/src/generated/file-list.ts            | 2 +-
 packages/mgt-react/src/generated/file.ts                 | 2 +-
 packages/mgt-react/src/generated/get.ts                  | 2 +-
 packages/mgt-react/src/generated/login.ts                | 2 +-
 packages/mgt-react/src/generated/people-picker.ts        | 2 +-
 packages/mgt-react/src/generated/person-card.ts          | 2 +-
 packages/mgt-react/src/generated/person.ts               | 2 +-
 packages/mgt-react/src/generated/picker.ts               | 2 +-
 packages/mgt-react/src/generated/planner.ts              | 2 +-
 packages/mgt-react/src/generated/search-box.ts           | 2 +-
 packages/mgt-react/src/generated/search-results.ts       | 2 +-
 packages/mgt-react/src/generated/taxonomy-picker.ts      | 2 +-
 packages/mgt-react/src/generated/teams-channel-picker.ts | 2 +-
 packages/mgt-react/src/generated/todo.ts                 | 2 +-
 14 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/mgt-react/src/generated/file-list.ts b/packages/mgt-react/src/generated/file-list.ts
index afd97b8256..fc8e6a3e11 100644
--- a/packages/mgt-react/src/generated/file-list.ts
+++ b/packages/mgt-react/src/generated/file-list.ts
@@ -37,9 +37,9 @@ export type FileListProps = {
 	maxUploadFile?: number;
 	excludedFileExtensions?: string[];
 	templateContext?: TemplateContext;
+	updated?: (e: CustomEvent<undefined>) => void;
 	itemClick?: (e: CustomEvent<MicrosoftGraph.DriveItem>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
-	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const FileList = wrapMgt<FileListProps>('file-list', registerMgtFileListComponent);
diff --git a/packages/mgt-react/src/generated/file.ts b/packages/mgt-react/src/generated/file.ts
index 727fed8270..c6d67bf35a 100644
--- a/packages/mgt-react/src/generated/file.ts
+++ b/packages/mgt-react/src/generated/file.ts
@@ -35,8 +35,8 @@ export type FileProps = {
 	line3Property?: string;
 	view?: ViewType;
 	templateContext?: TemplateContext;
-	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 	updated?: (e: CustomEvent<undefined>) => void;
+	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 
 export const File = wrapMgt<FileProps>('file', registerMgtFileComponent);
diff --git a/packages/mgt-react/src/generated/get.ts b/packages/mgt-react/src/generated/get.ts
index 79333b38a7..939f638d88 100644
--- a/packages/mgt-react/src/generated/get.ts
+++ b/packages/mgt-react/src/generated/get.ts
@@ -27,9 +27,9 @@ export type GetProps = {
 	cacheInvalidationPeriod?: number;
 	response?: any;
 	templateContext?: TemplateContext;
+	updated?: (e: CustomEvent<undefined>) => void;
 	dataChange?: (e: CustomEvent<DataChangedDetail>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
-	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const Get = wrapMgt<GetProps>('get', registerMgtGetComponent);
diff --git a/packages/mgt-react/src/generated/login.ts b/packages/mgt-react/src/generated/login.ts
index 86e877ef0b..904bb4ae22 100644
--- a/packages/mgt-react/src/generated/login.ts
+++ b/packages/mgt-react/src/generated/login.ts
@@ -21,13 +21,13 @@ export type LoginProps = {
 	showPresence?: boolean;
 	loginView?: LoginViewType;
 	templateContext?: TemplateContext;
+	updated?: (e: CustomEvent<undefined>) => void;
 	loginInitiated?: (e: CustomEvent<undefined>) => void;
 	loginCompleted?: (e: CustomEvent<undefined>) => void;
 	loginFailed?: (e: CustomEvent<undefined>) => void;
 	logoutInitiated?: (e: CustomEvent<undefined>) => void;
 	logoutCompleted?: (e: CustomEvent<undefined>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
-	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const Login = wrapMgt<LoginProps>('login', registerMgtLoginComponent);
diff --git a/packages/mgt-react/src/generated/people-picker.ts b/packages/mgt-react/src/generated/people-picker.ts
index aab22a0845..dce8b4ff11 100644
--- a/packages/mgt-react/src/generated/people-picker.ts
+++ b/packages/mgt-react/src/generated/people-picker.ts
@@ -42,9 +42,9 @@ export type PeoplePickerProps = {
 	ariaLabel?: string;
 	disableSuggestions?: boolean;
 	templateContext?: TemplateContext;
+	updated?: (e: CustomEvent<undefined>) => void;
 	selectionChanged?: (e: CustomEvent<IDynamicPerson[]>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
-	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const PeoplePicker = wrapMgt<PeoplePickerProps>('people-picker', registerMgtPeoplePickerComponent);
diff --git a/packages/mgt-react/src/generated/person-card.ts b/packages/mgt-react/src/generated/person-card.ts
index 0063f8d9c4..b44f10fd6e 100644
--- a/packages/mgt-react/src/generated/person-card.ts
+++ b/packages/mgt-react/src/generated/person-card.ts
@@ -28,9 +28,9 @@ export type PersonCardProps = {
 	showPresence?: boolean;
 	personPresence?: MicrosoftGraph.Presence;
 	templateContext?: TemplateContext;
+	updated?: (e: CustomEvent<undefined>) => void;
 	expanded?: (e: CustomEvent<null>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
-	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const PersonCard = wrapMgt<PersonCardProps>('person-card', registerMgtPersonCardComponent);
diff --git a/packages/mgt-react/src/generated/person.ts b/packages/mgt-react/src/generated/person.ts
index e933bd6152..6c41d02f41 100644
--- a/packages/mgt-react/src/generated/person.ts
+++ b/packages/mgt-react/src/generated/person.ts
@@ -37,12 +37,12 @@ export type PersonProps = {
 	line4Property?: string;
 	view?: ViewType;
 	templateContext?: TemplateContext;
+	updated?: (e: CustomEvent<undefined>) => void;
 	line1clicked?: (e: CustomEvent<IDynamicPerson>) => void;
 	line2clicked?: (e: CustomEvent<IDynamicPerson>) => void;
 	line3clicked?: (e: CustomEvent<IDynamicPerson>) => void;
 	line4clicked?: (e: CustomEvent<IDynamicPerson>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
-	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const Person = wrapMgt<PersonProps>('person', registerMgtPersonComponent);
diff --git a/packages/mgt-react/src/generated/picker.ts b/packages/mgt-react/src/generated/picker.ts
index c44aefba3b..ce2f43a2dc 100644
--- a/packages/mgt-react/src/generated/picker.ts
+++ b/packages/mgt-react/src/generated/picker.ts
@@ -28,8 +28,8 @@ export type PickerProps = {
 	selectedValue?: string;
 	templateContext?: TemplateContext;
 	selectionChanged?: (e: CustomEvent<any>) => void;
-	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 	updated?: (e: CustomEvent<undefined>) => void;
+	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 
 export const Picker = wrapMgt<PickerProps>('picker', registerMgtPickerComponent);
diff --git a/packages/mgt-react/src/generated/planner.ts b/packages/mgt-react/src/generated/planner.ts
index 9932f73d2a..a1f59dccbb 100644
--- a/packages/mgt-react/src/generated/planner.ts
+++ b/packages/mgt-react/src/generated/planner.ts
@@ -28,12 +28,12 @@ export type PlannerProps = {
 	groupId?: string;
 	taskFilter?: TaskFilter;
 	templateContext?: TemplateContext;
+	updated?: (e: CustomEvent<undefined>) => void;
 	taskAdded?: (e: CustomEvent<ITask>) => void;
 	taskChanged?: (e: CustomEvent<ITask>) => void;
 	taskClick?: (e: CustomEvent<ITask>) => void;
 	taskRemoved?: (e: CustomEvent<ITask>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
-	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const Planner = wrapMgt<PlannerProps>('planner', registerMgtPlannerComponent);
diff --git a/packages/mgt-react/src/generated/search-box.ts b/packages/mgt-react/src/generated/search-box.ts
index f674afdb18..79ef264e35 100644
--- a/packages/mgt-react/src/generated/search-box.ts
+++ b/packages/mgt-react/src/generated/search-box.ts
@@ -18,8 +18,8 @@ export type SearchBoxProps = {
 	placeholder?: string;
 	searchTerm?: string;
 	debounceDelay?: number;
-	searchTermChanged?: (e: CustomEvent<string>) => void;
 	updated?: (e: CustomEvent<undefined>) => void;
+	searchTermChanged?: (e: CustomEvent<string>) => void;
 }
 
 export const SearchBox = wrapMgt<SearchBoxProps>('search-box', registerMgtSearchBoxComponent);
diff --git a/packages/mgt-react/src/generated/search-results.ts b/packages/mgt-react/src/generated/search-results.ts
index 5ff1a47b90..dafd5437f7 100644
--- a/packages/mgt-react/src/generated/search-results.ts
+++ b/packages/mgt-react/src/generated/search-results.ts
@@ -32,9 +32,9 @@ export type SearchResultsProps = {
 	cacheInvalidationPeriod?: number;
 	currentPage?: number;
 	templateContext?: TemplateContext;
+	updated?: (e: CustomEvent<undefined>) => void;
 	dataChange?: (e: CustomEvent<DataChangedDetail>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
-	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const SearchResults = wrapMgt<SearchResultsProps>('search-results', registerMgtSearchResultsComponent);
diff --git a/packages/mgt-react/src/generated/taxonomy-picker.ts b/packages/mgt-react/src/generated/taxonomy-picker.ts
index 6c9d676486..d7a85911a3 100644
--- a/packages/mgt-react/src/generated/taxonomy-picker.ts
+++ b/packages/mgt-react/src/generated/taxonomy-picker.ts
@@ -30,8 +30,8 @@ export type TaxonomyPickerProps = {
 	cacheInvalidationPeriod?: number;
 	templateContext?: TemplateContext;
 	selectionChanged?: (e: CustomEvent<MicrosoftGraph.TermStore.Term>) => void;
-	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 	updated?: (e: CustomEvent<undefined>) => void;
+	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 
 export const TaxonomyPicker = wrapMgt<TaxonomyPickerProps>('taxonomy-picker', registerMgtTaxonomyPickerComponent);
diff --git a/packages/mgt-react/src/generated/teams-channel-picker.ts b/packages/mgt-react/src/generated/teams-channel-picker.ts
index c2e2798e19..32224371e7 100644
--- a/packages/mgt-react/src/generated/teams-channel-picker.ts
+++ b/packages/mgt-react/src/generated/teams-channel-picker.ts
@@ -18,9 +18,9 @@ import {wrapMgt} from '../Mgt';
 
 export type TeamsChannelPickerProps = {
 	templateContext?: TemplateContext;
+	updated?: (e: CustomEvent<undefined>) => void;
 	selectionChanged?: (e: CustomEvent<SelectedChannel | null>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
-	updated?: (e: CustomEvent<undefined>) => void;
 }
 
 export const TeamsChannelPicker = wrapMgt<TeamsChannelPickerProps>('teams-channel-picker', registerMgtTeamsChannelPickerComponent);
diff --git a/packages/mgt-react/src/generated/todo.ts b/packages/mgt-react/src/generated/todo.ts
index d2eadec1ee..3d532baed7 100644
--- a/packages/mgt-react/src/generated/todo.ts
+++ b/packages/mgt-react/src/generated/todo.ts
@@ -24,8 +24,8 @@ export type TodoProps = {
 	targetId?: string;
 	initialId?: string;
 	templateContext?: TemplateContext;
-	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 	updated?: (e: CustomEvent<undefined>) => void;
+	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 
 export const Todo = wrapMgt<TodoProps>('todo', registerMgtTodoComponent);

From b9c2c03e4ccd5cd8385024779ba3c31f2e126e74 Mon Sep 17 00:00:00 2001
From: Thomas Pentenrieder <pentenrieder@outlook.com>
Date: Tue, 7 Jan 2025 11:43:07 +0100
Subject: [PATCH 04/16] Update agenda.html.stories.js

---
 stories/components/agenda/agenda.html.stories.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/stories/components/agenda/agenda.html.stories.js b/stories/components/agenda/agenda.html.stories.js
index 16b3b67c68..e55fe9de89 100644
--- a/stories/components/agenda/agenda.html.stories.js
+++ b/stories/components/agenda/agenda.html.stories.js
@@ -25,6 +25,10 @@ export const events = () => html`
   <mgt-agenda></mgt-agenda>
   <script>
     const agenda = document.querySelector('mgt-agenda');
+    agenda.addEventListener('updated', e => {
+      console.log('updated', e);
+    });
+
     agenda.addEventListener('eventClick', (e) => {
       console.log(e.detail);
     })

From bd9164673831f5e311092e7a00b0fb455ebb6291 Mon Sep 17 00:00:00 2001
From: Thomas Pentenrieder <pentenrieder@outlook.com>
Date: Wed, 8 Jan 2025 13:53:34 +0100
Subject: [PATCH 05/16] stories

---
 .../components/agenda/agenda.react.stories.js | 32 +++++++++
 stories/components/file/file.html.stories.js  | 10 +++
 stories/components/file/file.react.stories.js | 29 ++++++++
 .../fileList/fileList.html.stories.js         |  4 ++
 .../fileList/fileList.react.stories.js        | 25 +++++++
 stories/components/get/get.html.stories.js    | 21 ++++++
 stories/components/get/get.react.stories.js   | 52 ++++++++++++++
 .../components/person/person.html.stories.js  | 67 +++++++++----------
 .../components/person/person.react.stories.js | 34 +++++++---
 9 files changed, 232 insertions(+), 42 deletions(-)

diff --git a/stories/components/agenda/agenda.react.stories.js b/stories/components/agenda/agenda.react.stories.js
index dbb7146e86..22f7778505 100644
--- a/stories/components/agenda/agenda.react.stories.js
+++ b/stories/components/agenda/agenda.react.stories.js
@@ -90,3 +90,35 @@ export default () => (
 );
 </react>
 `;
+
+export const events = () => html`
+  <mgt-agenda></mgt-agenda>
+  <react>
+    import { Agenda } from '@microsoft/mgt-react';
+
+    export default () => (
+      const onUpdated = (e) => {
+        console.log('updated', e);
+      };
+
+      const onEventClick = (e) => {
+        console.log(e.detail);
+      };
+
+      return(
+        <Agenda
+          updated={onUpdated}
+          eventClick={onEventClick}>
+        </Agenda>
+      );
+    );
+  </react>
+  <script>
+    document.querySelector('mgt-agenda').addEventListener('updated', e => {
+      console.log('updated', e);
+    });
+    document.querySelector('mgt-agenda').addEventListener('eventClick', e => {
+      console.log(e.detail);
+    });
+  </script>
+`;
diff --git a/stories/components/file/file.html.stories.js b/stories/components/file/file.html.stories.js
index 6814780e56..16654a34bd 100644
--- a/stories/components/file/file.html.stories.js
+++ b/stories/components/file/file.html.stories.js
@@ -38,3 +38,13 @@ export const localization = () => html`
   }
   </script>
 `;
+
+export const events = () => html`
+  <mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"></mgt-file>
+  <script>
+    const file = document.querySelector('mgt-file');
+    file.addEventListener('updated', e => {
+      console.log('updated', e);
+    });
+  </script>
+`;
diff --git a/stories/components/file/file.react.stories.js b/stories/components/file/file.react.stories.js
index 1895bbe64b..cdb4df072c 100644
--- a/stories/components/file/file.react.stories.js
+++ b/stories/components/file/file.react.stories.js
@@ -24,3 +24,32 @@ export const file = () => html`
     );
   </react>
 `;
+
+export const events = () => html`
+  <mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"></mgt-file>
+ 
+  <react>
+    import { useCallback } from 'react';
+    import { File } from '@microsoft/mgt-react';
+
+    export default () => {
+      const onUpdated = useCallback((e) => {
+        console.log('updated', e);
+      }, []);
+
+      return (
+        <File 
+        fileQuery='/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2' 
+        updated={onUpdated}>
+    </File>
+      );
+    };
+  </react>
+
+  <script>
+    const file = document.querySelector('mgt-file');
+    file.addEventListener('updated', e => {
+      console.log('updated', e);
+    });
+  </script>
+`;
diff --git a/stories/components/fileList/fileList.html.stories.js b/stories/components/fileList/fileList.html.stories.js
index 5e0e250160..beef9149b5 100644
--- a/stories/components/fileList/fileList.html.stories.js
+++ b/stories/components/fileList/fileList.html.stories.js
@@ -50,6 +50,10 @@ export const events = () => html`
       const file = document.querySelector('mgt-file');
       file.fileDetails = e.detail;
     });
+
+    document.querySelector('mgt-file-list').addEventListener('updated', e => {
+      console.log('updated', e);
+    });
   </script>
   <style>
     body {
diff --git a/stories/components/fileList/fileList.react.stories.js b/stories/components/fileList/fileList.react.stories.js
index 1faff51669..cbef09847e 100644
--- a/stories/components/fileList/fileList.react.stories.js
+++ b/stories/components/fileList/fileList.react.stories.js
@@ -24,3 +24,28 @@ export const fileList = () => html`
     );
   </react>
 `;
+
+export const events = () => html`
+  <mgt-file-list></mgt-file-list>
+  <react>
+    import { useCallback } from 'react';
+    import { FileList } from '@microsoft/mgt-react';
+
+    export default () => {
+      const onUpdated = useCallback((e: CustomEvent<undefined>) => {
+        console.log('updated', e);
+      }, []);
+
+      return (
+        <FileList 
+        updated={onUpdated}>
+    </FileList>
+      );
+    };
+  </react>
+  <script>
+    document.querySelector('mgt-file-list').addEventListener('updated', e => {
+      console.log('updated', e);
+    });
+  </script>
+`;
diff --git a/stories/components/get/get.html.stories.js b/stories/components/get/get.html.stories.js
index c2d3070819..a836133c33 100644
--- a/stories/components/get/get.html.stories.js
+++ b/stories/components/get/get.html.stories.js
@@ -205,3 +205,24 @@ softRefreshButton.addEventListener('click', softRefresh)
 hardRefreshButton.addEventListener('click', hardRefresh)
 </script>
 `;
+
+export const events = () => html`
+  <mgt-get resource="/me/messages" scopes="mail.read">
+    <template>
+      <pre>{{ JSON.stringify(value, null, 2) }}</pre>
+    </template>
+  </mgt-get>
+
+  <script>
+    const get = document.querySelector('mgt-get');
+    get.addEventListener('updated', e => {
+      console.log('updated', e);
+    });
+    get.addEventListener('dataChange', e => {
+      console.log('dataChange', e);
+    });
+    get.addEventListener('templateRendered', e => {
+      console.log('templateRendered', e);
+    });
+  </script>
+`;
diff --git a/stories/components/get/get.react.stories.js b/stories/components/get/get.react.stories.js
index ad03856af1..7ff9911886 100644
--- a/stories/components/get/get.react.stories.js
+++ b/stories/components/get/get.react.stories.js
@@ -37,3 +37,55 @@ export const Get = () => html`
     );
   </react>
 `;
+
+export const events = () => html`
+  <mgt-get resource="/me/messages" scopes="mail.read">
+    <template>
+      <pre>{{ JSON.stringify(value, null, 2) }}</pre>
+    </template>
+  </mgt-get>
+  <react>
+    import { Get, MgtTemplateProps } from '@microsoft/mgt-react';
+
+    export const Messages = (props: MgtTemplateProps) => {
+      const value = props.dataContext;
+      return (
+        <pre>{ JSON.stringify(value, null, 2) }</pre>
+      );
+    };
+
+    const onUpdated = (e: CustomEvent<undefined>) => {
+      console.log('updated', e);
+    };
+    const onTemplateRendered = (e: CustomEvent<undefined>) => {
+      console.log('templateRendered', e);
+    };
+    const onDataChange = (e: CustomEvent<undefined>) => {
+      console.log('dataChange', e);
+    };
+
+    export default () => (
+      <Get 
+    resource='/me/messages' 
+    scopes={['mail.read']}
+    updated={onUpdated}
+    templateRendered={onTemplateRendered}
+    dataChange={onDataChange}>
+      <Messages template="default"></Messages>
+  </Get>
+    );
+  </react>
+
+  <script>
+    const get = document.querySelector('mgt-get');
+    get.addEventListener('updated', e => {
+      console.log('updated', e);
+    });
+    get.addEventListener('dataChange', e => {
+      console.log('dataChange', e);
+    });
+    get.addEventListener('templateRendered', e => {
+      console.log('templateRendered', e);
+    });
+  </script>
+`;
diff --git a/stories/components/person/person.html.stories.js b/stories/components/person/person.html.stories.js
index d759c93651..67b9392a71 100644
--- a/stories/components/person/person.html.stories.js
+++ b/stories/components/person/person.html.stories.js
@@ -35,40 +35,39 @@ export const events = () => html`
   <div class="output">no line clicked</div>
 
   <script>
-  const person = document.querySelector('mgt-person');
-  person.addEventListener('updated', e => {
-      console.log('updated', e);
-  });
-
-  person.addEventListener('line1clicked', e => {
-      const output = document.querySelector('.output');
-
-      if (e && e.detail && e.detail.displayName) {
-          output.innerHTML = '<b>line1clicked:</b> ' + e.detail.displayName;
-      }
-  });
-  person.addEventListener('line2clicked', e => {
-      const output = document.querySelector('.output');
-
-      if (e && e.detail && e.detail.jobTitle) {
-          output.innerHTML = '<b>line2clicked:</b> ' + e.detail.jobTitle;
-      }
-  });
-  person.addEventListener('line3clicked', e => {
-      const output = document.querySelector('.output');
-
-      if (e && e.detail && e.detail.department) {
-          output.innerHTML = '<b>line3clicked:</b> ' + e.detail.department;
-      }
-  });
-  person.addEventListener('line4clicked', e => {
-      const output = document.querySelector('.output');
-
-      if (e && e.detail && e.detail.mail) {
-          output.innerHTML = '<b>line4clicked:</b> ' + e.detail.mail;
-      }
-  });
-
+    const person = document.querySelector('mgt-person');
+    person.addEventListener('updated', e => {
+        console.log('updated', e);
+    });
+
+    person.addEventListener('line1clicked', e => {
+        const output = document.querySelector('.output');
+
+        if (e && e.detail && e.detail.displayName) {
+            output.innerHTML = '<b>line1clicked:</b> ' + e.detail.displayName;
+        }
+    });
+    person.addEventListener('line2clicked', e => {
+        const output = document.querySelector('.output');
+
+        if (e && e.detail && e.detail.jobTitle) {
+            output.innerHTML = '<b>line2clicked:</b> ' + e.detail.jobTitle;
+        }
+    });
+    person.addEventListener('line3clicked', e => {
+        const output = document.querySelector('.output');
+
+        if (e && e.detail && e.detail.department) {
+            output.innerHTML = '<b>line3clicked:</b> ' + e.detail.department;
+        }
+    });
+    person.addEventListener('line4clicked', e => {
+        const output = document.querySelector('.output');
+
+        if (e && e.detail && e.detail.mail) {
+            output.innerHTML = '<b>line4clicked:</b> ' + e.detail.mail;
+        }
+    });
   </script>
 
   <style>
diff --git a/stories/components/person/person.react.stories.js b/stories/components/person/person.react.stories.js
index d07dc10e46..e902824c9c 100644
--- a/stories/components/person/person.react.stories.js
+++ b/stories/components/person/person.react.stories.js
@@ -82,7 +82,7 @@ export const events = () => html`
     import { Person, IDynamicPerson } from '@microsoft/mgt-react';
 
     export default () => {
-      const onUpdated = useCallback((e: CustomEvent<null>) => {
+      const onUpdated = useCallback((e: CustomEvent<undefined>) => {
         console.log('component updated', e);
       }, []);
 
@@ -92,14 +92,32 @@ export const events = () => html`
 
       return (
         <Person
-          personQuery="me"
-          view="fourlines"
-          updated={onUpdated}
-          line1clicked={onLineClicked}
-          line2clicked={onLineClicked}
-          line3clicked={onLineClicked}
-          line4clicked={onLineClicked}></Person>
+        personQuery="me"
+        view="fourlines"
+        updated={onUpdated}
+        line1clicked={onLineClicked}
+        line2clicked={onLineClicked}
+        line3clicked={onLineClicked}
+        line4clicked={onLineClicked}>
+    </Person>
       );
     };
   </react>
+  <script>
+    person.addEventListener('updated', e => {
+        console.log('updated', e);
+    });
+    person.addEventListener('line1clicked', e => {
+        console.log(e.detail);
+    });
+    person.addEventListener('line2clicked', e => {
+        console.log(e.detail);
+    });
+    person.addEventListener('line3clicked', e => {
+        console.log(e.detail);
+    });
+    person.addEventListener('line4clicked', e => {
+        console.log(e.detail);
+    });
+  </script>
 `;

From 0409171226b40396913f9e0d384e150fa2f76b5c Mon Sep 17 00:00:00 2001
From: Thomas Pentenrieder <pentenrieder@outlook.com>
Date: Wed, 8 Jan 2025 13:55:48 +0100
Subject: [PATCH 06/16] login story

---
 stories/components/login/login.html.stories.js |  3 +++
 .../components/login/login.react.stories.js    | 18 +++++++++++++-----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/stories/components/login/login.html.stories.js b/stories/components/login/login.html.stories.js
index 6fbfe6f12b..e2268df6da 100644
--- a/stories/components/login/login.html.stories.js
+++ b/stories/components/login/login.html.stories.js
@@ -105,6 +105,9 @@ export const Events = () => html`
   login.addEventListener('logoutCompleted', (e) => {
     console.log("Logout Completed");
   })
+  login.addEventListener('updated', (e) => {
+    console.log("Updated");
+  })
 </script>
 `;
 
diff --git a/stories/components/login/login.react.stories.js b/stories/components/login/login.react.stories.js
index 5f137d05ac..7216332c29 100644
--- a/stories/components/login/login.react.stories.js
+++ b/stories/components/login/login.react.stories.js
@@ -71,13 +71,18 @@ export const Events = () => html`
         console.log("Logout Completed");
       }, []);
 
+      const onUpdated = useCallback((e: CustomEvent<undefined>) => {
+        console.log('updated', e);
+      }, []);
+
       return (
         <Login
-          loginInitiated={onLoginInitiated}
-          loginCompleted={onLoginCompleted}
-          logoutInitiated={onLogoutInitiated}
-          logoutCompleted={onLogoutCompleted}>
-        </Login>
+        loginInitiated={onLoginInitiated}
+        loginCompleted={onLoginCompleted}
+        logoutInitiated={onLogoutInitiated}
+        logoutCompleted={onLogoutCompleted}
+        updated={onUpdated}>
+    </Login>
       );
     };
   </react>
@@ -95,5 +100,8 @@ export const Events = () => html`
     login.addEventListener('logoutCompleted', (e) => {
       console.log("Logout Completed");
     })
+    login.addEventListener('updated', (e) => {
+      console.log("Updated");
+    })
   </script>
 `;

From cc790957041254ff0c6d4763f01a085373f77e30 Mon Sep 17 00:00:00 2001
From: Thomas Pentenrieder <pentenrieder@outlook.com>
Date: Wed, 8 Jan 2025 13:59:19 +0100
Subject: [PATCH 07/16] people

---
 .../components/people/people.html.stories.js  | 10 ++++--
 .../components/people/people.react.stories.js | 33 +++++++++++++++++++
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/stories/components/people/people.html.stories.js b/stories/components/people/people.html.stories.js
index 8f8387cf92..819dd002c6 100644
--- a/stories/components/people/people.html.stories.js
+++ b/stories/components/people/people.html.stories.js
@@ -27,9 +27,13 @@ export const RTL = () => html`
 export const Events = () => html`
 <mgt-people people-queries="Megan Bowen"></mgt-people>
 <script>
-  const login = document.querySelector('mgt-people');
-  login.addEventListener('people-rendered', (e) => {
+  const people = document.querySelector('mgt-people');
+  people.addEventListener('people-rendered', (e) => {
     console.log("People rendered");
-  })
+  });
+  
+  people.addEventListener('updated', (e) => {
+    console.log("Updated");
+  });
 </script>
 `;
diff --git a/stories/components/people/people.react.stories.js b/stories/components/people/people.react.stories.js
index 400943bdd5..92c412f117 100644
--- a/stories/components/people/people.react.stories.js
+++ b/stories/components/people/people.react.stories.js
@@ -36,3 +36,36 @@ export const PeopleQueries = () => html`
     );
   </react>
 `;
+
+export const Events = () => html`
+  <mgt-people></mgt-people>
+  <react>
+    import { useCallback } from 'react';
+    import { People } from '@microsoft/mgt-react';
+
+    export default () => {
+      const onUpdated = useCallback((e: CustomEvent<undefined>) => {
+        console.log('updated', e);
+      }, []);
+
+      const onPeopleLoaded = useCallback((e: CustomEvent<undefined>) => {
+        console.log('People loaded', e);
+      }, []);
+
+      return (
+        <People 
+        updated={onUpdated}>
+        onPeopleLoaded={onPeopleLoaded}>
+    </People>
+      );
+    };
+  </react>
+  <script>
+    document.querySelector('mgt-people').addEventListener('updated', e => {
+      console.log('updated', e);
+    });
+    document.querySelector('mgt-people').addEventListener('people-loaded', e => {
+      console.log('People loaded', e);
+    });
+  </script>
+`;

From ee7ebfadbda39f26c3370097a2bdd711c5e12409 Mon Sep 17 00:00:00 2001
From: Thomas Pentenrieder <pentenrieder@outlook.com>
Date: Wed, 8 Jan 2025 14:09:24 +0100
Subject: [PATCH 08/16] peoplePicker

---
 .../peoplePicker/peoplePicker.html.stories.js |  5 ++++-
 .../peoplePicker.react.stories.js             | 22 +++++++++++++++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/stories/components/peoplePicker/peoplePicker.html.stories.js b/stories/components/peoplePicker/peoplePicker.html.stories.js
index 32a8be09ab..0255890266 100644
--- a/stories/components/peoplePicker/peoplePicker.html.stories.js
+++ b/stories/components/peoplePicker/peoplePicker.html.stories.js
@@ -24,13 +24,16 @@ export const RTL = () => html`
    </body>
  `;
 
-export const selectionChangedEvent = () => html`
+export const events = () => html`
    <mgt-people-picker></mgt-people-picker>
    <!-- Check the console tab for results -->
    <script>
    document.querySelector('mgt-people-picker').addEventListener('selectionChanged', e => {
      console.log(e.detail)
    });
+   document.querySelector('mgt-people-picker').addEventListener('updated', e => {
+      console.log('updated', e);
+    });
    </script>
  `;
 
diff --git a/stories/components/peoplePicker/peoplePicker.react.stories.js b/stories/components/peoplePicker/peoplePicker.react.stories.js
index 20682f9529..092c8dc4cf 100644
--- a/stories/components/peoplePicker/peoplePicker.react.stories.js
+++ b/stories/components/peoplePicker/peoplePicker.react.stories.js
@@ -25,7 +25,7 @@ export const peoplePicker = () => html`
   </react>
  `;
 
-export const selectionChangedEvent = () => html`
+export const events = () => html`
   <mgt-people-picker></mgt-people-picker>
   <react>
     // Check the console tab for the event to fire
@@ -33,11 +33,29 @@ export const selectionChangedEvent = () => html`
     import { PeoplePicker, IDynamicPerson } from '@microsoft/mgt-react';
 
     export default () => {
+      const onUpdated = useCallback((e: CustomEvent<undefined>) => {
+        console.log('updated', e);
+      }, []);
+
       const onSelectionChanged = useCallback((e: CustomEvent<IDynamicPerson[]>) => {
         console.log(e.detail);
       }, []);
 
-      return <PeoplePicker selectionChanged={onSelectionChanged}></PeoplePicker>;
+      return (
+        <PeoplePicker 
+        updated={onUpdated}
+        selectionChanged={onSelectionChanged}>
+    </PeoplePicker>
+
+      );
     };
   </react>
+  <script>
+    document.querySelector('mgt-people-picker').addEventListener('updated', e => {
+      console.log('updated', e);
+    });
+    document.querySelector('mgt-people-picker').addEventListener('selectionChanged', e => {
+      console.log('selectionChanged', e);
+    });
+  </script>
 `;

From ae22fb3930fb96016e5fb053e87a1e311d8be6b5 Mon Sep 17 00:00:00 2001
From: Thomas Pentenrieder <pentenrieder@outlook.com>
Date: Wed, 8 Jan 2025 14:12:52 +0100
Subject: [PATCH 09/16] personCard

---
 .../personCard/personCard.html.stories.js        |  3 +++
 .../personCard/personCard.react.stories.js       | 16 +++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/stories/components/personCard/personCard.html.stories.js b/stories/components/personCard/personCard.html.stories.js
index 7fe8d7225b..da33d62f5c 100644
--- a/stories/components/personCard/personCard.html.stories.js
+++ b/stories/components/personCard/personCard.html.stories.js
@@ -40,6 +40,9 @@ export const events = () => html`
     personCard.addEventListener('expanded', () => {
       console.log("expanded");
     })
+    personCard.addEventListener('updated', (e) => {
+      console.log("updated", e);
+    });
   </script>
 `;
 
diff --git a/stories/components/personCard/personCard.react.stories.js b/stories/components/personCard/personCard.react.stories.js
index 8a26a74bcc..8a1f3a3aec 100644
--- a/stories/components/personCard/personCard.react.stories.js
+++ b/stories/components/personCard/personCard.react.stories.js
@@ -36,15 +36,29 @@ export const events = () => html`
     import { PersonCard } from '@microsoft/mgt-react';
 
     export default () => {
+      const onUpdated = useCallback((e: CustomEvent<undefined>) => {
+        console.log('updated', e);
+      }, []);
+
       const onExpanded = useCallback((e: CustomEvent<null>) => {
         console.log("expanded");
       }, []);
 
-      return <PersonCard personQuery="me" expanded={onExpanded}></PersonCard>;
+      return (
+        <PersonCard 
+        personQuery="me" 
+        updated={onUpdated}
+        expanded={onExpanded}>
+    </PersonCard>
+      );
     };
   </react>
   <script>
     const personCard = document.querySelector('mgt-person-card');
+    personCard.addEventListener('updated', (e) => {
+      console.log("updated", e);
+    });
+
     personCard.addEventListener('expanded', () => {
       console.log("expanded");
     })

From 6a6eb9ddc23eb550eff070d8f3e8a0b7e18126c5 Mon Sep 17 00:00:00 2001
From: Thomas Pentenrieder <pentenrieder@outlook.com>
Date: Wed, 8 Jan 2025 14:15:48 +0100
Subject: [PATCH 10/16] picker

---
 .../components/picker/picker.html.stories.js  |  3 +++
 .../components/picker/picker.react.stories.js | 21 +++++++++++++------
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/stories/components/picker/picker.html.stories.js b/stories/components/picker/picker.html.stories.js
index 28e3c35430..b8a8febc23 100644
--- a/stories/components/picker/picker.html.stories.js
+++ b/stories/components/picker/picker.html.stories.js
@@ -41,5 +41,8 @@ export const events = () => html`
     document.querySelector('mgt-picker').addEventListener('selectionChanged', e => {
       console.log('selectedItem:', e.detail);
     });
+    document.querySelector('mgt-picker').addEventListener('updated', e => {
+      console.log('updated', e);
+    });
   </script>
 `;
diff --git a/stories/components/picker/picker.react.stories.js b/stories/components/picker/picker.react.stories.js
index b0d691b675..fcd2dbceb8 100644
--- a/stories/components/picker/picker.react.stories.js
+++ b/stories/components/picker/picker.react.stories.js
@@ -34,22 +34,31 @@ export const events = () => html`
     import { Picker } from '@microsoft/mgt-react';
 
     export default () => {
+      const onUpdated = useCallback((e: CustomEvent<undefined>) => {
+        console.log('updated', e);
+      }, []);
+
       const onSelectionChanged = useCallback((e: CustomEvent<any>) => {
         console.log('selectedItem', e.detail);
       }, []);
 
       return (
         <Picker
-          resource='me/messages'
-          scopes={['mail.read']}
-          placeholder="Select a message"
-          keyName="subject"
-          maxPages={2}
-          selectionChanged={onSelectionChanged}></Picker>
+        resource='me/messages'
+        scopes={['mail.read']}
+        placeholder="Select a message"
+        keyName="subject"
+        maxPages={2}
+        updated={onUpdated}
+        selectionChanged={onSelectionChanged}>
+    </Picker>
       );
     };
   </react>
   <script>
+    document.querySelector('mgt-picker').addEventListener('updated', e => {
+      console.log('updated', e);
+    });
     document.querySelector('mgt-picker').addEventListener('selectionChanged', e => {
       console.log('selectedItem:', e.detail);
     });

From 12bb4d92e3fa7af127e7983d6ec15e1d99c7844a Mon Sep 17 00:00:00 2001
From: Thomas Pentenrieder <pentenrieder@outlook.com>
Date: Wed, 8 Jan 2025 14:23:47 +0100
Subject: [PATCH 11/16] planner

---
 .../planner/planner.html.stories.js           | 31 ++++++++
 .../planner/planner.react.stories.js          | 74 +++++++++++++++++++
 2 files changed, 105 insertions(+)

diff --git a/stories/components/planner/planner.html.stories.js b/stories/components/planner/planner.html.stories.js
index c28311c112..e2ce051fde 100644
--- a/stories/components/planner/planner.html.stories.js
+++ b/stories/components/planner/planner.html.stories.js
@@ -25,3 +25,34 @@ export const plannerWithGroupId = () => html`
     Group.ReadWrite.All permissions. Test this component in your tenant.
   -->
 `;
+
+export const events = () => html`
+  <mgt-planner></mgt-planner>
+  <script>
+    const planner = document.querySelector('mgt-planner');
+    planner.addEventListener('updated', (e) => {
+      console.log("Updated", e);
+    });
+
+    planner.addEventListener('taskAdded', (e) => {
+      console.log("Tasks added", e);
+    });
+
+    planner.addEventListener('taskChanged', (e) => {
+      console.log("Tasks changed", e);
+    });
+
+    planner.addEventListener('taskClick', (e) => {
+      console.log("Task clicked", e);
+    });
+
+    planner.addEventListener('taskRemoved', (e) => {
+      console.log("Tasks removed", e);
+    });
+
+    planner.addEventListener('templateRendered', (e) => {
+      console.log("Template Rendered", e);
+    });
+    
+  </script>
+`;
diff --git a/stories/components/planner/planner.react.stories.js b/stories/components/planner/planner.react.stories.js
index e9557627f9..8398ba3bf7 100644
--- a/stories/components/planner/planner.react.stories.js
+++ b/stories/components/planner/planner.react.stories.js
@@ -24,3 +24,77 @@ export const planner = () => html`
     );
   </react>
 `;
+
+export const events = () => html`
+  <mgt-planner></mgt-planner>
+  <react>
+    // Check the console tab for the event to fire
+    import { useCallback } from 'react';
+    import { Planner } from '@microsoft/mgt-react';
+
+    export default () => {
+    
+      const onUpdated = useCallback((e: CustomEvent<undefined>) => {
+        console.log('updated', e);
+      }, []);
+
+      const onTaskAdded = useCallback((e: CustomEvent<ITask>) => {
+        console.log('taskAdded', e);
+      }, []);
+
+      const onTaskChanged = useCallback((e: CustomEvent<ITask>) => {
+        console.log('taskChanged', e);
+      }, []);
+
+      const onTaskClick = useCallback((e: CustomEvent<ITask>) => {
+        console.log('taskClick', e);
+      }, []);
+
+      const onTaskRemoved = useCallback((e: CustomEvent<ITask>) => {
+        console.log('taskRemoved', e);
+      }, []);
+
+      const onTemplateRendered = useCallback((e: CustomEvent<MgtElement.TemplateRenderedData>) => {
+        console.log('templateRendered', e);
+      }, []);
+
+      return (
+        <Planner 
+        updated={onUpdated}
+        taskAdded={onTaskAdded}
+        taskChanged={onTaskChanged}
+        taskClick={onTaskClick}
+        taskRemoved={onTaskRemoved}
+        templateRendered={onTemplateRendered}>
+    </Planner>
+      );
+    };
+  </react>
+  <script>
+    const planner = document.querySelector('mgt-planner');
+    planner.addEventListener('updated', (e) => {
+      console.log("Updated", e);
+    });
+
+    planner.addEventListener('taskAdded', (e) => {
+      console.log("Tasks added", e);
+    });
+
+    planner.addEventListener('taskChanged', (e) => {
+      console.log("Tasks changed", e);
+    });
+
+    planner.addEventListener('taskClick', (e) => {
+      console.log("Task clicked", e);
+    });
+
+    planner.addEventListener('taskRemoved', (e) => {
+      console.log("Tasks removed", e);
+    });
+
+    planner.addEventListener('templateRendered', (e) => {
+      console.log("Template Rendered", e);
+    });
+    
+  </script>
+`;

From 4ef79a0b58e271d921a55d1266bd87307eb15b2d Mon Sep 17 00:00:00 2001
From: Thomas Pentenrieder <pentenrieder@outlook.com>
Date: Wed, 8 Jan 2025 14:31:25 +0100
Subject: [PATCH 12/16] search

---
 .../searchBox/searchBox.html.stories.js       |  3 ++
 .../searchBox/searchBox.react.stories.js      | 13 ++++-
 .../searchResults.html.stories.js             | 20 ++++++++
 .../searchResults.react.stories.js            | 50 +++++++++++++++++++
 4 files changed, 85 insertions(+), 1 deletion(-)

diff --git a/stories/components/searchBox/searchBox.html.stories.js b/stories/components/searchBox/searchBox.html.stories.js
index 305ca7af01..d0036ff3b5 100644
--- a/stories/components/searchBox/searchBox.html.stories.js
+++ b/stories/components/searchBox/searchBox.html.stories.js
@@ -40,6 +40,9 @@ export const events = () => html`
   <mgt-search-box></mgt-search-box>
   <script>
     const searchBox = document.querySelector('mgt-search-box');
+    searchBox.addEventListener('updated', (e) => {
+      console.log('updated', e);
+    });
     searchBox.addEventListener('searchTermChanged', (e) => {
       console.log(e.detail);
     });
diff --git a/stories/components/searchBox/searchBox.react.stories.js b/stories/components/searchBox/searchBox.react.stories.js
index 74c48b7335..bc85e2d75a 100644
--- a/stories/components/searchBox/searchBox.react.stories.js
+++ b/stories/components/searchBox/searchBox.react.stories.js
@@ -35,15 +35,26 @@ export const events = () => html`
     import { SearchBox } from '@microsoft/mgt-react';
 
     export default () => {
+      const onUpdated = useCallback((e) => {
+        console.log('updated', e); 
+      });
+
       const onSearchTermChanged = useCallback((e: CustomEvent<string>) => {
         console.log(e.detail);
       }, []);
 
-      return <SearchBox searchTermChanged={onSearchTermChanged}></SearchBox>;
+      return (
+        <SearchBox 
+        updated={onUpdated}
+        searchTermChanged={onSearchTermChanged}>
+    </SearchBox>;
     };
   </react>
   <script>
     const searchBox = document.querySelector('mgt-search-box');
+    searchBox.addEventListener('updated', (e) => {
+      console.log('updated', e);
+    });
     searchBox.addEventListener('searchTermChanged', (e) => {
       console.log(e.detail);
     });
diff --git a/stories/components/searchResults/searchResults.html.stories.js b/stories/components/searchResults/searchResults.html.stories.js
index d45f452319..a9e5abe6b2 100644
--- a/stories/components/searchResults/searchResults.html.stories.js
+++ b/stories/components/searchResults/searchResults.html.stories.js
@@ -40,3 +40,23 @@ export const localization = () => html`
   }
   </script>
 `;
+
+export const events = () => html`
+  <mgt-search-results
+    entity-types="driveItem"
+    fetch-thumbnail="true"
+    query-string="contoso">
+  </mgt-search-results>
+  <script>
+    const searchResults = document.querySelector('mgt-search-results');
+    searchResults.addEventListener('updated', (e) => {
+      console.log('updated', e);
+    });
+    searchResults.addEventListener('dataChange', (e) => {
+      console.log('dataChange', e);
+    });
+    searchResults.addEventListener('templateRendered', (e) => {
+      console.log('templateRendered', e);
+    });
+  </script>
+`;
diff --git a/stories/components/searchResults/searchResults.react.stories.js b/stories/components/searchResults/searchResults.react.stories.js
index b47ebc3d9f..ca19adbc13 100644
--- a/stories/components/searchResults/searchResults.react.stories.js
+++ b/stories/components/searchResults/searchResults.react.stories.js
@@ -28,3 +28,53 @@ export const searchResults = () => html`
     );
   </react>
 `;
+
+export const events = () => html`
+  <mgt-search-results
+    entity-types="driveItem"
+    fetch-thumbnail="true"
+    query-string="contoso">
+  </mgt-search-results>
+  <react>
+    // Check the console tab for the event to fire
+    import { useCallback } from 'react';
+    import { SearchResults } from '@microsoft/mgt-react';
+
+    export default () => {
+      const onUpdated = useCallback((e) => {
+        console.log('updated', e); 
+      });
+
+      const onDataChange = useCallback((e) => {
+        console.log('dataChange', e); 
+      });
+
+      const onTemplateRendered = useCallback((e) => {
+        console.log('templateRendered', e); 
+      });
+
+      return (
+        <SearchResults 
+        entityTypes={['driveItem']} 
+        fetchThumbnail={true} 
+        queryString="contoso"
+        updated={onUpdated}
+        dataChange={onDataChange}
+        templateRendered={onTemplateRendered}>
+      </SearchResults>
+      );
+    };
+  </react>
+  <script>
+    const searchResults = document.querySelector('mgt-search-results');
+    searchResults.addEventListener('updated', (e) => {
+      console.log('updated', e);
+    });
+    searchResults.addEventListener('dataChange', (e) => {
+      console.log('dataChange', e);
+    });
+    searchResults.addEventListener('templateRendered', (e) => {
+      console.log('templateRendered', e);
+    });
+  </script>
+`;

From a259702f1c7ed96816ae0fc89fb38b5e59becd05 Mon Sep 17 00:00:00 2001
From: Thomas Pentenrieder <pentenrieder@outlook.com>
Date: Wed, 8 Jan 2025 14:33:37 +0100
Subject: [PATCH 13/16] taxonomy

---
 .../taxonomyPicker/taxonomyPicker.html.stories.js   |  5 ++++-
 .../taxonomyPicker/taxonomyPicker.react.stories.js  | 13 +++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/stories/components/taxonomyPicker/taxonomyPicker.html.stories.js b/stories/components/taxonomyPicker/taxonomyPicker.html.stories.js
index 0501b4d46b..a6406ae1e7 100644
--- a/stories/components/taxonomyPicker/taxonomyPicker.html.stories.js
+++ b/stories/components/taxonomyPicker/taxonomyPicker.html.stories.js
@@ -18,10 +18,13 @@ export const TaxonomyPicker = () => html`
   <mgt-taxonomy-picker term-set-id="f1c3d275-b202-41f0-83f3-80d63ffaa052"></mgt-taxonomy-picker>
 `;
 
-export const SelectionChangedEvent = () => html`
+export const events = () => html`
   <mgt-taxonomy-picker term-set-id="f1c3d275-b202-41f0-83f3-80d63ffaa052"></mgt-taxonomy-picker>
   <!-- Check the console tab for results -->
   <script>
+    document.querySelector('mgt-taxonomy-picker').addEventListener('updated', e => {
+      console.log('updated', e);
+    });
     document.querySelector('mgt-taxonomy-picker').addEventListener('selectionChanged', e => {
       console.log('selected term:', e.detail)
     });
diff --git a/stories/components/taxonomyPicker/taxonomyPicker.react.stories.js b/stories/components/taxonomyPicker/taxonomyPicker.react.stories.js
index 510bbdc3dc..67f670c325 100644
--- a/stories/components/taxonomyPicker/taxonomyPicker.react.stories.js
+++ b/stories/components/taxonomyPicker/taxonomyPicker.react.stories.js
@@ -25,7 +25,7 @@ export const TaxonomyPicker = () => html`
   </react>
 `;
 
-export const SelectionChangedEvent = () => html`
+export const Events = () => html`
   <!-- Check the console tab for results -->
   <mgt-taxonomy-picker term-set-id="f1c3d275-b202-41f0-83f3-80d63ffaa052"></mgt-taxonomy-picker>
   <react>
@@ -34,11 +34,20 @@ export const SelectionChangedEvent = () => html`
     import { TaxonomyPicker } from '@microsoft/mgt-react';
 
     export default () => {
+      const onUpdated = useCallback((e) => {
+        console.log('updated', e); 
+      });
       const onSelectionChanged = useCallback((e: CustomEvent<IDynamicPerson[]>) => {
         console.log(e.detail);
       }, []);
 
-      return <TaxonomyPicker termSetId="f1c3d275-b202-41f0-83f3-80d63ffaa052" selectionChanged={onSelectionChanged}></TaxonomyPicker>;
+      return (
+        <TaxonomyPicker 
+        termSetId="f1c3d275-b202-41f0-83f3-80d63ffaa052" 
+        updated={onUpdated}
+        selectionChanged={onSelectionChanged}>
+      </TaxonomyPicker>
+      );
     };
   </react>
   <script>

From eff84addf2f391d1c450c61e7762f13b5835ce6f Mon Sep 17 00:00:00 2001
From: Thomas Pentenrieder <pentenrieder@outlook.com>
Date: Wed, 8 Jan 2025 14:42:59 +0100
Subject: [PATCH 14/16] teamsChannel

---
 .../teamsChannelPicker.html.stories.js                |  6 +++++-
 .../teamsChannelPicker.react.stories.js               | 11 ++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/stories/components/teamsChannelPicker/teamsChannelPicker.html.stories.js b/stories/components/teamsChannelPicker/teamsChannelPicker.html.stories.js
index ce7914dd53..abfe6a3e8c 100644
--- a/stories/components/teamsChannelPicker/teamsChannelPicker.html.stories.js
+++ b/stories/components/teamsChannelPicker/teamsChannelPicker.html.stories.js
@@ -40,13 +40,17 @@ export const getSelectedChannel = () => html`
   </script>
 `;
 
-export const selectionChangedEvent = () => html`
+export const events = () => html`
   <mgt-teams-channel-picker></mgt-teams-channel-picker>
 
   <div class="output">no channel selected</div>
 
   <script>
     const picker = document.querySelector('mgt-teams-channel-picker');
+    picker.addEventListener('updated', e => {
+      console.log('updated', e);
+    });
+    
     picker.addEventListener('selectionChanged', e => {
       const output = document.querySelector('.output');
 
diff --git a/stories/components/teamsChannelPicker/teamsChannelPicker.react.stories.js b/stories/components/teamsChannelPicker/teamsChannelPicker.react.stories.js
index 5889dd5ac3..a9a9d15be8 100644
--- a/stories/components/teamsChannelPicker/teamsChannelPicker.react.stories.js
+++ b/stories/components/teamsChannelPicker/teamsChannelPicker.react.stories.js
@@ -33,11 +33,20 @@ export const Events = () => html`
     import { TeamsChannelPicker, SelectedChannel } from '@microsoft/mgt-react';
 
     export default () => {
+      const onUpdated = useCallback((e: CustomEvent<undefined>) => {
+        console.log('updated', e);
+      });
+
       const onSelectionChanged = useCallback((e: CustomEvent<SelectedChannel | null>) => {
         console.log(e.detail);
       }, []);
 
-      return <TeamsChannelPicker selectionChanged={onSelectionChanged}></TeamsChannelPicker>;
+      return (
+        <TeamsChannelPicker 
+        updated={onUpdated}
+        selectionChanged={onSelectionChanged}>
+    </TeamsChannelPicker>
+      );
     };
   </react>
   <script>

From 2d4651bb3fc99c328fabeae5d7155a6e7cd24865 Mon Sep 17 00:00:00 2001
From: Thomas Pentenrieder <pentenrieder@outlook.com>
Date: Wed, 8 Jan 2025 14:43:03 +0100
Subject: [PATCH 15/16] themeToggle

---
 .../theme-toggle/themeToggle.html.stories.js  | 18 +++++++++
 .../theme-toggle/themeToggle.react.stories.js | 40 +++++++++++++++++++
 2 files changed, 58 insertions(+)

diff --git a/stories/components/theme-toggle/themeToggle.html.stories.js b/stories/components/theme-toggle/themeToggle.html.stories.js
index 5b0775d6fd..5dcce43455 100644
--- a/stories/components/theme-toggle/themeToggle.html.stories.js
+++ b/stories/components/theme-toggle/themeToggle.html.stories.js
@@ -130,3 +130,21 @@ body {
   }
   </script>
 `;
+
+export const events = () => html`
+  <mgt-theme-toggle></mgt-theme-toggle>
+  <style>
+body {
+    background-color: var(--fill-color);
+}
+  </style>
+  <script>
+    const themeToggle = document.querySelector('mgt-theme-toggle');
+    themeToggle.addEventListener('updated', (e) => {
+      console.log('updated', e);
+    });
+    themeToggle.addEventListener('darkmodechanged', (e) => {
+      console.log('darkmodechanged', e);
+    });
+  </script>
+`;
diff --git a/stories/components/theme-toggle/themeToggle.react.stories.js b/stories/components/theme-toggle/themeToggle.react.stories.js
index fedfdc8a2d..5e910c662a 100644
--- a/stories/components/theme-toggle/themeToggle.react.stories.js
+++ b/stories/components/theme-toggle/themeToggle.react.stories.js
@@ -51,3 +51,43 @@ export const SetMode = () => html`
     }
   </style>
 `;
+
+export const Events = () => html`
+  <mgt-theme-toggle></mgt-theme-toggle>
+  <react>
+    // Check the console tab for the event to fire
+    import { useCallback } from 'react';
+    import { ThemeToggle } from '@microsoft/mgt-react';
+
+    export default () => {
+      const onUpdated = useCallback((e) => {
+        console.log('updated', e); 
+      });
+
+      const onDarkModeChanged = useCallback((e: CustomEvent<boolean>) => {
+        console.log('darkModeChanged', e); 
+      }
+
+      return (
+        <ThemeToggle
+        updated={onUpdated}
+        darkmodechanged={onDarkModeChanged}>
+      </ThemeToggle>
+      );
+    };
+  </react>
+  <style>
+    body {
+      background-color: var(--fill-color);
+    }
+  </style>
+  <script>
+    const themeToggle = document.querySelector('mgt-theme-toggle');
+    themeToggle.addEventListener('updated', (e) => {
+      console.log('updated', e);
+    });
+    themeToggle.addEventListener('darkmodechanged', (e) => {
+      console.log('darkModeChanged', e);
+    });
+  </script>
+`;

From e858f93f33b1af10011461edd96fa8c61ac3a6c5 Mon Sep 17 00:00:00 2001
From: Thomas Pentenrieder <pentenrieder@outlook.com>
Date: Wed, 8 Jan 2025 14:47:33 +0100
Subject: [PATCH 16/16] todo

---
 stories/components/todo/todo.html.stories.js  | 13 ++++++++
 stories/components/todo/todo.react.stories.js | 33 +++++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/stories/components/todo/todo.html.stories.js b/stories/components/todo/todo.html.stories.js
index aaed9d6a8a..5cf5a3af5e 100644
--- a/stories/components/todo/todo.html.stories.js
+++ b/stories/components/todo/todo.html.stories.js
@@ -29,3 +29,16 @@ export const tasksWithInitialId = () => html`
 export const ReadOnly = () => html`
   <mgt-todo read-only></mgt-todo>
 `;
+
+export const events = () => html`
+  <mgt-todo></mgt-todo>
+  <script>
+    const todo = document.querySelector('mgt-todo');
+    todo.addEventListener('updated', (e) => {
+      console.log('updated', e);
+    });
+    todo.addEventListener('templateRendered', (e) => {
+      console.log('templateRendered', e);
+    });
+  </script>
+`;
diff --git a/stories/components/todo/todo.react.stories.js b/stories/components/todo/todo.react.stories.js
index 5c8507e01a..9d46aa661e 100644
--- a/stories/components/todo/todo.react.stories.js
+++ b/stories/components/todo/todo.react.stories.js
@@ -24,3 +24,36 @@ export const todos = () => html`
     );
   </react>
 `;
+
+export const events = () => html`
+  <mgt-todo></mgt-todo>
+  <react>
+    import { Todo } from '@microsoft/mgt-react';
+
+    export default () => {
+    const onUpdated = useCallback((e: CustomEvent<undefined>) => {
+      console.log('updated', e);
+    });
+
+    const onTemplateRendered = useCallback((e: CustomEvent<MgtElement.TemplateRenderedData>) => {
+      console.log('templateRendered', e);
+    });
+
+    return (
+      <Todo
+      updated={onUpdated}
+      templateRendered={onTemplateRendered}>
+    </Todo>
+    );
+  };
+  </react>
+  <script>
+    const todo = document.querySelector('mgt-todo');
+    todo.addEventListener('updated', (e) => {
+      console.log('updated', e);
+    });
+    todo.addEventListener('templateRendered', (e) => {
+      console.log('templateRendered', e);
+    });
+  </script>
+`;