@azure/communication-react 1.13.0-beta.1 → 1.13.1-alpha-202402280012

package/dist/dist-esm/react-components/src/components/Survey/SurveyTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SurveyTypes.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Survey/SurveyTypes.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n *\n * Represents a call survey rating.\n *\n * @internal\n */\nexport declare interface _CallRating<TIssue extends _AudioIssue | _OverallIssue | _ScreenshareIssue | _VideoIssue> {\n  /**\n   * The rating value should follow rating scale.\n   */\n  score: number;\n  /**\n   * Call rating type with issues.\n   */\n  issues?: TIssue[];\n  /**\n   * Rating scale default 1-5 rating\n   */\n  scale?: _RatingScale;\n}\n\n/**\n * Represents the end of call survey.\n * @internal\n */\nexport declare interface _CallSurvey {\n  /**\n   * Overall call rating with optional overall issues\n   */\n  overallRating?: _CallRating<_OverallIssue>;\n  /**\n   * Audio rating with optional audio issues\n   */\n  audioRating?: _CallRating<_AudioIssue>;\n  /**\n   * Video rating with optional video issues\n   */\n  videoRating?: _CallRating<_VideoIssue>;\n  /**\n   * Screenshare rating with optional screenshare issues\n   */\n  screenshareRating?: _CallRating<_ScreenshareIssue>;\n}\n\n/**\n * Represents the end of call survey response.\n * @internal\n */\nexport declare interface _CallSurveyResponse extends _CallSurvey {\n  /**\n   * Uniquely identify the call survey\n   */\n  readonly id: string;\n  /**\n   * Uniquely identify the call being served\n   */\n  readonly callId: string;\n  /**\n   * The participant submitting the survey\n   */\n  readonly localParticipantId: string;\n}\n\n/**\n * Represents the end of call survey call issues.\n * @example\n * CallCannotJoin - participant is unable to join the call.\n * CallCannotInvite - participant is unable to add another participant in the call.\n * HadToRejoin - participant rejoined the call due the call quality issue.\n * CallEndedUnexpectedly - when the call ended unexpectedly.\n * OtherIssues - any other overall call issue not listed here.\n *\n * @internal\n *\n */\nexport declare type _OverallIssue =\n  | 'CallCannotJoin'\n  | 'CallCannotInvite'\n  | 'HadToRejoin'\n  | 'CallEndedUnexpectedly'\n  | 'OtherIssues';\n\n/**\n * Represents the end of call survey audio issues.\n * @example\n * NoLocalAudio - other participants unable to hear me.\n * NoRemoteAudio - participant unable to hear another participant's audio.\n * Echo - heard echo.\n * AudioNoise - heard audio noise.\n * LowVolume - call audio volume was low.\n * AudioStoppedUnexpectedly - call audio stopped unexpectedly.\n * DistortedSpeech - audio was distorted.\n * AudioInterruption - audio was interrupted.\n * OtherIssues - any other audio issue not listed here.\n *\n * @internal\n *\n */\nexport declare type _AudioIssue =\n  | 'NoLocalAudio'\n  | 'NoRemoteAudio'\n  | 'Echo'\n  | 'AudioNoise'\n  | 'LowVolume'\n  | 'AudioStoppedUnexpectedly'\n  | 'DistortedSpeech'\n  | 'AudioInterruption'\n  | 'OtherIssues';\n\n/**\n * Represents the end of call survey screenshare issues.\n * @example\n * NoContentLocal - other participants unable to see my screen.\n * NoContentRemote - participant unable to saw another participant's screen share.\n * CannotPresent - participant was unable to share the screen.\n * LowQuality - screen share video quality was low.\n * Freezes - screen share freezes.\n * StoppedUnexpectedly - screen share stopped unexpectedly.\n * LargeDelay - watch screen share having large delay.\n * OtherIssues - any other screen share issue not listed here.\n *\n * @internal\n *\n */\nexport declare type _ScreenshareIssue =\n  | 'NoContentLocal'\n  | 'NoContentRemote'\n  | 'CannotPresent'\n  | 'LowQuality'\n  | 'Freezes'\n  | 'StoppedUnexpectedly'\n  | 'LargeDelay'\n  | 'OtherIssues';\n\n/**\n * Represents the end of call survey video issues.\n * @example\n * NoVideoReceived - participant unable to saw another participant's video.\n * NoVideoSent - other participants unable to see me.\n * LowQuality - video quality was low.\n * Freezes - video freezes.\n * StoppedUnexpectedly - video stopped unexpectedly.\n * DarkVideoReceived - participant receives dark video.\n * AudioVideoOutOfSync - participant watch video and audio out of sync.\n * OtherIssues - any other video issue not listed here.\n *\n * @internal\n *\n */\nexport declare type _VideoIssue =\n  | 'NoVideoReceived'\n  | 'NoVideoSent'\n  | 'LowQuality'\n  | 'Freezes'\n  | 'StoppedUnexpectedly'\n  | 'DarkVideoReceived'\n  | 'AudioVideoOutOfSync'\n  | 'OtherIssues';\n\n/**\n * Rating scale to override the default scale\n * @internal\n */\nexport declare interface _RatingScale {\n  /**\n   * Lower bound of the rating value 0 to 100 (default 1)\n   */\n  lowerBound: number;\n  /**\n   * Upper bound of the rating value 0 to 100 (default 5)\n   */\n  upperBound: number;\n  /**\n   * The rating value greater than the threshold will be considered as good\n   */\n  lowScoreThreshold: number;\n}\n"]}

package/dist/dist-esm/react-components/src/components/Survey/TagsSurvey/TagsSurvey.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import { _AudioIssue, _CallSurvey, _OverallIssue, _ScreenshareIssue, _VideoIssue } from '../SurveyTypes';
+import { SurveyIssuesHeadingStrings, SurveyIssues, CallSurveyImprovementSuggestions } from '../../../types';
+/**
+ * Strings of {@link TagsSurvey} that can be overridden.
+ *
+ * @internal
+ */
+export interface _TagsSurveyStrings {
+    /**
+     * Survey question
+     */
+    tagsSurveyQuestion?: string;
+    /**
+     * Helper text for tag survey explaining what the survey is for
+     */
+    tagsSurveyHelperText?: string;
+    /**
+     * Default text for free form text field inside tags survey
+     */
+    tagsSurveyTextFieldDefaultText?: string;
+}
+/**
+ * Survey Issue categories
+ *
+ * @internal
+ */
+export type _IssueCategory = 'overallRating' | 'audioRating' | 'videoRating' | 'screenshareRating';
+/**
+ * Key value pair of survey catogories and corresponding message/issue
+ *
+ * @internal
+ */
+export type _SurveyTag = Record<_IssueCategory, {
+    message: string;
+    issue: _AudioIssue | _OverallIssue | _ScreenshareIssue | _VideoIssue;
+}[]>;
+/**
+ * Props for {@link TagsSurvey} component.
+ *
+ * @internal
+ */
+export interface _TagsSurveyProps {
+    /** Mappings from call issues to tags displayed on the survey*/
+    callIssuesToTag: SurveyIssues;
+    /** Mappings from issue category to categories displayed on survey*/
+    categoryHeadings: SurveyIssuesHeadingStrings;
+    /** Function to send TagsSurvey results*/
+    onConfirm?: (selectedTags: _CallSurvey, improvementSuggestions?: CallSurveyImprovementSuggestions) => void;
+    /** show the text field for more info*/
+    showFreeFormTextField?: boolean;
+    /** Tags survey strings */
+    strings?: _TagsSurveyStrings;
+}
+/**
+ * A component to allow users to send numerical ratings regarding call quality
+ *
+ * @internal
+ */
+export declare const _TagsSurvey: (props: _TagsSurveyProps) => JSX.Element;
+//# sourceMappingURL=TagsSurvey.d.ts.map

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

@@ -0,0 +1,132 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Text, useTheme, Stack, Checkbox, Pivot, PivotItem, TextField } from '@fluentui/react';
+import { checkboxClassName, questionTextStyle, helperTextStyle, freeFormTextFieldClassName, freeFormTextCheckboxStyles } from './TagsSurvey.styles';
+import { getKeys } from '../../utils';
+/**
+ * A component to allow users to send numerical ratings regarding call quality
+ *
+ * @internal
+ */
+export const _TagsSurvey = (props) => {
+    const { callIssuesToTag, categoryHeadings, onConfirm, strings, showFreeFormTextField } = props;
+    const [selectedTags, setSelectedTags] = useState({});
+    const [textResponse, setTextResponse] = useState({});
+    const [selectedTextResponse, setSelectedTextResponse] = useState({});
+    const [checkedTextFields, setCheckedTextFields] = useState([]);
+    const tags = useMemo(() => {
+        const tags = {
+            overallRating: [],
+            audioRating: [],
+            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)));
+                const issueMessages = callIssuesToTag[issueCategory];
+                if (tags[issueCategory]) {
+                    tags[issueCategory].push({
+                        message: issueMessages[issue],
+                        issue: issueCapitalized
+                    });
+                }
+                else {
+                    tags[issueCategory] = [
+                        {
+                            message: issueMessages[issue],
+                            issue: issueCapitalized
+                        }
+                    ];
+                }
+            });
+        });
+        return tags;
+    }, [callIssuesToTag]);
+    const onChange = React.useCallback((issueCategory, checked, issue) => {
+        if (checked) {
+            if (issue) {
+                setSelectedTags((prevState) => {
+                    var _a;
+                    const existingIssues = (_a = prevState === null || prevState === void 0 ? void 0 : prevState[issueCategory]) === null || _a === void 0 ? void 0 : _a.issues;
+                    if (existingIssues) {
+                        prevState[issueCategory].issues = [...existingIssues, issue];
+                    }
+                    else {
+                        prevState[issueCategory] = { issues: [issue] };
+                    }
+                    return prevState;
+                });
+            }
+            else {
+                setCheckedTextFields([...checkedTextFields, issueCategory]);
+                setSelectedTextResponse((prevState) => {
+                    prevState[issueCategory] = textResponse[issueCategory];
+                    return prevState;
+                });
+            }
+        }
+        else {
+            if (issue) {
+                setSelectedTags((prevState) => {
+                    var _a;
+                    if ((_a = prevState[issueCategory]) === null || _a === void 0 ? void 0 : _a.issues) {
+                        prevState[issueCategory].issues = prevState[issueCategory].issues.filter(function (value) {
+                            return value !== issue;
+                        });
+                        if (prevState[issueCategory].issues.length === 0) {
+                            delete prevState[issueCategory];
+                        }
+                    }
+                    return prevState;
+                });
+            }
+            else {
+                setCheckedTextFields(checkedTextFields.filter((id) => id !== issueCategory));
+                setSelectedTextResponse((prevState) => {
+                    delete prevState[issueCategory];
+                    return prevState;
+                });
+            }
+        }
+    }, [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) => {
+                if (v) {
+                    setCheckedTextFields([...checkedTextFields, issueCategory]);
+                    setTextResponse((prevState) => {
+                        prevState[issueCategory] = v;
+                        return 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,
+        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: {
+                    '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) }));
+                }),
+                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)));
+};
+//# sourceMappingURL=TagsSurvey.js.map

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

@@ -0,0 +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\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { Text, useTheme, Stack, Checkbox, Pivot, PivotItem, TextField } from '@fluentui/react';\nimport { _formatString, _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';\nimport { getKeys } from '../../utils';\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 existingIssues = prevState?.[issueCategory]?.issues;\n            if (existingIssues) {\n              (prevState[issueCategory]!.issues as unknown[]) = [...existingIssues, issue];\n            } else {\n              (prevState[issueCategory] as { issues: unknown[] }) = { issues: [issue] };\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            if (prevState[issueCategory]?.issues) {\n              (prevState[issueCategory]!.issues as unknown[]) = prevState[issueCategory]!.issues!.filter(function (\n                value\n              ) {\n                return value !== issue;\n              });\n              if (prevState[issueCategory]!.issues!.length === 0) {\n                delete prevState[issueCategory];\n              }\n            }\n            return prevState;\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"]}

package/dist/dist-esm/react-components/src/components/Survey/TagsSurvey/TagsSurvey.styles.d.ts

@@ -0,0 +1,22 @@
+import { ICheckboxStyles, Theme } from '@fluentui/react';
+/**
+ * @private
+ */
+export declare const questionTextStyle: (theme: Theme) => string;
+/**
+ * @private
+ */
+export declare const helperTextStyle: (theme: Theme) => string;
+/**
+ * @private
+ */
+export declare const checkboxClassName: string;
+/**
+ * @private
+ */
+export declare const freeFormTextCheckboxStyles: Partial<ICheckboxStyles>;
+/**
+ * @private
+ */
+export declare const freeFormTextFieldClassName: string;
+//# sourceMappingURL=TagsSurvey.styles.d.ts.map

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

@@ -0,0 +1,55 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { mergeStyles } from '@fluentui/react';
+import { _pxToRem } from "../../../../../acs-ui-common/src";
+/**
+ * @private
+ */
+export const questionTextStyle = (theme) => mergeStyles({
+    fontWeight: 600,
+    fontSize: _pxToRem(16),
+    lineHeight: _pxToRem(20),
+    color: theme.palette.neutralPrimary,
+    marginTop: _pxToRem(8),
+    marginBottom: _pxToRem(4)
+});
+/**
+ * @private
+ */
+export const helperTextStyle = (theme) => mergeStyles({
+    fontWeight: 400,
+    fontSize: _pxToRem(12),
+    lineHeight: _pxToRem(16),
+    marginTop: _pxToRem(4),
+    color: theme.palette.neutralSecondary
+});
+/**
+ * @private
+ */
+export const checkboxClassName = mergeStyles({
+    padding: _pxToRem(8),
+    paddingLeft: 0
+});
+/**
+ * @private
+ */
+export const freeFormTextCheckboxStyles = {
+    root: {
+        paddingBottom: _pxToRem(8),
+        width: '100%'
+    },
+    label: {
+        width: '100%'
+    }
+};
+/**
+ * @private
+ */
+export const freeFormTextFieldClassName = mergeStyles({
+    width: '100%',
+    marginLeft: _pxToRem(4),
+    input: {
+        padding: 0
+    }
+});
+//# sourceMappingURL=TagsSurvey.styles.js.map

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

@@ -0,0 +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"]}

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

@@ -9,10 +9,8 @@ import { systemMessageIconStyle } from './styles/SystemMessage.styles';
 export const SystemMessage = (props) => {
     const { iconName, content } = props;
     const Icon = React.createElement(FontIcon, { iconName: iconName, className: mergeStyles(systemMessageIconStyle) });
-    return React.createElement(Stack, { horizontal: true, className: mergeStyles(props === null || props === void 0 ? void 0 : props.containerStyle), tabIndex: 0 },
+    return (React.createElement(Stack, { horizontal: true, className: mergeStyles(props === null || props === void 0 ? void 0 : props.containerStyle), tabIndex: 0 },
         Icon,
-        React.createElement(Text, { style: {
-                wordBreak: 'break-word'
-            }, role: "status", title: content, variant: 'small' }, content));
+        React.createElement(Text, { style: { wordBreak: 'break-word' }, role: "status", title: content, variant: 'small' }, content)));
 };
 //# sourceMappingURL=SystemMessage.js.map

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

@@ -1 +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,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AA4BvE;;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,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAyB,CAAC,EAAE,QAAQ,EAAE,CAAC;QAC1F,IAAI;QACL,oBAAC,IAAI,IAAC,KAAK,EAAE;gBACb,SAAS,EAAE,YAAY;aACxB,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,IAC5C,OAAO,CACH,CACD,CAAC;AACb,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 from 'react';\nimport { systemMessageIconStyle } from './styles/SystemMessage.styles';\nimport { ComponentSlotStyle } from '../types';\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 {\n    iconName,\n    content\n  } = props;\n  const Icon: JSX.Element = <FontIcon iconName={iconName} className={mergeStyles(systemMessageIconStyle)} />;\n  return <Stack horizontal className={mergeStyles((props?.containerStyle as IStyle))} tabIndex={0}>\n      {Icon}\n      <Text style={{\n      wordBreak: 'break-word'\n    }} role=\"status\" title={content} variant={'small'}>\n        {content}\n      </Text>\n    </Stack>;\n};"]}
+{"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,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AA4BvE;;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;IAE3G,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAwB,CAAC,EAAE,QAAQ,EAAE,CAAC;QACnF,IAAI;QACL,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,IACrF,OAAO,CACH,CACD,CACT,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 from 'react';\nimport { systemMessageIconStyle } from './styles/SystemMessage.styles';\nimport { ComponentSlotStyle } from '../types';\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\n  return (\n    <Stack horizontal className={mergeStyles(props?.containerStyle as IStyle)} tabIndex={0}>\n      {Icon}\n      <Text style={{ wordBreak: 'break-word' }} role=\"status\" title={content} variant={'small'}>\n        {content}\n      </Text>\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/TextFieldWithMention/TextFieldWithMention.js

@@ -122,7 +122,17 @@ export const TextFieldWithMention = (props) => {
         (_c = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _c === void 0 ? void 0 : _c.focus();
         setActiveSuggestionIndex(undefined);
         onChange && onChange(undefined, updatedContent.updatedHTML);
-    }, [textFieldRef, inputTextValue, currentTriggerStartIndex, mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger, onChange, internalTextValue, tagsValue, updateMentionSuggestions, localeStrings]);
+    }, [
+        textFieldRef,
+        inputTextValue,
+        currentTriggerStartIndex,
+        mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger,
+        onChange,
+        internalTextValue,
+        tagsValue,
+        updateMentionSuggestions,
+        localeStrings
+    ]);
     const onTextFieldKeyDown = useCallback((ev) => {
         // caretIndex should be set to undefined when the user is typing
         setCaretIndex(undefined);
@@ -138,13 +148,17 @@ export const TextFieldWithMention = (props) => {
         if (mentionSuggestions.length > 0) {
             if (ev.key === 'ArrowUp') {
                 ev.preventDefault();
-                const newActiveIndex = activeSuggestionIndex === undefined ? mentionSuggestions.length - 1 : Math.max(activeSuggestionIndex - 1, 0);
+                const newActiveIndex = activeSuggestionIndex === undefined
+                    ? mentionSuggestions.length - 1
+                    : Math.max(activeSuggestionIndex - 1, 0);
                 setActiveSuggestionIndex(newActiveIndex);
                 isActiveSuggestionIndexUpdated = true;
             }
             else if (ev.key === 'ArrowDown') {
                 ev.preventDefault();
-                const newActiveIndex = activeSuggestionIndex === undefined ? 0 : Math.min(activeSuggestionIndex + 1, mentionSuggestions.length - 1);
+                const newActiveIndex = activeSuggestionIndex === undefined
+                    ? 0
+                    : Math.min(activeSuggestionIndex + 1, mentionSuggestions.length - 1);
                 setActiveSuggestionIndex(newActiveIndex);
                 isActiveSuggestionIndexUpdated = true;
             }
@@ -173,11 +187,19 @@ export const TextFieldWithMention = (props) => {
             setActiveSuggestionIndex(undefined);
         }
         onKeyDown && onKeyDown(ev);
-    }, [onEnterKeyDown, onKeyDown, supportNewline, mentionSuggestions, activeSuggestionIndex, onSuggestionSelected, updateMentionSuggestions]);
+    }, [
+        onEnterKeyDown,
+        onKeyDown,
+        supportNewline,
+        mentionSuggestions,
+        activeSuggestionIndex,
+        onSuggestionSelected,
+        updateMentionSuggestions
+    ]);
     const debouncedQueryUpdate = useDebouncedCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
         let suggestions = (_a = (yield (mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onQueryUpdated(query)))) !== null && _a !== void 0 ? _a : [];
-        suggestions = suggestions.filter(suggestion => suggestion.displayText.trim() !== '');
+        suggestions = suggestions.filter((suggestion) => suggestion.displayText.trim() !== '');
         if (suggestions.length === 0) {
             setActiveSuggestionIndex(undefined);
         }
@@ -192,11 +214,16 @@ export const TextFieldWithMention = (props) => {
         var _a, _b, _c;
         let updatedStartIndex = event.currentTarget.selectionStart;
         let updatedEndIndex = event.currentTarget.selectionEnd;
-        if (event.currentTarget.selectionStart === event.currentTarget.selectionEnd && event.currentTarget.selectionStart !== null && event.currentTarget.selectionStart !== -1) {
+        if (event.currentTarget.selectionStart === event.currentTarget.selectionEnd &&
+            event.currentTarget.selectionStart !== null &&
+            event.currentTarget.selectionStart !== -1) {
             // just a caret movement/usual typing or deleting
             const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);
             // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries
-            if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined && event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex && event.currentTarget.selectionStart < ((_a = mentionTag.plainTextEndIndex) !== null && _a !== void 0 ? _a : mentionTag.plainTextBeginIndex)) {
+            if (mentionTag !== undefined &&
+                mentionTag.plainTextBeginIndex !== undefined &&
+                event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex &&
+                event.currentTarget.selectionStart < ((_a = mentionTag.plainTextEndIndex) !== null && _a !== void 0 ? _a : mentionTag.plainTextBeginIndex)) {
                 // get updated selection index
                 const newSelectionIndex = findNewSelectionIndexForMention({
                     tag: mentionTag,
@@ -214,7 +241,10 @@ export const TextFieldWithMention = (props) => {
                 // the selection start is changed
                 const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);
                 // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries
-                if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined && event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex && event.currentTarget.selectionStart < ((_b = mentionTag.plainTextEndIndex) !== null && _b !== void 0 ? _b : mentionTag.plainTextBeginIndex)) {
+                if (mentionTag !== undefined &&
+                    mentionTag.plainTextBeginIndex !== undefined &&
+                    event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex &&
+                    event.currentTarget.selectionStart < ((_b = mentionTag.plainTextEndIndex) !== null && _b !== void 0 ? _b : mentionTag.plainTextBeginIndex)) {
                     updatedStartIndex = findNewSelectionIndexForMention({
                         tag: mentionTag,
                         textValue: inputTextValue,
@@ -227,7 +257,10 @@ export const TextFieldWithMention = (props) => {
                 // the selection end is changed
                 const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionEnd);
                 // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries
-                if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined && event.currentTarget.selectionEnd > mentionTag.plainTextBeginIndex && event.currentTarget.selectionEnd < ((_c = mentionTag.plainTextEndIndex) !== null && _c !== void 0 ? _c : mentionTag.plainTextBeginIndex)) {
+                if (mentionTag !== undefined &&
+                    mentionTag.plainTextBeginIndex !== undefined &&
+                    event.currentTarget.selectionEnd > mentionTag.plainTextBeginIndex &&
+                    event.currentTarget.selectionEnd < ((_c = mentionTag.plainTextEndIndex) !== null && _c !== void 0 ? _c : mentionTag.plainTextBeginIndex)) {
                     updatedEndIndex = findNewSelectionIndexForMention({
                         tag: mentionTag,
                         textValue: inputTextValue,
@@ -257,13 +290,17 @@ export const TextFieldWithMention = (props) => {
             setShouldHandleOnMouseDownDuringSelect(false);
         }
         else if (shouldHandleOnMouseDownDuringSelect) {
-            if (interactionStartSelection !== undefined && (interactionStartSelection.start !== event.currentTarget.selectionStart || interactionStartSelection.end !== event.currentTarget.selectionEnd)) {
+            if (interactionStartSelection !== undefined &&
+                (interactionStartSelection.start !== event.currentTarget.selectionStart ||
+                    interactionStartSelection.end !== event.currentTarget.selectionEnd)) {
                 // selection was changed by mouse
                 // for mouse selection only, it's possible to start selection in the middle of a word in a mention
                 // because of this when event.currentTarget.selectionStart === mouseMoveStartPoint.start
                 // selectionStartValue for updateSelectionIndexesWithMentionIfNeeded should be set
                 // to the end of the input to mimic selection from right to left for the left selection index
-                const updatedSelectionStartValue = event.currentTarget.selectionStart === interactionStartSelection.start ? inputTextValue.length : interactionStartSelection.start;
+                const updatedSelectionStartValue = event.currentTarget.selectionStart === interactionStartSelection.start
+                    ? inputTextValue.length
+                    : interactionStartSelection.start;
                 // selectionStart is always less than selectionEnd so sometimes selectionEnd is user's start of the selection
                 // so when event.currentTarget.selectionEnd === mouseMoveStartPoint.end
                 // selectionEndValue for updateSelectionIndexesWithMentionIfNeeded should be set
@@ -287,7 +324,8 @@ export const TextFieldWithMention = (props) => {
                     // if the selection is not on the bounds of the mention
                     // disable selection for clicks on mention bounds
                     const mentionEndIndex = (_a = mentionTag.plainTextEndIndex) !== null && _a !== void 0 ? _a : mentionTag.plainTextBeginIndex;
-                    if (event.currentTarget.selectionStart !== event.currentTarget.selectionEnd && event.currentTarget.selectionEnd > mentionEndIndex) {
+                    if (event.currentTarget.selectionStart !== event.currentTarget.selectionEnd &&
+                        event.currentTarget.selectionEnd > mentionEndIndex) {
                         // handle triple click when the text starts from mention
                         if (event.currentTarget.selectionDirection === null) {
                             event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, event.currentTarget.selectionEnd);
@@ -298,7 +336,9 @@ export const TextFieldWithMention = (props) => {
                         setSelectionStartValue(mentionTag.plainTextBeginIndex);
                         setSelectionEndValue(event.currentTarget.selectionEnd);
                     }
-                    else if (event.currentTarget.selectionStart !== event.currentTarget.selectionEnd || event.currentTarget.selectionStart !== mentionTag.plainTextBeginIndex && event.currentTarget.selectionStart !== mentionEndIndex) {
+                    else if (event.currentTarget.selectionStart !== event.currentTarget.selectionEnd ||
+                        (event.currentTarget.selectionStart !== mentionTag.plainTextBeginIndex &&
+                            event.currentTarget.selectionStart !== mentionEndIndex)) {
                         if (event.currentTarget.selectionDirection === null) {
                             event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, mentionEndIndex);
                         }
@@ -441,7 +481,10 @@ export const TextFieldWithMention = (props) => {
     }), [debouncedQueryUpdate, mentionLookupOptions, onChange, updateMentionSuggestions]);
     // Adjust the selection range based on a mouse / touch interaction
     const handleOnMove = useCallback(({ event, selectionStartValue, selectionEndValue, interactionStartSelection, shouldHandleMoveEvent }) => {
-        if (shouldHandleMoveEvent && interactionStartSelection === undefined && (event.currentTarget.selectionStart !== selectionStartValue || event.currentTarget.selectionEnd !== selectionEndValue)) {
+        if (shouldHandleMoveEvent &&
+            interactionStartSelection === undefined &&
+            (event.currentTarget.selectionStart !== selectionStartValue ||
+                event.currentTarget.selectionEnd !== selectionEndValue)) {
             setInteractionStartSelection({
                 start: nullToUndefined(event.currentTarget.selectionStart),
                 end: nullToUndefined(event.currentTarget.selectionEnd)
@@ -465,12 +508,14 @@ export const TextFieldWithMention = (props) => {
             return undefined;
         }
         const currentMention = mentionSuggestions[activeSuggestionIndex !== null && activeSuggestionIndex !== void 0 ? activeSuggestionIndex : 0];
-        return (currentMention === null || currentMention === void 0 ? void 0 : currentMention.displayText.length) > 0 ? currentMention === null || currentMention === void 0 ? void 0 : currentMention.displayText : localeStrings.participantItem.displayNamePlaceholder;
+        return (currentMention === null || currentMention === void 0 ? void 0 : currentMention.displayText.length) > 0
+            ? currentMention === null || currentMention === void 0 ? void 0 : currentMention.displayText
+            : localeStrings.participantItem.displayNamePlaceholder;
     }, [activeSuggestionIndex, mentionSuggestions, localeStrings.participantItem.displayNamePlaceholder]);
-    return React.createElement(React.Fragment, null,
-        mentionSuggestions.length > 0 && React.createElement(_MentionPopover, { suggestions: mentionSuggestions, activeSuggestionIndex: activeSuggestionIndex, target: inputBoxRef, targetPositionOffset: caretPosition, onRenderSuggestionItem: mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onRenderSuggestionItem, onSuggestionSelected: onSuggestionSelected, onDismiss: () => {
+    return (React.createElement(React.Fragment, null,
+        mentionSuggestions.length > 0 && (React.createElement(_MentionPopover, { suggestions: mentionSuggestions, activeSuggestionIndex: activeSuggestionIndex, target: inputBoxRef, targetPositionOffset: caretPosition, onRenderSuggestionItem: mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onRenderSuggestionItem, onSuggestionSelected: onSuggestionSelected, onDismiss: () => {
                 updateMentionSuggestions([]);
-            } }),
+            } })),
         announcerText !== undefined && React.createElement(Announcer, { announcementString: announcerText, ariaLive: 'polite' }),
         React.createElement(TextField, Object.assign({}, textFieldProps, { "data-ui-id": dataUiId, value: inputTextValue, onChange: (e, newValue) => {
                 // Remove when switching to react 17+, currently needed because of https://legacy.reactjs.org/docs/legacy-event-pooling.html
@@ -489,7 +534,7 @@ export const TextFieldWithMention = (props) => {
                     currentSelectionEnd: nullToUndefined(e.currentTarget.selectionEnd),
                     updatedValue: newValue
                 });
-            }, onSelect: e => {
+            }, onSelect: (e) => {
                 // update selection if needed
                 if (caretIndex !== undefined) {
                     // sometimes setting selectionRage in effect for updating caretIndex doesn't work as expected and
@@ -519,7 +564,7 @@ export const TextFieldWithMention = (props) => {
                 // onClick already has wrong range as it's called after onSelect that updates the selection range
                 // so we need to handle onMouseDown to prevent onSelect default behavior
                 handleOnInteractionStarted();
-            }, onMouseMove: event => {
+            }, onMouseMove: (event) => {
                 handleOnMove({
                     event,
                     selectionStartValue,
@@ -531,7 +576,7 @@ export const TextFieldWithMention = (props) => {
                 handleOnInteractionCompleted();
             }, onTouchStart: () => {
                 handleOnInteractionStarted();
-            }, onTouchMove: event => {
+            }, onTouchMove: (event) => {
                 handleOnMove({
                     event,
                     selectionStartValue,
@@ -545,6 +590,6 @@ export const TextFieldWithMention = (props) => {
                 // setup shouldHandleOnMouseDownDuringSelect to false when text field loses focus
                 // as the click should be handled by text field anymore
                 setShouldHandleOnMouseDownDuringSelect(false);
-            }, onKeyDown: onTextFieldKeyDown, elementRef: inputBoxRef })));
+            }, onKeyDown: onTextFieldKeyDown, elementRef: inputBoxRef }))));
 };
 //# sourceMappingURL=TextFieldWithMention.js.map