@microsoft/teamsfx-react 3.0.0-alpha.46da7cd00.0 → 3.0.1-alpha.ru6q1vrv0.0

package/build/cjs/useGraph.d.ts

@@ -1,33 +1,33 @@
-import { Data } from "./useData";
-import { TeamsFx, TeamsUserCredential } from "@microsoft/teamsfx";
-import { Client } from "@microsoft/microsoft-graph-client";
-type GraphOption = {
-    scope?: string[];
-    teamsfx?: TeamsFx;
-};
-type GraphOptionWithCredential = {
-    scope?: string[];
-    credential?: TeamsUserCredential;
-};
-/**
- * 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>;
-/**
- * Helper function to call Microsoft Graph API with authentication.
- *
- * @param fetchGraphDataAsync - async function of how to call Graph API and fetch data.
- * @param options - Authentication configuration and OAuth resource scope.
- * @returns data, loading status, error and reload function
- *
- * @beta
- */
-export declare function useGraphWithCredential<T>(fetchGraphDataAsync: (graph: Client, credential: TeamsUserCredential, scope: string[]) => Promise<T>, options?: GraphOptionWithCredential): Data<T>;
-export {};
+import { Data } from "./useData";
+import { TeamsFx, TeamsUserCredential } from "@microsoft/teamsfx";
+import { Client } from "@microsoft/microsoft-graph-client";
+type GraphOption = {
+    scope?: string[];
+    teamsfx?: TeamsFx;
+};
+type GraphOptionWithCredential = {
+    scope?: string[];
+    credential?: TeamsUserCredential;
+};
+/**
+ * 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>;
+/**
+ * Helper function to call Microsoft Graph API with authentication.
+ *
+ * @param fetchGraphDataAsync - async function of how to call Graph API and fetch data.
+ * @param options - Authentication configuration and OAuth resource scope.
+ * @returns data, loading status, error and reload function
+ *
+ * @beta
+ */
+export declare function useGraphWithCredential<T>(fetchGraphDataAsync: (graph: Client, credential: TeamsUserCredential, scope: string[]) => Promise<T>, options?: GraphOptionWithCredential): Data<T>;
+export {};
 //# sourceMappingURL=useGraph.d.ts.map

package/build/cjs/useGraph.js

@@ -1,151 +1,151 @@
-"use strict";
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGraphWithCredential = exports.useGraph = void 0;
-var tslib_1 = require("tslib");
-var useData_1 = require("./useData");
-var teamsfx_1 = require("@microsoft/teamsfx");
-var microsoft_graph_client_1 = require("@microsoft/microsoft-graph-client");
-var 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) {
-    var _this = this;
-    var _a = tslib_1.__assign({ scope: ["User.Read"], teamsfx: new teamsfx_1.TeamsFx() }, options), scope = _a.scope, teamsfx = _a.teamsfx;
-    var _b = (0, react_1.useState)(false), needConsent = _b[0], setNeedConsent = _b[1];
-    var _c = (0, useData_1.useData)(function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-        var err_1, helpLink, graph, graphData, err_2;
-        var _a, _b;
-        return tslib_1.__generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    if (!needConsent) return [3 /*break*/, 4];
-                    _c.label = 1;
-                case 1:
-                    _c.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, teamsfx.login(scope)];
-                case 2:
-                    _c.sent();
-                    setNeedConsent(false);
-                    return [3 /*break*/, 4];
-                case 3:
-                    err_1 = _c.sent();
-                    if (err_1 instanceof teamsfx_1.ErrorWithCode && ((_a = err_1.message) === null || _a === void 0 ? void 0 : _a.includes("CancelledByUser"))) {
-                        helpLink = "https://aka.ms/teamsfx-auth-code-flow";
-                        err_1.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: ".concat(helpLink);
-                    }
-                    throw err_1;
-                case 4:
-                    _c.trys.push([4, 6, , 7]);
-                    graph = (0, teamsfx_1.createMicrosoftGraphClient)(teamsfx, scope);
-                    return [4 /*yield*/, fetchGraphDataAsync(graph, teamsfx, scope)];
-                case 5:
-                    graphData = _c.sent();
-                    return [2 /*return*/, graphData];
-                case 6:
-                    err_2 = _c.sent();
-                    if (err_2 instanceof microsoft_graph_client_1.GraphError && ((_b = err_2.code) === null || _b === void 0 ? void 0 : _b.includes("UiRequiredError"))) {
-                        // Silently fail for user didn't consent error
-                        setNeedConsent(true);
-                    }
-                    else {
-                        throw err_2;
-                    }
-                    return [3 /*break*/, 7];
-                case 7: return [2 /*return*/];
-            }
-        });
-    }); }), data = _c.data, error = _c.error, loading = _c.loading, reload = _c.reload;
-    return { data: data, error: error, loading: loading, reload: reload };
-}
-exports.useGraph = useGraph;
-/**
- * Helper function to call Microsoft Graph API with authentication.
- *
- * @param fetchGraphDataAsync - async function of how to call Graph API and fetch data.
- * @param options - Authentication configuration and OAuth resource scope.
- * @returns data, loading status, error and reload function
- *
- * @beta
- */
-function useGraphWithCredential(fetchGraphDataAsync, options) {
-    var _this = this;
-    var credential;
-    if (!(options === null || options === void 0 ? void 0 : options.credential)) {
-        var authConfig = {
-            clientId: process.env.REACT_APP_CLIENT_ID,
-            initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,
-        };
-        credential = new teamsfx_1.TeamsUserCredential(authConfig);
-    }
-    else {
-        credential = options === null || options === void 0 ? void 0 : options.credential;
-    }
-    var scope;
-    if (!(options === null || options === void 0 ? void 0 : options.scope)) {
-        scope = ["User.Read"];
-    }
-    else {
-        scope = options.scope;
-    }
-    var _a = (0, react_1.useState)(false), needConsent = _a[0], setNeedConsent = _a[1];
-    var _b = (0, useData_1.useData)(function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-        var err_3, helpLink, graph, graphData, err_4;
-        var _a, _b;
-        return tslib_1.__generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    if (!needConsent) return [3 /*break*/, 4];
-                    _c.label = 1;
-                case 1:
-                    _c.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, credential.login(scope)];
-                case 2:
-                    _c.sent();
-                    setNeedConsent(false);
-                    return [3 /*break*/, 4];
-                case 3:
-                    err_3 = _c.sent();
-                    if (err_3 instanceof teamsfx_1.ErrorWithCode && ((_a = err_3.message) === null || _a === void 0 ? void 0 : _a.includes("CancelledByUser"))) {
-                        helpLink = "https://aka.ms/teamsfx-auth-code-flow";
-                        err_3.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: ".concat(helpLink);
-                    }
-                    throw err_3;
-                case 4:
-                    _c.trys.push([4, 6, , 7]);
-                    graph = (0, teamsfx_1.createMicrosoftGraphClientWithCredential)(credential, scope);
-                    return [4 /*yield*/, fetchGraphDataAsync(graph, credential, scope)];
-                case 5:
-                    graphData = _c.sent();
-                    return [2 /*return*/, graphData];
-                case 6:
-                    err_4 = _c.sent();
-                    if (err_4 instanceof microsoft_graph_client_1.GraphError && ((_b = err_4.code) === null || _b === void 0 ? void 0 : _b.includes("UiRequiredError"))) {
-                        // Silently fail for user didn't consent error
-                        setNeedConsent(true);
-                    }
-                    else {
-                        throw err_4;
-                    }
-                    return [3 /*break*/, 7];
-                case 7: return [2 /*return*/];
-            }
-        });
-    }); }), data = _b.data, error = _b.error, loading = _b.loading, reload = _b.reload;
-    return { data: data, error: error, loading: loading, reload: reload };
-}
-exports.useGraphWithCredential = useGraphWithCredential;
+"use strict";
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGraphWithCredential = exports.useGraph = void 0;
+var tslib_1 = require("tslib");
+var useData_1 = require("./useData");
+var teamsfx_1 = require("@microsoft/teamsfx");
+var microsoft_graph_client_1 = require("@microsoft/microsoft-graph-client");
+var 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) {
+    var _this = this;
+    var _a = tslib_1.__assign({ scope: ["User.Read"], teamsfx: new teamsfx_1.TeamsFx() }, options), scope = _a.scope, teamsfx = _a.teamsfx;
+    var _b = (0, react_1.useState)(false), needConsent = _b[0], setNeedConsent = _b[1];
+    var _c = (0, useData_1.useData)(function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+        var err_1, helpLink, graph, graphData, err_2;
+        var _a, _b;
+        return tslib_1.__generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    if (!needConsent) return [3 /*break*/, 4];
+                    _c.label = 1;
+                case 1:
+                    _c.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, teamsfx.login(scope)];
+                case 2:
+                    _c.sent();
+                    setNeedConsent(false);
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_1 = _c.sent();
+                    if (err_1 instanceof teamsfx_1.ErrorWithCode && ((_a = err_1.message) === null || _a === void 0 ? void 0 : _a.includes("CancelledByUser"))) {
+                        helpLink = "https://aka.ms/teamsfx-auth-code-flow";
+                        err_1.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: ".concat(helpLink);
+                    }
+                    throw err_1;
+                case 4:
+                    _c.trys.push([4, 6, , 7]);
+                    graph = (0, teamsfx_1.createMicrosoftGraphClient)(teamsfx, scope);
+                    return [4 /*yield*/, fetchGraphDataAsync(graph, teamsfx, scope)];
+                case 5:
+                    graphData = _c.sent();
+                    return [2 /*return*/, graphData];
+                case 6:
+                    err_2 = _c.sent();
+                    if (err_2 instanceof microsoft_graph_client_1.GraphError && ((_b = err_2.code) === null || _b === void 0 ? void 0 : _b.includes("UiRequiredError"))) {
+                        // Silently fail for user didn't consent error
+                        setNeedConsent(true);
+                    }
+                    else {
+                        throw err_2;
+                    }
+                    return [3 /*break*/, 7];
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); }), data = _c.data, error = _c.error, loading = _c.loading, reload = _c.reload;
+    return { data: data, error: error, loading: loading, reload: reload };
+}
+exports.useGraph = useGraph;
+/**
+ * Helper function to call Microsoft Graph API with authentication.
+ *
+ * @param fetchGraphDataAsync - async function of how to call Graph API and fetch data.
+ * @param options - Authentication configuration and OAuth resource scope.
+ * @returns data, loading status, error and reload function
+ *
+ * @beta
+ */
+function useGraphWithCredential(fetchGraphDataAsync, options) {
+    var _this = this;
+    var credential;
+    if (!(options === null || options === void 0 ? void 0 : options.credential)) {
+        var authConfig = {
+            clientId: process.env.REACT_APP_CLIENT_ID,
+            initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,
+        };
+        credential = new teamsfx_1.TeamsUserCredential(authConfig);
+    }
+    else {
+        credential = options === null || options === void 0 ? void 0 : options.credential;
+    }
+    var scope;
+    if (!(options === null || options === void 0 ? void 0 : options.scope)) {
+        scope = ["User.Read"];
+    }
+    else {
+        scope = options.scope;
+    }
+    var _a = (0, react_1.useState)(false), needConsent = _a[0], setNeedConsent = _a[1];
+    var _b = (0, useData_1.useData)(function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+        var err_3, helpLink, graph, graphData, err_4;
+        var _a, _b;
+        return tslib_1.__generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    if (!needConsent) return [3 /*break*/, 4];
+                    _c.label = 1;
+                case 1:
+                    _c.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, credential.login(scope)];
+                case 2:
+                    _c.sent();
+                    setNeedConsent(false);
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_3 = _c.sent();
+                    if (err_3 instanceof teamsfx_1.ErrorWithCode && ((_a = err_3.message) === null || _a === void 0 ? void 0 : _a.includes("CancelledByUser"))) {
+                        helpLink = "https://aka.ms/teamsfx-auth-code-flow";
+                        err_3.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: ".concat(helpLink);
+                    }
+                    throw err_3;
+                case 4:
+                    _c.trys.push([4, 6, , 7]);
+                    graph = (0, teamsfx_1.createMicrosoftGraphClientWithCredential)(credential, scope);
+                    return [4 /*yield*/, fetchGraphDataAsync(graph, credential, scope)];
+                case 5:
+                    graphData = _c.sent();
+                    return [2 /*return*/, graphData];
+                case 6:
+                    err_4 = _c.sent();
+                    if (err_4 instanceof microsoft_graph_client_1.GraphError && ((_b = err_4.code) === null || _b === void 0 ? void 0 : _b.includes("UiRequiredError"))) {
+                        // Silently fail for user didn't consent error
+                        setNeedConsent(true);
+                    }
+                    else {
+                        throw err_4;
+                    }
+                    return [3 /*break*/, 7];
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); }), data = _b.data, error = _b.error, loading = _b.loading, reload = _b.reload;
+    return { data: data, error: error, loading: loading, reload: reload };
+}
+exports.useGraphWithCredential = useGraphWithCredential;

package/build/cjs/useTeams.d.ts

@@ -1,31 +1,31 @@
-import { app } from "@microsoft/teams-js";
-import { Theme } from "@fluentui/react-components";
-/**
- * Microsoft Teams React hook
- * @param options optional options
- * @returns A tuple with properties and methods
- * properties:
- *  - inTeams: boolean = true if inside Microsoft Teams
- *  - fullscreen: boolean = true if in full screen mode
- *  - theme: Fluent UI Theme
- *  - themeString: string - representation of the theme (default, dark or contrast)
- *  - context - the Microsoft Teams JS SDK context
- * methods:
- *  - setTheme - manually set the theme
- */
-export declare function useTeams(options?: {
-    initialTheme?: string;
-    setThemeHandler?: (theme?: string) => void;
-}): [
-    {
-        inTeams?: boolean;
-        fullScreen?: boolean;
-        theme: Theme;
-        themeString: string;
-        context?: app.Context;
-    },
-    {
-        setTheme: (theme: string | undefined) => void;
-    }
-];
+import { app } from "@microsoft/teams-js";
+import { Theme } from "@fluentui/react-components";
+/**
+ * Microsoft Teams React hook
+ * @param options optional options
+ * @returns A tuple with properties and methods
+ * properties:
+ *  - inTeams: boolean = true if inside Microsoft Teams
+ *  - fullscreen: boolean = true if in full screen mode
+ *  - theme: Fluent UI Theme
+ *  - themeString: string - representation of the theme (default, dark or contrast)
+ *  - context - the Microsoft Teams JS SDK context
+ * methods:
+ *  - setTheme - manually set the theme
+ */
+export declare function useTeams(options?: {
+    initialTheme?: string;
+    setThemeHandler?: (theme?: string) => void;
+}): [
+    {
+        inTeams?: boolean;
+        fullScreen?: boolean;
+        theme: Theme;
+        themeString: string;
+        context?: app.Context;
+    },
+    {
+        setTheme: (theme: string | undefined) => void;
+    }
+];
 //# sourceMappingURL=useTeams.d.ts.map

package/build/cjs/useTeams.js

@@ -1,82 +1,82 @@
-"use strict";
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTeams = void 0;
-var react_1 = require("react");
-var react_dom_1 = require("react-dom");
-var teams_js_1 = require("@microsoft/teams-js");
-var react_components_1 = require("@fluentui/react-components");
-var getTheme = function () {
-    var urlParams = new URLSearchParams(window.location.search);
-    var theme = urlParams.get("theme");
-    return theme == null ? undefined : theme;
-};
-/**
- * Microsoft Teams React hook
- * @param options optional options
- * @returns A tuple with properties and methods
- * properties:
- *  - inTeams: boolean = true if inside Microsoft Teams
- *  - fullscreen: boolean = true if in full screen mode
- *  - theme: Fluent UI Theme
- *  - themeString: string - representation of the theme (default, dark or contrast)
- *  - context - the Microsoft Teams JS SDK context
- * methods:
- *  - setTheme - manually set the theme
- */
-function useTeams(options) {
-    var _a = (0, react_1.useState)(undefined), inTeams = _a[0], setInTeams = _a[1];
-    var _b = (0, react_1.useState)(undefined), fullScreen = _b[0], setFullScreen = _b[1];
-    var _c = (0, react_1.useState)(react_components_1.teamsLightTheme), theme = _c[0], setTheme = _c[1];
-    var _d = (0, react_1.useState)("default"), themeString = _d[0], setThemeString = _d[1];
-    var initialTheme = (0, react_1.useState)(options && options.initialTheme ? options.initialTheme : getTheme())[0];
-    var _e = (0, react_1.useState)(undefined), context = _e[0], setContext = _e[1];
-    var themeChangeHandler = function (theme) {
-        setThemeString(theme || "default");
-        switch (theme) {
-            case "dark":
-                setTheme(react_components_1.teamsDarkTheme);
-                break;
-            case "contrast":
-                setTheme(react_components_1.teamsHighContrastTheme);
-                break;
-            case "default":
-            default:
-                setTheme(react_components_1.teamsLightTheme);
-        }
-    };
-    var overrideThemeHandler = (options === null || options === void 0 ? void 0 : options.setThemeHandler)
-        ? options.setThemeHandler
-        : themeChangeHandler;
-    (0, react_1.useEffect)(function () {
-        // set initial theme based on options or query string
-        overrideThemeHandler(initialTheme);
-        teams_js_1.app
-            .initialize()
-            .then(function () {
-            teams_js_1.app
-                .getContext()
-                .then(function (context) {
-                (0, react_dom_1.unstable_batchedUpdates)(function () {
-                    setInTeams(true);
-                    setContext(context);
-                    setFullScreen(context.page.isFullScreen);
-                });
-                overrideThemeHandler(context.app.theme);
-                teams_js_1.app.registerOnThemeChangeHandler(overrideThemeHandler);
-                teams_js_1.pages.registerFullScreenHandler(function (isFullScreen) {
-                    setFullScreen(isFullScreen);
-                });
-            })
-                .catch(function () {
-                setInTeams(false);
-            });
-        })
-            .catch(function () {
-            setInTeams(false);
-        });
-    }, []);
-    return [{ inTeams: inTeams, fullScreen: fullScreen, theme: theme, context: context, themeString: themeString }, { setTheme: overrideThemeHandler }];
-}
-exports.useTeams = useTeams;
+"use strict";
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTeams = void 0;
+var react_1 = require("react");
+var react_dom_1 = require("react-dom");
+var teams_js_1 = require("@microsoft/teams-js");
+var react_components_1 = require("@fluentui/react-components");
+var getTheme = function () {
+    var urlParams = new URLSearchParams(window.location.search);
+    var theme = urlParams.get("theme");
+    return theme == null ? undefined : theme;
+};
+/**
+ * Microsoft Teams React hook
+ * @param options optional options
+ * @returns A tuple with properties and methods
+ * properties:
+ *  - inTeams: boolean = true if inside Microsoft Teams
+ *  - fullscreen: boolean = true if in full screen mode
+ *  - theme: Fluent UI Theme
+ *  - themeString: string - representation of the theme (default, dark or contrast)
+ *  - context - the Microsoft Teams JS SDK context
+ * methods:
+ *  - setTheme - manually set the theme
+ */
+function useTeams(options) {
+    var _a = (0, react_1.useState)(undefined), inTeams = _a[0], setInTeams = _a[1];
+    var _b = (0, react_1.useState)(undefined), fullScreen = _b[0], setFullScreen = _b[1];
+    var _c = (0, react_1.useState)(react_components_1.teamsLightTheme), theme = _c[0], setTheme = _c[1];
+    var _d = (0, react_1.useState)("default"), themeString = _d[0], setThemeString = _d[1];
+    var initialTheme = (0, react_1.useState)(options && options.initialTheme ? options.initialTheme : getTheme())[0];
+    var _e = (0, react_1.useState)(undefined), context = _e[0], setContext = _e[1];
+    var themeChangeHandler = function (theme) {
+        setThemeString(theme || "default");
+        switch (theme) {
+            case "dark":
+                setTheme(react_components_1.teamsDarkTheme);
+                break;
+            case "contrast":
+                setTheme(react_components_1.teamsHighContrastTheme);
+                break;
+            case "default":
+            default:
+                setTheme(react_components_1.teamsLightTheme);
+        }
+    };
+    var overrideThemeHandler = (options === null || options === void 0 ? void 0 : options.setThemeHandler)
+        ? options.setThemeHandler
+        : themeChangeHandler;
+    (0, react_1.useEffect)(function () {
+        // set initial theme based on options or query string
+        overrideThemeHandler(initialTheme);
+        teams_js_1.app
+            .initialize()
+            .then(function () {
+            teams_js_1.app
+                .getContext()
+                .then(function (context) {
+                (0, react_dom_1.unstable_batchedUpdates)(function () {
+                    setInTeams(true);
+                    setContext(context);
+                    setFullScreen(context.page.isFullScreen);
+                });
+                overrideThemeHandler(context.app.theme);
+                teams_js_1.app.registerOnThemeChangeHandler(overrideThemeHandler);
+                teams_js_1.pages.registerFullScreenHandler(function (isFullScreen) {
+                    setFullScreen(isFullScreen);
+                });
+            })
+                .catch(function () {
+                setInTeams(false);
+            });
+        })
+            .catch(function () {
+            setInTeams(false);
+        });
+    }, []);
+    return [{ inTeams: inTeams, fullScreen: fullScreen, theme: theme, context: context, themeString: themeString }, { setTheme: overrideThemeHandler }];
+}
+exports.useTeams = useTeams;