upgraded mgt and pnpjs to latest

Author: tomitavela

gulpfile.js

@@ -224,6 +224,7 @@ gulp.task('copy:sp-taxonomy', (done) => {
 gulp.task('copy:microsoft-graph-types', (done) => {
   console.log("Copy @microsoft/microsoft-graph-types");
   gulp.src('./node_modules/@microsoft/microsoft-graph-types/microsoft-graph.d.ts')
+    .pipe(rename('index.d.ts'))
     .pipe(gulp.dest('./public/@microsoft/microsoft-graph-types/'));
   done();
 });
@@ -326,7 +327,7 @@ gulp.task('default',
    // 'copy:sp-taxonomy',
     'copy:microsoft-graph-types',
     'copy:microsoft-graph-client',
-    'copy:msal',
+   // 'copy:msal',
     'copy:msal-browser',
    // 'copy:AuthCodeMSALBrowserAuthenticationProvider',
     'copy:react',

iframe-sandbox-app/package-lock.json

@@ -5,9 +5,9 @@
   "homepage": ".",
   "dependencies": {
     "@fluentui/react": "^8.104.1",
-    "@microsoft/mgt": "^2.9.0",
-    "@microsoft/mgt-element": "^2.9.0",
-    "@microsoft/mgt-react": "^2.9.0",
+    "@microsoft/mgt": "^3.0.1",
+    "@microsoft/mgt-element": "^3.0.1",
+    "@microsoft/mgt-react": "^3.0.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

iframe-sandbox-app/package.json

@@ -39,6 +39,23 @@ const MGTIframe = () => {
     // window.removeEventListener("message", onMessageReceivedFromIframe);
   }, [onMessageReceivedFromIframe]);
 
+  React.useEffect(function setupListener() {
+    function handleResize(x: any) {
+      console.log('theme changed', x.detail)
+      if(x.detail){
+        document.body.style.backgroundColor = "black";
+      } else {
+        document.body.style.backgroundColor = "white";
+      }
+    }
+    window.addEventListener('darkmodechanged', handleResize)
+
+    return function cleanupListener() {
+      console.log('removing listener')
+      window.removeEventListener('darkmodechanged', handleResize)
+    }
+  })
+
   CacheService.config.isEnabled = false;
 
   var getAccessToken = async (scopes: any[]): Promise<string> => {

iframe-sandbox-app/src/mgtiframe/MGTIframe.tsx

@@ -10,8 +10,8 @@
     "@fluentui/react": "^8.109.2",
     "@ionic/react": "^5.8.4",
     "@ionic/react-router": "^5.8.4",
-    "@microsoft/mgt": "^2.10.1",
-    "@microsoft/mgt-react": "^2.10.1",
+    "@microsoft/mgt": "^3.0.1",
+    "@microsoft/mgt-react": "^3.0.1",
     "@microsoft/microsoft-graph-client": "^3.0.5",
     "@minoru/react-dnd-treeview": "^3.4.0",
     "@uifabric/theme-samples": "^7.5.29",

package-lock.json

@@ -5,17 +5,28 @@
  * -------------------------------------------------------------------------------------------
  */
 import { MgtTemplatedComponent } from '@microsoft/mgt-element';
-import { TemplateResult } from 'lit-element';
-import { IDynamicPerson } from '../../../graph/types';
-import '../../sub-components/mgt-spinner/mgt-spinner';
+import { TemplateResult } from 'lit';
+import { IDynamicPerson } from '../graph/types';
+import './sub-components/mgt-spinner/mgt-spinner';
+/**
+ * Defines the interface for a person card section.
+ * This allows us to avoid forced inheritance and allow for more flexibility in the future.
+ */
+export interface CardSection {
+    readonly cardTitle: string;
+    tagName: string;
+    asCompactView(): CardSection;
+    asFullView(): CardSection;
+    renderIcon(): TemplateResult;
+}
 /**
  * A base class for building person card subsections.
  *
  * @export
  * @class BasePersonCardSection
  * @extends {MgtTemplatedComponent}
  */
-export declare abstract class BasePersonCardSection extends MgtTemplatedComponent {
+export declare abstract class BasePersonCardSection extends MgtTemplatedComponent implements CardSection {
     /**
      * Set the person details to render
      *
@@ -32,6 +43,14 @@ export declare abstract class BasePersonCardSection extends MgtTemplatedComponen
      * @memberof BasePersonCardSection
      */
     abstract get displayName(): string;
+    /**
+     * The title for using when rendering the full card.
+     *
+     * @readonly
+     * @abstract
+     * @memberof BasePersonCardSection
+     */
+    abstract get cardTitle(): string;
     /**
      * Determines the appropriate view state: full or compact
      *
@@ -73,7 +92,7 @@ export declare abstract class BasePersonCardSection extends MgtTemplatedComponen
      * @abstract
      * @memberof BasePersonCardSection
      */
-    clearState(): void;
+    protected clearState(): void;
     /**
      * Invoked on each update to perform rendering tasks. This method must return
      * a lit-html TemplateResult. Setting properties inside this method will *not*

package.json

@@ -0,0 +1,17 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+import { CacheItem } from '@microsoft/mgt-element';
+/**
+ * Object to be stored in cache representing a generic query
+ */
+export interface CacheResponse extends CacheItem {
+    /**
+     * json representing a response as string
+     */
+    response?: string;
+}
+//# sourceMappingURL=CacheResponse.d.ts.map

public/@microsoft/mgt-components/components/mgt-person-card/sections/BasePersonCardSection.d.ts renamed to public/@microsoft/mgt-components/components/BasePersonCardSection.d.ts

@@ -1,6 +1,7 @@
+import { CSSResult } from 'lit';
 /**
  * exports lit-element css
  * @export styles
  */
-export declare const styles: import("lit-element").CSSResult[];
+export declare const styles: CSSResult[];
 //# sourceMappingURL=base-person-card-section-css.d.ts.map

public/@microsoft/mgt-components/components/CacheResponse.d.ts

@@ -7,25 +7,42 @@
 import './mgt-agenda/mgt-agenda';
 import './mgt-file/mgt-file';
 import './mgt-file-list/mgt-file-list';
+import './mgt-picker/mgt-picker';
+import './mgt-taxonomy-picker/mgt-taxonomy-picker';
 import './mgt-get/mgt-get';
 import './mgt-login/mgt-login';
 import './mgt-people-picker/mgt-people-picker';
 import './mgt-people/mgt-people';
 import './mgt-person-card/mgt-person-card';
 import './mgt-person/mgt-person';
+import './mgt-person/mgt-person-types';
 import './mgt-tasks/mgt-tasks';
 import './mgt-teams-channel-picker/mgt-teams-channel-picker';
 import './mgt-todo/mgt-todo';
+import './mgt-contact/mgt-contact';
+import './mgt-messages/mgt-messages';
+import './mgt-organization/mgt-organization';
+import './mgt-profile/mgt-profile';
+import './mgt-theme-toggle/mgt-theme-toggle';
 export * from './mgt-agenda/mgt-agenda';
 export * from './mgt-file/mgt-file';
 export * from './mgt-file-list/mgt-file-list';
+export * from './mgt-picker/mgt-picker';
+export * from './mgt-taxonomy-picker/mgt-taxonomy-picker';
 export * from './mgt-get/mgt-get';
 export * from './mgt-login/mgt-login';
 export * from './mgt-people-picker/mgt-people-picker';
 export * from './mgt-people/mgt-people';
 export * from './mgt-person-card/mgt-person-card';
 export * from './mgt-person/mgt-person';
+export * from './mgt-person/mgt-person-types';
 export * from './mgt-tasks/mgt-tasks';
 export * from './mgt-teams-channel-picker/mgt-teams-channel-picker';
 export * from './mgt-todo/mgt-todo';
+export * from './mgt-contact/mgt-contact';
+export * from './mgt-contact/mgt-contact';
+export * from './mgt-messages/mgt-messages';
+export * from './mgt-organization/mgt-organization';
+export * from './mgt-profile/mgt-profile';
+export * from './mgt-theme-toggle/mgt-theme-toggle';
 //# sourceMappingURL=components.d.ts.map