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