Update react package to wc-react 0.5.0 and added ref support (#1137)

Author: nmetulev

packages/mgt-react/package.json

@@ -35,7 +35,7 @@
     "@microsoft/mgt-element": "*",
     "@microsoft/microsoft-graph-types": "^1.36.0",
     "@microsoft/microsoft-graph-types-beta": "^0.7.0-preview",
-    "wc-react": "^0.4.0"
+    "wc-react": "^0.5.0"
   },
   "publishConfig": {
     "access": "public"

packages/mgt-react/src/Mgt.ts

@@ -142,7 +142,8 @@ export class Mgt extends Wc {
  * @returns React component
  */
 export const wrapMgt = <T = WcProps>(tag: string) => {
-  const component: React.FC<T & React.HTMLAttributes<any>> = (props: T) =>
-    React.createElement(Mgt, { wcType: tag, ...props });
+  const component: React.ForwardRefExoticComponent<
+    React.PropsWithoutRef<T & React.HTMLAttributes<any>> & React.RefAttributes<unknown>
+  > = React.forwardRef((props: T, ref) => React.createElement(Mgt, { wcType: tag, innerRef: ref, ...props }));
   return component;
 };

samples/react-app/package.json

@@ -7,9 +7,9 @@
     "@microsoft/mgt-react": "*",
     "@microsoft/mgt-msal-provider": "*",
     "@webcomponents/webcomponentsjs": "2.2.10",
-    "react": "^16.8.5",
+    "react": "^17.0.1",
     "react-app-polyfill": "1.0.1",
-    "react-dom": "^16.8.5",
+    "react-dom": "^17.0.1",
     "react-scripts": "^3.0.0"
   },
   "scripts": {

samples/react-app/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, useRef } from 'react';
 import {
   Login,
   Agenda,
@@ -10,6 +10,7 @@ import {
   Get
 } from '@microsoft/mgt-react';
 import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
+import { MgtPerson } from '@microsoft/mgt-components';
 
 class App extends Component {
   handleTemplateRendered = (e: Event) => {
@@ -65,13 +66,21 @@ const MyTemplate = (props: MgtTemplateProps) => {
 const MyMessage = (props: MgtTemplateProps) => {
   const message = props.dataContext as MicrosoftGraph.Message;
 
+  const personRef = useRef<MgtPerson>();
+
+  const handlePersonClick = () => {
+    console.log(personRef.current);
+  };
+
   return (
     <div>
       <b>Subject:</b>
       {message.subject}
       <div>
         <b>From:</b>
         <Person
+          ref={personRef}
+          onClick={handlePersonClick}
           personQuery={message.from?.emailAddress?.address || ''}
           fallbackDetails={{ mail: message.from?.emailAddress?.address, displayName: message.from?.emailAddress?.name }}
           view={PersonViewType.oneline}