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

package/dist/dist-esm/react-components/src/components/TextFieldWithMention/mentionTagUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mentionTagUtils.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/TextFieldWithMention/mentionTagUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ComponentStrings } from '../../localization';\nimport { Mention } from '../MentionPopover';\nconst MSFT_MENTION_TAG = 'msft-mention';\n\n/**\n * Props for finding a valid index in range.\n *\n * @private\n */\ntype ValidatedIndexRangeProps = {\n  min: number;\n  max: number;\n  currentValue?: number;\n};\n\n/**\n * Get validated value for index between min and max values. If currentValue is not defined, -1 will be used instead.\n *\n * @private\n * @param props - Props for finding a valid index in range.\n * @returns Valid index in the range.\n */\nexport const getValidatedIndexInRange = (props: ValidatedIndexRangeProps): number => {\n  const {\n    min,\n    max,\n    currentValue\n  } = props;\n  let updatedValue = currentValue ?? -1;\n  updatedValue = Math.max(min, updatedValue);\n  updatedValue = Math.min(updatedValue, max);\n  return updatedValue;\n};\n\n/**\n * Find mention tag for selection if exists.\n *\n * @private\n * @param tags - Existing list of tags.\n * @param selection - Selection index.\n * @returns Mention tag if exists, otherwise undefined.\n */\nexport const findMentionTagForSelection = (tags: TagData[], selection: number): TagData | undefined => {\n  let mentionTag: TagData | undefined = undefined;\n  tags.every(tag => {\n    const closingTagInfo = getTagClosingTagInfo(tag);\n    if (tag.plainTextBeginIndex !== undefined && tag.plainTextBeginIndex > selection) {\n      // no need to check further as the selection is before the tag\n      return false;\n    } else if (tag.plainTextBeginIndex !== undefined && tag.plainTextBeginIndex <= selection && selection <= closingTagInfo.plainTextEndIndex) {\n      // no need to check if tag doesn't contain selection\n      if (tag.subTags !== undefined && tag.subTags.length !== 0) {\n        const selectedTag = findMentionTagForSelection(tag.subTags, selection);\n        if (selectedTag !== undefined) {\n          mentionTag = selectedTag;\n          return false;\n        }\n      } else if (tag.tagType === MSFT_MENTION_TAG) {\n        mentionTag = tag;\n        return false;\n      }\n    }\n    return true;\n  });\n  return mentionTag;\n};\n\n/**\n * Props for finding new selection index for mention\n *\n * @private\n */\ntype NewSelectionIndexForMentionProps = {\n  tag: TagData;\n  textValue: string;\n  currentSelectionIndex: number;\n  previousSelectionIndex: number;\n};\n\n/**\n * Find a new the selection index.\n *\n * @private\n * @param props - Props for finding new selection index for mention.\n * @returns New selection index if it is inside of a mention tag, otherwise the current selection.\n */\nexport const findNewSelectionIndexForMention = (props: NewSelectionIndexForMentionProps): number => {\n  const {\n    tag,\n    textValue,\n    currentSelectionIndex,\n    previousSelectionIndex\n  } = props;\n  // check if this is a mention tag and selection should be updated\n  if (tag.tagType !== MSFT_MENTION_TAG || tag.plainTextBeginIndex === undefined || currentSelectionIndex === previousSelectionIndex || tag.plainTextEndIndex === undefined) {\n    return currentSelectionIndex;\n  }\n  let spaceIndex = 0;\n  if (currentSelectionIndex <= previousSelectionIndex) {\n    // the cursor is moved to the left, find the last index before the cursor\n    spaceIndex = textValue.lastIndexOf(' ', currentSelectionIndex ?? 0);\n    if (spaceIndex === -1) {\n      // no space before the selection, use the beginning of the tag\n      spaceIndex = tag.plainTextBeginIndex;\n    }\n  } else {\n    // the cursor is moved to the right, find the fist index after the cursor\n    spaceIndex = textValue.indexOf(' ', currentSelectionIndex ?? 0);\n    if (spaceIndex === -1) {\n      // no space after the selection, use the end of the tag\n      spaceIndex = tag.plainTextEndIndex ?? tag.plainTextBeginIndex;\n    }\n  }\n  spaceIndex = getValidatedIndexInRange({\n    min: tag.plainTextBeginIndex,\n    max: tag.plainTextEndIndex,\n    currentValue: spaceIndex\n  });\n  return spaceIndex;\n};\n\n/**\n * Props for mention update HTML function\n *\n * @private\n */\ntype MentionTagUpdateProps = {\n  htmlText: string;\n  oldPlainText: string;\n  lastProcessedHTMLIndex: number;\n  processedChange: string;\n  change: string;\n  tag: TagData;\n  closeTagIdx: number;\n  closeTagLength: number;\n  plainTextEndIndex: number;\n  startIndex: number;\n  oldPlainTextEndIndex: number;\n  mentionTagLength: number;\n};\n\n/**\n * Result for mention update HTML function\n *\n * @private\n */\ntype MentionTagUpdateResult = {\n  result: string;\n  updatedChange: string;\n  htmlIndex: number;\n  plainTextSelectionEndIndex?: number;\n};\n\n/**\n * Handle mention tag edit and by word deleting\n *\n * @private\n * @param props - Props for mention update HTML function.\n * @returns Updated texts and indexes.\n */\nconst handleMentionTagUpdate = (props: MentionTagUpdateProps): MentionTagUpdateResult => {\n  const {\n    htmlText,\n    oldPlainText,\n    change,\n    tag,\n    closeTagIdx,\n    closeTagLength,\n    plainTextEndIndex,\n    startIndex,\n    oldPlainTextEndIndex,\n    mentionTagLength\n  } = props;\n  let processedChange = props.processedChange;\n  let lastProcessedHTMLIndex = props.lastProcessedHTMLIndex;\n  if (tag.tagType !== MSFT_MENTION_TAG || tag.plainTextBeginIndex === undefined) {\n    // not a mention tag\n    return {\n      result: '',\n      updatedChange: processedChange,\n      htmlIndex: lastProcessedHTMLIndex,\n      plainTextSelectionEndIndex: undefined\n    };\n  }\n  let result = '';\n  let plainTextSelectionEndIndex: number | undefined;\n  let rangeStart: number;\n  let rangeEnd: number;\n  // check if space symbol is handled in case if string looks like '<1 2 3>'\n  let isSpaceLengthHandled = false;\n  rangeStart = oldPlainText.lastIndexOf(' ', startIndex);\n  if (rangeStart !== -1 && rangeStart !== undefined && rangeStart > tag.plainTextBeginIndex) {\n    isSpaceLengthHandled = true;\n  }\n  rangeEnd = oldPlainText.indexOf(' ', oldPlainTextEndIndex);\n  if (rangeEnd === -1 || rangeEnd === undefined) {\n    // check if space symbol is not found\n    rangeEnd = plainTextEndIndex;\n  } else if (!isSpaceLengthHandled) {\n    // +1 to include the space symbol\n    rangeEnd += 1;\n  }\n  isSpaceLengthHandled = true;\n  if (rangeStart === -1 || rangeStart === undefined || rangeStart < tag.plainTextBeginIndex) {\n    // rangeStart should be at least equal to tag.plainTextBeginIndex\n    rangeStart = tag.plainTextBeginIndex;\n  }\n  if (rangeEnd > plainTextEndIndex) {\n    // rangeEnd should be at most equal to plainTextEndIndex\n    rangeEnd = plainTextEndIndex;\n  }\n  if (rangeStart === tag.plainTextBeginIndex && rangeEnd === plainTextEndIndex) {\n    // the whole tag should be removed\n    result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;\n    plainTextSelectionEndIndex = tag.plainTextBeginIndex + change.length;\n    processedChange = '';\n    lastProcessedHTMLIndex = closeTagIdx + closeTagLength;\n  } else {\n    // only part of the tag should be removed\n    let startChangeDiff = 0;\n    let endChangeDiff = 0;\n    // need to check only rangeStart > tag.plainTextBeginIndex as when rangeStart === tag.plainTextBeginIndex startChangeDiff = 0 and mentionTagLength shouldn't be subtracted\n    if (rangeStart > tag.plainTextBeginIndex) {\n      startChangeDiff = rangeStart - tag.plainTextBeginIndex - mentionTagLength;\n    }\n    endChangeDiff = rangeEnd - tag.plainTextBeginIndex - mentionTagLength;\n    result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length + startChangeDiff);\n    if (startIndex < tag.plainTextBeginIndex) {\n      // if the change is before the tag, the selection should start from startIndex (rangeStart will be equal to tag.plainTextBeginIndex)\n      plainTextSelectionEndIndex = startIndex + change.length;\n    } else {\n      // if the change is inside the tag, the selection should start with rangeStart\n      plainTextSelectionEndIndex = rangeStart + change.length;\n    }\n    lastProcessedHTMLIndex = tag.openTagIndex + tag.openTagBody.length + endChangeDiff;\n    // processed change should not be changed as it should be added after the tag\n  }\n\n  return {\n    result,\n    updatedChange: processedChange,\n    htmlIndex: lastProcessedHTMLIndex,\n    plainTextSelectionEndIndex\n  };\n};\n\n/**\n * Closing tag information\n *\n * @private\n */\ntype ClosingTagInfoResult = {\n  plainTextEndIndex: number;\n  closeTagIdx: number;\n  closeTagLength: number;\n};\n\n/**\n * Get closing tag information if exists otherwise return information as for self closing tag\n *\n * @private\n * @param tag - Tag data.\n * @returns Closing tag information for the provided tag.\n */\nconst getTagClosingTagInfo = (tag: TagData): ClosingTagInfoResult => {\n  let plainTextEndIndex = 0;\n  let closeTagIdx = 0;\n  let closeTagLength = 0;\n  if (tag.plainTextEndIndex !== undefined && tag.closingTagIndex !== undefined) {\n    // close tag exists\n    plainTextEndIndex = tag.plainTextEndIndex;\n    closeTagIdx = tag.closingTagIndex;\n    // tag.tagType.length + </>\n    closeTagLength = tag.tagType.length + 3;\n  } else if (tag.plainTextBeginIndex !== undefined) {\n    // no close tag\n    plainTextEndIndex = tag.plainTextBeginIndex;\n    closeTagIdx = tag.openTagIndex + tag.openTagBody.length;\n    closeTagLength = 0;\n  }\n  return {\n    plainTextEndIndex,\n    closeTagIdx,\n    closeTagLength\n  };\n};\n\n/**\n * Props for update HTML function\n *\n * @private\n */\ntype UpdateHTMLProps = {\n  htmlText: string;\n  oldPlainText: string;\n  tags: TagData[];\n  startIndex: number;\n  oldPlainTextEndIndex: number;\n  change: string;\n  mentionTrigger: string;\n};\n\n/**\n * Go through the text and update it with the changed text\n *\n * @private\n * @param props - Props for update HTML function.\n * @returns Updated HTML and selection index if the selection index should be set.\n */\nexport const updateHTML = (props: UpdateHTMLProps): {\n  updatedHTML: string;\n  updatedSelectionIndex?: number;\n} => {\n  const {\n    htmlText,\n    oldPlainText,\n    tags,\n    startIndex,\n    oldPlainTextEndIndex,\n    change,\n    mentionTrigger\n  } = props;\n  if (tags.length === 0 || startIndex === 0 && oldPlainTextEndIndex === oldPlainText.length - 1) {\n    // no tags added yet or the whole text is changed\n    const changeWithSkippedChars = escapeHTMLChars(change);\n    const updatedHTML = escapeHTMLChars(oldPlainText.substring(0, startIndex)) + changeWithSkippedChars + escapeHTMLChars(oldPlainText.substring(oldPlainTextEndIndex));\n    return {\n      updatedHTML,\n      updatedSelectionIndex: undefined\n    };\n  }\n  let result = '';\n  let lastProcessedHTMLIndex = 0;\n  // the value can be updated with empty string when the change covers more than 1 place (tag + before or after the tag)\n  // in this case change won't be added as part of the tag\n  // e.g.: change is before and partially in tag => change will be added before the tag and outdated text in the tag will be removed\n  // e.g.: change is after and partially in tag => change will be added after the tag and outdated text in the tag will be removed\n  // e.g.: change is on the beginning of the tag => change will be added before the tag\n  // e.g.: change is on the end of the tag => change will be added to the tag if it's not mention and after the tag if it's mention\n  let processedChange = escapeHTMLChars(change);\n\n  // end tag plain text index of the last processed tag\n  let lastProcessedPlainTextTagEndIndex = 0;\n  // as some tags/text can be removed fully, selection should be updated correctly\n  let changeNewEndIndex: number | undefined;\n  for (let i = 0; i < tags.length; i++) {\n    const tag = tags[i];\n    if (tag.plainTextBeginIndex === undefined) {\n      continue;\n    }\n    // all plain text indexes includes trigger length for the mention that shouldn't be included in\n    // htmlText.substring because html strings don't include the trigger\n    // mentionTagLength will be set only for mention tag, otherwise should be 0\n    let mentionTagLength = 0;\n    let isMentionTag = false;\n    if (tag.tagType === MSFT_MENTION_TAG) {\n      mentionTagLength = mentionTrigger.length;\n      isMentionTag = true;\n    }\n    if (startIndex <= tag.plainTextBeginIndex) {\n      // change start is before the open tag\n      // Math.max(lastProcessedPlainTextTagEndIndex, startIndex) is used as startIndex may not be in [[previous tag].plainTextEndIndex - tag.plainTextBeginIndex] range\n      const startChangeDiff = getChangeDiff(oldPlainText, Math.max(lastProcessedPlainTextTagEndIndex, startIndex), tag.plainTextBeginIndex);\n      result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex - startChangeDiff) + processedChange;\n      processedChange = '';\n      if (oldPlainTextEndIndex <= tag.plainTextBeginIndex) {\n        // the whole change is before tag start\n        // mentionTag length can be ignored here as the change is before the tag\n        const endChangeDiff = getChangeDiff(oldPlainText, oldPlainTextEndIndex, tag.plainTextBeginIndex);\n        lastProcessedHTMLIndex = tag.openTagIndex - endChangeDiff;\n        // the change is handled; exit\n        break;\n      } else {\n        // change continues in the tag\n        lastProcessedHTMLIndex = tag.openTagIndex;\n        // proceed to the next check\n      }\n    }\n\n    const closingTagInfo = getTagClosingTagInfo(tag);\n    if (startIndex <= closingTagInfo.plainTextEndIndex) {\n      // change started before the end tag\n      if (startIndex <= tag.plainTextBeginIndex && oldPlainTextEndIndex === closingTagInfo.plainTextEndIndex) {\n        // the change is a tag or starts before the tag\n        // tag should be removed, no matter if there are sub-tags\n        result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;\n        processedChange = '';\n        lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;\n        // the change is handled; exit\n        break;\n      } else if (startIndex >= tag.plainTextBeginIndex && oldPlainTextEndIndex <= closingTagInfo.plainTextEndIndex) {\n        // the change is between the tag\n        if (isMentionTag) {\n          if (change !== '') {\n            // case for startIndex === tag.plainTextBeginIndex and closingTagInfo.plainTextEndIndex === startIndex\n            // is handled in startIndex <= tag.plainTextBeginIndex condition check\n            // the change will be added at the beginning before the mention tag\n            if (startIndex === closingTagInfo.plainTextEndIndex) {\n              // non empty change at the end of the mention tag to be added after the mention tag\n              result += htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength) + processedChange;\n              changeNewEndIndex = closingTagInfo.plainTextEndIndex + unEscapeHtmlCharacters(processedChange).length;\n              lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;\n              processedChange = '';\n              // the change is handled; exit\n              break;\n            } else if (startIndex > tag.plainTextBeginIndex && oldPlainTextEndIndex < closingTagInfo.plainTextEndIndex && startIndex === oldPlainTextEndIndex) {\n              // mention tag should be deleted when user tries to edit it in the middle\n              result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;\n              changeNewEndIndex = tag.plainTextBeginIndex + unEscapeHtmlCharacters(processedChange).length;\n              lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;\n              processedChange = '';\n              // the change is handled; exit\n              break;\n            } else {\n              // the selection for more that 1 symbol when 1 of the ends is included\n              const updateMentionTagResult = handleMentionTagUpdate({\n                htmlText,\n                oldPlainText,\n                lastProcessedHTMLIndex,\n                processedChange,\n                change,\n                tag,\n                closeTagIdx: closingTagInfo.closeTagIdx,\n                closeTagLength: closingTagInfo.closeTagLength,\n                plainTextEndIndex: closingTagInfo.plainTextEndIndex,\n                startIndex,\n                oldPlainTextEndIndex,\n                mentionTagLength\n              });\n              result += updateMentionTagResult.result;\n              changeNewEndIndex = updateMentionTagResult.plainTextSelectionEndIndex;\n              processedChange = updateMentionTagResult.updatedChange;\n              lastProcessedHTMLIndex = updateMentionTagResult.htmlIndex;\n              // proceed with the next calculations\n            }\n          } else {\n            // When change is empty, it means that this change is a deletion\n            const updateMentionTagResult = handleMentionTagUpdate({\n              htmlText,\n              oldPlainText,\n              lastProcessedHTMLIndex,\n              processedChange,\n              change,\n              tag,\n              closeTagIdx: closingTagInfo.closeTagIdx,\n              closeTagLength: closingTagInfo.closeTagLength,\n              plainTextEndIndex: closingTagInfo.plainTextEndIndex,\n              startIndex,\n              oldPlainTextEndIndex,\n              mentionTagLength\n            });\n            result += updateMentionTagResult.result;\n            changeNewEndIndex = updateMentionTagResult.plainTextSelectionEndIndex;\n            processedChange = updateMentionTagResult.updatedChange;\n            lastProcessedHTMLIndex = updateMentionTagResult.htmlIndex;\n            // the change is handled; exit\n            break;\n          }\n        } else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {\n          // with subtags\n          const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length);\n          lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;\n          const updatedContent = updateHTML({\n            htmlText: tag.content,\n            oldPlainText,\n            tags: tag.subTags,\n            startIndex,\n            oldPlainTextEndIndex,\n            change: processedChange,\n            mentionTrigger\n          });\n          result += stringBefore + updatedContent.updatedHTML;\n          changeNewEndIndex = updatedContent.updatedSelectionIndex;\n          // the change is handled; exit\n          break;\n        } else {\n          // no subtags\n          const startChangeDiff = getChangeDiff(oldPlainText, tag.plainTextBeginIndex, startIndex);\n          result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length + startChangeDiff) + processedChange;\n          processedChange = '';\n          if (oldPlainTextEndIndex < closingTagInfo.plainTextEndIndex) {\n            const endChangeDiff = getChangeDiff(oldPlainText, tag.plainTextBeginIndex, oldPlainTextEndIndex);\n            lastProcessedHTMLIndex = tag.openTagIndex + tag.openTagBody.length + endChangeDiff;\n          } else if (oldPlainTextEndIndex === closingTagInfo.plainTextEndIndex) {\n            lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;\n          }\n          // the change is handled; exit\n          break;\n        }\n      } else if (startIndex > tag.plainTextBeginIndex && oldPlainTextEndIndex > closingTagInfo.plainTextEndIndex) {\n        // the change started in the tag but finishes somewhere further\n        if (isMentionTag) {\n          if (startIndex === closingTagInfo.plainTextEndIndex) {\n            // the change should be handled out of mention tag\n            // as startIndex === closingTagInfo.plainTextEndIndex and oldPlainTextEndIndex > closingTagInfo.plainTextEndIndex\n            result += htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength);\n            // no need to handle plainTextSelectionEndIndex as the change will be added later\n            lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;\n          } else {\n            // part of the mention tag was changed/deleted\n            const updateMentionTagResult = handleMentionTagUpdate({\n              htmlText,\n              oldPlainText,\n              lastProcessedHTMLIndex,\n              processedChange: '',\n              change,\n              tag,\n              closeTagIdx: closingTagInfo.closeTagIdx,\n              closeTagLength: closingTagInfo.closeTagLength,\n              plainTextEndIndex: closingTagInfo.plainTextEndIndex,\n              startIndex,\n              oldPlainTextEndIndex,\n              mentionTagLength\n            });\n            result += updateMentionTagResult.result;\n            lastProcessedHTMLIndex = updateMentionTagResult.htmlIndex;\n            // no need to handle plainTextSelectionEndIndex as the change will be added later\n          }\n        } else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {\n          // with subtags\n          const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length);\n          lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;\n          const updatedContent = updateHTML({\n            htmlText: tag.content,\n            oldPlainText,\n            tags: tag.subTags,\n            startIndex,\n            oldPlainTextEndIndex,\n            change: '',\n            // the part of the tag should be just deleted without processedChange update and change will be added after this tag\n            mentionTrigger\n          });\n          result += stringBefore + updatedContent.updatedHTML;\n        } else {\n          // no subtags\n          const startChangeDiff = startIndex - tag.plainTextBeginIndex - mentionTagLength;\n          result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length + startChangeDiff);\n          lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;\n        }\n        // proceed with the next calculations\n      } else if (startIndex < tag.plainTextBeginIndex && oldPlainTextEndIndex > closingTagInfo.plainTextEndIndex) {\n        // the change starts before  the tag and finishes after it\n        // tag should be removed, no matter if there are subtags\n        // no need to save anything between lastProcessedHTMLIndex and closeTagIdx + closeTagLength\n        lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;\n        // proceed with the next calculations\n      } else if (startIndex === tag.plainTextBeginIndex && oldPlainTextEndIndex > closingTagInfo.plainTextEndIndex) {\n        // the change starts in the tag and finishes after it\n        // tag should be removed, no matter if there are subtags\n        result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex);\n        // processedChange shouldn't be updated as it will be added after the tag\n        lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;\n        // proceed with the next calculations\n      } else if (startIndex < tag.plainTextBeginIndex && oldPlainTextEndIndex < closingTagInfo.plainTextEndIndex) {\n        // the change  starts before the tag and ends in a tag\n        if (isMentionTag) {\n          // mention tag\n          const updateMentionTagResult = handleMentionTagUpdate({\n            htmlText,\n            oldPlainText,\n            lastProcessedHTMLIndex,\n            processedChange: '',\n            // the part of mention should be just deleted without processedChange update\n            change,\n            tag,\n            closeTagIdx: closingTagInfo.closeTagIdx,\n            closeTagLength: closingTagInfo.closeTagLength,\n            plainTextEndIndex: closingTagInfo.plainTextEndIndex,\n            startIndex,\n            oldPlainTextEndIndex,\n            mentionTagLength\n          });\n          changeNewEndIndex = updateMentionTagResult.plainTextSelectionEndIndex;\n          result += updateMentionTagResult.result;\n          lastProcessedHTMLIndex = updateMentionTagResult.htmlIndex;\n        } else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {\n          // with subtags\n          const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length);\n          lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;\n          const updatedContent = updateHTML({\n            htmlText: tag.content,\n            oldPlainText,\n            tags: tag.subTags,\n            startIndex,\n            oldPlainTextEndIndex,\n            change: processedChange,\n            // processedChange should be equal '' and the part of the tag should be deleted as the change was handled before this tag\n            mentionTrigger\n          });\n          processedChange = '';\n          result += stringBefore + updatedContent.updatedHTML;\n        } else {\n          // no subtags\n          result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length) + processedChange;\n          processedChange = '';\n          // oldPlainTextEndIndex already includes mentionTag length\n          const endChangeDiff = getChangeDiff(oldPlainText, oldPlainTextEndIndex, closingTagInfo.plainTextEndIndex);\n          // as change may be before the end of the tag, we need to add the rest of the tag\n          lastProcessedHTMLIndex = closingTagInfo.closeTagIdx - endChangeDiff;\n        }\n        // the change is handled; exit\n        break;\n      }\n      lastProcessedPlainTextTagEndIndex = closingTagInfo.plainTextEndIndex;\n    }\n    if (i === tags.length - 1 && oldPlainTextEndIndex >= closingTagInfo.plainTextEndIndex) {\n      // the last tag should handle the end of the change if needed\n      // oldPlainTextEndIndex already includes mentionTag length\n      const endChangeDiff = getChangeDiff(oldPlainText, closingTagInfo.plainTextEndIndex, oldPlainTextEndIndex);\n      if (startIndex >= closingTagInfo.plainTextEndIndex) {\n        const startChangeDiff = getChangeDiff(oldPlainText, closingTagInfo.plainTextEndIndex, startIndex);\n        result += htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength + startChangeDiff) + processedChange;\n      } else {\n        result += htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength) + processedChange;\n      }\n      processedChange = '';\n      lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength + endChangeDiff;\n      // the change is handled; exit\n      // break is not required here as this is the last element but added for consistency\n      break;\n    }\n  }\n  if (lastProcessedHTMLIndex < htmlText.length) {\n    // add the rest of the html string\n    result += htmlText.substring(lastProcessedHTMLIndex);\n  }\n  return {\n    updatedHTML: result,\n    updatedSelectionIndex: changeNewEndIndex\n  };\n};\n\n/**\n * Props for finding strings diff indexes\n *\n * @private\n */\ntype DiffIndexesProps = {\n  // the old text\n  oldText: string;\n  // the new text\n  newText: string;\n  // the start of previous selection, should be a valid position in the input field\n  previousSelectionStart: number;\n  // the end of previous selection, should be a valid position in the input field\n  previousSelectionEnd: number;\n  // the start of current selection, should be a valid position in the input field\n  currentSelectionStart: number;\n  // the end of current selection, should be a valid position in the input field\n  currentSelectionEnd: number;\n};\n\n/**\n * Result of finding strings diff indexes function\n *\n * @private\n */\ntype DiffIndexesResult = {\n  changeStart: number;\n  oldChangeEnd: number;\n  newChangeEnd: number;\n};\n\n/**\n * Given the oldText and newText, find the start index, old end index and new end index for the changes\n *\n * @private\n * @param props - Props for finding stings diff indexes function.\n * @returns Indexes for change start and ends in new and old texts. The old and new end indexes are exclusive.\n */\nexport const findStringsDiffIndexes = (props: DiffIndexesProps): DiffIndexesResult => {\n  const {\n    oldText,\n    newText,\n    previousSelectionStart,\n    previousSelectionEnd,\n    currentSelectionStart,\n    currentSelectionEnd\n  } = props;\n  const newTextLength = newText.length;\n  const oldTextLength = oldText.length;\n  // let changeStart = 0;\n  let newChangeEnd = newTextLength;\n  let oldChangeEnd = oldTextLength;\n  const previousSelectionStartValue = previousSelectionStart > -1 ? previousSelectionStart : oldTextLength;\n  const previousSelectionEndValue = previousSelectionEnd > -1 ? previousSelectionEnd : oldTextLength;\n  const currentSelectionStartValue = currentSelectionStart > -1 ? currentSelectionStart : newTextLength;\n  const currentSelectionEndValue = currentSelectionEnd > -1 ? currentSelectionEnd : newTextLength;\n  const changeStart = Math.min(previousSelectionStartValue, previousSelectionEndValue, currentSelectionStartValue, currentSelectionEndValue, newTextLength, oldTextLength);\n  if (oldTextLength < newTextLength) {\n    //insert or replacement\n    if (oldTextLength === changeStart) {\n      // when change was at the end of string\n      // change is found\n      newChangeEnd = newTextLength;\n      oldChangeEnd = oldTextLength;\n    } else {\n      for (let i = 0; i < newTextLength && oldTextLength - i >= changeStart; i++) {\n        newChangeEnd = newTextLength - i - 1;\n        oldChangeEnd = oldTextLength - i - 1;\n        if (newText[newChangeEnd] !== oldText[oldChangeEnd]) {\n          // change is found\n          break;\n        }\n      }\n      // make indexes exclusive\n      newChangeEnd += 1;\n      oldChangeEnd += 1;\n    }\n  } else if (oldTextLength > newTextLength) {\n    //deletion or replacement\n    if (newTextLength === changeStart) {\n      // when change was at the end of string\n      // change is found\n      newChangeEnd = newTextLength;\n      oldChangeEnd = oldTextLength;\n    } else {\n      for (let i = 0; i < oldTextLength && newTextLength - i >= changeStart; i++) {\n        newChangeEnd = newTextLength - i - 1;\n        oldChangeEnd = oldTextLength - i - 1;\n        if (newText[newChangeEnd] !== oldText[oldChangeEnd]) {\n          // change is found\n          break;\n        }\n      }\n      // make indexes exclusive\n      newChangeEnd += 1;\n      oldChangeEnd += 1;\n    }\n  } else {\n    // replacement\n    for (let i = 0; i < oldTextLength && oldTextLength - i >= changeStart; i++) {\n      newChangeEnd = newTextLength - i - 1;\n      oldChangeEnd = oldTextLength - i - 1;\n      if (newText[newChangeEnd] !== oldText[oldChangeEnd]) {\n        // change is found\n        break;\n      }\n    }\n    // make indexes exclusive if they aren't equal to the length of the string\n    if (newChangeEnd !== newText.length) {\n      newChangeEnd += 1;\n    }\n    if (oldChangeEnd !== oldText.length) {\n      oldChangeEnd += 1;\n    }\n  }\n  return {\n    changeStart,\n    oldChangeEnd,\n    newChangeEnd\n  };\n};\n\n/**\n * Get the html string for the mention suggestion.\n *\n * @private\n * @param suggestion - The mention suggestion.\n * @param localeStrings - The locale strings.\n * @returns The html string for the mention suggestion.\n */\nexport const htmlStringForMentionSuggestion = (suggestion: Mention, localeStrings: ComponentStrings): string => {\n  const idHTML = ' id=\"' + suggestion.id + '\"';\n  const displayText = getDisplayNameForMentionSuggestion(suggestion, localeStrings);\n  return '<' + MSFT_MENTION_TAG + idHTML + '>' + displayText + '</' + MSFT_MENTION_TAG + '>';\n};\n\n/**\n * Get display name for the mention suggestion.\n *\n * @private\n *\n * @param suggestion - The mention suggestion.\n * @param localeStrings - The locale strings.\n * @returns The display name for the mention suggestion or display name placeholder if display name is empty.\n */\nexport const getDisplayNameForMentionSuggestion = (suggestion: Mention, localeStrings: ComponentStrings): string => {\n  const displayNamePlaceholder = localeStrings.participantItem.displayNamePlaceholder;\n  return suggestion.displayText !== '' ? suggestion.displayText : displayNamePlaceholder ?? '';\n};\n\n/**\n * Tag data for a HTML tag in the string\n *\n * @private\n */\nexport type TagData = {\n  tagType: string; // The type of tag (e.g. msft-mention)\n  openTagIndex: number; // Start of the tag relative to the parent content\n  openTagBody: string; // Complete open tag body\n  content?: string; // All content between the open and close tags\n  closingTagIndex?: number; // Start of the close tag relative to the parent content\n  subTags?: TagData[]; // Any child tags\n  plainTextBeginIndex?: number; // Absolute index of the open tag start should be in plain text\n  plainTextEndIndex?: number; // Absolute index of the close tag start should be in plain text\n};\n\ntype HtmlTagType = 'open' | 'close' | 'self-closing';\ntype HtmlTag = {\n  content: string;\n  startIdx: number;\n  type: HtmlTagType;\n};\n\n/**\n * Parse the text and return the tags and the plain text in one go\n * @private\n * @param text - The text to parse for HTML tags\n * @param trigger The trigger to show for the mention tag in plain text\n *\n * @returns An array of tags and the plain text representation\n */\nexport const textToTagParser = (text: string, trigger: string): {\n  tags: TagData[];\n  plainText: string;\n} => {\n  const tags: TagData[] = []; // Tags passed back to the caller\n  const tagParseStack: TagData[] = []; // Local stack to use while parsing\n\n  let plainTextRepresentation = '';\n  let parseIndex = 0;\n  while (parseIndex < text.length) {\n    const foundHtmlTag = findNextHtmlTag(text, parseIndex);\n    if (!foundHtmlTag) {\n      if (parseIndex !== 0) {\n        // Add the remaining text to the plain text representation\n        const newText = text.substring(parseIndex);\n        plainTextRepresentation += unEscapeHtmlCharacters(newText);\n      } else {\n        plainTextRepresentation = unEscapeHtmlCharacters(text);\n      }\n      break;\n    }\n    if (foundHtmlTag.type === 'open' || foundHtmlTag.type === 'self-closing') {\n      const nextTag = parseOpenTag(foundHtmlTag.content, foundHtmlTag.startIdx);\n      // Add the plain text between the last tag and this one found\n      plainTextRepresentation += unEscapeHtmlCharacters(text.substring(parseIndex, foundHtmlTag.startIdx));\n      nextTag.plainTextBeginIndex = plainTextRepresentation.length;\n      if (foundHtmlTag.type === 'open') {\n        tagParseStack.push(nextTag);\n      } else {\n        nextTag.content = '';\n        nextTag.plainTextBeginIndex = plainTextRepresentation.length;\n        nextTag.plainTextEndIndex = plainTextRepresentation.length;\n        addTag(nextTag, tagParseStack, tags);\n      }\n    }\n    if (foundHtmlTag.type === 'close') {\n      const currentOpenTag = tagParseStack.pop();\n      const closeTagType = foundHtmlTag.content.substring(2, foundHtmlTag.content.length - 1).toLowerCase();\n      if (currentOpenTag && currentOpenTag.tagType === closeTagType) {\n        // Tag startIdx is absolute to the text. This is updated later to be relative to the parent tag\n        currentOpenTag.content = text.substring(currentOpenTag.openTagIndex + currentOpenTag.openTagBody.length, foundHtmlTag.startIdx);\n\n        // Insert the plain text pieces for the sub tags\n        if (currentOpenTag.tagType === MSFT_MENTION_TAG) {\n          plainTextRepresentation = plainTextRepresentation.slice(0, currentOpenTag.plainTextBeginIndex) + trigger + plainTextRepresentation.slice(currentOpenTag.plainTextBeginIndex);\n        }\n        if (!currentOpenTag.subTags) {\n          plainTextRepresentation += unEscapeHtmlCharacters(currentOpenTag.content);\n        } else if (currentOpenTag.subTags.length > 0) {\n          // Add text after the last tag\n          const lastSubTag = currentOpenTag.subTags[currentOpenTag.subTags.length - 1];\n          const startOfRemainingText = (lastSubTag.closingTagIndex ?? lastSubTag.openTagIndex) + lastSubTag.tagType.length + 3;\n          const trailingText = currentOpenTag.content.substring(startOfRemainingText);\n          plainTextRepresentation += unEscapeHtmlCharacters(trailingText);\n        }\n        currentOpenTag.plainTextEndIndex = plainTextRepresentation.length;\n        addTag(currentOpenTag, tagParseStack, tags);\n      } else {\n        throw new Error('Unexpected close tag found. Got \"' + closeTagType + '\" but expected \"' + tagParseStack[tagParseStack.length - 1]?.tagType + '\"');\n      }\n    }\n\n    // Update parsing index; move past the end of the close tag\n    parseIndex = foundHtmlTag.startIdx + foundHtmlTag.content.length;\n  } // While parseIndex < text.length loop\n\n  return {\n    tags,\n    plainText: plainTextRepresentation\n  };\n};\nconst parseOpenTag = (tag: string, startIdx: number): TagData => {\n  const tagType = tag.substring(1, tag.length - 1).split(' ')[0].toLowerCase().replace('/', '');\n  return {\n    tagType,\n    openTagIndex: startIdx,\n    openTagBody: tag\n  };\n};\nconst findNextHtmlTag = (text: string, startIndex: number): HtmlTag | undefined => {\n  const tagStartIndex = text.indexOf('<', startIndex);\n  if (tagStartIndex === -1) {\n    // No more tags\n    return undefined;\n  }\n  const tagEndIndex = text.indexOf('>', tagStartIndex);\n  if (tagEndIndex === -1) {\n    // No close tag\n    return undefined;\n  }\n  const tag = text.substring(tagStartIndex, tagEndIndex + 1);\n  let type: HtmlTagType = 'open';\n  if (tag[1] === '/') {\n    type = 'close';\n  } else if (tag[tag.length - 2] === '/') {\n    type = 'self-closing';\n  }\n  return {\n    content: tag,\n    startIdx: tagStartIndex,\n    type\n  };\n};\nconst addTag = (tag: TagData, parseStack: TagData[], tags: TagData[]): void => {\n  // Add as sub-tag to the parent stack tag, if there is one\n  const parentTag = parseStack[parseStack.length - 1];\n  if (parentTag) {\n    // Adjust the open tag index to be relative to the parent tag\n    const parentContentStartIdx = parentTag.openTagIndex + parentTag.openTagBody.length;\n    const relativeIdx = tag.openTagIndex - parentContentStartIdx;\n    tag.openTagIndex = relativeIdx;\n  }\n  if (!tag.closingTagIndex) {\n    // If the tag is self-closing, the close tag is the same as the open tag\n    if (tag.openTagBody[tag.openTagBody.length - 2] === '/') {\n      tag.closingTagIndex = tag.openTagIndex;\n    } else {\n      // Otherwise, the close tag index is the open tag index + the open tag body + the content length\n      tag.closingTagIndex = tag.openTagIndex + tag.openTagBody.length + (tag.content ?? []).length;\n    }\n  }\n\n  // Put the tag where it belongs\n  if (!parentTag) {\n    tags.push(tag);\n  } else {\n    if (!parentTag.subTags) {\n      parentTag.subTags = [tag];\n    } else {\n      parentTag.subTags.push(tag);\n    }\n  }\n};\n\n// We should revisit this in the future when we support other text such as rich text editing.\nconst escapeHTMLChars = (text: string): string => {\n  const mentionRegex = new RegExp(`<${MSFT_MENTION_TAG}(.*?)>(.*?)</${MSFT_MENTION_TAG}>`, 'i');\n  if (!text.match(mentionRegex)) {\n    return text.replace(/&(?![A-Z]+;)/gi, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\n  }\n  return text;\n};\nconst getChangeDiff = (plainText: string, startIndex: number, endIndex: number): number => {\n  return endIndex - startIndex + getLengthDiffForEscapedHtmlChars(plainText, startIndex, endIndex);\n};\nconst getLengthDiffForEscapedHtmlChars = (text: string, startIndex: number, endIndex: number): number => {\n  const subText = text.substring(startIndex, endIndex);\n  const escapedAngleBracketCount = subText.match(/(<)|(>)/g)?.length || 0;\n  let escapedCharLength = escapedAngleBracketCount * ('&lt;'.length - '<'.length);\n  const escapedAmpersandCount = subText.match(/&/g)?.length || 0;\n  escapedCharLength += escapedAmpersandCount * ('&amp;'.length - '&'.length);\n  return escapedCharLength;\n};\nconst unEscapeHtmlCharacters = (text: string): string => {\n  return text.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');\n};"]}

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

@@ -14,6 +14,8 @@ export const UnsupportedBrowser = (props) => {
     return React.createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: Object.assign(Object.assign({}, unsupportedBrowserStringsTrampoline(locale)), strings) });
 };
 const unsupportedBrowserStringsTrampoline = (locale) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    return locale.strings.UnsupportedBrowser;
     return {
         primaryText: '',
         secondaryText: '',

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

@@ -1 +1 @@
-{"version":3,"file":"UnsupportedBrowser.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedBrowser.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AA4BlE;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;IAChF,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,mCAAmC,CAAC,MAAM,CAAC,GAC3C,OAAO,IACP,CAAC;AACR,CAAC,CAAC;AACF,MAAM,mCAAmC,GAAG,CAAC,MAAuB,EAA6B,EAAE;IACjG,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;KACrB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/**\n * Strings for UnsupportedBrowser component\n *\n * @beta\n */\nexport interface UnsupportedBrowserStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n}\n\n/**\n * props for {@link UnsupportedBrowser} UI\n *\n * @beta\n */\nexport interface UnsupportedBrowserProps {\n  /** Handler to perform an action when the help link is actioned */\n  onTroubleshootingClick?: () => void;\n  /** String overrides for the component */\n  strings?: UnsupportedBrowserStrings;\n}\n\n/**\n * UI to display to the user that the browser they are using is not supported by Azure Communications Calling service.\n *\n * @beta\n */\nexport const UnsupportedBrowser = (props: UnsupportedBrowserProps): JSX.Element => {\n  const {\n    onTroubleshootingClick,\n    strings\n  } = props;\n  const locale = useLocale();\n  return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n    ...unsupportedBrowserStringsTrampoline(locale),\n    ...strings\n  }} />;\n};\nconst unsupportedBrowserStringsTrampoline = (locale: ComponentLocale): UnsupportedBrowserStrings => {\n  return {\n    primaryText: '',\n    secondaryText: '',\n    moreHelpLinkText: ''\n  };\n};\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"UnsupportedBrowser.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedBrowser.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AA4BlE;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;IAChF,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,mCAAmC,CAAC,MAAM,CAAC,GAC3C,OAAO,IACP,CAAC;AACR,CAAC,CAAC;AACF,MAAM,mCAAmC,GAAG,CAAC,MAAuB,EAA6B,EAAE;IACjG,sDAAsD;IACtD,OAAO,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC;IACzC,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;KACrB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/**\n * Strings for UnsupportedBrowser component\n *\n * @beta\n */\nexport interface UnsupportedBrowserStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n}\n\n/**\n * props for {@link UnsupportedBrowser} UI\n *\n * @beta\n */\nexport interface UnsupportedBrowserProps {\n  /** Handler to perform an action when the help link is actioned */\n  onTroubleshootingClick?: () => void;\n  /** String overrides for the component */\n  strings?: UnsupportedBrowserStrings;\n}\n\n/**\n * UI to display to the user that the browser they are using is not supported by Azure Communications Calling service.\n *\n * @beta\n */\nexport const UnsupportedBrowser = (props: UnsupportedBrowserProps): JSX.Element => {\n  const {\n    onTroubleshootingClick,\n    strings\n  } = props;\n  const locale = useLocale();\n  return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n    ...unsupportedBrowserStringsTrampoline(locale),\n    ...strings\n  }} />;\n};\nconst unsupportedBrowserStringsTrampoline = (locale: ComponentLocale): UnsupportedBrowserStrings => {\n  /* @conditional-compile-remove(unsupported-browser) */\n  return locale.strings.UnsupportedBrowser;\n  return {\n    primaryText: '',\n    secondaryText: '',\n    moreHelpLinkText: ''\n  };\n};\"../../../acs-ui-common/src\""]}

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

@@ -15,6 +15,8 @@ export const UnsupportedBrowserVersion = (props) => {
     return React.createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: Object.assign(Object.assign({}, unsupportedBrowserVersionStringsTrampoline(locale)), strings), onContinueAnywayClick: onContinueAnywayClick });
 };
 const unsupportedBrowserVersionStringsTrampoline = (locale) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    return locale.strings.UnsupportedBrowserVersion;
     return {
         primaryText: '',
         secondaryText: '',

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

@@ -1 +1 @@
-{"version":3,"file":"UnsupportedBrowserVersion.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedBrowserVersion.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAgClE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACP,qBAAqB,EACtB,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,0CAA0C,CAAC,MAAM,CAAC,GAClD,OAAO,GACT,qBAAqB,EAAE,qBAAqB,GAAI,CAAC;AACtD,CAAC,CAAC;AACF,MAAM,0CAA0C,GAAG,CAAC,MAAuB,EAAoC,EAAE;IAC/G,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;QACpB,wBAAwB,EAAE,EAAE;KAC7B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/**\n * Strings for UnsupportedBrowser component\n *\n * @beta\n */\nexport interface UnsupportedBrowserVersionStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n  /** String for continue without updating button */\n  continueAnywayButtonText?: string;\n}\n\n/**\n * props for {@link UnsupportedBrowserVersion} UI\n *\n * @beta\n */\nexport interface UnsupportedBrowserVersionProps {\n  /** Handler to perform an action when the help link is actioned */\n  onTroubleshootingClick?: () => void;\n  /** String overrides for the component */\n  strings?: UnsupportedBrowserVersionStrings;\n  /** Handler to allow user to continue into the call */\n  onContinueAnywayClick?: () => void;\n}\n\n/**\n * UI to display to the user that the browser version they are using is out of date\n * and not supported by Azure Communications Calling service.\n *\n * @beta\n */\nexport const UnsupportedBrowserVersion = (props: UnsupportedBrowserVersionProps): JSX.Element => {\n  const {\n    onTroubleshootingClick,\n    strings,\n    onContinueAnywayClick\n  } = props;\n  const locale = useLocale();\n  return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n    ...unsupportedBrowserVersionStringsTrampoline(locale),\n    ...strings\n  }} onContinueAnywayClick={onContinueAnywayClick} />;\n};\nconst unsupportedBrowserVersionStringsTrampoline = (locale: ComponentLocale): UnsupportedBrowserVersionStrings => {\n  return {\n    primaryText: '',\n    secondaryText: '',\n    moreHelpLinkText: '',\n    continueAnywayButtonText: ''\n  };\n};\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"UnsupportedBrowserVersion.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedBrowserVersion.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAgClE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACP,qBAAqB,EACtB,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,0CAA0C,CAAC,MAAM,CAAC,GAClD,OAAO,GACT,qBAAqB,EAAE,qBAAqB,GAAI,CAAC;AACtD,CAAC,CAAC;AACF,MAAM,0CAA0C,GAAG,CAAC,MAAuB,EAAoC,EAAE;IAC/G,sDAAsD;IACtD,OAAO,MAAM,CAAC,OAAO,CAAC,yBAAyB,CAAC;IAChD,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;QACpB,wBAAwB,EAAE,EAAE;KAC7B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/**\n * Strings for UnsupportedBrowser component\n *\n * @beta\n */\nexport interface UnsupportedBrowserVersionStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n  /** String for continue without updating button */\n  continueAnywayButtonText?: string;\n}\n\n/**\n * props for {@link UnsupportedBrowserVersion} UI\n *\n * @beta\n */\nexport interface UnsupportedBrowserVersionProps {\n  /** Handler to perform an action when the help link is actioned */\n  onTroubleshootingClick?: () => void;\n  /** String overrides for the component */\n  strings?: UnsupportedBrowserVersionStrings;\n  /** Handler to allow user to continue into the call */\n  onContinueAnywayClick?: () => void;\n}\n\n/**\n * UI to display to the user that the browser version they are using is out of date\n * and not supported by Azure Communications Calling service.\n *\n * @beta\n */\nexport const UnsupportedBrowserVersion = (props: UnsupportedBrowserVersionProps): JSX.Element => {\n  const {\n    onTroubleshootingClick,\n    strings,\n    onContinueAnywayClick\n  } = props;\n  const locale = useLocale();\n  return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n    ...unsupportedBrowserVersionStringsTrampoline(locale),\n    ...strings\n  }} onContinueAnywayClick={onContinueAnywayClick} />;\n};\nconst unsupportedBrowserVersionStringsTrampoline = (locale: ComponentLocale): UnsupportedBrowserVersionStrings => {\n  /* @conditional-compile-remove(unsupported-browser) */\n  return locale.strings.UnsupportedBrowserVersion;\n  return {\n    primaryText: '',\n    secondaryText: '',\n    moreHelpLinkText: '',\n    continueAnywayButtonText: ''\n  };\n};\"../../../acs-ui-common/src\""]}

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

@@ -1,12 +1,36 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+/* @conditional-compile-remove(unsupported-browser) */
+import { DefaultButton, Icon, Link, Stack, Text } from '@fluentui/react';
 import React from 'react';
+/* @conditional-compile-remove(unsupported-browser) */
+import { useTheme } from '../theming';
+/* @conditional-compile-remove(unsupported-browser) */
+import { containerStyles, continueAnywayButtonStyles, linkTextStyles, mainTextStyles, secondaryTextStyles, testContainerStyles } from './styles/UnsupportedEnvironment.styles';
+/* @conditional-compile-remove(unsupported-browser) */
+const UnsupportedEnvironmentContainer = (props) => {
+    const { onTroubleshootingClick, strings, onContinueAnywayClick } = props;
+    const theme = useTheme();
+    return React.createElement(Stack, { styles: containerStyles, tokens: {
+            childrenGap: '2rem'
+        } },
+        React.createElement(Icon, { iconName: "UnsupportedEnvironmentWarning", "data-ui-id": "unsupported-environment-icon" }),
+        React.createElement(Stack, { styles: testContainerStyles, tokens: {
+                childrenGap: '0.25rem'
+            } },
+            React.createElement(Text, { styles: mainTextStyles }, strings === null || strings === void 0 ? void 0 : strings.primaryText),
+            React.createElement(Text, { styles: secondaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.secondaryText)),
+        onTroubleshootingClick && React.createElement(Link, { styles: linkTextStyles, onClick: onTroubleshootingClick, "data-ui-id": "unsupported-environment-link" }, strings === null || strings === void 0 ? void 0 : strings.moreHelpLinkText),
+        onContinueAnywayClick && React.createElement(DefaultButton, { "data-ui-id": "allowUnsupportedBrowserButton", styles: continueAnywayButtonStyles(theme), onClick: onContinueAnywayClick }, strings === null || strings === void 0 ? void 0 : strings.continueAnywayButtonText));
+};
 /**
  * UI to display to the user that the environment they are using is not supported by calling application.
  *
  * @private
  */
 export const UnsupportedEnvironment = (props) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    return React.createElement(UnsupportedEnvironmentContainer, Object.assign({}, props));
     return React.createElement(React.Fragment, null);
 };
 //# sourceMappingURL=UnsupportedEnvironment.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"UnsupportedEnvironment.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedEnvironment.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAmC1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React from 'react';\n/**\n * @private\n */\nexport interface UnsupportedEnvironmentStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n  /** String for continue anyway button */\n  continueAnywayButtonText?: string;\n}\n\n/**\n * props for {@link UnsupportedEnvironment} UI\n *\n * @private\n */\nexport interface UnsupportedEnvironmentProps {\n  /**\n   * Handler to perform a action when the help link is actioned\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * String overrides for the component\n   */\n  strings?: UnsupportedEnvironmentStrings;\n  /**\n   * CallBack for the continue anyay button. Use this as a mechanism to allow users into\n   * a call with a unsupported browser version.\n   */\n  onContinueAnywayClick?: () => void;\n}\n/**\n * UI to display to the user that the environment they are using is not supported by calling application.\n *\n * @private\n */\nexport const UnsupportedEnvironment = (props: UnsupportedEnvironmentProps): JSX.Element => {\n  return <></>;\n};"]}
+{"version":3,"file":"UnsupportedEnvironment.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedEnvironment.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,sDAAsD;AACtD,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGzE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,sDAAsD;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,sDAAsD;AACtD,OAAO,EAAE,eAAe,EAAE,0BAA0B,EAAE,cAAc,EAAE,cAAc,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAqC/K,sDAAsD;AACtD,MAAM,+BAA+B,GAAG,CAAC,KAAkC,EAAe,EAAE;IAC1F,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACP,qBAAqB,EACtB,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,eAAe,EAAE,MAAM,EAAE;YAC7C,WAAW,EAAE,MAAM;SACpB;QACG,oBAAC,IAAI,IAAC,QAAQ,EAAC,+BAA+B,gBAAY,8BAA8B,GAAQ;QAChG,oBAAC,KAAK,IAAC,MAAM,EAAE,mBAAmB,EAAE,MAAM,EAAE;gBAC5C,WAAW,EAAE,SAAS;aACvB;YACG,oBAAC,IAAI,IAAC,MAAM,EAAE,cAAc,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAQ;YAC3D,oBAAC,IAAI,IAAC,MAAM,EAAE,mBAAmB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAQ,CAC5D;QACP,sBAAsB,IAAI,oBAAC,IAAI,IAAC,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,sBAAsB,gBAAa,8BAA8B,IAC9H,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,gBAAgB,CACrB;QACR,qBAAqB,IAAI,oBAAC,aAAa,kBAAY,+BAA+B,EAAC,MAAM,EAAE,0BAA0B,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,qBAAqB,IACxJ,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,wBAAwB,CACpB,CACZ,CAAC;AACb,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,sDAAsD;IACtD,OAAO,oBAAC,+BAA+B,oBAAK,KAAK,EAAI,CAAC;IACtD,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(unsupported-browser) */\nimport { DefaultButton, Icon, Link, Stack, Text } from '@fluentui/react';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { useTheme } from '../theming';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { containerStyles, continueAnywayButtonStyles, linkTextStyles, mainTextStyles, secondaryTextStyles, testContainerStyles } from './styles/UnsupportedEnvironment.styles';\n\n/**\n * @private\n */\nexport interface UnsupportedEnvironmentStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n  /** String for continue anyway button */\n  continueAnywayButtonText?: string;\n}\n\n/**\n * props for {@link UnsupportedEnvironment} UI\n *\n * @private\n */\nexport interface UnsupportedEnvironmentProps {\n  /**\n   * Handler to perform a action when the help link is actioned\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * String overrides for the component\n   */\n  strings?: UnsupportedEnvironmentStrings;\n  /**\n   * CallBack for the continue anyay button. Use this as a mechanism to allow users into\n   * a call with a unsupported browser version.\n   */\n  onContinueAnywayClick?: () => void;\n}\n\n/* @conditional-compile-remove(unsupported-browser) */\nconst UnsupportedEnvironmentContainer = (props: UnsupportedEnvironmentProps): JSX.Element => {\n  const {\n    onTroubleshootingClick,\n    strings,\n    onContinueAnywayClick\n  } = props;\n  const theme = useTheme();\n  return <Stack styles={containerStyles} tokens={{\n    childrenGap: '2rem'\n  }}>\n      <Icon iconName=\"UnsupportedEnvironmentWarning\" data-ui-id=\"unsupported-environment-icon\"></Icon>\n      <Stack styles={testContainerStyles} tokens={{\n      childrenGap: '0.25rem'\n    }}>\n        <Text styles={mainTextStyles}>{strings?.primaryText}</Text>\n        <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>\n      </Stack>\n      {onTroubleshootingClick && <Link styles={linkTextStyles} onClick={onTroubleshootingClick} data-ui-id=\"unsupported-environment-link\">\n          {strings?.moreHelpLinkText}\n        </Link>}\n      {onContinueAnywayClick && <DefaultButton data-ui-id=\"allowUnsupportedBrowserButton\" styles={continueAnywayButtonStyles(theme)} onClick={onContinueAnywayClick}>\n          {strings?.continueAnywayButtonText}\n        </DefaultButton>}\n    </Stack>;\n};\n\n/**\n * UI to display to the user that the environment they are using is not supported by calling application.\n *\n * @private\n */\nexport const UnsupportedEnvironment = (props: UnsupportedEnvironmentProps): JSX.Element => {\n  /* @conditional-compile-remove(unsupported-browser) */\n  return <UnsupportedEnvironmentContainer {...props} />;\n  return <></>;\n};\"../../../acs-ui-common/src\""]}

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

@@ -14,6 +14,8 @@ export const UnsupportedOperatingSystem = (props) => {
     return React.createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: Object.assign(Object.assign({}, unsupportedOperatingSystemStringsTrampoline(locale)), strings) });
 };
 const unsupportedOperatingSystemStringsTrampoline = (locale) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    return locale.strings.UnsupportedOperatingSystem;
     return {
         primaryText: '',
         secondaryText: '',

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

@@ -1 +1 @@
-{"version":3,"file":"UnsupportedOperatingSystem.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedOperatingSystem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AA4BlE;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAsC,EAAe,EAAE;IAChG,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,2CAA2C,CAAC,MAAM,CAAC,GACnD,OAAO,IACP,CAAC;AACR,CAAC,CAAC;AACF,MAAM,2CAA2C,GAAG,CAAC,MAAuB,EAAqC,EAAE;IACjH,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;KACrB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/**\n * Strings for UnsupportedBrowser component\n *\n * @beta\n */\nexport interface UnsupportedOperatingSystemStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n}\n\n/**\n * Props for {@link UnsupportedOperatingSystem} UI\n *\n * @beta\n */\nexport interface UnsupportedOperatingSystemProps {\n  /** Handler to perform a action when the help link is actioned */\n  onTroubleshootingClick?: () => void;\n  /** String overrides for the component */\n  strings?: UnsupportedOperatingSystemStrings;\n}\n\n/**\n * UI to display to the user that the operating system they are using is not supported by Azure Communications Calling service.\n *\n * @beta\n */\nexport const UnsupportedOperatingSystem = (props: UnsupportedOperatingSystemProps): JSX.Element => {\n  const {\n    onTroubleshootingClick,\n    strings\n  } = props;\n  const locale = useLocale();\n  return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n    ...unsupportedOperatingSystemStringsTrampoline(locale),\n    ...strings\n  }} />;\n};\nconst unsupportedOperatingSystemStringsTrampoline = (locale: ComponentLocale): UnsupportedOperatingSystemStrings => {\n  return {\n    primaryText: '',\n    secondaryText: '',\n    moreHelpLinkText: ''\n  };\n};\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"UnsupportedOperatingSystem.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedOperatingSystem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AA4BlE;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAsC,EAAe,EAAE;IAChG,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,2CAA2C,CAAC,MAAM,CAAC,GACnD,OAAO,IACP,CAAC;AACR,CAAC,CAAC;AACF,MAAM,2CAA2C,GAAG,CAAC,MAAuB,EAAqC,EAAE;IACjH,sDAAsD;IACtD,OAAO,MAAM,CAAC,OAAO,CAAC,0BAA0B,CAAC;IACjD,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;KACrB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/**\n * Strings for UnsupportedBrowser component\n *\n * @beta\n */\nexport interface UnsupportedOperatingSystemStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n}\n\n/**\n * Props for {@link UnsupportedOperatingSystem} UI\n *\n * @beta\n */\nexport interface UnsupportedOperatingSystemProps {\n  /** Handler to perform a action when the help link is actioned */\n  onTroubleshootingClick?: () => void;\n  /** String overrides for the component */\n  strings?: UnsupportedOperatingSystemStrings;\n}\n\n/**\n * UI to display to the user that the operating system they are using is not supported by Azure Communications Calling service.\n *\n * @beta\n */\nexport const UnsupportedOperatingSystem = (props: UnsupportedOperatingSystemProps): JSX.Element => {\n  const {\n    onTroubleshootingClick,\n    strings\n  } = props;\n  const locale = useLocale();\n  return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n    ...unsupportedOperatingSystemStringsTrampoline(locale),\n    ...strings\n  }} />;\n};\nconst unsupportedOperatingSystemStringsTrampoline = (locale: ComponentLocale): UnsupportedOperatingSystemStrings => {\n  /* @conditional-compile-remove(unsupported-browser) */\n  return locale.strings.UnsupportedOperatingSystem;\n  return {\n    primaryText: '',\n    secondaryText: '',\n    moreHelpLinkText: ''\n  };\n};\"../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { FocusZone, Label, mergeStyles, Stack } from '@fluentui/react';
+import { Label, mergeStyles, Stack } from '@fluentui/react';
 import { useWarnings } from '@fluentui/react-hooks';
 import React from 'react';
 import { chunk } from '../utils';
@@ -47,8 +47,12 @@ export const _VideoBackgroundEffectsPicker = (props) => {
             return React.createElement(Stack, { className: mergeStyles((_a = props.styles) === null || _a === void 0 ? void 0 : _a.rowRoot), wrap: props.itemsPerRow === 'wrap', horizontal: true, key: rowIndex, tokens: {
                     childrenGap: '0.5rem'
                 }, "data-ui-id": "video-effects-picker-row" },
-                options.map(option => React.createElement(FocusZone, { key: option.itemKey, shouldFocusOnMount: option.itemKey.includes('none') },
-                    React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey })))),
+                options.map((option, i) => {
+                    if (i === 0 && rowIndex === 0) {
+                        return React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey, focusOnMount: true }));
+                    }
+                    return React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey }));
+                }),
                 fillCount > 0 && rowIndex === optionsByRow.length - 1 && Array.from({
                     length: fillCount
                 }).map((_, index) => React.createElement(Stack, { key: index, styles: hiddenVideoEffectsItemContainerStyles, "data-ui-id": "video-effects-hidden-item" })));

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { FocusZone, IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\nimport { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoBackgroundEffectsPicker}\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerProps {\n  /**\n   * The options to display in the picker.\n   */\n  options: _VideoBackgroundEffectChoiceOption[];\n\n  /**\n   * The key of the current selected Video Background Effect.\n   * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.\n   */\n  selectedEffectKey?: string;\n\n  /**\n   * Callback to invoke when a Video Background Effect is selected.\n   * @param effectKey - The key of the Video Background Effect that was selected.\n   */\n  onChange?: (effectKey: string) => void;\n\n  /**\n   * The key of the Video Background Effect that is initially selected.\n   * Only provide this if the picker is an uncontrolled component;\n   * otherwise, use the `selectedEffectKey` property.\n   */\n  defaultSelectedEffectKey?: string;\n\n  /**\n   * The label to display for the picker.\n   */\n  label?: string;\n\n  /**\n   * The number of items to display per row.\n   * @default 3\n   */\n  itemsPerRow?: 'wrap' | number;\n\n  /**\n   * Styles for the picker.\n   */\n  styles?: _VideoBackgroundEffectsPickerStyles;\n}\n\n/**\n * Option for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;\n\n/**\n * Styles for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerStyles {\n  /**\n   * Styles for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Styles for the label.\n   */\n  label?: IStyle;\n\n  /**\n   * Styles for the root of each row element.\n   */\n  rowRoot?: IStyle;\n}\n\n/**\n * Picker for choosing a Video Background Effect.\n *\n * @remarks\n * This functions similar to a radio group of buttons, where the user can select one of the options.\n *\n * @internal\n */\nexport const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPickerProps): JSX.Element => {\n  const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState<string | undefined>(props.defaultSelectedEffectKey);\n\n  // Warn the developer if they use the component in an incorrect controlled way.\n  useWarnings({\n    name: 'VideoBackgroundEffectsPicker',\n    props,\n    controlledUsage: {\n      onChangeProp: 'onChange',\n      valueProp: 'selectedEffectKey',\n      defaultValueProp: 'defaultSelectedEffectKey'\n    }\n  });\n  const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;\n  const setSelectedEffect = (selectedEffectKey: string): void => {\n    setComponentControlledSelectedEffectKey(selectedEffectKey);\n    props.onChange?.(selectedEffectKey);\n  };\n  const convertedOptions: _VideoEffectsItemProps[] = props.options.map(option => ({\n    isSelected: option.itemKey === selectedEffect,\n    onSelect: () => setSelectedEffect(option.itemKey),\n    ...option\n  }));\n  const itemsPerRow = props.itemsPerRow ?? 3;\n  const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);\n\n  // If the final row is not full, fill it with hidden items to ensure layout.\n  const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - optionsByRow[optionsByRow.length - 1].length;\n  return <Stack tokens={{\n    childrenGap: '0.5rem'\n  }}>\n      <Label className={mergeStyles(props.styles?.label)}>{props.label}</Label>\n      {optionsByRow.map((options, rowIndex) => <Stack className={mergeStyles(props.styles?.rowRoot)} wrap={props.itemsPerRow === 'wrap'} horizontal key={rowIndex} tokens={{\n      childrenGap: '0.5rem'\n    }} data-ui-id=\"video-effects-picker-row\">\n          {options.map(option => <FocusZone key={option.itemKey} shouldFocusOnMount={option.itemKey.includes('none')}>\n              <_VideoEffectsItem {...option} itemKey={option.itemKey} />\n            </FocusZone>)}\n          {fillCount > 0 && rowIndex === optionsByRow.length - 1 && Array.from({\n        length: fillCount\n      }).map((_, index) => <Stack key={index} styles={hiddenVideoEffectsItemContainerStyles} data-ui-id=\"video-effects-hidden-item\" />)}\n        </Stack>)}\n    </Stack>;\n};"]}
+{"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\nimport { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoBackgroundEffectsPicker}\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerProps {\n  /**\n   * The options to display in the picker.\n   */\n  options: _VideoBackgroundEffectChoiceOption[];\n\n  /**\n   * The key of the current selected Video Background Effect.\n   * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.\n   */\n  selectedEffectKey?: string;\n\n  /**\n   * Callback to invoke when a Video Background Effect is selected.\n   * @param effectKey - The key of the Video Background Effect that was selected.\n   */\n  onChange?: (effectKey: string) => void;\n\n  /**\n   * The key of the Video Background Effect that is initially selected.\n   * Only provide this if the picker is an uncontrolled component;\n   * otherwise, use the `selectedEffectKey` property.\n   */\n  defaultSelectedEffectKey?: string;\n\n  /**\n   * The label to display for the picker.\n   */\n  label?: string;\n\n  /**\n   * The number of items to display per row.\n   * @default 3\n   */\n  itemsPerRow?: 'wrap' | number;\n\n  /**\n   * Styles for the picker.\n   */\n  styles?: _VideoBackgroundEffectsPickerStyles;\n}\n\n/**\n * Option for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;\n\n/**\n * Styles for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerStyles {\n  /**\n   * Styles for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Styles for the label.\n   */\n  label?: IStyle;\n\n  /**\n   * Styles for the root of each row element.\n   */\n  rowRoot?: IStyle;\n}\n\n/**\n * Picker for choosing a Video Background Effect.\n *\n * @remarks\n * This functions similar to a radio group of buttons, where the user can select one of the options.\n *\n * @internal\n */\nexport const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPickerProps): JSX.Element => {\n  const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState<string | undefined>(props.defaultSelectedEffectKey);\n\n  // Warn the developer if they use the component in an incorrect controlled way.\n  useWarnings({\n    name: 'VideoBackgroundEffectsPicker',\n    props,\n    controlledUsage: {\n      onChangeProp: 'onChange',\n      valueProp: 'selectedEffectKey',\n      defaultValueProp: 'defaultSelectedEffectKey'\n    }\n  });\n  const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;\n  const setSelectedEffect = (selectedEffectKey: string): void => {\n    setComponentControlledSelectedEffectKey(selectedEffectKey);\n    props.onChange?.(selectedEffectKey);\n  };\n  const convertedOptions: _VideoEffectsItemProps[] = props.options.map(option => ({\n    isSelected: option.itemKey === selectedEffect,\n    onSelect: () => setSelectedEffect(option.itemKey),\n    ...option\n  }));\n  const itemsPerRow = props.itemsPerRow ?? 3;\n  const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);\n\n  // If the final row is not full, fill it with hidden items to ensure layout.\n  const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - optionsByRow[optionsByRow.length - 1].length;\n  return <Stack tokens={{\n    childrenGap: '0.5rem'\n  }}>\n      <Label className={mergeStyles(props.styles?.label)}>{props.label}</Label>\n      {optionsByRow.map((options, rowIndex) => <Stack className={mergeStyles(props.styles?.rowRoot)} wrap={props.itemsPerRow === 'wrap'} horizontal key={rowIndex} tokens={{\n      childrenGap: '0.5rem'\n    }} data-ui-id=\"video-effects-picker-row\">\n          {options.map((option, i) => {\n        if (i === 0 && rowIndex === 0) {\n          return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} focusOnMount={true} />;\n        }\n        return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} />;\n      })}\n          {fillCount > 0 && rowIndex === optionsByRow.length - 1 && Array.from({\n        length: fillCount\n      }).map((_, index) => <Stack key={index} styles={hiddenVideoEffectsItemContainerStyles} data-ui-id=\"video-effects-hidden-item\" />)}\n        </Stack>)}\n    </Stack>;\n};"]}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.d.ts

@@ -59,6 +59,10 @@ export interface _VideoEffectsItemProps {
      * Styles for the Video effects item.
      */
     styles?: _VideoEffectsItemStyles;
+    /**
+     * Should focus on mounting of the picker item
+     */
+    focusOnMount?: boolean;
 }
 /**
  * Styles for {@link _VideoEffectsItem}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { Icon, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';
-import React, { useCallback } from 'react';
+import { DefaultButton, Icon, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';
+import React, { useCallback, useEffect } from 'react';
 import { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';
 /**
  * A component for displaying a Video Background Effect Option.
@@ -20,20 +20,30 @@ export const _VideoEffectsItem = (props) => {
         disabled,
         backgroundImage
     }), [backgroundImage, disabled, isSelected, theme]);
+    const componentRef = React.createRef();
+    useEffect(() => {
+        if (props.focusOnMount && componentRef.current) {
+            componentRef.current.focus();
+        }
+    }, [componentRef, props.focusOnMount]);
     return React.createElement(TooltipHost, Object.assign({}, props.tooltipProps),
-        React.createElement(Stack, { key: props.itemKey, className: mergeStyles((_d = props.styles) === null || _d === void 0 ? void 0 : _d.root), verticalAlign: "center", horizontalAlign: "center", styles: containerStyles, "data-ui-id": `video-effects-item`, onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, onKeyDown: disabled ? undefined : e => {
-                var _a;
-                if (e.key === 'Enter' || e.key === ' ') {
-                    (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey);
-                }
-            }, tabIndex: props.disabled ? -1 : 0, "aria-label": (_e = props.ariaLabel) !== null && _e !== void 0 ? _e : props.itemKey, "aria-disabled": props.disabled, role: "button" },
-            props.iconProps && React.createElement(Stack.Item, { styles: {
-                    root: (_f = props.styles) === null || _f === void 0 ? void 0 : _f.iconContainer
+        React.createElement(Stack, { key: props.itemKey, className: mergeStyles((_d = props.styles) === null || _d === void 0 ? void 0 : _d.root), verticalAlign: "center", horizontalAlign: "center", "data-ui-id": `video-effects-item`, "aria-label": (_e = props.ariaLabel) !== null && _e !== void 0 ? _e : props.itemKey, "aria-disabled": props.disabled },
+            React.createElement(DefaultButton, { styles: containerStyles(), onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, componentRef: componentRef, autoFocus: props.focusOnMount, onKeyDown: disabled ? undefined : e => {
+                    var _a;
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey);
+                    }
                 } },
-                React.createElement(Icon, Object.assign({}, props.iconProps))),
-            props.title && React.createElement(Stack.Item, { styles: {
-                    root: (_g = props.styles) === null || _g === void 0 ? void 0 : _g.textContainer
-                } },
-                React.createElement(Text, { variant: "small" }, props.title))));
+                React.createElement(Stack, { horizontalAlign: 'center', tokens: {
+                        childrenGap: '0.15rem'
+                    } },
+                    props.iconProps && React.createElement(Stack.Item, { styles: {
+                            root: (_f = props.styles) === null || _f === void 0 ? void 0 : _f.iconContainer
+                        } },
+                        React.createElement(Icon, Object.assign({}, props.iconProps))),
+                    props.title && React.createElement(Stack.Item, { styles: {
+                            root: (_g = props.styles) === null || _g === void 0 ? void 0 : _g.textContainer
+                        } },
+                        React.createElement(Text, { variant: "small" }, props.title))))));
 };
 //# sourceMappingURL=VideoEffectsItem.js.map

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAyC,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC/H,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC;AA8F5E;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,KAAK,CAAC;IAC7C,MAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK,CAAC;IACzC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAAC;IACnD,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,+BAA+B,CAAC;QACxE,KAAK;QACL,UAAU;QACV,QAAQ;QACR,eAAe;KAChB,CAAC,EAAE,CAAC,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IACpD,OAAO,oBAAC,WAAW,oBAAK,KAAK,CAAC,YAAY;QACtC,oBAAC,KAAK,IAAC,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,EAAE,aAAa,EAAC,QAAQ,EAAC,eAAe,EAAC,QAAQ,EAAC,MAAM,EAAE,eAAe,gBAAc,oBAAoB,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,QAAQ,+CAAd,KAAK,EAAY,KAAK,CAAC,OAAO,CAAC,CAAA,EAAA,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;;gBAC/R,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;oBACtC,MAAA,KAAK,CAAC,QAAQ,+CAAd,KAAK,EAAY,KAAK,CAAC,OAAO,CAAC,CAAC;iBACjC;YACH,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAc,MAAA,KAAK,CAAC,SAAS,mCAAI,KAAK,CAAC,OAAO,mBAAiB,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAC,QAAQ;YAC3H,KAAK,CAAC,SAAS,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE;oBACxC,IAAI,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa;iBAClC;gBACK,oBAAC,IAAI,oBAAK,KAAK,CAAC,SAAS,EAAI,CAClB;YACd,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE;oBACpC,IAAI,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa;iBAClC;gBACK,oBAAC,IAAI,IAAC,OAAO,EAAC,OAAO,IAAE,KAAK,CAAC,KAAK,CAAQ,CAC/B,CACT,CACI,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, IIconProps, IStyle, ITooltipHostProps, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemProps {\n  /**\n   * The key of the Video Background Effect.\n   * This is used to identify the Video Background Effect and is returned in the onChange event.\n   * It must be unique within the set of options.\n   * @example 'blur'\n   */\n  itemKey: string;\n\n  /**\n   * The text to display for the Video effects item.\n   */\n  title?: string;\n\n  /**\n   * Whether the Video effects item is currently in the selected state.\n   * @default false\n   */\n  isSelected?: boolean;\n\n  /**\n   * Callback to invoke when the Video effects item is selected.\n   */\n  onSelect?: (key: string) => void;\n\n  /**\n   * Whether the Video effects item is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * The icon to display for the Video effects item.\n   * @default undefined (no icon)\n   */\n  iconProps?: IIconProps;\n\n  /**\n   * Properties to have a Tooltip display when hovering over the Video effects item.\n   * @default undefined (no tooltip)\n   */\n  tooltipProps?: ITooltipHostProps;\n\n  /**\n   * Aria label for the Video effects item.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background to display for the Video effects item.\n   * @default undefined (no background image)\n   */\n  backgroundProps?: {\n    /**\n     * The URL of the background image.\n     */\n    url: string;\n  };\n\n  /**\n   * Styles for the Video effects item.\n   */\n  styles?: _VideoEffectsItemStyles;\n}\n\n/**\n * Styles for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemStyles {\n  /**\n   * Styles for the container of the Video effects item.\n   */\n  root: IStyle;\n\n  /**\n   * Styles for the container of the icon of the Video effects item.\n   */\n  iconContainer: IStyle;\n\n  /**\n   * Styles for the text container of the Video effects item.\n   */\n  textContainer: IStyle;\n}\n\n/**\n * A component for displaying a Video Background Effect Option.\n *\n * @internal\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n  const theme = useTheme();\n  const isSelected = props.isSelected ?? false;\n  const disabled = props.disabled ?? false;\n  const backgroundImage = props.backgroundProps?.url;\n  const containerStyles = useCallback(() => videoEffectsItemContainerStyles({\n    theme,\n    isSelected,\n    disabled,\n    backgroundImage\n  }), [backgroundImage, disabled, isSelected, theme]);\n  return <TooltipHost {...props.tooltipProps}>\n      <Stack key={props.itemKey} className={mergeStyles(props.styles?.root)} verticalAlign=\"center\" horizontalAlign=\"center\" styles={containerStyles} data-ui-id={`video-effects-item`} onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)} onKeyDown={disabled ? undefined : e => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        props.onSelect?.(props.itemKey);\n      }\n    }} tabIndex={props.disabled ? -1 : 0} aria-label={props.ariaLabel ?? props.itemKey} aria-disabled={props.disabled} role=\"button\">\n        {props.iconProps && <Stack.Item styles={{\n        root: props.styles?.iconContainer\n      }}>\n            <Icon {...props.iconProps} />\n          </Stack.Item>}\n        {props.title && <Stack.Item styles={{\n        root: props.styles?.textContainer\n      }}>\n            <Text variant=\"small\">{props.title}</Text>\n          </Stack.Item>}\n      </Stack>\n    </TooltipHost>;\n};"]}
+{"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, IButton, Icon, IIconProps, IStyle, ITooltipHostProps, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';\nimport React, { useCallback, useEffect } from 'react';\nimport { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemProps {\n  /**\n   * The key of the Video Background Effect.\n   * This is used to identify the Video Background Effect and is returned in the onChange event.\n   * It must be unique within the set of options.\n   * @example 'blur'\n   */\n  itemKey: string;\n\n  /**\n   * The text to display for the Video effects item.\n   */\n  title?: string;\n\n  /**\n   * Whether the Video effects item is currently in the selected state.\n   * @default false\n   */\n  isSelected?: boolean;\n\n  /**\n   * Callback to invoke when the Video effects item is selected.\n   */\n  onSelect?: (key: string) => void;\n\n  /**\n   * Whether the Video effects item is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * The icon to display for the Video effects item.\n   * @default undefined (no icon)\n   */\n  iconProps?: IIconProps;\n\n  /**\n   * Properties to have a Tooltip display when hovering over the Video effects item.\n   * @default undefined (no tooltip)\n   */\n  tooltipProps?: ITooltipHostProps;\n\n  /**\n   * Aria label for the Video effects item.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background to display for the Video effects item.\n   * @default undefined (no background image)\n   */\n  backgroundProps?: {\n    /**\n     * The URL of the background image.\n     */\n    url: string;\n  };\n\n  /**\n   * Styles for the Video effects item.\n   */\n  styles?: _VideoEffectsItemStyles;\n\n  /**\n   * Should focus on mounting of the picker item\n   */\n  focusOnMount?: boolean;\n}\n\n/**\n * Styles for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemStyles {\n  /**\n   * Styles for the container of the Video effects item.\n   */\n  root: IStyle;\n\n  /**\n   * Styles for the container of the icon of the Video effects item.\n   */\n  iconContainer: IStyle;\n\n  /**\n   * Styles for the text container of the Video effects item.\n   */\n  textContainer: IStyle;\n}\n\n/**\n * A component for displaying a Video Background Effect Option.\n *\n * @internal\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n  const theme = useTheme();\n  const isSelected = props.isSelected ?? false;\n  const disabled = props.disabled ?? false;\n  const backgroundImage = props.backgroundProps?.url;\n  const containerStyles = useCallback(() => videoEffectsItemContainerStyles({\n    theme,\n    isSelected,\n    disabled,\n    backgroundImage\n  }), [backgroundImage, disabled, isSelected, theme]);\n  const componentRef = React.createRef<IButton>();\n  useEffect(() => {\n    if (props.focusOnMount && componentRef.current) {\n      componentRef.current.focus();\n    }\n  }, [componentRef, props.focusOnMount]);\n  return <TooltipHost {...props.tooltipProps}>\n      <Stack key={props.itemKey} className={mergeStyles(props.styles?.root)} verticalAlign=\"center\" horizontalAlign=\"center\" data-ui-id={`video-effects-item`} aria-label={props.ariaLabel ?? props.itemKey} aria-disabled={props.disabled}>\n        <DefaultButton styles={containerStyles()} onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)} componentRef={componentRef} autoFocus={props.focusOnMount} onKeyDown={disabled ? undefined : e => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          props.onSelect?.(props.itemKey);\n        }\n      }}>\n          <Stack horizontalAlign={'center'} tokens={{\n          childrenGap: '0.15rem'\n        }}>\n            {props.iconProps && <Stack.Item styles={{\n            root: props.styles?.iconContainer\n          }}>\n                <Icon {...props.iconProps} />\n              </Stack.Item>}\n            {props.title && <Stack.Item styles={{\n            root: props.styles?.textContainer\n          }}>\n                <Text variant=\"small\">{props.title}</Text>\n              </Stack.Item>}\n          </Stack>\n        </DefaultButton>\n      </Stack>\n    </TooltipHost>;\n};"]}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.styles.d.ts

@@ -1,4 +1,4 @@
-import { IStackStyles, ITheme } from '@fluentui/react';
+import { IButtonStyles, IStackStyles, ITheme } from '@fluentui/react';
 /** @private */
 export declare const hiddenVideoEffectsItemContainerStyles: IStackStyles;
 /** @private */
@@ -7,5 +7,5 @@ export declare const videoEffectsItemContainerStyles: (args: {
     isSelected: boolean;
     disabled: boolean;
     backgroundImage?: string;
-}) => IStackStyles;
+}) => IButtonStyles;
 //# sourceMappingURL=VideoEffectsItem.styles.d.ts.map

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.styles.js

@@ -26,18 +26,15 @@ export const videoEffectsItemContainerStyles = (args) => {
             color: args.theme.palette.neutralPrimary,
             cursor: args.disabled ? 'default' : 'pointer',
             height: VideoEffectsItemContainerHeight,
-            position: 'relative',
-            // Used for absolute positioning of :after
             width: VideoEffectsItemContainerWidth,
+            border: args.isSelected ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}` : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,
             // Use :after to display a border element. This is used to prevent the background image
             // resizing when the border thichkness is changed. We also want the border to be inside
             // the frame of the container, i.e. we want it to expand inwards and not outwards when
             // border thickness changes from hover/selection.
             ':after': {
                 content: '""',
-                position: 'absolute',
                 boxSizing: 'border-box',
-                border: args.isSelected ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}` : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,
                 height: '100%',
                 width: '100%',
                 borderRadius: '0.25rem'
@@ -47,6 +44,11 @@ export const videoEffectsItemContainerStyles = (args) => {
                     border: args.disabled && !args.isSelected ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}` : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
                 }
             }
+        },
+        rootFocused: {
+            ':after': {
+                outline: `2px solid ${args.theme.palette.neutralQuaternaryAlt}`
+            }
         }
     };
 };

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoEffectsItem.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoEffectsItem.styles.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,MAAM,+BAA+B,GAAG,UAAU,CAAC;AACnD,MAAM,8BAA8B,GAAG,SAAS,CAAC;AACjD,MAAM,mCAAmC,GAAG,KAAK,CAAC;AAElD,eAAe;AACf,MAAM,CAAC,MAAM,qCAAqC,GAAiB;IACjE,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,+BAA+B;QACvC,KAAK,EAAE,8BAA8B;QACrC,MAAM,EAAE,mCAAmC;KAC5C;CACF,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,IAK/C,EAAgB,EAAE;IACjB,MAAM,sBAAsB,GAAG,KAAK,CAAC;IACrC,MAAM,qBAAqB,GAAG,KAAK,CAAC;IACpC,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS;YAC/E,eAAe,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,SAAS;YAClF,kBAAkB,EAAE,QAAQ;YAC5B,cAAc,EAAE,OAAO;YACvB,YAAY,EAAE,SAAS;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;YACxC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAC7C,MAAM,EAAE,+BAA+B;YACvC,QAAQ,EAAE,UAAU;YACpB,0CAA0C;YAC1C,KAAK,EAAE,8BAA8B;YACrC,uFAAuF;YACvF,uFAAuF;YACvF,sFAAsF;YACtF,iDAAiD;YACjD,QAAQ,EAAE;gBACR,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,UAAU;gBACpB,SAAS,EAAE,YAAY;gBACvB,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;gBAC5K,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,MAAM;gBACb,YAAY,EAAE,SAAS;aACxB;YACD,QAAQ,EAAE;gBACR,QAAQ,EAAE;oBACR,MAAM,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE,CAAC,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;iBAC/L;aACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackStyles, ITheme } from '@fluentui/react';\nconst VideoEffectsItemContainerHeight = '3.375rem';\nconst VideoEffectsItemContainerWidth = '4.83rem';\nconst VideoEffectsItemContainerBorderSize = '2px';\n\n/** @private */\nexport const hiddenVideoEffectsItemContainerStyles: IStackStyles = {\n  root: {\n    visibility: 'hidden',\n    height: VideoEffectsItemContainerHeight,\n    width: VideoEffectsItemContainerWidth,\n    border: VideoEffectsItemContainerBorderSize\n  }\n};\n\n/** @private */\nexport const videoEffectsItemContainerStyles = (args: {\n  theme: ITheme;\n  isSelected: boolean;\n  disabled: boolean;\n  backgroundImage?: string;\n}): IStackStyles => {\n  const borderDefaultThickness = '1px';\n  const borderActiveThickness = '2px';\n  return {\n    root: {\n      background: args.disabled ? args.theme.palette.neutralQuaternaryAlt : undefined,\n      backgroundImage: args.backgroundImage ? `url(${args.backgroundImage})` : undefined,\n      backgroundPosition: 'center',\n      backgroundSize: 'cover',\n      borderRadius: '0.25rem',\n      color: args.theme.palette.neutralPrimary,\n      cursor: args.disabled ? 'default' : 'pointer',\n      height: VideoEffectsItemContainerHeight,\n      position: 'relative',\n      // Used for absolute positioning of :after\n      width: VideoEffectsItemContainerWidth,\n      // Use :after to display a border element. This is used to prevent the background image\n      // resizing when the border thichkness is changed. We also want the border to be inside\n      // the frame of the container, i.e. we want it to expand inwards and not outwards when\n      // border thickness changes from hover/selection.\n      ':after': {\n        content: '\"\"',\n        position: 'absolute',\n        boxSizing: 'border-box',\n        border: args.isSelected ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}` : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,\n        height: '100%',\n        width: '100%',\n        borderRadius: '0.25rem'\n      },\n      ':hover': {\n        ':after': {\n          border: args.disabled && !args.isSelected ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}` : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`\n        }\n      }\n    }\n  };\n};"]}
+{"version":3,"file":"VideoEffectsItem.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoEffectsItem.styles.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,MAAM,+BAA+B,GAAG,UAAU,CAAC;AACnD,MAAM,8BAA8B,GAAG,SAAS,CAAC;AACjD,MAAM,mCAAmC,GAAG,KAAK,CAAC;AAElD,eAAe;AACf,MAAM,CAAC,MAAM,qCAAqC,GAAiB;IACjE,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,+BAA+B;QACvC,KAAK,EAAE,8BAA8B;QACrC,MAAM,EAAE,mCAAmC;KAC5C;CACF,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,IAK/C,EAAiB,EAAE;IAClB,MAAM,sBAAsB,GAAG,KAAK,CAAC;IACrC,MAAM,qBAAqB,GAAG,KAAK,CAAC;IACpC,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS;YAC/E,eAAe,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,SAAS;YAClF,kBAAkB,EAAE,QAAQ;YAC5B,cAAc,EAAE,OAAO;YACvB,YAAY,EAAE,SAAS;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;YACxC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAC7C,MAAM,EAAE,+BAA+B;YACvC,KAAK,EAAE,8BAA8B;YACrC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;YAC5K,uFAAuF;YACvF,uFAAuF;YACvF,sFAAsF;YACtF,iDAAiD;YACjD,QAAQ,EAAE;gBACR,OAAO,EAAE,IAAI;gBACb,SAAS,EAAE,YAAY;gBACvB,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,MAAM;gBACb,YAAY,EAAE,SAAS;aACxB;YACD,QAAQ,EAAE;gBACR,QAAQ,EAAE;oBACR,MAAM,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE,CAAC,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;iBAC/L;aACF;SACF;QACD,WAAW,EAAE;YACX,QAAQ,EAAE;gBACR,OAAO,EAAE,aAAa,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;aAChE;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IStackStyles, ITheme } from '@fluentui/react';\nconst VideoEffectsItemContainerHeight = '3.375rem';\nconst VideoEffectsItemContainerWidth = '4.83rem';\nconst VideoEffectsItemContainerBorderSize = '2px';\n\n/** @private */\nexport const hiddenVideoEffectsItemContainerStyles: IStackStyles = {\n  root: {\n    visibility: 'hidden',\n    height: VideoEffectsItemContainerHeight,\n    width: VideoEffectsItemContainerWidth,\n    border: VideoEffectsItemContainerBorderSize\n  }\n};\n\n/** @private */\nexport const videoEffectsItemContainerStyles = (args: {\n  theme: ITheme;\n  isSelected: boolean;\n  disabled: boolean;\n  backgroundImage?: string;\n}): IButtonStyles => {\n  const borderDefaultThickness = '1px';\n  const borderActiveThickness = '2px';\n  return {\n    root: {\n      background: args.disabled ? args.theme.palette.neutralQuaternaryAlt : undefined,\n      backgroundImage: args.backgroundImage ? `url(${args.backgroundImage})` : undefined,\n      backgroundPosition: 'center',\n      backgroundSize: 'cover',\n      borderRadius: '0.25rem',\n      color: args.theme.palette.neutralPrimary,\n      cursor: args.disabled ? 'default' : 'pointer',\n      height: VideoEffectsItemContainerHeight,\n      width: VideoEffectsItemContainerWidth,\n      border: args.isSelected ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}` : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,\n      // Use :after to display a border element. This is used to prevent the background image\n      // resizing when the border thichkness is changed. We also want the border to be inside\n      // the frame of the container, i.e. we want it to expand inwards and not outwards when\n      // border thickness changes from hover/selection.\n      ':after': {\n        content: '\"\"',\n        boxSizing: 'border-box',\n        height: '100%',\n        width: '100%',\n        borderRadius: '0.25rem'\n      },\n      ':hover': {\n        ':after': {\n          border: args.disabled && !args.isSelected ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}` : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`\n        }\n      }\n    },\n    rootFocused: {\n      ':after': {\n        outline: `2px solid ${args.theme.palette.neutralQuaternaryAlt}`\n      }\n    }\n  };\n};"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { LayoutProps } from './Layout';
+import { LocalVideoTileSize } from '../VideoGallery';
 /**
  * Props for {@link FloatingLocalVideoLayout}.
  *
@@ -14,6 +15,10 @@ export interface FloatingLocalVideoLayoutProps extends LayoutProps {
      * Height of parent element
      */
     parentHeight?: number;
+    /**
+     * Local video tile mode
+     */
+    localVideoTileSize?: LocalVideoTileSize;
 }
 /**
  * FloatingLocalVideoLayout displays remote participants and a screen sharing component in

package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js

@@ -24,7 +24,8 @@ import { OverflowGallery } from './OverflowGallery';
  */
 export const FloatingLocalVideoLayout = (props) => {
     const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight, 
-    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'horizontalBottom', pinnedParticipantUserIds = [] } = props;
+    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'horizontalBottom', pinnedParticipantUserIds = [], 
+    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize } = props;
     const theme = useTheme();
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
     /* @conditional-compile-remove(vertical-gallery) */
@@ -64,15 +65,19 @@ export const FloatingLocalVideoLayout = (props) => {
     });
     const layerHostId = useId('layerhost');
     const localVideoSizeRem = useMemo(() => {
-        if (isNarrow) {
+        if (isNarrow || /*@conditional-compile-remove(click-to-call) */ localVideoTileSize === '9:16') {
             return SMALL_FLOATING_MODAL_SIZE_REM;
         }
         /* @conditional-compile-remove(vertical-gallery) */
         if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'verticalRight') {
             return isNarrow ? SMALL_FLOATING_MODAL_SIZE_REM : isShort ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;
         }
+        /*@conditional-compile-remove(click-to-call) */
+        if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'horizontalBottom') {
+            return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;
+        }
         return LARGE_FLOATING_MODAL_SIZE_REM;
-    }, [overflowGalleryTiles.length, isNarrow, screenShareComponent, /* @conditional-compile-remove(vertical-gallery) */ isShort, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition]);
+    }, [overflowGalleryTiles.length, isNarrow, screenShareComponent, /* @conditional-compile-remove(vertical-gallery) */ isShort, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition, /* @conditional-compile-remove(click-to-call) */ localVideoTileSize]);
     const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo || screenShareComponent && localVideoComponent ?
         // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
         showCameraSwitcherInLocalPreview ? React.createElement(Stack, { className: mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {