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

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

@@ -1 +1 @@
-{"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/SendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';\nimport { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';\nimport { BaseCustomStyles } from '../types';\nimport { useTheme } from '../theming';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { InputBoxComponent } from './InputBoxComponent';\nimport { InputBoxButton } from './InputBoxButton';\n/* @conditional-compile-remove(file-sharing) */\nimport { SendBoxErrors } from './SendBoxErrors';\n/* @conditional-compile-remove(file-sharing) */\nimport { ActiveFileUpload, _FileUploadCards } from './FileUploadCards';\n/* @conditional-compile-remove(file-sharing) */\nimport { fileUploadCardsStyles } from './styles/SendBox.styles';\n/* @conditional-compile-remove(file-sharing) */\nimport { SendBoxErrorBarError } from './SendBoxErrorBar';\n/* @conditional-compile-remove(file-sharing) */\nimport { hasCompletedFileUploads, hasIncompleteFileUploads } from './utils/SendBoxUtils';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from './MentionPopover';\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\nconst EMPTY_MESSAGE_REGEX = /^\\s*$/;\n\n/**\n * Fluent styles for {@link Sendbox}.\n *\n * @public\n */\nexport interface SendBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n  /** styles for the text field container */\n  textFieldContainer?: IStyle;\n  /** Styles for the container of the send message icon. */\n  sendMessageIconContainer?: IStyle;\n  /** Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. */\n  sendMessageIcon?: IStyle;\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n}\n\n/**\n * Strings of {@link SendBox} that can be overridden.\n *\n * @public\n */\nexport interface SendBoxStrings {\n  /**\n   * Placeholder text in SendBox when there is no user input\n   */\n  placeholderText: string;\n  /**\n   * The warning message when send box text length is more than max limit\n   */\n  textTooLong: string;\n  /**\n   * Aria label for send message button\n   */\n  sendButtonAriaLabel: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Error message indicating that all file uploads are not complete.\n   */\n  fileUploadsPendingError: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user when focus is on cancel file upload button.\n   */\n  removeFile: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user file uploading starts.\n   */\n  uploading: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user file is uploaded.\n   */\n  uploadCompleted: string;\n}\n\n/**\n * Props for {@link SendBox}.\n *\n * @public\n */\nexport interface SendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional text for system message below text box\n   */\n  systemMessage?: string;\n  /**\n   * Optional override behavior on send button click\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  /* @conditional-compile-remove(mention) */\n  /**\n   * Optional props needed to lookup suggestions in the mention scenario.\n   * @beta\n   */\n  mentionLookupOptions?: MentionLookupOptions;\n\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\n  /**\n   * Optional callback to render system message below the SendBox.\n   * @defaultValue MessageBar\n   */\n  onRenderSystemMessage?: (systemMessage: string | undefined) => React.ReactElement;\n  /**\n   * Optional boolean to support new line in SendBox.\n   * @defaultValue false\n   */\n  supportNewline?: boolean;\n  /**\n   * Optional callback to render send button icon to the right of the SendBox.\n   * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise\n   */\n  onRenderIcon?: (isHover: boolean) => JSX.Element;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <SendBox styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: SendBoxStylesProps;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<SendBoxStrings>;\n  /**\n   * enumerable to determine if the input box has focus on render or not.\n   * When undefined nothing has focus on render\n   */\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to render uploaded files in the SendBox. The sendBox will expand\n   * vertically to accommodate the uploaded files. File uploads will\n   * be rendered below the text area in sendBox.\n   * @beta\n   */\n  onRenderFileUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional array of active file uploads where each object has attributes\n   * of a file upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeFileUploads?: ActiveFileUpload[];\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to remove the file upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelFileUpload?: (fileId: string) => void;\n}\n\n/**\n * Component for typing and sending messages.\n *\n * Supports sending typing notification when user starts entering text.\n * Supports an optional message below the text input field.\n *\n * @public\n */\nexport const SendBox = (props: SendBoxProps): JSX.Element => {\n  const {\n    disabled,\n    systemMessage,\n    supportNewline,\n    onSendMessage,\n    onTyping,\n    onRenderIcon,\n    onRenderSystemMessage,\n    styles,\n    autoFocus,\n    /* @conditional-compile-remove(mention) */\n    mentionLookupOptions,\n    /* @conditional-compile-remove(file-sharing) */\n    activeFileUploads\n  } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.sendBox;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const ids = useIdentifiers();\n  const [textValue, setTextValue] = useState('');\n  const [textValueOverflow, setTextValueOverflow] = useState(false);\n  const sendTextFieldRef = React.useRef<ITextField>(null);\n\n  /* @conditional-compile-remove(file-sharing) */\n  const [fileUploadsPendingError, setFileUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(undefined);\n  const sendMessageOnClick = (): void => {\n    // don't send a message when disabled\n    if (disabled || textValueOverflow) {\n      return;\n    }\n\n    // Don't send message until all files have been uploaded successfully\n    /* @conditional-compile-remove(file-sharing) */\n    setFileUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(file-sharing) */\n    if (hasIncompleteFileUploads(activeFileUploads)) {\n      setFileUploadsPendingError({\n        message: strings.fileUploadsPendingError,\n        timestamp: Date.now()\n      });\n      return;\n    }\n    const message = textValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid file upload\n    if (!EMPTY_MESSAGE_REGEX.test(message) || /* @conditional-compile-remove(file-sharing) */hasCompletedFileUploads(activeFileUploads)) {\n      onSendMessage && onSendMessage(sanitizeText(message));\n      setTextValue('');\n    }\n    sendTextFieldRef.current?.focus();\n  };\n  const setText = (newValue?: string | undefined): void => {\n    if (newValue === undefined) {\n      return;\n    }\n    if (newValue.length > MAXIMUM_LENGTH_OF_MESSAGE) {\n      setTextValueOverflow(true);\n    } else {\n      setTextValueOverflow(false);\n    }\n    setTextValue(newValue);\n  };\n  const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;\n  const errorMessage = systemMessage ?? textTooLongMessage;\n  const mergedSendButtonStyle = useMemo(() => mergeStyles(sendButtonStyle, styles?.sendMessageIconContainer), [styles?.sendMessageIconContainer]);\n  const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);\n  const mergedSendIconStyle = useMemo(() => sendIconStyle({\n    theme,\n    hasText: !!textValue,\n    /* @conditional-compile-remove(file-sharing) */hasFile: hasCompletedFileUploads(activeFileUploads),\n    hasErrorMessage: !!errorMessage,\n    customSendIconStyle: styles?.sendMessageIcon\n  }), [theme, textValue, /* @conditional-compile-remove(file-sharing) */activeFileUploads, errorMessage, styles?.sendMessageIcon]);\n  const onRenderSendIcon = useCallback((isHover: boolean) => onRenderIcon ? onRenderIcon(isHover) : <Icon iconName={isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend'} className={mergedSendIconStyle} />, [mergedSendIconStyle, onRenderIcon, textValue]);\n\n  // Ensure that errors are cleared when there are no files in sendBox\n  /* @conditional-compile-remove(file-sharing) */\n  React.useEffect(() => {\n    if (!activeFileUploads?.filter(upload => !upload.error).length) {\n      setFileUploadsPendingError(undefined);\n    }\n  }, [activeFileUploads]);\n\n  /* @conditional-compile-remove(file-sharing) */\n  const sendBoxErrorsProps = useMemo(() => {\n    return {\n      fileUploadsPendingError: fileUploadsPendingError,\n      fileUploadError: activeFileUploads?.filter(fileUpload => fileUpload.error).pop()?.error\n    };\n  }, [activeFileUploads, fileUploadsPendingError]);\n\n  /* @conditional-compile-remove(file-sharing) */\n  const onRenderFileUploads = useCallback(() => {\n    if (!activeFileUploads?.filter(upload => !upload.error).length) {\n      return null;\n    }\n    return props.onRenderFileUploads ? props.onRenderFileUploads() : <Stack className={fileUploadCardsStyles}>\n        <_FileUploadCards activeFileUploads={activeFileUploads} onCancelFileUpload={props.onCancelFileUpload} strings={{\n        removeFile: props.strings?.removeFile ?? localeStrings.removeFile,\n        uploading: props.strings?.uploading ?? localeStrings.uploading,\n        uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted\n      }} />\n      </Stack>;\n  }, [activeFileUploads, props, localeStrings]);\n  return <Stack className={mergeStyles(sendBoxWrapperStyles, {\n    overflow: 'visible'\n  } // This is needed for the mention popup to be visible\n  )}>\n      {/* @conditional-compile-remove(file-sharing) */<SendBoxErrors {...sendBoxErrorsProps} />}\n      <Stack className={borderAndBoxShadowStyle({\n      theme,\n      hasErrorMessage: !!errorMessage,\n      disabled: !!disabled\n    })}>\n        <InputBoxComponent autoFocus={autoFocus} data-ui-id={ids.sendboxTextField} disabled={disabled} errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage} textFieldRef={sendTextFieldRef} id=\"sendbox\" placeholderText={strings.placeholderText} textValue={textValue} onChange={(_, newValue) => setText(newValue)} onKeyDown={ev => {\n        const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);\n        if (!keyWasSendingMessage) {\n          onTyping?.();\n        }\n      }} onEnterKeyDown={() => {\n        sendMessageOnClick();\n      }} styles={mergedStyles} supportNewline={supportNewline} maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n      /* @conditional-compile-remove(mention) */ mentionLookupOptions={mentionLookupOptions}>\n          <InputBoxButton onRenderIcon={onRenderSendIcon} onClick={e => {\n          if (!textValueOverflow) {\n            sendMessageOnClick();\n          }\n          e.stopPropagation();\n        }} id={'sendIconWrapper'} className={mergedSendButtonStyle} ariaLabel={localeStrings.sendButtonAriaLabel} tooltipContent={localeStrings.sendButtonAriaLabel} />\n        </InputBoxComponent>\n        {/* @conditional-compile-remove(file-sharing) */\n      onRenderFileUploads()}\n      </Stack>\n    </Stack>;\n};\n\n/**\n * @private\n */\nconst sanitizeText = (message: string): string => {\n  if (EMPTY_MESSAGE_REGEX.test(message)) {\n    return '';\n  } else {\n    return message;\n  }\n};"]}
+{"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';\nimport { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';\nimport { BaseCustomStyles } from '../types';\nimport { useTheme } from '../theming';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { InputBoxComponent } from './InputBoxComponent';\nimport { InputBoxButton } from './InputBoxButton';\n/* @conditional-compile-remove(file-sharing) */\nimport { SendBoxErrors } from './SendBoxErrors';\n/* @conditional-compile-remove(file-sharing) */\nimport { ActiveFileUpload, _FileUploadCards } from './FileUploadCards';\n/* @conditional-compile-remove(file-sharing) */\nimport { fileUploadCardsStyles } from './styles/SendBox.styles';\n/* @conditional-compile-remove(file-sharing) */\nimport { SendBoxErrorBarError } from './SendBoxErrorBar';\n/* @conditional-compile-remove(file-sharing) */\nimport { hasCompletedFileUploads, hasIncompleteFileUploads } from './utils/SendBoxUtils';\nimport { MAXIMUM_LENGTH_OF_MESSAGE, exceedsMaxAllowedLength, sanitizeText } from './utils/SendBoxUtils';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from './MentionPopover';\n\n/**\n * Fluent styles for {@link Sendbox}.\n *\n * @public\n */\nexport interface SendBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n  /** styles for the text field container */\n  textFieldContainer?: IStyle;\n  /** Styles for the container of the send message icon. */\n  sendMessageIconContainer?: IStyle;\n  /** Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. */\n  sendMessageIcon?: IStyle;\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n}\n\n/**\n * Strings of {@link SendBox} that can be overridden.\n *\n * @public\n */\nexport interface SendBoxStrings {\n  /**\n   * Placeholder text in SendBox when there is no user input\n   */\n  placeholderText: string;\n  /**\n   * The warning message when send box text length is more than max limit\n   */\n  textTooLong: string;\n  /**\n   * Aria label for send message button\n   */\n  sendButtonAriaLabel: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Error message indicating that all file uploads are not complete.\n   */\n  fileUploadsPendingError: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user when focus is on cancel file upload button.\n   */\n  removeFile: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user file uploading starts.\n   */\n  uploading: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user file is uploaded.\n   */\n  uploadCompleted: string;\n}\n\n/**\n * Props for {@link SendBox}.\n *\n * @public\n */\nexport interface SendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional text for system message below text box\n   */\n  systemMessage?: string;\n  /**\n   * Optional override behavior on send button click\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  /* @conditional-compile-remove(mention) */\n  /**\n   * Optional props needed to lookup suggestions in the mention scenario.\n   * @beta\n   */\n  mentionLookupOptions?: MentionLookupOptions;\n\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\n  /**\n   * Optional callback to render system message below the SendBox.\n   * @defaultValue MessageBar\n   */\n  onRenderSystemMessage?: (systemMessage: string | undefined) => React.ReactElement;\n  /**\n   * Optional boolean to support new line in SendBox.\n   * @defaultValue false\n   */\n  supportNewline?: boolean;\n  /**\n   * Optional callback to render send button icon to the right of the SendBox.\n   * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise\n   */\n  onRenderIcon?: (isHover: boolean) => JSX.Element;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <SendBox styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: SendBoxStylesProps;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<SendBoxStrings>;\n  /**\n   * enumerable to determine if the input box has focus on render or not.\n   * When undefined nothing has focus on render\n   */\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to render uploaded files in the SendBox. The sendBox will expand\n   * vertically to accommodate the uploaded files. File uploads will\n   * be rendered below the text area in sendBox.\n   * @beta\n   */\n  onRenderFileUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional array of active file uploads where each object has attributes\n   * of a file upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeFileUploads?: ActiveFileUpload[];\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to remove the file upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelFileUpload?: (fileId: string) => void;\n}\n\n/**\n * Component for typing and sending messages.\n *\n * Supports sending typing notification when user starts entering text.\n * Supports an optional message below the text input field.\n *\n * @public\n */\nexport const SendBox = (props: SendBoxProps): JSX.Element => {\n  const {\n    disabled,\n    systemMessage,\n    supportNewline,\n    onSendMessage,\n    onTyping,\n    onRenderIcon,\n    onRenderSystemMessage,\n    styles,\n    autoFocus,\n    /* @conditional-compile-remove(mention) */\n    mentionLookupOptions,\n    /* @conditional-compile-remove(file-sharing) */\n    activeFileUploads\n  } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.sendBox;\n  const strings = { ...localeStrings, ...props.strings };\n  const ids = useIdentifiers();\n\n  const [textValue, setTextValue] = useState('');\n  const [textValueOverflow, setTextValueOverflow] = useState(false);\n\n  const sendTextFieldRef = React.useRef<ITextField>(null);\n\n  /* @conditional-compile-remove(file-sharing) */\n  const [fileUploadsPendingError, setFileUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(undefined);\n\n  const sendMessageOnClick = (): void => {\n    // don't send a message when disabled\n    if (disabled || textValueOverflow) {\n      return;\n    }\n\n    // Don't send message until all files have been uploaded successfully\n    /* @conditional-compile-remove(file-sharing) */\n    setFileUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(file-sharing) */\n    if (hasIncompleteFileUploads(activeFileUploads)) {\n      setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    const message = textValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid file upload\n    if (\n      sanitizeText(message).length > 0 ||\n      /* @conditional-compile-remove(file-sharing) */ hasCompletedFileUploads(activeFileUploads)\n    ) {\n      onSendMessage && onSendMessage(message);\n      setTextValue('');\n    }\n    sendTextFieldRef.current?.focus();\n  };\n\n  const setText = (newValue?: string | undefined): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    setTextValueOverflow(exceedsMaxAllowedLength(newValue.length));\n    setTextValue(newValue);\n  };\n\n  const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;\n  const errorMessage = systemMessage ?? textTooLongMessage;\n\n  const mergedSendButtonStyle = useMemo(\n    () => mergeStyles(sendButtonStyle, styles?.sendMessageIconContainer),\n    [styles?.sendMessageIconContainer]\n  );\n\n  const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);\n\n  const mergedSendIconStyle = useMemo(\n    () =>\n      sendIconStyle({\n        theme,\n        hasText: !!textValue,\n        /* @conditional-compile-remove(file-sharing) */ hasFile: hasCompletedFileUploads(activeFileUploads),\n        hasErrorMessage: !!errorMessage,\n        customSendIconStyle: styles?.sendMessageIcon\n      }),\n    [\n      theme,\n      textValue,\n      /* @conditional-compile-remove(file-sharing) */ activeFileUploads,\n      errorMessage,\n      styles?.sendMessageIcon\n    ]\n  );\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) =>\n      onRenderIcon ? (\n        onRenderIcon(isHover)\n      ) : (\n        <Icon iconName={isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend'} className={mergedSendIconStyle} />\n      ),\n    [mergedSendIconStyle, onRenderIcon, textValue]\n  );\n\n  // Ensure that errors are cleared when there are no files in sendBox\n  /* @conditional-compile-remove(file-sharing) */\n  React.useEffect(() => {\n    if (!activeFileUploads?.filter((upload) => !upload.error).length) {\n      setFileUploadsPendingError(undefined);\n    }\n  }, [activeFileUploads]);\n\n  /* @conditional-compile-remove(file-sharing) */\n  const sendBoxErrorsProps = useMemo(() => {\n    return {\n      fileUploadsPendingError: fileUploadsPendingError,\n      fileUploadError: activeFileUploads?.filter((fileUpload) => fileUpload.error).pop()?.error\n    };\n  }, [activeFileUploads, fileUploadsPendingError]);\n\n  /* @conditional-compile-remove(file-sharing) */\n  const onRenderFileUploads = useCallback(() => {\n    if (!activeFileUploads?.filter((upload) => !upload.error).length) {\n      return null;\n    }\n    return props.onRenderFileUploads ? (\n      props.onRenderFileUploads()\n    ) : (\n      <Stack className={fileUploadCardsStyles}>\n        <_FileUploadCards\n          activeFileUploads={activeFileUploads}\n          onCancelFileUpload={props.onCancelFileUpload}\n          strings={{\n            removeFile: props.strings?.removeFile ?? localeStrings.removeFile,\n            uploading: props.strings?.uploading ?? localeStrings.uploading,\n            uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted\n          }}\n        />\n      </Stack>\n    );\n  }, [activeFileUploads, props, localeStrings]);\n\n  return (\n    <Stack\n      className={mergeStyles(\n        sendBoxWrapperStyles,\n        { overflow: 'visible' } // This is needed for the mention popup to be visible\n      )}\n    >\n      {/* @conditional-compile-remove(file-sharing) */ <SendBoxErrors {...sendBoxErrorsProps} />}\n      <Stack\n        className={borderAndBoxShadowStyle({\n          theme,\n          hasErrorMessage: !!errorMessage,\n          disabled: !!disabled\n        })}\n      >\n        <InputBoxComponent\n          autoFocus={autoFocus}\n          data-ui-id={ids.sendboxTextField}\n          disabled={disabled}\n          errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage}\n          textFieldRef={sendTextFieldRef}\n          id=\"sendbox\"\n          placeholderText={strings.placeholderText}\n          textValue={textValue}\n          onChange={(_, newValue) => setText(newValue)}\n          onKeyDown={(ev) => {\n            const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);\n            if (!keyWasSendingMessage) {\n              onTyping?.();\n            }\n          }}\n          onEnterKeyDown={() => {\n            sendMessageOnClick();\n          }}\n          styles={mergedStyles}\n          supportNewline={supportNewline}\n          maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n          /* @conditional-compile-remove(mention) */\n          mentionLookupOptions={mentionLookupOptions}\n        >\n          <InputBoxButton\n            onRenderIcon={onRenderSendIcon}\n            onClick={(e) => {\n              if (!textValueOverflow) {\n                sendMessageOnClick();\n              }\n              e.stopPropagation();\n            }}\n            id={'sendIconWrapper'}\n            className={mergedSendButtonStyle}\n            ariaLabel={localeStrings.sendButtonAriaLabel}\n            tooltipContent={localeStrings.sendButtonAriaLabel}\n          />\n        </InputBoxComponent>\n        {\n          /* @conditional-compile-remove(file-sharing) */\n          onRenderFileUploads()\n        }\n      </Stack>\n    </Stack>\n  );\n};\n"]}

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

@@ -27,13 +27,13 @@ export const SendBoxErrorBar = (props) => {
         };
     }, [dismissAfterMs, onDismiss, error]);
     if (errorMessage) {
-        return React.createElement(React.Fragment, null,
+        return (React.createElement(React.Fragment, null,
             React.createElement(Announcer, { announcementString: errorMessage, ariaLive: 'polite' }),
-            React.createElement(MessageBar, { messageBarType: MessageBarType.warning, styles: {
+            React.createElement(MessageBar, { "data-test-id": 'send-box-message-bar', messageBarType: MessageBarType.warning, styles: {
                     iconContainer: {
                         display: 'none'
                     }
-                } }, errorMessage));
+                } }, errorMessage)));
     }
     else {
         return React.createElement(React.Fragment, null);

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

@@ -1 +1 @@
-{"version":3,"file":"SendBoxErrorBar.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/SendBoxErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAgCxC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EACJ,KAAK,EACL,cAAc,EACd,SAAS,EACV,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC;IACvE,sFAAsF;IACtF,8DAA8D;IAC9D,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,EAAO,CAAC;IACvC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,eAAe,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACZ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;YAC1C,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACnC,eAAe,CAAC,SAAS,CAAC,CAAC;gBAC3B,SAAS,IAAI,SAAS,EAAE,CAAC;YAC3B,CAAC,EAAE,cAAc,CAAC,CAAC;QACrB,CAAC;QACD,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,OAAO,IAAI,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IACvC,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO;YACH,oBAAC,SAAS,IAAC,kBAAkB,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,GAAI;YACnE,oBAAC,UAAU,IAAC,cAAc,EAAE,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE;oBAC5D,aAAa,EAAE;wBACb,OAAO,EAAE,MAAM;qBAChB;iBACF,IACI,YAAY,CACF,CACZ,CAAC;IACR,CAAC;SAAM,CAAC;QACN,OAAO,yCAAK,CAAC;IACf,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageBar, MessageBarType } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { Announcer } from './Announcer';\n\n/**\n * @beta\n * Error to be displayed to the user in an error bar above sendbox.\n */\nexport interface SendBoxErrorBarError {\n  /** Error Message to be displayed */\n  message: string;\n  /**\n   * Unix Timestamp. Preferred generation using `Date.now()`\n   */\n  timestamp: number;\n}\n\n/**\n * @private\n */\nexport interface SendBoxErrorBarProps {\n  /** Error to render */\n  error?: SendBoxErrorBarError;\n  /**\n   * Automatically dismisses the error bar after the specified delay in ms.\n   * Example: `10 * 1000` would be 10 seconds\n   */\n  dismissAfterMs?: number;\n  /**\n   * Callback to invoke when the error bar is dismissed\n   */\n  onDismiss?: () => void;\n}\n\n/**\n * @private\n */\nexport const SendBoxErrorBar = (props: SendBoxErrorBarProps): JSX.Element => {\n  const {\n    error,\n    dismissAfterMs,\n    onDismiss\n  } = props;\n  const [errorMessage, setErrorMessage] = React.useState(error?.message);\n  // Using `any` because `NodeJS.Timeout` here will cause `declaration error` with jest.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const timeoutRef = React.useRef<any>();\n  React.useEffect(() => {\n    setErrorMessage(error?.message);\n  }, [error]);\n  useEffect(() => {\n    if (error && dismissAfterMs !== undefined) {\n      timeoutRef.current = setTimeout(() => {\n        setErrorMessage(undefined);\n        onDismiss && onDismiss();\n      }, dismissAfterMs);\n    }\n    return () => {\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n    };\n  }, [dismissAfterMs, onDismiss, error]);\n  if (errorMessage) {\n    return <>\n        <Announcer announcementString={errorMessage} ariaLive={'polite'} />\n        <MessageBar messageBarType={MessageBarType.warning} styles={{\n        iconContainer: {\n          display: 'none'\n        }\n      }}>\n          {errorMessage}\n        </MessageBar>\n      </>;\n  } else {\n    return <></>;\n  }\n};"]}
+{"version":3,"file":"SendBoxErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBoxErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAgCxC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC;IACvE,sFAAsF;IACtF,8DAA8D;IAC9D,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,EAAO,CAAC;IAEvC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,eAAe,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;YAC1C,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACnC,eAAe,CAAC,SAAS,CAAC,CAAC;gBAC3B,SAAS,IAAI,SAAS,EAAE,CAAC;YAC3B,CAAC,EAAE,cAAc,CAAC,CAAC;QACrB,CAAC;QACD,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,OAAO,IAAI,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvC,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO,CACL;YACE,oBAAC,SAAS,IAAC,kBAAkB,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,GAAI;YACnE,oBAAC,UAAU,oBACK,sBAAsB,EACpC,cAAc,EAAE,cAAc,CAAC,OAAO,EACtC,MAAM,EAAE;oBACN,aAAa,EAAE;wBACb,OAAO,EAAE,MAAM;qBAChB;iBACF,IAEA,YAAY,CACF,CACZ,CACJ,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,yCAAK,CAAC;IACf,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageBar, MessageBarType } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { Announcer } from './Announcer';\n\n/**\n * @beta\n * Error to be displayed to the user in an error bar above sendbox.\n */\nexport interface SendBoxErrorBarError {\n  /** Error Message to be displayed */\n  message: string;\n  /**\n   * Unix Timestamp. Preferred generation using `Date.now()`\n   */\n  timestamp: number;\n}\n\n/**\n * @private\n */\nexport interface SendBoxErrorBarProps {\n  /** Error to render */\n  error?: SendBoxErrorBarError;\n  /**\n   * Automatically dismisses the error bar after the specified delay in ms.\n   * Example: `10 * 1000` would be 10 seconds\n   */\n  dismissAfterMs?: number;\n  /**\n   * Callback to invoke when the error bar is dismissed\n   */\n  onDismiss?: () => void;\n}\n\n/**\n * @private\n */\nexport const SendBoxErrorBar = (props: SendBoxErrorBarProps): JSX.Element => {\n  const { error, dismissAfterMs, onDismiss } = props;\n  const [errorMessage, setErrorMessage] = React.useState(error?.message);\n  // Using `any` because `NodeJS.Timeout` here will cause `declaration error` with jest.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const timeoutRef = React.useRef<any>();\n\n  React.useEffect(() => {\n    setErrorMessage(error?.message);\n  }, [error]);\n\n  useEffect(() => {\n    if (error && dismissAfterMs !== undefined) {\n      timeoutRef.current = setTimeout(() => {\n        setErrorMessage(undefined);\n        onDismiss && onDismiss();\n      }, dismissAfterMs);\n    }\n    return () => {\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n    };\n  }, [dismissAfterMs, onDismiss, error]);\n\n  if (errorMessage) {\n    return (\n      <>\n        <Announcer announcementString={errorMessage} ariaLive={'polite'} />\n        <MessageBar\n          data-test-id={'send-box-message-bar'}\n          messageBarType={MessageBarType.warning}\n          styles={{\n            iconContainer: {\n              display: 'none'\n            }\n          }}\n        >\n          {errorMessage}\n        </MessageBar>\n      </>\n    );\n  } else {\n    return <></>;\n  }\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SendBoxErrors.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/SendBoxErrors.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAwB,MAAM,mBAAmB,CAAC;AAU1E;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EACJ,eAAe,EACf,uBAAuB,EACxB,GAAG,KAAK,CAAC;IACV,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxC,IAAI,eAAe,IAAI,uBAAuB,EAAE,CAAC;YAC/C,OAAO,eAAe,CAAC,SAAS,GAAG,uBAAuB,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,uBAAuB,CAAC;QACnH,CAAC;QACD,OAAO,eAAe,IAAI,uBAAuB,CAAC;IACpD,CAAC,EAAE,CAAC,eAAe,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAC/C,OAAO,oBAAC,eAAe,IAAC,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,EAAE,GAAG,IAAI,GAAI,CAAC;AAC/E,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { SendBoxErrorBar, SendBoxErrorBarError } from './SendBoxErrorBar';\n\n/**\n * @private\n */\nexport interface SendBoxErrorsProps {\n  fileUploadsPendingError?: SendBoxErrorBarError;\n  fileUploadError?: SendBoxErrorBarError;\n}\n\n/**\n * @private\n */\nexport const SendBoxErrors = (props: SendBoxErrorsProps): JSX.Element => {\n  const {\n    fileUploadError,\n    fileUploadsPendingError\n  } = props;\n  const errorToDisplay = React.useMemo(() => {\n    if (fileUploadError && fileUploadsPendingError) {\n      return fileUploadError.timestamp > fileUploadsPendingError.timestamp ? fileUploadError : fileUploadsPendingError;\n    }\n    return fileUploadError || fileUploadsPendingError;\n  }, [fileUploadError, fileUploadsPendingError]);\n  return <SendBoxErrorBar error={errorToDisplay} dismissAfterMs={10 * 1000} />;\n};"]}
+{"version":3,"file":"SendBoxErrors.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBoxErrors.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAwB,MAAM,mBAAmB,CAAC;AAU1E;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EAAE,eAAe,EAAE,uBAAuB,EAAE,GAAG,KAAK,CAAC;IAE3D,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxC,IAAI,eAAe,IAAI,uBAAuB,EAAE,CAAC;YAC/C,OAAO,eAAe,CAAC,SAAS,GAAG,uBAAuB,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,uBAAuB,CAAC;QACnH,CAAC;QACD,OAAO,eAAe,IAAI,uBAAuB,CAAC;IACpD,CAAC,EAAE,CAAC,eAAe,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAE/C,OAAO,oBAAC,eAAe,IAAC,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,EAAE,GAAG,IAAI,GAAI,CAAC;AAC/E,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { SendBoxErrorBar, SendBoxErrorBarError } from './SendBoxErrorBar';\n\n/**\n * @private\n */\nexport interface SendBoxErrorsProps {\n  fileUploadsPendingError?: SendBoxErrorBarError;\n  fileUploadError?: SendBoxErrorBarError;\n}\n\n/**\n * @private\n */\nexport const SendBoxErrors = (props: SendBoxErrorsProps): JSX.Element => {\n  const { fileUploadError, fileUploadsPendingError } = props;\n\n  const errorToDisplay = React.useMemo(() => {\n    if (fileUploadError && fileUploadsPendingError) {\n      return fileUploadError.timestamp > fileUploadsPendingError.timestamp ? fileUploadError : fileUploadsPendingError;\n    }\n    return fileUploadError || fileUploadsPendingError;\n  }, [fileUploadError, fileUploadsPendingError]);\n\n  return <SendBoxErrorBar error={errorToDisplay} dismissAfterMs={10 * 1000} />;\n};\n"]}

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

@@ -34,9 +34,7 @@ export const _StartCaptionsButton = (props) => {
         return React.createElement(React.Fragment, null);
     };
     const options = useMemo(() => {
-        return {
-            spokenLanguage: currentSpokenLanguage === '' ? defaultSpokenLanguage : currentSpokenLanguage
-        };
+        return { spokenLanguage: currentSpokenLanguage === '' ? defaultSpokenLanguage : currentSpokenLanguage };
     }, [currentSpokenLanguage]);
     const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);
     const onToggleStartCaptions = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
@@ -56,6 +54,6 @@ export const _StartCaptionsButton = (props) => {
             setHasSetSpokenLanguage(true);
         }
     }, [props.checked, onSetSpokenLanguage, options.spokenLanguage, hasSetSpokenLanguage]);
-    return React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings, onClick: onToggleStartCaptions !== null && onToggleStartCaptions !== void 0 ? onToggleStartCaptions : props.onClick, onRenderOnIcon: onRenderStartIcon, onRenderOffIcon: onRenderOffIcon }));
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings, onClick: onToggleStartCaptions !== null && onToggleStartCaptions !== void 0 ? onToggleStartCaptions : props.onClick, onRenderOnIcon: onRenderStartIcon, onRenderOffIcon: onRenderOffIcon })));
 };
 //# sourceMappingURL=StartCaptionsButton.js.map

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":"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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.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(24)
+});
+/**
+ * @private
+ */
+export const ratingHelperTextStyle = (theme) => mergeStyles({
+    fontWeight: 400,
+    fontSize: _pxToRem(12),
+    lineHeight: _pxToRem(12),
+    color: theme.palette.themePrimary,
+    marginBottom: _pxToRem(8),
+    marginTop: _pxToRem(8),
+    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.4)',
+            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,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.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