@azure/communication-react 1.14.0-beta.2 → 1.14.1-alpha-202403210013

package/dist/dist-esm/react-composites/src/composites/common/Survey.js

@@ -0,0 +1,129 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from 'react';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { useState } from 'react';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { useLocale } from '../localization';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { Text, PrimaryButton, Stack, useTheme, DefaultButton } from '@fluentui/react';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { SurveyContent } from './SurveyContent';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { NoticePage } from '../CallComposite/pages/NoticePage';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { ThankYouForFeedbackPage } from '../CallComposite/pages/ThankYouForFeedbackPage';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { questionTextStyle, surveyContainerStyle } from './styles/Survey.styles';
+/** @private */
+export const Survey = (props) => {
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const { onSubmitSurvey, onSurveySubmittedCustom, onSurveyClosed, iconName, title, moreDetails, disableStartCallButton, isMobile } = props;
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const strings = useLocale().strings.call;
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const [ratings, setRatings] = useState(0);
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const [issuesSelected, setIssuesSelected] = useState();
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const [showSubmitFeedbackButton, setShowSubmitFeedbackButton] = useState(false);
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const [improvementSuggestions, setImprovementSuggestions] = useState({});
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const [showDefaultAfterSubmitScreen, setShowDefaultAfterSubmitScreen] = useState(false);
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const [showDefaultAfterDismissedScreen, setShowDefaultAfterDismissedScreen] = useState(false);
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const [submitButtonDisabled, setSubmitButtonDisabled] = useState(false);
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const theme = useTheme();
+    /* @conditional-compile-remove(end-of-call-survey) */
+    return (React.createElement(React.Fragment, null,
+        showDefaultAfterSubmitScreen && React.createElement(ThankYouForFeedbackPage, { iconName: iconName }),
+        showDefaultAfterDismissedScreen && (React.createElement(NoticePage, { iconName: iconName, title: title, moreDetails: moreDetails, dataUiId: 'left-call-page', disableStartCallButton: disableStartCallButton })),
+        !showDefaultAfterSubmitScreen && !showDefaultAfterDismissedScreen && (React.createElement(Stack, { verticalAlign: "center", className: surveyContainerStyle(!!isMobile) },
+            React.createElement(Text, { className: questionTextStyle(theme) }, strings.surveyTitle),
+            React.createElement(SurveyContent, { setShowSubmitFeedbackButton: (showButton) => {
+                    setShowSubmitFeedbackButton(showButton);
+                }, setRatings: (rating) => {
+                    setRatings(rating);
+                }, setIssuesSelected: (issuesSelected) => {
+                    setIssuesSelected(issuesSelected);
+                }, setImprovementSuggestions: onSurveySubmittedCustom
+                    ? (improvementSuggestions) => {
+                        setImprovementSuggestions(improvementSuggestions);
+                    }
+                    : undefined }),
+            React.createElement(Stack, { horizontal: true, horizontalAlign: "end" },
+                React.createElement(DefaultButton, { style: { marginTop: '1rem', marginRight: '0.5rem' }, onClick: () => {
+                        if (onSurveyClosed) {
+                            onSurveyClosed('skipped');
+                        }
+                        else {
+                            setShowDefaultAfterDismissedScreen(true);
+                        }
+                    } }, strings.surveySkipButtonLabel),
+                showSubmitFeedbackButton && (React.createElement(PrimaryButton, { disabled: submitButtonDisabled, style: { marginTop: '1rem', marginLeft: '0.5rem' }, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                        const surveyResults = { overallRating: { score: ratings } };
+                        if (issuesSelected === null || issuesSelected === void 0 ? void 0 : issuesSelected.overallRating) {
+                            surveyResults.overallRating = { score: ratings, issues: issuesSelected.overallRating.issues };
+                        }
+                        if (issuesSelected === null || issuesSelected === void 0 ? void 0 : issuesSelected.audioRating) {
+                            surveyResults.audioRating = { score: ratings, issues: issuesSelected.audioRating.issues };
+                        }
+                        if (issuesSelected === null || issuesSelected === void 0 ? void 0 : issuesSelected.screenshareRating) {
+                            surveyResults.screenshareRating = {
+                                score: ratings,
+                                issues: issuesSelected.screenshareRating.issues
+                            };
+                        }
+                        if (issuesSelected === null || issuesSelected === void 0 ? void 0 : issuesSelected.videoRating) {
+                            surveyResults.videoRating = { score: ratings, issues: issuesSelected.videoRating.issues };
+                        }
+                        if (onSubmitSurvey) {
+                            // disable submit button while waiting for the survey to submit
+                            setSubmitButtonDisabled(true);
+                            // submitting survey results to calling
+                            onSubmitSurvey(surveyResults)
+                                .then((res) => {
+                                var _a, _b;
+                                // if contoso provided callback to handle their own survey data, send over the submitted survey results
+                                if (onSurveySubmittedCustom) {
+                                    onSurveySubmittedCustom((_a = res === null || res === void 0 ? void 0 : res.callId) !== null && _a !== void 0 ? _a : '', (_b = res === null || res === void 0 ? void 0 : res.id) !== null && _b !== void 0 ? _b : '', surveyResults, improvementSuggestions).then(() => setSubmitButtonDisabled(false));
+                                }
+                                else {
+                                    // if callback is not provided, enable the submit button after survey is submitted
+                                    setSubmitButtonDisabled(false);
+                                }
+                                // redirect to new screen
+                                if (onSurveyClosed) {
+                                    // redirect to new screen according to contoso's callback set up
+                                    onSurveyClosed('sent');
+                                }
+                                else {
+                                    // if call back not provided, redirect to default screen
+                                    setShowDefaultAfterSubmitScreen(true);
+                                }
+                            })
+                                .catch((e) => {
+                                // if there is an error submitting the survey, log the error in the console
+                                console.log('error when submitting survey: ' + e);
+                                // if contoso provided redirect callback, pass contoso the error so they can redirect to a corresponding error screen
+                                if (onSurveyClosed) {
+                                    onSurveyClosed('error', e);
+                                }
+                            });
+                        }
+                    }) }, strings.surveyConfirmButtonLabel)))))));
+    return React.createElement(React.Fragment, null);
+};
+//# sourceMappingURL=Survey.js.map

package/dist/dist-esm/react-composites/src/composites/common/Survey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Survey.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/Survey.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { useState } from 'react';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { CallSurvey, CallSurveyResponse } from '@azure/communication-calling';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { Text, PrimaryButton, Stack, useTheme, DefaultButton } from '@fluentui/react';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { SurveyContent } from './SurveyContent';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { CallSurveyImprovementSuggestions } from '@internal/react-components';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { _pxToRem } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { CallCompositeIcons } from './icons';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { NoticePage } from '../CallComposite/pages/NoticePage';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { ThankYouForFeedbackPage } from '../CallComposite/pages/ThankYouForFeedbackPage';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { questionTextStyle, surveyContainerStyle } from './styles/Survey.styles';\n\n/** @private */\nexport const Survey = (props: {\n  /* @conditional-compile-remove(end-of-call-survey) */\n  iconName?: keyof CallCompositeIcons;\n  /* @conditional-compile-remove(end-of-call-survey) */\n  title: string;\n  /* @conditional-compile-remove(end-of-call-survey) */\n  moreDetails?: string;\n  /* @conditional-compile-remove(end-of-call-survey) */\n  disableStartCallButton?: boolean;\n  /* @conditional-compile-remove(end-of-call-survey) */\n  isMobile?: boolean;\n  /* @conditional-compile-remove(end-of-call-survey) */\n  onSubmitSurvey?: (survey: CallSurvey) => Promise<CallSurveyResponse | undefined>;\n  /* @conditional-compile-remove(end-of-call-survey) */\n  /**\n   * Optional callback to redirect users to custom screens when survey is done, note that default end call screen will be shown if this callback is not provided\n   * This callback can be used to redirect users to different screens depending on survey state, whether it is submitted, skipped or has a problem when submitting the survey\n   */\n  onSurveyClosed?: (surveyState: 'sent' | 'skipped' | 'error', surveyError?: string) => void;\n  /* @conditional-compile-remove(end-of-call-survey) */\n  onSurveySubmittedCustom?: (\n    callId: string,\n    surveyId: string,\n    /**\n     * This is the survey results containing star survey data and API tag survey data.\n     * This part of the result will always be sent to the calling sdk\n     * This callback provides user with the ability to gain access to survey data\n     */\n    submittedSurvey: CallSurvey,\n    /**\n     * This is the survey results containing free form text\n     * This part of the result will not be handled by composites\n     * User will need to collect and handle this information 100% on their own\n     * Free form text survey is not going to show in the UI if onSurveySubmitted is not populated\n     */\n    improvementSuggestions: CallSurveyImprovementSuggestions\n  ) => Promise<void>;\n}): JSX.Element => {\n  /* @conditional-compile-remove(end-of-call-survey) */\n  const {\n    onSubmitSurvey,\n    onSurveySubmittedCustom,\n    onSurveyClosed,\n    iconName,\n    title,\n    moreDetails,\n    disableStartCallButton,\n    isMobile\n  } = props;\n  /* @conditional-compile-remove(end-of-call-survey) */\n  const strings = useLocale().strings.call;\n  /* @conditional-compile-remove(end-of-call-survey) */\n  const [ratings, setRatings] = useState(0);\n  /* @conditional-compile-remove(end-of-call-survey) */\n  const [issuesSelected, setIssuesSelected] = useState<CallSurvey | undefined>();\n  /* @conditional-compile-remove(end-of-call-survey) */\n  const [showSubmitFeedbackButton, setShowSubmitFeedbackButton] = useState(false);\n  /* @conditional-compile-remove(end-of-call-survey) */\n  const [improvementSuggestions, setImprovementSuggestions] = useState<CallSurveyImprovementSuggestions>({});\n\n  /* @conditional-compile-remove(end-of-call-survey) */\n  const [showDefaultAfterSubmitScreen, setShowDefaultAfterSubmitScreen] = useState<boolean>(false);\n\n  /* @conditional-compile-remove(end-of-call-survey) */\n  const [showDefaultAfterDismissedScreen, setShowDefaultAfterDismissedScreen] = useState<boolean>(false);\n\n  /* @conditional-compile-remove(end-of-call-survey) */\n  const [submitButtonDisabled, setSubmitButtonDisabled] = useState<boolean>(false);\n\n  /* @conditional-compile-remove(end-of-call-survey) */\n  const theme = useTheme();\n\n  /* @conditional-compile-remove(end-of-call-survey) */\n  return (\n    <>\n      {showDefaultAfterSubmitScreen && <ThankYouForFeedbackPage iconName={iconName} />}\n      {showDefaultAfterDismissedScreen && (\n        <NoticePage\n          iconName={iconName}\n          title={title}\n          moreDetails={moreDetails}\n          dataUiId={'left-call-page'}\n          disableStartCallButton={disableStartCallButton}\n        />\n      )}\n      {!showDefaultAfterSubmitScreen && !showDefaultAfterDismissedScreen && (\n        <Stack verticalAlign=\"center\" className={surveyContainerStyle(!!isMobile)}>\n          <Text className={questionTextStyle(theme)}>{strings.surveyTitle}</Text>\n          <SurveyContent\n            setShowSubmitFeedbackButton={(showButton: boolean) => {\n              setShowSubmitFeedbackButton(showButton);\n            }}\n            setRatings={(rating: number) => {\n              setRatings(rating);\n            }}\n            setIssuesSelected={(issuesSelected: CallSurvey) => {\n              setIssuesSelected(issuesSelected);\n            }}\n            setImprovementSuggestions={\n              onSurveySubmittedCustom\n                ? (improvementSuggestions: CallSurveyImprovementSuggestions) => {\n                    setImprovementSuggestions(improvementSuggestions);\n                  }\n                : undefined\n            }\n          />\n          <Stack horizontal horizontalAlign=\"end\">\n            <DefaultButton\n              style={{ marginTop: '1rem', marginRight: '0.5rem' }}\n              onClick={() => {\n                if (onSurveyClosed) {\n                  onSurveyClosed('skipped');\n                } else {\n                  setShowDefaultAfterDismissedScreen(true);\n                }\n              }}\n            >\n              {strings.surveySkipButtonLabel}\n            </DefaultButton>\n\n            {showSubmitFeedbackButton && (\n              <PrimaryButton\n                disabled={submitButtonDisabled}\n                style={{ marginTop: '1rem', marginLeft: '0.5rem' }}\n                onClick={async () => {\n                  const surveyResults: CallSurvey = { overallRating: { score: ratings } };\n                  if (issuesSelected?.overallRating) {\n                    surveyResults.overallRating = { score: ratings, issues: issuesSelected.overallRating.issues };\n                  }\n                  if (issuesSelected?.audioRating) {\n                    surveyResults.audioRating = { score: ratings, issues: issuesSelected.audioRating.issues };\n                  }\n                  if (issuesSelected?.screenshareRating) {\n                    surveyResults.screenshareRating = {\n                      score: ratings,\n                      issues: issuesSelected.screenshareRating.issues\n                    };\n                  }\n                  if (issuesSelected?.videoRating) {\n                    surveyResults.videoRating = { score: ratings, issues: issuesSelected.videoRating.issues };\n                  }\n                  if (onSubmitSurvey) {\n                    // disable submit button while waiting for the survey to submit\n                    setSubmitButtonDisabled(true);\n                    // submitting survey results to calling\n                    onSubmitSurvey(surveyResults)\n                      .then((res) => {\n                        // if contoso provided callback to handle their own survey data, send over the submitted survey results\n                        if (onSurveySubmittedCustom) {\n                          onSurveySubmittedCustom(\n                            res?.callId ?? '',\n                            res?.id ?? '',\n                            surveyResults,\n                            improvementSuggestions\n                          ).then(() => setSubmitButtonDisabled(false));\n                        } else {\n                          // if callback is not provided, enable the submit button after survey is submitted\n                          setSubmitButtonDisabled(false);\n                        }\n\n                        // redirect to new screen\n                        if (onSurveyClosed) {\n                          // redirect to new screen according to contoso's callback set up\n                          onSurveyClosed('sent');\n                        } else {\n                          // if call back not provided, redirect to default screen\n                          setShowDefaultAfterSubmitScreen(true);\n                        }\n                      })\n                      .catch((e) => {\n                        // if there is an error submitting the survey, log the error in the console\n                        console.log('error when submitting survey: ' + e);\n                        // if contoso provided redirect callback, pass contoso the error so they can redirect to a corresponding error screen\n                        if (onSurveyClosed) {\n                          onSurveyClosed('error', e);\n                        }\n                      });\n                  }\n                }}\n              >\n                {strings.surveyConfirmButtonLabel}\n              </PrimaryButton>\n            )}\n          </Stack>\n        </Stack>\n      )}\n    </>\n  );\n  return <></>;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/SurveyContent.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { CallSurveyImprovementSuggestions } from "../../../../react-components/src";
+import { CallSurvey } from '@azure/communication-calling';
+/**
+ * @private
+ */
+export declare const SurveyContent: (props: {
+    setShowSubmitFeedbackButton: (showButton: boolean) => void;
+    setRatings: (rating: number) => void;
+    setIssuesSelected: (issuesSelected: CallSurvey) => void;
+    setImprovementSuggestions?: ((improvementSuggestions: CallSurveyImprovementSuggestions) => void) | undefined;
+}) => JSX.Element;
+//# sourceMappingURL=SurveyContent.d.ts.map

package/dist/dist-esm/react-composites/src/composites/common/SurveyContent.js

@@ -0,0 +1,44 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { StarSurvey } from './StarSurvey';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { TagsSurvey } from './TagsSurvey';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { useState } from 'react';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { Stack } from '@fluentui/react';
+/**
+ * @private
+ */
+export const SurveyContent = (
+/* @conditional-compile-remove(end-of-call-survey) */ props) => {
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const [showTagsSurvey, setShowTagsSurvey] = useState(false);
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const onStarRatingSelected = (ratings) => {
+        if (ratings < 5) {
+            setShowTagsSurvey(true);
+            props.setShowSubmitFeedbackButton(true);
+        }
+        else {
+            props.setShowSubmitFeedbackButton(true);
+        }
+        props.setRatings(ratings);
+    };
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const onIssuesSelected = (selectedTags, improvementSuggestions) => {
+        props.setIssuesSelected(selectedTags);
+        props.setShowSubmitFeedbackButton(true);
+        if (improvementSuggestions && props.setImprovementSuggestions) {
+            props.setImprovementSuggestions(improvementSuggestions);
+        }
+    };
+    /* @conditional-compile-remove(end-of-call-survey) */
+    return (React.createElement(Stack, { "data-ui-id": "call-composite-survey" },
+        React.createElement(StarSurvey, { onStarRatingSelected: onStarRatingSelected }),
+        showTagsSurvey && (React.createElement(TagsSurvey, { onConfirm: onIssuesSelected, showFreeFormTextField: !(props.setImprovementSuggestions === undefined) }))));
+    return React.createElement(React.Fragment, null);
+};
+//# sourceMappingURL=SurveyContent.js.map

package/dist/dist-esm/react-composites/src/composites/common/SurveyContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SurveyContent.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SurveyContent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,qDAAqD;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,qDAAqD;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,qDAAqD;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAWjC,qDAAqD;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;AAC3B,qDAAqD,CAAC,KASrD,EACY,EAAE;IACf,qDAAqD;IACrD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,qDAAqD;IACrD,MAAM,oBAAoB,GAAG,CAAC,OAAe,EAAQ,EAAE;QACrD,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;YAChB,iBAAiB,CAAC,IAAI,CAAC,CAAC;YACxB,KAAK,CAAC,2BAA2B,CAAC,IAAI,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,2BAA2B,CAAC,IAAI,CAAC,CAAC;QAC1C,CAAC;QACD,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC,CAAC;IACF,qDAAqD;IACrD,MAAM,gBAAgB,GAAG,CACvB,YAAwB,EACxB,sBAAyD,EACnD,EAAE;QACR,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC;QACtC,KAAK,CAAC,2BAA2B,CAAC,IAAI,CAAC,CAAC;QACxC,IAAI,sBAAsB,IAAI,KAAK,CAAC,yBAAyB,EAAE,CAAC;YAC9D,KAAK,CAAC,yBAAyB,CAAC,sBAAsB,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC,CAAC;IACF,qDAAqD;IACrD,OAAO,CACL,oBAAC,KAAK,kBAAY,uBAAuB;QACvC,oBAAC,UAAU,IAAC,oBAAoB,EAAE,oBAAoB,GAAI;QAEzD,cAAc,IAAI,CACjB,oBAAC,UAAU,IACT,SAAS,EAAE,gBAAgB,EAC3B,qBAAqB,EAAE,CAAC,CAAC,KAAK,CAAC,yBAAyB,KAAK,SAAS,CAAC,GACvE,CACH,CACK,CACT,CAAC;IAEF,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { StarSurvey } from './StarSurvey';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { TagsSurvey } from './TagsSurvey';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { useState } from 'react';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport {\n  _AudioIssue,\n  _OverallIssue,\n  _ScreenshareIssue,\n  _VideoIssue,\n  CallSurveyImprovementSuggestions\n} from '@internal/react-components';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { CallSurvey } from '@azure/communication-calling';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { Stack } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const SurveyContent = (\n  /* @conditional-compile-remove(end-of-call-survey) */ props: {\n    /* @conditional-compile-remove(end-of-call-survey) */\n    setShowSubmitFeedbackButton: (showButton: boolean) => void;\n    /* @conditional-compile-remove(end-of-call-survey) */\n    setRatings: (rating: number) => void;\n    /* @conditional-compile-remove(end-of-call-survey) */\n    setIssuesSelected: (issuesSelected: CallSurvey) => void;\n    /* @conditional-compile-remove(end-of-call-survey) */\n    setImprovementSuggestions?: (improvementSuggestions: CallSurveyImprovementSuggestions) => void;\n  }\n): JSX.Element => {\n  /* @conditional-compile-remove(end-of-call-survey) */\n  const [showTagsSurvey, setShowTagsSurvey] = useState(false);\n  /* @conditional-compile-remove(end-of-call-survey) */\n  const onStarRatingSelected = (ratings: number): void => {\n    if (ratings < 5) {\n      setShowTagsSurvey(true);\n      props.setShowSubmitFeedbackButton(true);\n    } else {\n      props.setShowSubmitFeedbackButton(true);\n    }\n    props.setRatings(ratings);\n  };\n  /* @conditional-compile-remove(end-of-call-survey) */\n  const onIssuesSelected = (\n    selectedTags: CallSurvey,\n    improvementSuggestions?: CallSurveyImprovementSuggestions\n  ): void => {\n    props.setIssuesSelected(selectedTags);\n    props.setShowSubmitFeedbackButton(true);\n    if (improvementSuggestions && props.setImprovementSuggestions) {\n      props.setImprovementSuggestions(improvementSuggestions);\n    }\n  };\n  /* @conditional-compile-remove(end-of-call-survey) */\n  return (\n    <Stack data-ui-id=\"call-composite-survey\">\n      <StarSurvey onStarRatingSelected={onStarRatingSelected} />\n\n      {showTagsSurvey && (\n        <TagsSurvey\n          onConfirm={onIssuesSelected}\n          showFreeFormTextField={!(props.setImprovementSuggestions === undefined)}\n        />\n      )}\n    </Stack>\n  );\n\n  return <></>;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/TabHeader.d.ts

@@ -14,6 +14,7 @@ type PeopleAndChatHeaderProps = {
     activeTab: TabHeaderTab;
     disableChatButton?: boolean;
     disablePeopleButton?: boolean;
+    onHeaderMenuClick?: () => void;
 };
 /**
  * Legacy header to be removed when we make a breaking change.

package/dist/dist-esm/react-composites/src/composites/common/TabHeader.js

@@ -24,19 +24,25 @@ export const PeopleAndChatHeader = (props) => {
                 fontSize: theme.fonts.medium.fontSize,
                 fontWeight: theme.fonts.medium.fontWeight
             }
-        }, haveMultipleTabs ? {
-            rootChecked: {
-                borderBottom: `0.125rem solid ${theme.palette.themePrimary}`
+        }, haveMultipleTabs
+            ? {
+                rootChecked: {
+                    borderBottom: `0.125rem solid ${theme.palette.themePrimary}`
+                }
             }
-        } : {});
+            : {});
     }, [theme, haveMultipleTabs]);
-    return React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
+    return (React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
         React.createElement(DefaultButton, { ariaLabel: strings.returnToCallButtonAriaLabel, ariaDescription: strings.returnToCallButtonAriaDescription, onClick: onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }), autoFocus: true }),
         React.createElement(Stack.Item, { grow: true, role: "tablist" },
             React.createElement(FocusZone, { direction: FocusZoneDirection.horizontal, className: mergeStyles(availableSpaceStyles.root) },
                 React.createElement(Stack, { horizontal: true, styles: availableSpaceStyles },
-                    React.createElement(Stack.Item, { grow: true }, onChatButtonClicked && React.createElement(DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', "aria-selected": activeTab === 'chat', role: 'tab', disabled: props.disableChatButton }, strings.chatButtonLabel)),
-                    React.createElement(Stack.Item, { grow: true }, onPeopleButtonClicked && React.createElement(DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', "aria-selected": activeTab === 'people', role: 'tab', disabled: props.disablePeopleButton }, strings.peopleButtonLabel))))),
-        React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) }));
+                    React.createElement(Stack.Item, { grow: true }, onChatButtonClicked && (React.createElement(DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', "aria-selected": activeTab === 'chat', role: 'tab', disabled: props.disableChatButton }, strings.chatButtonLabel))),
+                    React.createElement(Stack.Item, { grow: true }, onPeopleButtonClicked && (React.createElement(DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', "aria-selected": activeTab === 'people', role: 'tab', disabled: props.disablePeopleButton }, strings.peopleButtonLabel)))))),
+        props.onHeaderMenuClick ? (React.createElement(DefaultButton, { ariaLabel: strings.peoplePaneMoreButtonAriaLabel, styles: concatStyleSets(mobilePaneBackButtonStyles, {
+                icon: { display: 'flex', alignItems: 'center' }
+            }), iconProps: { iconName: 'PeoplePaneMoreButton' }, onClick: props.onHeaderMenuClick })) : (
+        /* Hidden icon to take the same space as the actual back button on the left. */
+        React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) }))));
 };
 //# sourceMappingURL=TabHeader.js.map

package/dist/dist-esm/react-composites/src/composites/common/TabHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabHeader.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/TabHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, DefaultButton, FocusZone, FocusZoneDirection, mergeStyles, Stack } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { CallWithChatCompositeIcon } from '../common/icons';\nimport { availableSpaceStyles, mobilePaneBackButtonStyles, mobilePaneButtonStyles, mobilePaneControlBarStyle, mobilePaneHiddenIconStyles } from './styles/Pane.styles';\nimport { useLocale } from '../localization';\n\n/** @private */\nexport interface MobileChatSidePaneTabHeaderProps {\n  onClick: () => void;\n  disabled: boolean;\n}\n\n/**\n * Props for {@link TabHeader} component\n */\ntype PeopleAndChatHeaderProps = {\n  onClose: () => void;\n  // If set, show a button to open chat tab.\n  onChatButtonClicked?: () => void;\n  // If set, show a button to open people tab.\n  onPeopleButtonClicked?: () => void;\n  activeTab: TabHeaderTab;\n  disableChatButton?: boolean;\n  disablePeopleButton?: boolean;\n};\n\n/**\n * Legacy header to be removed when we make a breaking change.\n * @private\n */\nexport const PeopleAndChatHeader = (props: PeopleAndChatHeaderProps): JSX.Element => {\n  const {\n    onClose,\n    onChatButtonClicked,\n    onPeopleButtonClicked,\n    activeTab\n  } = props;\n  const theme = useTheme();\n  const strings = useLocale().strings.call;\n  const haveMultipleTabs = onChatButtonClicked && onPeopleButtonClicked;\n  const mobilePaneButtonStylesThemed = useMemo(() => {\n    return concatStyleSets(mobilePaneButtonStyles, {\n      root: {\n        width: '100%'\n      },\n      label: {\n        fontSize: theme.fonts.medium.fontSize,\n        fontWeight: theme.fonts.medium.fontWeight\n      }\n    }, haveMultipleTabs ? {\n      rootChecked: {\n        borderBottom: `0.125rem solid ${theme.palette.themePrimary}`\n      }\n    } : {});\n  }, [theme, haveMultipleTabs]);\n  return <Stack horizontal grow styles={mobilePaneControlBarStyle}>\n      <DefaultButton ariaLabel={strings.returnToCallButtonAriaLabel} ariaDescription={strings.returnToCallButtonAriaDescription} onClick={onClose} styles={mobilePaneBackButtonStyles} onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />} autoFocus></DefaultButton>\n      <Stack.Item grow role=\"tablist\">\n        <FocusZone direction={FocusZoneDirection.horizontal} className={mergeStyles(availableSpaceStyles.root)}>\n          <Stack horizontal styles={availableSpaceStyles}>\n            <Stack.Item grow>\n              {onChatButtonClicked && <DefaultButton onClick={onChatButtonClicked} styles={mobilePaneButtonStylesThemed} checked={activeTab === 'chat'} aria-selected={activeTab === 'chat'} role={'tab'} disabled={props.disableChatButton}>\n                  {strings.chatButtonLabel}\n                </DefaultButton>}\n            </Stack.Item>\n            <Stack.Item grow>\n              {onPeopleButtonClicked && <DefaultButton onClick={onPeopleButtonClicked} styles={mobilePaneButtonStylesThemed} checked={activeTab === 'people'} aria-selected={activeTab === 'people'} role={'tab'} disabled={props.disablePeopleButton}>\n                  {strings.peopleButtonLabel}\n                </DefaultButton>}\n            </Stack.Item>\n          </Stack>\n        </FocusZone>\n      </Stack.Item>\n      {/* Hidden icon to take the same space as the actual back button on the left. */}\n      <DefaultButton styles={mobilePaneHiddenIconStyles} onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}></DefaultButton>\n    </Stack>;\n};\n\n/**\n * Type used to define which tab is active in {@link TabHeader}\n */\nexport type TabHeaderTab = 'chat' | 'people';"]}
+{"version":3,"file":"TabHeader.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/TabHeader.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,SAAS,EAAE,kBAAkB,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACpH,OAAO,EAAE,QAAQ,EAAE,yCAAmC;AACtD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EACL,oBAAoB,EACpB,0BAA0B,EAC1B,sBAAsB,EACtB,yBAAyB,EACzB,0BAA0B,EAC3B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAuB5C;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAe,EAAE;IAClF,MAAM,EAAE,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACjF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACzC,MAAM,gBAAgB,GAAG,mBAAmB,IAAI,qBAAqB,CAAC;IACtE,MAAM,4BAA4B,GAAG,OAAO,CAAC,GAAG,EAAE;QAChD,OAAO,eAAe,CACpB,sBAAsB,EACtB;YACE,IAAI,EAAE;gBACJ,KAAK,EAAE,MAAM;aACd;YACD,KAAK,EAAE;gBACL,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;gBACrC,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU;aAC1C;SACF,EACD,gBAAgB;YACd,CAAC,CAAC;gBACE,WAAW,EAAE;oBACX,YAAY,EAAE,kBAAkB,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;iBAC7D;aACF;YACH,CAAC,CAAC,EAAE,CACP,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE9B,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,IAAI,QAAC,MAAM,EAAE,yBAAyB;QACtD,oBAAC,aAAa,IACZ,SAAS,EAAE,OAAO,CAAC,2BAA2B,EAC9C,eAAe,EAAE,OAAO,CAAC,iCAAiC,EAC1D,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,0BAA0B,EAClC,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,yBAAyB,IAAC,QAAQ,EAAC,aAAa,GAAG,EACxE,SAAS,SACM;QACjB,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,QAAC,IAAI,EAAC,SAAS;YAC7B,oBAAC,SAAS,IAAC,SAAS,EAAE,kBAAkB,CAAC,UAAU,EAAE,SAAS,EAAE,WAAW,CAAC,oBAAoB,CAAC,IAAI,CAAC;gBACpG,oBAAC,KAAK,IAAC,UAAU,QAAC,MAAM,EAAE,oBAAoB;oBAC5C,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,UACb,mBAAmB,IAAI,CACtB,oBAAC,aAAa,IACZ,OAAO,EAAE,mBAAmB,EAC5B,MAAM,EAAE,4BAA4B,EACpC,OAAO,EAAE,SAAS,KAAK,MAAM,mBACd,SAAS,KAAK,MAAM,EACnC,IAAI,EAAE,KAAK,EACX,QAAQ,EAAE,KAAK,CAAC,iBAAiB,IAEhC,OAAO,CAAC,eAAe,CACV,CACjB,CACU;oBACb,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,UACb,qBAAqB,IAAI,CACxB,oBAAC,aAAa,IACZ,OAAO,EAAE,qBAAqB,EAC9B,MAAM,EAAE,4BAA4B,EACpC,OAAO,EAAE,SAAS,KAAK,QAAQ,mBAChB,SAAS,KAAK,QAAQ,EACrC,IAAI,EAAE,KAAK,EACX,QAAQ,EAAE,KAAK,CAAC,mBAAmB,IAElC,OAAO,CAAC,iBAAiB,CACZ,CACjB,CACU,CACP,CACE,CACD;QACZ,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,CACzB,oBAAC,aAAa,IACZ,SAAS,EAAE,OAAO,CAAC,6BAA6B,EAChD,MAAM,EAAE,eAAe,CAAC,0BAA0B,EAAE;gBAClD,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE;aAChD,CAAC,EACF,SAAS,EAAE,EAAE,QAAQ,EAAE,sBAAsB,EAAE,EAC/C,OAAO,EAAE,KAAK,CAAC,iBAAiB,GAChC,CACH,CAAC,CAAC,CAAC;QACF,+EAA+E;QAC/E,oBAAC,aAAa,IACZ,MAAM,EAAE,0BAA0B,EAClC,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,yBAAyB,IAAC,QAAQ,EAAC,aAAa,GAAG,GACzD,CAClB,CACK,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, DefaultButton, FocusZone, FocusZoneDirection, mergeStyles, Stack } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { CallWithChatCompositeIcon } from '../common/icons';\nimport {\n  availableSpaceStyles,\n  mobilePaneBackButtonStyles,\n  mobilePaneButtonStyles,\n  mobilePaneControlBarStyle,\n  mobilePaneHiddenIconStyles\n} from './styles/Pane.styles';\nimport { useLocale } from '../localization';\n\n/** @private */\nexport interface MobileChatSidePaneTabHeaderProps {\n  onClick: () => void;\n  disabled: boolean;\n}\n\n/**\n * Props for {@link TabHeader} component\n */\ntype PeopleAndChatHeaderProps = {\n  onClose: () => void;\n  // If set, show a button to open chat tab.\n  onChatButtonClicked?: () => void;\n  // If set, show a button to open people tab.\n  onPeopleButtonClicked?: () => void;\n  activeTab: TabHeaderTab;\n  disableChatButton?: boolean;\n  disablePeopleButton?: boolean;\n  onHeaderMenuClick?: () => void;\n};\n\n/**\n * Legacy header to be removed when we make a breaking change.\n * @private\n */\nexport const PeopleAndChatHeader = (props: PeopleAndChatHeaderProps): JSX.Element => {\n  const { onClose, onChatButtonClicked, onPeopleButtonClicked, activeTab } = props;\n  const theme = useTheme();\n  const strings = useLocale().strings.call;\n  const haveMultipleTabs = onChatButtonClicked && onPeopleButtonClicked;\n  const mobilePaneButtonStylesThemed = useMemo(() => {\n    return concatStyleSets(\n      mobilePaneButtonStyles,\n      {\n        root: {\n          width: '100%'\n        },\n        label: {\n          fontSize: theme.fonts.medium.fontSize,\n          fontWeight: theme.fonts.medium.fontWeight\n        }\n      },\n      haveMultipleTabs\n        ? {\n            rootChecked: {\n              borderBottom: `0.125rem solid ${theme.palette.themePrimary}`\n            }\n          }\n        : {}\n    );\n  }, [theme, haveMultipleTabs]);\n\n  return (\n    <Stack horizontal grow styles={mobilePaneControlBarStyle}>\n      <DefaultButton\n        ariaLabel={strings.returnToCallButtonAriaLabel}\n        ariaDescription={strings.returnToCallButtonAriaDescription}\n        onClick={onClose}\n        styles={mobilePaneBackButtonStyles}\n        onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n        autoFocus\n      ></DefaultButton>\n      <Stack.Item grow role=\"tablist\">\n        <FocusZone direction={FocusZoneDirection.horizontal} className={mergeStyles(availableSpaceStyles.root)}>\n          <Stack horizontal styles={availableSpaceStyles}>\n            <Stack.Item grow>\n              {onChatButtonClicked && (\n                <DefaultButton\n                  onClick={onChatButtonClicked}\n                  styles={mobilePaneButtonStylesThemed}\n                  checked={activeTab === 'chat'}\n                  aria-selected={activeTab === 'chat'}\n                  role={'tab'}\n                  disabled={props.disableChatButton}\n                >\n                  {strings.chatButtonLabel}\n                </DefaultButton>\n              )}\n            </Stack.Item>\n            <Stack.Item grow>\n              {onPeopleButtonClicked && (\n                <DefaultButton\n                  onClick={onPeopleButtonClicked}\n                  styles={mobilePaneButtonStylesThemed}\n                  checked={activeTab === 'people'}\n                  aria-selected={activeTab === 'people'}\n                  role={'tab'}\n                  disabled={props.disablePeopleButton}\n                >\n                  {strings.peopleButtonLabel}\n                </DefaultButton>\n              )}\n            </Stack.Item>\n          </Stack>\n        </FocusZone>\n      </Stack.Item>\n      {props.onHeaderMenuClick ? (\n        <DefaultButton\n          ariaLabel={strings.peoplePaneMoreButtonAriaLabel}\n          styles={concatStyleSets(mobilePaneBackButtonStyles, {\n            icon: { display: 'flex', alignItems: 'center' }\n          })}\n          iconProps={{ iconName: 'PeoplePaneMoreButton' }}\n          onClick={props.onHeaderMenuClick}\n        />\n      ) : (\n        /* Hidden icon to take the same space as the actual back button on the left. */\n        <DefaultButton\n          styles={mobilePaneHiddenIconStyles}\n          onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n        ></DefaultButton>\n      )}\n    </Stack>\n  );\n};\n\n/**\n * Type used to define which tab is active in {@link TabHeader}\n */\nexport type TabHeaderTab = 'chat' | 'people';\n"]}

package/dist/dist-esm/react-composites/src/composites/common/TagsSurvey.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { _CallSurvey, CallSurveyImprovementSuggestions } from "../../../../react-components/src";
+/** @private */
+export declare const TagsSurvey: (props: {
+    onConfirm?: ((survey: _CallSurvey, improvementSuggestions?: CallSurveyImprovementSuggestions) => void) | undefined;
+    showFreeFormTextField?: boolean | undefined;
+}) => JSX.Element;
+//# sourceMappingURL=TagsSurvey.d.ts.map

package/dist/dist-esm/react-composites/src/composites/common/TagsSurvey.js

@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+/* @conditional-compile-remove(end-of-call-survey) */
+import { _TagsSurvey } from "../../../../react-components/src";
+/* @conditional-compile-remove(end-of-call-survey) */
+import { useLocale } from '../localization';
+/** @private */
+export const TagsSurvey = (
+/* @conditional-compile-remove(end-of-call-survey) */ props) => {
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const strings = useLocale().strings.call;
+    /* @conditional-compile-remove(end-of-call-survey) */
+    const tagsSurveyStrings = {
+        tagsSurveyQuestion: strings.tagsSurveyQuestion,
+        tagsSurveyHelperText: strings.tagsSurveyHelperText,
+        tagsSurveyTextFieldDefaultText: strings.tagsSurveyTextFieldDefaultText
+    };
+    /* @conditional-compile-remove(end-of-call-survey) */
+    return (React.createElement(_TagsSurvey, { callIssuesToTag: strings.surveyIssues, categoryHeadings: strings.SurveyIssuesHeadingStrings, onConfirm: props.onConfirm, strings: tagsSurveyStrings, showFreeFormTextField: props.showFreeFormTextField }));
+    return React.createElement(React.Fragment, null);
+};
+//# sourceMappingURL=TagsSurvey.js.map

package/dist/dist-esm/react-composites/src/composites/common/TagsSurvey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsSurvey.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/TagsSurvey.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,qDAAqD;AACrD,OAAO,EACL,WAAW,EAQZ,yCAAmC;AAGpC,qDAAqD;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,eAAe;AACf,MAAM,CAAC,MAAM,UAAU,GAAG;AACxB,qDAAqD,CAAC,KAKrD,EACY,EAAE;IACf,qDAAqD;IACrD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACzC,qDAAqD;IACrD,MAAM,iBAAiB,GAAuB;QAC5C,kBAAkB,EAAE,OAAO,CAAC,kBAAkB;QAC9C,oBAAoB,EAAE,OAAO,CAAC,oBAAoB;QAClD,8BAA8B,EAAE,OAAO,CAAC,8BAA8B;KACvE,CAAC;IAEF,qDAAqD;IACrD,OAAO,CACL,oBAAC,WAAW,IACV,eAAe,EAAE,OAAO,CAAC,YAAY,EACrC,gBAAgB,EAAE,OAAO,CAAC,0BAA0B,EACpD,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,OAAO,EAAE,iBAAiB,EAC1B,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,GAClD,CACH,CAAC;IAEF,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport {\n  _TagsSurvey,\n  _TagsSurveyStrings,\n  _AudioIssue,\n  _OverallIssue,\n  _ScreenshareIssue,\n  _VideoIssue,\n  _CallSurvey,\n  CallSurveyImprovementSuggestions\n} from '@internal/react-components';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { _captionSettingsSelector } from '@internal/calling-component-bindings';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { useLocale } from '../localization';\n\n/** @private */\nexport const TagsSurvey = (\n  /* @conditional-compile-remove(end-of-call-survey) */ props: {\n    /* @conditional-compile-remove(end-of-call-survey) */\n    onConfirm?: (survey: _CallSurvey, improvementSuggestions?: CallSurveyImprovementSuggestions) => void;\n    /* @conditional-compile-remove(end-of-call-survey) */\n    showFreeFormTextField?: boolean;\n  }\n): JSX.Element => {\n  /* @conditional-compile-remove(end-of-call-survey) */\n  const strings = useLocale().strings.call;\n  /* @conditional-compile-remove(end-of-call-survey) */\n  const tagsSurveyStrings: _TagsSurveyStrings = {\n    tagsSurveyQuestion: strings.tagsSurveyQuestion,\n    tagsSurveyHelperText: strings.tagsSurveyHelperText,\n    tagsSurveyTextFieldDefaultText: strings.tagsSurveyTextFieldDefaultText\n  };\n\n  /* @conditional-compile-remove(end-of-call-survey) */\n  return (\n    <_TagsSurvey\n      callIssuesToTag={strings.surveyIssues}\n      categoryHeadings={strings.SurveyIssuesHeadingStrings}\n      onConfirm={props.onConfirm}\n      strings={tagsSurveyStrings}\n      showFreeFormTextField={props.showFreeFormTextField}\n    />\n  );\n\n  return <></>;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js

@@ -46,7 +46,8 @@ export const VideoEffectsPaneContent = (props) => {
     const activeVideoEffects = (_a = useSelector(localVideoSelector).activeVideoEffects) === null || _a === void 0 ? void 0 : _a.activeEffects;
     /* @conditional-compile-remove(video-background-effects) */
     const selectableVideoEffects = useMemo(() => {
-        const videoEffects = [{
+        const videoEffects = [
+            {
                 itemKey: 'none',
                 iconProps: {
                     iconName: 'RemoveVideoBackgroundEffect'
@@ -55,7 +56,8 @@ export const VideoEffectsPaneContent = (props) => {
                 tooltipProps: {
                     content: strings.removeBackgroundTooltip
                 }
-            }, {
+            },
+            {
                 itemKey: 'blur',
                 iconProps: {
                     iconName: 'BlurVideoBackground'
@@ -64,7 +66,8 @@ export const VideoEffectsPaneContent = (props) => {
                 tooltipProps: {
                     content: strings.blurBackgroundTooltip
                 }
-            }];
+            }
+        ];
         const videoEffectImages = adapter.getState().videoBackgroundImages;
         if (videoEffectImages) {
             videoEffectImages.forEach((img) => {
@@ -103,7 +106,7 @@ export const VideoEffectsPaneContent = (props) => {
             adapter.updateSelectedVideoBackgroundEffect(noneEffect);
         }
         else {
-            const backgroundImg = selectableVideoEffects.find(effect => {
+            const backgroundImg = selectableVideoEffects.find((effect) => {
                 return effect.itemKey === effectKey;
             });
             if (backgroundImg && backgroundImg.backgroundProps) {
@@ -128,7 +131,11 @@ export const VideoEffectsPaneContent = (props) => {
         };
         adapter.updateSelectedVideoBackgroundEffect(noneEffect);
     }
-    return VideoEffectsPaneTrampoline(onDismissError, activeVideoEffectError, /* @conditional-compile-remove(video-background-effects) */ selectableVideoEffects, /* @conditional-compile-remove(video-background-effects) */ onEffectChange);
+    return VideoEffectsPaneTrampoline(onDismissError, activeVideoEffectError, 
+    /* @conditional-compile-remove(video-background-effects) */
+    selectableVideoEffects, 
+    /* @conditional-compile-remove(video-background-effects) */
+    onEffectChange);
 };
 const VideoEffectsPaneTrampoline = (onDismissError, activeVideoEffectError, selectableVideoEffects, onEffectChange) => {
     /* @conditional-compile-remove(video-background-effects) */
@@ -140,14 +147,10 @@ const VideoEffectsPaneTrampoline = (onDismissError, activeVideoEffectError, sele
     /* @conditional-compile-remove(video-background-effects) */
     const locale = useLocale();
     /* @conditional-compile-remove(video-background-effects) */
-    return React.createElement(Stack, { tokens: {
-            childrenGap: '0.75rem'
-        }, className: mergeStyles({
-            paddingLeft: '0.5rem'
-        }) },
-        activeVideoEffectError && isCameraOn && React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: () => onDismissError(activeVideoEffectError) }, locale.strings.call.unableToStartVideoEffect),
-        showWarning && React.createElement(MessageBar, { messageBarType: MessageBarType.warning }, locale.strings.call.cameraOffBackgroundEffectWarningText),
-        React.createElement(_VideoBackgroundEffectsPicker, { label: locale.strings.call.videoEffectsPaneBackgroundSelectionTitle, styles: backgroundPickerStyles, options: selectableVideoEffects !== null && selectableVideoEffects !== void 0 ? selectableVideoEffects : [], onChange: onEffectChange, selectedEffectKey: selectedEffect }));
+    return (React.createElement(Stack, { tokens: { childrenGap: '0.75rem' }, className: mergeStyles({ paddingLeft: '0.5rem' }) },
+        activeVideoEffectError && isCameraOn && (React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: () => onDismissError(activeVideoEffectError) }, locale.strings.call.unableToStartVideoEffect)),
+        showWarning && (React.createElement(MessageBar, { messageBarType: MessageBarType.warning }, locale.strings.call.cameraOffBackgroundEffectWarningText)),
+        React.createElement(_VideoBackgroundEffectsPicker, { label: locale.strings.call.videoEffectsPaneBackgroundSelectionTitle, styles: backgroundPickerStyles, options: selectableVideoEffects !== null && selectableVideoEffects !== void 0 ? selectableVideoEffects : [], onChange: onEffectChange, selectedEffectKey: selectedEffect })));
     return React.createElement(React.Fragment, null);
 };
 /* @conditional-compile-remove(video-background-effects) */

package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/VideoEffectsPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useCallback, useMemo } from 'react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { MessageBar, MessageBarType, Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useLocale } from '../localization';\nimport { ActiveErrorMessage, _VideoEffectsItemProps } from '@internal/react-components';\n/* @conditional-compile-remove(video-background-effects) */\nimport { _VideoBackgroundEffectsPicker } from '@internal/react-components';\n/* @conditional-compile-remove(video-background-effects) */\nimport { VideoBackgroundImage, VideoBackgroundBlurEffect, VideoBackgroundNoEffect, VideoBackgroundReplacementEffect } from '../CallComposite';\n/* @conditional-compile-remove(video-background-effects) */\nimport { activeVideoBackgroundEffectSelector } from '../CallComposite/selectors/activeVideoBackgroundEffectSelector';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useSelector } from '../CallComposite/hooks/useSelector';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';\n/* @conditional-compile-remove(video-background-effects) */\nimport { localVideoSelector } from '../CallComposite/selectors/localVideoStreamSelector';\nimport { ActiveVideoEffect } from '../CallComposite/components/SidePane/useVideoEffectsPane';\n\n/**\n * Pane that is used to show video effects button\n * @private\n */\n/** @beta */\nexport const VideoEffectsPaneContent = (props: {\n  activeVideoEffectError?: ActiveErrorMessage;\n  onDismissError: (error: ActiveErrorMessage) => void;\n  activeVideoEffectChange: (effect: ActiveVideoEffect) => void;\n}): JSX.Element => {\n  const {\n    onDismissError,\n    activeVideoEffectError,\n    /* @conditional-compile-remove(video-background-effects) */\n    activeVideoEffectChange\n  } = props;\n  /* @conditional-compile-remove(video-background-effects) */\n  const locale = useLocale();\n  /* @conditional-compile-remove(video-background-effects) */\n  const adapter = useAdapter();\n  /* @conditional-compile-remove(video-background-effects) */\n  const strings = locale.strings.call;\n  /* @conditional-compile-remove(video-background-effects) */\n  const activeVideoEffects = useSelector(localVideoSelector).activeVideoEffects?.activeEffects;\n  /* @conditional-compile-remove(video-background-effects) */\n  const selectableVideoEffects: _VideoEffectsItemProps[] = useMemo(() => {\n    const videoEffects: _VideoEffectsItemProps[] = [{\n      itemKey: 'none',\n      iconProps: {\n        iconName: 'RemoveVideoBackgroundEffect'\n      },\n      title: strings.removeBackgroundEffectButtonLabel,\n      tooltipProps: {\n        content: strings.removeBackgroundTooltip\n      }\n    }, {\n      itemKey: 'blur',\n      iconProps: {\n        iconName: 'BlurVideoBackground'\n      },\n      title: strings.blurBackgroundEffectButtonLabel,\n      tooltipProps: {\n        content: strings.blurBackgroundTooltip\n      }\n    }];\n    const videoEffectImages = adapter.getState().videoBackgroundImages;\n    if (videoEffectImages) {\n      videoEffectImages.forEach((img: VideoBackgroundImage) => {\n        videoEffects.push({\n          itemKey: img.key,\n          backgroundProps: {\n            url: img.url\n          },\n          tooltipProps: {\n            content: img.tooltipText ?? ''\n          }\n        });\n      });\n    }\n    return videoEffects;\n  }, [strings, adapter]);\n\n  /* @conditional-compile-remove(video-background-effects) */\n  const onEffectChange = useCallback(async (effectKey: string) => {\n    if (effectKey === 'blur') {\n      const blurEffect: VideoBackgroundBlurEffect = {\n        effectName: effectKey\n      };\n      activeVideoEffectChange({\n        type: 'blur',\n        timestamp: new Date(Date.now())\n      });\n      await adapter.startVideoBackgroundEffect(blurEffect);\n      adapter.updateSelectedVideoBackgroundEffect(blurEffect);\n    } else if (effectKey === 'none') {\n      const noneEffect: VideoBackgroundNoEffect = {\n        effectName: effectKey\n      };\n      await adapter.stopVideoBackgroundEffects();\n      adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n    } else {\n      const backgroundImg = selectableVideoEffects.find(effect => {\n        return effect.itemKey === effectKey;\n      });\n      if (backgroundImg && backgroundImg.backgroundProps) {\n        const replaceEffect: VideoBackgroundReplacementEffect = {\n          effectName: 'replacement',\n          key: effectKey,\n          backgroundImageUrl: backgroundImg.backgroundProps.url\n        };\n        activeVideoEffectChange({\n          type: 'replacement',\n          timestamp: new Date(Date.now())\n        });\n        await adapter.startVideoBackgroundEffect(replaceEffect);\n        adapter.updateSelectedVideoBackgroundEffect(replaceEffect);\n      }\n    }\n  }, [adapter, activeVideoEffectChange, selectableVideoEffects]);\n\n  /* @conditional-compile-remove(video-background-effects) */\n  if (activeVideoEffectError && activeVideoEffects && activeVideoEffects.length === 0) {\n    const noneEffect: VideoBackgroundNoEffect = {\n      effectName: 'none'\n    };\n    adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n  }\n  return VideoEffectsPaneTrampoline(onDismissError, activeVideoEffectError, /* @conditional-compile-remove(video-background-effects) */\n  selectableVideoEffects, /* @conditional-compile-remove(video-background-effects) */\n  onEffectChange);\n};\nconst VideoEffectsPaneTrampoline = (onDismissError: (error: ActiveErrorMessage) => void, activeVideoEffectError?: ActiveErrorMessage, selectableVideoEffects?: _VideoEffectsItemProps[], onEffectChange?: (effectKey: string) => Promise<void>): JSX.Element => {\n  /* @conditional-compile-remove(video-background-effects) */\n  const selectedEffect = useSelector(activeVideoBackgroundEffectSelector);\n  /* @conditional-compile-remove(video-background-effects) */\n  const isCameraOn = useSelector(localVideoSelector).isAvailable;\n  /* @conditional-compile-remove(video-background-effects) */\n  const showWarning = !isCameraOn && selectedEffect !== 'none';\n  /* @conditional-compile-remove(video-background-effects) */\n  const locale = useLocale();\n\n  /* @conditional-compile-remove(video-background-effects) */\n  return <Stack tokens={{\n    childrenGap: '0.75rem'\n  }} className={mergeStyles({\n    paddingLeft: '0.5rem'\n  })}>\n      {activeVideoEffectError && isCameraOn && <MessageBar messageBarType={MessageBarType.error} onDismiss={() => onDismissError(activeVideoEffectError)}>\n          {locale.strings.call.unableToStartVideoEffect}\n        </MessageBar>}\n      {showWarning && <MessageBar messageBarType={MessageBarType.warning}>\n          {locale.strings.call.cameraOffBackgroundEffectWarningText}\n        </MessageBar>}\n      <_VideoBackgroundEffectsPicker label={locale.strings.call.videoEffectsPaneBackgroundSelectionTitle} styles={backgroundPickerStyles} options={selectableVideoEffects ?? []} onChange={onEffectChange} selectedEffectKey={selectedEffect} />\n    </Stack>;\n  return <></>;\n};\n\n/* @conditional-compile-remove(video-background-effects) */\nconst backgroundPickerStyles = {\n  label: {\n    fontSize: '0.75rem',\n    lineHeight: '0.5rem',\n    fontWeight: '400'\n  }\n};"]}
+{"version":3,"file":"VideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/VideoEffectsPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useCallback, useMemo } from 'react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { MessageBar, MessageBarType, Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useLocale } from '../localization';\nimport { ActiveErrorMessage, _VideoEffectsItemProps } from '@internal/react-components';\n/* @conditional-compile-remove(video-background-effects) */\nimport { _VideoBackgroundEffectsPicker } from '@internal/react-components';\n/* @conditional-compile-remove(video-background-effects) */\nimport {\n  VideoBackgroundImage,\n  VideoBackgroundBlurEffect,\n  VideoBackgroundNoEffect,\n  VideoBackgroundReplacementEffect\n} from '../CallComposite';\n/* @conditional-compile-remove(video-background-effects) */\nimport { activeVideoBackgroundEffectSelector } from '../CallComposite/selectors/activeVideoBackgroundEffectSelector';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useSelector } from '../CallComposite/hooks/useSelector';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';\n/* @conditional-compile-remove(video-background-effects) */\nimport { localVideoSelector } from '../CallComposite/selectors/localVideoStreamSelector';\nimport { ActiveVideoEffect } from '../CallComposite/components/SidePane/useVideoEffectsPane';\n\n/**\n * Pane that is used to show video effects button\n * @private\n */\n/** @beta */\nexport const VideoEffectsPaneContent = (props: {\n  activeVideoEffectError?: ActiveErrorMessage;\n  onDismissError: (error: ActiveErrorMessage) => void;\n  activeVideoEffectChange: (effect: ActiveVideoEffect) => void;\n}): JSX.Element => {\n  const {\n    onDismissError,\n    activeVideoEffectError,\n    /* @conditional-compile-remove(video-background-effects) */\n    activeVideoEffectChange\n  } = props;\n  /* @conditional-compile-remove(video-background-effects) */\n  const locale = useLocale();\n  /* @conditional-compile-remove(video-background-effects) */\n  const adapter = useAdapter();\n  /* @conditional-compile-remove(video-background-effects) */\n  const strings = locale.strings.call;\n  /* @conditional-compile-remove(video-background-effects) */\n  const activeVideoEffects = useSelector(localVideoSelector).activeVideoEffects?.activeEffects;\n  /* @conditional-compile-remove(video-background-effects) */\n  const selectableVideoEffects: _VideoEffectsItemProps[] = useMemo(() => {\n    const videoEffects: _VideoEffectsItemProps[] = [\n      {\n        itemKey: 'none',\n        iconProps: {\n          iconName: 'RemoveVideoBackgroundEffect'\n        },\n        title: strings.removeBackgroundEffectButtonLabel,\n        tooltipProps: {\n          content: strings.removeBackgroundTooltip\n        }\n      },\n      {\n        itemKey: 'blur',\n        iconProps: {\n          iconName: 'BlurVideoBackground'\n        },\n        title: strings.blurBackgroundEffectButtonLabel,\n        tooltipProps: {\n          content: strings.blurBackgroundTooltip\n        }\n      }\n    ];\n    const videoEffectImages = adapter.getState().videoBackgroundImages;\n\n    if (videoEffectImages) {\n      videoEffectImages.forEach((img: VideoBackgroundImage) => {\n        videoEffects.push({\n          itemKey: img.key,\n          backgroundProps: {\n            url: img.url\n          },\n          tooltipProps: {\n            content: img.tooltipText ?? ''\n          }\n        });\n      });\n    }\n    return videoEffects;\n  }, [strings, adapter]);\n\n  /* @conditional-compile-remove(video-background-effects) */\n  const onEffectChange = useCallback(\n    async (effectKey: string) => {\n      if (effectKey === 'blur') {\n        const blurEffect: VideoBackgroundBlurEffect = {\n          effectName: effectKey\n        };\n        activeVideoEffectChange({\n          type: 'blur',\n          timestamp: new Date(Date.now())\n        });\n        await adapter.startVideoBackgroundEffect(blurEffect);\n        adapter.updateSelectedVideoBackgroundEffect(blurEffect);\n      } else if (effectKey === 'none') {\n        const noneEffect: VideoBackgroundNoEffect = {\n          effectName: effectKey\n        };\n        await adapter.stopVideoBackgroundEffects();\n        adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n      } else {\n        const backgroundImg = selectableVideoEffects.find((effect) => {\n          return effect.itemKey === effectKey;\n        });\n        if (backgroundImg && backgroundImg.backgroundProps) {\n          const replaceEffect: VideoBackgroundReplacementEffect = {\n            effectName: 'replacement',\n            key: effectKey,\n            backgroundImageUrl: backgroundImg.backgroundProps.url\n          };\n          activeVideoEffectChange({\n            type: 'replacement',\n            timestamp: new Date(Date.now())\n          });\n          await adapter.startVideoBackgroundEffect(replaceEffect);\n          adapter.updateSelectedVideoBackgroundEffect(replaceEffect);\n        }\n      }\n    },\n    [adapter, activeVideoEffectChange, selectableVideoEffects]\n  );\n\n  /* @conditional-compile-remove(video-background-effects) */\n  if (activeVideoEffectError && activeVideoEffects && activeVideoEffects.length === 0) {\n    const noneEffect: VideoBackgroundNoEffect = {\n      effectName: 'none'\n    };\n    adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n  }\n  return VideoEffectsPaneTrampoline(\n    onDismissError,\n    activeVideoEffectError,\n    /* @conditional-compile-remove(video-background-effects) */\n    selectableVideoEffects,\n    /* @conditional-compile-remove(video-background-effects) */\n    onEffectChange\n  );\n};\n\nconst VideoEffectsPaneTrampoline = (\n  onDismissError: (error: ActiveErrorMessage) => void,\n  activeVideoEffectError?: ActiveErrorMessage,\n  selectableVideoEffects?: _VideoEffectsItemProps[],\n  onEffectChange?: (effectKey: string) => Promise<void>\n): JSX.Element => {\n  /* @conditional-compile-remove(video-background-effects) */\n  const selectedEffect = useSelector(activeVideoBackgroundEffectSelector);\n  /* @conditional-compile-remove(video-background-effects) */\n  const isCameraOn = useSelector(localVideoSelector).isAvailable;\n  /* @conditional-compile-remove(video-background-effects) */\n  const showWarning = !isCameraOn && selectedEffect !== 'none';\n  /* @conditional-compile-remove(video-background-effects) */\n  const locale = useLocale();\n\n  /* @conditional-compile-remove(video-background-effects) */\n  return (\n    <Stack tokens={{ childrenGap: '0.75rem' }} className={mergeStyles({ paddingLeft: '0.5rem' })}>\n      {activeVideoEffectError && isCameraOn && (\n        <MessageBar messageBarType={MessageBarType.error} onDismiss={() => onDismissError(activeVideoEffectError)}>\n          {locale.strings.call.unableToStartVideoEffect}\n        </MessageBar>\n      )}\n      {showWarning && (\n        <MessageBar messageBarType={MessageBarType.warning}>\n          {locale.strings.call.cameraOffBackgroundEffectWarningText}\n        </MessageBar>\n      )}\n      <_VideoBackgroundEffectsPicker\n        label={locale.strings.call.videoEffectsPaneBackgroundSelectionTitle}\n        styles={backgroundPickerStyles}\n        options={selectableVideoEffects ?? []}\n        onChange={onEffectChange}\n        selectedEffectKey={selectedEffect}\n      />\n    </Stack>\n  );\n  return <></>;\n};\n\n/* @conditional-compile-remove(video-background-effects) */\nconst backgroundPickerStyles = {\n  label: {\n    fontSize: '0.75rem',\n    lineHeight: '0.5rem',\n    fontWeight: '400'\n  }\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/adapters.js.map

@@ -1 +1 @@
-{"version":3,"file":"adapters.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/adapters.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * Functionality for interfacing with Composite adapter state.\n *\n * @public\n */\nexport interface AdapterState<TState> {\n  /** Subscribes the handler to stateChanged events. */\n  onStateChange(handler: (state: TState) => void): void;\n  /** Unsubscribes the handler to stateChanged events. */\n  offStateChange(handler: (state: TState) => void): void;\n  /** Get the current State */\n  getState(): TState;\n}\n\n/**\n * Functionality for correctly disposing a Composite.\n *\n * @public\n */\nexport interface Disposable {\n  /** Dispose of the Composite */\n  dispose(): void;\n}\n\n/**\n * Error reported via error events and stored in adapter state.\n *\n * @public\n */\nexport interface AdapterError extends Error {\n  /**\n   * The operation that failed.\n   */\n  target: string;\n  /**\n   * Error thrown by the failed operation.\n   */\n  innerError: Error;\n  /**\n   * Timestamp added to the error in the adapter implementation.\n   */\n  timestamp: Date;\n}\n\n/**\n * Adapters stores the latest error for each operation in the state.\n *\n * `target` is an adapter defined string for each unique operation performed by the adapter.\n *\n * @public\n */\nexport type AdapterErrors = {\n  [target: string]: AdapterError;\n};"]}
+{"version":3,"file":"adapters.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/adapters.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * Functionality for interfacing with Composite adapter state.\n *\n * @public\n */\nexport interface AdapterState<TState> {\n  /** Subscribes the handler to stateChanged events. */\n  onStateChange(handler: (state: TState) => void): void;\n  /** Unsubscribes the handler to stateChanged events. */\n  offStateChange(handler: (state: TState) => void): void;\n  /** Get the current State */\n  getState(): TState;\n}\n\n/**\n * Functionality for correctly disposing a Composite.\n *\n * @public\n */\nexport interface Disposable {\n  /** Dispose of the Composite */\n  dispose(): void;\n}\n\n/**\n * Error reported via error events and stored in adapter state.\n *\n * @public\n */\nexport interface AdapterError extends Error {\n  /**\n   * The operation that failed.\n   */\n  target: string;\n  /**\n   * Error thrown by the failed operation.\n   */\n  innerError: Error;\n  /**\n   * Timestamp added to the error in the adapter implementation.\n   */\n  timestamp: Date;\n}\n\n/**\n * Adapters stores the latest error for each operation in the state.\n *\n * `target` is an adapter defined string for each unique operation performed by the adapter.\n *\n * @public\n */\nexport type AdapterErrors = { [target: string]: AdapterError };\n"]}

package/dist/dist-esm/react-composites/src/composites/common/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/constants.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;AAE/E;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,yHAAyH,CAAC;AAErK;;;;GAIG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,IAAI,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * @private\n */\nexport const UNSUPPORTED_CHAT_THREAD_TYPE = ['@thread.tacv2', '@thread.skype'];\n\n/**\n * @private\n */\nexport const TEAMS_LIMITATION_LEARN_MORE = 'https://learn.microsoft.com/en-us/azure/communication-services/concepts/join-teams-meeting#limitations-and-known-issues';\n\n/**\n * @remarks\n * This value is publicly documented in the ChatComposite API documentation.\n * Changing this value will require updating the API documentation.\n */\nexport const CHAT_CONTAINER_MIN_WIDTH_REM = 17.5;"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/constants.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;AAE/E;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GACtC,yHAAyH,CAAC;AAE5H;;;;GAIG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,IAAI,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * @private\n */\nexport const UNSUPPORTED_CHAT_THREAD_TYPE = ['@thread.tacv2', '@thread.skype'];\n\n/**\n * @private\n */\nexport const TEAMS_LIMITATION_LEARN_MORE =\n  'https://learn.microsoft.com/en-us/azure/communication-services/concepts/join-teams-meeting#limitations-and-known-issues';\n\n/**\n * @remarks\n * This value is publicly documented in the ChatComposite API documentation.\n * Changing this value will require updating the API documentation.\n */\nexport const CHAT_CONTAINER_MIN_WIDTH_REM = 17.5;\n"]}

package/dist/dist-esm/react-composites/src/composites/common/icons.d.ts

@@ -39,8 +39,11 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     ControlButtonMicProhibited?: JSX.Element | undefined;
     ControlButtonRaiseHand: JSX.Element;
     ControlButtonLowerHand: JSX.Element;
+    ControlButtonExitSpotlight?: JSX.Element | undefined;
     RaiseHandContextualMenuItem: JSX.Element;
+    ReactionContextualMenuItem?: JSX.Element | undefined;
     LowerHandContextualMenuItem: JSX.Element;
+    ReactionButtonIcon: JSX.Element;
     ErrorBarCallCameraAccessDenied: JSX.Element;
     ErrorBarCallCameraAlreadyInUse: JSX.Element;
     ErrorBarCallLocalVideoFreeze: JSX.Element;
@@ -94,6 +97,8 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     LargeGalleryLayout?: JSX.Element | undefined;
     DefaultCustomButton?: JSX.Element | undefined;
     DtmfDialpadButton?: JSX.Element | undefined;
+    PeoplePaneMoreButton?: JSX.Element | undefined;
+    StopAllSpotlightMenuButton?: JSX.Element | undefined;
     ChevronLeft?: JSX.Element | undefined;
     ControlBarChatButtonActive?: JSX.Element | undefined;
     ControlBarChatButtonInactive?: JSX.Element | undefined;
@@ -111,6 +116,7 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     ErrorBarCallVideoRecoveredBySystem: React.JSX.Element;
     ErrorBarCallVideoStoppedBySystem: React.JSX.Element;
     MessageResend: React.JSX.Element;
+    ParticipantItemSpotlighted: React.JSX.Element;
     HoldCallContextualMenuItem: React.JSX.Element;
     HoldCallButton: React.JSX.Element;
     ResumeCall: React.JSX.Element;
@@ -144,6 +150,21 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     ContextMenuCameraIcon: React.JSX.Element;
     ContextMenuMicIcon: React.JSX.Element;
     ContextMenuSpeakerIcon: React.JSX.Element;
+    SurveyStarIcon: React.JSX.Element;
+    SurveyStarIconFilled: React.JSX.Element;
+    StartSpotlightContextualMenuItem: React.JSX.Element;
+    StopSpotlightContextualMenuItem: React.JSX.Element;
+    VideoTileSpotlighted: React.JSX.Element;
+    RichTextBoldButtonIcon: React.JSX.Element;
+    RichTextItalicButtonIcon: React.JSX.Element;
+    RichTextUnderlineButtonIcon: React.JSX.Element;
+    RichTextBulletListButtonIcon: React.JSX.Element;
+    RichTextNumberListButtonIcon: React.JSX.Element;
+    RichTextIndentDecreaseButtonIcon: React.JSX.Element;
+    RichTextIndentIncreaseButtonIcon: React.JSX.Element;
+    RichTextDividerIcon: React.JSX.Element;
+    RichTextEditorButtonIcon: React.JSX.Element;
+    RichTextEditorButtonIconFilled: React.JSX.Element;
 };
 /** @private */
 export type CompositeIconProps<Icons> = IIconProps & {
@@ -197,8 +218,11 @@ export type CallCompositeIcons = {
     ControlButtonMicProhibited?: JSX.Element;
     ControlButtonRaiseHand?: JSX.Element;
     ControlButtonLowerHand?: JSX.Element;
+    ControlButtonExitSpotlight?: JSX.Element;
     RaiseHandContextualMenuItem?: JSX.Element;
+    ReactionContextualMenuItem?: JSX.Element;
     LowerHandContextualMenuItem?: JSX.Element;
+    ReactionButtonIcon?: JSX.Element;
     ErrorBarCallCameraAccessDenied?: JSX.Element;
     ErrorBarCallCameraAlreadyInUse?: JSX.Element;
     ErrorBarCallLocalVideoFreeze?: JSX.Element;
@@ -254,6 +278,8 @@ export type CallCompositeIcons = {
     LargeGalleryLayout?: JSX.Element;
     DefaultCustomButton?: JSX.Element;
     DtmfDialpadButton?: JSX.Element;
+    PeoplePaneMoreButton?: JSX.Element;
+    StopAllSpotlightMenuButton?: JSX.Element;
 };
 /**
  * Icon wrapper to use when including customizable icons inside the CallComposite.
@@ -340,6 +366,8 @@ export type CallWithChatCompositeIcons = {
     SendBoxAttachFile?: JSX.Element;
     ParticipantItemOptions?: JSX.Element;
     ParticipantItemOptionsHovered?: JSX.Element;
+    PeoplePaneMoreButton?: JSX.Element;
+    StopAllSpotlightMenuButton?: JSX.Element;
 };
 /**
  * Icon wrapper to use when including customizable icons inside the CallWithChatComposite.