@azure/communication-react 1.20.0-alpha-202410080015 → 1.20.0-alpha-202410100016

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/README.md +2 -2
  2. package/dist/dist-cjs/communication-react/{ChatMessageComponentAsRichTextEditBox-BwIa2hTH.js → ChatMessageComponentAsRichTextEditBox-Dk_okMwX.js} +2 -2
  3. package/dist/dist-cjs/communication-react/{ChatMessageComponentAsRichTextEditBox-BwIa2hTH.js.map → ChatMessageComponentAsRichTextEditBox-Dk_okMwX.js.map} +1 -1
  4. package/dist/dist-cjs/communication-react/{RichTextSendBoxWrapper-CMAkkxJl.js → RichTextSendBoxWrapper-C36s6eLH.js} +2 -2
  5. package/dist/dist-cjs/communication-react/{RichTextSendBoxWrapper-CMAkkxJl.js.map → RichTextSendBoxWrapper-C36s6eLH.js.map} +1 -1
  6. package/dist/dist-cjs/communication-react/{index-Bj4O6YVq.js → index-C548hWR1.js} +202 -181
  7. package/dist/dist-cjs/communication-react/index-C548hWR1.js.map +1 -0
  8. package/dist/dist-cjs/communication-react/index.js +1 -1
  9. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
  10. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
  11. package/dist/dist-esm/calling-component-bindings/src/baseSelectors.js +0 -1
  12. package/dist/dist-esm/calling-component-bindings/src/baseSelectors.js.map +1 -1
  13. package/dist/dist-esm/calling-stateful-client/src/CallClientState.js.map +1 -1
  14. package/dist/dist-esm/calling-stateful-client/src/CallContext.js +0 -3
  15. package/dist/dist-esm/calling-stateful-client/src/CallContext.js.map +1 -1
  16. package/dist/dist-esm/calling-stateful-client/src/CallDeclarativeCommon.js +0 -2
  17. package/dist/dist-esm/calling-stateful-client/src/CallDeclarativeCommon.js.map +1 -1
  18. package/dist/dist-esm/calling-stateful-client/src/CaptionsSubscriber.js +0 -7
  19. package/dist/dist-esm/calling-stateful-client/src/CaptionsSubscriber.js.map +1 -1
  20. package/dist/dist-esm/calling-stateful-client/src/Converter.js +0 -3
  21. package/dist/dist-esm/calling-stateful-client/src/Converter.js.map +1 -1
  22. package/dist/dist-esm/react-components/src/components/Attachment/AttachmentCard.js +3 -2
  23. package/dist/dist-esm/react-components/src/components/Attachment/AttachmentCard.js.map +1 -1
  24. package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js +6 -3
  25. package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js.map +1 -1
  26. package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.js +6 -4
  27. package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.js.map +1 -1
  28. package/dist/dist-esm/react-components/src/components/GridLayout.js +3 -0
  29. package/dist/dist-esm/react-components/src/components/GridLayout.js.map +1 -1
  30. package/dist/dist-esm/react-components/src/components/HorizontalGallery.js +4 -5
  31. package/dist/dist-esm/react-components/src/components/HorizontalGallery.js.map +1 -1
  32. package/dist/dist-esm/react-components/src/components/LocalVideoCameraButton.js +3 -0
  33. package/dist/dist-esm/react-components/src/components/LocalVideoCameraButton.js.map +1 -1
  34. package/dist/dist-esm/react-components/src/components/MeetingConferencePhoneInfo.js +2 -1
  35. package/dist/dist-esm/react-components/src/components/MeetingConferencePhoneInfo.js.map +1 -1
  36. package/dist/dist-esm/react-components/src/components/MessageThread.js +3 -3
  37. package/dist/dist-esm/react-components/src/components/MessageThread.js.map +1 -1
  38. package/dist/dist-esm/react-components/src/components/ModalClone/ModalClone.js +2 -1
  39. package/dist/dist-esm/react-components/src/components/ModalClone/ModalClone.js.map +1 -1
  40. package/dist/dist-esm/react-components/src/components/ParticipantItem.js +1 -1
  41. package/dist/dist-esm/react-components/src/components/ParticipantItem.js.map +1 -1
  42. package/dist/dist-esm/react-components/src/components/ReactionButton.js +27 -35
  43. package/dist/dist-esm/react-components/src/components/ReactionButton.js.map +1 -1
  44. package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextEditor.js +9 -3
  45. package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextEditor.js.map +1 -1
  46. package/dist/dist-esm/react-components/src/components/TextFieldWithMention/TextFieldWithMention.js +1 -1
  47. package/dist/dist-esm/react-components/src/components/TextFieldWithMention/TextFieldWithMention.js.map +1 -1
  48. package/dist/dist-esm/react-components/src/components/TextFieldWithMention/mentionTagUtils.js +10 -11
  49. package/dist/dist-esm/react-components/src/components/TextFieldWithMention/mentionTagUtils.js.map +1 -1
  50. package/dist/dist-esm/react-components/src/components/VerticalGallery.js +2 -1
  51. package/dist/dist-esm/react-components/src/components/VerticalGallery.js.map +1 -1
  52. package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js +3 -3
  53. package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js.map +1 -1
  54. package/dist/dist-esm/react-components/src/components/VideoGallery/RemoteContentShareReactionOverlay.js +5 -4
  55. package/dist/dist-esm/react-components/src/components/VideoGallery/RemoteContentShareReactionOverlay.js.map +1 -1
  56. package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.js +15 -18
  57. package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.js.map +1 -1
  58. package/dist/dist-esm/react-components/src/components/VideoTile.js +3 -0
  59. package/dist/dist-esm/react-components/src/components/VideoTile.js.map +1 -1
  60. package/dist/dist-esm/react-components/src/components/styles/ReactionButton.styles.d.ts +13 -6
  61. package/dist/dist-esm/react-components/src/components/styles/ReactionButton.styles.js +47 -19
  62. package/dist/dist-esm/react-components/src/components/styles/ReactionButton.styles.js.map +1 -1
  63. package/dist/dist-esm/react-components/src/components/styles/ReactionOverlay.style.d.ts +0 -6
  64. package/dist/dist-esm/react-components/src/components/styles/ReactionOverlay.style.js +6 -41
  65. package/dist/dist-esm/react-components/src/components/styles/ReactionOverlay.style.js.map +1 -1
  66. package/dist/dist-esm/react-components/src/components/utils/RichTextEditorUtils.js +4 -1
  67. package/dist/dist-esm/react-components/src/components/utils/RichTextEditorUtils.js.map +1 -1
  68. package/dist/dist-esm/react-components/src/components/utils/RichTextTableUtils.js +3 -0
  69. package/dist/dist-esm/react-components/src/components/utils/RichTextTableUtils.js.map +1 -1
  70. package/dist/dist-esm/react-components/src/components/utils/responsive.js +6 -0
  71. package/dist/dist-esm/react-components/src/components/utils/responsive.js.map +1 -1
  72. package/dist/dist-esm/react-components/src/gallery/dominantSpeaker.js.map +1 -1
  73. package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js +0 -12
  74. package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js.map +1 -1
  75. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js +16 -22
  76. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js.map +1 -1
  77. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js +9 -2
  78. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js.map +1 -1
  79. package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/baseSelectors.js +0 -1
  80. package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/baseSelectors.js.map +1 -1
  81. package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.js +1 -2
  82. package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.js.map +1 -1
  83. package/dist/dist-esm/react-composites/src/composites/common/Drawer/MoreDrawer.js +1 -3
  84. package/dist/dist-esm/react-composites/src/composites/common/Drawer/MoreDrawer.js.map +1 -1
  85. package/dist/dist-esm/react-composites/src/composites/common/types/CommonCallControlOptions.js.map +1 -1
  86. package/package.json +1 -1
  87. package/dist/dist-cjs/communication-react/index-Bj4O6YVq.js.map +0 -1
@@ -188,7 +188,7 @@ function getDefaultExportFromCjs (x) {
188
188
  // Copyright (c) Microsoft Corporation.
189
189
  // Licensed under the MIT License.
190
190
  // GENERATED FILE. DO NOT EDIT MANUALLY.
191
- var telemetryVersion = '1.20.0-alpha-202410080015';
191
+ var telemetryVersion = '1.20.0-alpha-202410100016';
192
192
 
193
193
 
194
194
  var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -2202,7 +2202,6 @@ function convertSdkCallToDeclarativeCall(call) {
2202
2202
  currentSpokenLanguage: '',
2203
2203
  isCaptionsFeatureActive: false,
2204
2204
  startCaptionsInProgress: false,
2205
- /* @conditional-compile-remove(acs-close-captions) */
2206
2205
  captionsKind: _isTeamsCall(call) ? 'TeamsCaptions' : 'Captions'
2207
2206
  },
2208
2207
  transfer: {
@@ -2257,7 +2256,6 @@ function convertFromSDKToDeclarativeVideoStreamRendererView(view) {
2257
2256
  function convertFromTeamsSDKToCaptionInfoState(caption) {
2258
2257
  return Object.assign({}, caption);
2259
2258
  }
2260
- /* @conditional-compile-remove(acs-close-captions) */
2261
2259
  /**
2262
2260
  * @private
2263
2261
  */
@@ -3312,7 +3310,6 @@ let CallContext$2 = class CallContext {
3312
3310
  }
3313
3311
  });
3314
3312
  }
3315
- /* @conditional-compile-remove(acs-close-captions) */
3316
3313
  addCaption(callId, caption) {
3317
3314
  this.modifyState((draft) => {
3318
3315
  const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -3321,7 +3318,6 @@ let CallContext$2 = class CallContext {
3321
3318
  }
3322
3319
  });
3323
3320
  }
3324
- /* @conditional-compile-remove(acs-close-captions) */
3325
3321
  setCaptionsKind(callId, kind) {
3326
3322
  this.modifyState((draft) => {
3327
3323
  const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -3540,7 +3536,6 @@ class TeamsCaptionsSubscriber {
3540
3536
  this.subscribe();
3541
3537
  }
3542
3538
  }
3543
- /* @conditional-compile-remove(acs-close-captions) */
3544
3539
  /**
3545
3540
  * @private
3546
3541
  */
@@ -3582,18 +3577,14 @@ class CaptionsSubscriber {
3582
3577
  class CaptionsFeatureSubscriber {
3583
3578
  constructor(callIdRef, context, captions) {
3584
3579
  this.subscribe = () => {
3585
- /* @conditional-compile-remove(acs-close-captions) */
3586
3580
  this._captions.on('CaptionsKindChanged', this.isCaptionsKindChanged);
3587
3581
  };
3588
3582
  this.unsubscribe = () => {
3589
3583
  var _a, _b;
3590
- /* @conditional-compile-remove(acs-close-captions) */
3591
3584
  this._captions.off('CaptionsKindChanged', this.isCaptionsKindChanged);
3592
3585
  (_a = this._TeamsCaptionsSubscriber) === null || _a === void 0 ? void 0 : _a.unsubscribe();
3593
- /* @conditional-compile-remove(acs-close-captions) */
3594
3586
  (_b = this._CaptionsSubscriber) === null || _b === void 0 ? void 0 : _b.unsubscribe();
3595
3587
  };
3596
- /* @conditional-compile-remove(acs-close-captions) */
3597
3588
  this.isCaptionsKindChanged = () => {
3598
3589
  var _a;
3599
3590
  this._context.setCaptionsKind(this._callIdRef.callId, this._captions.captions.kind);
@@ -3606,13 +3597,11 @@ class CaptionsFeatureSubscriber {
3606
3597
  this._callIdRef = callIdRef;
3607
3598
  this._context = context;
3608
3599
  this._captions = captions;
3609
- /* @conditional-compile-remove(acs-close-captions) */
3610
3600
  this._context.setCaptionsKind(this._callIdRef.callId, this._captions.captions.kind);
3611
3601
  if (this._captions.captions.kind === 'TeamsCaptions') {
3612
3602
  this._TeamsCaptionsSubscriber = new TeamsCaptionsSubscriber(this._callIdRef, this._context, this._captions.captions);
3613
3603
  }
3614
3604
  else {
3615
- /* @conditional-compile-remove(acs-close-captions) */
3616
3605
  this._CaptionsSubscriber = new CaptionsSubscriber(this._callIdRef, this._context, this._captions.captions);
3617
3606
  }
3618
3607
  this.subscribe();
@@ -5606,7 +5595,6 @@ class ProxyCallCommon {
5606
5595
  if (args[0] === communicationCalling.Features.Captions) {
5607
5596
  const captionsFeature = target.feature(communicationCalling.Features.Captions);
5608
5597
  let proxyFeature;
5609
- /* @conditional-compile-remove(acs-close-captions) */
5610
5598
  if (captionsFeature.captions.kind === 'Captions') {
5611
5599
  proxyFeature = new ProxyCaptions(this._context, target);
5612
5600
  return {
@@ -5701,7 +5689,6 @@ class ProxyTeamsCaptions {
5701
5689
  }
5702
5690
  }
5703
5691
  }
5704
- /* @conditional-compile-remove(acs-close-captions) */
5705
5692
  /**
5706
5693
  * @private
5707
5694
  */
@@ -7261,6 +7248,9 @@ const GridLayout = (props) => {
7261
7248
  const [currentHeight, setCurrentHeight] = React.useState(0);
7262
7249
  const containerRef = React.useRef(null);
7263
7250
  const observer = React.useRef(new ResizeObserver((entries) => {
7251
+ if (!entries[0]) {
7252
+ return;
7253
+ }
7264
7254
  const { width, height } = entries[0].contentRect;
7265
7255
  setCurrentWidth(width);
7266
7256
  setCurrentHeight(height);
@@ -8267,7 +8257,7 @@ const updateHTML = (props) => {
8267
8257
  let changeNewEndIndex;
8268
8258
  for (let i = 0; i < tags.length; i++) {
8269
8259
  const tag = tags[i];
8270
- if (tag.plainTextBeginIndex === undefined) {
8260
+ if ((tag === null || tag === void 0 ? void 0 : tag.plainTextBeginIndex) === undefined) {
8271
8261
  continue;
8272
8262
  }
8273
8263
  // all plain text indexes includes trigger length for the mention that shouldn't be included in
@@ -8690,7 +8680,7 @@ const getDisplayNameForMentionSuggestion = (suggestion, localeStrings) => {
8690
8680
  * @returns An array of tags and the plain text representation
8691
8681
  */
8692
8682
  const textToTagParser = (text, trigger) => {
8693
- var _a, _b;
8683
+ var _a, _b, _c;
8694
8684
  const tags = []; // Tags passed back to the caller
8695
8685
  const tagParseStack = []; // Local stack to use while parsing
8696
8686
  let plainTextRepresentation = '';
@@ -8736,13 +8726,13 @@ const textToTagParser = (text, trigger) => {
8736
8726
  trigger +
8737
8727
  plainTextRepresentation.slice(currentOpenTag.plainTextBeginIndex);
8738
8728
  }
8729
+ const lastSubTag = (_a = currentOpenTag.subTags) === null || _a === void 0 ? void 0 : _a[currentOpenTag.subTags.length - 1];
8739
8730
  if (!currentOpenTag.subTags) {
8740
8731
  plainTextRepresentation += unEscapeHtmlCharacters(currentOpenTag.content);
8741
8732
  }
8742
- else if (currentOpenTag.subTags.length > 0) {
8733
+ else if (lastSubTag) {
8743
8734
  // Add text after the last tag
8744
- const lastSubTag = currentOpenTag.subTags[currentOpenTag.subTags.length - 1];
8745
- const startOfRemainingText = ((_a = lastSubTag.closingTagIndex) !== null && _a !== void 0 ? _a : lastSubTag.openTagIndex) + lastSubTag.tagType.length + 3;
8735
+ const startOfRemainingText = ((_b = lastSubTag === null || lastSubTag === void 0 ? void 0 : lastSubTag.closingTagIndex) !== null && _b !== void 0 ? _b : lastSubTag.openTagIndex) + lastSubTag.tagType.length + 3;
8746
8736
  const trailingText = currentOpenTag.content.substring(startOfRemainingText);
8747
8737
  plainTextRepresentation += unEscapeHtmlCharacters(trailingText);
8748
8738
  }
@@ -8753,7 +8743,7 @@ const textToTagParser = (text, trigger) => {
8753
8743
  throw new Error('Unexpected close tag found. Got "' +
8754
8744
  closeTagType +
8755
8745
  '" but expected "' +
8756
- ((_b = tagParseStack[tagParseStack.length - 1]) === null || _b === void 0 ? void 0 : _b.tagType) +
8746
+ ((_c = tagParseStack[tagParseStack.length - 1]) === null || _c === void 0 ? void 0 : _c.tagType) +
8757
8747
  '"');
8758
8748
  }
8759
8749
  }
@@ -8763,11 +8753,10 @@ const textToTagParser = (text, trigger) => {
8763
8753
  return { tags, plainText: plainTextRepresentation };
8764
8754
  };
8765
8755
  const parseOpenTag = (tag, startIdx) => {
8766
- const tagType = tag
8767
- .substring(1, tag.length - 1)
8768
- .split(' ')[0]
8769
- .toLowerCase()
8770
- .replace('/', '');
8756
+ var _a;
8757
+ let tagType = tag.substring(1, tag.length - 1);
8758
+ tagType = (_a = tagType.split(' ')[0]) !== null && _a !== void 0 ? _a : tagType;
8759
+ tagType = tagType.toLowerCase().replace('/', '');
8771
8760
  return {
8772
8761
  tagType,
8773
8762
  openTagIndex: startIdx,
@@ -9572,7 +9561,7 @@ const TextFieldWithMention = (props) => {
9572
9561
  return undefined;
9573
9562
  }
9574
9563
  const currentMention = mentionSuggestions[activeSuggestionIndex !== null && activeSuggestionIndex !== void 0 ? activeSuggestionIndex : 0];
9575
- return (currentMention === null || currentMention === void 0 ? void 0 : currentMention.displayText.length) > 0
9564
+ return currentMention && (currentMention === null || currentMention === void 0 ? void 0 : currentMention.displayText.length) > 0
9576
9565
  ? currentMention === null || currentMention === void 0 ? void 0 : currentMention.displayText
9577
9566
  : localeStrings.participantItem.displayNamePlaceholder;
9578
9567
  }, [activeSuggestionIndex, mentionSuggestions, localeStrings.participantItem.displayNamePlaceholder]);
@@ -10060,13 +10049,14 @@ const _AttachmentCard = (props) => {
10060
10049
  };
10061
10050
  const MappedMenuItems = (menuActions, attachment, handleOnClickError) => {
10062
10051
  const localeStrings = useLocaleAttachmentCardStringsTrampoline();
10063
- if (menuActions.length === 0) {
10052
+ if (!menuActions[0]) {
10064
10053
  return React.createElement(React.Fragment, null);
10065
10054
  }
10066
10055
  return menuActions.length === 1 ? (React.createElement(react.TooltipHost, { content: menuActions[0].name },
10067
10056
  React.createElement(reactComponents.ToolbarButton, { "aria-label": menuActions[0].name, role: "button", icon: menuActions[0].icon, onClick: () => {
10057
+ var _a;
10068
10058
  try {
10069
- menuActions[0].onClick(attachment);
10059
+ (_a = menuActions[0]) === null || _a === void 0 ? void 0 : _a.onClick(attachment);
10070
10060
  }
10071
10061
  catch (e) {
10072
10062
  handleOnClickError === null || handleOnClickError === void 0 ? void 0 : handleOnClickError(e.message);
@@ -11530,7 +11520,7 @@ const getPreviousInlineImages = (content) => {
11530
11520
  const getRemovedInlineImages = (content, previousInlineImages) => {
11531
11521
  const document = new DOMParser().parseFromString(content !== null && content !== void 0 ? content : '', 'text/html');
11532
11522
  const currentContentIds = Array.from(document.querySelectorAll('img')).map((img) => img.id);
11533
- previousInlineImages = previousInlineImages === null || previousInlineImages === void 0 ? void 0 : previousInlineImages.filter((img) => !(currentContentIds === null || currentContentIds === void 0 ? void 0 : currentContentIds.includes(img.id)));
11523
+ previousInlineImages = previousInlineImages === null || previousInlineImages === void 0 ? void 0 : previousInlineImages.filter((img) => !!img.id && !(currentContentIds === null || currentContentIds === void 0 ? void 0 : currentContentIds.includes(img.id)));
11534
11524
  const removedInlineImages = [...previousInlineImages];
11535
11525
  return removedInlineImages;
11536
11526
  };
@@ -11606,6 +11596,9 @@ const scrollToBottomRichTextEditor = () => {
11606
11596
  */
11607
11597
  const removeLocalBlobs = (currentLocalBlobMap, removedInlineImages) => {
11608
11598
  removedInlineImages.forEach((image) => {
11599
+ if (!image.id) {
11600
+ return;
11601
+ }
11609
11602
  removeSingleLocalBlob(currentLocalBlobMap, image.id);
11610
11603
  });
11611
11604
  };
@@ -11860,6 +11853,9 @@ function createKey(row, column) {
11860
11853
  */
11861
11854
  function parseKey(key) {
11862
11855
  const [row, column] = key.split(',');
11856
+ if (row === undefined || column === undefined) {
11857
+ throw new Error('Invalid key format');
11858
+ }
11863
11859
  return {
11864
11860
  row: parseInt(row),
11865
11861
  column: parseInt(column)
@@ -12681,7 +12677,12 @@ const RichTextEditor = React.forwardRef((props, ref) => {
12681
12677
  if (onInsertInlineImage) {
12682
12678
  copyPastePlugin.onInsertInlineImage = (imageAttributes) => {
12683
12679
  const { id, src } = imageAttributes;
12684
- setInlineImageLocalBlobs(Object.assign(Object.assign({}, inlineImageLocalBlobs), { [id]: src }));
12680
+ setInlineImageLocalBlobs((prev) => {
12681
+ if (!id || !src) {
12682
+ return prev;
12683
+ }
12684
+ return Object.assign(Object.assign({}, prev), { [id]: src });
12685
+ });
12685
12686
  onInsertInlineImage(imageAttributes);
12686
12687
  };
12687
12688
  }
@@ -12689,7 +12690,7 @@ const RichTextEditor = React.forwardRef((props, ref) => {
12689
12690
  copyPastePlugin.onInsertInlineImage = undefined;
12690
12691
  }
12691
12692
  undoRedoPlugin.onInsertInlineImage = onInsertInlineImage;
12692
- }, [copyPastePlugin, inlineImageLocalBlobs, onInsertInlineImage, undoRedoPlugin]);
12693
+ }, [copyPastePlugin, onInsertInlineImage, undoRedoPlugin]);
12693
12694
  React.useEffect(() => {
12694
12695
  undoRedoPlugin.onUpdateContent = () => {
12695
12696
  onChangeContent(/* @conditional-compile-remove(rich-text-editor-image-upload) */ true);
@@ -12858,8 +12859,9 @@ const createEditorInitialModel = (initialContent, contentModel) => {
12858
12859
  }
12859
12860
  };
12860
12861
  const setSelectionAfterLastSegment = (model, block) => {
12862
+ var _a;
12861
12863
  //selection marker should have the same format as the last segment if any
12862
- const format = block.segments.length > 0 ? block.segments[block.segments.length - 1].format : undefined;
12864
+ const format = block.segments.length > 0 ? (_a = block.segments[block.segments.length - 1]) === null || _a === void 0 ? void 0 : _a.format : undefined;
12863
12865
  const marker = roosterjsContentModelDom.createSelectionMarker(format);
12864
12866
  block.segments.push(marker);
12865
12867
  roosterjsContentModelDom.setSelection(model, marker);
@@ -14102,6 +14104,9 @@ const delay = (delay) => {
14102
14104
  const _useContainerWidth = (containerRef) => {
14103
14105
  const [width, setWidth] = React.useState(undefined);
14104
14106
  const observer = React.useRef(new ResizeObserver((entries) => {
14107
+ if (!entries[0]) {
14108
+ return;
14109
+ }
14105
14110
  const { width } = entries[0].contentRect;
14106
14111
  if (Number.isNaN(width)) {
14107
14112
  setWidth(0);
@@ -14130,6 +14135,9 @@ const _useContainerWidth = (containerRef) => {
14130
14135
  const _useContainerHeight = (containerRef) => {
14131
14136
  const [height, setHeight] = React.useState(undefined);
14132
14137
  const observer = React.useRef(new ResizeObserver((entries) => {
14138
+ if (!entries[0]) {
14139
+ return;
14140
+ }
14133
14141
  const { height } = entries[0].contentRect;
14134
14142
  if (Number.isNaN(height)) {
14135
14143
  setHeight(0);
@@ -14715,7 +14723,7 @@ const processHtmlToReact = (props) => {
14715
14723
  if (domNode instanceof parse.Element && domNode.attribs) {
14716
14724
  // Transform custom rendering of mentions
14717
14725
  /* @conditional-compile-remove(mention) */
14718
- if (domNode.name === 'msft-mention') {
14726
+ if (domNode.name === 'msft-mention' && domNode.attribs.id) {
14719
14727
  const { id } = domNode.attribs;
14720
14728
  const mention = {
14721
14729
  id: id,
@@ -14728,7 +14736,9 @@ const processHtmlToReact = (props) => {
14728
14736
  }
14729
14737
  // Transform inline images
14730
14738
  if (domNode.name && domNode.name === 'img' && domNode.attribs && domNode.attribs.id) {
14731
- domNode.attribs['aria-label'] = domNode.attribs.name;
14739
+ if (domNode.attribs.name) {
14740
+ domNode.attribs['aria-label'] = domNode.attribs.name;
14741
+ }
14732
14742
  const imgProps = parse.attributesToProps(domNode.attribs);
14733
14743
  const inlineImageProps = { messageId: props.message.messageId, imageAttributes: imgProps };
14734
14744
  return ((_c = props.inlineImageOptions) === null || _c === void 0 ? void 0 : _c.onRenderInlineImage)
@@ -14764,7 +14774,8 @@ const decodeEntities = (encodedString) => {
14764
14774
  // Find all matches of HTML entities defined in translate_re and
14765
14775
  // replace them with the corresponding character from the translate object.
14766
14776
  .replace(translate_re, function (match, entity) {
14767
- return translate[entity];
14777
+ var _a;
14778
+ return (_a = translate[entity]) !== null && _a !== void 0 ? _a : match;
14768
14779
  })
14769
14780
  // Find numeric entities (e.g., &#65;)
14770
14781
  // and replace them with the equivalent character using the String.fromCharCode method,
@@ -15329,7 +15340,7 @@ class _ErrorBoundary extends React.Component {
15329
15340
  // Copyright (c) Microsoft Corporation.
15330
15341
  // Licensed under the MIT License.
15331
15342
  /* @conditional-compile-remove(rich-text-editor) */
15332
- const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-BwIa2hTH.js'); }));
15343
+ const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-Dk_okMwX.js'); }));
15333
15344
  /**
15334
15345
  * @private
15335
15346
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -15337,7 +15348,7 @@ const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve()
15337
15348
  *
15338
15349
  * @conditional-compile-remove(rich-text-editor)
15339
15350
  */
15340
- const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-BwIa2hTH.js'); });
15351
+ const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-Dk_okMwX.js'); });
15341
15352
  /**
15342
15353
  * @private
15343
15354
  */
@@ -15876,7 +15887,7 @@ const isMessageSame = (first, second) => {
15876
15887
  const getLatestChatMessage = (messages) => {
15877
15888
  for (let i = messages.length - 1; i >= 0; i--) {
15878
15889
  const message = messages[i];
15879
- if (message.messageType === 'chat' && !!message.createdOn) {
15890
+ if ((message === null || message === void 0 ? void 0 : message.messageType) === 'chat' && !!message.createdOn) {
15880
15891
  return message;
15881
15892
  }
15882
15893
  }
@@ -15961,7 +15972,7 @@ const memoizeAllMessages = memoizeFnAll((message, showMessageDate, showMessageSt
15961
15972
  const getLastChatMessageIdWithStatus = (messages, status) => {
15962
15973
  for (let i = messages.length - 1; i >= 0; i--) {
15963
15974
  const message = messages[i];
15964
- if (message.messageType === 'chat' && message.status === status && message.mine) {
15975
+ if ((message === null || message === void 0 ? void 0 : message.messageType) === 'chat' && message.status === status && message.mine) {
15965
15976
  return message.messageId;
15966
15977
  }
15967
15978
  }
@@ -15970,7 +15981,7 @@ const getLastChatMessageIdWithStatus = (messages, status) => {
15970
15981
  const getLastChatMessageForCurrentUser = (messages) => {
15971
15982
  for (let i = messages.length - 1; i >= 0; i--) {
15972
15983
  const message = messages[i];
15973
- if (message.messageType === 'chat' && message.mine) {
15984
+ if ((message === null || message === void 0 ? void 0 : message.messageType) === 'chat' && message.mine) {
15974
15985
  return message;
15975
15986
  }
15976
15987
  }
@@ -16644,7 +16655,7 @@ const ParticipantItem = (props) => {
16644
16655
  };
16645
16656
  const menuButton = React.useMemo(() => (React.createElement(react.Stack, { horizontal: true, horizontalAlign: "end", className: react.mergeStyles(menuButtonContainerStyle, { color: theme.palette.neutralPrimary }), title: strings.menuTitle, "data-ui-id": ids.participantItemMenuButton },
16646
16657
  React.createElement(react.Icon, { iconName: "ParticipantItemOptionsHovered", className: react.mergeStyles(iconStyles$3, !showMenuIcon ? displayNoneStyle : {}) }))), [theme.palette.neutralPrimary, strings.menuTitle, ids.participantItemMenuButton, showMenuIcon]);
16647
- return (React.createElement("div", { ref: containerRef, role: 'menuitem', "aria-disabled": (menuItems && menuItems.length > 0) || props.onClick ? false : true, "data-is-focusable": true, "data-ui-id": "participant-item", className: react.mergeStyles(participantItemContainerStyle({ clickable: !!menuItems && menuItems.length > 0 }, theme), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
16658
+ return (React.createElement("div", { ref: containerRef, role: 'menuitem', "aria-expanded": !me ? !menuHidden : undefined, "aria-disabled": (menuItems && menuItems.length > 0) || props.onClick ? false : true, "data-is-focusable": true, "data-ui-id": "participant-item", className: react.mergeStyles(participantItemContainerStyle({ clickable: !!menuItems && menuItems.length > 0 }, theme), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
16648
16659
  if (!participantStateString) {
16649
16660
  setItemHovered(true);
16650
16661
  setMenuHidden(false);
@@ -17338,6 +17349,7 @@ const emojiStyles = (backgroundImage, frameCount) => {
17338
17349
  alignItems: 'center',
17339
17350
  backgroundSize: `2.75rem 133.875rem`,
17340
17351
  transition: 'opacity 2s',
17352
+ minWidth: '2.75rem',
17341
17353
  backgroundColor: 'transparent',
17342
17354
  transform: 'scale(0.6)',
17343
17355
  ':hover': {
@@ -17353,24 +17365,6 @@ const emojiStyles = (backgroundImage, frameCount) => {
17353
17365
  }
17354
17366
  };
17355
17367
  };
17356
- /**
17357
- *
17358
- * @private
17359
- */
17360
- const reactionEmojiMenuStyles = () => {
17361
- return {
17362
- display: 'flex',
17363
- justifyContent: 'center',
17364
- alignItems: 'center',
17365
- flexDirection: 'row',
17366
- width: '13.75rem',
17367
- height: '2.625rem',
17368
- // Ensure that when one emoji is hovered, the other emojis are partially faded out
17369
- ':hover > :not(:hover)': {
17370
- opacity: '0.5'
17371
- }
17372
- };
17373
- };
17374
17368
  /**
17375
17369
  *
17376
17370
  * @private
@@ -17381,7 +17375,7 @@ const reactionToolTipHostStyle = () => {
17381
17375
  display: 'flex',
17382
17376
  flexDirection: 'column',
17383
17377
  height: '100%',
17384
- width: '100%'
17378
+ width: '2.75rem'
17385
17379
  }
17386
17380
  };
17387
17381
  };
@@ -17427,6 +17421,51 @@ const mobileViewEmojiStyles = (backgroundImage, animationPlayState) => {
17427
17421
  transform: `${'scale(0.8)' }`
17428
17422
  };
17429
17423
  };
17424
+ /**
17425
+ * @private
17426
+ */
17427
+ const reactionButtonStyles = (theme) => ({
17428
+ rootChecked: {
17429
+ background: theme.palette.themePrimary,
17430
+ color: theme.palette.white
17431
+ },
17432
+ rootCheckedHovered: {
17433
+ background: theme.palette.themePrimary,
17434
+ color: theme.palette.white
17435
+ },
17436
+ labelChecked: { color: theme.palette.white }
17437
+ });
17438
+ /**
17439
+ * @private
17440
+ */
17441
+ const reactionItemButtonStyles = {
17442
+ root: {
17443
+ border: 'none',
17444
+ height: '2.75rem',
17445
+ width: '2.75rem'
17446
+ }
17447
+ };
17448
+ /**
17449
+ * @private
17450
+ */
17451
+ const reactionButtonCalloutStyles = {
17452
+ container: {},
17453
+ root: {},
17454
+ beak: {},
17455
+ beakCurtain: {},
17456
+ calloutMain: {
17457
+ display: 'flex',
17458
+ justifyContent: 'center',
17459
+ alignItems: 'center',
17460
+ flexDirection: 'row',
17461
+ width: '13.75rem',
17462
+ height: '2.625rem',
17463
+ // Ensure that when one emoji is hovered, the other emojis are partially faded out
17464
+ ':hover > :not(:hover)': {
17465
+ opacity: '0.5'
17466
+ }
17467
+ }
17468
+ };
17430
17469
 
17431
17470
  // Copyright (c) Microsoft Corporation.
17432
17471
  // Licensed under the MIT License.
@@ -18166,6 +18205,9 @@ const VideoTile = (props) => {
18166
18205
  const callingPalette = theme.callingPalette;
18167
18206
  const isVideoRendered = !!renderElement;
18168
18207
  const observer = React.useRef(new ResizeObserver((entries) => {
18208
+ if (!entries[0]) {
18209
+ return;
18210
+ }
18169
18211
  const { width, height } = entries[0].contentRect;
18170
18212
  const personaCalcSize = Math.min(width, height) / 3;
18171
18213
  // we only want to set the persona size if it has changed
@@ -18369,13 +18411,13 @@ const getOrganizedParticipants = (props) => {
18369
18411
  currentParticipants: previousGridParticipants,
18370
18412
  maxDominantSpeakers: maxGridParticipants
18371
18413
  }).slice(0, maxGridParticipants);
18372
- const dominantSpeakerToGrid = layout === 'speaker'
18373
- ? dominantSpeakers && dominantSpeakers[0]
18374
- ? newGridParticipants.filter((p) => p.userId === dominantSpeakers[0])
18375
- : [newGridParticipants[0]]
18376
- : [];
18377
- if (dominantSpeakerToGrid[0]) {
18378
- newGridParticipants = dominantSpeakerToGrid;
18414
+ if (layout === 'speaker') {
18415
+ if (dominantSpeakers === null || dominantSpeakers === void 0 ? void 0 : dominantSpeakers[0]) {
18416
+ newGridParticipants = newGridParticipants.filter((p) => p.userId === dominantSpeakers[0]);
18417
+ }
18418
+ else {
18419
+ newGridParticipants = newGridParticipants.slice(1);
18420
+ }
18379
18421
  }
18380
18422
  const gridParticipantSet = new Set(newGridParticipants.map((p) => p.userId));
18381
18423
  const newOverflowGalleryParticipants = smartDominantSpeakerParticipants({
@@ -18400,21 +18442,18 @@ const getOrganizedParticipants = (props) => {
18400
18442
  */
18401
18443
  const useOrganizedParticipants = (props) => {
18402
18444
  var _a, _b;
18403
- // map remote participants by userId
18404
- const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {
18405
- map[remoteParticipant.userId] = remoteParticipant;
18406
- return map;
18407
- }, {});
18408
18445
  const spotlightedParticipantUserIds = (_a = props.spotlightedParticipantUserIds) !== null && _a !== void 0 ? _a : [];
18409
18446
  const pinnedParticipantUserIds = (_b = props.pinnedParticipantUserIds) !== null && _b !== void 0 ? _b : [];
18410
- // declare set of focused participant user ids as spotlighted participants user ids followed by
18411
- // pinned participants user ids which is deduplicated while maintaining order
18412
- const focusedParticipantUserIdSet = new Set(spotlightedParticipantUserIds.concat(pinnedParticipantUserIds).filter((p) => remoteParticipantMap[p]));
18413
- // get focused participants from map of remote participants in the order of the user ids
18414
- const focusedParticipants = [...focusedParticipantUserIdSet].map((p) => remoteParticipantMap[p]);
18447
+ // Focussed participants are the participants that are either spotlighted or pinned. Ordered by spotlighted first and then pinned.
18448
+ // A set is used to dedupe participants.
18449
+ const focusedParticipantUserIdSet = new Set(spotlightedParticipantUserIds.concat(pinnedParticipantUserIds));
18450
+ const focusedParticipants = [...focusedParticipantUserIdSet]
18451
+ .map((userId) => props.remoteParticipants.find((p) => p.userId === userId))
18452
+ .filter((p) => p !== undefined);
18453
+ // Unfocused participants are the rest of the participants
18454
+ const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));
18415
18455
  const currentGridParticipants = React.useRef([]);
18416
18456
  const currentOverflowGalleryParticipants = React.useRef([]);
18417
- const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));
18418
18457
  const organizedParticipantsArgs = Object.assign(Object.assign({}, props), {
18419
18458
  // if there are focused participants then leave no room in the grid by setting maxGridParticipants to 0
18420
18459
  maxGridParticipants: focusedParticipants.length > 0 || props.isScreenShareActive ? 0 : props.maxGridParticipants, remoteParticipants: unfocusedParticipants, previousGridParticipants: currentGridParticipants.current, previousOverflowParticipants: currentOverflowGalleryParticipants.current });
@@ -18669,13 +18708,11 @@ function scaleStartPos(index) {
18669
18708
  * It is for the ease of testing and implementation.
18670
18709
  * @private
18671
18710
  */
18672
- const ReactionStyleBuckets = [
18673
- {
18674
- sizeScale: 0.9,
18675
- heightMaxScale: 0.7 * 0.95,
18676
- opacityMax: 0.9
18677
- }
18678
- ];
18711
+ const ReactionStyleBucket = {
18712
+ sizeScale: 0.9,
18713
+ heightMaxScale: 0.7 * 0.95,
18714
+ opacityMax: 0.9
18715
+ };
18679
18716
  /**
18680
18717
  * Return a style bucket based on the number of active sprites.
18681
18718
  * For example, the first three reactions should appear at maximum
@@ -18685,8 +18722,7 @@ const ReactionStyleBuckets = [
18685
18722
  function getReactionStyleBucket() {
18686
18723
  // Having dynamic emoji size on rendering animation impacts performance of the animation itself.
18687
18724
  // So we are choosing to use a fixed size for all cases.
18688
- const index = 0;
18689
- return ReactionStyleBuckets[index];
18725
+ return ReactionStyleBucket;
18690
18726
  }
18691
18727
  /**
18692
18728
  * @private
@@ -18806,13 +18842,13 @@ const RemoteContentShareReactionOverlay = React.memo((props) => {
18806
18842
  return visibleReactionPosition.current.findIndex((item) => item === false);
18807
18843
  };
18808
18844
  const updateVisibleReactions = React.useCallback((reaction, userId) => {
18809
- var _a;
18845
+ var _a, _b;
18810
18846
  const combinedKey = getCombinedKey(userId, reaction.reactionType, reaction.receivedOn);
18811
18847
  const alreadyHandled = ((_a = latestReceivedReaction.current[userId]) === null || _a === void 0 ? void 0 : _a.id) === combinedKey;
18812
18848
  if (alreadyHandled) {
18813
18849
  return;
18814
18850
  }
18815
- const activeCount = activeTypeCount.current[reaction.reactionType];
18851
+ const activeCount = (_b = activeTypeCount.current[reaction.reactionType]) !== null && _b !== void 0 ? _b : 0;
18816
18852
  if (activeCount >= MAX_NUMBER_OF_EMOJIS / NUMBER_OF_EMOJI_TYPES) {
18817
18853
  latestReceivedReaction.current[userId] = {
18818
18854
  id: combinedKey,
@@ -18843,8 +18879,9 @@ const RemoteContentShareReactionOverlay = React.memo((props) => {
18843
18879
  visibleReactionPosition.current[index] = false;
18844
18880
  activeTypeCount.current[reactionType] -= 1;
18845
18881
  Object.entries(latestReceivedReaction.current).forEach(([userId, reaction]) => {
18846
- if (reaction.id === id) {
18847
- latestReceivedReaction.current[userId].status = 'completedAnimating';
18882
+ const userLastReaction = latestReceivedReaction.current[userId];
18883
+ if (reaction.id === id && userLastReaction) {
18884
+ userLastReaction.status = 'completedAnimating';
18848
18885
  }
18849
18886
  });
18850
18887
  };
@@ -19262,6 +19299,9 @@ const LocalVideoCameraCycleButton = (props) => {
19262
19299
  if (cameras && cameras.length > 1 && selectedCamera !== undefined) {
19263
19300
  const index = cameras.findIndex((camera) => selectedCamera.id === camera.id);
19264
19301
  const newCamera = cameras[(index + 1) % cameras.length];
19302
+ if (!newCamera) {
19303
+ throw new Error('Camera not found');
19304
+ }
19265
19305
  onChangeCameraClick(newCamera);
19266
19306
  }
19267
19307
  } }));
@@ -19506,12 +19546,11 @@ const HorizontalGallery = (props) => {
19506
19546
  const firstIndexOfCurrentPage = page * childrenPerPage;
19507
19547
  const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
19508
19548
  const childrenOnCurrentPage = React.useMemo(() => {
19509
- if (indexesArray && indexesArray[clippedPage] !== undefined) {
19510
- return indexesArray[clippedPage].map((index) => {
19511
- return React.Children.toArray(children)[index];
19512
- });
19549
+ const indexes = indexesArray === null || indexesArray === void 0 ? void 0 : indexesArray[clippedPage];
19550
+ if (!indexes) {
19551
+ return [];
19513
19552
  }
19514
- return [];
19553
+ return indexes.map((index) => React.Children.toArray(children)[index]);
19515
19554
  }, [indexesArray, clippedPage, children]);
19516
19555
  const showButtons = numberOfChildren > childrenPerPage;
19517
19556
  const disablePreviousButton = page === 0;
@@ -19988,8 +20027,9 @@ const VerticalGallery = (props) => {
19988
20027
  const firstIndexOfCurrentPage = (page - 1) * childrenPerPage;
19989
20028
  const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
19990
20029
  const childrenOnCurrentPage = React.useMemo(() => {
20030
+ var _a;
19991
20031
  if (indexesArray[0] !== undefined) {
19992
- return indexesArray[clippedPage - 1].map((index) => {
20032
+ return (_a = indexesArray[clippedPage - 1]) === null || _a === void 0 ? void 0 : _a.map((index) => {
19993
20033
  return React.Children.toArray(children)[index];
19994
20034
  });
19995
20035
  }
@@ -20772,11 +20812,12 @@ class DraggableZone extends React__namespace.Component {
20772
20812
  * @param touchList The TouchList to look for the stored identifier from dragStart
20773
20813
  */
20774
20814
  _findTouchInTouchList(touchList) {
20815
+ var _a;
20775
20816
  if (this._touchId === undefined) {
20776
20817
  return;
20777
20818
  }
20778
20819
  for (let i = 0; i < touchList.length; i++) {
20779
- if (touchList[i].identifier === this._touchId) {
20820
+ if (((_a = touchList[i]) === null || _a === void 0 ? void 0 : _a.identifier) === this._touchId) {
20780
20821
  return touchList[i];
20781
20822
  }
20782
20823
  }
@@ -22864,41 +22905,34 @@ const ReactionButton = (props) => {
22864
22905
  ]);
22865
22906
  const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
22866
22907
  const calloutProps = {
22867
- gapSpace: 4,
22868
22908
  styles: calloutStyle,
22869
22909
  backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
22870
22910
  };
22871
- const classname = react.mergeStyles(reactionEmojiMenuStyles());
22872
- const renderEmoji = (item, dismissMenu) => (React.createElement("div", { "data-ui-id": "reaction-sub-menu", className: classname }, emojis.map((emoji, index) => {
22873
- const resourceUrl = emojiResource.get(emoji);
22874
- const frameCount = props.reactionResources !== undefined ? getEmojiFrameCount(emoji, props.reactionResources) : 0;
22875
- const classname = react.mergeStyles(emojiStyles(resourceUrl ? resourceUrl : '', frameCount));
22876
- return (React.createElement(react.TooltipHost, { key: index, "data-ui-id": index, hidden: props.disableTooltip, content: emojiButtonTooltip.get(emoji), styles: reactionToolTipHostStyle(), calloutProps: Object.assign({}, calloutProps) },
22877
- React.createElement("div", { role: "menuitem", key: index, onClick: () => {
22878
- props.onReactionClick(emoji);
22879
- dismissMenu();
22880
- }, className: classname, "aria-label": emojiButtonTooltip.get(emoji) })));
22881
- })));
22882
- const emojiList = [
22883
- { key: 'reactions', itemType: react.ContextualMenuItemType.Normal, onRender: renderEmoji }
22884
- ];
22885
- return (React.createElement(ControlBarButton, Object.assign({}, props, { className: react.mergeStyles(styles, props.styles), menuProps: {
22886
- shouldFocusOnMount: true,
22887
- items: emojiList,
22888
- calloutProps: { preventDismissOnEvent: _preventDismissOnEvent }
22889
- }, onRenderIcon: (_f = props.onRenderIcon) !== null && _f !== void 0 ? _f : onRenderIcon, strings: strings, labelKey: (_g = props.labelKey) !== null && _g !== void 0 ? _g : 'reactionButtonLabel', onRenderMenuIcon: () => React.createElement("div", null), disabled: props.disabled, ariaLabel: strings.ariaLabel })));
22911
+ const reactionButtonCalloutRef = React.useRef(null);
22912
+ const reactionButtonRef = React.useRef(null);
22913
+ const [calloutIsVisible, setCalloutIsVisible] = React.useState(false);
22914
+ return (React.createElement(react.Stack, null,
22915
+ calloutIsVisible && (React.createElement(react.Callout, { "data-ui-id": "reaction-sub-menu", isBeakVisible: false, styles: reactionButtonCalloutStyles, target: reactionButtonCalloutRef.current, onDismiss: () => {
22916
+ var _a;
22917
+ (_a = reactionButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
22918
+ setCalloutIsVisible(false);
22919
+ } },
22920
+ React.createElement(react.FocusZone, { shouldFocusOnMount: true, style: { height: '100%' } },
22921
+ React.createElement(react.Stack, { horizontal: true, style: { height: 'inherit' } }, emojis.map((emoji, index) => {
22922
+ const resourceUrl = emojiResource.get(emoji);
22923
+ const frameCount = props.reactionResources !== undefined ? getEmojiFrameCount(emoji, props.reactionResources) : 0;
22924
+ const classname = react.mergeStyles(emojiStyles(resourceUrl ? resourceUrl : '', frameCount));
22925
+ return (React.createElement(react.TooltipHost, { key: index, "data-ui-id": index, hidden: props.disableTooltip, content: emojiButtonTooltip.get(emoji), styles: reactionToolTipHostStyle(), calloutProps: Object.assign({}, calloutProps) },
22926
+ React.createElement(react.DefaultButton, { role: "menuitem", key: index, onClick: () => {
22927
+ var _a;
22928
+ props.onReactionClick(emoji);
22929
+ (_a = reactionButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
22930
+ setCalloutIsVisible(false);
22931
+ }, className: classname, styles: reactionItemButtonStyles, "aria-label": emojiButtonTooltip.get(emoji) })));
22932
+ }))))),
22933
+ React.createElement("div", { ref: reactionButtonCalloutRef },
22934
+ React.createElement(ControlBarButton, Object.assign({}, props, { componentRef: reactionButtonRef, className: react.mergeStyles(styles, props.styles), onClick: () => setCalloutIsVisible(!calloutIsVisible), onRenderIcon: (_f = props.onRenderIcon) !== null && _f !== void 0 ? _f : onRenderIcon, strings: strings, split: true, labelKey: (_g = props.labelKey) !== null && _g !== void 0 ? _g : 'reactionButtonLabel', onRenderMenuIcon: () => React.createElement("div", null), disabled: props.disabled, ariaLabel: strings.ariaLabel })))));
22890
22935
  };
22891
- const reactionButtonStyles = (theme) => ({
22892
- rootChecked: {
22893
- background: theme.palette.themePrimary,
22894
- color: react.DefaultPalette.white
22895
- },
22896
- rootCheckedHovered: {
22897
- background: theme.palette.themePrimary,
22898
- color: react.DefaultPalette.white
22899
- },
22900
- labelChecked: { color: react.DefaultPalette.white }
22901
- });
22902
22936
 
22903
22937
  // Copyright (c) Microsoft Corporation.
22904
22938
  // Licensed under the MIT License.
@@ -23321,8 +23355,9 @@ const DialpadContainer = (props) => {
23321
23355
  }, [textFieldValue]);
23322
23356
  const onClickDialpad = (input, index) => {
23323
23357
  setText(plainTextValue + input);
23324
- if (onSendDtmfTone) {
23325
- onSendDtmfTone(DtmfTones[index]);
23358
+ const tone = DtmfTones[index];
23359
+ if (onSendDtmfTone && tone) {
23360
+ onSendDtmfTone(tone);
23326
23361
  }
23327
23362
  if (onClickDialpadButton) {
23328
23363
  onClickDialpadButton(input, index);
@@ -23335,8 +23370,9 @@ const DialpadContainer = (props) => {
23335
23370
  else {
23336
23371
  setText(plainTextValue + input);
23337
23372
  }
23338
- if (onSendDtmfTone) {
23339
- onSendDtmfTone(DtmfTones[index]);
23373
+ const tone = DtmfTones[index];
23374
+ if (onSendDtmfTone && tone) {
23375
+ onSendDtmfTone(tone);
23340
23376
  }
23341
23377
  if (onClickDialpadButton) {
23342
23378
  onClickDialpadButton(input, index);
@@ -24056,7 +24092,7 @@ const _VideoEffectsItem = (props) => {
24056
24092
  * @internal
24057
24093
  */
24058
24094
  const _VideoBackgroundEffectsPicker = (props) => {
24059
- var _a, _b, _c;
24095
+ var _a, _b, _c, _d, _e;
24060
24096
  const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState(props.defaultSelectedEffectKey);
24061
24097
  // Warn the developer if they use the component in an incorrect controlled way.
24062
24098
  reactHooks.useWarnings({
@@ -24078,9 +24114,9 @@ const _VideoBackgroundEffectsPicker = (props) => {
24078
24114
  const itemsPerRow = (_b = props.itemsPerRow) !== null && _b !== void 0 ? _b : 3;
24079
24115
  const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);
24080
24116
  // If the final row is not full, fill it with hidden items to ensure layout.
24081
- const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - optionsByRow[optionsByRow.length - 1].length;
24117
+ const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - ((_d = (_c = optionsByRow[optionsByRow.length - 1]) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0);
24082
24118
  return (React.createElement(react.Stack, { tokens: { childrenGap: '0.5rem' } },
24083
- React.createElement(react.Label, { className: react.mergeStyles((_c = props.styles) === null || _c === void 0 ? void 0 : _c.label) }, props.label),
24119
+ React.createElement(react.Label, { className: react.mergeStyles((_e = props.styles) === null || _e === void 0 ? void 0 : _e.label) }, props.label),
24084
24120
  optionsByRow.map((options, rowIndex) => {
24085
24121
  var _a;
24086
24122
  return (React.createElement(react.Stack, { className: react.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" },
@@ -24650,6 +24686,7 @@ const infoConnectionLinkStyle$1 = (theme) => {
24650
24686
  * a component for setting spoken languages
24651
24687
  */
24652
24688
  const MeetingConferencePhoneInfoModal = (props) => {
24689
+ var _a;
24653
24690
  const { conferencePhoneInfoList, showModal, onDismissMeetingPhoneInfoSettings } = props;
24654
24691
  const theme = react.useTheme();
24655
24692
  const strings = useLocale$1().strings.meetingConferencePhoneInfo;
@@ -24696,7 +24733,7 @@ const MeetingConferencePhoneInfoModal = (props) => {
24696
24733
  React.createElement(react.Icon, { iconName: "JoinByPhoneConferenceIdIcon", className: phoneInfoIconStyle$1(theme) }))),
24697
24734
  React.createElement(react.Stack.Item, null,
24698
24735
  React.createElement(react.Text, { className: stepTextStyle }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalMeetingId)))),
24699
- React.createElement(react.Text, { className: phoneInfoTextStyle$1 }, formatMeetingId(conferencePhoneInfoList[0].conferenceId))),
24736
+ React.createElement(react.Text, { className: phoneInfoTextStyle$1 }, formatMeetingId((_a = conferencePhoneInfoList[0]) === null || _a === void 0 ? void 0 : _a.conferenceId))),
24700
24737
  React.createElement(react.Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center" },
24701
24738
  React.createElement(react.Stack, { horizontal: true },
24702
24739
  React.createElement(react.Stack.Item, { className: phoneInfoIcon$1(theme), style: { marginLeft: _pxToRem(2) } },
@@ -29808,7 +29845,7 @@ const AttachmentDownloadErrorBar = (props) => {
29808
29845
  /**
29809
29846
  * Wrapper for RichTextSendBox component to allow us to use usePropsFor with richTextSendBox with lazy loading
29810
29847
  */
29811
- const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-CMAkkxJl.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
29848
+ const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-C36s6eLH.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
29812
29849
  /**
29813
29850
  * @private
29814
29851
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -29816,7 +29853,7 @@ const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function
29816
29853
  *
29817
29854
  /* @conditional-compile-remove(rich-text-editor-composite-support)
29818
29855
  */
29819
- const loadRichTextSendBox = () => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-CMAkkxJl.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper }));
29856
+ const loadRichTextSendBox = () => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-C36s6eLH.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper }));
29820
29857
  /**
29821
29858
  * @private
29822
29859
  */
@@ -31493,7 +31530,6 @@ const getEnvironmentInfo = (state) => state.environmentInfo;
31493
31530
  * @private
31494
31531
  */
31495
31532
  const getSelectedVideoEffect = (state) => state.selectedVideoBackgroundEffect;
31496
- /* @conditional-compile-remove(acs-close-captions) */
31497
31533
  /** @private */
31498
31534
  const getCaptionsKind = (state) => {
31499
31535
  var _a;
@@ -33858,8 +33894,7 @@ const CommonCallControlBar = (props) => {
33858
33894
  const microphoneButtonIsEnabled = isEnabled$1(options === null || options === void 0 ? void 0 : options.microphoneButton);
33859
33895
  const cameraButtonIsEnabled = isEnabled$1(options === null || options === void 0 ? void 0 : options.cameraButton);
33860
33896
  const showExitSpotlightButton = (options === null || options === void 0 ? void 0 : options.exitSpotlightButton) !== false;
33861
- const showCaptionsButton = props.isCaptionsSupported &&
33862
- /* @conditional-compile-remove(acs-close-captions) */ isEnabled$1(options.captionsButton);
33897
+ const showCaptionsButton = props.isCaptionsSupported && isEnabled$1(options.captionsButton);
33863
33898
  const showTeamsMeetingPhoneCallButton = isEnabled$1(options === null || options === void 0 ? void 0 : options.teamsMeetingPhoneCallButton);
33864
33899
  const showDesktopMoreButton = isEnabled$1(options === null || options === void 0 ? void 0 : options.moreButton) &&
33865
33900
  (isEnabled$1(options === null || options === void 0 ? void 0 : options.holdButton) || showCaptionsButton || props.onUserSetGalleryLayout);
@@ -34202,9 +34237,7 @@ const MoreDrawer = (props) => {
34202
34237
  onLightDismiss();
34203
34238
  }, [speakers, onSelectSpeaker, onLightDismiss]);
34204
34239
  const drawerSelectionOptions = inferCallWithChatControlOptions(props.callControls);
34205
- const showCaptionsButton = props.isCaptionsSupported &&
34206
- /* @conditional-compile-remove(acs-close-captions) */ drawerSelectionOptions !== false &&
34207
- /* @conditional-compile-remove(acs-close-captions) */ isEnabled(drawerSelectionOptions.captionsButton);
34240
+ const showCaptionsButton = props.isCaptionsSupported && drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions.captionsButton);
34208
34241
  if (props.reactionResources !== undefined) {
34209
34242
  drawerMenuItems.push({
34210
34243
  itemKey: 'reactions',
@@ -36642,7 +36675,7 @@ const MAX_PINNED_REMOTE_VIDEO_TILES = 4;
36642
36675
  * @private
36643
36676
  */
36644
36677
  const CallArrangement = (props) => {
36645
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
36678
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
36646
36679
  const containerClassName = React.useMemo(() => {
36647
36680
  return props.mobileView ? containerStyleMobile : containerStyleDesktop;
36648
36681
  }, [props.mobileView]);
@@ -36656,6 +36689,7 @@ const CallArrangement = (props) => {
36656
36689
  const isInLobby = _isInLobbyOrConnecting(useSelector$1(callStatusSelector).callStatus);
36657
36690
  const { updateSidePaneRenderer } = props;
36658
36691
  const isInLocalHold = useSelector$1(getPage) === 'hold';
36692
+ const capabilities = useSelector$1(getCapabilites);
36659
36693
  const adapter = useAdapter();
36660
36694
  const [participantActioned, setParticipantActioned] = React.useState();
36661
36695
  const remoteParticipants = useSelector$1(getRemoteParticipants);
@@ -36743,22 +36777,22 @@ const CallArrangement = (props) => {
36743
36777
  }, [onPinParticipant, onUnpinParticipant, pinnedParticipants]);
36744
36778
  const { onStartLocalSpotlightWithPrompt, onStopLocalSpotlightWithPrompt } = useLocalSpotlightCallbacksWithPrompt(onStartLocalSpotlight, onStopLocalSpotlight, setIsPromptOpen, setPromptProps);
36745
36779
  const { onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt } = useRemoteSpotlightCallbacksWithPrompt(onStartRemoteSpotlight, onStopRemoteSpotlight, setIsPromptOpen, setPromptProps);
36746
- const canRemoveSpotlight = (_b = useSelector$1(getCapabilites)) === null || _b === void 0 ? void 0 : _b.removeParticipantsSpotlight.isPresent;
36780
+ const canRemoveSpotlight = capabilities === null || capabilities === void 0 ? void 0 : capabilities.removeParticipantsSpotlight.isPresent;
36747
36781
  const stopAllSpotlight = React.useMemo(() => (canRemoveSpotlight ? () => adapter.stopAllSpotlight() : undefined), [canRemoveSpotlight, adapter]);
36748
36782
  const { stopAllSpotlightWithPrompt } = useStopAllSpotlightCallbackWithPrompt(stopAllSpotlight, setIsPromptOpen, setPromptProps);
36749
36783
  const onMuteParticipantPeoplePaneProps = React.useMemo(() => {
36784
+ var _a, _b;
36750
36785
  /* @conditional-compile-remove(soft-mute) */
36751
36786
  return {
36752
- onMuteParticipant: ['Unknown', 'Organizer', 'Presenter', 'Co-organizer'].includes(role !== null && role !== void 0 ? role : '')
36753
- ? onMuteParticipant
36754
- : undefined,
36755
- onMuteAllRemoteParticipants: ['Unknown', 'Organizer', 'Presenter', 'Co-organizer'].includes(role !== null && role !== void 0 ? role : '')
36787
+ onMuteParticipant: ((_a = capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers) === null || _a === void 0 ? void 0 : _a.isPresent) || role === 'Unknown' ? onMuteParticipant : undefined,
36788
+ onMuteAllRemoteParticipants: ((_b = capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers) === null || _b === void 0 ? void 0 : _b.isPresent) || role === 'Unknown'
36756
36789
  ? muteAllHandlers.onMuteAllRemoteParticipants
36757
36790
  : undefined
36758
36791
  };
36759
36792
  }, [
36760
36793
  /* @conditional-compile-remove(soft-mute) */ onMuteParticipant,
36761
36794
  /* @conditional-compile-remove(soft-mute) */ role,
36795
+ /* @conditional-compile-remove(soft-mute) */ capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers,
36762
36796
  /* @conditional-compile-remove(soft-mute) */ muteAllHandlers.onMuteAllRemoteParticipants
36763
36797
  ]);
36764
36798
  const spotlightPeoplePaneProps = React.useMemo(() => {
@@ -36846,14 +36880,10 @@ const CallArrangement = (props) => {
36846
36880
  if ((isVideoPaneOpen || !isCameraOn) && (props.errorBarProps || props.showErrorNotifications)) {
36847
36881
  filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter((e) => e.type !== 'unableToStartVideoEffect');
36848
36882
  }
36849
- /* @conditional-compile-remove(acs-close-captions) */
36850
36883
  const isTeamsCaptions = useSelector$1(getCaptionsKind) === 'TeamsCaptions';
36851
36884
  const isTeamsMeeting = useSelector$1(getIsTeamsMeeting);
36852
- /* @conditional-compile-remove(acs-close-captions) */
36853
36885
  const isTeamsCall = useSelector$1(getIsTeamsCall);
36854
- const useTeamsCaptions = isTeamsMeeting ||
36855
- /* @conditional-compile-remove(acs-close-captions) */ isTeamsCall ||
36856
- /* @conditional-compile-remove(acs-close-captions) */ isTeamsCaptions;
36886
+ const useTeamsCaptions = isTeamsMeeting || isTeamsCall || isTeamsCaptions;
36857
36887
  const hasJoinedCall = useSelector$1(getCallStatus) === 'Connected';
36858
36888
  const isCaptionsOn = useSelector$1(getCaptionsStatus);
36859
36889
  const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId);
@@ -36861,7 +36891,7 @@ const CallArrangement = (props) => {
36861
36891
  const galleryContainerStyles = React.useMemo(() => {
36862
36892
  var _a;
36863
36893
  return Object.assign(Object.assign({}, mediaGalleryContainerStyles$1), (((_a = props === null || props === void 0 ? void 0 : props.captionsOptions) === null || _a === void 0 ? void 0 : _a.height) === 'full' ? { root: { postion: 'absolute' } } : {}));
36864
- }, [(_c = props === null || props === void 0 ? void 0 : props.captionsOptions) === null || _c === void 0 ? void 0 : _c.height]);
36894
+ }, [(_b = props === null || props === void 0 ? void 0 : props.captionsOptions) === null || _b === void 0 ? void 0 : _b.height]);
36865
36895
  if (isTeamsMeeting) {
36866
36896
  filteredLatestErrorNotifications
36867
36897
  .filter((notification) => notification.type === 'teamsMeetingCallNetworkQualityLow')
@@ -36874,8 +36904,8 @@ const CallArrangement = (props) => {
36874
36904
  const verticalControlBar = props.mobileView && containerWidth && containerHeight && containerWidth / containerHeight > 1 ? true : false;
36875
36905
  // Filter out shareScreen capability notifications if on mobile
36876
36906
  const filteredCapabilitesChangedNotifications = props.mobileView
36877
- ? (_d = props.capabilitiesChangedNotificationBarProps) === null || _d === void 0 ? void 0 : _d.capabilitiesChangedNotifications.filter((notification) => notification.capabilityName !== 'shareScreen')
36878
- : (_e = props.capabilitiesChangedNotificationBarProps) === null || _e === void 0 ? void 0 : _e.capabilitiesChangedNotifications;
36907
+ ? (_c = props.capabilitiesChangedNotificationBarProps) === null || _c === void 0 ? void 0 : _c.capabilitiesChangedNotifications.filter((notification) => notification.capabilityName !== 'shareScreen')
36908
+ : (_d = props.capabilitiesChangedNotificationBarProps) === null || _d === void 0 ? void 0 : _d.capabilitiesChangedNotifications;
36879
36909
  /* @conditional-compile-remove(breakout-rooms) */
36880
36910
  const notificationStackStrings = useCompositeStringsForNotificationStackStrings(locale);
36881
36911
  let latestNotifications = props.latestNotifications;
@@ -36889,14 +36919,12 @@ const CallArrangement = (props) => {
36889
36919
  return (React.createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles), id: props.id },
36890
36920
  React.createElement(react.Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
36891
36921
  React.createElement(react.Stack, { reversed: true, horizontal: verticalControlBar, grow: true, styles: callArrangementContainerStyles(verticalControlBar) },
36892
- ((_f = props.callControlProps) === null || _f === void 0 ? void 0 : _f.options) !== false && !isMobileWithActivePane && (React.createElement(react.Stack, { verticalAlign: 'center', className: react.mergeStyles({
36922
+ ((_e = props.callControlProps) === null || _e === void 0 ? void 0 : _e.options) !== false && !isMobileWithActivePane && (React.createElement(react.Stack, { verticalAlign: 'center', className: react.mergeStyles({
36893
36923
  zIndex: CONTROL_BAR_Z_INDEX,
36894
36924
  padding: verticalControlBar ? '0.25rem' : 'unset'
36895
- }) }, isLegacyCallControlEnabled((_g = props.callControlProps) === null || _g === void 0 ? void 0 : _g.options) ? (React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, displayVertical: verticalControlBar }))) : (React.createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) ||
36896
- /* @conditional-compile-remove(acs-close-captions) */ hasJoinedCall, useTeamsCaptions: useTeamsCaptions, isCaptionsOn: isCaptionsOn, onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, displayVertical: verticalControlBar, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef, onStopLocalSpotlight: !hideSpotlightButtons && localParticipant.spotlight ? onStopLocalSpotlightWithPrompt : undefined, onToggleTeamsMeetingConferenceModal: toggleTeamsMeetingConferenceModal, teamsMeetingConferenceModalPresent: showTeamsMeetingConferenceModal }))))),
36897
- ((_h = props.callControlProps) === null || _h === void 0 ? void 0 : _h.options) !== false && showDrawer && (React.createElement(react.Stack, { styles: drawerContainerStylesValue },
36898
- React.createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, disableButtonsForHoldScreen: isInLocalHold, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) ||
36899
- /* @conditional-compile-remove(acs-close-captions) */ hasJoinedCall, useTeamsCaptions: useTeamsCaptions, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, reactionResources: reactionResources, onClickMeetingPhoneInfo: onMeetingPhoneInfoClicked }))),
36925
+ }) }, isLegacyCallControlEnabled((_f = props.callControlProps) === null || _f === void 0 ? void 0 : _f.options) ? (React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, displayVertical: verticalControlBar }))) : (React.createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) || hasJoinedCall, useTeamsCaptions: useTeamsCaptions, isCaptionsOn: isCaptionsOn, onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, displayVertical: verticalControlBar, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef, onStopLocalSpotlight: !hideSpotlightButtons && localParticipant.spotlight ? onStopLocalSpotlightWithPrompt : undefined, onToggleTeamsMeetingConferenceModal: toggleTeamsMeetingConferenceModal, teamsMeetingConferenceModalPresent: showTeamsMeetingConferenceModal }))))),
36926
+ ((_g = props.callControlProps) === null || _g === void 0 ? void 0 : _g.options) !== false && showDrawer && (React.createElement(react.Stack, { styles: drawerContainerStylesValue },
36927
+ React.createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, disableButtonsForHoldScreen: isInLocalHold, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) || hasJoinedCall, useTeamsCaptions: useTeamsCaptions, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, reactionResources: reactionResources, onClickMeetingPhoneInfo: onMeetingPhoneInfoClicked }))),
36900
36928
  React.createElement(react.Stack, { horizontal: true, grow: true },
36901
36929
  React.createElement(react.Stack.Item, { style: callCompositeContainerCSS },
36902
36930
  React.createElement(react.Stack.Item, { styles: callGalleryStyles, grow: true },
@@ -36918,7 +36946,7 @@ const CallArrangement = (props) => {
36918
36946
  React.createElement(SidePane, { mobileView: props.mobileView, maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, minWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)
36919
36947
  ? undefined
36920
36948
  : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' &&
36921
- isDisabled$4((_j = props.callControlProps.options) === null || _j === void 0 ? void 0 : _j.participantsButton), onChatButtonClicked: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.onClick, disableChatButton: (_l = props.mobileChatTabHeader) === null || _l === void 0 ? void 0 : _l.disabled, showAddPeopleButton: !!props.callControlProps.callInvitationURL, ariaLabel: isVideoEffectsPaneOpen ? locale.strings.call.videoEffectsPaneAriaLabel : undefined }),
36949
+ isDisabled$4((_h = props.callControlProps.options) === null || _h === void 0 ? void 0 : _h.participantsButton), onChatButtonClicked: (_j = props.mobileChatTabHeader) === null || _j === void 0 ? void 0 : _j.onClick, disableChatButton: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.disabled, showAddPeopleButton: !!props.callControlProps.callInvitationURL, ariaLabel: isVideoEffectsPaneOpen ? locale.strings.call.videoEffectsPaneAriaLabel : undefined }),
36922
36950
  props.mobileView && (React.createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, strings: modalStrings, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition, onDismissSidePane: () => {
36923
36951
  closePeoplePane();
36924
36952
  if (props.onCloseChatPane) {
@@ -36981,6 +37009,8 @@ const MediaGallery = (props) => {
36981
37009
  const cameraSwitcherCallback = useHandlers();
36982
37010
  const announcerString = useParticipantChangedAnnouncement();
36983
37011
  const userRole = useSelector$1(getRole);
37012
+ /* @conditional-compile-remove(soft-mute) */
37013
+ const capabilities = useSelector$1(getCapabilites);
36984
37014
  const isRoomsCall = useSelector$1(getIsRoomsCall);
36985
37015
  const containerRef = React.useRef(null);
36986
37016
  const containerWidth = _useContainerWidth(containerRef);
@@ -37039,6 +37069,7 @@ const MediaGallery = (props) => {
37039
37069
  : undefined;
37040
37070
  }, [setPinnedParticipants, pinnedParticipants]);
37041
37071
  const VideoGalleryMemoized = React.useMemo(() => {
37072
+ var _a;
37042
37073
  const layoutBasedOnUserSelection = () => {
37043
37074
  return props.localVideoTileOptions ? layoutBasedOnTilePosition : props.userSetGalleryLayout;
37044
37075
  };
@@ -37048,7 +37079,7 @@ const MediaGallery = (props) => {
37048
37079
  ? '9:16'
37049
37080
  : '16:9', pinnedParticipants: pinnedParticipants, onPinParticipant: onPinParticipant, onUnpinParticipant: onUnpinParticipant, reactionResources: reactionResources, onStartLocalSpotlight: hideSpotlightButtons ? undefined : onStartLocalSpotlightWithPrompt, onStopLocalSpotlight: hideSpotlightButtons ? undefined : onStopLocalSpotlightWithPrompt, onStartRemoteSpotlight: hideSpotlightButtons ? undefined : onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlight: hideSpotlightButtons ? undefined : onStopRemoteSpotlightWithPrompt,
37050
37081
  /* @conditional-compile-remove(soft-mute) */
37051
- onMuteParticipant: ['Unknown', 'Organizer', 'Presenter', 'Co-organizer'].includes(userRole !== null && userRole !== void 0 ? userRole : '')
37082
+ onMuteParticipant: ((_a = capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers) === null || _a === void 0 ? void 0 : _a.isPresent) || userRole === 'Unknown'
37052
37083
  ? videoGalleryProps.onMuteParticipant
37053
37084
  : undefined })));
37054
37085
  }, [
@@ -37074,7 +37105,9 @@ const MediaGallery = (props) => {
37074
37105
  onStopLocalSpotlightWithPrompt,
37075
37106
  onStartRemoteSpotlightWithPrompt,
37076
37107
  onStopRemoteSpotlightWithPrompt,
37077
- layoutBasedOnTilePosition
37108
+ layoutBasedOnTilePosition,
37109
+ /* @conditional-compile-remove(soft-mute) */
37110
+ capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers
37078
37111
  ]);
37079
37112
  return (React.createElement("div", { ref: containerRef, style: mediaGalleryContainerStyles },
37080
37113
  React.createElement(Announcer$1, { announcementString: announcerString, ariaLive: 'polite' }),
@@ -41089,15 +41122,10 @@ class AzureCommunicationCallAdapter {
41089
41122
  teamsCaptionsFeature.on('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
41090
41123
  }
41091
41124
  else {
41092
- /* @conditional-compile-remove(acs-close-captions) */
41093
41125
  const acsCaptionsFeature = captionsFeature === null || captionsFeature === void 0 ? void 0 : captionsFeature.captions;
41094
- /* @conditional-compile-remove(acs-close-captions) */
41095
41126
  acsCaptionsFeature.on('CaptionsReceived', this.captionsReceived.bind(this));
41096
- /* @conditional-compile-remove(acs-close-captions) */
41097
41127
  acsCaptionsFeature.on('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
41098
- /* @conditional-compile-remove(acs-close-captions) */
41099
41128
  acsCaptionsFeature.on('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
41100
- /* @conditional-compile-remove(acs-close-captions) */
41101
41129
  captionsFeature === null || captionsFeature === void 0 ? void 0 : captionsFeature.on('CaptionsKindChanged', this.captionsKindChanged.bind(this));
41102
41130
  }
41103
41131
  }
@@ -41113,15 +41141,10 @@ class AzureCommunicationCallAdapter {
41113
41141
  teamsCaptionsFeature.off('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
41114
41142
  }
41115
41143
  else {
41116
- /* @conditional-compile-remove(acs-close-captions) */
41117
41144
  const acsCaptionsFeature = captionsFeature === null || captionsFeature === void 0 ? void 0 : captionsFeature.captions;
41118
- /* @conditional-compile-remove(acs-close-captions) */
41119
41145
  acsCaptionsFeature.off('CaptionsReceived', this.captionsReceived.bind(this));
41120
- /* @conditional-compile-remove(acs-close-captions) */
41121
41146
  acsCaptionsFeature.off('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
41122
- /* @conditional-compile-remove(acs-close-captions) */
41123
41147
  acsCaptionsFeature.off('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
41124
- /* @conditional-compile-remove(acs-close-captions) */
41125
41148
  captionsFeature === null || captionsFeature === void 0 ? void 0 : captionsFeature.off('CaptionsKindChanged', this.captionsKindChanged.bind(this));
41126
41149
  }
41127
41150
  }
@@ -41168,7 +41191,6 @@ class AzureCommunicationCallAdapter {
41168
41191
  breakoutRoomsFeature.off('breakoutRoomsUpdated', this.breakoutRoomsUpdated.bind(this));
41169
41192
  }
41170
41193
  }
41171
- /* @conditional-compile-remove(acs-close-captions) */
41172
41194
  captionsKindChanged() {
41173
41195
  var _a;
41174
41196
  const captionsFeature = (_a = this.call) === null || _a === void 0 ? void 0 : _a.feature(communicationCalling.Features.Captions);
@@ -41201,7 +41223,6 @@ class AzureCommunicationCallAdapter {
41201
41223
  teamsCaptionsReceived(captionsInfo) {
41202
41224
  this.emitter.emit('captionsReceived', { captionsInfo });
41203
41225
  }
41204
- /* @conditional-compile-remove(acs-close-captions) */
41205
41226
  captionsReceived(captionsInfo) {
41206
41227
  this.emitter.emit('captionsReceived', { captionsInfo });
41207
41228
  }
@@ -44387,4 +44408,4 @@ exports.useTeamsCall = useTeamsCall;
44387
44408
  exports.useTeamsCallAdapter = useTeamsCallAdapter;
44388
44409
  exports.useTeamsCallAgent = useTeamsCallAgent;
44389
44410
  exports.useTheme = useTheme;
44390
- //# sourceMappingURL=index-Bj4O6YVq.js.map
44411
+ //# sourceMappingURL=index-C548hWR1.js.map