feat: expose updated event on mgt components (#3357)

* feat: expose updated event

makes updated event of MgtBaseTaskComponent accessible on Person control

* add updated event to baseTaskComponent

* method order

* Update agenda.html.stories.js

* stories

* login story

* people

* peoplePicker

* personCard

* picker

* planner

* search

* taxonomy

* teamsChannel

* themeToggle

* todo

---------

Co-authored-by: Musale Martin <[email protected]>

Author: ThomasPe

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

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.
  *

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.

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

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

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.

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.

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

packages/mgt-components/src/components/mgt-person/mgt-person.ts

@@ -75,6 +75,7 @@ export const registerMgtPersonComponent = () => {
  * @class MgtPerson
  * @extends {MgtTemplatedComponent}
  *
+ * @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
@@ -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

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.
  */

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.

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

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

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

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

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() {

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

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 {
   /**

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);

packages/mgt-react/src/generated/file-list.ts

@@ -37,6 +37,7 @@ 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;
 }

packages/mgt-react/src/generated/file.ts

@@ -35,6 +35,7 @@ export type FileProps = {
 	line3Property?: string;
 	view?: ViewType;
 	templateContext?: TemplateContext;
+	updated?: (e: CustomEvent<undefined>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 

packages/mgt-react/src/generated/get.ts

@@ -27,6 +27,7 @@ export type GetProps = {
 	cacheInvalidationPeriod?: number;
 	response?: any;
 	templateContext?: TemplateContext;
+	updated?: (e: CustomEvent<undefined>) => void;
 	dataChange?: (e: CustomEvent<DataChangedDetail>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }

packages/mgt-react/src/generated/login.ts

@@ -21,6 +21,7 @@ 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;

packages/mgt-react/src/generated/people-picker.ts

@@ -42,6 +42,7 @@ export type PeoplePickerProps = {
 	ariaLabel?: string;
 	disableSuggestions?: boolean;
 	templateContext?: TemplateContext;
+	updated?: (e: CustomEvent<undefined>) => void;
 	selectionChanged?: (e: CustomEvent<IDynamicPerson[]>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }

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);

packages/mgt-react/src/generated/person-card.ts

@@ -28,6 +28,7 @@ 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;
 }

packages/mgt-react/src/generated/person.ts

@@ -37,6 +37,7 @@ 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;

packages/mgt-react/src/generated/picker.ts

@@ -28,6 +28,7 @@ export type PickerProps = {
 	selectedValue?: string;
 	templateContext?: TemplateContext;
 	selectionChanged?: (e: CustomEvent<any>) => void;
+	updated?: (e: CustomEvent<undefined>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 

packages/mgt-react/src/generated/planner.ts

@@ -28,6 +28,7 @@ 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;

packages/mgt-react/src/generated/search-box.ts

@@ -18,6 +18,7 @@ export type SearchBoxProps = {
 	placeholder?: string;
 	searchTerm?: string;
 	debounceDelay?: number;
+	updated?: (e: CustomEvent<undefined>) => void;
 	searchTermChanged?: (e: CustomEvent<string>) => void;
 }
 

packages/mgt-react/src/generated/search-results.ts

@@ -32,6 +32,7 @@ export type SearchResultsProps = {
 	cacheInvalidationPeriod?: number;
 	currentPage?: number;
 	templateContext?: TemplateContext;
+	updated?: (e: CustomEvent<undefined>) => void;
 	dataChange?: (e: CustomEvent<DataChangedDetail>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }

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);
 

packages/mgt-react/src/generated/taxonomy-picker.ts

@@ -30,6 +30,7 @@ export type TaxonomyPickerProps = {
 	cacheInvalidationPeriod?: number;
 	templateContext?: TemplateContext;
 	selectionChanged?: (e: CustomEvent<MicrosoftGraph.TermStore.Term>) => void;
+	updated?: (e: CustomEvent<undefined>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 

packages/mgt-react/src/generated/teams-channel-picker.ts

@@ -18,6 +18,7 @@ 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;
 }

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);

packages/mgt-react/src/generated/todo.ts

@@ -24,6 +24,7 @@ export type TodoProps = {
 	targetId?: string;
 	initialId?: string;
 	templateContext?: TemplateContext;
+	updated?: (e: CustomEvent<undefined>) => void;
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 

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);
     })

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>
+`;

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>
+`;