Add Typescript Typing for "selectionChanged" event

[qingwang96]

For the "selectionChanged" event on PeoplePicker component and others such as TeamsChannelPicker, the Typescript typing for the event property is not specified past the global React "Event" type.

Could somebody help to clarify the expected event structure in Typescript?

From "react.ts" in generated node_modules:

export type PeoplePickerProps = {
	groupId?: string;
	type?: PersonType;
	groupType?: GroupType;
	transitiveSearch?: boolean;
	people?: IDynamicPerson[];
	selectedPeople?: IDynamicPerson[];
	defaultSelectedUserIds?: string[];
	placeholder?: string;
	selectionMode?: string;
	showMax?: number;
	disabled?: boolean;
	templateContext?: TemplateContext;
	mediaQuery?: ComponentMediaQuery;
	selectionChanged?: (e: Event) => void;
}

[msftbot[bot]]

Hello qingwang96, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[vogtn]

@qingwang96

Yeah seems like there is some limitation with a purely js react custom events.

Here is a quick sample, of what we expect ts:

And here is the basic structure for all of our CustomEvents. I think you'll mainly be concerned with the "detail" : https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/d9ced8455bcdf3bff266270668441900f89f61d2/packages/mgt-element/src/components/baseComponent.ts#L184-L196

Hope this helps in the meantime

[beth-panx]

At the meantime, we should investigate to implement this on mgt.

[gavinbarron]

It looks like web component analyzer will support what we need to make this fly in the future based on: https://github.com/runem/web-component-analyzer/issues/169 and https://github.com/runem/web-component-analyzer/pull/157

I've raised https://github.com/runem/web-component-analyzer/issues/248 to see if this is going to be addressed soon.