npm - @azure/communication-react - Versions diffs - 1.32.0-alpha-202511181633 → 1.32.0 - Mend

@azure/communication-react 1.32.0-alpha-202511181633 → 1.32.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1287) hide show

package/dist/dist-esm/react-components/src/components/Survey/TagsSurvey/TagsSurvey.js CHANGED Viewed

@@ -25,9 +25,9 @@ export const _TagsSurvey = (props) => {
             videoRating: [],
             screenshareRating: []
         };
-        _getKeys(callIssuesToTag).forEach((issueCategory) => {
-            _getKeys(callIssuesToTag[issueCategory]).map((issue) => {
-                const issueCapitalized = ((issue === null || issue === void 0 ? void 0 : issue.charAt(0).toUpperCase()) + (issue === null || issue === void 0 ? void 0 : issue.slice(1)));
+        _getKeys(callIssuesToTag).forEach(issueCategory => {
+            _getKeys(callIssuesToTag[issueCategory]).map(issue => {
+                const issueCapitalized = (issue === null || issue === void 0 ? void 0 : issue.charAt(0).toUpperCase()) + (issue === null || issue === void 0 ? void 0 : issue.slice(1));
                 const issueMessages = callIssuesToTag[issueCategory];
                 if (tags[issueCategory]) {
                     tags[issueCategory].push({
@@ -36,12 +36,10 @@ export const _TagsSurvey = (props) => {
                     });
                 }
                 else {
-                    tags[issueCategory] = [
-                        {
+                    tags[issueCategory] = [{
                             message: issueMessages[issue],
                             issue: issueCapitalized
-                        }
-                    ];
+                        }];
                 }
             });
         });
@@ -50,20 +48,22 @@ export const _TagsSurvey = (props) => {
     const onChange = React.useCallback((issueCategory, checked, issue) => {
         if (checked) {
             if (issue) {
-                setSelectedTags((prevState) => {
+                setSelectedTags(prevState => {
                     const category = prevState === null || prevState === void 0 ? void 0 : prevState[issueCategory];
                     if (category && category.issues) {
                         category.issues = [category.issues, issue];
                     }
                     else {
-                        prevState[issueCategory] = { issues: [issue] };
+                        prevState[issueCategory] = {
+                            issues: [issue]
+                        };
                     }
                     return prevState;
                 });
             }
             else {
                 setCheckedTextFields([...checkedTextFields, issueCategory]);
-                setSelectedTextResponse((prevState) => {
+                setSelectedTextResponse(prevState => {
                     prevState[issueCategory] = textResponse[issueCategory];
                     return prevState;
                 });
@@ -71,7 +71,7 @@ export const _TagsSurvey = (props) => {
         }
         else {
             if (issue) {
-                setSelectedTags((prevState) => {
+                setSelectedTags(prevState => {
                     var _a, _b;
                     // 'prevState[issueCategory]?.issues as ...' typing is required here to avoid a typescript limitation
                     // "This expression is not callable" caused by filter().
@@ -81,8 +81,8 @@ export const _TagsSurvey = (props) => {
                 });
             }
             else {
-                setCheckedTextFields(checkedTextFields.filter((id) => id !== issueCategory));
-                setSelectedTextResponse((prevState) => {
+                setCheckedTextFields(checkedTextFields.filter(id => id !== issueCategory));
+                setSelectedTextResponse(prevState => {
                     delete prevState[issueCategory];
                     return prevState;
                 });
@@ -91,40 +91,40 @@ export const _TagsSurvey = (props) => {
     }, [textResponse, checkedTextFields]);
     const theme = useTheme();
     const onRenderLabel = useCallback((issueCategory) => {
-        return (React.createElement(TextField, { key: issueCategory, className: freeFormTextFieldClassName, underlined: true, placeholder: strings === null || strings === void 0 ? void 0 : strings.tagsSurveyTextFieldDefaultText, onChange: (e, v) => {
+        return React.createElement(TextField, { key: issueCategory, className: freeFormTextFieldClassName, underlined: true, placeholder: strings === null || strings === void 0 ? void 0 : strings.tagsSurveyTextFieldDefaultText, onChange: (e, v) => {
                 if (v) {
                     setCheckedTextFields([...checkedTextFields, issueCategory]);
-                    setTextResponse((prevState) => {
+                    setTextResponse(prevState => {
                         prevState[issueCategory] = v;
                         return prevState;
                     });
-                    setSelectedTextResponse((prevState) => {
+                    setSelectedTextResponse(prevState => {
                         prevState[issueCategory] = v;
                         return prevState;
                     });
                 }
-            } }));
+            } });
     }, [strings === null || strings === void 0 ? void 0 : strings.tagsSurveyTextFieldDefaultText, checkedTextFields]);
     useEffect(() => {
         if (onConfirm) {
             onConfirm(selectedTags, selectedTextResponse);
         }
     }, [selectedTags, selectedTextResponse, onConfirm]);
-    return (React.createElement(React.Fragment, null,
+    return React.createElement(React.Fragment, null,
         React.createElement(Stack, { verticalAlign: "center" },
             React.createElement(Text, { className: questionTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.tagsSurveyQuestion)),
         React.createElement(Pivot, null, _getKeys(tags).map((key, i) => {
-            return (React.createElement(PivotItem, { key: `key-${i}`, headerText: categoryHeadings[key], headerButtonProps: {
+            return React.createElement(PivotItem, { key: `key-${i}`, headerText: categoryHeadings[key], headerButtonProps: {
                     'data-order': i,
                     'data-title': key
                 }, alwaysRender: true },
                 tags[key].map((t, i) => {
-                    return (React.createElement(Checkbox, { className: checkboxClassName, key: `checkBox_${i}`, label: t.message, onChange: (ev, checked) => onChange(key, checked !== null && checked !== void 0 ? checked : false, t.issue) }));
+                    return React.createElement(Checkbox, { className: checkboxClassName, key: `checkBox_${i}`, label: t.message, onChange: (ev, checked) => onChange(key, checked !== null && checked !== void 0 ? checked : false, t.issue) });
                 }),
-                showFreeFormTextField && (React.createElement(Checkbox, { checked: checkedTextFields.includes(key), styles: freeFormTextCheckboxStyles, onChange: (ev, checked) => onChange(key, checked !== null && checked !== void 0 ? checked : false), onRenderLabel: () => {
+                showFreeFormTextField && React.createElement(Checkbox, { checked: checkedTextFields.includes(key), styles: freeFormTextCheckboxStyles, onChange: (ev, checked) => onChange(key, checked !== null && checked !== void 0 ? checked : false), onRenderLabel: () => {
                         return onRenderLabel(key);
-                    } }))));
+                    } }));
         })),
-        React.createElement(Text, { className: helperTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.tagsSurveyHelperText)));
+        React.createElement(Text, { className: helperTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.tagsSurveyHelperText));
 };
 //# sourceMappingURL=TagsSurvey.js.map

package/dist/dist-esm/react-components/src/components/Survey/TagsSurvey/TagsSurvey.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TagsSurvey.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/Survey/TagsSurvey/TagsSurvey.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// Permit `any` in this file to handle the overloaded issue type. Todo: refactor CallSurvey to have PartialDeep<_CallSurvey> instead of any\n// for tracking incomplete survey responses.\n/* eslint-disable @typescript-eslint/no-explicit-any /\n\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { Text, useTheme, Stack, Checkbox, Pivot, PivotItem, TextField } from '@fluentui/react';\nimport { _formatString, _getKeys, _pxToRem } from '@internal/acs-ui-common';\nimport {\n checkboxClassName,\n questionTextStyle,\n helperTextStyle,\n freeFormTextFieldClassName,\n freeFormTextCheckboxStyles\n} from './TagsSurvey.styles';\nimport {\n _AudioIssue,\n _CallRating,\n _CallSurvey,\n _CallSurveyResponse,\n _OverallIssue,\n _ScreenshareIssue,\n _VideoIssue\n} from '../SurveyTypes';\nimport { SurveyIssuesHeadingStrings, SurveyIssues, CallSurveyImprovementSuggestions } from '../../../types';\n/\n Strings of {@link TagsSurvey} that can be overridden.\n \n @internal\n /\nexport interface _TagsSurveyStrings {\n /\n Survey question\n /\n tagsSurveyQuestion?: string;\n /\n Helper text for tag survey explaining what the survey is for\n /\n tagsSurveyHelperText?: string;\n /\n Default text for free form text field inside tags survey\n /\n tagsSurveyTextFieldDefaultText?: string;\n}\n\n/\n Survey Issue categories\n \n @internal\n /\nexport type _IssueCategory = 'overallRating' \| 'audioRating' \| 'videoRating' \| 'screenshareRating';\n\n/\n Key value pair of survey catogories and corresponding message/issue\n \n @internal\n /\nexport type _SurveyTag = Record<\n _IssueCategory,\n {\n message: string;\n issue: _AudioIssue \| _OverallIssue \| _ScreenshareIssue \| _VideoIssue;\n }[]\n>;\n\n/\n Props for {@link TagsSurvey} component.\n \n @internal\n /\nexport interface _TagsSurveyProps {\n /* Mappings from call issues to tags displayed on the survey/\n callIssuesToTag: SurveyIssues;\n /* Mappings from issue category to categories displayed on survey/\n categoryHeadings: SurveyIssuesHeadingStrings;\n /* Function to send TagsSurvey results/\n onConfirm?: (selectedTags: _CallSurvey, improvementSuggestions?: CallSurveyImprovementSuggestions) => void;\n /* show the text field for more info/\n showFreeFormTextField?: boolean;\n /* Tags survey strings /\n strings?: _TagsSurveyStrings;\n}\n\n/\n A component to allow users to send numerical ratings regarding call quality\n \n @internal\n */\nexport const _TagsSurvey = (props: _TagsSurveyProps): JSX.Element => {\n const { callIssuesToTag, categoryHeadings, onConfirm, strings, showFreeFormTextField } = props;\n\n const [selectedTags, setSelectedTags] = useState<_CallSurvey>({});\n\n const [textResponse, setTextResponse] = useState<CallSurveyImprovementSuggestions>({});\n\n const [selectedTextResponse, setSelectedTextResponse] = useState<CallSurveyImprovementSuggestions>({});\n\n const [checkedTextFields, setCheckedTextFields] = useState<_IssueCategory[]>([]);\n\n const tags: _SurveyTag = useMemo(() => {\n const tags: _SurveyTag = {\n overallRating: [],\n audioRating: [],\n videoRating: [],\n screenshareRating: []\n };\n _getKeys(callIssuesToTag).forEach((issueCategory) => {\n _getKeys(callIssuesToTag[issueCategory]).map((issue) => {\n const issueCapitalized = (issue?.charAt(0).toUpperCase() + issue?.slice(1)) as\n \| _AudioIssue\n \| _OverallIssue\n \| _ScreenshareIssue\n \| _VideoIssue;\n\n const issueMessages = callIssuesToTag[issueCategory];\n if (tags[issueCategory]) {\n tags[issueCategory].push({\n message: issueMessages[issue],\n issue: issueCapitalized\n });\n } else {\n tags[issueCategory] = [\n {\n message: issueMessages[issue],\n issue: issueCapitalized\n }\n ];\n }\n });\n });\n return tags;\n }, [callIssuesToTag]);\n\n const onChange = React.useCallback(\n (\n issueCategory: _IssueCategory,\n checked: boolean,\n issue?: _AudioIssue \| _OverallIssue \| _ScreenshareIssue \| _VideoIssue\n ): void => {\n if (checked) {\n if (issue) {\n setSelectedTags((prevState) => {\n const category = prevState?.[issueCategory];\n if (category && category.issues) {\n category.issues = [category.issues, issue] as any;\n } else {\n prevState[issueCategory] = { issues: [issue] } as any;\n }\n return prevState;\n });\n } else {\n setCheckedTextFields([...checkedTextFields, issueCategory]);\n setSelectedTextResponse((prevState) => {\n prevState[issueCategory] = textResponse[issueCategory];\n return prevState;\n });\n }\n } else {\n if (issue) {\n setSelectedTags((prevState) => {\n // 'prevState[issueCategory]?.issues as ...' typing is required here to avoid a typescript limitation\n // \"This expression is not callable\" caused by filter().\n // More information can be found here: https://github.com/microsoft/TypeScript/issues/44373\n const categoryIssues = (\n prevState[issueCategory]?.issues as (_AudioIssue \| _OverallIssue \| _ScreenshareIssue \| _VideoIssue)[]\n )?.filter((value: _AudioIssue \| _OverallIssue \| _ScreenshareIssue \| _VideoIssue) => value !== issue);\n return {\n ...prevState,\n [issueCategory]: {\n ...(prevState[issueCategory] \|\| {}),\n issues: categoryIssues\n }\n };\n });\n } else {\n setCheckedTextFields(checkedTextFields.filter((id) => id !== issueCategory));\n setSelectedTextResponse((prevState) => {\n delete prevState[issueCategory];\n return prevState;\n });\n }\n }\n },\n [textResponse, checkedTextFields]\n );\n\n const theme = useTheme();\n\n const onRenderLabel = useCallback(\n (issueCategory: _IssueCategory) => {\n return (\n <TextField\n key={issueCategory}\n className={freeFormTextFieldClassName}\n underlined\n placeholder={strings?.tagsSurveyTextFieldDefaultText}\n onChange={(e, v) => {\n if (v) {\n setCheckedTextFields([...checkedTextFields, issueCategory]);\n setTextResponse((prevState) => {\n prevState[issueCategory] = v;\n return prevState;\n });\n\n setSelectedTextResponse((prevState) => {\n prevState[issueCategory] = v;\n return prevState;\n });\n }\n }}\n />\n );\n },\n [strings?.tagsSurveyTextFieldDefaultText, checkedTextFields]\n );\n\n useEffect(() => {\n if (onConfirm) {\n onConfirm(selectedTags, selectedTextResponse);\n }\n }, [selectedTags, selectedTextResponse, onConfirm]);\n\n return (\n <>\n <Stack verticalAlign=\"center\">\n <Text className={questionTextStyle(theme)}>{strings?.tagsSurveyQuestion}</Text>\n </Stack>\n\n <Pivot>\n {_getKeys(tags).map((key, i) => {\n return (\n <PivotItem\n key={`key-${i}`}\n headerText={categoryHeadings[key]} // Add index signature to allow indexing with a string\n headerButtonProps={{\n 'data-order': i,\n 'data-title': key\n }}\n alwaysRender\n >\n {tags[key].map((t, i) => {\n return (\n <Checkbox\n className={checkboxClassName}\n key={`checkBox_${i}`}\n label={t.message}\n onChange={(ev, checked) => onChange(key, checked ?? false, t.issue)}\n />\n );\n })}\n {showFreeFormTextField && (\n <Checkbox\n checked={checkedTextFields.includes(key)}\n styles={freeFormTextCheckboxStyles}\n onChange={(ev, checked) => onChange(key, checked ?? false)}\n onRenderLabel={() => {\n return onRenderLabel(key);\n }}\n />\n )}\n </PivotItem>\n );\n })}\n </Pivot>\n\n <Text className={helperTextStyle(theme)}>{strings?.tagsSurveyHelperText}</Text>\n </>\n );\n};\n"]}
1	+ {"version":3,"file":"TagsSurvey.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/Survey/TagsSurvey/TagsSurvey.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// Permit `any` in this file to handle the overloaded issue type. Todo: refactor CallSurvey to have PartialDeep<_CallSurvey> instead of any\n// for tracking incomplete survey responses.\n/* eslint-disable @typescript-eslint/no-explicit-any /\n\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { Text, useTheme, Stack, Checkbox, Pivot, PivotItem, TextField } from '@fluentui/react';\nimport { _formatString, _getKeys, _pxToRem } from '@internal/acs-ui-common';\nimport { checkboxClassName, questionTextStyle, helperTextStyle, freeFormTextFieldClassName, freeFormTextCheckboxStyles } from './TagsSurvey.styles';\nimport { _AudioIssue, _CallRating, _CallSurvey, _CallSurveyResponse, _OverallIssue, _ScreenshareIssue, _VideoIssue } from '../SurveyTypes';\nimport { SurveyIssuesHeadingStrings, SurveyIssues, CallSurveyImprovementSuggestions } from '../../../types';\n/\r\n Strings of {@link TagsSurvey} that can be overridden.\r\n \r\n @internal\r\n /\nexport interface _TagsSurveyStrings {\n /\r\n Survey question\r\n /\n tagsSurveyQuestion?: string;\n /\r\n Helper text for tag survey explaining what the survey is for\r\n /\n tagsSurveyHelperText?: string;\n /\r\n Default text for free form text field inside tags survey\r\n /\n tagsSurveyTextFieldDefaultText?: string;\n}\n\n/\r\n Survey Issue categories\r\n \r\n @internal\r\n /\nexport type _IssueCategory = 'overallRating' \| 'audioRating' \| 'videoRating' \| 'screenshareRating';\n\n/\r\n Key value pair of survey catogories and corresponding message/issue\r\n \r\n @internal\r\n /\nexport type _SurveyTag = Record<_IssueCategory, {\n message: string;\n issue: _AudioIssue \| _OverallIssue \| _ScreenshareIssue \| _VideoIssue;\n}[]>;\n\n/\r\n Props for {@link TagsSurvey} component.\r\n \r\n @internal\r\n /\nexport interface _TagsSurveyProps {\n /* Mappings from call issues to tags displayed on the survey/\n callIssuesToTag: SurveyIssues;\n /* Mappings from issue category to categories displayed on survey/\n categoryHeadings: SurveyIssuesHeadingStrings;\n /* Function to send TagsSurvey results/\n onConfirm?: (selectedTags: _CallSurvey, improvementSuggestions?: CallSurveyImprovementSuggestions) => void;\n /* show the text field for more info/\n showFreeFormTextField?: boolean;\n /* Tags survey strings /\n strings?: _TagsSurveyStrings;\n}\n\n/\r\n A component to allow users to send numerical ratings regarding call quality\r\n \r\n @internal\r\n */\nexport const _TagsSurvey = (props: _TagsSurveyProps): JSX.Element => {\n const {\n callIssuesToTag,\n categoryHeadings,\n onConfirm,\n strings,\n showFreeFormTextField\n } = props;\n const [selectedTags, setSelectedTags] = useState<_CallSurvey>({});\n const [textResponse, setTextResponse] = useState<CallSurveyImprovementSuggestions>({});\n const [selectedTextResponse, setSelectedTextResponse] = useState<CallSurveyImprovementSuggestions>({});\n const [checkedTextFields, setCheckedTextFields] = useState<_IssueCategory[]>([]);\n const tags: _SurveyTag = useMemo(() => {\n const tags: _SurveyTag = {\n overallRating: [],\n audioRating: [],\n videoRating: [],\n screenshareRating: []\n };\n _getKeys(callIssuesToTag).forEach(issueCategory => {\n _getKeys(callIssuesToTag[issueCategory]).map(issue => {\n const issueCapitalized = issue?.charAt(0).toUpperCase() + issue?.slice(1) as _AudioIssue \| _OverallIssue \| _ScreenshareIssue \| _VideoIssue;\n const issueMessages = callIssuesToTag[issueCategory];\n if (tags[issueCategory]) {\n tags[issueCategory].push({\n message: issueMessages[issue],\n issue: issueCapitalized\n });\n } else {\n tags[issueCategory] = [{\n message: issueMessages[issue],\n issue: issueCapitalized\n }];\n }\n });\n });\n return tags;\n }, [callIssuesToTag]);\n const onChange = React.useCallback((issueCategory: _IssueCategory, checked: boolean, issue?: _AudioIssue \| _OverallIssue \| _ScreenshareIssue \| _VideoIssue): void => {\n if (checked) {\n if (issue) {\n setSelectedTags(prevState => {\n const category = prevState?.[issueCategory];\n if (category && category.issues) {\n category.issues = [category.issues, issue] as any;\n } else {\n prevState[issueCategory] = {\n issues: [issue]\n } as any;\n }\n return prevState;\n });\n } else {\n setCheckedTextFields([...checkedTextFields, issueCategory]);\n setSelectedTextResponse(prevState => {\n prevState[issueCategory] = textResponse[issueCategory];\n return prevState;\n });\n }\n } else {\n if (issue) {\n setSelectedTags(prevState => {\n // 'prevState[issueCategory]?.issues as ...' typing is required here to avoid a typescript limitation\n // \"This expression is not callable\" caused by filter().\n // More information can be found here: https://github.com/microsoft/TypeScript/issues/44373\n const categoryIssues = (prevState[issueCategory]?.issues as (_AudioIssue \| _OverallIssue \| _ScreenshareIssue \| _VideoIssue)[])?.filter((value: _AudioIssue \| _OverallIssue \| _ScreenshareIssue \| _VideoIssue) => value !== issue);\n return {\n ...prevState,\n [issueCategory]: {\n ...(prevState[issueCategory] \|\| {}),\n issues: categoryIssues\n }\n };\n });\n } else {\n setCheckedTextFields(checkedTextFields.filter(id => id !== issueCategory));\n setSelectedTextResponse(prevState => {\n delete prevState[issueCategory];\n return prevState;\n });\n }\n }\n }, [textResponse, checkedTextFields]);\n const theme = useTheme();\n const onRenderLabel = useCallback((issueCategory: _IssueCategory) => {\n return <TextField key={issueCategory} className={freeFormTextFieldClassName} underlined placeholder={strings?.tagsSurveyTextFieldDefaultText} onChange={(e, v) => {\n if (v) {\n setCheckedTextFields([...checkedTextFields, issueCategory]);\n setTextResponse(prevState => {\n prevState[issueCategory] = v;\n return prevState;\n });\n setSelectedTextResponse(prevState => {\n prevState[issueCategory] = v;\n return prevState;\n });\n }\n }} />;\n }, [strings?.tagsSurveyTextFieldDefaultText, checkedTextFields]);\n useEffect(() => {\n if (onConfirm) {\n onConfirm(selectedTags, selectedTextResponse);\n }\n }, [selectedTags, selectedTextResponse, onConfirm]);\n return <>\r\n <Stack verticalAlign=\"center\">\r\n <Text className={questionTextStyle(theme)}>{strings?.tagsSurveyQuestion}</Text>\r\n </Stack>\r\n\r\n <Pivot>\r\n {_getKeys(tags).map((key, i) => {\n return <PivotItem key={`key-${i}`} headerText={categoryHeadings[key]} // Add index signature to allow indexing with a string\n headerButtonProps={{\n 'data-order': i,\n 'data-title': key\n }} alwaysRender>\r\n {tags[key].map((t, i) => {\n return <Checkbox className={checkboxClassName} key={`checkBox_${i}`} label={t.message} onChange={(ev, checked) => onChange(key, checked ?? false, t.issue)} />;\n })}\r\n {showFreeFormTextField && <Checkbox checked={checkedTextFields.includes(key)} styles={freeFormTextCheckboxStyles} onChange={(ev, checked) => onChange(key, checked ?? false)} onRenderLabel={() => {\n return onRenderLabel(key);\n }} />}\r\n </PivotItem>;\n })}\r\n </Pivot>\r\n\r\n <Text className={helperTextStyle(theme)}>{strings?.tagsSurveyHelperText}</Text>\r\n </>;\n};"]}

package/dist/dist-esm/react-components/src/components/Survey/TagsSurvey/TagsSurvey.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TagsSurvey.styles.js","sourceRoot":"","sources":["~~../../../../../../../../~~react-components/src/components/Survey/TagsSurvey/TagsSurvey.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAA0B,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAY,EAAU,EAAE,~~CACxD~~,WAAW,CAAC;~~IACV~~,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;IACxB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;IACnC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;CAC1B,CAAC,CAAC;~~AAEL~~;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAY,EAAU,EAAE,~~CACtD~~,WAAW,CAAC;~~IACV~~,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;IACxB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;CACtC,CAAC,CAAC;~~AAEL~~;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC;IAC3C,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IACpB,WAAW,EAAE,CAAC;CACf,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAA6B;IAClE,IAAI,EAAE;QACJ,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;QAC1B,KAAK,EAAE,MAAM;KACd;IACD,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;KACd;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,WAAW,CAAC;IACpD,KAAK,EAAE,MAAM;IACb,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IACvB,KAAK,EAAE;QACL,OAAO,EAAE,CAAC;KACX;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ICheckboxStyles, Theme, mergeStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/*\n @private\n /\nexport const questionTextStyle = (theme: Theme): string ~~=>\n~~ mergeStyles({\n fontWeight: 600,\n fontSize: _pxToRem(16),\n lineHeight: _pxToRem(20),\n color: theme.palette.neutralPrimary,\n marginTop: _pxToRem(8),\n marginBottom: _pxToRem(4)\n });\n\n/\n @private\n /\nexport const helperTextStyle = (theme: Theme): string ~~=>\n~~ mergeStyles({\n fontWeight: 400,\n fontSize: _pxToRem(12),\n lineHeight: _pxToRem(16),\n marginTop: _pxToRem(4),\n color: theme.palette.neutralSecondary\n });\n\n/\n @private\n /\nexport const checkboxClassName = mergeStyles({\n padding: _pxToRem(8),\n paddingLeft: 0\n});\n\n/\n @private\n /\nexport const freeFormTextCheckboxStyles: Partial<ICheckboxStyles> = {\n root: {\n paddingBottom: _pxToRem(8),\n width: '100%'\n },\n label: {\n width: '100%'\n }\n};\n\n/\n @private\n */\nexport const freeFormTextFieldClassName = mergeStyles({\n width: '100%',\n marginLeft: _pxToRem(4),\n input: {\n padding: 0\n }\n})~~;\n~~"]}
1	+ {"version":3,"file":"TagsSurvey.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/Survey/TagsSurvey/TagsSurvey.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAA0B,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC,WAAW,CAAC;IACrE,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;IACxB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;IACnC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;CAC1B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC,WAAW,CAAC;IACnE,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;IACxB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;CACtC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC;IAC3C,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IACpB,WAAW,EAAE,CAAC;CACf,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAA6B;IAClE,IAAI,EAAE;QACJ,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;QAC1B,KAAK,EAAE,MAAM;KACd;IACD,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;KACd;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,WAAW,CAAC;IACpD,KAAK,EAAE,MAAM;IACb,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IACvB,KAAK,EAAE;QACL,OAAO,EAAE,CAAC;KACX;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ICheckboxStyles, Theme, mergeStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/*\r\n @private\r\n /\nexport const questionTextStyle = (theme: Theme): string => mergeStyles({\n fontWeight: 600,\n fontSize: _pxToRem(16),\n lineHeight: _pxToRem(20),\n color: theme.palette.neutralPrimary,\n marginTop: _pxToRem(8),\n marginBottom: _pxToRem(4)\n});\n\n/\r\n @private\r\n /\nexport const helperTextStyle = (theme: Theme): string => mergeStyles({\n fontWeight: 400,\n fontSize: _pxToRem(12),\n lineHeight: _pxToRem(16),\n marginTop: _pxToRem(4),\n color: theme.palette.neutralSecondary\n});\n\n/\r\n @private\r\n /\nexport const checkboxClassName = mergeStyles({\n padding: _pxToRem(8),\n paddingLeft: 0\n});\n\n/\r\n @private\r\n /\nexport const freeFormTextCheckboxStyles: Partial<ICheckboxStyles> = {\n root: {\n paddingBottom: _pxToRem(8),\n width: '100%'\n },\n label: {\n width: '100%'\n }\n};\n\n/\r\n @private\r\n */\nexport const freeFormTextFieldClassName = mergeStyles({\n width: '100%',\n marginLeft: _pxToRem(4),\n input: {\n padding: 0\n }\n});"]}

package/dist/dist-esm/react-components/src/components/SystemMessage.js CHANGED Viewed

@@ -18,10 +18,12 @@ export const SystemMessage = (props) => {
             setLiveMessage(content);
         });
     }, [content]);
-    return (React.createElement(React.Fragment, null,
+    return React.createElement(React.Fragment, null,
         React.createElement(LiveMessage, { message: liveMessage, ariaLive: "polite", clearOnUnmount: true }),
         React.createElement(Stack, { horizontal: true, className: mergeStyles(props === null || props === void 0 ? void 0 : props.containerStyle), role: "status", "aria-label": content, tabIndex: 0 },
             Icon,
-            React.createElement(Text, { style: { wordBreak: 'break-word' }, variant: 'small' }, content))));
+            React.createElement(Text, { style: {
+                    wordBreak: 'break-word'
+                }, variant: 'small' }, content)));
 };
 //# sourceMappingURL=SystemMessage.js.map

package/dist/dist-esm/react-components/src/components/SystemMessage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SystemMessage.js","sourceRoot":"","sources":["~~../../../../../../~~react-components/src/components/SystemMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC7E,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,OAAO,WAAW,MAAM,yBAAyB,CAAC;AA2BlD;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,~~EAAE~~,QAAQ,~~EAAE~~,OAAO,~~EAAE~~,GAAG,KAAK,CAAC;~~IACpC~~,MAAM,IAAI,GAAgB,oBAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,sBAAsB,CAAC,GAAI,CAAC;IAC3G,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;~~IAEnD~~,SAAS,CAAC,GAAG,EAAE;QACb,kKAAkK;QAClK,mHAAmH;QACnH,UAAU,CAAC,GAAG,EAAE;YACd,cAAc,CAAC,OAAO,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;~~IAEd~~,OAAO~~,CACL~~;~~QACE~~,oBAAC,WAAW,IAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAE,IAAI,GAAI;QAC7E,oBAAC,KAAK,~~IACJ~~,UAAU,~~QACV~~,SAAS,EAAE,WAAW,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAwB,CAAC,~~EACvD~~,IAAI,EAAC,QAAQ,~~gBACD~~,OAAO,~~EACnB~~,QAAQ,EAAE,CAAC;~~YAEV~~,IAAI;YACL,oBAAC,IAAI,IAAC,KAAK,EAAE,~~EAAE,~~SAAS,EAAE,YAAY,EAAE,~~EAAE,~~OAAO,EAAE,OAAO,~~IACvD~~,OAAO,CACH,CACD,CACP,~~CACJ,~~CAAC;~~AACJ~~,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, FontIcon, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useState } from 'react';\nimport { systemMessageIconStyle } from './styles/SystemMessage.styles';\nimport { ComponentSlotStyle } from '../types';\nimport LiveMessage from './Announcer/LiveMessage';\n\n/*\n Todo: We need to add more types of system messages that we support.\n \n @private\n /\nexport type SystemMessageIconTypes = 'PeopleAdd' \| 'PeopleBlock' \| 'Edit';\n\n/\n @private\n /\nexport type SystemMessageProps = {\n /\n Icon name for the system message.\n /\n iconName: SystemMessageIconTypes;\n /\n Content string for the system message.\n /\n content: string;\n /\n * Custom CSS Style for the system message container.\n /\n containerStyle?: ComponentSlotStyle;\n};\n\n/\n @private\n */\nexport const SystemMessage = (props: SystemMessageProps): JSX.Element => {\n const { iconName, content } = props;\n const Icon: JSX.Element = <FontIcon iconName={iconName} className={mergeStyles(systemMessageIconStyle)} />;\n const [liveMessage, setLiveMessage] = useState('');\n\n useEffect(() => {\n // Timeout is needed to handle situation when the same user joins and leaves a chat a few times in a row, otherwise Narrator won't repeat the system message text.\n // Because delay value is not provided, setMessage function will be executed asynchronously in the next event cycle\n setTimeout(() => {\n setLiveMessage(content);\n });\n }, [content]);\n\n return (\n ~~<>\n~~ <LiveMessage message={liveMessage} ariaLive=\"polite\" clearOnUnmount={true} />\n <Stack\n horizontal\n className={mergeStyles(props?.containerStyle as IStyle)}\n role=\"status\"\n aria-label={content}\n tabIndex={0}\n ~~>\n~~ {Icon}\n <Text style={{ wordBreak: 'break-word' }} variant={'small'}>\n {content}\n </Text>\n </Stack>\n ~~</>\~~n ~~);\n~~}~~;\n~~"]}
1	+ {"version":3,"file":"SystemMessage.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/SystemMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC7E,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,OAAO,WAAW,MAAM,yBAAyB,CAAC;AA2BlD;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EACJ,QAAQ,EACR,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,IAAI,GAAgB,oBAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,sBAAsB,CAAC,GAAI,CAAC;IAC3G,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,SAAS,CAAC,GAAG,EAAE;QACb,kKAAkK;QAClK,mHAAmH;QACnH,UAAU,CAAC,GAAG,EAAE;YACd,cAAc,CAAC,OAAO,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACd,OAAO;QACH,oBAAC,WAAW,IAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAE,IAAI,GAAI;QAC7E,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAwB,CAAC,EAAE,IAAI,EAAC,QAAQ,gBAAa,OAAO,EAAE,QAAQ,EAAE,CAAC;YACtH,IAAI;YACL,oBAAC,IAAI,IAAC,KAAK,EAAE;oBACb,SAAS,EAAE,YAAY;iBACxB,EAAE,OAAO,EAAE,OAAO,IACd,OAAO,CACH,CACD,CACP,CAAC;AACR,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, FontIcon, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useState } from 'react';\nimport { systemMessageIconStyle } from './styles/SystemMessage.styles';\nimport { ComponentSlotStyle } from '../types';\nimport LiveMessage from './Announcer/LiveMessage';\n\n/*\r\n Todo: We need to add more types of system messages that we support.\r\n \r\n @private\r\n /\nexport type SystemMessageIconTypes = 'PeopleAdd' \| 'PeopleBlock' \| 'Edit';\n\n/\r\n @private\r\n /\nexport type SystemMessageProps = {\n /\r\n Icon name for the system message.\r\n /\n iconName: SystemMessageIconTypes;\n /\r\n Content string for the system message.\r\n /\n content: string;\n /\r\n * Custom CSS Style for the system message container.\r\n /\n containerStyle?: ComponentSlotStyle;\n};\n\n/\r\n @private\r\n */\nexport const SystemMessage = (props: SystemMessageProps): JSX.Element => {\n const {\n iconName,\n content\n } = props;\n const Icon: JSX.Element = <FontIcon iconName={iconName} className={mergeStyles(systemMessageIconStyle)} />;\n const [liveMessage, setLiveMessage] = useState('');\n useEffect(() => {\n // Timeout is needed to handle situation when the same user joins and leaves a chat a few times in a row, otherwise Narrator won't repeat the system message text.\n // Because delay value is not provided, setMessage function will be executed asynchronously in the next event cycle\n setTimeout(() => {\n setLiveMessage(content);\n });\n }, [content]);\n return <>\r\n <LiveMessage message={liveMessage} ariaLive=\"polite\" clearOnUnmount={true} />\r\n <Stack horizontal className={mergeStyles(props?.containerStyle as IStyle)} role=\"status\" aria-label={content} tabIndex={0}>\r\n {Icon}\r\n <Text style={{\n wordBreak: 'break-word'\n }} variant={'small'}>\r\n {content}\r\n </Text>\r\n </Stack>\r\n </>;\n};"]}

package/dist/dist-esm/react-components/src/components/TogetherModeOverlay.js CHANGED Viewed

@@ -28,17 +28,13 @@ export const TogetherModeOverlay = memo((props) => {
      */
     const updatedParticipantStatus = useMemo(() => {
         const allParticipants = [...remoteParticipants, localParticipant];
-        const participantsWithVideoAvailable = allParticipants.filter((p) => { var _a; return ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && togetherModeSeatPositions[p.userId]; });
+        const participantsWithVideoAvailable = allParticipants.filter(p => { var _a; return ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && togetherModeSeatPositions[p.userId]; });
         const updatedSignals = {};
         for (const p of participantsWithVideoAvailable) {
             const { userId, reaction, raisedHand, spotlight, isMuted } = p;
             const seatingPosition = togetherModeSeatPositions[userId];
             const isLocalParticipant = p.userId === localParticipant.userId;
-            const displayName = p.displayName
-                ? p.displayName
-                : isLocalParticipant
-                    ? locale.strings.videoGallery.localVideoLabel
-                    : locale.strings.videoGallery.displayNamePlaceholder;
+            const displayName = p.displayName ? p.displayName : isLocalParticipant ? locale.strings.videoGallery.localVideoLabel : locale.strings.videoGallery.displayNamePlaceholder;
             if (seatingPosition) {
                 updatedSignals[userId] = {
                     id: userId,
@@ -54,51 +50,45 @@ export const TogetherModeOverlay = memo((props) => {
             }
         }
         // This is used to remove the participants bounding box from the DOM when they are no longer in the stream
-        const participantsNotInTogetherModeStream = Object.keys(togetherModeParticipantStatus).filter((id) => !updatedSignals[id]);
+        const participantsNotInTogetherModeStream = Object.keys(togetherModeParticipantStatus).filter(id => !updatedSignals[id]);
         const newSignals = Object.assign(Object.assign({}, togetherModeParticipantStatus), updatedSignals);
-        participantsNotInTogetherModeStream.forEach((id) => {
+        participantsNotInTogetherModeStream.forEach(id => {
             delete newSignals[id];
         });
-        const hasSignalingChange = Object.keys(newSignals).some((key) => JSON.stringify(newSignals[key]) !== JSON.stringify(togetherModeParticipantStatus[key]));
+        const hasSignalingChange = Object.keys(newSignals).some(key => JSON.stringify(newSignals[key]) !== JSON.stringify(togetherModeParticipantStatus[key]));
         const updateTogetherModeParticipantStatusState = hasSignalingChange || Object.keys(newSignals).length !== Object.keys(togetherModeParticipantStatus).length;
         return updateTogetherModeParticipantStatusState ? newSignals : togetherModeParticipantStatus;
-    }, [
-        remoteParticipants,
-        localParticipant,
-        togetherModeParticipantStatus,
-        togetherModeSeatPositions,
-        reactionResources,
-        locale.strings.videoGallery.localVideoLabel,
-        locale.strings.videoGallery.displayNamePlaceholder,
-        hoveredParticipantID
-    ]);
+    }, [remoteParticipants, localParticipant, togetherModeParticipantStatus, togetherModeSeatPositions, reactionResources, locale.strings.videoGallery.localVideoLabel, locale.strings.videoGallery.displayNamePlaceholder, hoveredParticipantID]);
     useEffect(() => {
         if (hoveredParticipantID && !updatedParticipantStatus[hoveredParticipantID]) {
             setHoveredParticipantID('');
         }
         setTogetherModeParticipantStatus(updatedParticipantStatus);
     }, [hoveredParticipantID, updatedParticipantStatus]);
-    return (React.createElement("div", { style: { position: 'absolute', width: '100%', height: '100%', overflow: 'hidden' } }, Object.values(togetherModeParticipantStatus).map((participantStatus) => {
+    return React.createElement("div", { style: {
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            overflow: 'hidden'
+        } }, Object.values(togetherModeParticipantStatus).map(participantStatus => {
         var _a, _b;
-        return participantStatus.id && (React.createElement("div", { key: participantStatus.id, "data-ui-id": `together-mode-participant-${participantStatus.id}`, style: Object.assign({}, getTogetherModeParticipantOverlayStyle(participantStatus.seatPositionStyle)), onMouseEnter: () => setHoveredParticipantID(participantStatus.id), onMouseLeave: () => setHoveredParticipantID('') },
+        return participantStatus.id && React.createElement("div", { key: participantStatus.id, "data-ui-id": `together-mode-participant-${participantStatus.id}`, style: Object.assign({}, getTogetherModeParticipantOverlayStyle(participantStatus.seatPositionStyle)), onMouseEnter: () => setHoveredParticipantID(participantStatus.id), onMouseLeave: () => setHoveredParticipantID('') },
             React.createElement("div", null,
-                participantStatus.showDisplayName && (React.createElement("div", { style: Object.assign({}, participantStatusTransitionStyle) },
+                participantStatus.showDisplayName && React.createElement("div", { style: Object.assign({}, participantStatusTransitionStyle) },
                     React.createElement("div", { style: Object.assign({}, togetherModeParticipantStatusContainer(callingPalette.videoTileLabelBackgroundLight, theme.effects.roundedCorner4)) },
                         participantStatus.isHandRaised && React.createElement(RaisedHandIcon, null),
-                        participantStatus.showDisplayName && (React.createElement(Text, { style: Object.assign({}, togetherModeParticipantDisplayName(hoveredParticipantID === participantStatus.id, parseFloat(participantStatus.seatPositionStyle.seatPosition.width), participantStatus.displayName ? theme.palette.neutralSecondary : 'inherit')) }, participantStatus.displayName)),
-                        participantStatus.isMuted && (React.createElement(Stack, { className: mergeStyles(togetherModeIconStyle) },
-                            React.createElement(Icon, { iconName: "VideoTileMicOff" }))),
-                        participantStatus.isSpotlighted && (React.createElement(Stack, { className: mergeStyles(togetherModeIconStyle) },
-                            React.createElement(Icon, { iconName: "VideoTileSpotlighted" })))))),
-                ((_a = participantStatus.reaction) === null || _a === void 0 ? void 0 : _a.reactionType) && (
-                // First div - Section that fixes the travel height and applies the movement animation
-                // Second div - Responsible for ensuring the sprite emoji is always centered in the participant seat position
-                // Third div - Play Animation as the other animation applies on the base play animation for the sprite
-                React.createElement("div", { style: moveAnimationStyles(parseFloat(participantStatus.seatPositionStyle.seatPosition.height) *
-                        REACTION_MAX_TRAVEL_HEIGHT, parseFloat(participantStatus.seatPositionStyle.seatPosition.height) * REACTION_TRAVEL_HEIGHT) },
-                    React.createElement("div", { "data-ui-id": `together-mode-participant-reaction-${participantStatus.id}`, style: Object.assign({}, togetherModeParticipantEmojiSpriteStyle(emojiSize, participantStatus.scaledSize || 1, participantStatus.seatPositionStyle.seatPosition.width)) },
-                        React.createElement("div", { style: spriteAnimationStyles(REACTION_NUMBER_OF_ANIMATION_FRAMES, participantStatus.scaledSize || 1, (_b = (participantStatus.reaction &&
-                                getEmojiResource(participantStatus === null || participantStatus === void 0 ? void 0 : participantStatus.reaction.reactionType, reactionResources))) !== null && _b !== void 0 ? _b : '') })))))));
-    })));
+                        participantStatus.showDisplayName && React.createElement(Text, { style: Object.assign({}, togetherModeParticipantDisplayName(hoveredParticipantID === participantStatus.id, parseFloat(participantStatus.seatPositionStyle.seatPosition.width), participantStatus.displayName ? theme.palette.neutralSecondary : 'inherit')) }, participantStatus.displayName),
+                        participantStatus.isMuted && React.createElement(Stack, { className: mergeStyles(togetherModeIconStyle) },
+                            React.createElement(Icon, { iconName: "VideoTileMicOff" })),
+                        participantStatus.isSpotlighted && React.createElement(Stack, { className: mergeStyles(togetherModeIconStyle) },
+                            React.createElement(Icon, { iconName: "VideoTileSpotlighted" })))),
+                ((_a = participantStatus.reaction) === null || _a === void 0 ? void 0 : _a.reactionType) &&
+                    // First div - Section that fixes the travel height and applies the movement animation
+                    // Second div - Responsible for ensuring the sprite emoji is always centered in the participant seat position
+                    // Third div - Play Animation as the other animation applies on the base play animation for the sprite
+                    React.createElement("div", { style: moveAnimationStyles(parseFloat(participantStatus.seatPositionStyle.seatPosition.height) * REACTION_MAX_TRAVEL_HEIGHT, parseFloat(participantStatus.seatPositionStyle.seatPosition.height) * REACTION_TRAVEL_HEIGHT) },
+                        React.createElement("div", { "data-ui-id": `together-mode-participant-reaction-${participantStatus.id}`, style: Object.assign({}, togetherModeParticipantEmojiSpriteStyle(emojiSize, participantStatus.scaledSize || 1, participantStatus.seatPositionStyle.seatPosition.width)) },
+                            React.createElement("div", { style: spriteAnimationStyles(REACTION_NUMBER_OF_ANIMATION_FRAMES, participantStatus.scaledSize || 1, (_b = (participantStatus.reaction && getEmojiResource(participantStatus === null || participantStatus === void 0 ? void 0 : participantStatus.reaction.reactionType, reactionResources))) !== null && _b !== void 0 ? _b : '') })))));
+    }));
 });
 //# sourceMappingURL=TogetherModeOverlay.js.map

package/dist/dist-esm/react-components/src/components/TogetherModeOverlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TogetherModeOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/TogetherModeOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo, useState, memo, useEffect } from 'react';\nimport {\n Reaction,\n ReactionResources,\n VideoGalleryTogetherModeParticipantPosition,\n VideoGalleryLocalParticipant,\n VideoGalleryRemoteParticipant\n} from '../types';\nimport { moveAnimationStyles, spriteAnimationStyles } from './styles/ReactionOverlay.style';\nimport { REACTION_NUMBER_OF_ANIMATION_FRAMES } from './VideoGallery/utils/reactionUtils';\nimport { Icon, mergeStyles, Stack, Text } from '@fluentui/react';\nimport { getEmojiResource } from './VideoGallery/utils/videoGalleryLayoutUtils';\nimport { useLocale } from '../localization';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport {\n calculateScaledSize,\n getTogetherModeParticipantOverlayStyle,\n participantStatusTransitionStyle,\n REACTION_MAX_TRAVEL_HEIGHT,\n REACTION_TRAVEL_HEIGHT,\n setTogetherModeSeatPositionStyle,\n togetherModeIconStyle,\n togetherModeParticipantDisplayName,\n togetherModeParticipantEmojiSpriteStyle,\n togetherModeParticipantStatusContainer,\n TogetherModeSeatStyle\n} from './styles/TogetherMode.styles';\nimport { CallingTheme, useTheme } from '../theming';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/*\n Signaling action overlay component props\n * @internal\n /\ntype TogetherModeParticipantStatus = {\n reaction?: Reaction;\n scaledSize?: number;\n isHandRaised?: boolean;\n isSpotlighted?: boolean;\n isMuted?: boolean;\n id: string;\n seatPositionStyle: TogetherModeSeatStyle;\n displayName: string;\n showDisplayName: boolean;\n};\n\n/\n TogetherModeOverlay component renders an empty JSX element.\n \n @returns {JSX.Element} An empty JSX element.\n /\nexport const TogetherModeOverlay = memo(\n (props: {\n emojiSize: number;\n reactionResources: ReactionResources;\n localParticipant: VideoGalleryLocalParticipant;\n remoteParticipants: VideoGalleryRemoteParticipant[];\n togetherModeSeatPositions: VideoGalleryTogetherModeParticipantPosition;\n }) => {\n const locale = useLocale();\n const theme = useTheme();\n const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n const { emojiSize, reactionResources, remoteParticipants, localParticipant, togetherModeSeatPositions } = props;\n const [togetherModeParticipantStatus, setTogetherModeParticipantStatus] = useState<{\n [key: string]: TogetherModeParticipantStatus;\n }>({});\n const [hoveredParticipantID, setHoveredParticipantID] = useState('');\n\n /\n * The useMemo hook is used to calculate the participant status for the Together Mode overlay.\n * It updates the togetherModeParticipantStatus state when there's a change in the remoteParticipants, localParticipant,\n * raisedHand, spotlight, isMuted, displayName, or hoveredParticipantID.\n /\n const updatedParticipantStatus = useMemo(() => {\n const allParticipants = [...remoteParticipants, localParticipant];\n\n const participantsWithVideoAvailable = allParticipants.filter(\n (p) => p.videoStream?.isAvailable && togetherModeSeatPositions[p.userId]\n );\n\n const updatedSignals: { [key: string]: TogetherModeParticipantStatus } = {};\n for (const p of participantsWithVideoAvailable) {\n const { userId, reaction, raisedHand, spotlight, isMuted } = p;\n const seatingPosition = togetherModeSeatPositions[userId];\n const isLocalParticipant = p.userId === localParticipant.userId;\n const displayName = p.displayName\n ? p.displayName\n : isLocalParticipant\n ? locale.strings.videoGallery.localVideoLabel\n : locale.strings.videoGallery.displayNamePlaceholder;\n if (seatingPosition) {\n updatedSignals[userId] = {\n id: userId,\n reaction: reactionResources && reaction,\n isHandRaised: !!raisedHand,\n isSpotlighted: !!spotlight,\n isMuted,\n displayName: displayName \|\| locale.strings.videoGallery.displayNamePlaceholder,\n showDisplayName: !!(spotlight \|\| raisedHand \|\| hoveredParticipantID === userId),\n scaledSize: calculateScaledSize(seatingPosition.width, seatingPosition.height),\n seatPositionStyle: setTogetherModeSeatPositionStyle(seatingPosition)\n };\n }\n }\n\n // This is used to remove the participants bounding box from the DOM when they are no longer in the stream\n const participantsNotInTogetherModeStream = Object.keys(togetherModeParticipantStatus).filter(\n (id) => !updatedSignals[id]\n );\n\n const newSignals = { ...togetherModeParticipantStatus, ...updatedSignals };\n\n participantsNotInTogetherModeStream.forEach((id) => {\n delete newSignals[id];\n });\n\n const hasSignalingChange = Object.keys(newSignals).some(\n (key) => JSON.stringify(newSignals[key]) !== JSON.stringify(togetherModeParticipantStatus[key])\n );\n\n const updateTogetherModeParticipantStatusState =\n hasSignalingChange \|\| Object.keys(newSignals).length !== Object.keys(togetherModeParticipantStatus).length;\n return updateTogetherModeParticipantStatusState ? newSignals : togetherModeParticipantStatus;\n }, [\n remoteParticipants,\n localParticipant,\n togetherModeParticipantStatus,\n togetherModeSeatPositions,\n reactionResources,\n locale.strings.videoGallery.localVideoLabel,\n locale.strings.videoGallery.displayNamePlaceholder,\n hoveredParticipantID\n ]);\n\n useEffect(() => {\n if (hoveredParticipantID && !updatedParticipantStatus[hoveredParticipantID]) {\n setHoveredParticipantID('');\n }\n\n setTogetherModeParticipantStatus(updatedParticipantStatus);\n }, [hoveredParticipantID, updatedParticipantStatus]);\n\n return (\n <div style={{ position: 'absolute', width: '100%', height: '100%', overflow: 'hidden' }}>\n {Object.values(togetherModeParticipantStatus).map(\n (participantStatus) =>\n participantStatus.id && (\n <div\n key={participantStatus.id}\n data-ui-id={`together-mode-participant-${participantStatus.id}`}\n style={{\n ...getTogetherModeParticipantOverlayStyle(participantStatus.seatPositionStyle)\n }}\n onMouseEnter={() => setHoveredParticipantID(participantStatus.id)}\n onMouseLeave={() => setHoveredParticipantID('')}\n >\n <div>\n {participantStatus.showDisplayName && (\n <div style={{ ...participantStatusTransitionStyle }}>\n <div\n style={{\n ...togetherModeParticipantStatusContainer(\n callingPalette.videoTileLabelBackgroundLight,\n theme.effects.roundedCorner4\n )\n }}\n >\n {participantStatus.isHandRaised && <RaisedHandIcon />}\n {participantStatus.showDisplayName && (\n <Text\n style={{\n ...togetherModeParticipantDisplayName(\n hoveredParticipantID === participantStatus.id,\n parseFloat(participantStatus.seatPositionStyle.seatPosition.width),\n participantStatus.displayName ? theme.palette.neutralSecondary : 'inherit'\n )\n }}\n >\n {participantStatus.displayName}\n </Text>\n )}\n {participantStatus.isMuted && (\n <Stack className={mergeStyles(togetherModeIconStyle)}>\n <Icon iconName=\"VideoTileMicOff\" />\n </Stack>\n )}\n {participantStatus.isSpotlighted && (\n <Stack className={mergeStyles(togetherModeIconStyle)}>\n <Icon iconName=\"VideoTileSpotlighted\" />\n </Stack>\n )}\n </div>\n </div>\n )}\n\n {participantStatus.reaction?.reactionType && (\n // First div - Section that fixes the travel height and applies the movement animation\n // Second div - Responsible for ensuring the sprite emoji is always centered in the participant seat position\n // Third div - Play Animation as the other animation applies on the base play animation for the sprite\n <div\n style={moveAnimationStyles(\n parseFloat(participantStatus.seatPositionStyle.seatPosition.height) \n REACTION_MAX_TRAVEL_HEIGHT,\n parseFloat(participantStatus.seatPositionStyle.seatPosition.height) * REACTION_TRAVEL_HEIGHT\n )}\n >\n <div\n data-ui-id={`together-mode-participant-reaction-${participantStatus.id}`}\n style={{\n ...togetherModeParticipantEmojiSpriteStyle(\n emojiSize,\n participantStatus.scaledSize \|\| 1,\n participantStatus.seatPositionStyle.seatPosition.width\n )\n }}\n >\n <div\n style={spriteAnimationStyles(\n REACTION_NUMBER_OF_ANIMATION_FRAMES,\n participantStatus.scaledSize \|\| 1,\n (participantStatus.reaction &&\n getEmojiResource(participantStatus?.reaction.reactionType, reactionResources)) ??\n ''\n )}\n />\n </div>\n </div>\n )}\n </div>\n </div>\n )\n )}\n </div>\n );\n }\n);\n"]}
1	+ {"version":3,"file":"TogetherModeOverlay.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/TogetherModeOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo, useState, memo, useEffect } from 'react';\nimport { Reaction, ReactionResources, VideoGalleryTogetherModeParticipantPosition, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../types';\nimport { moveAnimationStyles, spriteAnimationStyles } from './styles/ReactionOverlay.style';\nimport { REACTION_NUMBER_OF_ANIMATION_FRAMES } from './VideoGallery/utils/reactionUtils';\nimport { Icon, mergeStyles, Stack, Text } from '@fluentui/react';\nimport { getEmojiResource } from './VideoGallery/utils/videoGalleryLayoutUtils';\nimport { useLocale } from '../localization';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { calculateScaledSize, getTogetherModeParticipantOverlayStyle, participantStatusTransitionStyle, REACTION_MAX_TRAVEL_HEIGHT, REACTION_TRAVEL_HEIGHT, setTogetherModeSeatPositionStyle, togetherModeIconStyle, togetherModeParticipantDisplayName, togetherModeParticipantEmojiSpriteStyle, togetherModeParticipantStatusContainer, TogetherModeSeatStyle } from './styles/TogetherMode.styles';\nimport { CallingTheme, useTheme } from '../theming';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/*\r\n Signaling action overlay component props\r\n * @internal\r\n /\ntype TogetherModeParticipantStatus = {\n reaction?: Reaction;\n scaledSize?: number;\n isHandRaised?: boolean;\n isSpotlighted?: boolean;\n isMuted?: boolean;\n id: string;\n seatPositionStyle: TogetherModeSeatStyle;\n displayName: string;\n showDisplayName: boolean;\n};\n\n/\r\n TogetherModeOverlay component renders an empty JSX element.\r\n \r\n @returns {JSX.Element} An empty JSX element.\r\n /\nexport const TogetherModeOverlay = memo((props: {\n emojiSize: number;\n reactionResources: ReactionResources;\n localParticipant: VideoGalleryLocalParticipant;\n remoteParticipants: VideoGalleryRemoteParticipant[];\n togetherModeSeatPositions: VideoGalleryTogetherModeParticipantPosition;\n}) => {\n const locale = useLocale();\n const theme = useTheme();\n const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n const {\n emojiSize,\n reactionResources,\n remoteParticipants,\n localParticipant,\n togetherModeSeatPositions\n } = props;\n const [togetherModeParticipantStatus, setTogetherModeParticipantStatus] = useState<{\n [key: string]: TogetherModeParticipantStatus;\n }>({});\n const [hoveredParticipantID, setHoveredParticipantID] = useState('');\n\n /\r\n * The useMemo hook is used to calculate the participant status for the Together Mode overlay.\r\n * It updates the togetherModeParticipantStatus state when there's a change in the remoteParticipants, localParticipant,\r\n * raisedHand, spotlight, isMuted, displayName, or hoveredParticipantID.\r\n /\n const updatedParticipantStatus = useMemo(() => {\n const allParticipants = [...remoteParticipants, localParticipant];\n const participantsWithVideoAvailable = allParticipants.filter(p => p.videoStream?.isAvailable && togetherModeSeatPositions[p.userId]);\n const updatedSignals: {\n [key: string]: TogetherModeParticipantStatus;\n } = {};\n for (const p of participantsWithVideoAvailable) {\n const {\n userId,\n reaction,\n raisedHand,\n spotlight,\n isMuted\n } = p;\n const seatingPosition = togetherModeSeatPositions[userId];\n const isLocalParticipant = p.userId === localParticipant.userId;\n const displayName = p.displayName ? p.displayName : isLocalParticipant ? locale.strings.videoGallery.localVideoLabel : locale.strings.videoGallery.displayNamePlaceholder;\n if (seatingPosition) {\n updatedSignals[userId] = {\n id: userId,\n reaction: reactionResources && reaction,\n isHandRaised: !!raisedHand,\n isSpotlighted: !!spotlight,\n isMuted,\n displayName: displayName \|\| locale.strings.videoGallery.displayNamePlaceholder,\n showDisplayName: !!(spotlight \|\| raisedHand \|\| hoveredParticipantID === userId),\n scaledSize: calculateScaledSize(seatingPosition.width, seatingPosition.height),\n seatPositionStyle: setTogetherModeSeatPositionStyle(seatingPosition)\n };\n }\n }\n\n // This is used to remove the participants bounding box from the DOM when they are no longer in the stream\n const participantsNotInTogetherModeStream = Object.keys(togetherModeParticipantStatus).filter(id => !updatedSignals[id]);\n const newSignals = {\n ...togetherModeParticipantStatus,\n ...updatedSignals\n };\n participantsNotInTogetherModeStream.forEach(id => {\n delete newSignals[id];\n });\n const hasSignalingChange = Object.keys(newSignals).some(key => JSON.stringify(newSignals[key]) !== JSON.stringify(togetherModeParticipantStatus[key]));\n const updateTogetherModeParticipantStatusState = hasSignalingChange \|\| Object.keys(newSignals).length !== Object.keys(togetherModeParticipantStatus).length;\n return updateTogetherModeParticipantStatusState ? newSignals : togetherModeParticipantStatus;\n }, [remoteParticipants, localParticipant, togetherModeParticipantStatus, togetherModeSeatPositions, reactionResources, locale.strings.videoGallery.localVideoLabel, locale.strings.videoGallery.displayNamePlaceholder, hoveredParticipantID]);\n useEffect(() => {\n if (hoveredParticipantID && !updatedParticipantStatus[hoveredParticipantID]) {\n setHoveredParticipantID('');\n }\n setTogetherModeParticipantStatus(updatedParticipantStatus);\n }, [hoveredParticipantID, updatedParticipantStatus]);\n return <div style={{\n position: 'absolute',\n width: '100%',\n height: '100%',\n overflow: 'hidden'\n }}>\r\n {Object.values(togetherModeParticipantStatus).map(participantStatus => participantStatus.id && <div key={participantStatus.id} data-ui-id={`together-mode-participant-${participantStatus.id}`} style={{\n ...getTogetherModeParticipantOverlayStyle(participantStatus.seatPositionStyle)\n }} onMouseEnter={() => setHoveredParticipantID(participantStatus.id)} onMouseLeave={() => setHoveredParticipantID('')}>\r\n <div>\r\n {participantStatus.showDisplayName && <div style={{\n ...participantStatusTransitionStyle\n }}>\r\n <div style={{\n ...togetherModeParticipantStatusContainer(callingPalette.videoTileLabelBackgroundLight, theme.effects.roundedCorner4)\n }}>\r\n {participantStatus.isHandRaised && <RaisedHandIcon />}\r\n {participantStatus.showDisplayName && <Text style={{\n ...togetherModeParticipantDisplayName(hoveredParticipantID === participantStatus.id, parseFloat(participantStatus.seatPositionStyle.seatPosition.width), participantStatus.displayName ? theme.palette.neutralSecondary : 'inherit')\n }}>\r\n {participantStatus.displayName}\r\n </Text>}\r\n {participantStatus.isMuted && <Stack className={mergeStyles(togetherModeIconStyle)}>\r\n <Icon iconName=\"VideoTileMicOff\" />\r\n </Stack>}\r\n {participantStatus.isSpotlighted && <Stack className={mergeStyles(togetherModeIconStyle)}>\r\n <Icon iconName=\"VideoTileSpotlighted\" />\r\n </Stack>}\r\n </div>\r\n </div>}\r\n\r\n {participantStatus.reaction?.reactionType &&\n // First div - Section that fixes the travel height and applies the movement animation\n // Second div - Responsible for ensuring the sprite emoji is always centered in the participant seat position\n // Third div - Play Animation as the other animation applies on the base play animation for the sprite\n <div style={moveAnimationStyles(parseFloat(participantStatus.seatPositionStyle.seatPosition.height) REACTION_MAX_TRAVEL_HEIGHT, parseFloat(participantStatus.seatPositionStyle.seatPosition.height) * REACTION_TRAVEL_HEIGHT)}>\r\n <div data-ui-id={`together-mode-participant-reaction-${participantStatus.id}`} style={{\n ...togetherModeParticipantEmojiSpriteStyle(emojiSize, participantStatus.scaledSize \|\| 1, participantStatus.seatPositionStyle.seatPosition.width)\n }}>\r\n <div style={spriteAnimationStyles(REACTION_NUMBER_OF_ANIMATION_FRAMES, participantStatus.scaledSize \|\| 1, (participantStatus.reaction && getEmojiResource(participantStatus?.reaction.reactionType, reactionResources)) ?? '')} />\r\n </div>\r\n </div>}\r\n </div>\r\n </div>)}\r\n </div>;\n});"]}

package/dist/dist-esm/react-components/src/components/TroubleshootingGuideErrorBar.js CHANGED Viewed

@@ -25,23 +25,23 @@ export const _TroubleshootingGuideErrorBar = (props) => {
     // Without this behaviour, this `useEffect` block would cause a render loop.
     useEffect(() => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)), [props.activeErrorMessages, dismissedErrors]);
     const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);
-    return (React.createElement(Stack, { "data-ui-id": "notifications-stack" }, toShow.map((error, i) => {
-        const devicePermissionErrorBar = (React.createElement("div", null,
+    return React.createElement(Stack, { "data-ui-id": "notifications-stack" }, toShow.map((error, i) => {
+        const devicePermissionErrorBar = React.createElement("div", null,
             strings[error.type],
             ' ',
-            onPermissionsTroubleshootingClick && (React.createElement(Link, { onClick: () => {
+            onPermissionsTroubleshootingClick && React.createElement(Link, { onClick: () => {
                     onPermissionsTroubleshootingClick(permissionsState);
                 } },
-                React.createElement("span", { className: messageBarLinkStyles(theme, true) }, troubleshootingGuideStrings.devicePermissionLinkText)))));
-        const networkErrorBar = (React.createElement("div", null,
+                React.createElement("span", { className: messageBarLinkStyles(theme, true) }, troubleshootingGuideStrings.devicePermissionLinkText)));
+        const networkErrorBar = React.createElement("div", null,
             strings[error.type],
             ' ',
-            onNetworkingTroubleshootingClick && (React.createElement(Link, { onClick: onNetworkingTroubleshootingClick, underline: true },
-                React.createElement("span", { className: messageBarLinkStyles(theme, true) }, troubleshootingGuideStrings.networkTroubleshootingLinkText)))));
-        return (React.createElement(MessageBar, Object.assign({}, props, { styles: messageBarStyle(theme, messageBarType(error.type)), key: `${error.type} ${i}`, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), actions: React.createElement(MessageBarButton, { text: troubleshootingGuideStrings.dismissButtonText, styles: dismissButtonStyle(theme), onClick: () => {
+            onNetworkingTroubleshootingClick && React.createElement(Link, { onClick: onNetworkingTroubleshootingClick, underline: true },
+                React.createElement("span", { className: messageBarLinkStyles(theme, true) }, troubleshootingGuideStrings.networkTroubleshootingLinkText)));
+        return React.createElement(MessageBar, Object.assign({}, props, { styles: messageBarStyle(theme, messageBarType(error.type)), key: `${error.type} ${i}`, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), actions: React.createElement(MessageBarButton, { text: troubleshootingGuideStrings.dismissButtonText, styles: dismissButtonStyle(theme), onClick: () => {
                     setDismissedErrors(dismissError(dismissedErrors, error));
-                }, ariaLabel: troubleshootingGuideStrings.dismissButtonText }), isMultiline: false, "aria-role": "alert", "aria-live": "assertive" }), showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)));
-    })));
+                }, ariaLabel: troubleshootingGuideStrings.dismissButtonText }), isMultiline: false, "aria-role": "alert", "aria-live": "assertive" }), showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar));
+    }));
 };
 const showErrorBar = (errorType, devicePermissionErrorBar, networkErrorBar) => {
     if (errorType === 'callNetworkQualityLow') {

package/dist/dist-esm/react-components/src/components/TroubleshootingGuideErrorBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TroubleshootingGuideErrorBar.js","sourceRoot":"","sources":["~~../../../../../../~~react-components/src/components/TroubleshootingGuideErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AACnG,OAAO,~~EAEL~~,YAAY,~~EACZ~~,+BAA+B,~~EAC/B~~,YAAY,~~EACZ~~,mBAAmB,~~EACnB~~,cAAc,~~EACf~~,MAAM,SAAS,CAAC;~~AACjB~~,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AA+DtE;;;GAGG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAAyC,EAAe,EAAE;;IACtG,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,oBAAoB;IACpB,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;IACnD,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,aAAa,CAAC;~~IAE~~/C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;~~IAE7E~~,MAAM,EACJ,iCAAiC,EACjC,gCAAgC,EAChC,gBAAgB,GAAG;QACjB,MAAM,EAAE,QAAQ;QAChB,UAAU,EAAE,QAAQ;KACrB,EACD,2BAA2B,EAC5B,GAAG,KAAK,CAAC;IAEV,mGAAmG;IACnG,4EAA4E;IAC5E,SAAS,~~CACP~~,GAAG,EAAE,CAAC,kBAAkB,CAAC,+BAA+B,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC,~~EACrG~~,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,~~CAC7C~~,CAAC;~~IAEF~~,MAAM,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;~~IAExE~~,OAAO,~~CACL,~~oBAAC,KAAK,kBAAY,qBAAqB,~~IACpC~~,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;~~QACvB~~,MAAM,wBAAwB,GAAG~~,CAC/B~~;~~YACG~~,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC;YAAE,GAAG;YACxB,iCAAiC,IAAI,~~CACpC,~~oBAAC,IAAI,~~IACH~~,OAAO,EAAE,GAAG,EAAE;~~oBACZ~~,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;gBACtD,CAAC;~~gBAED~~,8BAAM,SAAS,EAAE,oBAAoB,CAAC,KAAK,EAAE,IAAI,CAAC,IAC/C,2BAA2B,CAAC,wBAAwB,CAChD,CACF,~~CACR~~,~~CACG,CACP,~~CAAC;~~QAEF~~,MAAM,eAAe,GAAG~~,CACtB~~;~~YACG~~,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC;YAAE,GAAG;YACxB,gCAAgC,IAAI,~~CACnC,~~oBAAC,IAAI,IAAC,OAAO,EAAE,gCAAgC,EAAE,SAAS;~~gBACxD~~,8BAAM,SAAS,EAAE,oBAAoB,CAAC,KAAK,EAAE,IAAI,CAAC,IAC/C,2BAA2B,CAAC,8BAA8B,CACtD,CACF,~~CACR~~,~~CACG,CACP,~~CAAC;~~QAEF~~,OAAO,~~CACL,~~oBAAC,UAAU,~~oBACL~~,KAAK,~~IACT~~,MAAM,EAAE,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,~~EAC1D~~,GAAG,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,CAAC,EAAE,~~EACzB~~,cAAc,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,~~EAC1C~~,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,~~EACpD~~,OAAO,~~EACL~~,oBAAC,gBAAgB,~~IACf~~,IAAI,EAAE,2BAA2B,CAAC,iBAAiB,~~EACnD~~,MAAM,EAAE,kBAAkB,CAAC,KAAK,CAAC,~~EACjC~~,OAAO,EAAE,GAAG,EAAE;~~oBACZ~~,kBAAkB,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC;gBAC3D,CAAC,~~EACD~~,SAAS,EAAE,2BAA2B,CAAC,iBAAiB,~~GACxD~~,~~EAEJ~~,WAAW,EAAE,KAAK,~~eACR~~,OAAO,~~eACP~~,WAAW,~~KAEpB~~,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,wBAAwB,EAAE,eAAe,CAAC,CACzD,~~CACd,~~CAAC;~~IACJ~~,CAAC,CAAC,~~CACI~~,~~CACT,~~CAAC;~~AACJ~~,CAAC,CAAC;~~AAEF~~,MAAM,YAAY,GAAG,~~CACnB~~,SAAiB,~~EACjB~~,wBAAqC,~~EACrC~~,eAA4B,~~EACf~~,EAAE;~~IACf~~,IAAI,SAAS,KAAK,uBAAuB,EAAE,CAAC;QAC1C,OAAO,eAAe,CAAC;IACzB,CAAC;SAAM,CAAC;QACN,OAAO,wBAAwB,CAAC;IAClC,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useState } from 'react';\nimport { Link, MessageBar, MessageBarButton, Stack, useTheme } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport { ErrorBarProps } from './ErrorBar';\nimport { dismissButtonStyle, messageBarStyle } from './styles/TroubleshootingGuideErrorBar.styles';\nimport {\n DismissedError~~,\n~~ dismissError~~,\n~~ dropDismissalsForInactiveErrors~~,\n~~ errorsToShow~~,\n~~ messageBarIconProps~~,\n~~ messageBarType\n} from './utils';\nimport { messageBarLinkStyles } from './styles/MessageBarLink.styles';\n\n/*\n Strings for {@link _TroubleshootingGuideErrorBar}.\n \n @internal\n /\nexport interface _TroubleshootingGuideErrorBarStrings {\n devicePermissionLinkText?: string;\n networkTroubleshootingLinkText?: string;\n dismissButtonText?: string;\n}\n\n/\n Props for {@link _TroubleshootingGuideErrorBar}.\n \n @internal\n /\nexport interface _TroubleshootingGuideErrorBarProps extends ErrorBarProps {\n /\n permissions state for camera/microphone\n /\n permissionsState?: {\n camera: PermissionState;\n microphone: PermissionState;\n };\n /\n Callback you may provide to supply users with further steps to troubleshoot why they have been\n * unable to grant your site the required permissions for the call.\n \n @example\n * ```ts\n * onPermissionsTroubleshootingClick: () =>\n * window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n * ```\n \n @remarks\n * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n /\n onPermissionsTroubleshootingClick?: (permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n }) => void;\n /\n Optional callback to supply users with further troubleshooting steps for network issues\n * experienced when connecting to a call.\n \n @example\n * ```ts\n * onNetworkingTroubleshootingClick?: () =>\n * window.open('https://contoso.com/network-troubleshooting', '_blank');\n * ```\n \n @remarks\n * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n /\n onNetworkingTroubleshootingClick?: () => void;\n /\n strings related to trouble shooting guidance link and dismiss button\n /\n troubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings;\n}\n\n/\n @internal\n * A component to show device Permission/network connection related errors, contains link that leads to further trouble shooting guide\n */\nexport const _TroubleshootingGuideErrorBar = (props: _TroubleshootingGuideErrorBarProps): JSX.Element => {\n const theme = useTheme();\n // error bar strings\n const localeStrings = useLocale().strings.errorBar;\n const strings = props.strings ?? localeStrings;\n\n const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n const {\n onPermissionsTroubleshootingClick,\n onNetworkingTroubleshootingClick,\n permissionsState = {\n camera: 'denied',\n microphone: 'denied'\n },\n troubleshootingGuideStrings\n } = props;\n\n // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n // Without this behaviour, this `useEffect` block would cause a render loop.\n useEffect(\n () => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors))~~,\n~~ [props.activeErrorMessages, dismissedErrors]\n );\n\n const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);\n\n return ~~(\n~~ <Stack data-ui-id=\"notifications-stack\">\n {toShow.map((error, i) => {\n const devicePermissionErrorBar = ~~(\n~~ <div>\n {strings[error.type]}{' '}\n {onPermissionsTroubleshootingClick && ~~(\n~~ <Link\n onClick={() => {\n onPermissionsTroubleshootingClick(permissionsState);\n }}\n ~~>\n~~ <span className={messageBarLinkStyles(theme, true)}>\n {troubleshootingGuideStrings.devicePermissionLinkText}\n </span>\n </Link~~>\n )~~}\n </div>\n ~~);\n\n~~ const networkErrorBar = ~~(\n~~ <div>\n {strings[error.type]}{' '}\n {onNetworkingTroubleshootingClick && ~~(\n~~ <Link onClick={onNetworkingTroubleshootingClick} underline>\n <span className={messageBarLinkStyles(theme, true)}>\n {troubleshootingGuideStrings.networkTroubleshootingLinkText}\n </span>\n </Link~~>\n )~~}\n </div>\n ~~);\n\n~~ return ~~(\n~~ <MessageBar\n {...props}\n styles={messageBarStyle(theme, messageBarType(error.type))}\n key={`${error.type} ${i}`}\n messageBarType={messageBarType(error.type)}\n messageBarIconProps={messageBarIconProps(error.type)}\n actions={\n <MessageBarButton\n text={troubleshootingGuideStrings.dismissButtonText}\n styles={dismissButtonStyle(theme)}\n onClick={() => {\n setDismissedErrors(dismissError(dismissedErrors, error));\n }}\n ariaLabel={troubleshootingGuideStrings.dismissButtonText}~~\n />\n~~ }\n isMultiline={false}\n aria-role=\"alert\"\n aria-live=\"assertive\"\n ~~>\n~~ {showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)}\n </MessageBar>\n ~~);\n~~ })}\n </Stack>\n ~~);\n~~};\n\nconst showErrorBar = (\n errorType: string~~,\n~~ devicePermissionErrorBar: JSX.Element~~,\n~~ networkErrorBar: JSX.Element\n): JSX.Element => {\n if (errorType === 'callNetworkQualityLow') {\n return networkErrorBar;\n } else {\n return devicePermissionErrorBar;\n }\n}~~;\n~~"]}
1	+ {"version":3,"file":"TroubleshootingGuideErrorBar.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/TroubleshootingGuideErrorBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useState } from 'react';\nimport { Link, MessageBar, MessageBarButton, Stack, useTheme } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport { ErrorBarProps } from './ErrorBar';\nimport { dismissButtonStyle, messageBarStyle } from './styles/TroubleshootingGuideErrorBar.styles';\nimport { DismissedError, dismissError, dropDismissalsForInactiveErrors, errorsToShow, messageBarIconProps, messageBarType } from './utils';\nimport { messageBarLinkStyles } from './styles/MessageBarLink.styles';\n\n/*\r\n Strings for {@link _TroubleshootingGuideErrorBar}.\r\n \r\n @internal\r\n /\nexport interface _TroubleshootingGuideErrorBarStrings {\n devicePermissionLinkText?: string;\n networkTroubleshootingLinkText?: string;\n dismissButtonText?: string;\n}\n\n/\r\n Props for {@link _TroubleshootingGuideErrorBar}.\r\n \r\n @internal\r\n /\nexport interface _TroubleshootingGuideErrorBarProps extends ErrorBarProps {\n /\r\n permissions state for camera/microphone\r\n /\n permissionsState?: {\n camera: PermissionState;\n microphone: PermissionState;\n };\n /\r\n Callback you may provide to supply users with further steps to troubleshoot why they have been\r\n * unable to grant your site the required permissions for the call.\r\n \r\n @example\r\n * ```ts\r\n * onPermissionsTroubleshootingClick: () =>\r\n * window.open('https://contoso.com/permissions-troubleshooting', '_blank');\r\n * ```\r\n \r\n @remarks\r\n * if this is not supplied, the composite will not show a 'further troubleshooting' link.\r\n /\n onPermissionsTroubleshootingClick?: (permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n }) => void;\n /\r\n Optional callback to supply users with further troubleshooting steps for network issues\r\n * experienced when connecting to a call.\r\n \r\n @example\r\n * ```ts\r\n * onNetworkingTroubleshootingClick?: () =>\r\n * window.open('https://contoso.com/network-troubleshooting', '_blank');\r\n * ```\r\n \r\n @remarks\r\n * if this is not supplied, the composite will not show a 'network troubleshooting' link.\r\n /\n onNetworkingTroubleshootingClick?: () => void;\n /\r\n strings related to trouble shooting guidance link and dismiss button\r\n /\n troubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings;\n}\n\n/\r\n @internal\r\n * A component to show device Permission/network connection related errors, contains link that leads to further trouble shooting guide\r\n */\nexport const _TroubleshootingGuideErrorBar = (props: _TroubleshootingGuideErrorBarProps): JSX.Element => {\n const theme = useTheme();\n // error bar strings\n const localeStrings = useLocale().strings.errorBar;\n const strings = props.strings ?? localeStrings;\n const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n const {\n onPermissionsTroubleshootingClick,\n onNetworkingTroubleshootingClick,\n permissionsState = {\n camera: 'denied',\n microphone: 'denied'\n },\n troubleshootingGuideStrings\n } = props;\n\n // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n // Without this behaviour, this `useEffect` block would cause a render loop.\n useEffect(() => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)), [props.activeErrorMessages, dismissedErrors]);\n const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);\n return <Stack data-ui-id=\"notifications-stack\">\r\n {toShow.map((error, i) => {\n const devicePermissionErrorBar = <div>\r\n {strings[error.type]}{' '}\r\n {onPermissionsTroubleshootingClick && <Link onClick={() => {\n onPermissionsTroubleshootingClick(permissionsState);\n }}>\r\n <span className={messageBarLinkStyles(theme, true)}>\r\n {troubleshootingGuideStrings.devicePermissionLinkText}\r\n </span>\r\n </Link>}\r\n </div>;\n const networkErrorBar = <div>\r\n {strings[error.type]}{' '}\r\n {onNetworkingTroubleshootingClick && <Link onClick={onNetworkingTroubleshootingClick} underline>\r\n <span className={messageBarLinkStyles(theme, true)}>\r\n {troubleshootingGuideStrings.networkTroubleshootingLinkText}\r\n </span>\r\n </Link>}\r\n </div>;\n return <MessageBar {...props} styles={messageBarStyle(theme, messageBarType(error.type))} key={`${error.type} ${i}`} messageBarType={messageBarType(error.type)} messageBarIconProps={messageBarIconProps(error.type)} actions={<MessageBarButton text={troubleshootingGuideStrings.dismissButtonText} styles={dismissButtonStyle(theme)} onClick={() => {\n setDismissedErrors(dismissError(dismissedErrors, error));\n }} ariaLabel={troubleshootingGuideStrings.dismissButtonText} />} isMultiline={false} aria-role=\"alert\" aria-live=\"assertive\">\r\n {showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)}\r\n </MessageBar>;\n })}\r\n </Stack>;\n};\nconst showErrorBar = (errorType: string, devicePermissionErrorBar: JSX.Element, networkErrorBar: JSX.Element): JSX.Element => {\n if (errorType === 'callNetworkQualityLow') {\n return networkErrorBar;\n } else {\n return devicePermissionErrorBar;\n }\n};"]}

package/dist/dist-esm/react-components/src/components/TypingIndicator.js CHANGED Viewed

@@ -21,7 +21,7 @@ const getUsersElement = (typingUsers, delimiter, onRenderUser, userDisplayNameSt
         if (truncatedDisplayName && truncatedDisplayName.length > 50) {
             truncatedDisplayName = truncatedDisplayName.substring(0, 50) + '...';
         }
-        userElements.push(onRenderUser ? (onRenderUser(user)) : (React.createElement(Text, { className: mergeStyles(userDisplayNameStyles), key: `user-${index}` }, truncatedDisplayName)));
+        userElements.push(onRenderUser ? onRenderUser(user) : React.createElement(Text, { className: mergeStyles(userDisplayNameStyles), key: `user-${index}` }, truncatedDisplayName));
         userElements.push(React.createElement(Text, { key: `comma-${index}` }, `${delimiter}`));
     });
     // pop last comma
@@ -36,7 +36,7 @@ const getUsersElement = (typingUsers, delimiter, onRenderUser, userDisplayNameSt
  */
 const getNamesString = (typingUsers, delimiter) => {
     const userNames = [];
-    typingUsers.forEach((user) => {
+    typingUsers.forEach(user => {
         if (user.displayName) {
             userNames.push(user.displayName);
         }
@@ -100,9 +100,7 @@ const getIndicatorString = (strings, namesString, numTypingUsers, numTypingUsers
         return strings.multipleUsersAbbreviateOne.replace('{users}', namesString);
     }
     if (numTypingUsers > 1 && numTypingUsersAbbreviated > 1) {
-        return strings.multipleUsersAbbreviateMany
-            .replace('{users}', namesString)
-            .replace('{numOthers}', `${numTypingUsersAbbreviated}`);
+        return strings.multipleUsersAbbreviateMany.replace('{users}', namesString).replace('{numOthers}', `${numTypingUsersAbbreviated}`);
     }
     return undefined;
 };
@@ -119,8 +117,7 @@ const IndicatorComponent = (typingUsers, strings, onRenderUser, styles) => {
         if (typingUsersMentioned.length > 0) {
             additionalCharCount += strings.delimiter.length;
         }
-        if (totalCharacterCount + additionalCharCount <= MAXIMUM_LENGTH_OF_TYPING_USERS ||
-            typingUsersMentioned.length === 0) {
+        if (totalCharacterCount + additionalCharCount <= MAXIMUM_LENGTH_OF_TYPING_USERS || typingUsersMentioned.length === 0) {
             typingUsersMentioned.push(typingUser);
             totalCharacterCount += additionalCharCount;
         }
@@ -132,7 +129,7 @@ const IndicatorComponent = (typingUsers, strings, onRenderUser, styles) => {
     const numUserNotMentioned = typingUsers.length - typingUsersMentioned.length;
     const spanElements = getSpanElements(strings, usersElement, typingUsers.length, numUserNotMentioned);
     const labelString = getIndicatorString(strings, getNamesString(typingUsersMentioned, strings.delimiter), typingUsers.length, numUserNotMentioned);
-    return (React.createElement("div", { "data-ui-id": ids.typingIndicator, className: mergeStyles(typingIndicatorStringStyle, styles === null || styles === void 0 ? void 0 : styles.typingString), key: "typingStringKey", role: "status", "aria-label": labelString }, spanElements));
+    return React.createElement("div", { "data-ui-id": ids.typingIndicator, className: mergeStyles(typingIndicatorStringStyle, styles === null || styles === void 0 ? void 0 : styles.typingString), key: "typingStringKey", role: "status", "aria-label": labelString }, spanElements);
 };
 /**
  * Component to notify local user when one or more participants in the chat thread are typing.
@@ -142,7 +139,7 @@ const IndicatorComponent = (typingUsers, strings, onRenderUser, styles) => {
 export const TypingIndicator = (props) => {
     const { typingUsers, onRenderUser, styles } = props;
     const { strings } = useLocale();
-    const typingUsersToRender = typingUsers.filter((typingUser) => typingUser.displayName !== undefined);
+    const typingUsersToRender = typingUsers.filter(typingUser => typingUser.displayName !== undefined);
     const indicatorComponent = IndicatorComponent(typingUsersToRender, Object.assign(Object.assign({}, strings.typingIndicator), props.strings), onRenderUser, styles);
     return React.createElement(Stack, { className: mergeStyles(typingIndicatorContainerStyle, styles === null || styles === void 0 ? void 0 : styles.root) }, indicatorComponent);
 };