@azure/communication-react 1.12.0 → 1.12.1-alpha-202401190013

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

@@ -1 +1 @@
-{"version":3,"file":"StartCaptionsButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/StartCaptionsButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA+DhD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,EACJ,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,qBAAqB,EACrB,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,iBAAiB,GAAG,GAAgB,EAAE;QAC1C,iDAAiD;QACjD,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,cAAc,GAAG,CAAC;QACpF,OAAO,yCAAK,CAAC;IACf,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,GAAgB,EAAE;QACxC,iDAAiD;QACjD,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,iBAAiB,GAAG,CAAC;QACvF,OAAO,yCAAK,CAAC;IACf,CAAC,CAAC;IACF,MAAM,OAAO,GAAqB,OAAO,CAAC,GAAG,EAAE;QAC7C,OAAO;YACL,cAAc,EAAE,qBAAqB,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB;SAC7F,CAAC;IACJ,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAC5B,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxE,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAwB,EAAE;QAClE,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,cAAc,EAAE,CAAC;QACnB,CAAC;aAAM,CAAC;YACN,MAAM,eAAe,CAAC,OAAO,CAAC,CAAC;QACjC,CAAC;IACH,CAAC,CAAA,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC;IAC9D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC3C,4EAA4E;YAC5E,iIAAiI;YACjI,mBAAmB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;YAC5C,6EAA6E;YAC7E,uBAAuB,CAAC,IAAI,CAAC,CAAC;QAChC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,mBAAmB,EAAE,OAAO,CAAC,cAAc,EAAE,oBAAoB,CAAC,CAAC,CAAC;IACvF,OAAO,oBAAC,gBAAgB,oBAAK,KAAK,IAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,KAAK,CAAC,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,eAAe,EAAE,eAAe,IAAI,CAAC;AACjL,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { defaultSpokenLanguage } from './utils';\n\n/**\n * options bag to start captions\n *\n * @internal\n */\nexport type _captionsOptions = {\n  spokenLanguage: string;\n};\n\n/**\n *@internal\n */\nexport interface _StartCaptionsButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with communication react handlers\n   * Start captions based on captions state\n   */\n  onStartCaptions: (options?: _captionsOptions) => Promise<void>;\n  /**\n   * Utility property for using this component with communication react handlers\n   * Stop captions based on captions state\n   */\n  onStopCaptions: () => Promise<void>;\n  /**\n   * Utility property for using this component with communication react handlers\n   * set captions spoken language\n   */\n  onSetSpokenLanguage: (language: string) => Promise<void>;\n  /**\n   * Spoken language set for starting captions\n   */\n  currentSpokenLanguage: string;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: _StartCaptionsButtonStrings;\n}\n\n/**\n * Strings for the hold button labels\n * @internal\n */\nexport interface _StartCaptionsButtonStrings {\n  /**\n   * Label for when action is to start Captions\n   */\n  onLabel: string;\n  /**\n   * Label for when action is to stop Captions\n   */\n  offLabel: string;\n  /**\n   * Content for when button is checked, captions is on\n   */\n  tooltipOnContent: string;\n  /**\n   * Content for when button is unchecked, captions is off\n   */\n  tooltipOffContent: string;\n}\n\n/**\n * a button to start or stop captions\n *\n * Can be used with {@link ControlBar}\n *\n * @param props - properties for the start captions button.\n * @internal\n */\nexport const _StartCaptionsButton = (props: _StartCaptionsButtonProps): JSX.Element => {\n  const {\n    onStartCaptions,\n    onStopCaptions,\n    onSetSpokenLanguage,\n    currentSpokenLanguage,\n    strings\n  } = props;\n  const onRenderStartIcon = (): JSX.Element => {\n    /* @conditional-compile-remove(close-captions) */\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"CaptionsIcon\" />;\n    return <></>;\n  };\n  const onRenderOffIcon = (): JSX.Element => {\n    /* @conditional-compile-remove(close-captions) */\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"CaptionsOffIcon\" />;\n    return <></>;\n  };\n  const options: _captionsOptions = useMemo(() => {\n    return {\n      spokenLanguage: currentSpokenLanguage === '' ? defaultSpokenLanguage : currentSpokenLanguage\n    };\n  }, [currentSpokenLanguage]);\n  const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);\n  const onToggleStartCaptions = useCallback(async (): Promise<void> => {\n    if (props.checked) {\n      onStopCaptions();\n    } else {\n      await onStartCaptions(options);\n    }\n  }, [props.checked, onStartCaptions, onStopCaptions, options]);\n  useEffect(() => {\n    if (props.checked && !hasSetSpokenLanguage) {\n      // set spoken language when start captions with a spoken language specified.\n      // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language\n      onSetSpokenLanguage(options.spokenLanguage);\n      // we only need to call set spoken language once when first starting captions\n      setHasSetSpokenLanguage(true);\n    }\n  }, [props.checked, onSetSpokenLanguage, options.spokenLanguage, hasSetSpokenLanguage]);\n  return <ControlBarButton {...props} strings={strings} onClick={onToggleStartCaptions ?? props.onClick} onRenderOnIcon={onRenderStartIcon} onRenderOffIcon={onRenderOffIcon} />;\n};"]}
+{"version":3,"file":"StartCaptionsButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/StartCaptionsButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA+DhD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,EAAE,eAAe,EAAE,cAAc,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEvG,MAAM,iBAAiB,GAAG,GAAgB,EAAE;QAC1C,iDAAiD;QACjD,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,cAAc,GAAG,CAAC;QACpF,OAAO,yCAAK,CAAC;IACf,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,GAAgB,EAAE;QACxC,iDAAiD;QACjD,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,iBAAiB,GAAG,CAAC;QACvF,OAAO,yCAAK,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,OAAO,GAAqB,OAAO,CAAC,GAAG,EAAE;QAC7C,OAAO,EAAE,cAAc,EAAE,qBAAqB,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAC1G,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE5B,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExE,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAwB,EAAE;QAClE,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,cAAc,EAAE,CAAC;QACnB,CAAC;aAAM,CAAC;YACN,MAAM,eAAe,CAAC,OAAO,CAAC,CAAC;QACjC,CAAC;IACH,CAAC,CAAA,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC3C,4EAA4E;YAC5E,iIAAiI;YACjI,mBAAmB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;YAC5C,6EAA6E;YAC7E,uBAAuB,CAAC,IAAI,CAAC,CAAC;QAChC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,mBAAmB,EAAE,OAAO,CAAC,cAAc,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEvF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,KAAK,CAAC,OAAO,EAC/C,cAAc,EAAE,iBAAiB,EACjC,eAAe,EAAE,eAAe,IAChC,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { defaultSpokenLanguage } from './utils';\n\n/**\n * options bag to start captions\n *\n * @internal\n */\nexport type _captionsOptions = {\n  spokenLanguage: string;\n};\n\n/**\n *@internal\n */\nexport interface _StartCaptionsButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with communication react handlers\n   * Start captions based on captions state\n   */\n  onStartCaptions: (options?: _captionsOptions) => Promise<void>;\n  /**\n   * Utility property for using this component with communication react handlers\n   * Stop captions based on captions state\n   */\n  onStopCaptions: () => Promise<void>;\n  /**\n   * Utility property for using this component with communication react handlers\n   * set captions spoken language\n   */\n  onSetSpokenLanguage: (language: string) => Promise<void>;\n  /**\n   * Spoken language set for starting captions\n   */\n  currentSpokenLanguage: string;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: _StartCaptionsButtonStrings;\n}\n\n/**\n * Strings for the hold button labels\n * @internal\n */\nexport interface _StartCaptionsButtonStrings {\n  /**\n   * Label for when action is to start Captions\n   */\n  onLabel: string;\n  /**\n   * Label for when action is to stop Captions\n   */\n  offLabel: string;\n  /**\n   * Content for when button is checked, captions is on\n   */\n  tooltipOnContent: string;\n  /**\n   * Content for when button is unchecked, captions is off\n   */\n  tooltipOffContent: string;\n}\n\n/**\n * a button to start or stop captions\n *\n * Can be used with {@link ControlBar}\n *\n * @param props - properties for the start captions button.\n * @internal\n */\nexport const _StartCaptionsButton = (props: _StartCaptionsButtonProps): JSX.Element => {\n  const { onStartCaptions, onStopCaptions, onSetSpokenLanguage, currentSpokenLanguage, strings } = props;\n\n  const onRenderStartIcon = (): JSX.Element => {\n    /* @conditional-compile-remove(close-captions) */\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"CaptionsIcon\" />;\n    return <></>;\n  };\n  const onRenderOffIcon = (): JSX.Element => {\n    /* @conditional-compile-remove(close-captions) */\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"CaptionsOffIcon\" />;\n    return <></>;\n  };\n\n  const options: _captionsOptions = useMemo(() => {\n    return { spokenLanguage: currentSpokenLanguage === '' ? defaultSpokenLanguage : currentSpokenLanguage };\n  }, [currentSpokenLanguage]);\n\n  const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);\n\n  const onToggleStartCaptions = useCallback(async (): Promise<void> => {\n    if (props.checked) {\n      onStopCaptions();\n    } else {\n      await onStartCaptions(options);\n    }\n  }, [props.checked, onStartCaptions, onStopCaptions, options]);\n\n  useEffect(() => {\n    if (props.checked && !hasSetSpokenLanguage) {\n      // set spoken language when start captions with a spoken language specified.\n      // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language\n      onSetSpokenLanguage(options.spokenLanguage);\n      // we only need to call set spoken language once when first starting captions\n      setHasSetSpokenLanguage(true);\n    }\n  }, [props.checked, onSetSpokenLanguage, options.spokenLanguage, hasSetSpokenLanguage]);\n\n  return (\n    <ControlBarButton\n      {...props}\n      strings={strings}\n      onClick={onToggleStartCaptions ?? props.onClick}\n      onRenderOnIcon={onRenderStartIcon}\n      onRenderOffIcon={onRenderOffIcon}\n    />\n  );\n};\n"]}

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

@@ -40,9 +40,9 @@ 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 })))));
 };
 //# 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,CACJ,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';\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    </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,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,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;IAEzB,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,CACG,CACP,CAAC;AACJ,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 {\n  invertedVideoInPipStyle,\n  mediaContainer,\n  container,\n  loadingSpinnerContainer,\n  loadSpinnerStyles\n} 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';\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\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    </div>\n  );\n};\n"]}

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

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+/**
+ * Strings of {@link StarSurvey} that can be overridden.
+ *
+ * @internal
+ */
+export interface _StarSurveyStrings {
+    /**
+     * Helper text displayed below survey question before user choose a response
+     */
+    starSurveyHelperText?: string;
+    /**
+     * Helper text displayed below survey stars after user select one star
+     */
+    starSurveyOneStarText?: string;
+    /**
+     * Helper text displayed below survey stars after user select two star
+     */
+    starSurveyTwoStarText?: string;
+    /**
+     * Helper text displayed below survey stars after user select three star
+     */
+    starSurveyThreeStarText?: string;
+    /**
+     * Helper text displayed below survey stars after user select four star
+     */
+    starSurveyFourStarText?: string;
+    /**
+     * Helper text displayed below survey stars after user select five star
+     */
+    starSurveyFiveStarText?: string;
+    /**
+     * Aria Label for each individual star rating
+     */
+    starRatingAriaLabel?: string;
+}
+/**
+ * Props for {@link StarSurvey} component.
+ *
+ * @internal
+ */
+export interface _StarSurveyProps {
+    /**
+     * Custom icon name for selected rating elements.
+     * @defaultvalue FavoriteStarFill
+     */
+    selectedIcon?: string;
+    /**
+     * Custom icon name for unselected rating elements.
+     * @defaultvalue FavoriteStar
+     */
+    unselectedIcon?: string;
+    /** function called on star rating click*/
+    onStarRatingSelected?: (ratings: number) => void;
+    /** Star survey strings */
+    strings?: _StarSurveyStrings;
+}
+/**
+ * A component to allow users to send numerical ratings regarding call quality
+ *
+ * @internal
+ */
+export declare const _StarSurvey: (props: _StarSurveyProps) => JSX.Element;
+//# sourceMappingURL=StarSurvey.d.ts.map

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

@@ -0,0 +1,55 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useState, useCallback } from 'react';
+import { Text, useTheme, Stack } from '@fluentui/react';
+import { Rating, RatingSize } from '@fluentui/react';
+import { helperTextStyle, ratingHelperTextStyle, ratingStyles, titleContainerClassName } from './StarSurvey.styles';
+/**
+ * A component to allow users to send numerical ratings regarding call quality
+ *
+ * @internal
+ */
+export const _StarSurvey = (props) => {
+    const { onStarRatingSelected, selectedIcon, unselectedIcon, strings } = props;
+    const [rating, setRating] = useState(0);
+    const [ratingHelperText, setRatingHelperText] = useState('');
+    const theme = useTheme();
+    const onRatingChange = useCallback((ev, rating) => {
+        if (rating) {
+            setRating(rating);
+            switch (rating) {
+                case 1:
+                    setRatingHelperText(strings === null || strings === void 0 ? void 0 : strings.starSurveyOneStarText);
+                    break;
+                case 2:
+                    setRatingHelperText(strings === null || strings === void 0 ? void 0 : strings.starSurveyTwoStarText);
+                    break;
+                case 3:
+                    setRatingHelperText(strings === null || strings === void 0 ? void 0 : strings.starSurveyThreeStarText);
+                    break;
+                case 4:
+                    setRatingHelperText(strings === null || strings === void 0 ? void 0 : strings.starSurveyFourStarText);
+                    break;
+                case 5:
+                    setRatingHelperText(strings === null || strings === void 0 ? void 0 : strings.starSurveyFiveStarText);
+                    break;
+                default:
+                    break;
+            }
+            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" },
+        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)));
+};
+//# sourceMappingURL=StarSurvey.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StarSurvey.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/Survey/StarSurvey/StarSurvey.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AA4DpH;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAe,EAAE;IAClE,MAAM,EAAE,oBAAoB,EAAE,YAAY,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAE9E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAExC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAqB,EAAE,CAAC,CAAC;IAEjF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,EAAgC,EAAE,MAA2B,EAAQ,EAAE;QACtE,IAAI,MAAM,EAAE,CAAC;YACX,SAAS,CAAC,MAAM,CAAC,CAAC;YAElB,QAAQ,MAAM,EAAE,CAAC;gBACf,KAAK,CAAC;oBACJ,mBAAmB,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,qBAAqB,CAAC,CAAC;oBACpD,MAAM;gBACR,KAAK,CAAC;oBACJ,mBAAmB,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,qBAAqB,CAAC,CAAC;oBACpD,MAAM;gBACR,KAAK,CAAC;oBACJ,mBAAmB,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB,CAAC,CAAC;oBACtD,MAAM;gBACR,KAAK,CAAC;oBACJ,mBAAmB,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,sBAAsB,CAAC,CAAC;oBACrD,MAAM;gBACR,KAAK,CAAC;oBACJ,mBAAmB,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,sBAAsB,CAAC,CAAC;oBACrD,MAAM;gBACR;oBACE,MAAM;YACV,CAAC;YAED,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAG,MAAM,CAAC,CAAC;QACjC,CAAC;IACH,CAAC,EACD;QACE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,qBAAqB;QAC9B,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,qBAAqB;QAC9B,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB;QAChC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,sBAAsB;QAC/B,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,sBAAsB;QAC/B,oBAAoB;KACrB,CACF,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,IAAC,aAAa,EAAC,QAAQ;QAC3B,oBAAC,KAAK,IAAC,SAAS,EAAE,uBAAuB;YACvC,oBAAC,IAAI,IAAC,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,CAAQ,CACzE;QACR,oBAAC,MAAM,IACL,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,UAAU,CAAC,KAAK,EACtB,aAAa,EAAE,CAAC,EAChB,cAAc,QACd,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,cAAc,EACxB,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC,EAC3B,IAAI,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,sBAAsB,EAC5C,cAAc,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,gBAAgB,EAClD,eAAe,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,GAC7C;QACF,oBAAC,IAAI,IAAC,SAAS,EAAE,qBAAqB,CAAC,KAAK,CAAC,IAAG,gBAAgB,CAAQ,CAClE,CACT,CAAC;AACJ,CAAC,CAAC","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.d.ts

@@ -0,0 +1,18 @@
+import { IRatingStyles, Theme } from '@fluentui/react';
+/**
+ * @private
+ */
+export declare const helperTextStyle: (theme: Theme) => string;
+/**
+ * @private
+ */
+export declare const ratingHelperTextStyle: (theme: Theme) => string;
+/**
+ * @private
+ */
+export declare const ratingStyles: (theme: Theme) => Partial<IRatingStyles>;
+/**
+ * @private
+ */
+export declare const titleContainerClassName: string;
+//# sourceMappingURL=StarSurvey.styles.d.ts.map

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

@@ -0,0 +1,57 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { mergeStyles } from '@fluentui/react';
+import { _pxToRem } from "../../../../../acs-ui-common/src";
+/**
+ * @private
+ */
+export const helperTextStyle = (theme) => mergeStyles({
+    fontWeight: 600,
+    fontSize: _pxToRem(16),
+    lineHeight: _pxToRem(20),
+    color: theme.palette.neutralPrimary,
+    paddingTop: _pxToRem(20)
+});
+/**
+ * @private
+ */
+export const ratingHelperTextStyle = (theme) => mergeStyles({
+    fontWeight: 400,
+    fontSize: _pxToRem(12),
+    lineHeight: _pxToRem(12),
+    color: theme.palette.themePrimary,
+    marginBottom: _pxToRem(24),
+    marginTop: _pxToRem(10),
+    textAlign: 'center'
+});
+/**
+ * @private
+ */
+export const ratingStyles = (theme) => {
+    return {
+        root: {
+            textAlign: 'center',
+            height: 'auto',
+            marginTop: _pxToRem(8)
+        },
+        ratingStarIsLarge: {
+            height: 'auto',
+            padding: 0
+        },
+        ratingStar: {
+            transform: 'scale(1.2)',
+            margin: _pxToRem(6),
+            height: 'auto'
+        },
+        ratingStarFront: {
+            color: theme.palette.themePrimary
+        }
+    };
+};
+/**
+ * @private
+ */
+export const titleContainerClassName = mergeStyles({
+    paddingBottom: _pxToRem(6)
+});
+//# sourceMappingURL=StarSurvey.styles.js.map

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

@@ -0,0 +1 @@
+{"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,EAAE,CAAC;IAC1B,SAAS,EAAE,QAAQ,CAAC,EAAE,CAAC;IACvB,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(20)\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(24),\n    marginTop: _pxToRem(10),\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.2)',\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.d.ts

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

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

@@ -0,0 +1,4 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+export {};
+//# sourceMappingURL=SurveyTypes.js.map

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,63 @@
+/// <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 = {
+    [issueCategory: string]: {
+        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,118 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useCallback, useMemo, useState } from 'react';
+import { Text, useTheme, Stack, Checkbox, Pivot, PivotItem, TextField } from '@fluentui/react';
+import { checkboxClassName, questionTextStyle, helperTextStyle, freeFormTextFieldClassName, freeFormTextCheckboxStyles } from './TagsSurvey.styles';
+/**
+ * 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 tags = useMemo(() => {
+        const tags = [];
+        Object.keys(callIssuesToTag).forEach((issueCategory) => {
+            Object.keys(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));
+                if (tags[issueCategory]) {
+                    tags[issueCategory].push({
+                        message: callIssuesToTag[issueCategory][issue],
+                        issue: issueCapitalized
+                    });
+                }
+                else {
+                    tags[issueCategory] = [
+                        {
+                            message: callIssuesToTag[issueCategory][issue],
+                            issue: issueCapitalized
+                        }
+                    ];
+                }
+            });
+        });
+        return tags;
+    }, [callIssuesToTag]);
+    const onChange = React.useCallback((issueCategory, checked, issue) => {
+        if (checked) {
+            if (issue) {
+                setSelectedTags((prevState) => {
+                    if (prevState[issueCategory]) {
+                        prevState[issueCategory].issues.push(issue);
+                    }
+                    else {
+                        prevState[issueCategory] = { score: 1, issues: [issue] };
+                    }
+                    return prevState;
+                });
+            }
+            else {
+                setSelectedTextResponse((prevState) => {
+                    prevState[issueCategory] = textResponse[issueCategory];
+                    return prevState;
+                });
+            }
+        }
+        else {
+            if (issue) {
+                setSelectedTags((prevState) => {
+                    if (prevState[issueCategory]) {
+                        prevState[issueCategory].issues = prevState[issueCategory].issues.filter(function (value) {
+                            return value !== issue;
+                        });
+                        if (prevState[issueCategory].issues.length === 0) {
+                            delete prevState[issueCategory];
+                        }
+                    }
+                    return prevState;
+                });
+            }
+            else {
+                setSelectedTextResponse((prevState) => {
+                    delete prevState[issueCategory];
+                    return prevState;
+                });
+            }
+        }
+        if (onConfirm) {
+            onConfirm(selectedTags, selectedTextResponse);
+        }
+    }, [onConfirm, selectedTags, selectedTextResponse, textResponse]);
+    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) {
+                    setTextResponse((prevState) => {
+                        prevState[issueCategory] = v;
+                        return prevState;
+                    });
+                    setSelectedTextResponse((prevState) => {
+                        if (Object.keys(prevState).includes(issueCategory)) {
+                            prevState[issueCategory] = v;
+                        }
+                        return prevState;
+                    });
+                }
+            } }));
+    }, [strings === null || strings === void 0 ? void 0 : strings.tagsSurveyTextFieldDefaultText]);
+    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, Object.keys(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, { 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