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

package/dist/dist-esm/react-components/src/components/Attachment/AttachmentDownloadCards.js.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentDownloadCards.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Attachment/AttachmentDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon } from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { useMemo } from 'react';\nimport { useLocale } from '../../localization';\nimport { _AttachmentCard } from './AttachmentCard';\nimport { _AttachmentCardGroup, _AttachmentCardGroupLayout } from './AttachmentCardGroup';\nimport { _formatString, _isIdentityMicrosoftTeamsUser } from '@internal/acs-ui-common';\nimport { AttachmentMenuAction } from '../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { ChatMessage } from '../../types';\nimport { mergeClasses } from '@griffel/react';\nimport { _ATTACHMENT_CARD_WIDTH_IN_REM } from '../styles/AttachmentCard.styles';\nimport { useAttachmentCardGroupStyles } from '../styles/AttachmentCardGroup.styles';\n\n/**\n * Represents the type of attachment\n * @public\n */\nexport type ChatAttachmentType = 'unknown' | 'image' | 'file';\n\n/**\n * Strings of _AttachmentDownloadCards that can be overridden.\n *\n * @internal\n */\nexport interface _AttachmentDownloadCardsStrings {\n  /** Aria label to notify user when focus is on attachment open button. */\n  openAttachment: string;\n  attachmentCardGroupMessage: string;\n}\n\n/**\n * @internal\n */\nexport interface _AttachmentDownloadCardsProps {\n  /**\n   * A chat message metadata that includes attachment metadata\n   */\n  attachments?: AttachmentMetadata[];\n  /**\n   * A chat message metadata that includes attachment metadata\n   */\n  message?: ChatMessage;\n  /**\n   * Optional callback to handle attachment download\n   */\n  actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n  /**\n   * Optional callback that runs if downloadHandler returns an error.\n   */\n  onActionHandlerFailed?: (errMsg: string) => void;\n  /**\n   * Optional aria label strings for attachment download cards\n   */\n  strings?: _AttachmentDownloadCardsStrings;\n}\n\n/**\n * @internal\n */\nexport const _AttachmentDownloadCards = (props: _AttachmentDownloadCardsProps): JSX.Element => {\n  const {\n    attachments,\n    message\n  } = props;\n  const localeStrings = useLocale().strings.messageThread;\n  const attachmentCardGroupStyles = useAttachmentCardGroupStyles();\n  const getMenuActions = useCallback((attachment: AttachmentMetadata, localeStrings: _AttachmentDownloadCardsStrings, message?: ChatMessage, action?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[]): AttachmentMenuAction[] => {\n    const defaultMenuActions = getDefaultMenuActions(localeStrings, message);\n    try {\n      const actions = action?.(attachment, message);\n      if (actions && actions.length > 0) {\n        return actions;\n      } else {\n        return defaultMenuActions;\n      }\n    } catch (error) {\n      return defaultMenuActions;\n    }\n  }, []);\n  const hasMultipleAttachments = useMemo(() => {\n    return (props.attachments?.length ?? 0) > 1;\n  }, [props.attachments]);\n  if (!attachments || attachments.length === 0 || !attachments) {\n    return <></>;\n  }\n  return <div className={mergeClasses(attachmentCardGroupStyles.root, hasMultipleAttachments ? attachmentCardGroupStyles.multipleAttachments : attachmentCardGroupStyles.singleAttachment)} data-ui-id=\"attachment-download-card-group\">\n      <_AttachmentCardGroup attachmentGroupLayout={_AttachmentCardGroupLayout.Grid}>\n        {attachments && attachments.map(attachment => <_AttachmentCard attachment={attachment} key={attachment.id} menuActions={getMenuActions(attachment, localeStrings, message, props.actionsForAttachment)} onActionHandlerFailed={props.onActionHandlerFailed} selfResizing={hasMultipleAttachments} />)}\n      </_AttachmentCardGroup>\n    </div>;\n};\n\n/**\n * @private\n */\nconst getDefaultMenuActions = (locale: _AttachmentDownloadCardsStrings, chatMessage?: ChatMessage): AttachmentMenuAction[] => {\n  let actionName = locale.openAttachment;\n  // if message is sent by a Teams user, we need to use a different icon (\"open\")\n  const isTeamsUser = _isIdentityMicrosoftTeamsUser(chatMessage?.senderId);\n  if (isTeamsUser) {\n    return [{\n      name: actionName,\n      icon: <Icon iconName=\"OpenAttachment\" />,\n      onClick: defaultOnClickHandler\n    }];\n  }\n  // otherwise, use the default icon (\"download\")\n  return [{\n    ...defaultAttachmentMenuAction,\n    name: actionName\n  }];\n};\n\n/**\n *\n * The default action handler for downloading attachments. This handler will open the attachment's URL in a new tab.\n */\nconst defaultOnClickHandler = (attachment: AttachmentMetadata): Promise<void> => {\n  return new Promise<void>(resolve => {\n    window.open((attachment as AttachmentMetadata).url, '_blank', 'noopener,noreferrer');\n    resolve();\n  });\n};\n\n/**\n * @beta\n *\n * The default menu action for downloading attachments. This action will open the attachment's URL in a new tab.\n */\nexport const defaultAttachmentMenuAction: AttachmentMenuAction = {\n  /**\n   *\n   * name is used for aria-label only when there's one button. For multiple buttons, it's used as a label.\n   * by default it's an unlocalized string when this is used as a imported constant,\n   * but you can overwrite it with your own localized string.\n   *\n   * i.e. defaultAttachmentMenuAction.name = localize('Download');\n   *\n   * when no action is provided, the UI library will overwrite this name\n   * with a localized string this string when it's used in the UI.\n   */\n  name: 'Download',\n  // this is the icon shown on the right of the attachment card\n  icon: <Icon iconName=\"DownloadAttachment\" data-ui-id=\"attachment-download-card-download-icon\" />,\n  // this is the action that runs when the icon is clicked\n  onClick: defaultOnClickHandler\n};"]}
+{"version":3,"file":"AttachmentDownloadCards.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Attachment/AttachmentDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon } from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { useMemo } from 'react';\nimport { useLocale } from '../../localization';\nimport { _AttachmentCard } from './AttachmentCard';\nimport { _AttachmentCardGroup, _AttachmentCardGroupLayout } from './AttachmentCardGroup';\nimport { _formatString, _isIdentityMicrosoftTeamsUser } from '@internal/acs-ui-common';\nimport { AttachmentMenuAction } from '../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { ChatMessage } from '../../types';\nimport { mergeClasses } from '@griffel/react';\nimport { _ATTACHMENT_CARD_WIDTH_IN_REM } from '../styles/AttachmentCard.styles';\nimport { useAttachmentCardGroupStyles } from '../styles/AttachmentCardGroup.styles';\n\n/**\n * Represents the type of attachment\n * @public\n */\nexport type ChatAttachmentType = 'unknown' | 'image' | 'file';\n\n/**\n * Strings of _AttachmentDownloadCards that can be overridden.\n *\n * @internal\n */\nexport interface _AttachmentDownloadCardsStrings {\n  /* @conditional-compile-remove(file-sharing-acs) */\n  /** Aria label to notify user when focus is on attachment download button. */\n  downloadAttachment: string;\n  /** Aria label to notify user when focus is on attachment open button. */\n  openAttachment: string;\n  attachmentCardGroupMessage: string;\n}\n\n/**\n * @internal\n */\nexport interface _AttachmentDownloadCardsProps {\n  /**\n   * A chat message metadata that includes attachment metadata\n   */\n  attachments?: AttachmentMetadata[];\n  /**\n   * A chat message metadata that includes attachment metadata\n   */\n  message?: ChatMessage;\n  /**\n   * Optional callback to handle attachment download\n   */\n  actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n  /**\n   * Optional callback that runs if downloadHandler returns an error.\n   */\n  onActionHandlerFailed?: (errMsg: string) => void;\n  /**\n   * Optional aria label strings for attachment download cards\n   */\n  strings?: _AttachmentDownloadCardsStrings;\n}\n\n/**\n * @internal\n */\nexport const _AttachmentDownloadCards = (props: _AttachmentDownloadCardsProps): JSX.Element => {\n  const { attachments, message } = props;\n  const localeStrings = useLocale().strings.messageThread;\n  const attachmentCardGroupStyles = useAttachmentCardGroupStyles();\n\n  const getMenuActions = useCallback(\n    (\n      attachment: AttachmentMetadata,\n      localeStrings: _AttachmentDownloadCardsStrings,\n      message?: ChatMessage,\n      action?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[]\n    ): AttachmentMenuAction[] => {\n      const defaultMenuActions = getDefaultMenuActions(localeStrings, message);\n      try {\n        const actions = action?.(attachment, message);\n        if (actions && actions.length > 0) {\n          return actions;\n        } else {\n          return defaultMenuActions;\n        }\n      } catch (error) {\n        return defaultMenuActions;\n      }\n    },\n    []\n  );\n\n  const hasMultipleAttachments = useMemo(() => {\n    return (props.attachments?.length ?? 0) > 1;\n  }, [props.attachments]);\n\n  if (!attachments || attachments.length === 0 || !attachments) {\n    return <></>;\n  }\n\n  return (\n    <div\n      className={mergeClasses(\n        attachmentCardGroupStyles.root,\n        hasMultipleAttachments\n          ? attachmentCardGroupStyles.multipleAttachments\n          : attachmentCardGroupStyles.singleAttachment\n      )}\n      data-ui-id=\"attachment-download-card-group\"\n    >\n      <_AttachmentCardGroup attachmentGroupLayout={_AttachmentCardGroupLayout.Grid}>\n        {attachments &&\n          attachments.map((attachment) => (\n            <_AttachmentCard\n              attachment={attachment}\n              key={attachment.id}\n              menuActions={getMenuActions(attachment, localeStrings, message, props.actionsForAttachment)}\n              onActionHandlerFailed={props.onActionHandlerFailed}\n              selfResizing={hasMultipleAttachments}\n            />\n          ))}\n      </_AttachmentCardGroup>\n    </div>\n  );\n};\n\n/**\n * @private\n */\nconst getDefaultMenuActions = (\n  locale: _AttachmentDownloadCardsStrings,\n  chatMessage?: ChatMessage\n): AttachmentMenuAction[] => {\n  let actionName = locale.openAttachment;\n  // if message is sent by a Teams user, we need to use a different icon (\"open\")\n  const isTeamsUser = _isIdentityMicrosoftTeamsUser(chatMessage?.senderId);\n  if (isTeamsUser) {\n    return [\n      {\n        name: actionName,\n        icon: <Icon iconName=\"OpenAttachment\" />,\n        onClick: defaultOnClickHandler\n      }\n    ];\n  }\n  // otherwise, use the default icon (\"download\")\n  /* @conditional-compile-remove(file-sharing-acs) */\n  actionName = locale.downloadAttachment;\n  return [\n    {\n      ...defaultAttachmentMenuAction,\n      name: actionName\n    }\n  ];\n};\n\n/**\n *\n * The default action handler for downloading attachments. This handler will open the attachment's URL in a new tab.\n */\nconst defaultOnClickHandler = (attachment: AttachmentMetadata): Promise<void> => {\n  return new Promise<void>((resolve) => {\n    window.open((attachment as AttachmentMetadata).url, '_blank', 'noopener,noreferrer');\n    resolve();\n  });\n};\n\n/**\n * @beta\n *\n * The default menu action for downloading attachments. This action will open the attachment's URL in a new tab.\n */\nexport const defaultAttachmentMenuAction: AttachmentMenuAction = {\n  /**\n   *\n   * name is used for aria-label only when there's one button. For multiple buttons, it's used as a label.\n   * by default it's an unlocalized string when this is used as a imported constant,\n   * but you can overwrite it with your own localized string.\n   *\n   * i.e. defaultAttachmentMenuAction.name = localize('Download');\n   *\n   * when no action is provided, the UI library will overwrite this name\n   * with a localized string this string when it's used in the UI.\n   */\n  name: 'Download',\n  // this is the icon shown on the right of the attachment card\n  icon: <Icon iconName=\"DownloadAttachment\" data-ui-id=\"attachment-download-card-download-icon\" />,\n  // this is the action that runs when the icon is clicked\n  onClick: defaultOnClickHandler\n};\n"]}

package/dist/dist-esm/react-components/src/components/Attachment/AttachmentUploadCards.js

@@ -5,9 +5,7 @@ import React, { useMemo } from 'react';
 import { _AttachmentCard } from './AttachmentCard';
 import { _AttachmentCardGroup, _AttachmentCardGroupLayout } from './AttachmentCardGroup';
 import { useLocaleAttachmentCardStringsTrampoline } from '../utils/common';
-const actionIconStyle = {
-    height: '1rem'
-};
+const actionIconStyle = { height: '1rem' };
 /**
  * @internal
  */
@@ -22,21 +20,26 @@ export const _AttachmentUploadCards = (props) => {
     if (!attachments || attachments.length === 0) {
         return React.createElement(React.Fragment, null);
     }
-    return React.createElement(_AttachmentCardGroup, { attachmentGroupLayout: _AttachmentCardGroupLayout.Flex, disabled: props.disabled }, attachments && attachments.filter(attachment => !attachment.error).map(attachment => React.createElement(_AttachmentCard, { attachment: attachment, key: attachment.id, menuActions: [{
-                name: removeAttachmentButtonString(),
-                icon: React.createElement("div", { "data-testid": "attachment-upload-card-remove" },
-                    React.createElement(Icon, { iconName: "CancelAttachmentUpload", className: mergeStyles(actionIconStyle) })),
-                onClick: attachment => {
-                    return new Promise((resolve, reject) => {
-                        try {
-                            props.onCancelAttachmentUpload && props.onCancelAttachmentUpload(attachment.id);
-                            resolve();
-                        }
-                        catch (e) {
-                            reject(e.message);
-                        }
-                    });
+    return (React.createElement(_AttachmentCardGroup, { attachmentGroupLayout: _AttachmentCardGroupLayout.Flex, disabled: props.disabled }, attachments &&
+        attachments
+            .filter((attachment) => !attachment.error)
+            .map((attachment) => (React.createElement(_AttachmentCard, { attachment: attachment, key: attachment.id, menuActions: [
+                {
+                    name: removeAttachmentButtonString(),
+                    icon: (React.createElement("div", { "data-testid": "attachment-upload-card-remove" },
+                        React.createElement(Icon, { iconName: "CancelAttachmentUpload", className: mergeStyles(actionIconStyle) }))),
+                    onClick: (attachment) => {
+                        return new Promise((resolve, reject) => {
+                            try {
+                                props.onCancelAttachmentUpload && props.onCancelAttachmentUpload(attachment.id);
+                                resolve();
+                            }
+                            catch (e) {
+                                reject(e.message);
+                            }
+                        });
+                    }
                 }
-            }], strings: props.strings })));
+            ], strings: props.strings })))));
 };
 //# sourceMappingURL=AttachmentUploadCards.js.map

package/dist/dist-esm/react-components/src/components/Attachment/AttachmentUploadCards.js.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentUploadCards.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Attachment/AttachmentUploadCards.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAEzF,OAAO,EAAE,wCAAwC,EAAE,MAAM,iBAAiB,CAAC;AAwC3E,MAAM,eAAe,GAAG;IACtB,MAAM,EAAE,MAAM;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAiC,EAAe,EAAE;;IACvF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC;IACtC,MAAM,aAAa,GAAG,wCAAwC,EAAE,CAAC;IACjE,MAAM,4BAA4B,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE;;QACtD,OAAO,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,mCAAI,aAAa,CAAC,gBAAgB,CAAC;IAC3E,CAAC,EAAE,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACtE,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC7C,OAAO,yCAAK,CAAC;IACf,CAAC;IACD,OAAO,oBAAC,oBAAoB,IAAC,qBAAqB,EAAE,0BAA0B,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IACxG,WAAW,IAAI,WAAW,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,oBAAC,eAAe,IAAC,UAAU,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC;gBACjK,IAAI,EAAE,4BAA4B,EAAE;gBACpC,IAAI,EAAE,4CAAiB,+BAA+B;oBACtC,oBAAC,IAAI,IAAC,QAAQ,EAAC,wBAAwB,EAAC,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC,GAAI,CAC/E;gBACpB,OAAO,EAAE,UAAU,CAAC,EAAE;oBACpB,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;wBACrC,IAAI,CAAC;4BACH,KAAK,CAAC,wBAAwB,IAAI,KAAK,CAAC,wBAAwB,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;4BAChF,OAAO,EAAE,CAAC;wBACZ,CAAC;wBAAC,OAAO,CAAC,EAAE,CAAC;4BACX,MAAM,CAAE,CAAW,CAAC,OAAO,CAAC,CAAC;wBAC/B,CAAC;oBACH,CAAC,CAAC,CAAC;gBACL,CAAC;aACF,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CAAC,CACR,CAAC;AAC5B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, mergeStyles } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { _AttachmentCard } from './AttachmentCard';\nimport { _AttachmentCardGroup, _AttachmentCardGroupLayout } from './AttachmentCardGroup';\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport { useLocaleAttachmentCardStringsTrampoline } from '../utils/common';\n\n/**\n * Strings of _AttachmentUploadCards that can be overridden.\n *\n * @internal\n */\nexport interface _AttachmentUploadCardsStrings {\n  /** Aria label to notify user when focus is on cancel attachment upload button. */\n  removeAttachment: string;\n  /** Aria label to notify user attachment uploading starts. */\n  uploading: string;\n  /** Aria label to notify user attachment is uploaded. */\n  uploadCompleted: string;\n  /** Aria label to notify user more attachment action menu. */\n  attachmentMoreMenu: string;\n}\n\n/**\n * @internal\n */\nexport interface AttachmentUploadCardsProps {\n  /**\n   * Optional array of {@link AttachmentMetadataInProgress}\n   */\n  attachments?: AttachmentMetadataInProgress[];\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   */\n  onCancelAttachmentUpload?: (attachmentId: string) => void;\n  /**\n   * Optional arialabel strings for attachment upload cards\n   */\n  strings?: _AttachmentUploadCardsStrings;\n  /**\n   * Optional flag to disable attachment cards.\n   */\n  disabled?: boolean;\n}\nconst actionIconStyle = {\n  height: '1rem'\n};\n\n/**\n * @internal\n */\nexport const _AttachmentUploadCards = (props: AttachmentUploadCardsProps): JSX.Element => {\n  const attachments = props.attachments;\n  const localeStrings = useLocaleAttachmentCardStringsTrampoline();\n  const removeAttachmentButtonString = useMemo(() => () => {\n    return props.strings?.removeAttachment ?? localeStrings.removeAttachment;\n  }, [props.strings?.removeAttachment, localeStrings.removeAttachment]);\n  if (!attachments || attachments.length === 0) {\n    return <></>;\n  }\n  return <_AttachmentCardGroup attachmentGroupLayout={_AttachmentCardGroupLayout.Flex} disabled={props.disabled}>\n      {attachments && attachments.filter(attachment => !attachment.error).map(attachment => <_AttachmentCard attachment={attachment} key={attachment.id} menuActions={[{\n      name: removeAttachmentButtonString(),\n      icon: <div data-testid=\"attachment-upload-card-remove\">\n                      <Icon iconName=\"CancelAttachmentUpload\" className={mergeStyles(actionIconStyle)} />\n                    </div>,\n      onClick: attachment => {\n        return new Promise((resolve, reject) => {\n          try {\n            props.onCancelAttachmentUpload && props.onCancelAttachmentUpload(attachment.id);\n            resolve();\n          } catch (e) {\n            reject((e as Error).message);\n          }\n        });\n      }\n    }]} strings={props.strings} />)}\n    </_AttachmentCardGroup>;\n};"]}
+{"version":3,"file":"AttachmentUploadCards.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Attachment/AttachmentUploadCards.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAEzF,OAAO,EAAE,wCAAwC,EAAE,MAAM,iBAAiB,CAAC;AAyC3E,MAAM,eAAe,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAE3C;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAiC,EAAe,EAAE;;IACvF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC;IACtC,MAAM,aAAa,GAAG,wCAAwC,EAAE,CAAC;IACjE,MAAM,4BAA4B,GAAG,OAAO,CAC1C,GAAG,EAAE,CAAC,GAAG,EAAE;;QACT,OAAO,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,mCAAI,aAAa,CAAC,gBAAgB,CAAC;IAC3E,CAAC,EACD,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAClE,CAAC;IAEF,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC7C,OAAO,yCAAK,CAAC;IACf,CAAC;IAED,OAAO,CACL,oBAAC,oBAAoB,IAAC,qBAAqB,EAAE,0BAA0B,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IACnG,WAAW;QACV,WAAW;aACR,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC;aACzC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CACnB,oBAAC,eAAe,IACd,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,UAAU,CAAC,EAAE,EAClB,WAAW,EAAE;gBACX;oBACE,IAAI,EAAE,4BAA4B,EAAE;oBACpC,IAAI,EAAE,CACJ,4CAAiB,+BAA+B;wBAC9C,oBAAC,IAAI,IAAC,QAAQ,EAAC,wBAAwB,EAAC,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC,GAAI,CAC/E,CACP;oBACD,OAAO,EAAE,CAAC,UAAU,EAAE,EAAE;wBACtB,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;4BACrC,IAAI,CAAC;gCACH,KAAK,CAAC,wBAAwB,IAAI,KAAK,CAAC,wBAAwB,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;gCAChF,OAAO,EAAE,CAAC;4BACZ,CAAC;4BAAC,OAAO,CAAC,EAAE,CAAC;gCACX,MAAM,CAAE,CAAW,CAAC,OAAO,CAAC,CAAC;4BAC/B,CAAC;wBACH,CAAC,CAAC,CAAC;oBACL,CAAC;iBACF;aACF,EACD,OAAO,EAAE,KAAK,CAAC,OAAO,GACtB,CACH,CAAC,CACe,CACxB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, mergeStyles } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { _AttachmentCard } from './AttachmentCard';\nimport { _AttachmentCardGroup, _AttachmentCardGroupLayout } from './AttachmentCardGroup';\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport { useLocaleAttachmentCardStringsTrampoline } from '../utils/common';\n\n/**\n * Strings of _AttachmentUploadCards that can be overridden.\n *\n * @internal\n */\nexport interface _AttachmentUploadCardsStrings {\n  /** Aria label to notify user when focus is on cancel attachment upload button. */\n  removeAttachment: string;\n  /** Aria label to notify user attachment uploading starts. */\n  uploading: string;\n  /** Aria label to notify user attachment is uploaded. */\n  uploadCompleted: string;\n  /** Aria label to notify user more attachment action menu. */\n  attachmentMoreMenu: string;\n}\n\n/**\n * @internal\n */\nexport interface AttachmentUploadCardsProps {\n  /**\n   * Optional array of {@link AttachmentMetadataInProgress}\n   */\n  attachments?: AttachmentMetadataInProgress[];\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   */\n  onCancelAttachmentUpload?: (attachmentId: string) => void;\n  /**\n   * Optional arialabel strings for attachment upload cards\n   */\n  strings?: _AttachmentUploadCardsStrings;\n  /**\n   * Optional flag to disable attachment cards.\n   */\n  disabled?: boolean;\n}\n\nconst actionIconStyle = { height: '1rem' };\n\n/**\n * @internal\n */\nexport const _AttachmentUploadCards = (props: AttachmentUploadCardsProps): JSX.Element => {\n  const attachments = props.attachments;\n  const localeStrings = useLocaleAttachmentCardStringsTrampoline();\n  const removeAttachmentButtonString = useMemo(\n    () => () => {\n      return props.strings?.removeAttachment ?? localeStrings.removeAttachment;\n    },\n    [props.strings?.removeAttachment, localeStrings.removeAttachment]\n  );\n\n  if (!attachments || attachments.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <_AttachmentCardGroup attachmentGroupLayout={_AttachmentCardGroupLayout.Flex} disabled={props.disabled}>\n      {attachments &&\n        attachments\n          .filter((attachment) => !attachment.error)\n          .map((attachment) => (\n            <_AttachmentCard\n              attachment={attachment}\n              key={attachment.id}\n              menuActions={[\n                {\n                  name: removeAttachmentButtonString(),\n                  icon: (\n                    <div data-testid=\"attachment-upload-card-remove\">\n                      <Icon iconName=\"CancelAttachmentUpload\" className={mergeStyles(actionIconStyle)} />\n                    </div>\n                  ),\n                  onClick: (attachment) => {\n                    return new Promise((resolve, reject) => {\n                      try {\n                        props.onCancelAttachmentUpload && props.onCancelAttachmentUpload(attachment.id);\n                        resolve();\n                      } catch (e) {\n                        reject((e as Error).message);\n                      }\n                    });\n                  }\n                }\n              ]}\n              strings={props.strings}\n            />\n          ))}\n    </_AttachmentCardGroup>\n  );\n};\n"]}

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

@@ -35,8 +35,8 @@ export const CameraButton = (props) => {
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const [announcerString, setAnnouncerString] = useState(undefined);
     const disabled = props.disabled || waitForCamera;
-    const onRenderCameraOnIcon = () => React.createElement(_HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonCameraOn" });
-    const onRenderCameraOffIcon = () => React.createElement(_HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonCameraOff" });
+    const onRenderCameraOnIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonCameraOn" }));
+    const onRenderCameraOffIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonCameraOff" }));
     if (waitForCamera && strings.tooltipVideoLoadingContent) {
         strings.tooltipDisabledContent = strings.tooltipVideoLoadingContent;
     }
@@ -44,7 +44,11 @@ export const CameraButton = (props) => {
     const cameraTurningOn = waitForCamera && !cameraOn;
     // Ensure Aria-label by default reflects the loading state of the camera
     const ariaLabel = ((_a = props.ariaLabel) !== null && _a !== void 0 ? _a : cameraTurningOn) ? strings.tooltipVideoLoadingContent : undefined;
-    const splitButtonAriaString = cameraTurningOn ? strings.tooltipVideoLoadingContent : cameraOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;
+    const splitButtonAriaString = cameraTurningOn
+        ? strings.tooltipVideoLoadingContent
+        : cameraOn
+            ? strings.onSplitButtonAriaLabel
+            : strings.offSplitButtonAriaLabel;
     const toggleAnnouncerString = useCallback((isCameraOn) => {
         setAnnouncerString(!isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement);
     }, [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]);
@@ -89,14 +93,7 @@ export const CameraButton = (props) => {
             key: 'effects',
             'data-ui-id': 'camera-split-button-video-effects',
             text: strings.videoEffectsMenuItemTitle,
-            iconProps: {
-                iconName: 'ControlButtonVideoEffectsOption',
-                styles: {
-                    root: {
-                        lineHeight: 0
-                    }
-                }
-            },
+            iconProps: { iconName: 'ControlButtonVideoEffectsOption', styles: { root: { lineHeight: 0 } } },
             onClick: () => {
                 if (props.onClickVideoEffects) {
                     props.onClickVideoEffects(true);
@@ -112,11 +109,7 @@ export const CameraButton = (props) => {
         },
         iconProps: {
             iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',
-            styles: {
-                root: {
-                    lineHeight: 0
-                }
-            }
+            styles: { root: { lineHeight: 0 } }
         }
     });
     const splitButtonPrimaryAction = {
@@ -129,10 +122,10 @@ export const CameraButton = (props) => {
         }
     };
     const splitButtonMenuProps = useMemo(() => (Object.assign(Object.assign({}, props.splitButtonMenuProps), { className: 'camera-split-button' })), [props.splitButtonMenuProps]);
-    return React.createElement(React.Fragment, null,
+    return (React.createElement(React.Fragment, null,
         React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
-        React.createElement(ControlBarButton, Object.assign({}, props, { disabled: disabled, onClick: onToggleCamera ? onToggleClickCallback : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderCameraOnIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderCameraOffIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'cameraButtonLabel', menuProps: (_e = props.menuProps) !== null && _e !== void 0 ? _e : (props.enableDeviceSelectionMenu ? generateDefaultDeviceMenuProps(Object.assign(Object.assign({}, props), { onSelectCamera: onChangeCameraClick, styles: (_f = props.styles) === null || _f === void 0 ? void 0 : _f.menuStyles }), strings, splitButtonPrimaryAction) : undefined), menuIconProps: ((_g = props.menuIconProps) !== null && _g !== void 0 ? _g : !props.enableDeviceSelectionMenu) ? {
-                hidden: true
-            } : undefined, split: (_h = props.split) !== null && _h !== void 0 ? _h : props.enableDeviceSelectionMenu, "aria-description": strings.cameraButtonAriaDescription, "aria-roledescription": props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined, ariaLabel: ariaLabel, splitButtonAriaLabel: props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined, splitButtonMenuProps: splitButtonMenuProps })));
+        React.createElement(ControlBarButton, Object.assign({}, props, { disabled: disabled, onClick: onToggleCamera ? onToggleClickCallback : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderCameraOnIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderCameraOffIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'cameraButtonLabel', menuProps: (_e = props.menuProps) !== null && _e !== void 0 ? _e : (props.enableDeviceSelectionMenu
+                ? generateDefaultDeviceMenuProps(Object.assign(Object.assign({}, props), { onSelectCamera: onChangeCameraClick, styles: (_f = props.styles) === null || _f === void 0 ? void 0 : _f.menuStyles }), strings, splitButtonPrimaryAction)
+                : undefined), menuIconProps: ((_g = props.menuIconProps) !== null && _g !== void 0 ? _g : !props.enableDeviceSelectionMenu) ? { hidden: true } : undefined, split: (_h = props.split) !== null && _h !== void 0 ? _h : props.enableDeviceSelectionMenu, "aria-description": strings.cameraButtonAriaDescription, "aria-roledescription": props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined, ariaLabel: ariaLabel, splitButtonAriaLabel: props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined, splitButtonMenuProps: splitButtonMenuProps }))));
 };
 //# sourceMappingURL=CameraButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CameraButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/CameraButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAuF,MAAM,iBAAiB,CAAC;AAE9I,OAAO,EAAiB,8BAA8B,EAAE,MAAM,iBAAiB,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,MAAM,4BAA4B,GAAG;IACnC,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,IAAI;CACK,CAAC;AA8IxB;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;;IACpE,MAAM,EACJ,qBAAqB,EACrB,cAAc,EACd,cAAc,EACf,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IACvD,MAAM,OAAO,mCACR,aAAa,GACb,KAAK,CAAC,OAAO,CACjB,CAAC;IACF,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IACtF,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,aAAa,CAAC;IACjD,MAAM,oBAAoB,GAAG,GAAgB,EAAE,CAAC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAC,uBAAuB,GAAG,CAAC;IAChI,MAAM,qBAAqB,GAAG,GAAgB,EAAE,CAAC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAC,wBAAwB,GAAG,CAAC;IAClI,IAAI,aAAa,IAAI,OAAO,CAAC,0BAA0B,EAAE,CAAC;QACxD,OAAO,CAAC,sBAAsB,GAAG,OAAO,CAAC,0BAA0B,CAAC;IACtE,CAAC;IACD,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC;IAC/B,MAAM,eAAe,GAAG,aAAa,IAAI,CAAC,QAAQ,CAAC;IACnD,wEAAwE;IACxE,MAAM,SAAS,GAAG,CAAA,MAAA,KAAK,CAAC,SAAS,mCAAI,eAAe,EAAC,CAAC,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC,CAAC,SAAS,CAAC;IACtG,MAAM,qBAAqB,GAAG,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC,CAAC,OAAO,CAAC,uBAAuB,CAAC;IACjK,MAAM,qBAAqB,GAAG,WAAW,CAAC,CAAC,UAAmB,EAAE,EAAE;QAChE,kBAAkB,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,iCAAiC,CAAC,CAAC,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC;IACzH,CAAC,EAAE,CAAC,OAAO,CAAC,iCAAiC,EAAE,OAAO,CAAC,gCAAgC,CAAC,CAAC,CAAC;IAC1F,MAAM,oCAAoC,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5D,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,kBAAkB,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;QACzD,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,QAAQ,EAAE,OAAO,CAAC,0BAA0B,CAAC,CAAC,CAAC;IACvE,MAAM,aAAa,GAAG,WAAW,CAAC,GAAS,EAAE;QAC3C,kFAAkF;QAClF,IAAI,cAAc,EAAE,CAAC;YACnB,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,IAAI,CAAC;gBACH,MAAM,cAAc,CAAC,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,4BAA4B,CAAC,CAAC;gBAC5E,uGAAuG;gBACvG,qBAAqB,CAAC,CAAC,QAAQ,CAAC,CAAC;YACnC,CAAC;oBAAS,CAAC;gBACT,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;IACH,CAAC,CAAA,EAAE,CAAC,QAAQ,EAAE,qBAAqB,EAAE,cAAc,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAC7E,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7C,oCAAoC,EAAE,CAAC;QACvC,aAAa,EAAE,CAAC;IAClB,CAAC,EAAE,CAAC,oCAAoC,EAAE,aAAa,CAAC,CAAC,CAAC;IAC1D,MAAM,mBAAmB,GAAG,WAAW,CAAC,CAAO,MAAqB,EAAE,EAAE;QACtE,yDAAyD;QACzD,IAAI,cAAc,EAAE,CAAC;YACnB,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,IAAI,CAAC;gBACH,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;YAC/B,CAAC;oBAAS,CAAC;gBACT,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;IACH,CAAC,CAAA,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IACrB,MAAM,oBAAoB,GAA0B,EAAE,CAAC;IACvD,IAAI,KAAK,CAAC,mBAAmB,EAAE,CAAC;QAC9B,oBAAoB,CAAC,IAAI,CAAC;YACxB,GAAG,EAAE,SAAS;YACd,YAAY,EAAE,mCAAmC;YACjD,IAAI,EAAE,OAAO,CAAC,yBAAyB;YACvC,SAAS,EAAE;gBACT,QAAQ,EAAE,iCAAiC;gBAC3C,MAAM,EAAE;oBACN,IAAI,EAAE;wBACJ,UAAU,EAAE,CAAC;qBACd;iBACF;aACF;YACD,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,KAAK,CAAC,mBAAmB,EAAE,CAAC;oBAC9B,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;gBAClC,CAAC;YACH,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IACD,oBAAoB,CAAC,IAAI,CAAC;QACxB,GAAG,EAAE,qBAAqB;QAC1B,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC,CAAC,OAAO,CAAC,iCAAiC;QAC1G,OAAO,EAAE,GAAG,EAAE;YACZ,aAAa,EAAE,CAAC;QAClB,CAAC;QACD,SAAS,EAAE;YACT,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,mCAAmC;YAClG,MAAM,EAAE;gBACN,IAAI,EAAE;oBACJ,UAAU,EAAE,CAAC;iBACd;aACF;SACF;KACF,CAAC,CAAC;IACH,MAAM,wBAAwB,GAAwB;QACpD,GAAG,EAAE,eAAe;QACpB,KAAK,EAAE,eAAe;QACtB,QAAQ,EAAE,sBAAsB,CAAC,OAAO;QACxC,YAAY,EAAE;YACZ,UAAU,EAAE,IAAI;YAChB,KAAK,EAAE,oBAAoB;SAC5B;KACF,CAAC;IACF,MAAM,oBAAoB,GAAiB,OAAO,CAAC,GAAG,EAAE,CAAC,iCACpD,KAAK,CAAC,oBAAoB,KAC7B,SAAS,EAAE,qBAAqB,IAChC,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAClC,OAAO;QACH,oBAAC,SAAS,IAAC,kBAAkB,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,GAAI;QACtE,oBAAC,gBAAgB,oBAAK,KAAK,IAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,cAAc,EAAE,MAAA,KAAK,CAAC,cAAc,mCAAI,oBAAoB,EAAE,eAAe,EAAE,MAAA,KAAK,CAAC,eAAe,mCAAI,qBAAqB,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,mBAAmB,EAAE,SAAS,EAAE,MAAA,KAAK,CAAC,SAAS,mCAAI,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC,8BAA8B,iCAChZ,KAAK,KACR,cAAc,EAAE,mBAAmB,EACnC,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,UAAU,KAC/B,OAAO,EAAE,wBAAwB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,aAAa,EAAE,CAAA,MAAA,KAAK,CAAC,aAAa,mCAAI,CAAC,KAAK,CAAC,yBAAyB,EAAC,CAAC,CAAC;gBAC3H,MAAM,EAAE,IAAI;aACb,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,KAAK,CAAC,yBAAyB,sBAAoB,OAAO,CAAC,2BAA2B,0BAAwB,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,EAAE,oBAAoB,EAAE,oBAAoB,IAAI,CACvY,CAAC;AACR,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useState, useMemo } from 'react';\nimport { useLocale } from '../localization';\nimport { VideoStreamOptions } from '../types';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { ContextualMenuItemType, IButtonProps, IContextualMenuItem, IContextualMenuItemStyles, IContextualMenuStyles } from '@fluentui/react';\nimport { ControlBarButtonStyles } from './ControlBarButton';\nimport { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';\nimport { Announcer } from './Announcer';\nconst defaultLocalVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\n/**\n * Strings of CameraButton that can be overridden.\n *\n * @public\n */\nexport interface CameraButtonStrings {\n  /** Label when button is on. */\n  onLabel: string;\n  /** Label when button is off. */\n  offLabel: string;\n  /** Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is on. */\n  tooltipOnContent?: string;\n  /** Tooltip content when the button is off. */\n  tooltipOffContent?: string;\n  /** Tooltip content when the button is disabled due to video loading. */\n  tooltipVideoLoadingContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: string;\n  /**\n   * Tooltip of camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * description of camera button split button role\n   */\n  cameraButtonSplitRoleDescription?: string;\n  /**\n   * Camera split button aria label for when button is enabled.\n   */\n  onSplitButtonAriaLabel?: string;\n  /**\n   * Camera split button aria label for when button is disabled.\n   */\n  offSplitButtonAriaLabel?: string;\n  /**\n   * Camera action turned on string for announcer\n   */\n  cameraActionTurnedOnAnnouncement?: string;\n  /**\n   * Camera action turned off string for announcer\n   */\n  cameraActionTurnedOffAnnouncement?: string;\n  /**\n   * Primary action for when the camera is turned off\n   */\n  offSplitButtonPrimaryActionCamera?: string;\n  /**\n   * Primary action for when the camera is on\n   */\n  onSplitButtonPrimaryActionCamera?: string;\n  /**\n   * Title for primary action section of split button\n   */\n  cameraPrimaryActionSplitButtonTitle?: string;\n  /**\n   * Title for video effects menu item\n   */\n  videoEffectsMenuItemTitle?: string;\n  /**\n   * Aria description for camera button\n   */\n  cameraButtonAriaDescription?: string;\n}\n\n/**\n * Styles for {@link CameraButton}\n *\n * @public\n */\nexport interface CameraButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link CameraButton} menu.\n   */\n  menuStyles?: Partial<CameraButtonContextualMenuStyles>;\n}\n\n/**\n * Styles for the {@link CameraButton} menu.\n *\n * @public\n */\nexport interface CameraButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link CameraButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n/**\n * Props for {@link CameraButton} component.\n *\n * @public\n */\nexport interface CameraButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleCamera?: (options?: VideoStreamOptions) => Promise<void>;\n\n  /**\n   * Options for rendering local video view.\n   */\n  localVideoViewOptions?: VideoStreamOptions;\n  /**\n   * Available cameras for selection\n   */\n  cameras?: OptionsDevice[];\n  /**\n   * Camera that is shown as currently selected\n   */\n  selectedCamera?: OptionsDevice;\n  /**\n   * Callback when a camera is selected\n   */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Whether to use a {@link SplitButton} with a {@link IContextualMenu} for device selection.\n   *\n   * default: false\n   */\n  enableDeviceSelectionMenu?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<CameraButtonStrings>;\n  /**\n   * Styles for {@link CameraButton} and the device selection flyout.\n   */\n  styles?: Partial<CameraButtonStyles>;\n\n  /**\n   * Callback when a effects is clicked\n   */\n  onClickVideoEffects?: (showVideoEffects: boolean) => void;\n}\n\n/**\n * A button to turn camera on / off.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const CameraButton = (props: CameraButtonProps): JSX.Element => {\n  const {\n    localVideoViewOptions,\n    onToggleCamera,\n    onSelectCamera\n  } = props;\n  const [waitForCamera, setWaitForCamera] = useState(false);\n  const localeStrings = useLocale().strings.cameraButton;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n  const disabled = props.disabled || waitForCamera;\n  const onRenderCameraOnIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOn\" />;\n  const onRenderCameraOffIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOff\" />;\n  if (waitForCamera && strings.tooltipVideoLoadingContent) {\n    strings.tooltipDisabledContent = strings.tooltipVideoLoadingContent;\n  }\n  const cameraOn = props.checked;\n  const cameraTurningOn = waitForCamera && !cameraOn;\n  // Ensure Aria-label by default reflects the loading state of the camera\n  const ariaLabel = props.ariaLabel ?? cameraTurningOn ? strings.tooltipVideoLoadingContent : undefined;\n  const splitButtonAriaString = cameraTurningOn ? strings.tooltipVideoLoadingContent : cameraOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;\n  const toggleAnnouncerString = useCallback((isCameraOn: boolean) => {\n    setAnnouncerString(!isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement);\n  }, [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]);\n  const onVideoIsLoadingAnnouncementCallback = useCallback(() => {\n    if (!cameraOn) {\n      setAnnouncerString(strings.tooltipVideoLoadingContent);\n    }\n  }, [setAnnouncerString, cameraOn, strings.tooltipVideoLoadingContent]);\n  const onToggleClick = useCallback(async () => {\n    // Throttle click on camera, need to await onToggleCamera then allow another click\n    if (onToggleCamera) {\n      setWaitForCamera(true);\n      try {\n        await onToggleCamera(localVideoViewOptions ?? defaultLocalVideoViewOptions);\n        // allows for the setting of narrator strings triggering the announcer when camera is turned on or off.\n        toggleAnnouncerString(!cameraOn);\n      } finally {\n        setWaitForCamera(false);\n      }\n    }\n  }, [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);\n  const onToggleClickCallback = useCallback(() => {\n    onVideoIsLoadingAnnouncementCallback();\n    onToggleClick();\n  }, [onVideoIsLoadingAnnouncementCallback, onToggleClick]);\n  const onChangeCameraClick = useCallback(async (device: OptionsDevice) => {\n    // Throttle changing camera to prevent too many callbacks\n    if (onSelectCamera) {\n      setWaitForCamera(true);\n      try {\n        await onSelectCamera(device);\n      } finally {\n        setWaitForCamera(false);\n      }\n    }\n  }, [onSelectCamera]);\n  const splitButtonMenuItems: IContextualMenuItem[] = [];\n  if (props.onClickVideoEffects) {\n    splitButtonMenuItems.push({\n      key: 'effects',\n      'data-ui-id': 'camera-split-button-video-effects',\n      text: strings.videoEffectsMenuItemTitle,\n      iconProps: {\n        iconName: 'ControlButtonVideoEffectsOption',\n        styles: {\n          root: {\n            lineHeight: 0\n          }\n        }\n      },\n      onClick: () => {\n        if (props.onClickVideoEffects) {\n          props.onClickVideoEffects(true);\n        }\n      }\n    });\n  }\n  splitButtonMenuItems.push({\n    key: 'cameraPrimaryAction',\n    text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,\n    onClick: () => {\n      onToggleClick();\n    },\n    iconProps: {\n      iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',\n      styles: {\n        root: {\n          lineHeight: 0\n        }\n      }\n    }\n  });\n  const splitButtonPrimaryAction: IContextualMenuItem = {\n    key: 'primaryAction',\n    title: 'toggle camera',\n    itemType: ContextualMenuItemType.Section,\n    sectionProps: {\n      topDivider: true,\n      items: splitButtonMenuItems\n    }\n  };\n  const splitButtonMenuProps: IButtonProps = useMemo(() => ({\n    ...props.splitButtonMenuProps,\n    className: 'camera-split-button'\n  }), [props.splitButtonMenuProps]);\n  return <>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <ControlBarButton {...props} disabled={disabled} onClick={onToggleCamera ? onToggleClickCallback : props.onClick} onRenderOnIcon={props.onRenderOnIcon ?? onRenderCameraOnIcon} onRenderOffIcon={props.onRenderOffIcon ?? onRenderCameraOffIcon} strings={strings} labelKey={props.labelKey ?? 'cameraButtonLabel'} menuProps={props.menuProps ?? (props.enableDeviceSelectionMenu ? generateDefaultDeviceMenuProps({\n      ...props,\n      onSelectCamera: onChangeCameraClick,\n      styles: props.styles?.menuStyles\n    }, strings, splitButtonPrimaryAction) : undefined)} menuIconProps={props.menuIconProps ?? !props.enableDeviceSelectionMenu ? {\n      hidden: true\n    } : undefined} split={props.split ?? props.enableDeviceSelectionMenu} aria-description={strings.cameraButtonAriaDescription} aria-roledescription={props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined} ariaLabel={ariaLabel} splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined} splitButtonMenuProps={splitButtonMenuProps} />\n    </>;\n};"]}
+{"version":3,"file":"CameraButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CameraButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useState, useMemo } from 'react';\nimport { useLocale } from '../localization';\nimport { VideoStreamOptions } from '../types';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\nimport {\n  ContextualMenuItemType,\n  IButtonProps,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuStyles\n} from '@fluentui/react';\nimport { ControlBarButtonStyles } from './ControlBarButton';\nimport { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';\nimport { Announcer } from './Announcer';\n\nconst defaultLocalVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\n/**\n * Strings of CameraButton that can be overridden.\n *\n * @public\n */\nexport interface CameraButtonStrings {\n  /** Label when button is on. */\n  onLabel: string;\n  /** Label when button is off. */\n  offLabel: string;\n  /** Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is on. */\n  tooltipOnContent?: string;\n  /** Tooltip content when the button is off. */\n  tooltipOffContent?: string;\n  /** Tooltip content when the button is disabled due to video loading. */\n  tooltipVideoLoadingContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: string;\n  /**\n   * Tooltip of camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * description of camera button split button role\n   */\n  cameraButtonSplitRoleDescription?: string;\n  /**\n   * Camera split button aria label for when button is enabled.\n   */\n  onSplitButtonAriaLabel?: string;\n  /**\n   * Camera split button aria label for when button is disabled.\n   */\n  offSplitButtonAriaLabel?: string;\n  /**\n   * Camera action turned on string for announcer\n   */\n  cameraActionTurnedOnAnnouncement?: string;\n  /**\n   * Camera action turned off string for announcer\n   */\n  cameraActionTurnedOffAnnouncement?: string;\n  /**\n   * Primary action for when the camera is turned off\n   */\n  offSplitButtonPrimaryActionCamera?: string;\n  /**\n   * Primary action for when the camera is on\n   */\n  onSplitButtonPrimaryActionCamera?: string;\n  /**\n   * Title for primary action section of split button\n   */\n  cameraPrimaryActionSplitButtonTitle?: string;\n  /**\n   * Title for video effects menu item\n   */\n  videoEffectsMenuItemTitle?: string;\n  /**\n   * Aria description for camera button\n   */\n  cameraButtonAriaDescription?: string;\n}\n\n/**\n * Styles for {@link CameraButton}\n *\n * @public\n */\nexport interface CameraButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link CameraButton} menu.\n   */\n  menuStyles?: Partial<CameraButtonContextualMenuStyles>;\n}\n\n/**\n * Styles for the {@link CameraButton} menu.\n *\n * @public\n */\nexport interface CameraButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link CameraButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n/**\n * Props for {@link CameraButton} component.\n *\n * @public\n */\nexport interface CameraButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleCamera?: (options?: VideoStreamOptions) => Promise<void>;\n\n  /**\n   * Options for rendering local video view.\n   */\n  localVideoViewOptions?: VideoStreamOptions;\n  /**\n   * Available cameras for selection\n   */\n  cameras?: OptionsDevice[];\n  /**\n   * Camera that is shown as currently selected\n   */\n  selectedCamera?: OptionsDevice;\n  /**\n   * Callback when a camera is selected\n   */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Whether to use a {@link SplitButton} with a {@link IContextualMenu} for device selection.\n   *\n   * default: false\n   */\n  enableDeviceSelectionMenu?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<CameraButtonStrings>;\n  /**\n   * Styles for {@link CameraButton} and the device selection flyout.\n   */\n  styles?: Partial<CameraButtonStyles>;\n\n  /**\n   * Callback when a effects is clicked\n   */\n  onClickVideoEffects?: (showVideoEffects: boolean) => void;\n}\n\n/**\n * A button to turn camera on / off.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const CameraButton = (props: CameraButtonProps): JSX.Element => {\n  const { localVideoViewOptions, onToggleCamera, onSelectCamera } = props;\n  const [waitForCamera, setWaitForCamera] = useState(false);\n  const localeStrings = useLocale().strings.cameraButton;\n  const strings = { ...localeStrings, ...props.strings };\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n\n  const disabled = props.disabled || waitForCamera;\n\n  const onRenderCameraOnIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOn\" />\n  );\n  const onRenderCameraOffIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOff\" />\n  );\n  if (waitForCamera && strings.tooltipVideoLoadingContent) {\n    strings.tooltipDisabledContent = strings.tooltipVideoLoadingContent;\n  }\n\n  const cameraOn = props.checked;\n  const cameraTurningOn = waitForCamera && !cameraOn;\n  // Ensure Aria-label by default reflects the loading state of the camera\n  const ariaLabel = props.ariaLabel ?? cameraTurningOn ? strings.tooltipVideoLoadingContent : undefined;\n\n  const splitButtonAriaString = cameraTurningOn\n    ? strings.tooltipVideoLoadingContent\n    : cameraOn\n      ? strings.onSplitButtonAriaLabel\n      : strings.offSplitButtonAriaLabel;\n\n  const toggleAnnouncerString = useCallback(\n    (isCameraOn: boolean) => {\n      setAnnouncerString(\n        !isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement\n      );\n    },\n    [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]\n  );\n\n  const onVideoIsLoadingAnnouncementCallback = useCallback(() => {\n    if (!cameraOn) {\n      setAnnouncerString(strings.tooltipVideoLoadingContent);\n    }\n  }, [setAnnouncerString, cameraOn, strings.tooltipVideoLoadingContent]);\n\n  const onToggleClick = useCallback(async () => {\n    // Throttle click on camera, need to await onToggleCamera then allow another click\n    if (onToggleCamera) {\n      setWaitForCamera(true);\n      try {\n        await onToggleCamera(localVideoViewOptions ?? defaultLocalVideoViewOptions);\n        // allows for the setting of narrator strings triggering the announcer when camera is turned on or off.\n        toggleAnnouncerString(!cameraOn);\n      } finally {\n        setWaitForCamera(false);\n      }\n    }\n  }, [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);\n\n  const onToggleClickCallback = useCallback(() => {\n    onVideoIsLoadingAnnouncementCallback();\n    onToggleClick();\n  }, [onVideoIsLoadingAnnouncementCallback, onToggleClick]);\n\n  const onChangeCameraClick = useCallback(\n    async (device: OptionsDevice) => {\n      // Throttle changing camera to prevent too many callbacks\n      if (onSelectCamera) {\n        setWaitForCamera(true);\n        try {\n          await onSelectCamera(device);\n        } finally {\n          setWaitForCamera(false);\n        }\n      }\n    },\n    [onSelectCamera]\n  );\n\n  const splitButtonMenuItems: IContextualMenuItem[] = [];\n\n  if (props.onClickVideoEffects) {\n    splitButtonMenuItems.push({\n      key: 'effects',\n      'data-ui-id': 'camera-split-button-video-effects',\n      text: strings.videoEffectsMenuItemTitle,\n      iconProps: { iconName: 'ControlButtonVideoEffectsOption', styles: { root: { lineHeight: 0 } } },\n      onClick: () => {\n        if (props.onClickVideoEffects) {\n          props.onClickVideoEffects(true);\n        }\n      }\n    });\n  }\n\n  splitButtonMenuItems.push({\n    key: 'cameraPrimaryAction',\n    text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,\n    onClick: () => {\n      onToggleClick();\n    },\n    iconProps: {\n      iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',\n      styles: { root: { lineHeight: 0 } }\n    }\n  });\n\n  const splitButtonPrimaryAction: IContextualMenuItem = {\n    key: 'primaryAction',\n    title: 'toggle camera',\n    itemType: ContextualMenuItemType.Section,\n    sectionProps: {\n      topDivider: true,\n      items: splitButtonMenuItems\n    }\n  };\n\n  const splitButtonMenuProps: IButtonProps = useMemo(\n    () => ({\n      ...props.splitButtonMenuProps,\n      className: 'camera-split-button'\n    }),\n    [props.splitButtonMenuProps]\n  );\n\n  return (\n    <>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <ControlBarButton\n        {...props}\n        disabled={disabled}\n        onClick={onToggleCamera ? onToggleClickCallback : props.onClick}\n        onRenderOnIcon={props.onRenderOnIcon ?? onRenderCameraOnIcon}\n        onRenderOffIcon={props.onRenderOffIcon ?? onRenderCameraOffIcon}\n        strings={strings}\n        labelKey={props.labelKey ?? 'cameraButtonLabel'}\n        menuProps={\n          props.menuProps ??\n          (props.enableDeviceSelectionMenu\n            ? generateDefaultDeviceMenuProps(\n                { ...props, onSelectCamera: onChangeCameraClick, styles: props.styles?.menuStyles },\n                strings,\n                splitButtonPrimaryAction\n              )\n            : undefined)\n        }\n        menuIconProps={props.menuIconProps ?? !props.enableDeviceSelectionMenu ? { hidden: true } : undefined}\n        split={props.split ?? props.enableDeviceSelectionMenu}\n        aria-description={strings.cameraButtonAriaDescription}\n        aria-roledescription={props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined}\n        ariaLabel={ariaLabel}\n        splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}\n        splitButtonMenuProps={splitButtonMenuProps}\n      />\n    </>\n  );\n};\n"]}

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

@@ -23,11 +23,11 @@ export const _Caption = (props) => {
         }
     };
     const userIcon = onRenderAvatar ? onRenderAvatar(userId !== null && userId !== void 0 ? userId : '', personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions));
-    return React.createElement(Stack, { horizontal: true, verticalAlign: "start", horizontalAlign: "start" },
+    return (React.createElement(Stack, { horizontal: true, verticalAlign: "start", horizontalAlign: "start" },
         React.createElement(Stack.Item, { className: iconClassName }, userIcon),
         React.createElement(Stack, { verticalAlign: "start", className: captionsContentContainerClassName },
             React.createElement(Stack.Item, { className: displayNameContainerClassName },
                 React.createElement(Text, { className: displayNameClassName }, displayName)),
-            React.createElement(Stack.Item, { className: captionClassName, dir: "auto" }, captionText)));
+            React.createElement(Stack.Item, { className: captionClassName, dir: "auto" }, captionText))));
 };
 //# sourceMappingURL=Caption.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Caption.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/Caption.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAY,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,iCAAiC,EAAE,oBAAoB,EAAE,6BAA6B,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAgBlK;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;IAC5D,MAAM,EACJ,WAAW,EACX,MAAM,EACN,WAAW,EACX,cAAc,EACf,GAAG,KAAK,CAAC;IACV,MAAM,cAAc,GAAa;QAC/B,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,IAAI,EAAE,WAAW;QACjB,mBAAmB,EAAE,KAAK;QAC1B,uBAAuB,EAAE,IAAI;QAC7B,iBAAiB,EAAE,OAAO;QAC1B,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,MAAM,EAAE,SAAS;aAClB;SACF;KACF,CAAC;IACF,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,oBAAC,OAAO,oBAAK,cAAc,EAAI,CAAC;IACjH,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,OAAO,EAAC,eAAe,EAAC,OAAO;QAClE,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,QAAQ,CAAc;QAE7D,oBAAC,KAAK,IAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAE,iCAAiC;YACvE,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,6BAA6B;gBAClD,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,WAAW,CAAQ,CAChD;YACb,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAC,MAAM,IAChD,WAAW,CACD,CACP,CACF,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IPersona, Persona, Stack, PersonaSize, Text } from '@fluentui/react';\nimport React from 'react';\nimport { OnRenderAvatarCallback } from '../types';\nimport { captionClassName, captionsContentContainerClassName, displayNameClassName, displayNameContainerClassName, iconClassName } from './styles/Captions.style';\nimport { CaptionsInformation } from './CaptionsBanner';\n\n/**\n * @internal\n * Props for a single line of caption.\n */\nexport interface _CaptionProps extends CaptionsInformation {\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/**\n * @internal\n * A component for displaying a single line of caption\n */\nexport const _Caption = (props: _CaptionProps): JSX.Element => {\n  const {\n    displayName,\n    userId,\n    captionText,\n    onRenderAvatar\n  } = props;\n  const personaOptions: IPersona = {\n    hidePersonaDetails: true,\n    size: PersonaSize.size32,\n    text: displayName,\n    showOverflowTooltip: false,\n    imageShouldStartVisible: true,\n    initialsTextColor: 'white',\n    styles: {\n      root: {\n        margin: '0.25rem'\n      }\n    }\n  };\n  const userIcon = onRenderAvatar ? onRenderAvatar(userId ?? '', personaOptions) : <Persona {...personaOptions} />;\n  return <Stack horizontal verticalAlign=\"start\" horizontalAlign=\"start\">\n      <Stack.Item className={iconClassName}>{userIcon}</Stack.Item>\n\n      <Stack verticalAlign=\"start\" className={captionsContentContainerClassName}>\n        <Stack.Item className={displayNameContainerClassName}>\n          <Text className={displayNameClassName}>{displayName}</Text>\n        </Stack.Item>\n        <Stack.Item className={captionClassName} dir=\"auto\">\n          {captionText}\n        </Stack.Item>\n      </Stack>\n    </Stack>;\n};"]}
+{"version":3,"file":"Caption.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/Caption.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAY,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,gBAAgB,EAChB,iCAAiC,EACjC,oBAAoB,EACpB,6BAA6B,EAC7B,aAAa,EACd,MAAM,yBAAyB,CAAC;AAgBjC;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;IAC5D,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEnE,MAAM,cAAc,GAAa;QAC/B,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,IAAI,EAAE,WAAW;QACjB,mBAAmB,EAAE,KAAK;QAC1B,uBAAuB,EAAE,IAAI;QAC7B,iBAAiB,EAAE,OAAO;QAC1B,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,MAAM,EAAE,SAAS;aAClB;SACF;KACF,CAAC;IAEF,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,oBAAC,OAAO,oBAAK,cAAc,EAAI,CAAC;IAEjH,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,OAAO,EAAC,eAAe,EAAC,OAAO;QAC7D,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,QAAQ,CAAc;QAE7D,oBAAC,KAAK,IAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAE,iCAAiC;YACvE,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,6BAA6B;gBAClD,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,WAAW,CAAQ,CAChD;YACb,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAC,MAAM,IAChD,WAAW,CACD,CACP,CACF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IPersona, Persona, Stack, PersonaSize, Text } from '@fluentui/react';\nimport React from 'react';\nimport { OnRenderAvatarCallback } from '../types';\nimport {\n  captionClassName,\n  captionsContentContainerClassName,\n  displayNameClassName,\n  displayNameContainerClassName,\n  iconClassName\n} from './styles/Captions.style';\nimport { CaptionsInformation } from './CaptionsBanner';\n\n/**\n * @internal\n * Props for a single line of caption.\n */\nexport interface _CaptionProps extends CaptionsInformation {\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/**\n * @internal\n * A component for displaying a single line of caption\n */\nexport const _Caption = (props: _CaptionProps): JSX.Element => {\n  const { displayName, userId, captionText, onRenderAvatar } = props;\n\n  const personaOptions: IPersona = {\n    hidePersonaDetails: true,\n    size: PersonaSize.size32,\n    text: displayName,\n    showOverflowTooltip: false,\n    imageShouldStartVisible: true,\n    initialsTextColor: 'white',\n    styles: {\n      root: {\n        margin: '0.25rem'\n      }\n    }\n  };\n\n  const userIcon = onRenderAvatar ? onRenderAvatar(userId ?? '', personaOptions) : <Persona {...personaOptions} />;\n\n  return (\n    <Stack horizontal verticalAlign=\"start\" horizontalAlign=\"start\">\n      <Stack.Item className={iconClassName}>{userIcon}</Stack.Item>\n\n      <Stack verticalAlign=\"start\" className={captionsContentContainerClassName}>\n        <Stack.Item className={displayNameContainerClassName}>\n          <Text className={displayNameClassName}>{displayName}</Text>\n        </Stack.Item>\n        <Stack.Item className={captionClassName} dir=\"auto\">\n          {captionText}\n        </Stack.Item>\n      </Stack>\n    </Stack>\n  );\n};\n"]}

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

@@ -26,7 +26,8 @@ export const CaptionsBanner = (props) => {
         if (!captionsScrollDivRef.current) {
             return;
         }
-        const atBottom = Math.ceil(captionsScrollDivRef.current.scrollTop) >= captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight - SCROLL_OFFSET_ALLOWANCE;
+        const atBottom = Math.ceil(captionsScrollDivRef.current.scrollTop) >=
+            captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight - SCROLL_OFFSET_ALLOWANCE;
         setIsAtBottomOfScroll(atBottom);
     }, []);
     useEffect(() => {
@@ -42,12 +43,16 @@ export const CaptionsBanner = (props) => {
             scrollToBottom();
         }
     }, [captions, isAtBottomOfScroll]);
-    return React.createElement(React.Fragment, null, startCaptionsInProgress && React.createElement(FocusZone, { className: captionsContainerClassName, "data-ui-id": "captions-banner" },
-        isCaptionsOn && React.createElement("ul", { ref: captionsScrollDivRef, className: (captionsOptions === null || captionsOptions === void 0 ? void 0 : captionsOptions.height) === 'full' ? captionsBannerFullHeightClassName(theme) : captionsBannerClassName(formFactor), "data-ui-id": "captions-banner-inner" }, captions.map(caption => {
-            return React.createElement("li", { key: caption.id, className: captionContainerClassName, "data-is-focusable": true },
-                React.createElement(_Caption, Object.assign({}, caption, { onRenderAvatar: onRenderAvatar })));
-        })),
-        !isCaptionsOn && React.createElement(Stack, { verticalAlign: "center", styles: (captionsOptions === null || captionsOptions === void 0 ? void 0 : captionsOptions.height) === 'full' ? loadingBannerFullHeightStyles(theme) : loadingBannerStyles(formFactor), "data-is-focusable": true },
-            React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.captionsBannerSpinnerText, ariaLive: "assertive", labelPosition: "right" }))));
+    return (React.createElement(React.Fragment, null, startCaptionsInProgress && (React.createElement(FocusZone, { shouldFocusOnMount: true, className: captionsContainerClassName, "data-ui-id": "captions-banner" },
+        isCaptionsOn && (React.createElement("ul", { ref: captionsScrollDivRef, className: (captionsOptions === null || captionsOptions === void 0 ? void 0 : captionsOptions.height) === 'full'
+                ? captionsBannerFullHeightClassName(theme)
+                : captionsBannerClassName(formFactor), "data-ui-id": "captions-banner-inner" }, captions.map((caption) => {
+            return (React.createElement("li", { key: caption.id, className: captionContainerClassName, "data-is-focusable": true },
+                React.createElement(_Caption, Object.assign({}, caption, { onRenderAvatar: onRenderAvatar }))));
+        }))),
+        !isCaptionsOn && (React.createElement(Stack, { verticalAlign: "center", styles: (captionsOptions === null || captionsOptions === void 0 ? void 0 : captionsOptions.height) === 'full'
+                ? loadingBannerFullHeightStyles(theme)
+                : loadingBannerStyles(formFactor), "data-is-focusable": true },
+            React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.captionsBannerSpinnerText, ariaLive: "assertive", labelPosition: "right" })))))));
 };
 //# sourceMappingURL=CaptionsBanner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack, FocusZone, Spinner, useTheme } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { _Caption } from './Caption';\nimport { captionContainerClassName, captionsBannerClassName, captionsBannerFullHeightClassName, captionsContainerClassName, loadingBannerFullHeightStyles, loadingBannerStyles } from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\nimport { useLocale } from '../localization';\n\n/**\n * @public\n * information required for each line of caption\n */\nexport type CaptionsInformation = {\n  /**\n   * unique id for each caption\n   */\n  id: string;\n  /**\n   * speaker's display name\n   */\n  displayName: string;\n  /**\n   * content of the caption\n   */\n  captionText: string;\n  /**\n   * id of the speaker\n   */\n  userId?: string;\n};\n\n/**\n * @public\n * strings for captions banner\n */\nexport interface CaptionsBannerStrings {\n  /**\n   * Spinner text for captions banner\n   */\n  captionsBannerSpinnerText?: string;\n}\n\n/**\n * @public\n * CaptionsBanner Component Props.\n */\nexport interface CaptionsBannerProps {\n  /**\n   * Array of captions to be displayed\n   */\n  captions: CaptionsInformation[];\n  /**\n   * Flag to indicate if captions are on\n   */\n  isCaptionsOn?: boolean;\n  /**\n   * Flag to indicate if captions are being started\n   * This is used to show spinner while captions are being started\n   */\n  startCaptionsInProgress?: boolean;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Optional strings for the component\n   */\n  strings?: CaptionsBannerStrings;\n  /**\n   * Optional form factor for the component.\n   * @defaultValue 'default'\n   */\n  formFactor?: 'default' | 'compact';\n  /**\n   * Optional options for the component.\n   */\n  captionsOptions?: {\n    height: 'full' | 'default';\n  };\n}\nconst SCROLL_OFFSET_ALLOWANCE = 20;\n\n/**\n * @public\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {\n  const {\n    captions,\n    isCaptionsOn,\n    startCaptionsInProgress,\n    onRenderAvatar,\n    formFactor = 'default',\n    captionsOptions\n  } = props;\n  const localeStrings = useLocale().strings.captionsBanner;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const captionsScrollDivRef = useRef<HTMLUListElement>(null);\n  const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n  const theme = useTheme();\n  const scrollToBottom = (): void => {\n    if (captionsScrollDivRef.current) {\n      captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n    }\n  };\n  const handleScrollToTheBottom = useCallback((): void => {\n    if (!captionsScrollDivRef.current) {\n      return;\n    }\n    const atBottom = Math.ceil(captionsScrollDivRef.current.scrollTop) >= captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight - SCROLL_OFFSET_ALLOWANCE;\n    setIsAtBottomOfScroll(atBottom);\n  }, []);\n  useEffect(() => {\n    const captionsScrollDiv = captionsScrollDivRef.current;\n    captionsScrollDiv?.addEventListener('scroll', handleScrollToTheBottom);\n    return () => {\n      captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);\n    };\n  }, [handleScrollToTheBottom, isCaptionsOn]);\n  useEffect(() => {\n    // only auto scroll to bottom is already is at bottom of scroll before new caption comes in\n    if (isAtBottomOfScroll) {\n      scrollToBottom();\n    }\n  }, [captions, isAtBottomOfScroll]);\n  return <>\n      {startCaptionsInProgress && <FocusZone className={captionsContainerClassName} data-ui-id=\"captions-banner\">\n          {isCaptionsOn && <ul ref={captionsScrollDivRef} className={captionsOptions?.height === 'full' ? captionsBannerFullHeightClassName(theme) : captionsBannerClassName(formFactor)} data-ui-id=\"captions-banner-inner\">\n              {captions.map(caption => {\n          return <li key={caption.id} className={captionContainerClassName} data-is-focusable={true}>\n                    <_Caption {...caption} onRenderAvatar={onRenderAvatar} />\n                  </li>;\n        })}\n            </ul>}\n          {!isCaptionsOn && <Stack verticalAlign=\"center\" styles={captionsOptions?.height === 'full' ? loadingBannerFullHeightStyles(theme) : loadingBannerStyles(formFactor)} data-is-focusable={true}>\n              <Spinner label={strings?.captionsBannerSpinnerText} ariaLive=\"assertive\" labelPosition=\"right\" />\n            </Stack>}\n        </FocusZone>}\n    </>;\n};"]}
+{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack, FocusZone, Spinner, useTheme } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { _Caption } from './Caption';\nimport {\n  captionContainerClassName,\n  captionsBannerClassName,\n  captionsBannerFullHeightClassName,\n  captionsContainerClassName,\n  loadingBannerFullHeightStyles,\n  loadingBannerStyles\n} from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\nimport { useLocale } from '../localization';\n\n/**\n * @public\n * information required for each line of caption\n */\nexport type CaptionsInformation = {\n  /**\n   * unique id for each caption\n   */\n  id: string;\n  /**\n   * speaker's display name\n   */\n  displayName: string;\n  /**\n   * content of the caption\n   */\n  captionText: string;\n  /**\n   * id of the speaker\n   */\n  userId?: string;\n};\n\n/**\n * @public\n * strings for captions banner\n */\nexport interface CaptionsBannerStrings {\n  /**\n   * Spinner text for captions banner\n   */\n  captionsBannerSpinnerText?: string;\n}\n\n/**\n * @public\n * CaptionsBanner Component Props.\n */\nexport interface CaptionsBannerProps {\n  /**\n   * Array of captions to be displayed\n   */\n  captions: CaptionsInformation[];\n  /**\n   * Flag to indicate if captions are on\n   */\n  isCaptionsOn?: boolean;\n  /**\n   * Flag to indicate if captions are being started\n   * This is used to show spinner while captions are being started\n   */\n  startCaptionsInProgress?: boolean;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Optional strings for the component\n   */\n  strings?: CaptionsBannerStrings;\n  /**\n   * Optional form factor for the component.\n   * @defaultValue 'default'\n   */\n  formFactor?: 'default' | 'compact';\n  /**\n   * Optional options for the component.\n   */\n  captionsOptions?: {\n    height: 'full' | 'default';\n  };\n}\n\nconst SCROLL_OFFSET_ALLOWANCE = 20;\n\n/**\n * @public\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {\n  const {\n    captions,\n    isCaptionsOn,\n    startCaptionsInProgress,\n    onRenderAvatar,\n    formFactor = 'default',\n    captionsOptions\n  } = props;\n  const localeStrings = useLocale().strings.captionsBanner;\n  const strings = { ...localeStrings, ...props.strings };\n  const captionsScrollDivRef = useRef<HTMLUListElement>(null);\n  const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n  const theme = useTheme();\n\n  const scrollToBottom = (): void => {\n    if (captionsScrollDivRef.current) {\n      captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n    }\n  };\n\n  const handleScrollToTheBottom = useCallback((): void => {\n    if (!captionsScrollDivRef.current) {\n      return;\n    }\n    const atBottom =\n      Math.ceil(captionsScrollDivRef.current.scrollTop) >=\n      captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight - SCROLL_OFFSET_ALLOWANCE;\n\n    setIsAtBottomOfScroll(atBottom);\n  }, []);\n\n  useEffect(() => {\n    const captionsScrollDiv = captionsScrollDivRef.current;\n    captionsScrollDiv?.addEventListener('scroll', handleScrollToTheBottom);\n\n    return () => {\n      captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);\n    };\n  }, [handleScrollToTheBottom, isCaptionsOn]);\n\n  useEffect(() => {\n    // only auto scroll to bottom is already is at bottom of scroll before new caption comes in\n    if (isAtBottomOfScroll) {\n      scrollToBottom();\n    }\n  }, [captions, isAtBottomOfScroll]);\n\n  return (\n    <>\n      {startCaptionsInProgress && (\n        <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id=\"captions-banner\">\n          {isCaptionsOn && (\n            <ul\n              ref={captionsScrollDivRef}\n              className={\n                captionsOptions?.height === 'full'\n                  ? captionsBannerFullHeightClassName(theme)\n                  : captionsBannerClassName(formFactor)\n              }\n              data-ui-id=\"captions-banner-inner\"\n            >\n              {captions.map((caption) => {\n                return (\n                  <li key={caption.id} className={captionContainerClassName} data-is-focusable={true}>\n                    <_Caption {...caption} onRenderAvatar={onRenderAvatar} />\n                  </li>\n                );\n              })}\n            </ul>\n          )}\n          {!isCaptionsOn && (\n            <Stack\n              verticalAlign=\"center\"\n              styles={\n                captionsOptions?.height === 'full'\n                  ? loadingBannerFullHeightStyles(theme)\n                  : loadingBannerStyles(formFactor)\n              }\n              data-is-focusable={true}\n            >\n              <Spinner label={strings?.captionsBannerSpinnerText} ariaLive=\"assertive\" labelPosition=\"right\" />\n            </Stack>\n          )}\n        </FocusZone>\n      )}\n    </>\n  );\n};\n"]}

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

@@ -40,7 +40,8 @@ export const CaptionsSettingsModal = (props) => {
         text: currentSpokenLanguage || defaultSpokenLanguage
     });
     const [selectedCaptionLanguage, setSelectedCaptionLanguage] = useState({
-        key: currentCaptionLanguage || _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key],
+        key: currentCaptionLanguage ||
+            _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key],
         text: currentCaptionLanguage || _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key]
     });
     useEffect(() => {
@@ -67,14 +68,21 @@ export const CaptionsSettingsModal = (props) => {
             }
         }
         else {
-            yield onStartCaptions({
-                spokenLanguage: spokenLanguageCode
-            });
+            yield onStartCaptions({ spokenLanguage: spokenLanguageCode });
         }
         onDismiss();
-    }), [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onSetCaptionLanguage, onStartCaptions, selectedSpokenLanguage.key, selectedCaptionLanguage.key, changeCaptionLanguage]);
+    }), [
+        onDismiss,
+        isCaptionsFeatureActive,
+        onSetSpokenLanguage,
+        onSetCaptionLanguage,
+        onStartCaptions,
+        selectedSpokenLanguage.key,
+        selectedCaptionLanguage.key,
+        changeCaptionLanguage
+    ]);
     const spokenLanguageDropdownOptions = useMemo(() => {
-        return supportedSpokenLanguages.map(languageCode => {
+        return supportedSpokenLanguages.map((languageCode) => {
             return {
                 key: languageCode,
                 text: spokenLanguageStrings ? spokenLanguageStrings[languageCode] : languageCode
@@ -82,7 +90,7 @@ export const CaptionsSettingsModal = (props) => {
         });
     }, [supportedSpokenLanguages, spokenLanguageStrings]);
     const captionLanguageDropdownOptions = useMemo(() => {
-        return supportedCaptionLanguages === null || supportedCaptionLanguages === void 0 ? void 0 : supportedCaptionLanguages.map(languageCode => {
+        return supportedCaptionLanguages === null || supportedCaptionLanguages === void 0 ? void 0 : supportedCaptionLanguages.map((languageCode) => {
             return {
                 key: languageCode,
                 text: captionLanguageStrings ? captionLanguageStrings[languageCode] : languageCode
@@ -91,11 +99,11 @@ export const CaptionsSettingsModal = (props) => {
     }, [supportedCaptionLanguages, captionLanguageStrings]);
     const sortedSpokenLanguageDropdownOptions = useMemo(() => {
         const copy = [...spokenLanguageDropdownOptions];
-        return copy.sort((a, b) => a.text > b.text ? 1 : -1);
+        return copy.sort((a, b) => (a.text > b.text ? 1 : -1));
     }, [spokenLanguageDropdownOptions]);
     const sortedCaptionLanguageDropdownOptions = useMemo(() => {
         const copy = [...(captionLanguageDropdownOptions !== null && captionLanguageDropdownOptions !== void 0 ? captionLanguageDropdownOptions : [])];
-        return copy.sort((a, b) => a.text > b.text ? 1 : -1);
+        return copy.sort((a, b) => (a.text > b.text ? 1 : -1));
     }, [captionLanguageDropdownOptions]);
     const onSpokenLanguageChange = (event, option) => {
         if (option) {
@@ -113,27 +121,37 @@ export const CaptionsSettingsModal = (props) => {
     const CaptionsSettingsComponent = useCallback(() => {
         const placeholderSpokenLanguage = currentSpokenLanguage !== null && currentSpokenLanguage !== void 0 ? currentSpokenLanguage : defaultSpokenLanguage;
         const placeholderCaptionLanguage = currentCaptionLanguage !== null && currentCaptionLanguage !== void 0 ? currentCaptionLanguage : _spokenLanguageToCaptionLanguage[placeholderSpokenLanguage];
-        return React.createElement(Stack, null,
+        return (React.createElement(Stack, null,
             React.createElement(Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownLabel, selectedKey: selectedSpokenLanguage ? selectedSpokenLanguage.key : undefined, onChange: (ev, option) => onSpokenLanguageChange(ev, option), calloutProps: calloutProps, placeholder: placeholderSpokenLanguage, options: sortedSpokenLanguageDropdownOptions, styles: dropdownStyles }),
             React.createElement(Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownInfoText),
-            changeCaptionLanguage && React.createElement(React.Fragment, null,
+            changeCaptionLanguage && (React.createElement(React.Fragment, null,
                 React.createElement(Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownLabel, selectedKey: selectedCaptionLanguage ? selectedCaptionLanguage.key : undefined, onChange: (ev, option) => onCaptionLanguageChange(ev, option), calloutProps: calloutProps, placeholder: placeholderCaptionLanguage, options: sortedCaptionLanguageDropdownOptions, styles: dropdownStyles }),
-                React.createElement(Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownInfoText)));
-    }, [calloutProps, currentSpokenLanguage, currentCaptionLanguage, sortedSpokenLanguageDropdownOptions, sortedCaptionLanguageDropdownOptions, selectedCaptionLanguage, selectedSpokenLanguage, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownInfoText, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownLabel, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownLabel, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownInfoText, theme, changeCaptionLanguage]);
+                React.createElement(Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownInfoText)))));
+    }, [
+        calloutProps,
+        currentSpokenLanguage,
+        currentCaptionLanguage,
+        sortedSpokenLanguageDropdownOptions,
+        sortedCaptionLanguageDropdownOptions,
+        selectedCaptionLanguage,
+        selectedSpokenLanguage,
+        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownInfoText,
+        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownLabel,
+        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownLabel,
+        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownInfoText,
+        theme,
+        changeCaptionLanguage
+    ]);
     const CaptionsSettingsModalStyle = useMemo(() => themedCaptionsSettingsModalStyle(theme), [theme]);
-    return React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalAriaLabel, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: CaptionsSettingsModalStyle },
+    return (React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalAriaLabel, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: CaptionsSettingsModalStyle },
         React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: titleContainerClassName },
             React.createElement(Text, { className: titleClassName }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalTitle),
-            React.createElement(IconButton, { iconProps: {
-                    iconName: 'Cancel'
-                }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCloseModalButtonAriaLabel, onClick: onDismiss, style: {
-                    color: theme.palette.black
-                } })),
+            React.createElement(IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCloseModalButtonAriaLabel, onClick: onDismiss, style: { color: theme.palette.black } })),
         React.createElement(Stack, { className: dropdownContainerClassName }, CaptionsSettingsComponent()),
         React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: buttonsContainerClassName },
             React.createElement(PrimaryButton, { styles: buttonStyles(theme), onClick: onConfirm },
                 React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsConfirmButtonLabel)),
             React.createElement(DefaultButton, { onClick: onDismiss, styles: buttonStyles(theme) },
-                React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCancelButtonLabel)))));
+                React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCancelButtonLabel))))));
 };
 //# sourceMappingURL=CaptionsSettingsModal.js.map