@azure/communication-react 1.9.0-beta.1 → 1.10.0-alpha-202311040013

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { useEffect } from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { Parser, ProcessNodeDefinitions, IsValidNodeDefinitions, ProcessingInstructionType } from 'html-to-react';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/* @conditional-compile-remove(mention) */\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { FileMetadata } from '../FileDownloadCards';\nimport LiveMessage from '../Announcer/LiveMessage';\n/* @conditional-compile-remove(mention) */\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /* @conditional-compile-remove(mention) */\n  mentionDisplayOptions?: MentionDisplayOptions;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  attachmentsMap?: Record<string, string>;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  onFetchAttachment?: (attachment: FileMetadata) => Promise<void>;\n  /* @conditional-compile-remove(image-gallery) */\n  onInlineImageClicked?: (attachmentId: string) => void;\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\ntype BlockedMessageContentProps = {\n  message: BlockedMessage;\n  strings: MessageThreadStrings;\n};\ntype MessageContentWithLiveAriaProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */BlockedMessage;\n  liveMessage: string;\n  ariaLabel?: string;\n  content: JSX.Element;\n};\n\n/** @private */\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n  switch (props.message.contentType) {\n    case 'text':\n      return MessageContentAsText(props);\n    case 'html':\n      return MessageContentAsRichTextHTML(props);\n    case 'richtext/html':\n      return MessageContentAsRichTextHTML(props);\n    default:\n      console.warn('unknown message content type');\n      return <></>;\n  }\n};\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n  return <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n      <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n      {props.content}\n    </div>;\n};\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  useEffect(() => {\n    props.message.attachedFilesMetadata?.map(fileMetadata => {\n      if (props.onFetchAttachment && props.attachmentsMap && fileMetadata.attachmentType === 'inlineImage' && props.attachmentsMap[fileMetadata.id] === undefined) {\n        props.onFetchAttachment(fileMetadata);\n      }\n    });\n  }, [props]);\n  return <MessageContentWithLiveAria message={props.message} liveMessage={generateLiveMessage(props)} ariaLabel={messageContentAriaText(props)} content={processHtmlToReact(props)} />;\n};\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n  return <MessageContentWithLiveAria message={props.message} liveMessage={generateLiveMessage(props)} ariaLabel={messageContentAriaText(props)} content={<Linkify componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n    return <Link target=\"_blank\" href={decoratedHref} key={key}>\n                {decoratedText}\n              </Link>;\n  }}>\n          {props.message.content}\n        </Linkify>} />;\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\n/**\n * @private\n */\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n  const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;\n  const blockedMessage = props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n  const blockedMessageLink = props.message.link;\n  const blockedMessageLinkText = blockedMessageLink ? props.message.linkText ?? props.strings.blockedWarningLinkText : '';\n  const liveAuthor = props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n  const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n  return <MessageContentWithLiveAria message={props.message} liveMessage={liveBlockedWarningText} ariaLabel={liveBlockedWarningText} content={<Stack horizontal wrap>\n          {Icon}\n          {blockedMessage && <p>{blockedMessage}</p>}\n          {blockedMessageLink && <Link target={'_blank'} href={blockedMessageLink}>\n              {blockedMessageLinkText}\n            </Link>}\n        </Stack>} />;\n};\n\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n  const span = document.createElement('span');\n  span.innerHTML = s;\n  return span.textContent || span.innerText;\n};\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, {\n    author: `${props.message.senderDisplayName}`\n  });\n  return `${props.message.editedOn ? props.strings.editedTag : ''} ${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')} `;\n};\nconst messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n  // Strip all html tags from the content for aria.\n\n  return props.message.content ? props.message.mine ? _formatString(props.strings.messageContentMineAriaText, {\n    message: DOMPurify.sanitize(props.message.content, {\n      ALLOWED_TAGS: []\n    })\n  }) : _formatString(props.strings.messageContentAriaText, {\n    author: `${props.message.senderDisplayName}`,\n    message: DOMPurify.sanitize(props.message.content, {\n      ALLOWED_TAGS: []\n    })\n  }) : undefined;\n};\nconst processNodeDefinitions = ProcessNodeDefinitions();\nconst htmlToReactParser = Parser();\n\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nconst processInlineImage = (props: ChatMessageContentProps): ProcessingInstructionType => ({\n  // Custom <img> processing\n  shouldProcessNode: (node): boolean => {\n    function isImageNode(file: FileMetadata): boolean {\n      return file.attachmentType === 'inlineImage' && file.id === node.attribs.id;\n    }\n\n    // Process img node with id in attachments list\n    return node.name && node.name === 'img' && node.attribs && node.attribs.id && props.message.attachedFilesMetadata?.find(isImageNode);\n  },\n  processNode: (node, children, index): JSX.Element => {\n    node.attribs = {\n      ...node.attribs,\n      'aria-label': node.attribs.name\n    };\n    // logic to check id in map/list\n    if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {\n      node.attribs = {\n        ...node.attribs,\n        src: props.attachmentsMap[node.attribs.id]\n      };\n    }\n    /* @conditional-compile-remove(image-gallery) */\n    const handleOnClick = (): void => {\n      props.onInlineImageClicked && props.onInlineImageClicked(node.attribs.id);\n    };\n    /* @conditional-compile-remove(image-gallery) */\n    return <span data-ui-id={node.attribs.id} onClick={handleOnClick} tabIndex={0} role=\"button\" style={{\n      cursor: 'pointer'\n    }} onKeyDown={e => {\n      if (e.key === 'Enter') {\n        handleOnClick();\n      }\n    }}>\n        {processNodeDefinitions.processDefaultNode(node, children, index)}\n      </span>;\n    return processNodeDefinitions.processDefaultNode(node, children, index);\n  }\n});\n\n/* @conditional-compile-remove(mention) */\nconst processMention = (props: ChatMessageContentProps): ProcessingInstructionType => ({\n  shouldProcessNode: node => {\n    if (props.mentionDisplayOptions?.onRenderMention) {\n      // Override the handling of the <msft-mention> tag in the HTML if there's a custom renderer\n      return node.name === 'msft-mention';\n    }\n    return false;\n  },\n  processNode: node => {\n    if (props.mentionDisplayOptions?.onRenderMention) {\n      const {\n        id\n      } = node.attribs;\n      const mention: Mention = {\n        id: id,\n        displayText: node.children[0]?.data ?? ''\n      };\n      return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n    }\n    return processNodeDefinitions.processDefaultNode;\n  }\n});\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n  const steps: ProcessingInstructionType[] = [/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  processInlineImage(props), /* @conditional-compile-remove(mention) */\n  processMention(props), {\n    // Process everything else in the default way\n    shouldProcessNode: IsValidNodeDefinitions.alwaysValid,\n    processNode: processNodeDefinitions.processDefaultNode\n  }];\n  return htmlToReactParser.parseWithInstructions(props.message.content ?? '', IsValidNodeDefinitions.alwaysValid, steps);\n};\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,uEAAuE;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,sCAAgC;AACxD,OAAO,EAAE,MAAM,EAAE,sBAAsB,EAAE,sBAAsB,EAA6B,MAAM,eAAe,CAAC;AAElH,OAAO,OAAO,MAAM,eAAe,CAAC;AAIpC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAIvC,uDAAuD;AACvD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAIlD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,0CAA0C;AAC1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,SAAS,MAAM,WAAW,CAAC;AA4BlC,eAAe;AACf,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;IAChF,QAAQ,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE;QACjC,KAAK,MAAM;YACT,OAAO,oBAAoB,CAAC,KAAK,CAAC,CAAC;QACrC,KAAK,MAAM;YACT,OAAO,4BAA4B,CAAC,KAAK,CAAC,CAAC;QAC7C,KAAK,eAAe;YAClB,OAAO,4BAA4B,CAAC,KAAK,CAAC,CAAC;QAC7C;YACE,OAAO,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;YAC7C,OAAO,yCAAK,CAAC;KAChB;AACH,CAAC,CAAC;AAEF,MAAM,0BAA0B,GAAG,CAAC,KAAsC,EAAe,EAAE;IACzF,OAAO,CACL,+CAAqB,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,gBAAa,KAAK,CAAC,SAAS;QAChF,oBAAC,WAAW,IAAC,OAAO,EAAE,KAAK,CAAC,WAAW,EAAE,QAAQ,EAAC,QAAQ,GAAG;QAC5D,KAAK,CAAC,OAAO,CACV,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,4BAA4B,GAAG,CAAC,KAA8B,EAAe,EAAE;IACnF,uEAAuE;IACvE,SAAS,CAAC,GAAG,EAAE;;QACb,MAAM,WAAW,GAAG,MAAA,KAAK,CAAC,OAAO,CAAC,qBAAqB,0CAAE,MAAM,CAAC,CAAC,YAAY,EAAE,EAAE;YAC/E,OAAO,YAAY,CAAC,cAAc,KAAK,aAAa,CAAC;QACvD,CAAC,CAAC,CAAC;QAEH,IAAI,KAAK,CAAC,cAAc,IAAI,WAAW,EAAE;YACvC,WAAW,CAAC,OAAO,CAAC,CAAC,YAAY,EAAE,EAAE;gBACnC,IAAI,KAAK,CAAC,iBAAiB,IAAI,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,EAAE,CAAC,KAAK,SAAS,EAAE;oBAC1G,KAAK,CAAC,iBAAiB,CAAC,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;oBACjE,OAAO;iBACR;YACH,CAAC,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,oBAAC,0BAA0B,IACzB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,mBAAmB,CAAC,KAAK,CAAC,EACvC,SAAS,EAAE,sBAAsB,CAAC,KAAK,CAAC,EACxC,OAAO,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAClC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,KAA8B,EAAe,EAAE;IAC3E,OAAO,CACL,oBAAC,0BAA0B,IACzB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,mBAAmB,CAAC,KAAK,CAAC,EACvC,SAAS,EAAE,sBAAsB,CAAC,KAAK,CAAC,EACxC,OAAO,EACL,oBAAC,OAAO,IACN,kBAAkB,EAAE,CAAC,aAAqB,EAAE,aAAqB,EAAE,GAAW,EAAE,EAAE;gBAChF,OAAO,CACL,oBAAC,IAAI,IAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,IAChD,aAAa,CACT,CACR,CAAC;YACJ,CAAC,IAEA,KAAK,CAAC,OAAO,CAAC,OAAO,CACd,GAEZ,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,uDAAuD;AACvD;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAiC,EAAe,EAAE;;IACtF,MAAM,IAAI,GAAgB,oBAAC,QAAQ,IAAC,QAAQ,EAAE,8BAA8B,GAAI,CAAC;IACjF,MAAM,cAAc,GAClB,KAAK,CAAC,OAAO,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC;IACzG,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;IAC9C,MAAM,sBAAsB,GAAG,kBAAkB;QAC/C,CAAC,CAAC,MAAA,KAAK,CAAC,OAAO,CAAC,QAAQ,mCAAI,KAAK,CAAC,OAAO,CAAC,sBAAsB;QAChE,CAAC,CAAC,EAAE,CAAC;IAEP,MAAM,UAAU,GACd,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,iBAAiB,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC;IAC7G,MAAM,sBAAsB,GAAG,GAAG,UAAU,IAAI,cAAc,IAAI,sBAAsB,EAAE,CAAC;IAC3F,OAAO,CACL,oBAAC,0BAA0B,IACzB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,sBAAsB,EACnC,SAAS,EAAE,sBAAsB,EACjC,OAAO,EACL,oBAAC,KAAK,IAAC,UAAU,QAAC,IAAI;YACnB,IAAI;YACJ,cAAc,IAAI,+BAAI,cAAc,CAAK;YACzC,kBAAkB,IAAI,CACrB,oBAAC,IAAI,IAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,kBAAkB,IAC7C,sBAAsB,CAClB,CACR,CACK,GAEV,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,oGAAoG;AACpG,MAAM,cAAc,GAAG,CAAC,CAAS,EAAU,EAAE;IAC3C,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;IACnB,OAAO,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAAC;AAC5C,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,KAA8B,EAAU,EAAE;IACrE,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,EAAE,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;IAElH,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAC7D,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAC5B,IAAI,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,GAAG,CAAC;AACrD,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAG,CAAC,KAA8B,EAAsB,EAAE;IACpF,iDAAiD;IAEjD,OAAO,KAAK,CAAC,OAAO,CAAC,OAAO;QAC1B,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;YAClB,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,0BAA0B,EAAE;gBACtD,OAAO,EAAE,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;aACzE,CAAC;YACJ,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,sBAAsB,EAAE;gBAClD,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,iBAAiB,EAAE;gBAC5C,OAAO,EAAE,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;aACzE,CAAC;QACN,CAAC,CAAC,SAAS,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAG,sBAAsB,EAAE,CAAC;AACxD,MAAM,iBAAiB,GAAG,MAAM,EAAE,CAAC;AAEnC,uEAAuE;AACvE,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAA6B,EAAE,CAAC,CAAC;IACzF,0BAA0B;IAC1B,iBAAiB,EAAE,CAAC,IAAI,EAAW,EAAE;;QACnC,SAAS,WAAW,CAAC,IAAkB;YACrC,OAAO,IAAI,CAAC,cAAc,KAAK,aAAa,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;QAC9E,CAAC;QAED,+CAA+C;QAC/C,OAAO,CACL,IAAI,CAAC,IAAI;YACT,IAAI,CAAC,IAAI,KAAK,KAAK;YACnB,IAAI,CAAC,OAAO;YACZ,IAAI,CAAC,OAAO,CAAC,EAAE;aACf,MAAA,KAAK,CAAC,OAAO,CAAC,qBAAqB,0CAAE,IAAI,CAAC,WAAW,CAAC,CAAA,CACvD,CAAC;IACJ,CAAC;IACD,WAAW,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAe,EAAE;QAClD,IAAI,CAAC,OAAO,mCAAQ,IAAI,CAAC,OAAO,KAAE,YAAY,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,GAAE,CAAC;QACpE,gCAAgC;QAChC,IAAI,KAAK,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,CAAC,cAAc,EAAE;YACnE,IAAI,CAAC,OAAO,mCAAQ,IAAI,CAAC,OAAO,KAAE,GAAG,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,GAAE,CAAC;SAChF;QACD,gDAAgD;QAChD,MAAM,aAAa,GAAG,GAAS,EAAE;YAC/B,KAAK,CAAC,oBAAoB,IAAI,KAAK,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAC5E,CAAC,CAAC;QACF,gDAAgD;QAChD,OAAO,CACL,4CACc,IAAI,CAAC,OAAO,CAAC,EAAE,EAC3B,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;gBACL,MAAM,EAAE,SAAS;aAClB,EACD,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;oBACrB,aAAa,EAAE,CAAC;iBACjB;YACH,CAAC,IAEA,sBAAsB,CAAC,kBAAkB,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,CAC5D,CACR,CAAC;QACF,OAAO,sBAAsB,CAAC,kBAAkB,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;IAC1E,CAAC;CACF,CAAC,CAAC;AAEH,0CAA0C;AAC1C,MAAM,cAAc,GAAG,CAAC,KAA8B,EAA6B,EAAE,CAAC,CAAC;IACrF,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE;;QAC1B,IAAI,MAAA,KAAK,CAAC,qBAAqB,0CAAE,eAAe,EAAE;YAChD,2FAA2F;YAC3F,OAAO,IAAI,CAAC,IAAI,KAAK,cAAc,CAAC;SACrC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IACD,WAAW,EAAE,CAAC,IAAI,EAAE,EAAE;;QACpB,IAAI,MAAA,KAAK,CAAC,qBAAqB,0CAAE,eAAe,EAAE;YAChD,MAAM,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;YAC5B,MAAM,OAAO,GAAY;gBACvB,EAAE,EAAE,EAAE;gBACN,WAAW,EAAE,MAAA,MAAA,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,0CAAE,IAAI,mCAAI,EAAE;aAC1C,CAAC;YACF,OAAO,KAAK,CAAC,qBAAqB,CAAC,eAAe,CAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC;SACrF;QACD,OAAO,sBAAsB,CAAC,kBAAkB,CAAC;IACnD,CAAC;CACF,CAAC,CAAC;AAEH,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;;IACzE,MAAM,KAAK,GAAgC;QACzC,uEAAuE;QACvE,kBAAkB,CAAC,KAAK,CAAC;QACzB,0CAA0C;QAC1C,cAAc,CAAC,KAAK,CAAC;QACrB;YACE,6CAA6C;YAC7C,iBAAiB,EAAE,sBAAsB,CAAC,WAAW;YACrD,WAAW,EAAE,sBAAsB,CAAC,kBAAkB;SACvD;KACF,CAAC;IAEF,OAAO,iBAAiB,CAAC,qBAAqB,CAC5C,MAAA,KAAK,CAAC,OAAO,CAAC,OAAO,mCAAI,EAAE,EAC3B,sBAAsB,CAAC,WAAW,EAClC,KAAK,CACN,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { useEffect } from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { Parser, ProcessNodeDefinitions, IsValidNodeDefinitions, ProcessingInstructionType } from 'html-to-react';\n\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/* @conditional-compile-remove(mention) */\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { FileMetadata } from '../FileDownloadCards';\nimport LiveMessage from '../Announcer/LiveMessage';\n/* @conditional-compile-remove(mention) */\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\n\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /* @conditional-compile-remove(mention) */\n  mentionDisplayOptions?: MentionDisplayOptions;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  attachmentsMap?: Record<string, string>;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  onFetchAttachment?: (attachments: FileMetadata[], messageId: string) => Promise<void>;\n  /* @conditional-compile-remove(image-gallery) */\n  onInlineImageClicked?: (attachmentId: string) => void;\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\ntype BlockedMessageContentProps = {\n  message: BlockedMessage;\n  strings: MessageThreadStrings;\n};\n\ntype MessageContentWithLiveAriaProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  liveMessage: string;\n  ariaLabel?: string;\n  content: JSX.Element;\n};\n\n/** @private */\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n  switch (props.message.contentType) {\n    case 'text':\n      return MessageContentAsText(props);\n    case 'html':\n      return MessageContentAsRichTextHTML(props);\n    case 'richtext/html':\n      return MessageContentAsRichTextHTML(props);\n    default:\n      console.warn('unknown message content type');\n      return <></>;\n  }\n};\n\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n  return (\n    <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n      <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n      {props.content}\n    </div>\n  );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  useEffect(() => {\n    const attachments = props.message.attachedFilesMetadata?.filter((fileMetadata) => {\n      return fileMetadata.attachmentType === 'inlineImage';\n    });\n\n    if (props.attachmentsMap && attachments) {\n      attachments.forEach((fileMetadata) => {\n        if (props.onFetchAttachment && props.attachmentsMap && props.attachmentsMap[fileMetadata.id] === undefined) {\n          props.onFetchAttachment([fileMetadata], props.message.messageId);\n          return;\n        }\n      });\n    }\n  }, [props]);\n\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={generateLiveMessage(props)}\n      ariaLabel={messageContentAriaText(props)}\n      content={processHtmlToReact(props)}\n    />\n  );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={generateLiveMessage(props)}\n      ariaLabel={messageContentAriaText(props)}\n      content={\n        <Linkify\n          componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n            return (\n              <Link target=\"_blank\" href={decoratedHref} key={key}>\n                {decoratedText}\n              </Link>\n            );\n          }}\n        >\n          {props.message.content}\n        </Linkify>\n      }\n    />\n  );\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\n/**\n * @private\n */\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n  const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;\n  const blockedMessage =\n    props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n  const blockedMessageLink = props.message.link;\n  const blockedMessageLinkText = blockedMessageLink\n    ? props.message.linkText ?? props.strings.blockedWarningLinkText\n    : '';\n\n  const liveAuthor =\n    props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n  const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={liveBlockedWarningText}\n      ariaLabel={liveBlockedWarningText}\n      content={\n        <Stack horizontal wrap>\n          {Icon}\n          {blockedMessage && <p>{blockedMessage}</p>}\n          {blockedMessageLink && (\n            <Link target={'_blank'} href={blockedMessageLink}>\n              {blockedMessageLinkText}\n            </Link>\n          )}\n        </Stack>\n      }\n    />\n  );\n};\n\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n  const span = document.createElement('span');\n  span.innerHTML = s;\n  return span.textContent || span.innerText;\n};\n\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n\n  return `${props.message.editedOn ? props.strings.editedTag : ''} ${\n    props.message.mine ? '' : liveAuthor\n  } ${extractContent(props.message.content || '')} `;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n  // Strip all html tags from the content for aria.\n\n  return props.message.content\n    ? props.message.mine\n      ? _formatString(props.strings.messageContentMineAriaText, {\n          message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })\n        })\n      : _formatString(props.strings.messageContentAriaText, {\n          author: `${props.message.senderDisplayName}`,\n          message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })\n        })\n    : undefined;\n};\n\nconst processNodeDefinitions = ProcessNodeDefinitions();\nconst htmlToReactParser = Parser();\n\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nconst processInlineImage = (props: ChatMessageContentProps): ProcessingInstructionType => ({\n  // Custom <img> processing\n  shouldProcessNode: (node): boolean => {\n    function isImageNode(file: FileMetadata): boolean {\n      return file.attachmentType === 'inlineImage' && file.id === node.attribs.id;\n    }\n\n    // Process img node with id in attachments list\n    return (\n      node.name &&\n      node.name === 'img' &&\n      node.attribs &&\n      node.attribs.id &&\n      props.message.attachedFilesMetadata?.find(isImageNode)\n    );\n  },\n  processNode: (node, children, index): JSX.Element => {\n    node.attribs = { ...node.attribs, 'aria-label': node.attribs.name };\n    // logic to check id in map/list\n    if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {\n      node.attribs = { ...node.attribs, src: props.attachmentsMap[node.attribs.id] };\n    }\n    /* @conditional-compile-remove(image-gallery) */\n    const handleOnClick = (): void => {\n      props.onInlineImageClicked && props.onInlineImageClicked(node.attribs.id);\n    };\n    /* @conditional-compile-remove(image-gallery) */\n    return (\n      <span\n        data-ui-id={node.attribs.id}\n        onClick={handleOnClick}\n        tabIndex={0}\n        role=\"button\"\n        style={{\n          cursor: 'pointer'\n        }}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            handleOnClick();\n          }\n        }}\n      >\n        {processNodeDefinitions.processDefaultNode(node, children, index)}\n      </span>\n    );\n    return processNodeDefinitions.processDefaultNode(node, children, index);\n  }\n});\n\n/* @conditional-compile-remove(mention) */\nconst processMention = (props: ChatMessageContentProps): ProcessingInstructionType => ({\n  shouldProcessNode: (node) => {\n    if (props.mentionDisplayOptions?.onRenderMention) {\n      // Override the handling of the <msft-mention> tag in the HTML if there's a custom renderer\n      return node.name === 'msft-mention';\n    }\n    return false;\n  },\n  processNode: (node) => {\n    if (props.mentionDisplayOptions?.onRenderMention) {\n      const { id } = node.attribs;\n      const mention: Mention = {\n        id: id,\n        displayText: node.children[0]?.data ?? ''\n      };\n      return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n    }\n    return processNodeDefinitions.processDefaultNode;\n  }\n});\n\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n  const steps: ProcessingInstructionType[] = [\n    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n    processInlineImage(props),\n    /* @conditional-compile-remove(mention) */\n    processMention(props),\n    {\n      // Process everything else in the default way\n      shouldProcessNode: IsValidNodeDefinitions.alwaysValid,\n      processNode: processNodeDefinitions.processDefaultNode\n    }\n  ];\n\n  return htmlToReactParser.parseWithInstructions(\n    props.message.content ?? '',\n    IsValidNodeDefinitions.alwaysValid,\n    steps\n  );\n};\n\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/ChatMessage/MentionRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionRenderer.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MentionRenderer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,OAAgB,EAAe,EAAE;IACtE,8DAA8D;IAC9D,MAAM,WAAW,GAAI,cAAsB,CAAC;IAC5C,OAAO,oBAAC,WAAW,IAAC,EAAE,EAAE,OAAO,CAAC,EAAE,IAAG,OAAO,CAAC,WAAW,CAAe,CAAC;AAC1E,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React from 'react';\nimport { Mention } from '../MentionPopover';\n\n/**\n * Provides the default implementation for rendering an Mention in a message thread\n * @param mention - The mention to render\n *\n * @private\n */\nexport const defaultOnMentionRender = (mention: Mention): JSX.Element => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const MsftMention = ('msft-mention' as any);\n  return <MsftMention id={mention.id}>{mention.displayText}</MsftMention>;\n};"]}
+{"version":3,"file":"MentionRenderer.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/MentionRenderer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,OAAgB,EAAe,EAAE;IACtE,8DAA8D;IAC9D,MAAM,WAAW,GAAG,cAAqB,CAAC;IAC1C,OAAO,oBAAC,WAAW,IAAC,EAAE,EAAE,OAAO,CAAC,EAAE,IAAG,OAAO,CAAC,WAAW,CAAe,CAAC;AAC1E,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React from 'react';\nimport { Mention } from '../MentionPopover';\n\n/**\n * Provides the default implementation for rendering an Mention in a message thread\n * @param mention - The mention to render\n *\n * @private\n */\nexport const defaultOnMentionRender = (mention: Mention): JSX.Element => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const MsftMention = 'msft-mention' as any;\n  return <MsftMention id={mention.id}>{mention.displayText}</MsftMention>;\n};\n"]}

package/dist/dist-esm/react-components/src/components/ComplianceBanner/BannerMessage.js

@@ -7,52 +7,52 @@ export function BannerMessage(props) {
     const { variant, strings } = props;
     switch (variant) {
         case 'TRANSCRIPTION_STOPPED_STILL_RECORDING':
-            return React.createElement(React.Fragment, null,
+            return (React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerTranscriptionStopped),
                 ` ${strings.complianceBannerNowOnlyRecording}`,
-                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy }));
+                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
         case 'RECORDING_STOPPED_STILL_TRANSCRIBING':
-            return React.createElement(React.Fragment, null,
+            return (React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerRecordingStopped),
                 ` ${strings.complianceBannerNowOnlyTranscription}`,
-                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy }));
+                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
         case 'RECORDING_AND_TRANSCRIPTION_STOPPED':
-            return React.createElement(React.Fragment, null,
+            return (React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerRecordingAndTranscriptionSaved),
                 ` ${strings.complianceBannerRecordingAndTranscriptionStopped}`,
-                React.createElement(LearnMore, { linkText: strings.learnMore }));
+                React.createElement(LearnMore, { linkText: strings.learnMore })));
         case 'RECORDING_AND_TRANSCRIPTION_STARTED':
-            return React.createElement(React.Fragment, null,
+            return (React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerRecordingAndTranscriptionStarted),
                 ` ${strings.complianceBannerTranscriptionConsent}`,
-                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy }));
+                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
         case 'TRANSCRIPTION_STARTED':
-            return React.createElement(React.Fragment, null,
+            return (React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerTranscriptionStarted),
                 ` ${strings.complianceBannerTranscriptionConsent}`,
-                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy }));
+                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
         case 'RECORDING_STOPPED':
-            return React.createElement(React.Fragment, null,
+            return (React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerRecordingSaving),
                 ` ${strings.complianceBannerRecordingStopped}`,
-                React.createElement(LearnMore, { linkText: strings.learnMore }));
+                React.createElement(LearnMore, { linkText: strings.learnMore })));
         case 'RECORDING_STARTED':
-            return React.createElement(React.Fragment, null,
+            return (React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerRecordingStarted),
                 ` ${strings.complianceBannerTranscriptionConsent}`,
-                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy }));
+                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
         case 'TRANSCRIPTION_STOPPED':
-            return React.createElement(React.Fragment, null,
+            return (React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerTranscriptionSaving),
                 ` ${strings.complianceBannerTranscriptionStopped}`,
-                React.createElement(LearnMore, { linkText: strings.learnMore }));
+                React.createElement(LearnMore, { linkText: strings.learnMore })));
     }
     return React.createElement(React.Fragment, null);
 }
 function PrivacyPolicy(props) {
-    return React.createElement(Link, { href: "https://privacy.microsoft.com/privacystatement#mainnoticetoendusersmodule", target: "_blank", underline: true }, props.linkText);
+    return (React.createElement(Link, { href: "https://privacy.microsoft.com/privacystatement#mainnoticetoendusersmodule", target: "_blank", underline: true }, props.linkText));
 }
 function LearnMore(props) {
-    return React.createElement(Link, { href: "https://support.microsoft.com/office/record-a-meeting-in-teams-34dfbe7f-b07d-4a27-b4c6-de62f1348c24", target: "_blank", underline: true }, props.linkText);
+    return (React.createElement(Link, { href: "https://support.microsoft.com/office/record-a-meeting-in-teams-34dfbe7f-b07d-4a27-b4c6-de62f1348c24", target: "_blank", underline: true }, props.linkText));
 }
 //# sourceMappingURL=BannerMessage.js.map

package/dist/dist-esm/react-components/src/components/ComplianceBanner/BannerMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerMessage.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/BannerMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAe;AACf,MAAM,UAAU,aAAa,CAAC,KAG7B;IACC,MAAM,EACJ,OAAO,EACP,OAAO,EACR,GAAG,KAAK,CAAC;IACV,QAAQ,OAAO,EAAE;QACf,KAAK,uCAAuC;YAC1C,OAAO;gBACH,+BAAI,OAAO,CAAC,oCAAoC,CAAK;gBACpD,IAAI,OAAO,CAAC,gCAAgC,EAAE;gBAC/C,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CAAC;QACR,KAAK,sCAAsC;YACzC,OAAO;gBACH,+BAAI,OAAO,CAAC,gCAAgC,CAAK;gBAChD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CAAC;QACR,KAAK,qCAAqC;YACxC,OAAO;gBACH,+BAAI,OAAO,CAAC,8CAA8C,CAAK;gBAC9D,IAAI,OAAO,CAAC,gDAAgD,EAAE;gBAC/D,oBAAC,SAAS,IAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAI,CACzC,CAAC;QACR,KAAK,qCAAqC;YACxC,OAAO;gBACH,+BAAI,OAAO,CAAC,gDAAgD,CAAK;gBAChE,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CAAC;QACR,KAAK,uBAAuB;YAC1B,OAAO;gBACH,+BAAI,OAAO,CAAC,oCAAoC,CAAK;gBACpD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CAAC;QACR,KAAK,mBAAmB;YACtB,OAAO;gBACH,+BAAI,OAAO,CAAC,+BAA+B,CAAK;gBAC/C,IAAI,OAAO,CAAC,gCAAgC,EAAE;gBAC/C,oBAAC,SAAS,IAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAI,CACzC,CAAC;QACR,KAAK,mBAAmB;YACtB,OAAO;gBACH,+BAAI,OAAO,CAAC,gCAAgC,CAAK;gBAChD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CAAC;QACR,KAAK,uBAAuB;YAC1B,OAAO;gBACH,+BAAI,OAAO,CAAC,mCAAmC,CAAK;gBACnD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,SAAS,IAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAI,CACzC,CAAC;KACT;IACD,OAAO,yCAAK,CAAC;AACf,CAAC;AACD,SAAS,aAAa,CAAC,KAEtB;IACC,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,2EAA2E,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,UAClH,KAAK,CAAC,QAAQ,CACV,CAAC;AACZ,CAAC;AACD,SAAS,SAAS,CAAC,KAElB;IACC,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,qGAAqG,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,UAC5I,KAAK,CAAC,QAAQ,CACV,CAAC;AACZ,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Link } from '@fluentui/react';\nimport React from 'react';\nimport { _ComplianceBannerStrings } from './types';\nimport { ComplianceBannerVariant } from './Utils';\n\n/** @private */\nexport function BannerMessage(props: {\n  variant: ComplianceBannerVariant;\n  strings: _ComplianceBannerStrings;\n}): JSX.Element {\n  const {\n    variant,\n    strings\n  } = props;\n  switch (variant) {\n    case 'TRANSCRIPTION_STOPPED_STILL_RECORDING':\n      return <>\n          <b>{strings.complianceBannerTranscriptionStopped}</b>\n          {` ${strings.complianceBannerNowOnlyRecording}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>;\n    case 'RECORDING_STOPPED_STILL_TRANSCRIBING':\n      return <>\n          <b>{strings.complianceBannerRecordingStopped}</b>\n          {` ${strings.complianceBannerNowOnlyTranscription}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>;\n    case 'RECORDING_AND_TRANSCRIPTION_STOPPED':\n      return <>\n          <b>{strings.complianceBannerRecordingAndTranscriptionSaved}</b>\n          {` ${strings.complianceBannerRecordingAndTranscriptionStopped}`}\n          <LearnMore linkText={strings.learnMore} />\n        </>;\n    case 'RECORDING_AND_TRANSCRIPTION_STARTED':\n      return <>\n          <b>{strings.complianceBannerRecordingAndTranscriptionStarted}</b>\n          {` ${strings.complianceBannerTranscriptionConsent}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>;\n    case 'TRANSCRIPTION_STARTED':\n      return <>\n          <b>{strings.complianceBannerTranscriptionStarted}</b>\n          {` ${strings.complianceBannerTranscriptionConsent}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>;\n    case 'RECORDING_STOPPED':\n      return <>\n          <b>{strings.complianceBannerRecordingSaving}</b>\n          {` ${strings.complianceBannerRecordingStopped}`}\n          <LearnMore linkText={strings.learnMore} />\n        </>;\n    case 'RECORDING_STARTED':\n      return <>\n          <b>{strings.complianceBannerRecordingStarted}</b>\n          {` ${strings.complianceBannerTranscriptionConsent}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>;\n    case 'TRANSCRIPTION_STOPPED':\n      return <>\n          <b>{strings.complianceBannerTranscriptionSaving}</b>\n          {` ${strings.complianceBannerTranscriptionStopped}`}\n          <LearnMore linkText={strings.learnMore} />\n        </>;\n  }\n  return <></>;\n}\nfunction PrivacyPolicy(props: {\n  linkText: string;\n}): JSX.Element {\n  return <Link href=\"https://privacy.microsoft.com/privacystatement#mainnoticetoendusersmodule\" target=\"_blank\" underline>\n      {props.linkText}\n    </Link>;\n}\nfunction LearnMore(props: {\n  linkText: string;\n}): JSX.Element {\n  return <Link href=\"https://support.microsoft.com/office/record-a-meeting-in-teams-34dfbe7f-b07d-4a27-b4c6-de62f1348c24\" target=\"_blank\" underline>\n      {props.linkText}\n    </Link>;\n}"]}
+{"version":3,"file":"BannerMessage.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ComplianceBanner/BannerMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAe;AACf,MAAM,UAAU,aAAa,CAAC,KAG7B;IACC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACnC,QAAQ,OAAO,EAAE;QACf,KAAK,uCAAuC;YAC1C,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,oCAAoC,CAAK;gBACpD,IAAI,OAAO,CAAC,gCAAgC,EAAE;gBAC/C,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CACJ,CAAC;QACJ,KAAK,sCAAsC;YACzC,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,gCAAgC,CAAK;gBAChD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CACJ,CAAC;QACJ,KAAK,qCAAqC;YACxC,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,8CAA8C,CAAK;gBAC9D,IAAI,OAAO,CAAC,gDAAgD,EAAE;gBAC/D,oBAAC,SAAS,IAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAI,CACzC,CACJ,CAAC;QACJ,KAAK,qCAAqC;YACxC,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,gDAAgD,CAAK;gBAChE,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CACJ,CAAC;QACJ,KAAK,uBAAuB;YAC1B,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,oCAAoC,CAAK;gBACpD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CACJ,CAAC;QACJ,KAAK,mBAAmB;YACtB,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,+BAA+B,CAAK;gBAC/C,IAAI,OAAO,CAAC,gCAAgC,EAAE;gBAC/C,oBAAC,SAAS,IAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAI,CACzC,CACJ,CAAC;QACJ,KAAK,mBAAmB;YACtB,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,gCAAgC,CAAK;gBAChD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CACJ,CAAC;QACJ,KAAK,uBAAuB;YAC1B,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,mCAAmC,CAAK;gBACnD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,SAAS,IAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAI,CACzC,CACJ,CAAC;KACL;IACD,OAAO,yCAAK,CAAC;AACf,CAAC;AAED,SAAS,aAAa,CAAC,KAA2B;IAChD,OAAO,CACL,oBAAC,IAAI,IAAC,IAAI,EAAC,2EAA2E,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,UAC7G,KAAK,CAAC,QAAQ,CACV,CACR,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,KAA2B;IAC5C,OAAO,CACL,oBAAC,IAAI,IACH,IAAI,EAAC,qGAAqG,EAC1G,MAAM,EAAC,QAAQ,EACf,SAAS,UAER,KAAK,CAAC,QAAQ,CACV,CACR,CAAC;AACJ,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Link } from '@fluentui/react';\nimport React from 'react';\nimport { _ComplianceBannerStrings } from './types';\nimport { ComplianceBannerVariant } from './Utils';\n\n/** @private */\nexport function BannerMessage(props: {\n  variant: ComplianceBannerVariant;\n  strings: _ComplianceBannerStrings;\n}): JSX.Element {\n  const { variant, strings } = props;\n  switch (variant) {\n    case 'TRANSCRIPTION_STOPPED_STILL_RECORDING':\n      return (\n        <>\n          <b>{strings.complianceBannerTranscriptionStopped}</b>\n          {` ${strings.complianceBannerNowOnlyRecording}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>\n      );\n    case 'RECORDING_STOPPED_STILL_TRANSCRIBING':\n      return (\n        <>\n          <b>{strings.complianceBannerRecordingStopped}</b>\n          {` ${strings.complianceBannerNowOnlyTranscription}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>\n      );\n    case 'RECORDING_AND_TRANSCRIPTION_STOPPED':\n      return (\n        <>\n          <b>{strings.complianceBannerRecordingAndTranscriptionSaved}</b>\n          {` ${strings.complianceBannerRecordingAndTranscriptionStopped}`}\n          <LearnMore linkText={strings.learnMore} />\n        </>\n      );\n    case 'RECORDING_AND_TRANSCRIPTION_STARTED':\n      return (\n        <>\n          <b>{strings.complianceBannerRecordingAndTranscriptionStarted}</b>\n          {` ${strings.complianceBannerTranscriptionConsent}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>\n      );\n    case 'TRANSCRIPTION_STARTED':\n      return (\n        <>\n          <b>{strings.complianceBannerTranscriptionStarted}</b>\n          {` ${strings.complianceBannerTranscriptionConsent}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>\n      );\n    case 'RECORDING_STOPPED':\n      return (\n        <>\n          <b>{strings.complianceBannerRecordingSaving}</b>\n          {` ${strings.complianceBannerRecordingStopped}`}\n          <LearnMore linkText={strings.learnMore} />\n        </>\n      );\n    case 'RECORDING_STARTED':\n      return (\n        <>\n          <b>{strings.complianceBannerRecordingStarted}</b>\n          {` ${strings.complianceBannerTranscriptionConsent}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>\n      );\n    case 'TRANSCRIPTION_STOPPED':\n      return (\n        <>\n          <b>{strings.complianceBannerTranscriptionSaving}</b>\n          {` ${strings.complianceBannerTranscriptionStopped}`}\n          <LearnMore linkText={strings.learnMore} />\n        </>\n      );\n  }\n  return <></>;\n}\n\nfunction PrivacyPolicy(props: { linkText: string }): JSX.Element {\n  return (\n    <Link href=\"https://privacy.microsoft.com/privacystatement#mainnoticetoendusersmodule\" target=\"_blank\" underline>\n      {props.linkText}\n    </Link>\n  );\n}\n\nfunction LearnMore(props: { linkText: string }): JSX.Element {\n  return (\n    <Link\n      href=\"https://support.microsoft.com/office/record-a-meeting-in-teams-34dfbe7f-b07d-4a27-b4c6-de62f1348c24\"\n      target=\"_blank\"\n      underline\n    >\n      {props.linkText}\n    </Link>\n  );\n}\n"]}

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

@@ -26,7 +26,8 @@ export const _ComplianceBanner = (props) => {
     });
     // Only update cached props and variant if there is _some_ change in the latest props.
     // This ensures that state machine is only updated if there is an actual change in the props.
-    const shouldUpdateCached = props.callRecordState !== cachedProps.current.latestBooleanState.callRecordState || props.callTranscribeState !== cachedProps.current.latestBooleanState.callTranscribeState;
+    const shouldUpdateCached = props.callRecordState !== cachedProps.current.latestBooleanState.callRecordState ||
+        props.callTranscribeState !== cachedProps.current.latestBooleanState.callTranscribeState;
     // The following three operations must be performed in this exact order:
     // [1]: Update cached state to transition the state machine.
     if (shouldUpdateCached) {
@@ -42,12 +43,14 @@ export const _ComplianceBanner = (props) => {
     // [2]: Compute the variant, using the transitioned state machine.
     const variant = computeVariant(cachedProps.current.latestStringState.callRecordState, cachedProps.current.latestStringState.callTranscribeState);
     // [3]: Transition the state machine again to deal with some end-states.
-    if (shouldUpdateCached && cachedProps.current.latestStringState.callRecordState === 'stopped' && cachedProps.current.latestStringState.callTranscribeState === 'stopped') {
+    if (shouldUpdateCached &&
+        cachedProps.current.latestStringState.callRecordState === 'stopped' &&
+        cachedProps.current.latestStringState.callTranscribeState === 'stopped') {
         // When both states are stopped, after displaying message "RECORDING_AND_TRANSCRIPTION_STOPPED", change both states to off (going back to the default state).
         cachedProps.current.latestStringState.callRecordState = 'off';
         cachedProps.current.latestStringState.callTranscribeState = 'off';
     }
-    return React.createElement(DelayedUpdateBanner, { variant: {
+    return (React.createElement(DelayedUpdateBanner, { variant: {
             variant,
             lastUpdated: cachedProps.current.lastUpdated
         }, strings: props.strings, onDismiss: () => {
@@ -57,7 +60,7 @@ export const _ComplianceBanner = (props) => {
             if (cachedProps.current.latestStringState.callTranscribeState === 'stopped') {
                 cachedProps.current.latestStringState.callTranscribeState = 'off';
             }
-        } });
+        } }));
 };
 function determineStates(previous, current) {
     // if current state is on, then return on

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

@@ -1 +1 @@
-{"version":3,"file":"ComplianceBanner.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/ComplianceBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useRef } from 'react';\nimport { ComplianceState, computeVariant } from './Utils';\nimport { _ComplianceBannerProps } from './types';\nimport { DelayedUpdateBanner } from './DelayedUpdateBanner';\n\n// latestBooleanState so we can compare with props.callRecordState and props.callTranscribeState easily\n// latestStringState is on, off, stopped state generated by function determineStates using previous and current state values, this is used for computeVariants later\ntype CachedComplianceBannerProps = {\n  latestBooleanState: {\n    callTranscribeState?: boolean;\n    callRecordState?: boolean;\n  };\n  latestStringState: {\n    callTranscribeState: ComplianceState;\n    callRecordState: ComplianceState;\n  };\n  // Timestamp for the last time cached state was updated.\n  // Represented as milliseconds since epoch (i.e., the value returned by Date.now()).\n  lastUpdated: number;\n};\n\n/**\n * A component that displays banners to notify the user when call recording and\n * transcription is enabled or disabled in a call.\n *\n * This component implements a state machine that tracks the changes to call\n * recording and transcription state and shows the corresponding message.\n *\n * @internal\n */\nexport const _ComplianceBanner = (props: _ComplianceBannerProps): JSX.Element => {\n  const cachedProps = useRef<CachedComplianceBannerProps>({\n    latestBooleanState: {\n      callTranscribeState: false,\n      callRecordState: false\n    },\n    latestStringState: {\n      callTranscribeState: 'off',\n      callRecordState: 'off'\n    },\n    lastUpdated: Date.now()\n  });\n\n  // Only update cached props and variant if there is _some_ change in the latest props.\n  // This ensures that state machine is only updated if there is an actual change in the props.\n  const shouldUpdateCached = props.callRecordState !== cachedProps.current.latestBooleanState.callRecordState || props.callTranscribeState !== cachedProps.current.latestBooleanState.callTranscribeState;\n\n  // The following three operations must be performed in this exact order:\n\n  // [1]: Update cached state to transition the state machine.\n  if (shouldUpdateCached) {\n    cachedProps.current = {\n      latestBooleanState: props,\n      latestStringState: {\n        callRecordState: determineStates(cachedProps.current.latestStringState.callRecordState, props.callRecordState),\n        callTranscribeState: determineStates(cachedProps.current.latestStringState.callTranscribeState, props.callTranscribeState)\n      },\n      lastUpdated: Date.now()\n    };\n  }\n\n  // [2]: Compute the variant, using the transitioned state machine.\n  const variant = computeVariant(cachedProps.current.latestStringState.callRecordState, cachedProps.current.latestStringState.callTranscribeState);\n\n  // [3]: Transition the state machine again to deal with some end-states.\n  if (shouldUpdateCached && cachedProps.current.latestStringState.callRecordState === 'stopped' && cachedProps.current.latestStringState.callTranscribeState === 'stopped') {\n    // When both states are stopped, after displaying message \"RECORDING_AND_TRANSCRIPTION_STOPPED\", change both states to off (going back to the default state).\n    cachedProps.current.latestStringState.callRecordState = 'off';\n    cachedProps.current.latestStringState.callTranscribeState = 'off';\n  }\n  return <DelayedUpdateBanner variant={{\n    variant,\n    lastUpdated: cachedProps.current.lastUpdated\n  }} strings={props.strings} onDismiss={() => {\n    if (cachedProps.current.latestStringState.callRecordState === 'stopped') {\n      cachedProps.current.latestStringState.callRecordState = 'off';\n    }\n    if (cachedProps.current.latestStringState.callTranscribeState === 'stopped') {\n      cachedProps.current.latestStringState.callTranscribeState = 'off';\n    }\n  }} />;\n};\nfunction determineStates(previous: ComplianceState, current: boolean | undefined): ComplianceState {\n  // if current state is on, then return on\n  if (current) {\n    return 'on';\n  }\n  // if current state is off\n  else {\n    // if previous state is on and current state is off, return stopped (on -> off)\n    if (previous === 'on') {\n      return 'stopped';\n    }\n    // otherwise remain previous state unchanged\n    else {\n      return previous;\n    }\n  }\n}"]}
+{"version":3,"file":"ComplianceBanner.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ComplianceBanner/ComplianceBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useRef } from 'react';\nimport { ComplianceState, computeVariant } from './Utils';\nimport { _ComplianceBannerProps } from './types';\nimport { DelayedUpdateBanner } from './DelayedUpdateBanner';\n\n// latestBooleanState so we can compare with props.callRecordState and props.callTranscribeState easily\n// latestStringState is on, off, stopped state generated by function determineStates using previous and current state values, this is used for computeVariants later\ntype CachedComplianceBannerProps = {\n  latestBooleanState: {\n    callTranscribeState?: boolean;\n    callRecordState?: boolean;\n  };\n  latestStringState: {\n    callTranscribeState: ComplianceState;\n    callRecordState: ComplianceState;\n  };\n  // Timestamp for the last time cached state was updated.\n  // Represented as milliseconds since epoch (i.e., the value returned by Date.now()).\n  lastUpdated: number;\n};\n\n/**\n * A component that displays banners to notify the user when call recording and\n * transcription is enabled or disabled in a call.\n *\n * This component implements a state machine that tracks the changes to call\n * recording and transcription state and shows the corresponding message.\n *\n * @internal\n */\nexport const _ComplianceBanner = (props: _ComplianceBannerProps): JSX.Element => {\n  const cachedProps = useRef<CachedComplianceBannerProps>({\n    latestBooleanState: {\n      callTranscribeState: false,\n      callRecordState: false\n    },\n    latestStringState: {\n      callTranscribeState: 'off',\n      callRecordState: 'off'\n    },\n    lastUpdated: Date.now()\n  });\n\n  // Only update cached props and variant if there is _some_ change in the latest props.\n  // This ensures that state machine is only updated if there is an actual change in the props.\n  const shouldUpdateCached =\n    props.callRecordState !== cachedProps.current.latestBooleanState.callRecordState ||\n    props.callTranscribeState !== cachedProps.current.latestBooleanState.callTranscribeState;\n\n  // The following three operations must be performed in this exact order:\n\n  // [1]: Update cached state to transition the state machine.\n  if (shouldUpdateCached) {\n    cachedProps.current = {\n      latestBooleanState: props,\n      latestStringState: {\n        callRecordState: determineStates(cachedProps.current.latestStringState.callRecordState, props.callRecordState),\n        callTranscribeState: determineStates(\n          cachedProps.current.latestStringState.callTranscribeState,\n          props.callTranscribeState\n        )\n      },\n      lastUpdated: Date.now()\n    };\n  }\n\n  // [2]: Compute the variant, using the transitioned state machine.\n  const variant = computeVariant(\n    cachedProps.current.latestStringState.callRecordState,\n    cachedProps.current.latestStringState.callTranscribeState\n  );\n\n  // [3]: Transition the state machine again to deal with some end-states.\n  if (\n    shouldUpdateCached &&\n    cachedProps.current.latestStringState.callRecordState === 'stopped' &&\n    cachedProps.current.latestStringState.callTranscribeState === 'stopped'\n  ) {\n    // When both states are stopped, after displaying message \"RECORDING_AND_TRANSCRIPTION_STOPPED\", change both states to off (going back to the default state).\n    cachedProps.current.latestStringState.callRecordState = 'off';\n    cachedProps.current.latestStringState.callTranscribeState = 'off';\n  }\n\n  return (\n    <DelayedUpdateBanner\n      variant={{\n        variant,\n        lastUpdated: cachedProps.current.lastUpdated\n      }}\n      strings={props.strings}\n      onDismiss={() => {\n        if (cachedProps.current.latestStringState.callRecordState === 'stopped') {\n          cachedProps.current.latestStringState.callRecordState = 'off';\n        }\n        if (cachedProps.current.latestStringState.callTranscribeState === 'stopped') {\n          cachedProps.current.latestStringState.callTranscribeState = 'off';\n        }\n      }}\n    />\n  );\n};\n\nfunction determineStates(previous: ComplianceState, current: boolean | undefined): ComplianceState {\n  // if current state is on, then return on\n  if (current) {\n    return 'on';\n  }\n  // if current state is off\n  else {\n    // if previous state is on and current state is off, return stopped (on -> off)\n    if (previous === 'on') {\n      return 'stopped';\n    }\n    // otherwise remain previous state unchanged\n    else {\n      return previous;\n    }\n  }\n}\n"]}

package/dist/dist-esm/react-components/src/components/ComplianceBanner/DelayedUpdateBanner.js

@@ -53,7 +53,7 @@ export function DelayedUpdateBanner(props) {
     if (visible.variant === 'NO_STATE') {
         return React.createElement(React.Fragment, null);
     }
-    return React.createElement(MessageBar, { messageBarType: MessageBarType.warning, onDismiss: () => {
+    return (React.createElement(MessageBar, { messageBarType: MessageBarType.warning, onDismiss: () => {
             // when closing the banner, change variant to nostate and change stopped state to off state.
             // Reason: on banner close, going back to the default state.
             setVisible({
@@ -62,6 +62,6 @@ export function DelayedUpdateBanner(props) {
             });
             props.onDismiss();
         }, dismissButtonAriaLabel: props.strings.close },
-        React.createElement(BannerMessage, { variant: visible.variant, strings: props.strings }));
+        React.createElement(BannerMessage, { variant: visible.variant, strings: props.strings })));
 }
 //# sourceMappingURL=DelayedUpdateBanner.js.map

package/dist/dist-esm/react-components/src/components/ComplianceBanner/DelayedUpdateBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"DelayedUpdateBanner.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/DelayedUpdateBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,MAAM,yBAAyB,GAAG,IAAI,CAAC;AASvC;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAInC;IACC,MAAM,EACJ,OAAO,EACP,WAAW,EAAE,kBAAkB,EAChC,GAAG,KAAK,CAAC,OAAO,CAAC;IAElB,0DAA0D;IAC1D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAqB;QACzD,OAAO;QACP,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;KACxB,CAAC,CAAC;IACH,MAAM,mBAAmB,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IAC/E,IAAI,OAAO,KAAK,OAAO,CAAC,OAAO,IAAI,kBAAkB,GAAG,OAAO,CAAC,WAAW,EAAE;QAC3E,gCAAgC;QAChC,4DAA4D;QAC5D,IAAI,mBAAmB,CAAC,OAAO,EAAE;YAC/B,YAAY,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;SAC3C;QACD,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACvB,MAAM,gBAAgB,GAAG,yBAAyB,GAAG,CAAC,GAAG,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;QACjF,IAAI,OAAO,KAAK,UAAU,IAAI,gBAAgB,IAAI,CAAC,EAAE;YACnD,UAAU,CAAC;gBACT,OAAO;gBACP,WAAW,EAAE,GAAG;aACjB,CAAC,CAAC;SACJ;aAAM;YACL,mBAAmB,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC5C,mFAAmF;gBACnF,oDAAoD;gBACpD,UAAU,CAAC;oBACT,OAAO;oBACP,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;iBACxB,CAAC,CAAC;YACL,CAAC,EAAE,gBAAgB,CAAC,CAAC;SACtB;KACF;IACD,IAAI,OAAO,CAAC,OAAO,KAAK,UAAU,EAAE;QAClC,OAAO,yCAAK,CAAC;KACd;IACD,OAAO,oBAAC,UAAU,IAAC,cAAc,EAAE,cAAc,CAAC,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE;YACzE,4FAA4F;YAC5F,4DAA4D;YAC5D,UAAU,CAAC;gBACT,OAAO,EAAE,UAAU;gBACnB,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;aACxB,CAAC,CAAC;YACH,KAAK,CAAC,SAAS,EAAE,CAAC;QACpB,CAAC,EAAE,sBAAsB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1C,oBAAC,aAAa,IAAC,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CACxD,CAAC;AAClB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageBar, MessageBarType } from '@fluentui/react';\nimport React, { useRef, useState } from 'react';\nimport { BannerMessage } from './BannerMessage';\nimport { _ComplianceBannerStrings } from './types';\nimport { ComplianceBannerVariant } from './Utils';\nconst BANNER_OVERWRITE_DELAY_MS = 3000;\n\n/** @private */\nexport interface TimestampedVariant {\n  variant: ComplianceBannerVariant;\n  // Milliseconds since epoch (i.e., return value of Date.now()).\n  lastUpdated: number;\n}\n\n/**\n * Shows a {@link BannerMessage} in a {@link MessageBar} tracking `variant` internally.\n *\n * This component delays and combines frequent updates to `variant` such that:\n * - Updates that happen within {@link BANNER_OVERWRITE_DELAY_MS} are delayed.\n * - Once {@link BANNER_OVERWRITE_DELAY_MS} has passed since the last update, the _latest_ pending update is shown.\n *\n * This ensures that there is enough time for the user to see a banner message before it is overwritten.\n * In case of multiple delayed messages, the user always sees the final message as it reflects the final state\n * of recording and transcription.\n *\n * @private\n */\nexport function DelayedUpdateBanner(props: {\n  variant: TimestampedVariant;\n  onDismiss: () => void;\n  strings: _ComplianceBannerStrings;\n}): JSX.Element {\n  const {\n    variant,\n    lastUpdated: variantLastUpdated\n  } = props.variant;\n\n  // Tracks the variant that is currently visible in the UI.\n  const [visible, setVisible] = useState<TimestampedVariant>({\n    variant,\n    lastUpdated: Date.now()\n  });\n  const pendingUpdateHandle = useRef<ReturnType<typeof setTimeout> | null>(null);\n  if (variant !== visible.variant && variantLastUpdated > visible.lastUpdated) {\n    // Always clear pending updates.\n    // We'll either update now, or schedule an update for later.\n    if (pendingUpdateHandle.current) {\n      clearTimeout(pendingUpdateHandle.current);\n    }\n    const now = Date.now();\n    const timeToNextUpdate = BANNER_OVERWRITE_DELAY_MS - (now - visible.lastUpdated);\n    if (variant === 'NO_STATE' || timeToNextUpdate <= 0) {\n      setVisible({\n        variant,\n        lastUpdated: now\n      });\n    } else {\n      pendingUpdateHandle.current = setTimeout(() => {\n        // Set the actual update time, not the computed time when the update should happen.\n        // The actual update might be later than we planned.\n        setVisible({\n          variant,\n          lastUpdated: Date.now()\n        });\n      }, timeToNextUpdate);\n    }\n  }\n  if (visible.variant === 'NO_STATE') {\n    return <></>;\n  }\n  return <MessageBar messageBarType={MessageBarType.warning} onDismiss={() => {\n    // when closing the banner, change variant to nostate and change stopped state to off state.\n    // Reason: on banner close, going back to the default state.\n    setVisible({\n      variant: 'NO_STATE',\n      lastUpdated: Date.now()\n    });\n    props.onDismiss();\n  }} dismissButtonAriaLabel={props.strings.close}>\n      <BannerMessage variant={visible.variant} strings={props.strings} />\n    </MessageBar>;\n}"]}
+{"version":3,"file":"DelayedUpdateBanner.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ComplianceBanner/DelayedUpdateBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIhD,MAAM,yBAAyB,GAAG,IAAI,CAAC;AASvC;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAInC;IACC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC;IAEnE,0DAA0D;IAC1D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAqB;QACzD,OAAO;QACP,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;KACxB,CAAC,CAAC;IACH,MAAM,mBAAmB,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IAE/E,IAAI,OAAO,KAAK,OAAO,CAAC,OAAO,IAAI,kBAAkB,GAAG,OAAO,CAAC,WAAW,EAAE;QAC3E,gCAAgC;QAChC,4DAA4D;QAC5D,IAAI,mBAAmB,CAAC,OAAO,EAAE;YAC/B,YAAY,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;SAC3C;QAED,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACvB,MAAM,gBAAgB,GAAG,yBAAyB,GAAG,CAAC,GAAG,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;QACjF,IAAI,OAAO,KAAK,UAAU,IAAI,gBAAgB,IAAI,CAAC,EAAE;YACnD,UAAU,CAAC;gBACT,OAAO;gBACP,WAAW,EAAE,GAAG;aACjB,CAAC,CAAC;SACJ;aAAM;YACL,mBAAmB,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC5C,mFAAmF;gBACnF,oDAAoD;gBACpD,UAAU,CAAC;oBACT,OAAO;oBACP,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;iBACxB,CAAC,CAAC;YACL,CAAC,EAAE,gBAAgB,CAAC,CAAC;SACtB;KACF;IAED,IAAI,OAAO,CAAC,OAAO,KAAK,UAAU,EAAE;QAClC,OAAO,yCAAK,CAAC;KACd;IAED,OAAO,CACL,oBAAC,UAAU,IACT,cAAc,EAAE,cAAc,CAAC,OAAO,EACtC,SAAS,EAAE,GAAG,EAAE;YACd,4FAA4F;YAC5F,4DAA4D;YAC5D,UAAU,CAAC;gBACT,OAAO,EAAE,UAAU;gBACnB,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;aACxB,CAAC,CAAC;YACH,KAAK,CAAC,SAAS,EAAE,CAAC;QACpB,CAAC,EACD,sBAAsB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAE3C,oBAAC,aAAa,IAAC,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CACxD,CACd,CAAC;AACJ,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageBar, MessageBarType } from '@fluentui/react';\nimport React, { useRef, useState } from 'react';\nimport { BannerMessage } from './BannerMessage';\nimport { _ComplianceBannerStrings } from './types';\nimport { ComplianceBannerVariant } from './Utils';\n\nconst BANNER_OVERWRITE_DELAY_MS = 3000;\n\n/** @private */\nexport interface TimestampedVariant {\n  variant: ComplianceBannerVariant;\n  // Milliseconds since epoch (i.e., return value of Date.now()).\n  lastUpdated: number;\n}\n\n/**\n * Shows a {@link BannerMessage} in a {@link MessageBar} tracking `variant` internally.\n *\n * This component delays and combines frequent updates to `variant` such that:\n * - Updates that happen within {@link BANNER_OVERWRITE_DELAY_MS} are delayed.\n * - Once {@link BANNER_OVERWRITE_DELAY_MS} has passed since the last update, the _latest_ pending update is shown.\n *\n * This ensures that there is enough time for the user to see a banner message before it is overwritten.\n * In case of multiple delayed messages, the user always sees the final message as it reflects the final state\n * of recording and transcription.\n *\n * @private\n */\nexport function DelayedUpdateBanner(props: {\n  variant: TimestampedVariant;\n  onDismiss: () => void;\n  strings: _ComplianceBannerStrings;\n}): JSX.Element {\n  const { variant, lastUpdated: variantLastUpdated } = props.variant;\n\n  // Tracks the variant that is currently visible in the UI.\n  const [visible, setVisible] = useState<TimestampedVariant>({\n    variant,\n    lastUpdated: Date.now()\n  });\n  const pendingUpdateHandle = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  if (variant !== visible.variant && variantLastUpdated > visible.lastUpdated) {\n    // Always clear pending updates.\n    // We'll either update now, or schedule an update for later.\n    if (pendingUpdateHandle.current) {\n      clearTimeout(pendingUpdateHandle.current);\n    }\n\n    const now = Date.now();\n    const timeToNextUpdate = BANNER_OVERWRITE_DELAY_MS - (now - visible.lastUpdated);\n    if (variant === 'NO_STATE' || timeToNextUpdate <= 0) {\n      setVisible({\n        variant,\n        lastUpdated: now\n      });\n    } else {\n      pendingUpdateHandle.current = setTimeout(() => {\n        // Set the actual update time, not the computed time when the update should happen.\n        // The actual update might be later than we planned.\n        setVisible({\n          variant,\n          lastUpdated: Date.now()\n        });\n      }, timeToNextUpdate);\n    }\n  }\n\n  if (visible.variant === 'NO_STATE') {\n    return <></>;\n  }\n\n  return (\n    <MessageBar\n      messageBarType={MessageBarType.warning}\n      onDismiss={() => {\n        // when closing the banner, change variant to nostate and change stopped state to off state.\n        // Reason: on banner close, going back to the default state.\n        setVisible({\n          variant: 'NO_STATE',\n          lastUpdated: Date.now()\n        });\n        props.onDismiss();\n      }}\n      dismissButtonAriaLabel={props.strings.close}\n    >\n      <BannerMessage variant={visible.variant} strings={props.strings} />\n    </MessageBar>\n  );\n}\n"]}

package/dist/dist-esm/react-components/src/components/ComplianceBanner/Utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"Utils.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/Utils.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAOlC;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,eAAgC,EAAE,mBAAoC,EAA2B,EAAE;IAChI,IAAI,eAAe,KAAK,IAAI,IAAI,mBAAmB,KAAK,IAAI,EAAE;QAC5D,OAAO,qCAAqC,CAAC;KAC9C;SAAM,IAAI,eAAe,KAAK,IAAI,IAAI,mBAAmB,KAAK,KAAK,EAAE;QACpE,OAAO,mBAAmB,CAAC;KAC5B;SAAM,IAAI,eAAe,KAAK,KAAK,IAAI,mBAAmB,KAAK,IAAI,EAAE;QACpE,OAAO,uBAAuB,CAAC;KAChC;SAAM,IAAI,eAAe,KAAK,IAAI,IAAI,mBAAmB,KAAK,SAAS,EAAE;QACxE,OAAO,uCAAuC,CAAC;KAChD;SAAM,IAAI,eAAe,KAAK,SAAS,IAAI,mBAAmB,KAAK,IAAI,EAAE;QACxE,OAAO,sCAAsC,CAAC;KAC/C;SAAM,IAAI,eAAe,KAAK,KAAK,IAAI,mBAAmB,KAAK,SAAS,EAAE;QACzE,OAAO,uBAAuB,CAAC;KAChC;SAAM,IAAI,eAAe,KAAK,SAAS,IAAI,mBAAmB,KAAK,KAAK,EAAE;QACzE,OAAO,mBAAmB,CAAC;KAC5B;SAAM,IAAI,eAAe,KAAK,SAAS,IAAI,mBAAmB,KAAK,SAAS,EAAE;QAC7E,OAAO,qCAAqC,CAAC;KAC9C;SAAM;QACL,OAAO,UAAU,CAAC;KACnB;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * @private\n */\nexport type ComplianceState = 'on' | 'off' | 'stopped';\n\n/**\n * Return different conditions based on the current and previous state of recording and transcribing\n *\n * @param callRecordState - The current call record state: on, off, stopped\n * @param callTranscribeState - The current call transcribe state: on, off, stopped\n *\n * @remarks - The stopped state means: previously on but currently off\n *\n * @private\n */\nexport const computeVariant = (callRecordState: ComplianceState, callTranscribeState: ComplianceState): ComplianceBannerVariant => {\n  if (callRecordState === 'on' && callTranscribeState === 'on') {\n    return 'RECORDING_AND_TRANSCRIPTION_STARTED';\n  } else if (callRecordState === 'on' && callTranscribeState === 'off') {\n    return 'RECORDING_STARTED';\n  } else if (callRecordState === 'off' && callTranscribeState === 'on') {\n    return 'TRANSCRIPTION_STARTED';\n  } else if (callRecordState === 'on' && callTranscribeState === 'stopped') {\n    return 'TRANSCRIPTION_STOPPED_STILL_RECORDING';\n  } else if (callRecordState === 'stopped' && callTranscribeState === 'on') {\n    return 'RECORDING_STOPPED_STILL_TRANSCRIBING';\n  } else if (callRecordState === 'off' && callTranscribeState === 'stopped') {\n    return 'TRANSCRIPTION_STOPPED';\n  } else if (callRecordState === 'stopped' && callTranscribeState === 'off') {\n    return 'RECORDING_STOPPED';\n  } else if (callRecordState === 'stopped' && callTranscribeState === 'stopped') {\n    return 'RECORDING_AND_TRANSCRIPTION_STOPPED';\n  } else {\n    return 'NO_STATE';\n  }\n};\n\n/**\n * @private\n */\nexport type ComplianceBannerVariant = 'NO_STATE' | 'TRANSCRIPTION_STOPPED_STILL_RECORDING' | 'RECORDING_STOPPED_STILL_TRANSCRIBING' | 'RECORDING_AND_TRANSCRIPTION_STOPPED' | 'RECORDING_AND_TRANSCRIPTION_STARTED' | 'TRANSCRIPTION_STARTED' | 'RECORDING_STOPPED' | 'RECORDING_STARTED' | 'TRANSCRIPTION_STOPPED';"]}
+{"version":3,"file":"Utils.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ComplianceBanner/Utils.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAOlC;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,eAAgC,EAChC,mBAAoC,EACX,EAAE;IAC3B,IAAI,eAAe,KAAK,IAAI,IAAI,mBAAmB,KAAK,IAAI,EAAE;QAC5D,OAAO,qCAAqC,CAAC;KAC9C;SAAM,IAAI,eAAe,KAAK,IAAI,IAAI,mBAAmB,KAAK,KAAK,EAAE;QACpE,OAAO,mBAAmB,CAAC;KAC5B;SAAM,IAAI,eAAe,KAAK,KAAK,IAAI,mBAAmB,KAAK,IAAI,EAAE;QACpE,OAAO,uBAAuB,CAAC;KAChC;SAAM,IAAI,eAAe,KAAK,IAAI,IAAI,mBAAmB,KAAK,SAAS,EAAE;QACxE,OAAO,uCAAuC,CAAC;KAChD;SAAM,IAAI,eAAe,KAAK,SAAS,IAAI,mBAAmB,KAAK,IAAI,EAAE;QACxE,OAAO,sCAAsC,CAAC;KAC/C;SAAM,IAAI,eAAe,KAAK,KAAK,IAAI,mBAAmB,KAAK,SAAS,EAAE;QACzE,OAAO,uBAAuB,CAAC;KAChC;SAAM,IAAI,eAAe,KAAK,SAAS,IAAI,mBAAmB,KAAK,KAAK,EAAE;QACzE,OAAO,mBAAmB,CAAC;KAC5B;SAAM,IAAI,eAAe,KAAK,SAAS,IAAI,mBAAmB,KAAK,SAAS,EAAE;QAC7E,OAAO,qCAAqC,CAAC;KAC9C;SAAM;QACL,OAAO,UAAU,CAAC;KACnB;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * @private\n */\nexport type ComplianceState = 'on' | 'off' | 'stopped';\n\n/**\n * Return different conditions based on the current and previous state of recording and transcribing\n *\n * @param callRecordState - The current call record state: on, off, stopped\n * @param callTranscribeState - The current call transcribe state: on, off, stopped\n *\n * @remarks - The stopped state means: previously on but currently off\n *\n * @private\n */\nexport const computeVariant = (\n  callRecordState: ComplianceState,\n  callTranscribeState: ComplianceState\n): ComplianceBannerVariant => {\n  if (callRecordState === 'on' && callTranscribeState === 'on') {\n    return 'RECORDING_AND_TRANSCRIPTION_STARTED';\n  } else if (callRecordState === 'on' && callTranscribeState === 'off') {\n    return 'RECORDING_STARTED';\n  } else if (callRecordState === 'off' && callTranscribeState === 'on') {\n    return 'TRANSCRIPTION_STARTED';\n  } else if (callRecordState === 'on' && callTranscribeState === 'stopped') {\n    return 'TRANSCRIPTION_STOPPED_STILL_RECORDING';\n  } else if (callRecordState === 'stopped' && callTranscribeState === 'on') {\n    return 'RECORDING_STOPPED_STILL_TRANSCRIBING';\n  } else if (callRecordState === 'off' && callTranscribeState === 'stopped') {\n    return 'TRANSCRIPTION_STOPPED';\n  } else if (callRecordState === 'stopped' && callTranscribeState === 'off') {\n    return 'RECORDING_STOPPED';\n  } else if (callRecordState === 'stopped' && callTranscribeState === 'stopped') {\n    return 'RECORDING_AND_TRANSCRIPTION_STOPPED';\n  } else {\n    return 'NO_STATE';\n  }\n};\n\n/**\n * @private\n */\nexport type ComplianceBannerVariant =\n  | 'NO_STATE'\n  | 'TRANSCRIPTION_STOPPED_STILL_RECORDING'\n  | 'RECORDING_STOPPED_STILL_TRANSCRIBING'\n  | 'RECORDING_AND_TRANSCRIPTION_STOPPED'\n  | 'RECORDING_AND_TRANSCRIPTION_STARTED'\n  | 'TRANSCRIPTION_STARTED'\n  | 'RECORDING_STOPPED'\n  | 'RECORDING_STARTED'\n  | 'TRANSCRIPTION_STOPPED';\n"]}

package/dist/dist-esm/react-components/src/components/ComplianceBanner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/index.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport { _ComplianceBanner } from './ComplianceBanner';\nexport type { _ComplianceBannerProps, _ComplianceBannerStrings } from './types';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ComplianceBanner/index.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport { _ComplianceBanner } from './ComplianceBanner';\nexport type { _ComplianceBannerProps, _ComplianceBannerStrings } from './types';\n"]}

package/dist/dist-esm/react-components/src/components/ComplianceBanner/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/types.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * Subset of `CallCompositeStrings` needed by the ComplianceBanner component.\n * @internal\n */\nexport interface _ComplianceBannerStrings {\n  close: string;\n  complianceBannerNowOnlyRecording: string;\n  complianceBannerNowOnlyTranscription: string;\n  complianceBannerRecordingAndTranscriptionSaved: string;\n  complianceBannerRecordingAndTranscriptionStarted: string;\n  complianceBannerRecordingAndTranscriptionStopped: string;\n  complianceBannerRecordingSaving: string;\n  complianceBannerRecordingStarted: string;\n  complianceBannerRecordingStopped: string;\n  complianceBannerTranscriptionConsent: string;\n  complianceBannerTranscriptionSaving: string;\n  complianceBannerTranscriptionStarted: string;\n  complianceBannerTranscriptionStopped: string;\n  learnMore: string;\n  privacyPolicy: string;\n}\n\n/**\n * @internal\n */\nexport type _ComplianceBannerProps = {\n  callTranscribeState?: boolean;\n  callRecordState?: boolean;\n  strings: _ComplianceBannerStrings;\n};"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ComplianceBanner/types.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * Subset of `CallCompositeStrings` needed by the ComplianceBanner component.\n * @internal\n */\nexport interface _ComplianceBannerStrings {\n  close: string;\n  complianceBannerNowOnlyRecording: string;\n  complianceBannerNowOnlyTranscription: string;\n  complianceBannerRecordingAndTranscriptionSaved: string;\n  complianceBannerRecordingAndTranscriptionStarted: string;\n  complianceBannerRecordingAndTranscriptionStopped: string;\n  complianceBannerRecordingSaving: string;\n  complianceBannerRecordingStarted: string;\n  complianceBannerRecordingStopped: string;\n  complianceBannerTranscriptionConsent: string;\n  complianceBannerTranscriptionSaving: string;\n  complianceBannerTranscriptionStarted: string;\n  complianceBannerTranscriptionStopped: string;\n  learnMore: string;\n  privacyPolicy: string;\n}\n\n/**\n * @internal\n */\nexport type _ComplianceBannerProps = {\n  callTranscribeState?: boolean;\n  callRecordState?: boolean;\n  strings: _ComplianceBannerStrings;\n};\n"]}

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

@@ -5,11 +5,7 @@ import React, { useMemo } from 'react';
 import { controlBarStyles } from './styles/ControlBar.styles';
 import { useTheme } from '../theming';
 import { isDarkThemed } from '../theming/themeUtils';
-const mainDivStyle = {
-    position: 'relative',
-    height: '100%',
-    width: '100%'
-};
+const mainDivStyle = { position: 'relative', height: '100%', width: '100%' };
 /**
  * A container for various buttons for call controls.
  *
@@ -27,18 +23,18 @@ export const ControlBar = (props) => {
         const backgroundStyle = {
             background: isDarkThemed(theme) && (layout === null || layout === void 0 ? void 0 : layout.startsWith('floating')) ? theme.palette.neutralQuaternaryAlt : theme.palette.white
         };
-        const borderAndBoxShadowStyle = (layout === null || layout === void 0 ? void 0 : layout.startsWith('floating')) ? {
-            boxShadow: theme.effects.elevation16,
-            borderRadius: theme.effects.roundedCorner6
-        } : {};
+        const borderAndBoxShadowStyle = (layout === null || layout === void 0 ? void 0 : layout.startsWith('floating'))
+            ? {
+                boxShadow: theme.effects.elevation16,
+                borderRadius: theme.effects.roundedCorner6
+            }
+            : {};
         // if rtl is true and layout is either floatingTop or floatingBottom then we need to override the transform-style property
         // to translate 50% to right instead of the left
-        const transformOverrideStyle = theme.rtl && (layout === 'floatingTop' || layout === 'floatingBottom') ? {
-            transform: 'translateX(50%)'
-        } : {};
+        const transformOverrideStyle = theme.rtl && (layout === 'floatingTop' || layout === 'floatingBottom') ? { transform: 'translateX(50%)' } : {};
         return mergeStyles(controlBarStyle, backgroundStyle, borderAndBoxShadowStyle, transformOverrideStyle, styles === null || styles === void 0 ? void 0 : styles.root);
     }, [layout, styles === null || styles === void 0 ? void 0 : styles.root, theme]);
-    return React.createElement("div", { className: mergeStyles(mainDivStyle) },
-        React.createElement(Stack, { className: controlBarClassName }, props.children));
+    return (React.createElement("div", { className: mergeStyles(mainDivStyle) },
+        React.createElement(Stack, { className: controlBarClassName }, props.children)));
 };
 //# sourceMappingURL=ControlBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ControlBar.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ControlBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,MAAM,YAAY,GAAW;IAC3B,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;CACd,CAAC;AAmCF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAe,EAAE;IAChE,MAAM,EACJ,MAAM,EACN,MAAM,EACP,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,MAAM,eAAe,GAAG,gBAAgB,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,YAAY,CAAC,CAAC;QACjE,iIAAiI;QACjI,MAAM,eAAe,GAAG;YACtB,UAAU,EAAE,YAAY,CAAC,KAAK,CAAC,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,UAAU,CAAC,CAAA,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;SAC7H,CAAC;QACF,MAAM,uBAAuB,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,UAAU,CAAC,EAAC,CAAC,CAAC;YAC/D,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW;YACpC,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SAC3C,CAAC,CAAC,CAAC,EAAE,CAAC;QACP,0HAA0H;QAC1H,gDAAgD;QAChD,MAAM,sBAAsB,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,MAAM,KAAK,aAAa,IAAI,MAAM,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC;YACtG,SAAS,EAAE,iBAAiB;SAC7B,CAAC,CAAC,CAAC,EAAE,CAAC;QACP,OAAO,WAAW,CAAC,eAAe,EAAE,eAAe,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC;IACtH,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAClC,OAAO,6BAAK,SAAS,EAAE,WAAW,CAAC,YAAY,CAAC;QAC5C,oBAAC,KAAK,IAAC,SAAS,EAAE,mBAAmB,IAAG,KAAK,CAAC,QAAQ,CAAS,CAC3D,CAAC;AACX,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { BaseCustomStyles } from '../types';\nimport { controlBarStyles } from './styles/ControlBar.styles';\nimport { useTheme } from '../theming';\nimport { isDarkThemed } from '../theming/themeUtils';\nconst mainDivStyle: IStyle = {\n  position: 'relative',\n  height: '100%',\n  width: '100%'\n};\n\n/**\n * Present layouts for the {@link ControlBar}.\n *\n * @public\n */\nexport type ControlBarLayout = 'horizontal' | 'vertical' | 'dockedTop' | 'dockedBottom' | 'dockedLeft' | 'dockedRight' | 'floatingTop' | 'floatingBottom' | 'floatingLeft' | 'floatingRight';\n\n/**\n * Props for {@link ControlBar}.\n *\n * @public\n */\nexport interface ControlBarProps {\n  /** React Child components. */\n  children?: React.ReactNode;\n  /**\n   * Allows users to pass an object containing custom CSS styles.\n   * @Example\n   * ```\n   * <ControlBar styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n  /**\n   * Changes the layout of the control bar.\n   * Available layouts are `horizontal`, `vertical`, `dockedTop`, `dockedBottom`,\n   * `dockedLeft`, `dockedRight`, `floatingTop`, `floatingBottom`, `floatingLeft`,\n   * `floatingRight`\n   * Defaults to a `horizontal` layout.\n   */\n  layout?: ControlBarLayout;\n}\n\n/**\n * A container for various buttons for call controls.\n *\n * Use with various call control buttons in this library, e.g., {@link CameraButton}, or your own instances of\n * {@link ControlBarButton} directly.\n *\n * @public\n */\nexport const ControlBar = (props: ControlBarProps): JSX.Element => {\n  const {\n    styles,\n    layout\n  } = props;\n  const theme = useTheme();\n  const controlBarClassName = useMemo(() => {\n    const controlBarStyle = controlBarStyles[layout ?? 'horizontal'];\n    // if theme is dark and layout is floating then use palette.neutralQuaternaryAlt as background, otherwise use theme.palette.white\n    const backgroundStyle = {\n      background: isDarkThemed(theme) && layout?.startsWith('floating') ? theme.palette.neutralQuaternaryAlt : theme.palette.white\n    };\n    const borderAndBoxShadowStyle = layout?.startsWith('floating') ? {\n      boxShadow: theme.effects.elevation16,\n      borderRadius: theme.effects.roundedCorner6\n    } : {};\n    // if rtl is true and layout is either floatingTop or floatingBottom then we need to override the transform-style property\n    // to translate 50% to right instead of the left\n    const transformOverrideStyle = theme.rtl && (layout === 'floatingTop' || layout === 'floatingBottom') ? {\n      transform: 'translateX(50%)'\n    } : {};\n    return mergeStyles(controlBarStyle, backgroundStyle, borderAndBoxShadowStyle, transformOverrideStyle, styles?.root);\n  }, [layout, styles?.root, theme]);\n  return <div className={mergeStyles(mainDivStyle)}>\n      <Stack className={controlBarClassName}>{props.children}</Stack>\n    </div>;\n};"]}
+{"version":3,"file":"ControlBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,YAAY,GAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AA6CrF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAe,EAAE;IAChE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,MAAM,eAAe,GAAG,gBAAgB,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,YAAY,CAAC,CAAC;QACjE,iIAAiI;QACjI,MAAM,eAAe,GAAG;YACtB,UAAU,EACR,YAAY,CAAC,KAAK,CAAC,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,UAAU,CAAC,CAAA,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;SACnH,CAAC;QACF,MAAM,uBAAuB,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,UAAU,CAAC;YAC5D,CAAC,CAAC;gBACE,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW;gBACpC,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aAC3C;YACH,CAAC,CAAC,EAAE,CAAC;QACP,0HAA0H;QAC1H,gDAAgD;QAChD,MAAM,sBAAsB,GAC1B,KAAK,CAAC,GAAG,IAAI,CAAC,MAAM,KAAK,aAAa,IAAI,MAAM,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACjH,OAAO,WAAW,CAAC,eAAe,EAAE,eAAe,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC;IACtH,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAClC,OAAO,CACL,6BAAK,SAAS,EAAE,WAAW,CAAC,YAAY,CAAC;QACvC,oBAAC,KAAK,IAAC,SAAS,EAAE,mBAAmB,IAAG,KAAK,CAAC,QAAQ,CAAS,CAC3D,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { BaseCustomStyles } from '../types';\nimport { controlBarStyles } from './styles/ControlBar.styles';\nimport { useTheme } from '../theming';\nimport { isDarkThemed } from '../theming/themeUtils';\n\nconst mainDivStyle: IStyle = { position: 'relative', height: '100%', width: '100%' };\n\n/**\n * Present layouts for the {@link ControlBar}.\n *\n * @public\n */\nexport type ControlBarLayout =\n  | 'horizontal'\n  | 'vertical'\n  | 'dockedTop'\n  | 'dockedBottom'\n  | 'dockedLeft'\n  | 'dockedRight'\n  | 'floatingTop'\n  | 'floatingBottom'\n  | 'floatingLeft'\n  | 'floatingRight';\n\n/**\n * Props for {@link ControlBar}.\n *\n * @public\n */\nexport interface ControlBarProps {\n  /** React Child components. */\n  children?: React.ReactNode;\n  /**\n   * Allows users to pass an object containing custom CSS styles.\n   * @Example\n   * ```\n   * <ControlBar styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n  /**\n   * Changes the layout of the control bar.\n   * Available layouts are `horizontal`, `vertical`, `dockedTop`, `dockedBottom`,\n   * `dockedLeft`, `dockedRight`, `floatingTop`, `floatingBottom`, `floatingLeft`,\n   * `floatingRight`\n   * Defaults to a `horizontal` layout.\n   */\n  layout?: ControlBarLayout;\n}\n\n/**\n * A container for various buttons for call controls.\n *\n * Use with various call control buttons in this library, e.g., {@link CameraButton}, or your own instances of\n * {@link ControlBarButton} directly.\n *\n * @public\n */\nexport const ControlBar = (props: ControlBarProps): JSX.Element => {\n  const { styles, layout } = props;\n  const theme = useTheme();\n  const controlBarClassName = useMemo(() => {\n    const controlBarStyle = controlBarStyles[layout ?? 'horizontal'];\n    // if theme is dark and layout is floating then use palette.neutralQuaternaryAlt as background, otherwise use theme.palette.white\n    const backgroundStyle = {\n      background:\n        isDarkThemed(theme) && layout?.startsWith('floating') ? theme.palette.neutralQuaternaryAlt : theme.palette.white\n    };\n    const borderAndBoxShadowStyle = layout?.startsWith('floating')\n      ? {\n          boxShadow: theme.effects.elevation16,\n          borderRadius: theme.effects.roundedCorner6\n        }\n      : {};\n    // if rtl is true and layout is either floatingTop or floatingBottom then we need to override the transform-style property\n    // to translate 50% to right instead of the left\n    const transformOverrideStyle =\n      theme.rtl && (layout === 'floatingTop' || layout === 'floatingBottom') ? { transform: 'translateX(50%)' } : {};\n    return mergeStyles(controlBarStyle, backgroundStyle, borderAndBoxShadowStyle, transformOverrideStyle, styles?.root);\n  }, [layout, styles?.root, theme]);\n  return (\n    <div className={mergeStyles(mainDivStyle)}>\n      <Stack className={controlBarClassName}>{props.children}</Stack>\n    </div>\n  );\n};\n"]}

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

@@ -57,6 +57,12 @@ export interface ControlBarButtonProps extends IButtonProps {
      * Key to use for the Label component
      */
     labelKey?: string;
+    /**
+     * Disable tooltip.
+     *
+     * @defaultValue 'false'
+     */
+    disableTooltip?: boolean;
     /**
      * Id to use for the tooltip host.
      *

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

@@ -5,7 +5,13 @@ import { DefaultButton, concatStyleSets, KeyCodes } from '@fluentui/react';
 import { controlButtonStyles } from './styles/ControlBar.styles';
 import { ControlButtonTooltip } from './ControlButtonTooltip';
 const DefaultRenderIcon = (props) => {
-    return (props === null || props === void 0 ? void 0 : props.checked) ? (props === null || props === void 0 ? void 0 : props.onRenderOnIcon) ? props === null || props === void 0 ? void 0 : props.onRenderOnIcon() : null : (props === null || props === void 0 ? void 0 : props.onRenderOffIcon) ? props === null || props === void 0 ? void 0 : props.onRenderOffIcon() : null;
+    return (props === null || props === void 0 ? void 0 : props.checked)
+        ? (props === null || props === void 0 ? void 0 : props.onRenderOnIcon)
+            ? props === null || props === void 0 ? void 0 : props.onRenderOnIcon()
+            : null
+        : (props === null || props === void 0 ? void 0 : props.onRenderOffIcon)
+            ? props === null || props === void 0 ? void 0 : props.onRenderOffIcon()
+            : null;
 };
 /**
  * Default button styled for the {@link ControlBar}.
@@ -18,9 +24,13 @@ export const ControlBarButton = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     const componentStyles = concatStyleSets(controlButtonStyles, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
     const labelText = (_d = (_b = props === null || props === void 0 ? void 0 : props.text) !== null && _b !== void 0 ? _b : (_c = props === null || props === void 0 ? void 0 : props.strings) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ((props === null || props === void 0 ? void 0 : props.checked) ? (_e = props === null || props === void 0 ? void 0 : props.strings) === null || _e === void 0 ? void 0 : _e.onLabel : (_f = props === null || props === void 0 ? void 0 : props.strings) === null || _f === void 0 ? void 0 : _f.offLabel);
-    const tooltipContent = (_h = (_g = props === null || props === void 0 ? void 0 : props.strings) === null || _g === void 0 ? void 0 : _g.tooltipContent) !== null && _h !== void 0 ? _h : ((props === null || props === void 0 ? void 0 : props.disabled) ? (_j = props === null || props === void 0 ? void 0 : props.strings) === null || _j === void 0 ? void 0 : _j.tooltipDisabledContent : (props === null || props === void 0 ? void 0 : props.checked) ? (_k = props === null || props === void 0 ? void 0 : props.strings) === null || _k === void 0 ? void 0 : _k.tooltipOnContent : (_l = props === null || props === void 0 ? void 0 : props.strings) === null || _l === void 0 ? void 0 : _l.tooltipOffContent);
+    const tooltipContent = (_h = (_g = props === null || props === void 0 ? void 0 : props.strings) === null || _g === void 0 ? void 0 : _g.tooltipContent) !== null && _h !== void 0 ? _h : ((props === null || props === void 0 ? void 0 : props.disabled)
+        ? (_j = props === null || props === void 0 ? void 0 : props.strings) === null || _j === void 0 ? void 0 : _j.tooltipDisabledContent
+        : (props === null || props === void 0 ? void 0 : props.checked)
+            ? (_k = props === null || props === void 0 ? void 0 : props.strings) === null || _k === void 0 ? void 0 : _k.tooltipOnContent
+            : (_l = props === null || props === void 0 ? void 0 : props.strings) === null || _l === void 0 ? void 0 : _l.tooltipOffContent);
     const tooltipId = ((_m = props.tooltipId) !== null && _m !== void 0 ? _m : props.labelKey) ? props.labelKey + '-tooltip' : undefined;
-    return React.createElement(ControlButtonTooltip, { content: tooltipContent, id: tooltipId },
-        React.createElement(DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel && props.onRenderText ? props.onRenderText : undefined, onRenderIcon: (_o = props.onRenderIcon) !== null && _o !== void 0 ? _o : DefaultRenderIcon, ariaLabel: (_r = (_q = (_p = props.splitButtonAriaLabel) !== null && _p !== void 0 ? _p : props.ariaLabel) !== null && _q !== void 0 ? _q : tooltipContent) !== null && _r !== void 0 ? _r : labelText, allowDisabledFocus: (_s = props.allowDisabledFocus) !== null && _s !== void 0 ? _s : true, menuTriggerKeyCode: KeyCodes.down, text: undefined }), props.showLabel ? labelText : React.createElement(React.Fragment, null)));
+    return (React.createElement(ControlButtonTooltip, { hidden: props.disableTooltip, content: tooltipContent, id: tooltipId },
+        React.createElement(DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel && props.onRenderText ? props.onRenderText : undefined, onRenderIcon: (_o = props.onRenderIcon) !== null && _o !== void 0 ? _o : DefaultRenderIcon, ariaLabel: (_r = (_q = (_p = props.splitButtonAriaLabel) !== null && _p !== void 0 ? _p : props.ariaLabel) !== null && _q !== void 0 ? _q : tooltipContent) !== null && _r !== void 0 ? _r : labelText, allowDisabledFocus: (_s = props.allowDisabledFocus) !== null && _s !== void 0 ? _s : true, menuTriggerKeyCode: KeyCodes.down, text: undefined }), props.showLabel ? labelText : React.createElement(React.Fragment, null))));
 };
 //# sourceMappingURL=ControlBarButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ControlBarButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ControlBarButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { DefaultButton, IButtonProps, IRenderFunction, concatStyleSets, IButtonStyles, KeyCodes } from '@fluentui/react';\nimport { controlButtonStyles } from './styles/ControlBar.styles';\nimport { ControlButtonTooltip } from './ControlButtonTooltip';\n\n/**\n * Strings of {@link ControlBarButton} that can be overridden.\n *\n * @public\n */\nexport interface ControlBarButtonStrings {\n  /**\n   * Label of the button. This supersedes onLabel or offLabel if used.\n   */\n  label?: string;\n  /**\n   * Label of the button shown when the button is checked.\n   */\n  onLabel?: string;\n  /**\n   * Label of the button shown when the button is not checked.\n   */\n  offLabel?: string;\n  /**\n   * Tooltip content of the button. This supersedes tooltipDisabledContent, tooltipOnContent and tooltipOffContent if used.\n   */\n  tooltipContent?: string;\n  /**\n   * Tooltip content when the button is disabled.\n   */\n  tooltipDisabledContent?: string;\n  /**\n   * Tooltip content when the button is in the checked state.\n   */\n  tooltipOnContent?: string;\n  /**\n   * Tooltip content when the button is in the unchecked state.\n   */\n  tooltipOffContent?: string;\n}\n\n/**\n * Styles for all {@link ControlBarButton} implementations.\n *\n * @public\n */\nexport type ControlBarButtonStyles = IButtonStyles;\n\n/**\n * Props for {@link ControlBarButton}.\n *\n * @public\n */\nexport interface ControlBarButtonProps extends IButtonProps {\n  /**\n   * Whether the label is displayed or not.\n   *\n   * @defaultValue `false`\n   */\n  showLabel?: boolean;\n\n  /**\n   * Key to use for the Label component\n   */\n  labelKey?: string;\n\n  /**\n   * Id to use for the tooltip host.\n   *\n   * @defaultValue This uses the labelKey and appends -tooltip by default\n   */\n  tooltipId?: string;\n\n  /**\n   * Optional strings to override in component.\n   */\n  strings?: ControlBarButtonStrings;\n\n  /**\n   * Icon to render when the button is checked.\n   */\n  onRenderOnIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Icon to render when the button is not checked.\n   */\n  onRenderOffIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Fluent styles, including extensions common to all {@link ControlBarButton}s.\n   */\n  styles?: ControlBarButtonStyles;\n}\nconst DefaultRenderIcon = (props?: ControlBarButtonProps): JSX.Element | null => {\n  return props?.checked ? props?.onRenderOnIcon ? props?.onRenderOnIcon() : null : props?.onRenderOffIcon ? props?.onRenderOffIcon() : null;\n};\n\n/**\n * Default button styled for the {@link ControlBar}.\n *\n * Use this component create custom buttons that are styled the same as other buttons provided by the UI Library.\n *\n * @public\n */\nexport const ControlBarButton = (props: ControlBarButtonProps): JSX.Element => {\n  const componentStyles = concatStyleSets(controlButtonStyles, props.styles ?? {});\n  const labelText = props?.text ?? props?.strings?.label ?? (props?.checked ? props?.strings?.onLabel : props?.strings?.offLabel);\n  const tooltipContent = props?.strings?.tooltipContent ?? (props?.disabled ? props?.strings?.tooltipDisabledContent : props?.checked ? props?.strings?.tooltipOnContent : props?.strings?.tooltipOffContent);\n  const tooltipId = props.tooltipId ?? props.labelKey ? props.labelKey + '-tooltip' : undefined;\n  return <ControlButtonTooltip content={tooltipContent} id={tooltipId}>\n      <DefaultButton {...props} styles={componentStyles} onRenderText={props.showLabel && props.onRenderText ? props.onRenderText : undefined} onRenderIcon={props.onRenderIcon ?? DefaultRenderIcon} ariaLabel={props.splitButtonAriaLabel ?? props.ariaLabel ?? tooltipContent ?? labelText} allowDisabledFocus={props.allowDisabledFocus ?? true} menuTriggerKeyCode={KeyCodes.down} // explicitly sets the keypress to activiate the split button drop down.\n    text={undefined} // this is handled as a child of the button, without this the `showLabel` prop may be ignored.\n    >\n        {props.showLabel ? labelText : <></>}\n      </DefaultButton>\n    </ControlButtonTooltip>;\n};"]}
+{"version":3,"file":"ControlBarButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlBarButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport {\n  DefaultButton,\n  IButtonProps,\n  IRenderFunction,\n  concatStyleSets,\n  IButtonStyles,\n  KeyCodes\n} from '@fluentui/react';\nimport { controlButtonStyles } from './styles/ControlBar.styles';\nimport { ControlButtonTooltip } from './ControlButtonTooltip';\n\n/**\n * Strings of {@link ControlBarButton} that can be overridden.\n *\n * @public\n */\nexport interface ControlBarButtonStrings {\n  /**\n   * Label of the button. This supersedes onLabel or offLabel if used.\n   */\n  label?: string;\n  /**\n   * Label of the button shown when the button is checked.\n   */\n  onLabel?: string;\n  /**\n   * Label of the button shown when the button is not checked.\n   */\n  offLabel?: string;\n  /**\n   * Tooltip content of the button. This supersedes tooltipDisabledContent, tooltipOnContent and tooltipOffContent if used.\n   */\n  tooltipContent?: string;\n  /**\n   * Tooltip content when the button is disabled.\n   */\n  tooltipDisabledContent?: string;\n  /**\n   * Tooltip content when the button is in the checked state.\n   */\n  tooltipOnContent?: string;\n  /**\n   * Tooltip content when the button is in the unchecked state.\n   */\n  tooltipOffContent?: string;\n}\n\n/**\n * Styles for all {@link ControlBarButton} implementations.\n *\n * @public\n */\nexport type ControlBarButtonStyles = IButtonStyles;\n\n/**\n * Props for {@link ControlBarButton}.\n *\n * @public\n */\nexport interface ControlBarButtonProps extends IButtonProps {\n  /**\n   * Whether the label is displayed or not.\n   *\n   * @defaultValue `false`\n   */\n  showLabel?: boolean;\n\n  /**\n   * Key to use for the Label component\n   */\n  labelKey?: string;\n\n  /**\n   * Disable tooltip.\n   *\n   * @defaultValue 'false'\n   */\n  disableTooltip?: boolean;\n\n  /**\n   * Id to use for the tooltip host.\n   *\n   * @defaultValue This uses the labelKey and appends -tooltip by default\n   */\n  tooltipId?: string;\n\n  /**\n   * Optional strings to override in component.\n   */\n  strings?: ControlBarButtonStrings;\n\n  /**\n   * Icon to render when the button is checked.\n   */\n  onRenderOnIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Icon to render when the button is not checked.\n   */\n  onRenderOffIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Fluent styles, including extensions common to all {@link ControlBarButton}s.\n   */\n  styles?: ControlBarButtonStyles;\n}\n\nconst DefaultRenderIcon = (props?: ControlBarButtonProps): JSX.Element | null => {\n  return props?.checked\n    ? props?.onRenderOnIcon\n      ? props?.onRenderOnIcon()\n      : null\n    : props?.onRenderOffIcon\n    ? props?.onRenderOffIcon()\n    : null;\n};\n\n/**\n * Default button styled for the {@link ControlBar}.\n *\n * Use this component create custom buttons that are styled the same as other buttons provided by the UI Library.\n *\n * @public\n */\nexport const ControlBarButton = (props: ControlBarButtonProps): JSX.Element => {\n  const componentStyles = concatStyleSets(controlButtonStyles, props.styles ?? {});\n\n  const labelText =\n    props?.text ?? props?.strings?.label ?? (props?.checked ? props?.strings?.onLabel : props?.strings?.offLabel);\n\n  const tooltipContent =\n    props?.strings?.tooltipContent ??\n    (props?.disabled\n      ? props?.strings?.tooltipDisabledContent\n      : props?.checked\n      ? props?.strings?.tooltipOnContent\n      : props?.strings?.tooltipOffContent);\n\n  const tooltipId = props.tooltipId ?? props.labelKey ? props.labelKey + '-tooltip' : undefined;\n\n  return (\n    <ControlButtonTooltip hidden={props.disableTooltip} content={tooltipContent} id={tooltipId}>\n      <DefaultButton\n        {...props}\n        styles={componentStyles}\n        onRenderText={props.showLabel && props.onRenderText ? props.onRenderText : undefined}\n        onRenderIcon={props.onRenderIcon ?? DefaultRenderIcon}\n        ariaLabel={props.splitButtonAriaLabel ?? props.ariaLabel ?? tooltipContent ?? labelText}\n        allowDisabledFocus={props.allowDisabledFocus ?? true}\n        menuTriggerKeyCode={KeyCodes.down} // explicitly sets the keypress to activiate the split button drop down.\n        text={undefined} // this is handled as a child of the button, without this the `showLabel` prop may be ignored.\n      >\n        {props.showLabel ? labelText : <></>}\n      </DefaultButton>\n    </ControlButtonTooltip>\n  );\n};\n"]}

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

@@ -6,11 +6,7 @@ import { isDarkThemed } from '../theming/themeUtils';
 // The TooltipHost root uses display: inline by default.
 // To prevent sizing issues or tooltip positioning issues, we override to inline-block.
 // For more details see "Icon Button with Tooltip" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
-const hostStyles = {
-    root: {
-        display: 'inline-block'
-    }
-};
+const hostStyles = { root: { display: 'inline-block' } };
 /**
  * Tooltip that should wrap control bar buttons.
  *
@@ -18,20 +14,13 @@ const hostStyles = {
  */
 export const ControlButtonTooltip = (props) => {
     const theme = useTheme();
-    const calloutStyle = {
-        root: {
-            padding: 0
-        },
-        calloutMain: {
-            padding: '0.5rem'
-        }
-    };
+    const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
     // Place callout with no gap between it and the button.
     const calloutProps = {
         gapSpace: 0,
         styles: calloutStyle,
         backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
     };
-    return React.createElement(TooltipHost, Object.assign({}, props, { "data-ui-id": props.id, calloutProps: Object.assign(Object.assign({}, calloutProps), props.calloutProps), styles: mergeStyleSets(hostStyles, props.styles) }), props.children);
+    return (React.createElement(TooltipHost, Object.assign({}, props, { "data-ui-id": props.id, calloutProps: Object.assign(Object.assign({}, calloutProps), props.calloutProps), styles: mergeStyleSets(hostStyles, props.styles) }), props.children));
 };
 //# sourceMappingURL=ControlButtonTooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ControlButtonTooltip.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ControlButtonTooltip.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAgE,cAAc,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtI,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,wDAAwD;AACxD,uFAAuF;AACvF,yHAAyH;AACzH,MAAM,UAAU,GAAgC;IAC9C,IAAI,EAAE;QACJ,OAAO,EAAE,cAAc;KACxB;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAwB,EAAe,EAAE;IAC5E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC;QACnD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC;SACX;QACD,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;SAClB;KACF,CAAC;IAEF,uDAAuD;IACvD,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,oBAAC,WAAW,oBAAK,KAAK,kBAAc,KAAK,CAAC,EAAE,EAAE,YAAY,kCAC5D,YAAY,GACZ,KAAK,CAAC,YAAY,GACpB,MAAM,EAAE,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,KAC9C,KAAK,CAAC,QAAQ,CACH,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { TooltipHost, ITooltipHostStyles, ITooltipHostProps, ICalloutContentStyles, mergeStyleSets, useTheme } from '@fluentui/react';\nimport { isDarkThemed } from '../theming/themeUtils';\n\n// The TooltipHost root uses display: inline by default.\n// To prevent sizing issues or tooltip positioning issues, we override to inline-block.\n// For more details see \"Icon Button with Tooltip\" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button\nconst hostStyles: Partial<ITooltipHostStyles> = {\n  root: {\n    display: 'inline-block'\n  }\n};\n\n/**\n * Tooltip that should wrap control bar buttons.\n *\n * @private\n */\nexport const ControlButtonTooltip = (props: ITooltipHostProps): JSX.Element => {\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = {\n    root: {\n      padding: 0\n    },\n    calloutMain: {\n      padding: '0.5rem'\n    }\n  };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return <TooltipHost {...props} data-ui-id={props.id} calloutProps={{\n    ...calloutProps,\n    ...props.calloutProps\n  }} styles={mergeStyleSets(hostStyles, props.styles)}>\n      {props.children}\n    </TooltipHost>;\n};"]}
+{"version":3,"file":"ControlButtonTooltip.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlButtonTooltip.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,WAAW,EAIX,cAAc,EACd,QAAQ,EACT,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,wDAAwD;AACxD,uFAAuF;AACvF,yHAAyH;AACzH,MAAM,UAAU,GAAgC,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,CAAC;AAEtF;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAwB,EAAe,EAAE;IAC5E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC;IAElH,uDAAuD;IACvD,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,CACL,oBAAC,WAAW,oBACN,KAAK,kBACG,KAAK,CAAC,EAAE,EACpB,YAAY,kCAAO,YAAY,GAAK,KAAK,CAAC,YAAY,GACtD,MAAM,EAAE,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,KAE/C,KAAK,CAAC,QAAQ,CACH,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport {\n  TooltipHost,\n  ITooltipHostStyles,\n  ITooltipHostProps,\n  ICalloutContentStyles,\n  mergeStyleSets,\n  useTheme\n} from '@fluentui/react';\nimport { isDarkThemed } from '../theming/themeUtils';\n\n// The TooltipHost root uses display: inline by default.\n// To prevent sizing issues or tooltip positioning issues, we override to inline-block.\n// For more details see \"Icon Button with Tooltip\" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button\nconst hostStyles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };\n\n/**\n * Tooltip that should wrap control bar buttons.\n *\n * @private\n */\nexport const ControlButtonTooltip = (props: ITooltipHostProps): JSX.Element => {\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return (\n    <TooltipHost\n      {...props}\n      data-ui-id={props.id}\n      calloutProps={{ ...calloutProps, ...props.calloutProps }}\n      styles={mergeStyleSets(hostStyles, props.styles)}\n    >\n      {props.children}\n    </TooltipHost>\n  );\n};\n"]}