@azure/communication-react 1.22.0 → 1.23.0-alpha-202412190017

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

@@ -1,8 +1,14 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import { mergeStyles, Spinner } from '@fluentui/react';
+/* @conditional-compile-remove(remote-ufd) */
+import { Stack } from '@fluentui/react';
 import React, { useEffect, useRef, useState } from 'react';
 import { invertedVideoInPipStyle, mediaContainer, container, loadingSpinnerContainer, loadSpinnerStyles } from './styles/StreamMedia.styles';
+/* @conditional-compile-remove(remote-ufd) */
+import { reconnectingContainer, reconnectSpinnerStyles } from './styles/StreamMedia.styles';
+/* @conditional-compile-remove(remote-ufd) */
+import { useLocale } from '../localization';
 import { useTheme } from '../theming';
 /**
  * Utility component to convert an HTMLElement with a video stream into a JSX element.
@@ -14,6 +20,8 @@ import { useTheme } from '../theming';
 export const StreamMedia = (props) => {
     const containerEl = useRef(null);
     const theme = useTheme();
+    /* @conditional-compile-remove(remote-ufd) */
+    const reconnectingText = useLocale().strings.videoTile.participantReconnecting || 'Reconnecting...';
     const { isMirrored, videoStreamElement, styles, loadingState = 'none' } = props;
     const [pipEnabled, setPipEnabled] = useState(false);
     useEffect(() => {
@@ -40,9 +48,12 @@ export const StreamMedia = (props) => {
             setPipEnabled(false);
         };
     }, [videoStreamElement]);
-    return React.createElement("div", { className: container() },
+    return (React.createElement("div", { className: container() },
         React.createElement("div", { "data-ui-id": "stream-media-container", className: mergeStyles(isMirrored && pipEnabled ? invertedVideoInPipStyle(theme) : mediaContainer(theme), styles === null || styles === void 0 ? void 0 : styles.root), ref: containerEl }),
-        loadingState === 'loading' && React.createElement("div", { className: loadingSpinnerContainer() },
-            React.createElement(Spinner, { "data-ui-id": "stream-media-loading-spinner", styles: loadSpinnerStyles })));
+        loadingState === 'loading' && (React.createElement("div", { className: loadingSpinnerContainer() },
+            React.createElement(Spinner, { "data-ui-id": "stream-media-loading-spinner", styles: loadSpinnerStyles }))),
+        /* @conditional-compile-remove(remote-ufd) */
+        loadingState === 'reconnecting' && (React.createElement(Stack, { className: reconnectingContainer() },
+            React.createElement(Spinner, { "data-ui-id": "stream-media-loading-spinner", styles: reconnectSpinnerStyles(), label: reconnectingText })))));
 };
 //# sourceMappingURL=StreamMedia.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StreamMedia.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/StreamMedia.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAE,SAAS,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC7I,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AA+BtC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAe,EAAE;IAClE,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EACJ,UAAU,EACV,kBAAkB,EAClB,MAAM,EACN,YAAY,GAAG,MAAM,EACtB,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,kHAAkH;QAClH,mHAAmH;QACnH,+BAA+B;QAC/B,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;QACzB,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,kBAAkB,EAAE,CAAC;YACvB,kBAAkB,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,GAAG,EAAE;gBAChE,aAAa,CAAC,IAAI,CAAC,CAAC;YACtB,CAAC,CAAC,CAAC;YACH,kBAAkB,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,GAAG,EAAE;gBAChE,aAAa,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC,CAAC,CAAC;YACH,SAAS,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;QAC5C,CAAC;QACD,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;YACzB,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACzB,OAAO,6BAAK,SAAS,EAAE,SAAS,EAAE;QAC9B,2CAAgB,wBAAwB,EAAC,SAAS,EAAE,WAAW,CAAC,UAAU,IAAI,UAAU,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,EAAE,GAAG,EAAE,WAAW,GAAI;QACrL,YAAY,KAAK,SAAS,IAAI,6BAAK,SAAS,EAAE,uBAAuB,EAAE;YACpE,oBAAC,OAAO,kBAAY,8BAA8B,EAAC,MAAM,EAAE,iBAAiB,GAAI,CAC5E,CAEJ,CAAC;AACX,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Spinner } from '@fluentui/react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { invertedVideoInPipStyle, mediaContainer, container, loadingSpinnerContainer, loadSpinnerStyles } from './styles/StreamMedia.styles';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\n\n/**\n * Whether the stream is loading or not.\n * @public\n */\nexport type LoadingState = 'loading' | 'none' | 'reconnecting';\n\n/**\n * Props for {@link StreamMedia}.\n *\n * @public\n */\nexport interface StreamMediaProps {\n  /** Video stream element to render. */\n  videoStreamElement: HTMLElement | null;\n  /** Decides whether to mirror the video or not. */\n  isMirrored?: boolean;\n  /** Whether the stream is loading data */\n  loadingState?: LoadingState;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <StreamMedia styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n}\n\n/**\n * Utility component to convert an HTMLElement with a video stream into a JSX element.\n *\n * Use to convert an HTMLElement returned by headless calling API into a component that can be rendered as a {@link VideoTile}.\n *\n * @public\n */\nexport const StreamMedia = (props: StreamMediaProps): JSX.Element => {\n  const containerEl = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n  const {\n    isMirrored,\n    videoStreamElement,\n    styles,\n    loadingState = 'none'\n  } = props;\n  const [pipEnabled, setPipEnabled] = useState(false);\n  useEffect(() => {\n    const container = containerEl.current;\n    if (!container) {\n      return;\n    }\n\n    // If videoStreamElement changes, we clear the container to make sure we don't have duplicate, and replace it with\n    // the new videoStreamElement. If videoStreamElement is undefined nothing is appended and container should be empty\n    // and we don't render anyting.\n    container.innerHTML = '';\n    setPipEnabled(false);\n    if (videoStreamElement) {\n      videoStreamElement.addEventListener('enterpictureinpicture', () => {\n        setPipEnabled(true);\n      });\n      videoStreamElement.addEventListener('leavepictureinpicture', () => {\n        setPipEnabled(false);\n      });\n      container.appendChild(videoStreamElement);\n    }\n    return () => {\n      container.innerHTML = '';\n      setPipEnabled(false);\n    };\n  }, [videoStreamElement]);\n  return <div className={container()}>\n      <div data-ui-id=\"stream-media-container\" className={mergeStyles(isMirrored && pipEnabled ? invertedVideoInPipStyle(theme) : mediaContainer(theme), styles?.root)} ref={containerEl} />\n      {loadingState === 'loading' && <div className={loadingSpinnerContainer()}>\n          <Spinner data-ui-id=\"stream-media-loading-spinner\" styles={loadSpinnerStyles} />\n        </div>}\n      {}\n    </div>;\n};"]}
+{"version":3,"file":"StreamMedia.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/StreamMedia.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACvD,6CAA6C;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EACL,uBAAuB,EACvB,cAAc,EACd,SAAS,EACT,uBAAuB,EACvB,iBAAiB,EAClB,MAAM,6BAA6B,CAAC;AACrC,6CAA6C;AAC7C,OAAO,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAC5F,6CAA6C;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AA+BtC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAe,EAAE;IAClE,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,6CAA6C;IAC7C,MAAM,gBAAgB,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,uBAAuB,IAAI,iBAAiB,CAAC;IAEpG,MAAM,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,EAAE,YAAY,GAAG,MAAM,EAAE,GAAG,KAAK,CAAC;IAChF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,kHAAkH;QAClH,mHAAmH;QACnH,+BAA+B;QAC/B,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;QACzB,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,kBAAkB,EAAE,CAAC;YACvB,kBAAkB,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,GAAG,EAAE;gBAChE,aAAa,CAAC,IAAI,CAAC,CAAC;YACtB,CAAC,CAAC,CAAC;YACH,kBAAkB,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,GAAG,EAAE;gBAChE,aAAa,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC,CAAC,CAAC;YACH,SAAS,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;QAC5C,CAAC;QAED,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;YACzB,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE;QACzB,2CACa,wBAAwB,EACnC,SAAS,EAAE,WAAW,CACpB,UAAU,IAAI,UAAU,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,EACjF,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CACb,EACD,GAAG,EAAE,WAAW,GAChB;QACD,YAAY,KAAK,SAAS,IAAI,CAC7B,6BAAK,SAAS,EAAE,uBAAuB,EAAE;YACvC,oBAAC,OAAO,kBAAY,8BAA8B,EAAC,MAAM,EAAE,iBAAiB,GAAI,CAC5E,CACP;QAEC,6CAA6C;QAC7C,YAAY,KAAK,cAAc,IAAI,CACjC,oBAAC,KAAK,IAAC,SAAS,EAAE,qBAAqB,EAAE;YACvC,oBAAC,OAAO,kBACK,8BAA8B,EACzC,MAAM,EAAE,sBAAsB,EAAE,EAChC,KAAK,EAAE,gBAAgB,GACvB,CACI,CACT,CAEC,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Spinner } from '@fluentui/react';\n/* @conditional-compile-remove(remote-ufd) */\nimport { Stack } from '@fluentui/react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport {\n  invertedVideoInPipStyle,\n  mediaContainer,\n  container,\n  loadingSpinnerContainer,\n  loadSpinnerStyles\n} from './styles/StreamMedia.styles';\n/* @conditional-compile-remove(remote-ufd) */\nimport { reconnectingContainer, reconnectSpinnerStyles } from './styles/StreamMedia.styles';\n/* @conditional-compile-remove(remote-ufd) */\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\n\n/**\n * Whether the stream is loading or not.\n * @public\n */\nexport type LoadingState = 'loading' | 'none' | 'reconnecting';\n\n/**\n * Props for {@link StreamMedia}.\n *\n * @public\n */\nexport interface StreamMediaProps {\n  /** Video stream element to render. */\n  videoStreamElement: HTMLElement | null;\n  /** Decides whether to mirror the video or not. */\n  isMirrored?: boolean;\n  /** Whether the stream is loading data */\n  loadingState?: LoadingState;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <StreamMedia styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n}\n\n/**\n * Utility component to convert an HTMLElement with a video stream into a JSX element.\n *\n * Use to convert an HTMLElement returned by headless calling API into a component that can be rendered as a {@link VideoTile}.\n *\n * @public\n */\nexport const StreamMedia = (props: StreamMediaProps): JSX.Element => {\n  const containerEl = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n  /* @conditional-compile-remove(remote-ufd) */\n  const reconnectingText = useLocale().strings.videoTile.participantReconnecting || 'Reconnecting...';\n\n  const { isMirrored, videoStreamElement, styles, loadingState = 'none' } = props;\n  const [pipEnabled, setPipEnabled] = useState(false);\n\n  useEffect(() => {\n    const container = containerEl.current;\n    if (!container) {\n      return;\n    }\n\n    // If videoStreamElement changes, we clear the container to make sure we don't have duplicate, and replace it with\n    // the new videoStreamElement. If videoStreamElement is undefined nothing is appended and container should be empty\n    // and we don't render anyting.\n    container.innerHTML = '';\n    setPipEnabled(false);\n    if (videoStreamElement) {\n      videoStreamElement.addEventListener('enterpictureinpicture', () => {\n        setPipEnabled(true);\n      });\n      videoStreamElement.addEventListener('leavepictureinpicture', () => {\n        setPipEnabled(false);\n      });\n      container.appendChild(videoStreamElement);\n    }\n\n    return () => {\n      container.innerHTML = '';\n      setPipEnabled(false);\n    };\n  }, [videoStreamElement]);\n\n  return (\n    <div className={container()}>\n      <div\n        data-ui-id=\"stream-media-container\"\n        className={mergeStyles(\n          isMirrored && pipEnabled ? invertedVideoInPipStyle(theme) : mediaContainer(theme),\n          styles?.root\n        )}\n        ref={containerEl}\n      />\n      {loadingState === 'loading' && (\n        <div className={loadingSpinnerContainer()}>\n          <Spinner data-ui-id=\"stream-media-loading-spinner\" styles={loadSpinnerStyles} />\n        </div>\n      )}\n      {\n        /* @conditional-compile-remove(remote-ufd) */\n        loadingState === 'reconnecting' && (\n          <Stack className={reconnectingContainer()}>\n            <Spinner\n              data-ui-id=\"stream-media-loading-spinner\"\n              styles={reconnectSpinnerStyles()}\n              label={reconnectingText}\n            />\n          </Stack>\n        )\n      }\n    </div>\n  );\n};\n"]}

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

@@ -38,11 +38,18 @@ export const _StarSurvey = (props) => {
             }
             onStarRatingSelected === null || onStarRatingSelected === void 0 ? void 0 : onStarRatingSelected(rating);
         }
-    }, [strings === null || strings === void 0 ? void 0 : strings.starSurveyOneStarText, strings === null || strings === void 0 ? void 0 : strings.starSurveyTwoStarText, strings === null || strings === void 0 ? void 0 : strings.starSurveyThreeStarText, strings === null || strings === void 0 ? void 0 : strings.starSurveyFourStarText, strings === null || strings === void 0 ? void 0 : strings.starSurveyFiveStarText, onStarRatingSelected]);
-    return React.createElement(Stack, { verticalAlign: "center" },
+    }, [
+        strings === null || strings === void 0 ? void 0 : strings.starSurveyOneStarText,
+        strings === null || strings === void 0 ? void 0 : strings.starSurveyTwoStarText,
+        strings === null || strings === void 0 ? void 0 : strings.starSurveyThreeStarText,
+        strings === null || strings === void 0 ? void 0 : strings.starSurveyFourStarText,
+        strings === null || strings === void 0 ? void 0 : strings.starSurveyFiveStarText,
+        onStarRatingSelected
+    ]);
+    return (React.createElement(Stack, { verticalAlign: "center" },
         React.createElement(Stack, { className: titleContainerClassName },
             React.createElement(Text, { className: helperTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.starSurveyHelperText)),
         React.createElement(Rating, { max: 5, size: RatingSize.Large, defaultRating: 0, allowZeroStars: true, rating: rating, onChange: onRatingChange, styles: ratingStyles(theme), icon: selectedIcon !== null && selectedIcon !== void 0 ? selectedIcon : 'SurveyStarIconFilled', unselectedIcon: unselectedIcon !== null && unselectedIcon !== void 0 ? unselectedIcon : 'SurveyStarIcon', ariaLabelFormat: strings === null || strings === void 0 ? void 0 : strings.starRatingAriaLabel }),
-        React.createElement(Text, { className: ratingHelperTextStyle(theme) }, ratingHelperText));
+        React.createElement(Text, { className: ratingHelperTextStyle(theme) }, ratingHelperText)));
 };
 //# sourceMappingURL=StarSurvey.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StarSurvey.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/Survey/StarSurvey/StarSurvey.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useCallback } from 'react';\nimport { Text, useTheme, Stack } from '@fluentui/react';\nimport { Rating, RatingSize } from '@fluentui/react';\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\nimport { helperTextStyle, ratingHelperTextStyle, ratingStyles, titleContainerClassName } from './StarSurvey.styles';\nimport { _CallSurvey, _CallSurveyResponse } from '../SurveyTypes';\n/**\n * Strings of {@link StarSurvey} that can be overridden.\n *\n * @internal\n */\nexport interface _StarSurveyStrings {\n  /**\n   * Helper text displayed below survey question before user choose a response\n   */\n  starSurveyHelperText?: string;\n  /**\n   * Helper text displayed below survey stars after user select one star\n   */\n  starSurveyOneStarText?: string;\n  /**\n   * Helper text displayed below survey stars after user select two star\n   */\n  starSurveyTwoStarText?: string;\n  /**\n   * Helper text displayed below survey stars after user select three star\n   */\n  starSurveyThreeStarText?: string;\n  /**\n   * Helper text displayed below survey stars after user select four star\n   */\n  starSurveyFourStarText?: string;\n  /**\n   * Helper text displayed below survey stars after user select five star\n   */\n  starSurveyFiveStarText?: string;\n  /**\n   * Aria Label for each individual star rating\n   */\n  starRatingAriaLabel?: string;\n}\n\n/**\n * Props for {@link StarSurvey} component.\n *\n * @internal\n */\nexport interface _StarSurveyProps {\n  /**\n   * Custom icon name for selected rating elements.\n   * @defaultvalue FavoriteStarFill\n   */\n  selectedIcon?: string;\n  /**\n   * Custom icon name for unselected rating elements.\n   * @defaultvalue FavoriteStar\n   */\n  unselectedIcon?: string;\n  /** function called on star rating click*/\n  onStarRatingSelected?: (ratings: number) => void;\n  /** Star survey strings */\n  strings?: _StarSurveyStrings;\n}\n\n/**\n * A component to allow users to send numerical ratings regarding call quality\n *\n * @internal\n */\nexport const _StarSurvey = (props: _StarSurveyProps): JSX.Element => {\n  const {\n    onStarRatingSelected,\n    selectedIcon,\n    unselectedIcon,\n    strings\n  } = props;\n  const [rating, setRating] = useState(0);\n  const [ratingHelperText, setRatingHelperText] = useState<string | undefined>('');\n  const theme = useTheme();\n  const onRatingChange = useCallback((ev: React.FormEvent<HTMLElement>, rating?: number | undefined): void => {\n    if (rating) {\n      setRating(rating);\n      switch (rating) {\n        case 1:\n          setRatingHelperText(strings?.starSurveyOneStarText);\n          break;\n        case 2:\n          setRatingHelperText(strings?.starSurveyTwoStarText);\n          break;\n        case 3:\n          setRatingHelperText(strings?.starSurveyThreeStarText);\n          break;\n        case 4:\n          setRatingHelperText(strings?.starSurveyFourStarText);\n          break;\n        case 5:\n          setRatingHelperText(strings?.starSurveyFiveStarText);\n          break;\n        default:\n          break;\n      }\n      onStarRatingSelected?.(rating);\n    }\n  }, [strings?.starSurveyOneStarText, strings?.starSurveyTwoStarText, strings?.starSurveyThreeStarText, strings?.starSurveyFourStarText, strings?.starSurveyFiveStarText, onStarRatingSelected]);\n  return <Stack verticalAlign=\"center\">\n      <Stack className={titleContainerClassName}>\n        <Text className={helperTextStyle(theme)}>{strings?.starSurveyHelperText}</Text>\n      </Stack>\n      <Rating max={5} size={RatingSize.Large} defaultRating={0} allowZeroStars rating={rating} onChange={onRatingChange} styles={ratingStyles(theme)} icon={selectedIcon ?? 'SurveyStarIconFilled'} unselectedIcon={unselectedIcon ?? 'SurveyStarIcon'} ariaLabelFormat={strings?.starRatingAriaLabel} />\n      <Text className={ratingHelperTextStyle(theme)}>{ratingHelperText}</Text>\n    </Stack>;\n};"]}
+{"version":3,"file":"StarSurvey.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/Survey/StarSurvey/StarSurvey.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useCallback } from 'react';\nimport { Text, useTheme, Stack } from '@fluentui/react';\nimport { Rating, RatingSize } from '@fluentui/react';\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\nimport { helperTextStyle, ratingHelperTextStyle, ratingStyles, titleContainerClassName } from './StarSurvey.styles';\nimport { _CallSurvey, _CallSurveyResponse } from '../SurveyTypes';\n/**\n * Strings of {@link StarSurvey} that can be overridden.\n *\n * @internal\n */\nexport interface _StarSurveyStrings {\n  /**\n   * Helper text displayed below survey question before user choose a response\n   */\n  starSurveyHelperText?: string;\n  /**\n   * Helper text displayed below survey stars after user select one star\n   */\n  starSurveyOneStarText?: string;\n  /**\n   * Helper text displayed below survey stars after user select two star\n   */\n  starSurveyTwoStarText?: string;\n  /**\n   * Helper text displayed below survey stars after user select three star\n   */\n  starSurveyThreeStarText?: string;\n  /**\n   * Helper text displayed below survey stars after user select four star\n   */\n  starSurveyFourStarText?: string;\n  /**\n   * Helper text displayed below survey stars after user select five star\n   */\n  starSurveyFiveStarText?: string;\n  /**\n   * Aria Label for each individual star rating\n   */\n  starRatingAriaLabel?: string;\n}\n\n/**\n * Props for {@link StarSurvey} component.\n *\n * @internal\n */\nexport interface _StarSurveyProps {\n  /**\n   * Custom icon name for selected rating elements.\n   * @defaultvalue FavoriteStarFill\n   */\n  selectedIcon?: string;\n  /**\n   * Custom icon name for unselected rating elements.\n   * @defaultvalue FavoriteStar\n   */\n  unselectedIcon?: string;\n  /** function called on star rating click*/\n  onStarRatingSelected?: (ratings: number) => void;\n  /** Star survey strings */\n  strings?: _StarSurveyStrings;\n}\n\n/**\n * A component to allow users to send numerical ratings regarding call quality\n *\n * @internal\n */\nexport const _StarSurvey = (props: _StarSurveyProps): JSX.Element => {\n  const { onStarRatingSelected, selectedIcon, unselectedIcon, strings } = props;\n\n  const [rating, setRating] = useState(0);\n\n  const [ratingHelperText, setRatingHelperText] = useState<string | undefined>('');\n\n  const theme = useTheme();\n\n  const onRatingChange = useCallback(\n    (ev: React.FormEvent<HTMLElement>, rating?: number | undefined): void => {\n      if (rating) {\n        setRating(rating);\n\n        switch (rating) {\n          case 1:\n            setRatingHelperText(strings?.starSurveyOneStarText);\n            break;\n          case 2:\n            setRatingHelperText(strings?.starSurveyTwoStarText);\n            break;\n          case 3:\n            setRatingHelperText(strings?.starSurveyThreeStarText);\n            break;\n          case 4:\n            setRatingHelperText(strings?.starSurveyFourStarText);\n            break;\n          case 5:\n            setRatingHelperText(strings?.starSurveyFiveStarText);\n            break;\n          default:\n            break;\n        }\n\n        onStarRatingSelected?.(rating);\n      }\n    },\n    [\n      strings?.starSurveyOneStarText,\n      strings?.starSurveyTwoStarText,\n      strings?.starSurveyThreeStarText,\n      strings?.starSurveyFourStarText,\n      strings?.starSurveyFiveStarText,\n      onStarRatingSelected\n    ]\n  );\n\n  return (\n    <Stack verticalAlign=\"center\">\n      <Stack className={titleContainerClassName}>\n        <Text className={helperTextStyle(theme)}>{strings?.starSurveyHelperText}</Text>\n      </Stack>\n      <Rating\n        max={5}\n        size={RatingSize.Large}\n        defaultRating={0}\n        allowZeroStars\n        rating={rating}\n        onChange={onRatingChange}\n        styles={ratingStyles(theme)}\n        icon={selectedIcon ?? 'SurveyStarIconFilled'}\n        unselectedIcon={unselectedIcon ?? 'SurveyStarIcon'}\n        ariaLabelFormat={strings?.starRatingAriaLabel}\n      />\n      <Text className={ratingHelperTextStyle(theme)}>{ratingHelperText}</Text>\n    </Stack>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"StarSurvey.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/Survey/StarSurvey/StarSurvey.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAwB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAEnD;;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,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;IACnC,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;CACzB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC,WAAW,CAAC;IACzE,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;IACxB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;IACjC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAY,EAA0B,EAAE;IACnE,OAAO;QACL,IAAI,EAAE;YACJ,SAAS,EAAE,QAAQ;YACnB,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;SACvB;QACD,iBAAiB,EAAE;YACjB,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,CAAC;SACX;QACD,UAAU,EAAE;YACV,SAAS,EAAE,YAAY;YACvB,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;YACnB,MAAM,EAAE,MAAM;SACf;QACD,eAAe,EAAE;YACf,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;SAClC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,WAAW,CAAC;IACjD,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;CAC3B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IRatingStyles, Theme, mergeStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const helperTextStyle = (theme: Theme): string => mergeStyles({\n  fontWeight: 600,\n  fontSize: _pxToRem(16),\n  lineHeight: _pxToRem(20),\n  color: theme.palette.neutralPrimary,\n  paddingTop: _pxToRem(24)\n});\n\n/**\n * @private\n */\nexport const ratingHelperTextStyle = (theme: Theme): string => mergeStyles({\n  fontWeight: 400,\n  fontSize: _pxToRem(12),\n  lineHeight: _pxToRem(12),\n  color: theme.palette.themePrimary,\n  marginBottom: _pxToRem(8),\n  marginTop: _pxToRem(8),\n  textAlign: 'center'\n});\n\n/**\n * @private\n */\nexport const ratingStyles = (theme: Theme): Partial<IRatingStyles> => {\n  return {\n    root: {\n      textAlign: 'center',\n      height: 'auto',\n      marginTop: _pxToRem(8)\n    },\n    ratingStarIsLarge: {\n      height: 'auto',\n      padding: 0\n    },\n    ratingStar: {\n      transform: 'scale(1.4)',\n      margin: _pxToRem(6),\n      height: 'auto'\n    },\n    ratingStarFront: {\n      color: theme.palette.themePrimary\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const titleContainerClassName = mergeStyles({\n  paddingBottom: _pxToRem(6)\n});"]}
+{"version":3,"file":"StarSurvey.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/Survey/StarSurvey/StarSurvey.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAwB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAEnD;;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,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;IACnC,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;CACzB,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAU,EAAE,CAC5D,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,YAAY;IACjC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAY,EAA0B,EAAE;IACnE,OAAO;QACL,IAAI,EAAE;YACJ,SAAS,EAAE,QAAQ;YACnB,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;SACvB;QACD,iBAAiB,EAAE;YACjB,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,CAAC;SACX;QACD,UAAU,EAAE;YACV,SAAS,EAAE,YAAY;YACvB,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;YACnB,MAAM,EAAE,MAAM;SACf;QACD,eAAe,EAAE;YACf,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;SAClC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,WAAW,CAAC;IACjD,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;CAC3B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IRatingStyles, Theme, mergeStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const helperTextStyle = (theme: Theme): string =>\n  mergeStyles({\n    fontWeight: 600,\n    fontSize: _pxToRem(16),\n    lineHeight: _pxToRem(20),\n    color: theme.palette.neutralPrimary,\n    paddingTop: _pxToRem(24)\n  });\n\n/**\n * @private\n */\nexport const ratingHelperTextStyle = (theme: Theme): string =>\n  mergeStyles({\n    fontWeight: 400,\n    fontSize: _pxToRem(12),\n    lineHeight: _pxToRem(12),\n    color: theme.palette.themePrimary,\n    marginBottom: _pxToRem(8),\n    marginTop: _pxToRem(8),\n    textAlign: 'center'\n  });\n\n/**\n * @private\n */\nexport const ratingStyles = (theme: Theme): Partial<IRatingStyles> => {\n  return {\n    root: {\n      textAlign: 'center',\n      height: 'auto',\n      marginTop: _pxToRem(8)\n    },\n    ratingStarIsLarge: {\n      height: 'auto',\n      padding: 0\n    },\n    ratingStar: {\n      transform: 'scale(1.4)',\n      margin: _pxToRem(6),\n      height: 'auto'\n    },\n    ratingStarFront: {\n      color: theme.palette.themePrimary\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const titleContainerClassName = mergeStyles({\n  paddingBottom: _pxToRem(6)\n});\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SurveyTypes.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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 = 'CallCannotJoin' | 'CallCannotInvite' | 'HadToRejoin' | 'CallEndedUnexpectedly' | '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 = 'NoLocalAudio' | 'NoRemoteAudio' | 'Echo' | 'AudioNoise' | 'LowVolume' | 'AudioStoppedUnexpectedly' | 'DistortedSpeech' | 'AudioInterruption' | '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 = 'NoContentLocal' | 'NoContentRemote' | 'CannotPresent' | 'LowQuality' | 'Freezes' | 'StoppedUnexpectedly' | 'LargeDelay' | '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 = 'NoVideoReceived' | 'NoVideoSent' | 'LowQuality' | 'Freezes' | 'StoppedUnexpectedly' | 'DarkVideoReceived' | 'AudioVideoOutOfSync' | '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}"]}
+{"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.js

@@ -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,10 +36,12 @@ export const _TagsSurvey = (props) => {
                     });
                 }
                 else {
-                    tags[issueCategory] = [{
+                    tags[issueCategory] = [
+                        {
                             message: issueMessages[issue],
                             issue: issueCapitalized
-                        }];
+                        }
+                    ];
                 }
             });
         });
@@ -48,22 +50,20 @@ 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

@@ -1 +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/**\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<_IssueCategory, {\n  message: string;\n  issue: _AudioIssue | _OverallIssue | _ScreenshareIssue | _VideoIssue;\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 {\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 <>\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 <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>\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          })}\n              {showFreeFormTextField && <Checkbox checked={checkedTextFields.includes(key)} styles={freeFormTextCheckboxStyles} onChange={(ev, checked) => onChange(key, checked ?? false)} onRenderLabel={() => {\n            return onRenderLabel(key);\n          }} />}\n            </PivotItem>;\n      })}\n      </Pivot>\n\n      <Text className={helperTextStyle(theme)}>{strings?.tagsSurveyHelperText}</Text>\n    </>;\n};"]}
+{"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"]}

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

@@ -1 +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/**\n * @private\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/**\n * @private\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/**\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});"]}
+{"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

@@ -18,12 +18,10 @@ 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), 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,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,QAAQ,EAAE,CAAC;YACnF,IAAI;YACL,oBAAC,IAAI,IAAC,KAAK,EAAE;oBACb,SAAS,EAAE,YAAY;iBACxB,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,IAC5C,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/**\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  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 <>\n      <LiveMessage message={liveMessage} ariaLive=\"polite\" clearOnUnmount={true} />\n      <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    </>;\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,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,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAwB,CAAC,EAAE,QAAQ,EAAE,CAAC;YACnF,IAAI;YACL,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,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 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};\n"]}

package/dist/dist-esm/react-components/src/components/TextFieldWithMention/TextFieldWithMention.d.ts

@@ -0,0 +1,24 @@
+import React, { FormEvent } from 'react';
+import { ITextField, ITextFieldProps } from '@fluentui/react';
+import { MentionLookupOptions } from '../MentionPopover';
+/**
+ * Props for the TextFieldWithMention component.
+ *
+ * @private
+ */
+export interface TextFieldWithMentionProps {
+    textFieldProps: ITextFieldProps;
+    dataUiId?: string;
+    textValue: string;
+    onChange: (event?: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;
+    onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onEnterKeyDown?: () => void;
+    textFieldRef?: React.RefObject<ITextField>;
+    supportNewline?: boolean;
+    mentionLookupOptions?: MentionLookupOptions;
+}
+/**
+ * @private
+ */
+export declare const TextFieldWithMention: (props: TextFieldWithMentionProps) => JSX.Element;
+//# sourceMappingURL=TextFieldWithMention.d.ts.map