@microsoft/teamsfx-react 1.0.4-rc.0 → 2.0.0-beta.0

package/build/index.d.ts

@@ -1,4 +1,4 @@
-export { useData } from "./useData";
-export { useTeamsFx, TeamsFxContext } from "./useTeamsFx";
-export { useGraph } from "./useGraph";
+export { useData } from "./useData";
+export { useTeamsFx } from "./useTeamsFx";
+export { useGraph } from "./useGraph";
 //# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/build/index.js

@@ -1,11 +1,11 @@
-"use strict";
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGraph = exports.useTeamsFx = exports.useData = void 0;
-var useData_1 = require("./useData");
-Object.defineProperty(exports, "useData", { enumerable: true, get: function () { return useData_1.useData; } });
-var useTeamsFx_1 = require("./useTeamsFx");
-Object.defineProperty(exports, "useTeamsFx", { enumerable: true, get: function () { return useTeamsFx_1.useTeamsFx; } });
-var useGraph_1 = require("./useGraph");
-Object.defineProperty(exports, "useGraph", { enumerable: true, get: function () { return useGraph_1.useGraph; } });
+"use strict";
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGraph = exports.useTeamsFx = exports.useData = void 0;
+var useData_1 = require("./useData");
+Object.defineProperty(exports, "useData", { enumerable: true, get: function () { return useData_1.useData; } });
+var useTeamsFx_1 = require("./useTeamsFx");
+Object.defineProperty(exports, "useTeamsFx", { enumerable: true, get: function () { return useTeamsFx_1.useTeamsFx; } });
+var useGraph_1 = require("./useGraph");
+Object.defineProperty(exports, "useGraph", { enumerable: true, get: function () { return useGraph_1.useGraph; } });

package/build/useData.d.ts

@@ -1,34 +1,18 @@
-declare type State<T> = {
-    /**
-     * User data.
-     */
-    data?: T;
-    /**
-     * Status of data loading.
-     */
-    loading: boolean;
-    /**
-     * Error information.
-     */
-    error?: unknown;
-};
-export declare type Data<T> = State<T> & {
-    /**
-     * reload function.
-     */
-    reload: () => void;
-};
-/**
- * Helper function to fetch data with status and error.
- *
- * @param fetchDataAsync - async function of how to fetch data
- * @param options - if autoLoad is true, reload data immediately
- * @returns data, loading status, error and reload function
- *
- * @beta
- */
-export declare function useData<T>(fetchDataAsync: () => Promise<T>, options?: {
-    autoLoad: boolean;
-}): Data<T>;
-export {};
+/**
+ * Helper function to fetch data with status and error.
+ *
+ * @param asyncFn - async function of how to fetch data
+ * @param options - if autoLoad is true, reload data immediately
+ * @returns data, loading status, error and reload function
+ *
+ * @beta
+ */
+export declare function useData<T>(asyncFn: () => Promise<T>, options?: {
+    auto: boolean;
+}): {
+    data: T | undefined;
+    loading: boolean;
+    error: any;
+    reload: () => void;
+};
 //# sourceMappingURL=useData.d.ts.map

package/build/useData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useData.d.ts","sourceRoot":"","sources":["../src/useData.ts"],"names":[],"mappings":"AAKA,aAAK,KAAK,CAAC,CAAC,IAAI;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,CAAC;IACT;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAOF,oBAAY,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG;IAC/B;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAeF;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,CAAC,EACvB,cAAc,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,EAChC,OAAO,CAAC,EAAE;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,GAC9B,IAAI,CAAC,CAAC,CAAC,CAeT"}
+{"version":3,"file":"useData.d.ts","sourceRoot":"","sources":["../src/useData.ts"],"names":[],"mappings":"AAsCA;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE;;;;;EAkBhF"}

package/build/useData.js

@@ -1,45 +1,47 @@
-"use strict";
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useData = void 0;
-const react_1 = require("react");
-const createReducer = () => (state, action) => {
-    switch (action.type) {
-        case "loading":
-            return { data: state.data, loading: true };
-        case "result":
-            return { data: action.result, loading: false };
-        case "error":
-            return { loading: false, error: action.error };
-    }
-};
-/**
- * Helper function to fetch data with status and error.
- *
- * @param fetchDataAsync - async function of how to fetch data
- * @param options - if autoLoad is true, reload data immediately
- * @returns data, loading status, error and reload function
- *
- * @beta
- */
-function useData(fetchDataAsync, options) {
-    var _a;
-    const auto = (_a = options === null || options === void 0 ? void 0 : options.autoLoad) !== null && _a !== void 0 ? _a : true;
-    const [{ data, loading, error }, dispatch] = (0, react_1.useReducer)(createReducer(), {
-        loading: auto,
-    });
-    function reload() {
-        if (!loading)
-            dispatch({ type: "loading" });
-        fetchDataAsync()
-            .then((data) => dispatch({ type: "result", result: data }))
-            .catch((error) => dispatch({ type: "error", error }));
-    }
-    (0, react_1.useEffect)(() => {
-        if (auto)
-            reload();
-    }, []);
-    return { data, loading, error, reload };
-}
-exports.useData = useData;
+"use strict";
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useData = void 0;
+const react_1 = require("react");
+const createReducer = () => (state, action) => {
+    switch (action.type) {
+        case "loading":
+            return { data: state.data, loading: true };
+        case "result":
+            return { data: action.result, loading: false };
+        case "error":
+            return { loading: false, error: action.error };
+    }
+};
+/**
+ * Helper function to fetch data with status and error.
+ *
+ * @param asyncFn - async function of how to fetch data
+ * @param options - if autoLoad is true, reload data immediately
+ * @returns data, loading status, error and reload function
+ *
+ * @beta
+ */
+function useData(asyncFn, options) {
+    const { auto } = Object.assign({ auto: true }, options);
+    const [{ data, loading, error }, dispatch] = (0, react_1.useReducer)(createReducer(), {
+        loading: !!auto,
+    });
+    function reload() {
+        if (!loading)
+            dispatch({ type: "loading" });
+        if (typeof asyncFn != "function") {
+            throw new Error("invalid argument to useData, a function is required");
+        }
+        asyncFn()
+            .then((data) => dispatch({ type: "result", result: data }))
+            .catch((error) => dispatch({ type: "error", error }));
+    }
+    (0, react_1.useEffect)(() => {
+        if (auto)
+            reload();
+    }, []);
+    return { data, loading, error, reload };
+}
+exports.useData = useData;

package/build/useGraph.d.ts

@@ -1,19 +1,20 @@
-import { Data } from "./useData";
-import { TeamsFx } from "@microsoft/teamsfx";
-import { Client } from "@microsoft/microsoft-graph-client";
-declare type GraphOption = {
-    scope?: string[];
-    teamsfx?: TeamsFx;
-};
-/**
- * Helper function to call Microsoft Graph API with authentication.
- *
- * @param fetchGraphDataAsync - async function of how to call Graph API and fetch data.
- * @param options - teamsfx instance and OAuth resource scope.
- * @returns data, loading status, error and reload function
- *
- * @beta
- */
-export declare function useGraph<T>(fetchGraphDataAsync: (graph: Client, teamsfx: TeamsFx, scope: string[]) => Promise<T>, options?: GraphOption): Data<T>;
-export {};
+import { TeamsFx } from "@microsoft/teamsfx";
+import { Client } from "@microsoft/microsoft-graph-client";
+/**
+ * Helper function to call Microsoft Graph API with authentication.
+ *
+ * @param asyncFunc - async function of how to call Graph API and fetch data.
+ * @param options - teamsfx instance and OAuth resource scope.
+ * @returns data, loading status, error and reload function
+ *
+ * @beta
+ */
+export declare function useGraph<T>(asyncFunc: (graph: Client, teamsfx: TeamsFx, scope: string[]) => Promise<T>, options?: {
+    scope: string[];
+}): {
+    data: T | undefined;
+    error: any;
+    loading: boolean;
+    reload: () => void;
+};
 //# sourceMappingURL=useGraph.d.ts.map

package/build/useGraph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGraph.d.ts","sourceRoot":"","sources":["../src/useGraph.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAW,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,OAAO,EAA6C,MAAM,oBAAoB,CAAC;AACxF,OAAO,EAAE,MAAM,EAAc,MAAM,mCAAmC,CAAC;AAGvE,aAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EACxB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,EACrF,OAAO,CAAC,EAAE,WAAW,GACpB,IAAI,CAAC,CAAC,CAAC,CAiCT"}
+{"version":3,"file":"useGraph.d.ts","sourceRoot":"","sources":["../src/useGraph.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAA6C,MAAM,oBAAoB,CAAC;AACxF,OAAO,EAAE,MAAM,EAAc,MAAM,mCAAmC,CAAC;AAEvE;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EACxB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,EAC3E,OAAO,CAAC,EAAE;IAAE,KAAK,EAAE,MAAM,EAAE,CAAA;CAAE;;;;;EAgD9B"}

package/build/useGraph.js

@@ -1,57 +1,65 @@
-"use strict";
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGraph = void 0;
-const useData_1 = require("./useData");
-const teamsfx_1 = require("@microsoft/teamsfx");
-const microsoft_graph_client_1 = require("@microsoft/microsoft-graph-client");
-const react_1 = require("react");
-/**
- * Helper function to call Microsoft Graph API with authentication.
- *
- * @param fetchGraphDataAsync - async function of how to call Graph API and fetch data.
- * @param options - teamsfx instance and OAuth resource scope.
- * @returns data, loading status, error and reload function
- *
- * @beta
- */
-function useGraph(fetchGraphDataAsync, options) {
-    const { scope, teamsfx } = Object.assign({ scope: ["User.Read"], teamsfx: new teamsfx_1.TeamsFx() }, options);
-    const [needConsent, setNeedConsent] = (0, react_1.useState)(false);
-    const { data, error, loading, reload } = (0, useData_1.useData)(async () => {
-        var _a, _b;
-        if (needConsent) {
-            try {
-                await teamsfx.login(scope);
-                // Important: tokens are stored in sessionStorage, read more here: https://aka.ms/teamsfx-session-storage-notice
-            }
-            catch (err) {
-                if (err instanceof teamsfx_1.ErrorWithCode && ((_a = err.message) === null || _a === void 0 ? void 0 : _a.includes("CancelledByUser"))) {
-                    const helpLink = "https://aka.ms/teamsfx-auth-code-flow";
-                    err.message +=
-                        '\nIf you see "AADSTS50011: The reply URL specified in the request does not match the reply URLs configured for the application" ' +
-                            "in the popup window, you may be using unmatched version for TeamsFx SDK (version >= 0.5.0) and Teams Toolkit (version < 3.3.0) or " +
-                            `cli (version < 0.11.0). Please refer to the help link for how to fix the issue: ${helpLink}`;
-                }
-                throw err;
-            }
-        }
-        try {
-            const graph = (0, teamsfx_1.createMicrosoftGraphClient)(teamsfx, scope);
-            const graphData = await fetchGraphDataAsync(graph, teamsfx, scope);
-            return graphData;
-        }
-        catch (err) {
-            if (err instanceof microsoft_graph_client_1.GraphError && ((_b = err.code) === null || _b === void 0 ? void 0 : _b.includes("UiRequiredError"))) {
-                // Silently fail for user didn't consent error
-                setNeedConsent(true);
-            }
-            else {
-                throw err;
-            }
-        }
-    });
-    return { data, error, loading, reload };
-}
-exports.useGraph = useGraph;
+"use strict";
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGraph = void 0;
+const useData_1 = require("./useData");
+const teamsfx_1 = require("@microsoft/teamsfx");
+const microsoft_graph_client_1 = require("@microsoft/microsoft-graph-client");
+/**
+ * Helper function to call Microsoft Graph API with authentication.
+ *
+ * @param asyncFunc - async function of how to call Graph API and fetch data.
+ * @param options - teamsfx instance and OAuth resource scope.
+ * @returns data, loading status, error and reload function
+ *
+ * @beta
+ */
+function useGraph(asyncFunc, options) {
+    const { scope } = Object.assign({ scope: ["User.Read"] }, options);
+    const initial = (0, useData_1.useData)(async () => {
+        var _a;
+        try {
+            const teamsfx = new teamsfx_1.TeamsFx();
+            const graph = (0, teamsfx_1.createMicrosoftGraphClient)(teamsfx, scope);
+            return await asyncFunc(graph, teamsfx, scope);
+        }
+        catch (err) {
+            if (err instanceof microsoft_graph_client_1.GraphError && ((_a = err.code) === null || _a === void 0 ? void 0 : _a.includes("UiRequiredError"))) {
+                // Silently fail for user didn't login error
+            }
+            else {
+                throw err;
+            }
+        }
+    });
+    const { data, error, loading, reload } = (0, useData_1.useData)(async () => {
+        var _a;
+        try {
+            const teamsfx = new teamsfx_1.TeamsFx();
+            await teamsfx.login(scope);
+            // Important: tokens are stored in sessionStorage, read more here: https://aka.ms/teamsfx-session-storage-notice
+            const graph = (0, teamsfx_1.createMicrosoftGraphClient)(teamsfx, scope);
+            return await asyncFunc(graph, teamsfx, scope);
+        }
+        catch (err) {
+            if (err instanceof teamsfx_1.ErrorWithCode && ((_a = err.message) === null || _a === void 0 ? void 0 : _a.includes("CancelledByUser"))) {
+                const helpLink = "https://aka.ms/teamsfx-auth-code-flow";
+                err.message +=
+                    '\nIf you see "AADSTS50011: The reply URL specified in the request does not match the reply URLs configured for the application" ' +
+                        "in the popup window, you may be using unmatched version for TeamsFx SDK (version >= 0.5.0) and Teams Toolkit (version < 3.3.0) or " +
+                        `cli (version < 0.11.0). Please refer to the help link for how to fix the issue: ${helpLink}`;
+            }
+            throw err;
+        }
+    }, { auto: false });
+    return data || error || loading
+        ? { data, error, loading, reload }
+        : {
+            data: initial.data,
+            error: initial.error,
+            loading: initial.loading,
+            reload,
+        };
+}
+exports.useGraph = useGraph;

package/build/useTeamsFx.d.ts

@@ -1,42 +1,11 @@
-import { TeamsFx } from "@microsoft/teamsfx";
-import { ThemePrepared } from "@fluentui/react-northstar";
-export declare type TeamsFxContext = {
-    /**
-     * Instance of TeamsFx.
-     */
-    teamsfx?: TeamsFx;
-    /**
-     * Status of data loading.
-     */
-    loading: boolean;
-    /**
-     * Error information.
-     */
-    error: unknown;
-    /**
-     * Indicates that current environment is in Teams
-     */
-    inTeams?: boolean;
-    /**
-     * Teams theme.
-     */
-    theme: ThemePrepared;
-    /**
-     * Teams theme string.
-     */
-    themeString: string;
-    /**
-     * Teams context object.
-     */
-    context?: any;
-};
-/**
- * Initialize TeamsFx SDK with customized configuration.
- *
- * @param teamsfxConfig - custom configuration to override default ones.
- * @returns TeamsFxContext object
- *
- * @beta
- */
-export declare function useTeamsFx(teamsfxConfig?: Record<string, string>): TeamsFxContext;
+export declare function useTeamsFx(): {
+    inTeams?: boolean | undefined;
+    fullScreen?: boolean | undefined;
+    theme: import("@fluentui/styles").ThemePrepared<any>;
+    themeString: string;
+    context?: import("@microsoft/teams-js").app.Context | undefined;
+    error: any;
+    loading: boolean;
+    isInTeams: boolean;
+};
 //# sourceMappingURL=useTeamsFx.d.ts.map

package/build/useTeamsFx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTeamsFx.d.ts","sourceRoot":"","sources":["../src/useTeamsFx.ts"],"names":[],"mappings":"AAGA,OAAO,EAAyC,OAAO,EAAgB,MAAM,oBAAoB,CAAC;AAElG,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAG1D,oBAAY,cAAc,GAAG;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IAEH,OAAO,CAAC,EAAE,GAAG,CAAC;CACf,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,cAAc,CAYjF"}
+{"version":3,"file":"useTeamsFx.d.ts","sourceRoot":"","sources":["../src/useTeamsFx.ts"],"names":[],"mappings":"AAmBA,wBAAgB,UAAU;;;;;;;;;EAezB"}

package/build/useTeamsFx.js

@@ -1,30 +1,35 @@
-"use strict";
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTeamsFx = void 0;
-const teamsfx_1 = require("@microsoft/teamsfx");
-const msteams_react_base_component_1 = require("msteams-react-base-component");
-const useData_1 = require("./useData");
-/**
- * Initialize TeamsFx SDK with customized configuration.
- *
- * @param teamsfxConfig - custom configuration to override default ones.
- * @returns TeamsFxContext object
- *
- * @beta
- */
-function useTeamsFx(teamsfxConfig) {
-    const [result] = (0, msteams_react_base_component_1.useTeams)({});
-    const { data, error, loading } = (0, useData_1.useData)(async () => {
-        if (process.env.NODE_ENV === "development") {
-            (0, teamsfx_1.setLogLevel)(teamsfx_1.LogLevel.Verbose);
-            (0, teamsfx_1.setLogFunction)((level, message) => {
-                console.log(message);
-            });
-        }
-        return new teamsfx_1.TeamsFx(teamsfx_1.IdentityType.User, teamsfxConfig);
-    });
-    return Object.assign({ teamsfx: data, error, loading }, result);
-}
-exports.useTeamsFx = useTeamsFx;
+"use strict";
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTeamsFx = void 0;
+const teamsfx_1 = require("@microsoft/teamsfx");
+const msteams_react_base_component_1 = require("msteams-react-base-component");
+const useData_1 = require("./useData");
+/**
+ * Initialize TeamsFx SDK with customized configuration.
+ *
+ * @param teamsfxConfig - custom configuration to override default ones.
+ * @returns TeamsFxContext object
+ *
+ * @beta
+ */
+// TODO: fix this when the SDK stops hiding global state!
+let initialized = false;
+function useTeamsFx() {
+    const [result] = (0, msteams_react_base_component_1.useTeams)({});
+    const { error, loading } = (0, useData_1.useData)(async () => {
+        if (!initialized) {
+            if (process.env.NODE_ENV === "development") {
+                (0, teamsfx_1.setLogLevel)(teamsfx_1.LogLevel.Verbose);
+                (0, teamsfx_1.setLogFunction)((leve, message) => {
+                    console.log(message);
+                });
+            }
+            initialized = true;
+        }
+    });
+    const isInTeams = true;
+    return Object.assign({ error, loading, isInTeams }, result);
+}
+exports.useTeamsFx = useTeamsFx;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/teamsfx-react",
-  "version": "1.0.4-rc.0",
+  "version": "2.0.0-beta.0",
   "description": "React helper functions for Microsoft TeamsFx",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -19,18 +19,18 @@
     "lint:staged": "lint-staged",
     "lint": "eslint \"src/**/*.ts\" \"test/**/*.ts\"",
     "test": "npm run test:unit",
-    "test:unit": "nyc mocha --no-timeouts --require init.js --require ts-node/register test/**/*.test.ts ",
+    "test:unit": "nyc mocha --no-timeouts --require init.js --require ts-node/register test/**/*.test.ts",
     "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\" \"*.{js,json}\"",
     "format-check": "prettier --list-different \"src/**/*.ts\" \"test/**/*.ts\" \"*.{js,json}\"",
     "check-sensitive": "npx eslint --plugin 'no-secrets' --cache --ignore-pattern 'package.json' --ignore-pattern 'package-lock.json'",
     "precommit": "npm run check-sensitive && lint-staged"
   },
   "devDependencies": {
-    "@fluentui/react-northstar": "^0.60.1",
+    "@fluentui/react-northstar": "^0.62.0",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@microsoft/microsoft-graph-client": "^3.0.1",
-    "@microsoft/teams-js": "^1.9.0",
-    "@microsoft/teamsfx": "^1.1.1-rc.0",
+    "@microsoft/teams-js": "^2.2.0",
+    "@microsoft/teamsfx": "2.0.0-beta.0",
     "@testing-library/react-hooks": "^7.0.2",
     "@types/chai": "^4.3.0",
     "@types/mocha": "^9.1.0",
@@ -47,7 +47,7 @@
     "isomorphic-fetch": "^3.0.0",
     "lint-staged": "^12.3.4",
     "mocha": "^9.2.1",
-    "msteams-react-base-component": "^3.1.1",
+    "msteams-react-base-component": "^4.0.1",
     "nyc": "^15.1.0",
     "prettier": "^2.5.1",
     "react": "^16.9.0",
@@ -57,10 +57,10 @@
     "sinon": "^13.0.1"
   },
   "peerDependencies": {
-    "@fluentui/react-northstar": "^0.60.1",
+    "@fluentui/react-northstar": "^0.62.0",
     "@microsoft/microsoft-graph-client": "^3.0.1",
-    "@microsoft/teamsfx": "^1.0.0",
-    "msteams-react-base-component": "^3.1.1",
+    "@microsoft/teamsfx": "2.0.0-beta.0",
+    "msteams-react-base-component": "^4.0.1",
     "react": "^16.8.6"
   },
   "publishConfig": {
@@ -70,6 +70,5 @@
     "*.{js,jsx,css,ts,tsx}": [
       "npx eslint --cache --fix --quiet"
     ]
-  },
-  "gitHead": "9c0b3bc030a4cbc070b45d4dae186c097bb9b98e"
+  }
 }