@azure/communication-react 1.7.0-alpha-202307060015 → 1.7.0-alpha-202307080015

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.7.0-alpha-202307060015';
+module.exports = '1.7.0-alpha-202307080015';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.7.0-alpha-202307060015';\n"]}
+{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.7.0-alpha-202307080015';\n"]}

package/dist/dist-esm/chat-component-bindings/src/hooks/usePropsFor.js

@@ -4,10 +4,12 @@ import { ErrorBar, MessageThread, ParticipantList, SendBox, TypingIndicator } fr
 import { useHandlers } from './useHandlers';
 import { useSelector } from './useSelector';
 import { sendBoxSelector } from '../sendBoxSelector';
-import { messageThreadSelector } from '../messageThreadSelector';
+import { messageThreadSelectorWithThread } from '../messageThreadSelector';
 import { typingIndicatorSelector } from '../typingIndicatorSelector';
 import { chatParticipantListSelector } from '../chatParticipantListSelector';
 import { errorBarSelector } from '../errorBarSelector';
+import { ChatThreadClientContext } from '../providers/ChatThreadClientProvider';
+import { useContext } from 'react';
 /**
  * Primary hook to get all hooks necessary for a chat Component.
  *
@@ -46,12 +48,26 @@ export const usePropsFor = (component) => {
 export const getSelector = (component) => {
     return findSelector(component);
 };
+const messageThreadSelectorsByThread = {};
 const findSelector = (component) => {
+    // For the message thread selector we need to create a new one for each thread
+    // If we have just one for the entire app, then we will have updates when not expecting due to
+    // the arguments changing
+    const getMessageThreadSelector = () => {
+        var _a, _b;
+        const threadId = (_b = (_a = useContext(ChatThreadClientContext)) === null || _a === void 0 ? void 0 : _a.threadId) !== null && _b !== void 0 ? _b : 'default-id-when-not-in-provider';
+        let messageThreadSelectorImpl = messageThreadSelectorsByThread[threadId];
+        if (!messageThreadSelectorImpl) {
+            messageThreadSelectorsByThread[threadId] = messageThreadSelectorWithThread();
+            messageThreadSelectorImpl = messageThreadSelectorsByThread[threadId];
+        }
+        return messageThreadSelectorImpl;
+    };
     switch (component) {
         case SendBox:
             return sendBoxSelector;
         case MessageThread:
-            return messageThreadSelector;
+            return getMessageThreadSelector();
         case TypingIndicator:
             return typingIndicatorSelector;
         case ParticipantList:

package/dist/dist-esm/chat-component-bindings/src/hooks/usePropsFor.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePropsFor.js","sourceRoot":"","sources":["../../../../../../chat-component-bindings/src/hooks/usePropsFor.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,eAAe,EAAE,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAEhH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAmB,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,EAAyB,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACxF,OAAO,EAA2B,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAG9F,OAAO,EAA+B,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAC1G,OAAO,EAAoB,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEzE;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,SAAoB,EAGR,EAAE;IACd,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IACxC,MAAM,KAAK,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IACpC,MAAM,QAAQ,GAAG,WAAW,CAA2B,SAAS,CAAC,CAAC;IAClE,IAAI,KAAK,KAAK,SAAS,EAAE;QACvB,OAAO,gCAAK,KAAK,GAAK,QAAQ,CAAS,CAAC;KACzC;IACD,OAAO,SAAgB,CAAC;AAC1B,CAAC,CAAC;AAsBF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,SAAoB,EACI,EAAE;IAC1B,OAAO,YAAY,CAAC,SAAS,CAAC,CAAC;AACjC,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,SAAkD,EAAO,EAAE;IAC/E,QAAQ,SAAS,EAAE;QACjB,KAAK,OAAO;YACV,OAAO,eAAe,CAAC;QACzB,KAAK,aAAa;YAChB,OAAO,qBAAqB,CAAC;QAC/B,KAAK,eAAe;YAClB,OAAO,uBAAuB,CAAC;QACjC,KAAK,eAAe;YAClB,OAAO,2BAA2B,CAAC;QACrC,KAAK,QAAQ;YACX,OAAO,gBAAgB,CAAC;KAC3B;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { ErrorBar, MessageThread, ParticipantList, SendBox, TypingIndicator } from '@internal/react-components';\n\nimport { useHandlers } from './useHandlers';\nimport { useSelector } from './useSelector';\nimport { SendBoxSelector, sendBoxSelector } from '../sendBoxSelector';\nimport { MessageThreadSelector, messageThreadSelector } from '../messageThreadSelector';\nimport { TypingIndicatorSelector, typingIndicatorSelector } from '../typingIndicatorSelector';\nimport { Common, AreEqual } from '@internal/acs-ui-common';\nimport { ChatHandlers } from '../handlers/createHandlers';\nimport { ChatParticipantListSelector, chatParticipantListSelector } from '../chatParticipantListSelector';\nimport { ErrorBarSelector, errorBarSelector } from '../errorBarSelector';\n\n/**\n * Primary hook to get all hooks necessary for a chat Component.\n *\n * Most straightforward usage of chat components looks like:\n *\n * @example\n * ```\n *     import { ParticipantList, usePropsFor } from '@azure/communication-react';\n *\n *     const App = (): JSX.Element => {\n *         // ... code to setup Providers ...\n *\n *         return <ParticipantList {...usePropsFor(ParticipantList)}/>\n *     }\n * ```\n *\n * @public\n */\nexport const usePropsFor = <Component extends (props: any) => JSX.Element>(\n  component: Component\n): GetSelector<Component> extends (props: any) => any\n  ? ReturnType<GetSelector<Component>> & Common<ChatHandlers, Parameters<Component>[0]>\n  : undefined => {\n  const selector = getSelector(component);\n  const props = useSelector(selector);\n  const handlers = useHandlers<Parameters<Component>[0]>(component);\n  if (props !== undefined) {\n    return { ...props, ...handlers } as any;\n  }\n  return undefined as any;\n};\n\n/**\n * Specific type of the selector applicable to a given Component.\n *\n * @public\n */\nexport type GetSelector<Component extends (props: any) => JSX.Element | undefined> = AreEqual<\n  Component,\n  typeof SendBox\n> extends true\n  ? SendBoxSelector\n  : AreEqual<Component, typeof MessageThread> extends true\n  ? MessageThreadSelector\n  : AreEqual<Component, typeof TypingIndicator> extends true\n  ? TypingIndicatorSelector\n  : AreEqual<Component, typeof ParticipantList> extends true\n  ? ChatParticipantListSelector\n  : AreEqual<Component, typeof ErrorBar> extends true\n  ? ErrorBarSelector\n  : undefined;\n\n/**\n * Get the selector for a specified component.\n *\n * Useful when implementing a custom component that utilizes the providers\n * exported from this library.\n *\n * @public\n */\nexport const getSelector = <Component extends (props: any) => JSX.Element | undefined>(\n  component: Component\n): GetSelector<Component> => {\n  return findSelector(component);\n};\n\nconst findSelector = (component: (props: any) => JSX.Element | undefined): any => {\n  switch (component) {\n    case SendBox:\n      return sendBoxSelector;\n    case MessageThread:\n      return messageThreadSelector;\n    case TypingIndicator:\n      return typingIndicatorSelector;\n    case ParticipantList:\n      return chatParticipantListSelector;\n    case ErrorBar:\n      return errorBarSelector;\n  }\n  return undefined;\n};\n\"../../../react-components/src\"\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"usePropsFor.js","sourceRoot":"","sources":["../../../../../../chat-component-bindings/src/hooks/usePropsFor.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,eAAe,EAAE,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAEhH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAmB,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,EAAyB,+BAA+B,EAAE,MAAM,0BAA0B,CAAC;AAClG,OAAO,EAA2B,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAG9F,OAAO,EAA+B,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAC1G,OAAO,EAAoB,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAChF,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,SAAoB,EAGR,EAAE;IACd,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IACxC,MAAM,KAAK,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IACpC,MAAM,QAAQ,GAAG,WAAW,CAA2B,SAAS,CAAC,CAAC;IAClE,IAAI,KAAK,KAAK,SAAS,EAAE;QACvB,OAAO,gCAAK,KAAK,GAAK,QAAQ,CAAS,CAAC;KACzC;IACD,OAAO,SAAgB,CAAC;AAC1B,CAAC,CAAC;AAsBF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,SAAoB,EACI,EAAE;IAC1B,OAAO,YAAY,CAAC,SAAS,CAAC,CAAC;AACjC,CAAC,CAAC;AAEF,MAAM,8BAA8B,GAAG,EAAE,CAAC;AAE1C,MAAM,YAAY,GAAG,CAAC,SAAkD,EAAO,EAAE;IAC/E,8EAA8E;IAC9E,8FAA8F;IAC9F,yBAAyB;IACzB,MAAM,wBAAwB,GAAgC,GAAG,EAAE;;QACjE,MAAM,QAAQ,GAAG,MAAA,MAAA,UAAU,CAAC,uBAAuB,CAAC,0CAAE,QAAQ,mCAAI,iCAAiC,CAAC;QACpG,IAAI,yBAAyB,GAAG,8BAA8B,CAAC,QAAQ,CAAC,CAAC;QACzE,IAAI,CAAC,yBAAyB,EAAE;YAC9B,8BAA8B,CAAC,QAAQ,CAAC,GAAG,+BAA+B,EAAE,CAAC;YAC7E,yBAAyB,GAAG,8BAA8B,CAAC,QAAQ,CAAC,CAAC;SACtE;QACD,OAAO,yBAAyB,CAAC;IACnC,CAAC,CAAC;IAEF,QAAQ,SAAS,EAAE;QACjB,KAAK,OAAO;YACV,OAAO,eAAe,CAAC;QACzB,KAAK,aAAa;YAChB,OAAO,wBAAwB,EAAE,CAAC;QACpC,KAAK,eAAe;YAClB,OAAO,uBAAuB,CAAC;QACjC,KAAK,eAAe;YAClB,OAAO,2BAA2B,CAAC;QACrC,KAAK,QAAQ;YACX,OAAO,gBAAgB,CAAC;KAC3B;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { ErrorBar, MessageThread, ParticipantList, SendBox, TypingIndicator } from '@internal/react-components';\n\nimport { useHandlers } from './useHandlers';\nimport { useSelector } from './useSelector';\nimport { SendBoxSelector, sendBoxSelector } from '../sendBoxSelector';\nimport { MessageThreadSelector, messageThreadSelectorWithThread } from '../messageThreadSelector';\nimport { TypingIndicatorSelector, typingIndicatorSelector } from '../typingIndicatorSelector';\nimport { Common, AreEqual } from '@internal/acs-ui-common';\nimport { ChatHandlers } from '../handlers/createHandlers';\nimport { ChatParticipantListSelector, chatParticipantListSelector } from '../chatParticipantListSelector';\nimport { ErrorBarSelector, errorBarSelector } from '../errorBarSelector';\nimport { ChatThreadClientContext } from '../providers/ChatThreadClientProvider';\nimport { useContext } from 'react';\n\n/**\n * Primary hook to get all hooks necessary for a chat Component.\n *\n * Most straightforward usage of chat components looks like:\n *\n * @example\n * ```\n *     import { ParticipantList, usePropsFor } from '@azure/communication-react';\n *\n *     const App = (): JSX.Element => {\n *         // ... code to setup Providers ...\n *\n *         return <ParticipantList {...usePropsFor(ParticipantList)}/>\n *     }\n * ```\n *\n * @public\n */\nexport const usePropsFor = <Component extends (props: any) => JSX.Element>(\n  component: Component\n): GetSelector<Component> extends (props: any) => any\n  ? ReturnType<GetSelector<Component>> & Common<ChatHandlers, Parameters<Component>[0]>\n  : undefined => {\n  const selector = getSelector(component);\n  const props = useSelector(selector);\n  const handlers = useHandlers<Parameters<Component>[0]>(component);\n  if (props !== undefined) {\n    return { ...props, ...handlers } as any;\n  }\n  return undefined as any;\n};\n\n/**\n * Specific type of the selector applicable to a given Component.\n *\n * @public\n */\nexport type GetSelector<Component extends (props: any) => JSX.Element | undefined> = AreEqual<\n  Component,\n  typeof SendBox\n> extends true\n  ? SendBoxSelector\n  : AreEqual<Component, typeof MessageThread> extends true\n  ? MessageThreadSelector\n  : AreEqual<Component, typeof TypingIndicator> extends true\n  ? TypingIndicatorSelector\n  : AreEqual<Component, typeof ParticipantList> extends true\n  ? ChatParticipantListSelector\n  : AreEqual<Component, typeof ErrorBar> extends true\n  ? ErrorBarSelector\n  : undefined;\n\n/**\n * Get the selector for a specified component.\n *\n * Useful when implementing a custom component that utilizes the providers\n * exported from this library.\n *\n * @public\n */\nexport const getSelector = <Component extends (props: any) => JSX.Element | undefined>(\n  component: Component\n): GetSelector<Component> => {\n  return findSelector(component);\n};\n\nconst messageThreadSelectorsByThread = {};\n\nconst findSelector = (component: (props: any) => JSX.Element | undefined): any => {\n  // For the message thread selector we need to create a new one for each thread\n  // If we have just one for the entire app, then we will have updates when not expecting due to\n  // the arguments changing\n  const getMessageThreadSelector: () => MessageThreadSelector = () => {\n    const threadId = useContext(ChatThreadClientContext)?.threadId ?? 'default-id-when-not-in-provider';\n    let messageThreadSelectorImpl = messageThreadSelectorsByThread[threadId];\n    if (!messageThreadSelectorImpl) {\n      messageThreadSelectorsByThread[threadId] = messageThreadSelectorWithThread();\n      messageThreadSelectorImpl = messageThreadSelectorsByThread[threadId];\n    }\n    return messageThreadSelectorImpl;\n  };\n\n  switch (component) {\n    case SendBox:\n      return sendBoxSelector;\n    case MessageThread:\n      return getMessageThreadSelector();\n    case TypingIndicator:\n      return typingIndicatorSelector;\n    case ParticipantList:\n      return chatParticipantListSelector;\n    case ErrorBar:\n      return errorBarSelector;\n  }\n  return undefined;\n};\n\"../../../react-components/src\"\"../../../acs-ui-common/src\""]}

package/dist/dist-esm/chat-component-bindings/src/messageThreadSelector.d.ts

@@ -11,6 +11,11 @@ export declare type MessageThreadSelector = (state: ChatClientState, props: Chat
     showMessageStatus: boolean;
     messages: Message[];
 };
+/**
+ *
+ * @private
+ */
+export declare const messageThreadSelectorWithThread: () => MessageThreadSelector;
 /**
  * Selector for {@link MessageThread} component.
  *

package/dist/dist-esm/chat-component-bindings/src/messageThreadSelector.js

@@ -165,11 +165,10 @@ const convertToUiSystemMessage = (message) => {
 /** Returns `true` if the message has participants and at least one participant has a display name. */
 const hasValidParticipant = (chatMessage) => { var _a; return !!((_a = chatMessage.content) === null || _a === void 0 ? void 0 : _a.participants) && chatMessage.content.participants.some((p) => !!p.displayName); };
 /**
- * Selector for {@link MessageThread} component.
  *
- * @public
+ * @private
  */
-export const messageThreadSelector = createSelector([getUserId, getChatMessages, getLatestReadTime, getIsLargeGroup, getReadReceipts, getParticipants], (userId, chatMessages, latestReadTime, isLargeGroup, readReceipts, participants) => {
+export const messageThreadSelectorWithThread = () => createSelector([getUserId, getChatMessages, getLatestReadTime, getIsLargeGroup, getReadReceipts, getParticipants], (userId, chatMessages, latestReadTime, isLargeGroup, readReceipts, participants) => {
     // We can't get displayName in teams meeting interop for now, disable rr feature when it is teams interop
     const isTeamsInterop = Object.values(participants).find((p) => 'microsoftTeamsUserId' in p.id) !== undefined;
     // get number of participants
@@ -180,7 +179,7 @@ export const messageThreadSelector = createSelector([getUserId, getChatMessages,
         : Object.values(participants).filter((p) => p.displayName && p.displayName !== '').length;
     // creating key value pairs of senderID: last read message information
     const readReceiptsBySenderId = {};
-    // readReceiptsBySenderId[senderID] gets updated everytime a new message is read by this sender
+    // readReceiptsBySenderId[senderID] gets updated every time a new message is read by this sender
     // in this way we can make sure that we are only saving the latest read message id and read on time for each sender
     readReceipts
         .filter((r) => r.sender && toFlatCommunicationIdentifier(r.sender) !== userId)
@@ -237,4 +236,10 @@ const isMessageValidToRender = (message) => {
     }
     return !!(message.content && ((_c = message.content) === null || _c === void 0 ? void 0 : _c.message) !== '');
 };
+/**
+ * Selector for {@link MessageThread} component.
+ *
+ * @public
+ */
+export const messageThreadSelector = messageThreadSelectorWithThread();
 //# sourceMappingURL=messageThreadSelector.js.map

package/dist/dist-esm/chat-component-bindings/src/messageThreadSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"messageThreadSelector.js","sourceRoot":"","sources":["../../../../../chat-component-bindings/src/messageThreadSelector.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  ChatBaseSelectorProps,\n  getChatMessages,\n  getIsLargeGroup,\n  getLatestReadTime,\n  getParticipants,\n  getReadReceipts,\n  getUserId\n} from './baseSelectors';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { ChatClientState, ChatMessageWithStatus } from '@internal/chat-stateful-client';\nimport { memoizeFnAll } from '@internal/acs-ui-common';\nimport {\n  ChatMessage,\n  Message,\n  CommunicationParticipant,\n  SystemMessage,\n  MessageContentType,\n  ReadReceiptsBySenderId\n} from '@internal/react-components';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '@internal/react-components';\nimport { createSelector } from 'reselect';\nimport { ACSKnownMessageType } from './utils/constants';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { DEFAULT_DATA_LOSS_PREVENTION_POLICY_URL } from './utils/constants';\nimport { updateMessagesWithAttached } from './utils/updateMessagesWithAttached';\n\n/* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { FileMetadata, FileMetadataAttachmentType } from '@internal/react-components';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { AttachmentType, ChatAttachment } from '@azure/communication-chat';\n\nconst memoizedAllConvertChatMessage = memoizeFnAll(\n  (\n    _key: string,\n    chatMessage: ChatMessageWithStatus,\n    userId: string,\n    isSeen: boolean,\n    isLargeGroup: boolean\n  ): Message => {\n    const messageType = chatMessage.type.toLowerCase();\n    /* @conditional-compile-remove(data-loss-prevention) */\n    if (chatMessage.policyViolation) {\n      return convertToUiBlockedMessage(chatMessage, userId, isSeen, isLargeGroup);\n    }\n    if (\n      messageType === ACSKnownMessageType.text ||\n      messageType === ACSKnownMessageType.richtextHtml ||\n      messageType === ACSKnownMessageType.html\n    ) {\n      return convertToUiChatMessage(chatMessage, userId, isSeen, isLargeGroup);\n    } else {\n      return convertToUiSystemMessage(chatMessage);\n    }\n  }\n);\n\n/* @conditional-compile-remove(file-sharing) */\nconst extractAttachedFilesMetadata = (metadata: Record<string, string>): FileMetadata[] => {\n  const fileMetadata = metadata['fileSharingMetadata'];\n  if (!fileMetadata) {\n    return [];\n  }\n  try {\n    return JSON.parse(fileMetadata);\n  } catch (e) {\n    console.error(e);\n    return [];\n  }\n};\n\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nconst extractTeamsAttachmentsMetadata = (attachments: ChatAttachment[]): FileMetadata[] => {\n  return attachments.map((attachment) => ({\n    attachmentType: mapAttachmentType(attachment.attachmentType),\n    id: attachment.id,\n    name: attachment.name ?? '',\n    extension: attachment.contentType ?? '',\n    url: extractAttachmentUrl(attachment),\n    previewUrl: attachment.previewUrl\n  }));\n};\n\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nconst mapAttachmentType = (attachmentType: AttachmentType): FileMetadataAttachmentType => {\n  if (attachmentType === 'teamsImage' || attachmentType === 'teamsInlineImage') {\n    return 'teamsInlineImage';\n  } else if (attachmentType === 'file') {\n    return 'fileSharing';\n  }\n  return 'unknown';\n};\n\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nconst extractAttachmentUrl = (attachment: ChatAttachment): string => {\n  return attachment.attachmentType === 'file' && attachment.previewUrl ? attachment.previewUrl : attachment.url;\n};\n\nconst processChatMessageContent = (message: ChatMessageWithStatus): string | undefined => {\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  if (sanitizedMessageContentType(message.type).includes('html') && message.content?.attachments) {\n    const attachments: ChatAttachment[] = message.content?.attachments;\n    const teamsImageHtmlContent = attachments\n      .filter((attachment) => attachment.attachmentType === 'teamsImage')\n      .map((attachment) => generateImageAttachmentImgHtml(attachment))\n      .join('');\n\n    if (teamsImageHtmlContent) {\n      return (message.content?.message ?? '') + teamsImageHtmlContent;\n    }\n  }\n  return message.content?.message;\n};\n\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nconst generateImageAttachmentImgHtml = (attachment: ChatAttachment): string => {\n  return `\\r\\n<p><img alt=\"image\" src=\"\" itemscope=\"${attachment.contentType}\" id=\"${attachment.id}\"></p>`;\n};\n\n/* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nconst extractFilesMetadata = (message: ChatMessageWithStatus): FileMetadata[] => {\n  let fileMetadata: FileMetadata[] = [];\n\n  /* @conditional-compile-remove(file-sharing) */\n  if (message.metadata) {\n    fileMetadata = fileMetadata.concat(extractAttachedFilesMetadata(message.metadata));\n  }\n\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  if (message.content?.attachments) {\n    fileMetadata = fileMetadata.concat(extractTeamsAttachmentsMetadata(message.content?.attachments));\n  }\n\n  return fileMetadata;\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\nconst convertToUiBlockedMessage = (\n  message: ChatMessageWithStatus,\n  userId: string,\n  isSeen: boolean,\n  isLargeGroup: boolean\n): BlockedMessage => {\n  const messageSenderId = message.sender !== undefined ? toFlatCommunicationIdentifier(message.sender) : userId;\n  return {\n    messageType: 'blocked',\n    createdOn: message.createdOn,\n    warningText: undefined,\n    status: !isLargeGroup && message.status === 'delivered' && isSeen ? 'seen' : message.status,\n    senderDisplayName: message.senderDisplayName,\n    senderId: messageSenderId,\n    messageId: message.id,\n    deletedOn: message.deletedOn,\n    mine: messageSenderId === userId,\n    link: DEFAULT_DATA_LOSS_PREVENTION_POLICY_URL\n  };\n};\n\nconst convertToUiChatMessage = (\n  message: ChatMessageWithStatus,\n  userId: string,\n  isSeen: boolean,\n  isLargeGroup: boolean\n): ChatMessage => {\n  const messageSenderId = message.sender !== undefined ? toFlatCommunicationIdentifier(message.sender) : userId;\n  return {\n    messageType: 'chat',\n    createdOn: message.createdOn,\n    content: processChatMessageContent(message),\n    contentType: sanitizedMessageContentType(message.type),\n    status: !isLargeGroup && message.status === 'delivered' && isSeen ? 'seen' : message.status,\n    senderDisplayName: message.senderDisplayName,\n    senderId: messageSenderId,\n    messageId: message.id,\n    clientMessageId: message.clientMessageId,\n    editedOn: message.editedOn,\n    deletedOn: message.deletedOn,\n    mine: messageSenderId === userId,\n    metadata: message.metadata,\n    /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n    attachedFilesMetadata: extractFilesMetadata(message)\n  };\n};\n\nconst convertToUiSystemMessage = (message: ChatMessageWithStatus): SystemMessage => {\n  const systemMessageType = message.type;\n  if (systemMessageType === 'participantAdded' || systemMessageType === 'participantRemoved') {\n    return {\n      messageType: 'system',\n      systemMessageType,\n      createdOn: message.createdOn,\n      participants:\n        message.content?.participants\n          // TODO: In our moderator logic, we use undefined name as our displayName for moderator, which should be filtered out\n          // Once we have a better solution to identify the moderator, remove this line\n          ?.filter((participant) => participant.displayName && participant.displayName !== '')\n          .map(\n            (participant): CommunicationParticipant => ({\n              userId: toFlatCommunicationIdentifier(participant.id),\n              displayName: participant.displayName\n            })\n          ) ?? [],\n      messageId: message.id,\n      iconName: systemMessageType === 'participantAdded' ? 'PeopleAdd' : 'PeopleBlock'\n    };\n  } else {\n    // Only topic updated type left, according to ACSKnown type\n    return {\n      messageType: 'system',\n      systemMessageType: 'topicUpdated',\n      createdOn: message.createdOn,\n      topic: message.content?.topic ?? '',\n      messageId: message.id,\n      iconName: 'Edit'\n    };\n  }\n};\n\n/**\n * Selector type for {@link MessageThread} component.\n *\n * @public\n */\nexport type MessageThreadSelector = (\n  state: ChatClientState,\n  props: ChatBaseSelectorProps\n) => {\n  userId: string;\n  showMessageStatus: boolean;\n  messages: Message[];\n};\n\n/** Returns `true` if the message has participants and at least one participant has a display name. */\nconst hasValidParticipant = (chatMessage: ChatMessageWithStatus): boolean =>\n  !!chatMessage.content?.participants && chatMessage.content.participants.some((p) => !!p.displayName);\n\n/**\n * Selector for {@link MessageThread} component.\n *\n * @public\n */\nexport const messageThreadSelector: MessageThreadSelector = createSelector(\n  [getUserId, getChatMessages, getLatestReadTime, getIsLargeGroup, getReadReceipts, getParticipants],\n  (userId, chatMessages, latestReadTime, isLargeGroup, readReceipts, participants) => {\n    // We can't get displayName in teams meeting interop for now, disable rr feature when it is teams interop\n    const isTeamsInterop = Object.values(participants).find((p) => 'microsoftTeamsUserId' in p.id) !== undefined;\n\n    // get number of participants\n    // filter out the non valid participants (no display name)\n    // Read Receipt details will be disabled when participant count is 0\n    const participantCount = isTeamsInterop\n      ? undefined\n      : Object.values(participants).filter((p) => p.displayName && p.displayName !== '').length;\n\n    // creating key value pairs of senderID: last read message information\n\n    const readReceiptsBySenderId: ReadReceiptsBySenderId = {};\n\n    // readReceiptsBySenderId[senderID] gets updated everytime a new message is read by this sender\n    // in this way we can make sure that we are only saving the latest read message id and read on time for each sender\n    readReceipts\n      .filter((r) => r.sender && toFlatCommunicationIdentifier(r.sender) !== userId)\n      .forEach((r) => {\n        readReceiptsBySenderId[toFlatCommunicationIdentifier(r.sender)] = {\n          lastReadMessage: r.chatMessageId,\n          displayName: participants[toFlatCommunicationIdentifier(r.sender)]?.displayName ?? ''\n        };\n      });\n\n    // A function takes parameter above and generate return value\n    const convertedMessages = memoizedAllConvertChatMessage((memoizedFn) =>\n      Object.values(chatMessages)\n        .filter(\n          (message) =>\n            message.type.toLowerCase() === ACSKnownMessageType.text ||\n            message.type.toLowerCase() === ACSKnownMessageType.richtextHtml ||\n            message.type.toLowerCase() === ACSKnownMessageType.html ||\n            (message.type === ACSKnownMessageType.participantAdded && hasValidParticipant(message)) ||\n            (message.type === ACSKnownMessageType.participantRemoved && hasValidParticipant(message)) ||\n            // TODO: Add support for topicUpdated system messages in MessageThread component.\n            // message.type === ACSKnownMessageType.topicUpdated ||\n            message.clientMessageId !== undefined\n        )\n        .filter(isMessageValidToRender)\n        .map((message) => {\n          return memoizedFn(\n            message.id ?? message.clientMessageId,\n            message,\n            userId,\n            message.createdOn <= latestReadTime,\n            isLargeGroup\n          );\n        })\n    );\n\n    updateMessagesWithAttached(convertedMessages);\n    return {\n      userId,\n      showMessageStatus: true,\n      messages: convertedMessages,\n      participantCount,\n      readReceiptsBySenderId\n    };\n  }\n);\n\nconst sanitizedMessageContentType = (type: string): MessageContentType => {\n  const lowerCaseType = type.toLowerCase();\n  return lowerCaseType === 'text' || lowerCaseType === 'html' || lowerCaseType === 'richtext/html'\n    ? lowerCaseType\n    : 'unknown';\n};\n\nconst isMessageValidToRender = (message: ChatMessageWithStatus): boolean => {\n  if (message.deletedOn) {\n    return false;\n  }\n  if (\n    message.metadata?.['fileSharingMetadata'] ||\n    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ message.content?.attachments\n  ) {\n    return true;\n  }\n  /* @conditional-compile-remove(data-loss-prevention) */\n  if (message.policyViolation) {\n    return true;\n  }\n  return !!(message.content && message.content?.message !== '');\n};\n\"../../acs-ui-common/src\"\"../../chat-stateful-client/src\"\"../../react-components/src\""]}
+{"version":3,"file":"messageThreadSelector.js","sourceRoot":"","sources":["../../../../../chat-component-bindings/src/messageThreadSelector.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  ChatBaseSelectorProps,\n  getChatMessages,\n  getIsLargeGroup,\n  getLatestReadTime,\n  getParticipants,\n  getReadReceipts,\n  getUserId\n} from './baseSelectors';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { ChatClientState, ChatMessageWithStatus } from '@internal/chat-stateful-client';\nimport { memoizeFnAll } from '@internal/acs-ui-common';\nimport {\n  ChatMessage,\n  Message,\n  CommunicationParticipant,\n  SystemMessage,\n  MessageContentType,\n  ReadReceiptsBySenderId\n} from '@internal/react-components';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '@internal/react-components';\nimport { createSelector } from 'reselect';\nimport { ACSKnownMessageType } from './utils/constants';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { DEFAULT_DATA_LOSS_PREVENTION_POLICY_URL } from './utils/constants';\nimport { updateMessagesWithAttached } from './utils/updateMessagesWithAttached';\n\n/* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { FileMetadata, FileMetadataAttachmentType } from '@internal/react-components';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { AttachmentType, ChatAttachment } from '@azure/communication-chat';\n\nconst memoizedAllConvertChatMessage = memoizeFnAll(\n  (\n    _key: string,\n    chatMessage: ChatMessageWithStatus,\n    userId: string,\n    isSeen: boolean,\n    isLargeGroup: boolean\n  ): Message => {\n    const messageType = chatMessage.type.toLowerCase();\n    /* @conditional-compile-remove(data-loss-prevention) */\n    if (chatMessage.policyViolation) {\n      return convertToUiBlockedMessage(chatMessage, userId, isSeen, isLargeGroup);\n    }\n    if (\n      messageType === ACSKnownMessageType.text ||\n      messageType === ACSKnownMessageType.richtextHtml ||\n      messageType === ACSKnownMessageType.html\n    ) {\n      return convertToUiChatMessage(chatMessage, userId, isSeen, isLargeGroup);\n    } else {\n      return convertToUiSystemMessage(chatMessage);\n    }\n  }\n);\n\n/* @conditional-compile-remove(file-sharing) */\nconst extractAttachedFilesMetadata = (metadata: Record<string, string>): FileMetadata[] => {\n  const fileMetadata = metadata['fileSharingMetadata'];\n  if (!fileMetadata) {\n    return [];\n  }\n  try {\n    return JSON.parse(fileMetadata);\n  } catch (e) {\n    console.error(e);\n    return [];\n  }\n};\n\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nconst extractTeamsAttachmentsMetadata = (attachments: ChatAttachment[]): FileMetadata[] => {\n  return attachments.map((attachment) => ({\n    attachmentType: mapAttachmentType(attachment.attachmentType),\n    id: attachment.id,\n    name: attachment.name ?? '',\n    extension: attachment.contentType ?? '',\n    url: extractAttachmentUrl(attachment),\n    previewUrl: attachment.previewUrl\n  }));\n};\n\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nconst mapAttachmentType = (attachmentType: AttachmentType): FileMetadataAttachmentType => {\n  if (attachmentType === 'teamsImage' || attachmentType === 'teamsInlineImage') {\n    return 'teamsInlineImage';\n  } else if (attachmentType === 'file') {\n    return 'fileSharing';\n  }\n  return 'unknown';\n};\n\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nconst extractAttachmentUrl = (attachment: ChatAttachment): string => {\n  return attachment.attachmentType === 'file' && attachment.previewUrl ? attachment.previewUrl : attachment.url;\n};\n\nconst processChatMessageContent = (message: ChatMessageWithStatus): string | undefined => {\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  if (sanitizedMessageContentType(message.type).includes('html') && message.content?.attachments) {\n    const attachments: ChatAttachment[] = message.content?.attachments;\n    const teamsImageHtmlContent = attachments\n      .filter((attachment) => attachment.attachmentType === 'teamsImage')\n      .map((attachment) => generateImageAttachmentImgHtml(attachment))\n      .join('');\n\n    if (teamsImageHtmlContent) {\n      return (message.content?.message ?? '') + teamsImageHtmlContent;\n    }\n  }\n  return message.content?.message;\n};\n\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nconst generateImageAttachmentImgHtml = (attachment: ChatAttachment): string => {\n  return `\\r\\n<p><img alt=\"image\" src=\"\" itemscope=\"${attachment.contentType}\" id=\"${attachment.id}\"></p>`;\n};\n\n/* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nconst extractFilesMetadata = (message: ChatMessageWithStatus): FileMetadata[] => {\n  let fileMetadata: FileMetadata[] = [];\n\n  /* @conditional-compile-remove(file-sharing) */\n  if (message.metadata) {\n    fileMetadata = fileMetadata.concat(extractAttachedFilesMetadata(message.metadata));\n  }\n\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  if (message.content?.attachments) {\n    fileMetadata = fileMetadata.concat(extractTeamsAttachmentsMetadata(message.content?.attachments));\n  }\n\n  return fileMetadata;\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\nconst convertToUiBlockedMessage = (\n  message: ChatMessageWithStatus,\n  userId: string,\n  isSeen: boolean,\n  isLargeGroup: boolean\n): BlockedMessage => {\n  const messageSenderId = message.sender !== undefined ? toFlatCommunicationIdentifier(message.sender) : userId;\n  return {\n    messageType: 'blocked',\n    createdOn: message.createdOn,\n    warningText: undefined,\n    status: !isLargeGroup && message.status === 'delivered' && isSeen ? 'seen' : message.status,\n    senderDisplayName: message.senderDisplayName,\n    senderId: messageSenderId,\n    messageId: message.id,\n    deletedOn: message.deletedOn,\n    mine: messageSenderId === userId,\n    link: DEFAULT_DATA_LOSS_PREVENTION_POLICY_URL\n  };\n};\n\nconst convertToUiChatMessage = (\n  message: ChatMessageWithStatus,\n  userId: string,\n  isSeen: boolean,\n  isLargeGroup: boolean\n): ChatMessage => {\n  const messageSenderId = message.sender !== undefined ? toFlatCommunicationIdentifier(message.sender) : userId;\n  return {\n    messageType: 'chat',\n    createdOn: message.createdOn,\n    content: processChatMessageContent(message),\n    contentType: sanitizedMessageContentType(message.type),\n    status: !isLargeGroup && message.status === 'delivered' && isSeen ? 'seen' : message.status,\n    senderDisplayName: message.senderDisplayName,\n    senderId: messageSenderId,\n    messageId: message.id,\n    clientMessageId: message.clientMessageId,\n    editedOn: message.editedOn,\n    deletedOn: message.deletedOn,\n    mine: messageSenderId === userId,\n    metadata: message.metadata,\n    /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n    attachedFilesMetadata: extractFilesMetadata(message)\n  };\n};\n\nconst convertToUiSystemMessage = (message: ChatMessageWithStatus): SystemMessage => {\n  const systemMessageType = message.type;\n  if (systemMessageType === 'participantAdded' || systemMessageType === 'participantRemoved') {\n    return {\n      messageType: 'system',\n      systemMessageType,\n      createdOn: message.createdOn,\n      participants:\n        message.content?.participants\n          // TODO: In our moderator logic, we use undefined name as our displayName for moderator, which should be filtered out\n          // Once we have a better solution to identify the moderator, remove this line\n          ?.filter((participant) => participant.displayName && participant.displayName !== '')\n          .map(\n            (participant): CommunicationParticipant => ({\n              userId: toFlatCommunicationIdentifier(participant.id),\n              displayName: participant.displayName\n            })\n          ) ?? [],\n      messageId: message.id,\n      iconName: systemMessageType === 'participantAdded' ? 'PeopleAdd' : 'PeopleBlock'\n    };\n  } else {\n    // Only topic updated type left, according to ACSKnown type\n    return {\n      messageType: 'system',\n      systemMessageType: 'topicUpdated',\n      createdOn: message.createdOn,\n      topic: message.content?.topic ?? '',\n      messageId: message.id,\n      iconName: 'Edit'\n    };\n  }\n};\n\n/**\n * Selector type for {@link MessageThread} component.\n *\n * @public\n */\nexport type MessageThreadSelector = (\n  state: ChatClientState,\n  props: ChatBaseSelectorProps\n) => {\n  userId: string;\n  showMessageStatus: boolean;\n  messages: Message[];\n};\n\n/** Returns `true` if the message has participants and at least one participant has a display name. */\nconst hasValidParticipant = (chatMessage: ChatMessageWithStatus): boolean =>\n  !!chatMessage.content?.participants && chatMessage.content.participants.some((p) => !!p.displayName);\n\n/**\n *\n * @private\n */\nexport const messageThreadSelectorWithThread: () => MessageThreadSelector = () =>\n  createSelector(\n    [getUserId, getChatMessages, getLatestReadTime, getIsLargeGroup, getReadReceipts, getParticipants],\n    (userId, chatMessages, latestReadTime, isLargeGroup, readReceipts, participants) => {\n      // We can't get displayName in teams meeting interop for now, disable rr feature when it is teams interop\n      const isTeamsInterop = Object.values(participants).find((p) => 'microsoftTeamsUserId' in p.id) !== undefined;\n\n      // get number of participants\n      // filter out the non valid participants (no display name)\n      // Read Receipt details will be disabled when participant count is 0\n      const participantCount = isTeamsInterop\n        ? undefined\n        : Object.values(participants).filter((p) => p.displayName && p.displayName !== '').length;\n\n      // creating key value pairs of senderID: last read message information\n\n      const readReceiptsBySenderId: ReadReceiptsBySenderId = {};\n\n      // readReceiptsBySenderId[senderID] gets updated every time a new message is read by this sender\n      // in this way we can make sure that we are only saving the latest read message id and read on time for each sender\n      readReceipts\n        .filter((r) => r.sender && toFlatCommunicationIdentifier(r.sender) !== userId)\n        .forEach((r) => {\n          readReceiptsBySenderId[toFlatCommunicationIdentifier(r.sender)] = {\n            lastReadMessage: r.chatMessageId,\n            displayName: participants[toFlatCommunicationIdentifier(r.sender)]?.displayName ?? ''\n          };\n        });\n\n      // A function takes parameter above and generate return value\n      const convertedMessages = memoizedAllConvertChatMessage((memoizedFn) =>\n        Object.values(chatMessages)\n          .filter(\n            (message) =>\n              message.type.toLowerCase() === ACSKnownMessageType.text ||\n              message.type.toLowerCase() === ACSKnownMessageType.richtextHtml ||\n              message.type.toLowerCase() === ACSKnownMessageType.html ||\n              (message.type === ACSKnownMessageType.participantAdded && hasValidParticipant(message)) ||\n              (message.type === ACSKnownMessageType.participantRemoved && hasValidParticipant(message)) ||\n              // TODO: Add support for topicUpdated system messages in MessageThread component.\n              // message.type === ACSKnownMessageType.topicUpdated ||\n              message.clientMessageId !== undefined\n          )\n          .filter(isMessageValidToRender)\n          .map((message) => {\n            return memoizedFn(\n              message.id ?? message.clientMessageId,\n              message,\n              userId,\n              message.createdOn <= latestReadTime,\n              isLargeGroup\n            );\n          })\n      );\n\n      updateMessagesWithAttached(convertedMessages);\n      return {\n        userId,\n        showMessageStatus: true,\n        messages: convertedMessages,\n        participantCount,\n        readReceiptsBySenderId\n      };\n    }\n  );\n\nconst sanitizedMessageContentType = (type: string): MessageContentType => {\n  const lowerCaseType = type.toLowerCase();\n  return lowerCaseType === 'text' || lowerCaseType === 'html' || lowerCaseType === 'richtext/html'\n    ? lowerCaseType\n    : 'unknown';\n};\n\nconst isMessageValidToRender = (message: ChatMessageWithStatus): boolean => {\n  if (message.deletedOn) {\n    return false;\n  }\n  if (\n    message.metadata?.['fileSharingMetadata'] ||\n    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ message.content?.attachments\n  ) {\n    return true;\n  }\n  /* @conditional-compile-remove(data-loss-prevention) */\n  if (message.policyViolation) {\n    return true;\n  }\n  return !!(message.content && message.content?.message !== '');\n};\n\n/**\n * Selector for {@link MessageThread} component.\n *\n * @public\n */\nexport const messageThreadSelector: MessageThreadSelector = messageThreadSelectorWithThread();\n\"../../acs-ui-common/src\"\"../../chat-stateful-client/src\"\"../../react-components/src\""]}

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

@@ -76,7 +76,7 @@ export interface ParticipantItemProps {
      * Optional callback when component is clicked
      */
     onClick?: (props?: ParticipantItemProps) => void;
-    /** prop to determine if we should show tooltip for participants or not */
+    /** Optional value to determine if the tooltip should be shown for participants or not */
     showParticipantOverflowTooltip?: boolean;
     /**
      * Optional value to determine and display a participants connection status.

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantItem.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  ContextualMenu,\n  DirectionalHint,\n  Icon,\n  IContextualMenuItem,\n  IStyle,\n  mergeStyles,\n  Persona,\n  PersonaPresence,\n  PersonaSize,\n  Stack,\n  Text\n} from '@fluentui/react';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, OnRenderAvatarCallback } from '../types';\nimport {\n  iconContainerStyle,\n  iconStyles,\n  meContainerStyle,\n  menuButtonContainerStyle,\n  participantItemContainerStyle,\n  participantStateMaxWidth,\n  participantStateStringStyles\n} from './styles/ParticipantItem.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(one-to-n-calling) */\n/* @conditional-compile-remove(PSTN-calls) */\nimport { ParticipantState } from '../types';\nimport { useId } from '@fluentui/react-hooks';\n\n/**\n * Fluent styles for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemStyles extends BaseCustomStyles {\n  /** Styles for the avatar. */\n  avatar?: IStyle;\n  /** Styles for the (You) string. */\n  me?: IStyle;\n  /** Styles for the container of the icon. */\n  iconContainer?: IStyle;\n  /** Styles for the menu. */\n  menu?: IStyle;\n}\n\n/**\n * Strings of {@link ParticipantItem} that can be overridden.\n *\n * @public\n */\nexport interface ParticipantItemStrings {\n  /** String shown when participant is me */\n  isMeText: string;\n  /** String shown when hovering over menu button */\n  menuTitle: string;\n  /** Label for the remove button in participant menu  */\n  removeButtonLabel: string;\n  /** Label for the sharing icon in participant state stack  */\n  sharingIconLabel: string;\n  /** Label for the muted icon in participant state stack  */\n  mutedIconLabel: string;\n  /** placeholder text for participants who does not have a display name*/\n  displayNamePlaceholder?: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /** String shown when `participantState` is `Ringing` */\n  participantStateRinging?: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /** String shown when `participantState` is `Hold` */\n  participantStateHold?: string;\n}\n\n/**\n * Props for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemProps {\n  /** Unique User ID of the participant. This `userId` is available in the `onRenderAvatar` callback function */\n  userId?: string;\n  /** Name of participant. */\n  displayName?: string;\n  /** Optional indicator to show participant is the user. */\n  me?: boolean;\n  /** Optional callback returning a JSX element to override avatar. */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Optional array of IContextualMenuItem for contextual menu. */\n  menuItems?: IContextualMenuItem[];\n  /** Optional callback returning a JSX element rendered on the right portion of the ParticipantItem. Intended for adding icons. */\n  onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element | null;\n  /** Optional PersonaPresence to show participant presence. This will not have an effect if property avatar is assigned. */\n  presence?: PersonaPresence;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <ParticipantItem styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: ParticipantItemStyles;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ParticipantItemStrings>;\n  /**\n   * Optional callback when component is clicked\n   */\n  onClick?: (props?: ParticipantItemProps) => void;\n  /** prop to determine if we should show tooltip for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Optional value to determine and display a participants connection status.\n   * For example, `Connecting`, `Ringing` etc.\n   * The actual text that is displayed is determined by the localized string\n   * corresponding to the provided participant state.\n   * For example, `strings.participantStateConnecting` will be used if `participantState` is `Connecting`.\n   */\n  participantState?: ParticipantState;\n  /**\n   * Optional aria property that prefixes the ParticipantItems aria content\n   * Takes in a unique id value of the element you would like to be read before the ParticipantItem.\n   */\n  ariaLabelledBy?: string;\n}\n\n/**\n * Component to render a calling or chat participant.\n *\n * Displays the participant's avatar, displayName and status as well as optional icons and context menu.\n *\n * @public\n */\nexport const ParticipantItem = (props: ParticipantItemProps): JSX.Element => {\n  const {\n    userId,\n    displayName,\n    onRenderAvatar,\n    menuItems,\n    onRenderIcon,\n    presence,\n    styles,\n    me,\n    onClick,\n    showParticipantOverflowTooltip\n  } = props;\n  const [itemHovered, setItemHovered] = useState<boolean>(false);\n  const [itemFocused, setItemFocused] = useState<boolean>(false);\n  const [menuHidden, setMenuHidden] = useState<boolean>(true);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.participantItem;\n  const ids = useIdentifiers();\n  const uniqueId = useId();\n\n  const strings = { ...localeStrings, ...props.strings };\n\n  // For 'me' show empty name so avatar will get 'Person' icon, when there is no name\n  const meAvatarText = displayName?.trim() || '';\n\n  const avatarOptions = {\n    text: me ? meAvatarText : displayName?.trim() || strings.displayNamePlaceholder,\n    size: PersonaSize.size32,\n    presence: presence,\n    initialsTextColor: 'white',\n    showOverflowTooltip: showParticipantOverflowTooltip,\n    showUnknownPersonaCoin: !me && (!displayName?.trim() || displayName === strings.displayNamePlaceholder)\n  };\n\n  const avatar = onRenderAvatar ? (\n    onRenderAvatar(userId ?? '', avatarOptions)\n  ) : (\n    <Persona\n      className={mergeStyles(\n        {\n          // Prevents persona text from being vertically truncated if a global line height is less than 1.15.\n          lineHeight: '1.15rem'\n        },\n        styles?.avatar\n      )}\n      {...avatarOptions}\n    />\n  );\n\n  const meTextStyle = useMemo(\n    () => mergeStyles(meContainerStyle, { color: theme.palette.neutralSecondary }, styles?.me),\n    [theme.palette.neutralSecondary, styles?.me]\n  );\n  const contextualMenuStyle = useMemo(\n    () => mergeStyles({ background: theme.palette.neutralLighterAlt }, styles?.menu),\n    [theme.palette.neutralLighterAlt, styles?.menu]\n  );\n  const infoContainerStyle = useMemo(\n    () => mergeStyles(iconContainerStyle, { color: theme.palette.neutralTertiary }, styles?.iconContainer),\n    [theme.palette.neutralTertiary, styles?.iconContainer]\n  );\n\n  const menuButton = useMemo(\n    () => (\n      <Stack\n        horizontal={true}\n        horizontalAlign=\"end\"\n        className={mergeStyles(menuButtonContainerStyle)}\n        title={strings.menuTitle}\n        data-ui-id={ids.participantItemMenuButton}\n      >\n        <Icon\n          iconName={\n            itemHovered || itemFocused || !menuHidden ? 'ParticipantItemOptionsHovered' : 'ParticipantItemOptions'\n          }\n          className={iconStyles}\n        />\n      </Stack>\n    ),\n    [strings.menuTitle, ids.participantItemMenuButton, itemHovered, itemFocused, menuHidden]\n  );\n\n  const onDismissMenu = (): void => {\n    setItemHovered(false);\n    setItemFocused(false);\n    setMenuHidden(true);\n  };\n\n  const participantStateString = participantStateStringTrampoline(props, strings);\n  return (\n    <div\n      ref={containerRef}\n      role={'menuitem'}\n      data-is-focusable={true}\n      data-ui-id=\"participant-item\"\n      className={mergeStyles(\n        participantItemContainerStyle({\n          localparticipant: me,\n          clickable: !!menuItems && menuItems.length > 0\n        }),\n        styles?.root\n      )}\n      onMouseEnter={() => setItemHovered(true)}\n      onMouseLeave={() => setItemHovered(false)}\n      onFocus={() => setItemFocused(true)}\n      onBlur={() => setItemFocused(false)}\n      onClick={() => {\n        if (!participantStateString) {\n          setItemHovered(true);\n          setMenuHidden(false);\n          onClick?.(props);\n        }\n      }}\n      tabIndex={0}\n    >\n      <Stack\n        horizontal\n        className={mergeStyles({\n          width: `calc(100% - ${\n            !me && participantStateString ? participantStateMaxWidth : menuButtonContainerStyle.width\n          })`,\n          alignItems: 'center'\n        })}\n        id={uniqueId}\n        aria-labelledby={`${props.ariaLabelledBy} ${uniqueId}`}\n      >\n        {avatar}\n        {me && <Text className={meTextStyle}>{strings.isMeText}</Text>}\n        <Stack horizontal className={mergeStyles(infoContainerStyle)}>\n          {onRenderIcon && onRenderIcon(props)}\n        </Stack>\n      </Stack>\n      {/* When the participantStateString has a value, we don't show the menu  */}\n      {!me && participantStateString ? (\n        <Text data-ui-id=\"participant-item-state-string\" className={mergeStyles(participantStateStringStyles)}>\n          {participantStateString}\n        </Text>\n      ) : (\n        <div>\n          {menuItems && menuItems.length > 0 && (\n            <>\n              {menuButton}\n              <ContextualMenu\n                items={menuItems}\n                hidden={menuHidden}\n                target={containerRef}\n                onItemClick={onDismissMenu}\n                onDismiss={onDismissMenu}\n                directionalHint={DirectionalHint.bottomRightEdge}\n                className={contextualMenuStyle}\n                calloutProps={{\n                  preventDismissOnEvent\n                }}\n              />\n            </>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst participantStateStringTrampoline = (\n  props: ParticipantItemProps,\n  strings: ParticipantItemStrings\n): string | undefined => {\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n    ? strings?.participantStateRinging\n    : props.participantState === 'Hold'\n    ? strings?.participantStateHold\n    : undefined;\n\n  return undefined;\n};\n\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"ParticipantItem.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  ContextualMenu,\n  DirectionalHint,\n  Icon,\n  IContextualMenuItem,\n  IStyle,\n  mergeStyles,\n  Persona,\n  PersonaPresence,\n  PersonaSize,\n  Stack,\n  Text\n} from '@fluentui/react';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, OnRenderAvatarCallback } from '../types';\nimport {\n  iconContainerStyle,\n  iconStyles,\n  meContainerStyle,\n  menuButtonContainerStyle,\n  participantItemContainerStyle,\n  participantStateMaxWidth,\n  participantStateStringStyles\n} from './styles/ParticipantItem.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(one-to-n-calling) */\n/* @conditional-compile-remove(PSTN-calls) */\nimport { ParticipantState } from '../types';\nimport { useId } from '@fluentui/react-hooks';\n\n/**\n * Fluent styles for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemStyles extends BaseCustomStyles {\n  /** Styles for the avatar. */\n  avatar?: IStyle;\n  /** Styles for the (You) string. */\n  me?: IStyle;\n  /** Styles for the container of the icon. */\n  iconContainer?: IStyle;\n  /** Styles for the menu. */\n  menu?: IStyle;\n}\n\n/**\n * Strings of {@link ParticipantItem} that can be overridden.\n *\n * @public\n */\nexport interface ParticipantItemStrings {\n  /** String shown when participant is me */\n  isMeText: string;\n  /** String shown when hovering over menu button */\n  menuTitle: string;\n  /** Label for the remove button in participant menu  */\n  removeButtonLabel: string;\n  /** Label for the sharing icon in participant state stack  */\n  sharingIconLabel: string;\n  /** Label for the muted icon in participant state stack  */\n  mutedIconLabel: string;\n  /** placeholder text for participants who does not have a display name*/\n  displayNamePlaceholder?: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /** String shown when `participantState` is `Ringing` */\n  participantStateRinging?: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /** String shown when `participantState` is `Hold` */\n  participantStateHold?: string;\n}\n\n/**\n * Props for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemProps {\n  /** Unique User ID of the participant. This `userId` is available in the `onRenderAvatar` callback function */\n  userId?: string;\n  /** Name of participant. */\n  displayName?: string;\n  /** Optional indicator to show participant is the user. */\n  me?: boolean;\n  /** Optional callback returning a JSX element to override avatar. */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Optional array of IContextualMenuItem for contextual menu. */\n  menuItems?: IContextualMenuItem[];\n  /** Optional callback returning a JSX element rendered on the right portion of the ParticipantItem. Intended for adding icons. */\n  onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element | null;\n  /** Optional PersonaPresence to show participant presence. This will not have an effect if property avatar is assigned. */\n  presence?: PersonaPresence;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <ParticipantItem styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: ParticipantItemStyles;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ParticipantItemStrings>;\n  /**\n   * Optional callback when component is clicked\n   */\n  onClick?: (props?: ParticipantItemProps) => void;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Optional value to determine and display a participants connection status.\n   * For example, `Connecting`, `Ringing` etc.\n   * The actual text that is displayed is determined by the localized string\n   * corresponding to the provided participant state.\n   * For example, `strings.participantStateConnecting` will be used if `participantState` is `Connecting`.\n   */\n  participantState?: ParticipantState;\n  /**\n   * Optional aria property that prefixes the ParticipantItems aria content\n   * Takes in a unique id value of the element you would like to be read before the ParticipantItem.\n   */\n  ariaLabelledBy?: string;\n}\n\n/**\n * Component to render a calling or chat participant.\n *\n * Displays the participant's avatar, displayName and status as well as optional icons and context menu.\n *\n * @public\n */\nexport const ParticipantItem = (props: ParticipantItemProps): JSX.Element => {\n  const {\n    userId,\n    displayName,\n    onRenderAvatar,\n    menuItems,\n    onRenderIcon,\n    presence,\n    styles,\n    me,\n    onClick,\n    showParticipantOverflowTooltip\n  } = props;\n  const [itemHovered, setItemHovered] = useState<boolean>(false);\n  const [itemFocused, setItemFocused] = useState<boolean>(false);\n  const [menuHidden, setMenuHidden] = useState<boolean>(true);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.participantItem;\n  const ids = useIdentifiers();\n  const uniqueId = useId();\n\n  const strings = { ...localeStrings, ...props.strings };\n\n  // For 'me' show empty name so avatar will get 'Person' icon, when there is no name\n  const meAvatarText = displayName?.trim() || '';\n\n  const avatarOptions = {\n    text: me ? meAvatarText : displayName?.trim() || strings.displayNamePlaceholder,\n    size: PersonaSize.size32,\n    presence: presence,\n    initialsTextColor: 'white',\n    showOverflowTooltip: showParticipantOverflowTooltip,\n    showUnknownPersonaCoin: !me && (!displayName?.trim() || displayName === strings.displayNamePlaceholder)\n  };\n\n  const avatar = onRenderAvatar ? (\n    onRenderAvatar(userId ?? '', avatarOptions)\n  ) : (\n    <Persona\n      className={mergeStyles(\n        {\n          // Prevents persona text from being vertically truncated if a global line height is less than 1.15.\n          lineHeight: '1.15rem'\n        },\n        styles?.avatar\n      )}\n      {...avatarOptions}\n    />\n  );\n\n  const meTextStyle = useMemo(\n    () => mergeStyles(meContainerStyle, { color: theme.palette.neutralSecondary }, styles?.me),\n    [theme.palette.neutralSecondary, styles?.me]\n  );\n  const contextualMenuStyle = useMemo(\n    () => mergeStyles({ background: theme.palette.neutralLighterAlt }, styles?.menu),\n    [theme.palette.neutralLighterAlt, styles?.menu]\n  );\n  const infoContainerStyle = useMemo(\n    () => mergeStyles(iconContainerStyle, { color: theme.palette.neutralTertiary }, styles?.iconContainer),\n    [theme.palette.neutralTertiary, styles?.iconContainer]\n  );\n\n  const menuButton = useMemo(\n    () => (\n      <Stack\n        horizontal={true}\n        horizontalAlign=\"end\"\n        className={mergeStyles(menuButtonContainerStyle)}\n        title={strings.menuTitle}\n        data-ui-id={ids.participantItemMenuButton}\n      >\n        <Icon\n          iconName={\n            itemHovered || itemFocused || !menuHidden ? 'ParticipantItemOptionsHovered' : 'ParticipantItemOptions'\n          }\n          className={iconStyles}\n        />\n      </Stack>\n    ),\n    [strings.menuTitle, ids.participantItemMenuButton, itemHovered, itemFocused, menuHidden]\n  );\n\n  const onDismissMenu = (): void => {\n    setItemHovered(false);\n    setItemFocused(false);\n    setMenuHidden(true);\n  };\n\n  const participantStateString = participantStateStringTrampoline(props, strings);\n  return (\n    <div\n      ref={containerRef}\n      role={'menuitem'}\n      data-is-focusable={true}\n      data-ui-id=\"participant-item\"\n      className={mergeStyles(\n        participantItemContainerStyle({\n          localparticipant: me,\n          clickable: !!menuItems && menuItems.length > 0\n        }),\n        styles?.root\n      )}\n      onMouseEnter={() => setItemHovered(true)}\n      onMouseLeave={() => setItemHovered(false)}\n      onFocus={() => setItemFocused(true)}\n      onBlur={() => setItemFocused(false)}\n      onClick={() => {\n        if (!participantStateString) {\n          setItemHovered(true);\n          setMenuHidden(false);\n          onClick?.(props);\n        }\n      }}\n      tabIndex={0}\n    >\n      <Stack\n        horizontal\n        className={mergeStyles({\n          width: `calc(100% - ${\n            !me && participantStateString ? participantStateMaxWidth : menuButtonContainerStyle.width\n          })`,\n          alignItems: 'center'\n        })}\n        id={uniqueId}\n        aria-labelledby={`${props.ariaLabelledBy} ${uniqueId}`}\n      >\n        {avatar}\n        {me && <Text className={meTextStyle}>{strings.isMeText}</Text>}\n        <Stack horizontal className={mergeStyles(infoContainerStyle)}>\n          {onRenderIcon && onRenderIcon(props)}\n        </Stack>\n      </Stack>\n      {/* When the participantStateString has a value, we don't show the menu  */}\n      {!me && participantStateString ? (\n        <Text data-ui-id=\"participant-item-state-string\" className={mergeStyles(participantStateStringStyles)}>\n          {participantStateString}\n        </Text>\n      ) : (\n        <div>\n          {menuItems && menuItems.length > 0 && (\n            <>\n              {menuButton}\n              <ContextualMenu\n                items={menuItems}\n                hidden={menuHidden}\n                target={containerRef}\n                onItemClick={onDismissMenu}\n                onDismiss={onDismissMenu}\n                directionalHint={DirectionalHint.bottomRightEdge}\n                className={contextualMenuStyle}\n                calloutProps={{\n                  preventDismissOnEvent\n                }}\n              />\n            </>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst participantStateStringTrampoline = (\n  props: ParticipantItemProps,\n  strings: ParticipantItemStrings\n): string | undefined => {\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n    ? strings?.participantStateRinging\n    : props.participantState === 'Hold'\n    ? strings?.participantStateHold\n    : undefined;\n\n  return undefined;\n};\n\"../../../acs-ui-common/src\""]}

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

@@ -54,7 +54,7 @@ export declare type ParticipantListProps = {
     onParticipantClick?: (participant?: ParticipantListParticipant) => void;
     /** Styles for the {@link ParticipantList} */
     styles?: ParticipantListStyles;
-    /** prop to determine if we should show tooltip for participants or not */
+    /** Optional value to determine if the tooltip should be shown for participants or not */
     showParticipantOverflowTooltip?: boolean;
     /** Optional aria-lablledby prop that prefixes each ParticipantItem aria-label */
     participantAriaLabelledBy?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  Icon,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  merge,\n  mergeStyles,\n  PersonaPresence,\n  Stack\n} from '@fluentui/react';\nimport React, { useCallback, useMemo } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '../permissions';\nimport {\n  BaseCustomStyles,\n  CallParticipantListParticipant,\n  OnRenderAvatarCallback,\n  ParticipantListParticipant\n} from '../types';\nimport { ParticipantItem, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\nimport { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';\n\n/**\n * Styles for the {@link ParticipantList} {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantListItemStyles extends ParticipantItemStyles {\n  /** Styles applied to the sub-menu of the {@link ParticipantList} {@link ParticipantItem}. */\n  participantSubMenuItemsStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the {@link ParticipantList}.\n *\n * @public\n */\nexport interface ParticipantListStyles extends BaseCustomStyles {\n  /** Styles for the {@link ParticipantList} {@link ParticipantItem}. */\n  participantItemStyles?: ParticipantListItemStyles;\n}\n\n/**\n * A callback for providing custom menu items for each participant in {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantMenuItemsCallback = (\n  participantUserId: string,\n  userId?: string,\n  defaultMenuItems?: IContextualMenuItem[]\n) => IContextualMenuItem[];\n\n/**\n * Props for {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantListProps = {\n  /** Participants in user call or chat */\n  participants: ParticipantListParticipant[];\n  /** User ID of user */\n  myUserId?: string;\n  /**\n   * If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n   *\n   * @defaultValue `false`\n   */\n  excludeMe?: boolean;\n  /** Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem`  */\n  onRenderParticipant?: (participant: ParticipantListParticipant) => JSX.Element | null;\n  /** Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned.  */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Optional callback to render the context menu for each participant  */\n  onRemoveParticipant?: (userId: string) => void;\n  /** Optional callback to render custom menu items for each participant. */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /** Optional callback when rendered ParticipantItem is clicked */\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void;\n  /** Styles for the {@link ParticipantList} */\n  styles?: ParticipantListStyles;\n  /** prop to determine if we should show tooltip for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n  /** Optional aria-lablledby prop that prefixes each ParticipantItem aria-label */\n  participantAriaLabelledBy?: string;\n};\n\nconst onRenderParticipantDefault = (\n  participant: ParticipantListParticipant,\n  strings: ParticipantItemStrings,\n  myUserId?: string,\n  onRenderAvatar?: OnRenderAvatarCallback,\n  createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[],\n  styles?: ParticipantListItemStyles,\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void,\n  showParticipantOverflowTooltip?: boolean,\n  participantAriaLabelledBy?: string\n): JSX.Element | null => {\n  const callingParticipant = participant as CallParticipantListParticipant;\n\n  let presence: PersonaPresence | undefined = undefined;\n  if (callingParticipant) {\n    if (callingParticipant.state === 'Connected') {\n      presence = PersonaPresence.online;\n    } else if (callingParticipant.state === 'Idle') {\n      presence = PersonaPresence.away;\n    }\n  }\n\n  const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n\n  const onRenderIcon =\n    callingParticipant?.isScreenSharing || callingParticipant?.isMuted\n      ? () => (\n          <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>\n            {callingParticipant.isScreenSharing && (\n              <Icon\n                iconName=\"ParticipantItemScreenShareStart\"\n                className={iconStyles}\n                ariaLabel={strings.sharingIconLabel}\n              />\n            )}\n            {callingParticipant.isMuted && (\n              <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n            )}\n          </Stack>\n        )\n      : () => null;\n\n  return (\n    <ParticipantItem\n      styles={styles}\n      key={participant.userId}\n      userId={participant.userId}\n      displayName={participant.displayName}\n      me={myUserId ? participant.userId === myUserId : false}\n      menuItems={menuItems}\n      presence={presence}\n      onRenderIcon={onRenderIcon}\n      onRenderAvatar={onRenderAvatar}\n      onClick={() => onParticipantClick?.(participant)}\n      showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n      /* @conditional-compile-remove(one-to-n-calling) */\n      /* @conditional-compile-remove(PSTN-calls) */\n      participantState={callingParticipant.state}\n      ariaLabelledBy={participantAriaLabelledBy}\n    />\n  );\n};\n\nconst getParticipantsForDefaultRender = (\n  participants: ParticipantListParticipant[],\n  excludeMe: boolean,\n  myUserId: string | undefined\n): ParticipantListParticipant[] => {\n  if (!excludeMe || !myUserId) {\n    return [...participants];\n  }\n\n  const userIndex = participants.map((p) => p.userId).indexOf(myUserId);\n\n  if (userIndex === -1) {\n    return [...participants];\n  }\n\n  const remoteParticipants = [...participants];\n  remoteParticipants.splice(userIndex, 1);\n\n  return remoteParticipants;\n};\n\n/**\n * Component to render all calling or chat participants.\n *\n * By default, each participant is rendered with {@link ParticipantItem}. See {@link ParticipantListProps.onRenderParticipant} to override.\n *\n * @public\n */\nexport const ParticipantList = (props: ParticipantListProps): JSX.Element => {\n  const {\n    excludeMe = false,\n    myUserId,\n    participants,\n    onRemoveParticipant,\n    onRenderAvatar,\n    onRenderParticipant,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip,\n    participantAriaLabelledBy\n  } = props;\n\n  const ids = useIdentifiers();\n  const strings = useLocale().strings.participantItem;\n\n  const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n    return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n  }, [participants, excludeMe, myUserId, onRenderParticipant]);\n\n  const createParticipantMenuItems = useCallback(\n    (participant: ParticipantListParticipant): IContextualMenuItem[] => {\n      let menuItems: IContextualMenuItem[] = [];\n      let participantIsRemovable = participant.isRemovable;\n      /* @conditional-compile-remove(rooms) */\n      participantIsRemovable = _usePermissions().removeParticipantButton && participantIsRemovable;\n      if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {\n        menuItems.push({\n          key: 'remove',\n          text: strings.removeButtonLabel,\n          onClick: () => onRemoveParticipant(participant.userId),\n          itemProps: {\n            styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles\n          },\n          'data-ui-id': ids.participantListRemoveParticipantButton\n        });\n      }\n\n      if (onFetchParticipantMenuItems) {\n        menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n      }\n\n      return menuItems;\n    },\n    [\n      ids.participantListRemoveParticipantButton,\n      myUserId,\n      onFetchParticipantMenuItems,\n      onRemoveParticipant,\n      props.styles?.participantItemStyles?.participantSubMenuItemsStyles,\n      strings.removeButtonLabel\n    ]\n  );\n\n  const participantItemStyles = useMemo(\n    () => merge(participantListItemStyle, props.styles?.participantItemStyles),\n    [props.styles?.participantItemStyles]\n  );\n  return (\n    <Stack data-ui-id={ids.participantList} className={mergeStyles(participantListStyle, props.styles?.root)}>\n      {displayedParticipants.map((participant: ParticipantListParticipant) =>\n        onRenderParticipant\n          ? onRenderParticipant(participant)\n          : onRenderParticipantDefault(\n              participant,\n              strings,\n              myUserId,\n              onRenderAvatar,\n              createParticipantMenuItems,\n              participantItemStyles,\n              props.onParticipantClick,\n              showParticipantOverflowTooltip,\n              participantAriaLabelledBy\n            )\n      )}\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  Icon,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  merge,\n  mergeStyles,\n  PersonaPresence,\n  Stack\n} from '@fluentui/react';\nimport React, { useCallback, useMemo } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '../permissions';\nimport {\n  BaseCustomStyles,\n  CallParticipantListParticipant,\n  OnRenderAvatarCallback,\n  ParticipantListParticipant\n} from '../types';\nimport { ParticipantItem, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\nimport { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';\n\n/**\n * Styles for the {@link ParticipantList} {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantListItemStyles extends ParticipantItemStyles {\n  /** Styles applied to the sub-menu of the {@link ParticipantList} {@link ParticipantItem}. */\n  participantSubMenuItemsStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the {@link ParticipantList}.\n *\n * @public\n */\nexport interface ParticipantListStyles extends BaseCustomStyles {\n  /** Styles for the {@link ParticipantList} {@link ParticipantItem}. */\n  participantItemStyles?: ParticipantListItemStyles;\n}\n\n/**\n * A callback for providing custom menu items for each participant in {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantMenuItemsCallback = (\n  participantUserId: string,\n  userId?: string,\n  defaultMenuItems?: IContextualMenuItem[]\n) => IContextualMenuItem[];\n\n/**\n * Props for {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantListProps = {\n  /** Participants in user call or chat */\n  participants: ParticipantListParticipant[];\n  /** User ID of user */\n  myUserId?: string;\n  /**\n   * If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n   *\n   * @defaultValue `false`\n   */\n  excludeMe?: boolean;\n  /** Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem`  */\n  onRenderParticipant?: (participant: ParticipantListParticipant) => JSX.Element | null;\n  /** Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned.  */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Optional callback to render the context menu for each participant  */\n  onRemoveParticipant?: (userId: string) => void;\n  /** Optional callback to render custom menu items for each participant. */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /** Optional callback when rendered ParticipantItem is clicked */\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void;\n  /** Styles for the {@link ParticipantList} */\n  styles?: ParticipantListStyles;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n  /** Optional aria-lablledby prop that prefixes each ParticipantItem aria-label */\n  participantAriaLabelledBy?: string;\n};\n\nconst onRenderParticipantDefault = (\n  participant: ParticipantListParticipant,\n  strings: ParticipantItemStrings,\n  myUserId?: string,\n  onRenderAvatar?: OnRenderAvatarCallback,\n  createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[],\n  styles?: ParticipantListItemStyles,\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void,\n  showParticipantOverflowTooltip?: boolean,\n  participantAriaLabelledBy?: string\n): JSX.Element | null => {\n  const callingParticipant = participant as CallParticipantListParticipant;\n\n  let presence: PersonaPresence | undefined = undefined;\n  if (callingParticipant) {\n    if (callingParticipant.state === 'Connected') {\n      presence = PersonaPresence.online;\n    } else if (callingParticipant.state === 'Idle') {\n      presence = PersonaPresence.away;\n    }\n  }\n\n  const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n\n  const onRenderIcon =\n    callingParticipant?.isScreenSharing || callingParticipant?.isMuted\n      ? () => (\n          <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>\n            {callingParticipant.isScreenSharing && (\n              <Icon\n                iconName=\"ParticipantItemScreenShareStart\"\n                className={iconStyles}\n                ariaLabel={strings.sharingIconLabel}\n              />\n            )}\n            {callingParticipant.isMuted && (\n              <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n            )}\n          </Stack>\n        )\n      : () => null;\n\n  return (\n    <ParticipantItem\n      styles={styles}\n      key={participant.userId}\n      userId={participant.userId}\n      displayName={participant.displayName}\n      me={myUserId ? participant.userId === myUserId : false}\n      menuItems={menuItems}\n      presence={presence}\n      onRenderIcon={onRenderIcon}\n      onRenderAvatar={onRenderAvatar}\n      onClick={() => onParticipantClick?.(participant)}\n      showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n      /* @conditional-compile-remove(one-to-n-calling) */\n      /* @conditional-compile-remove(PSTN-calls) */\n      participantState={callingParticipant.state}\n      ariaLabelledBy={participantAriaLabelledBy}\n    />\n  );\n};\n\nconst getParticipantsForDefaultRender = (\n  participants: ParticipantListParticipant[],\n  excludeMe: boolean,\n  myUserId: string | undefined\n): ParticipantListParticipant[] => {\n  if (!excludeMe || !myUserId) {\n    return [...participants];\n  }\n\n  const userIndex = participants.map((p) => p.userId).indexOf(myUserId);\n\n  if (userIndex === -1) {\n    return [...participants];\n  }\n\n  const remoteParticipants = [...participants];\n  remoteParticipants.splice(userIndex, 1);\n\n  return remoteParticipants;\n};\n\n/**\n * Component to render all calling or chat participants.\n *\n * By default, each participant is rendered with {@link ParticipantItem}. See {@link ParticipantListProps.onRenderParticipant} to override.\n *\n * @public\n */\nexport const ParticipantList = (props: ParticipantListProps): JSX.Element => {\n  const {\n    excludeMe = false,\n    myUserId,\n    participants,\n    onRemoveParticipant,\n    onRenderAvatar,\n    onRenderParticipant,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip,\n    participantAriaLabelledBy\n  } = props;\n\n  const ids = useIdentifiers();\n  const strings = useLocale().strings.participantItem;\n\n  const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n    return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n  }, [participants, excludeMe, myUserId, onRenderParticipant]);\n\n  const createParticipantMenuItems = useCallback(\n    (participant: ParticipantListParticipant): IContextualMenuItem[] => {\n      let menuItems: IContextualMenuItem[] = [];\n      let participantIsRemovable = participant.isRemovable;\n      /* @conditional-compile-remove(rooms) */\n      participantIsRemovable = _usePermissions().removeParticipantButton && participantIsRemovable;\n      if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {\n        menuItems.push({\n          key: 'remove',\n          text: strings.removeButtonLabel,\n          onClick: () => onRemoveParticipant(participant.userId),\n          itemProps: {\n            styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles\n          },\n          'data-ui-id': ids.participantListRemoveParticipantButton\n        });\n      }\n\n      if (onFetchParticipantMenuItems) {\n        menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n      }\n\n      return menuItems;\n    },\n    [\n      ids.participantListRemoveParticipantButton,\n      myUserId,\n      onFetchParticipantMenuItems,\n      onRemoveParticipant,\n      props.styles?.participantItemStyles?.participantSubMenuItemsStyles,\n      strings.removeButtonLabel\n    ]\n  );\n\n  const participantItemStyles = useMemo(\n    () => merge(participantListItemStyle, props.styles?.participantItemStyles),\n    [props.styles?.participantItemStyles]\n  );\n  return (\n    <Stack data-ui-id={ids.participantList} className={mergeStyles(participantListStyle, props.styles?.root)}>\n      {displayedParticipants.map((participant: ParticipantListParticipant) =>\n        onRenderParticipant\n          ? onRenderParticipant(participant)\n          : onRenderParticipantDefault(\n              participant,\n              strings,\n              myUserId,\n              onRenderAvatar,\n              createParticipantMenuItems,\n              participantItemStyles,\n              props.onParticipantClick,\n              showParticipantOverflowTooltip,\n              participantAriaLabelledBy\n            )\n      )}\n    </Stack>\n  );\n};\n"]}

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

@@ -120,7 +120,7 @@ export interface ParticipantsButtonProps extends ControlBarButtonProps {
      * Optional strings to override in component
      */
     strings?: Partial<ParticipantsButtonStrings>;
-    /** prop to determine if we should show tooltip for participants or not */
+    /** Optional value to determine if the tooltip should be shown for participants or not */
     showParticipantOverflowTooltip?: boolean;
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantsButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantsButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  ContextualMenuItemType,\n  IContextualMenuItem,\n  IContextualMenuProps,\n  IContextualMenuStyles,\n  IContextualMenuItemStyles,\n  merge\n} from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport copy from 'copy-to-clipboard';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport {\n  ParticipantList,\n  ParticipantListProps,\n  ParticipantListStyles,\n  ParticipantMenuItemsCallback\n} from './ParticipantList';\nimport { participantsButtonMenuPropsStyle } from './styles/ControlBar.styles';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { useIdentifiers } from '../identifiers';\nimport { CommunicationParticipant } from '../types/CommunicationParticipant';\nimport { OnRenderAvatarCallback } from '../types/OnRender';\nimport { ParticipantListParticipant } from '../types';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '../permissions/PermissionsProvider';\nimport { Announcer } from './Announcer';\n\n/**\n * Styles for the {@link ParticipantsButton} menu.\n *\n * @public\n */\nexport interface ParticipantsButtonContextualMenuStyles extends IContextualMenuStyles {\n  /** Styles for the {@link ParticipantsButton} menu items. */\n  menuItemStyles?: IContextualMenuItemStyles;\n  /** Styles for the {@link ParticipantList} menu item inside the {@link ParticipantsButton} menu. */\n  participantListStyles?: ParticipantListStyles;\n}\n\n/**\n * Styles Props for {@link ParticipantsButton}.\n *\n * @public\n */\nexport interface ParticipantsButtonStyles extends ControlBarButtonStyles {\n  /** Styles of the {@link ParticipantsButton} menu flyout */\n  menuStyles?: Partial<ParticipantsButtonContextualMenuStyles>;\n}\n\n/**\n * Strings of {@link ParticipantsButton} that can be overridden.\n *\n * @public\n */\nexport interface ParticipantsButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /**\n   * Button tooltip content.\n   */\n  tooltipContent?: string;\n  /**\n   * Header of menu pop up\n   */\n  menuHeader: string;\n  /**\n   * Label of menu button to show list of participants. Placeholders: [numParticipants]\n   */\n  participantsListButtonLabel: string;\n  /**\n   * Label of menu button to copy invite link\n   */\n  copyInviteLinkButtonLabel: string;\n  /**\n   * Label of menu button to mute all participants\n   */\n  muteAllButtonLabel: string;\n  /**\n   * Narrator announcement for when the invite link has been copied by the user to the clipboard\n   */\n  copyInviteLinkActionedAriaLabel: string;\n}\n\n/**\n * Props for {@link ParticipantsButton}.\n *\n * @public\n */\nexport interface ParticipantsButtonProps extends ControlBarButtonProps {\n  /**\n   * Participants in user call or chat\n   */\n  participants: ParticipantListParticipant[];\n  /**\n   * User ID of user\n   */\n  myUserId?: string;\n  /**\n   * If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n   *\n   * @defaultValue `false`\n   */\n  excludeMe?: boolean;\n  /**\n   * Callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem`\n   */\n  onRenderParticipant?: (participant: CommunicationParticipant) => JSX.Element | null;\n  /**\n   * Callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned.\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Callback to render the context menu for each participant\n   */\n  onRemoveParticipant?: (userId: string) => void;\n  /**\n   * Callback to render custom menu items for each participant.\n   */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /**\n   * Optional callback to render a custom participant list.\n   */\n  onRenderParticipantList?: (props: ParticipantListProps) => JSX.Element | null;\n  /**\n   * Allows users to pass an object containing custom CSS styles.\n   * @Example\n   * ```\n   * <ParticipantsButton styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: ParticipantsButtonStyles;\n  /**\n   * URL to invite new participants to the current call\n   */\n  callInvitationURL?: string;\n  /**\n   * CallBack to mute all remote participants\n   */\n  onMuteAll?: () => void;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ParticipantsButtonStrings>;\n  /** prop to determine if we should show tooltip for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n}\n\n/**\n * A button to show a menu with calling or chat participants.\n *\n * Can be used with {@link ControlBar}.\n *\n * This button contains dropdown menu items defined through its property `menuProps`. By default, it can display the number of remote participants with the full list\n * as sub-menu and an option to mute all participants, as well as a copy-to-clipboard button to copy the call invitation URL.\n * This `menuProps` can be fully redefined and its property is of type [IContextualMenuProps](https://developer.microsoft.com/fluentui#/controls/web/contextualmenu#IContextualMenuProps).\n *\n * @public\n */\nexport const ParticipantsButton = (props: ParticipantsButtonProps): JSX.Element => {\n  const {\n    callInvitationURL,\n    styles,\n    onMuteAll,\n    onRenderIcon,\n    onRenderParticipantList,\n    participants,\n    myUserId,\n    excludeMe,\n    onRenderParticipant,\n    onRenderAvatar,\n    onRemoveParticipant,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip\n  } = props;\n\n  const disabled = props.disabled;\n\n  const [copyInviteLinkAnnouncerStrings, setCopyInviteLinkAnnouncerStrings] = useState<string>('');\n\n  const onRenderPeopleIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonParticipants\" />\n  );\n\n  const ids = useIdentifiers();\n\n  const onMuteAllCallback = useCallback(() => {\n    if (onMuteAll) {\n      onMuteAll();\n    }\n  }, [onMuteAll]);\n\n  const defaultParticipantList = useCallback(() => {\n    return (\n      <ParticipantList\n        participants={participants}\n        myUserId={myUserId}\n        excludeMe={excludeMe}\n        onRenderParticipant={onRenderParticipant}\n        onRenderAvatar={onRenderAvatar}\n        onRemoveParticipant={onRemoveParticipant}\n        onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n        styles={styles?.menuStyles?.participantListStyles}\n        showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n      />\n    );\n  }, [\n    excludeMe,\n    myUserId,\n    onRemoveParticipant,\n    onRenderAvatar,\n    onRenderParticipant,\n    participants,\n    styles?.menuStyles?.participantListStyles,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip\n  ]);\n\n  const onCopyCallback = useCallback(() => {\n    if (callInvitationURL) {\n      return copy(callInvitationURL);\n    }\n    return false;\n  }, [callInvitationURL]);\n\n  const localeStrings = useLocale().strings.participantsButton;\n  const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n  const participantCount = participants.length;\n\n  /**\n   * sets the announcement string for when the link is copied.\n   */\n  const toggleAnnouncerString = useCallback(() => {\n    setCopyInviteLinkAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);\n    /**\n     * Clears the announcer string after the user clicks the\n     * copyInviteLink button allowing it to be re-announced.\n     */\n    setTimeout(() => {\n      setCopyInviteLinkAnnouncerStrings('');\n    }, 3000);\n  }, [strings.copyInviteLinkActionedAriaLabel]);\n\n  const generateDefaultParticipantsSubMenuProps = useCallback((): IContextualMenuItem[] => {\n    const items: IContextualMenuItem[] = [];\n\n    if (participantCount > 0) {\n      items.push({\n        key: 'participantListMenuItemKey',\n        onRender: onRenderParticipantList ?? defaultParticipantList\n      });\n\n      items.push({ key: 'participantsDivider1', itemType: ContextualMenuItemType.Divider });\n\n      if (onMuteAll) {\n        items.push({\n          key: 'muteAllKey',\n          text: strings.muteAllButtonLabel,\n          title: strings.muteAllButtonLabel,\n          styles: styles?.menuStyles?.menuItemStyles,\n          iconProps: { iconName: 'MicOff2' },\n          onClick: onMuteAllCallback\n        });\n      }\n    }\n\n    return items;\n  }, [\n    participantCount,\n    onRenderParticipantList,\n    defaultParticipantList,\n    onMuteAll,\n    strings.muteAllButtonLabel,\n    styles?.menuStyles?.menuItemStyles,\n    onMuteAllCallback\n  ]);\n\n  const defaultMenuProps = useMemo((): IContextualMenuProps => {\n    const menuProps: IContextualMenuProps = {\n      title: strings.menuHeader,\n      ariaLabel: strings.menuHeader,\n      styles: merge(participantsButtonMenuPropsStyle, styles?.menuStyles),\n      items: [],\n      calloutProps: {\n        preventDismissOnEvent\n      }\n    };\n\n    if (participantCount > 0) {\n      const participantIds = participants.map((p) => p.userId);\n\n      let participantCountWithoutMe = participantIds.length;\n      if (excludeMe) {\n        participantCountWithoutMe -= 1;\n      }\n\n      menuProps.items.push({\n        key: 'participantCountKey',\n        name: _formatString(strings.participantsListButtonLabel, { numParticipants: `${participantCountWithoutMe}` }),\n        itemProps: { styles: styles?.menuStyles?.menuItemStyles },\n        iconProps: { iconName: 'People' },\n        subMenuProps: {\n          items: generateDefaultParticipantsSubMenuProps(),\n          calloutProps: {\n            styles: {\n              root: {\n                // Confine the menu to the parents bounds.\n                // More info: https://github.com/microsoft/fluentui/issues/18835\n                maxWidth: '100%'\n              }\n            },\n            style: {\n              maxHeight: '20rem'\n            },\n            // Disable dismiss on resize to work around a couple Fluent UI bugs\n            // See reasoning in the props for the parent menu.\n            preventDismissOnEvent\n          }\n        },\n        'data-ui-id': ids.participantButtonPeopleMenuItem\n      });\n    }\n\n    if (callInvitationURL) {\n      menuProps.items.push({\n        key: 'InviteLinkKey',\n        name: strings.copyInviteLinkButtonLabel,\n        title: strings.copyInviteLinkButtonLabel,\n        itemProps: { styles: styles?.menuStyles?.menuItemStyles },\n        iconProps: { iconName: 'Link' },\n        onClick: () => {\n          onCopyCallback();\n          toggleAnnouncerString();\n        }\n      });\n    }\n\n    return menuProps;\n  }, [\n    strings.menuHeader,\n    strings.participantsListButtonLabel,\n    strings.copyInviteLinkButtonLabel,\n    styles?.menuStyles,\n    participantCount,\n    callInvitationURL,\n    participants,\n    excludeMe,\n    ids.participantButtonPeopleMenuItem,\n    generateDefaultParticipantsSubMenuProps,\n    onCopyCallback,\n    toggleAnnouncerString\n  ]);\n\n  return (\n    <>\n      <Announcer announcementString={copyInviteLinkAnnouncerStrings} ariaLive={'polite'} />\n      <ControlBarButton\n        {...props}\n        disabled={disabled}\n        menuProps={props.menuProps ?? defaultMenuProps}\n        menuIconProps={{ hidden: true }}\n        onRenderIcon={onRenderIcon ?? onRenderPeopleIcon}\n        strings={strings}\n        labelKey={props.labelKey ?? 'participantsButtonLabel'}\n      />\n    </>\n  );\n};\n\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"ParticipantsButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantsButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  ContextualMenuItemType,\n  IContextualMenuItem,\n  IContextualMenuProps,\n  IContextualMenuStyles,\n  IContextualMenuItemStyles,\n  merge\n} from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport copy from 'copy-to-clipboard';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport {\n  ParticipantList,\n  ParticipantListProps,\n  ParticipantListStyles,\n  ParticipantMenuItemsCallback\n} from './ParticipantList';\nimport { participantsButtonMenuPropsStyle } from './styles/ControlBar.styles';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { useIdentifiers } from '../identifiers';\nimport { CommunicationParticipant } from '../types/CommunicationParticipant';\nimport { OnRenderAvatarCallback } from '../types/OnRender';\nimport { ParticipantListParticipant } from '../types';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '../permissions/PermissionsProvider';\nimport { Announcer } from './Announcer';\n\n/**\n * Styles for the {@link ParticipantsButton} menu.\n *\n * @public\n */\nexport interface ParticipantsButtonContextualMenuStyles extends IContextualMenuStyles {\n  /** Styles for the {@link ParticipantsButton} menu items. */\n  menuItemStyles?: IContextualMenuItemStyles;\n  /** Styles for the {@link ParticipantList} menu item inside the {@link ParticipantsButton} menu. */\n  participantListStyles?: ParticipantListStyles;\n}\n\n/**\n * Styles Props for {@link ParticipantsButton}.\n *\n * @public\n */\nexport interface ParticipantsButtonStyles extends ControlBarButtonStyles {\n  /** Styles of the {@link ParticipantsButton} menu flyout */\n  menuStyles?: Partial<ParticipantsButtonContextualMenuStyles>;\n}\n\n/**\n * Strings of {@link ParticipantsButton} that can be overridden.\n *\n * @public\n */\nexport interface ParticipantsButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /**\n   * Button tooltip content.\n   */\n  tooltipContent?: string;\n  /**\n   * Header of menu pop up\n   */\n  menuHeader: string;\n  /**\n   * Label of menu button to show list of participants. Placeholders: [numParticipants]\n   */\n  participantsListButtonLabel: string;\n  /**\n   * Label of menu button to copy invite link\n   */\n  copyInviteLinkButtonLabel: string;\n  /**\n   * Label of menu button to mute all participants\n   */\n  muteAllButtonLabel: string;\n  /**\n   * Narrator announcement for when the invite link has been copied by the user to the clipboard\n   */\n  copyInviteLinkActionedAriaLabel: string;\n}\n\n/**\n * Props for {@link ParticipantsButton}.\n *\n * @public\n */\nexport interface ParticipantsButtonProps extends ControlBarButtonProps {\n  /**\n   * Participants in user call or chat\n   */\n  participants: ParticipantListParticipant[];\n  /**\n   * User ID of user\n   */\n  myUserId?: string;\n  /**\n   * If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n   *\n   * @defaultValue `false`\n   */\n  excludeMe?: boolean;\n  /**\n   * Callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem`\n   */\n  onRenderParticipant?: (participant: CommunicationParticipant) => JSX.Element | null;\n  /**\n   * Callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned.\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Callback to render the context menu for each participant\n   */\n  onRemoveParticipant?: (userId: string) => void;\n  /**\n   * Callback to render custom menu items for each participant.\n   */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /**\n   * Optional callback to render a custom participant list.\n   */\n  onRenderParticipantList?: (props: ParticipantListProps) => JSX.Element | null;\n  /**\n   * Allows users to pass an object containing custom CSS styles.\n   * @Example\n   * ```\n   * <ParticipantsButton styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: ParticipantsButtonStyles;\n  /**\n   * URL to invite new participants to the current call\n   */\n  callInvitationURL?: string;\n  /**\n   * CallBack to mute all remote participants\n   */\n  onMuteAll?: () => void;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ParticipantsButtonStrings>;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n}\n\n/**\n * A button to show a menu with calling or chat participants.\n *\n * Can be used with {@link ControlBar}.\n *\n * This button contains dropdown menu items defined through its property `menuProps`. By default, it can display the number of remote participants with the full list\n * as sub-menu and an option to mute all participants, as well as a copy-to-clipboard button to copy the call invitation URL.\n * This `menuProps` can be fully redefined and its property is of type [IContextualMenuProps](https://developer.microsoft.com/fluentui#/controls/web/contextualmenu#IContextualMenuProps).\n *\n * @public\n */\nexport const ParticipantsButton = (props: ParticipantsButtonProps): JSX.Element => {\n  const {\n    callInvitationURL,\n    styles,\n    onMuteAll,\n    onRenderIcon,\n    onRenderParticipantList,\n    participants,\n    myUserId,\n    excludeMe,\n    onRenderParticipant,\n    onRenderAvatar,\n    onRemoveParticipant,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip\n  } = props;\n\n  const disabled = props.disabled;\n\n  const [copyInviteLinkAnnouncerStrings, setCopyInviteLinkAnnouncerStrings] = useState<string>('');\n\n  const onRenderPeopleIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonParticipants\" />\n  );\n\n  const ids = useIdentifiers();\n\n  const onMuteAllCallback = useCallback(() => {\n    if (onMuteAll) {\n      onMuteAll();\n    }\n  }, [onMuteAll]);\n\n  const defaultParticipantList = useCallback(() => {\n    return (\n      <ParticipantList\n        participants={participants}\n        myUserId={myUserId}\n        excludeMe={excludeMe}\n        onRenderParticipant={onRenderParticipant}\n        onRenderAvatar={onRenderAvatar}\n        onRemoveParticipant={onRemoveParticipant}\n        onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n        styles={styles?.menuStyles?.participantListStyles}\n        showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n      />\n    );\n  }, [\n    excludeMe,\n    myUserId,\n    onRemoveParticipant,\n    onRenderAvatar,\n    onRenderParticipant,\n    participants,\n    styles?.menuStyles?.participantListStyles,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip\n  ]);\n\n  const onCopyCallback = useCallback(() => {\n    if (callInvitationURL) {\n      return copy(callInvitationURL);\n    }\n    return false;\n  }, [callInvitationURL]);\n\n  const localeStrings = useLocale().strings.participantsButton;\n  const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n  const participantCount = participants.length;\n\n  /**\n   * sets the announcement string for when the link is copied.\n   */\n  const toggleAnnouncerString = useCallback(() => {\n    setCopyInviteLinkAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);\n    /**\n     * Clears the announcer string after the user clicks the\n     * copyInviteLink button allowing it to be re-announced.\n     */\n    setTimeout(() => {\n      setCopyInviteLinkAnnouncerStrings('');\n    }, 3000);\n  }, [strings.copyInviteLinkActionedAriaLabel]);\n\n  const generateDefaultParticipantsSubMenuProps = useCallback((): IContextualMenuItem[] => {\n    const items: IContextualMenuItem[] = [];\n\n    if (participantCount > 0) {\n      items.push({\n        key: 'participantListMenuItemKey',\n        onRender: onRenderParticipantList ?? defaultParticipantList\n      });\n\n      items.push({ key: 'participantsDivider1', itemType: ContextualMenuItemType.Divider });\n\n      if (onMuteAll) {\n        items.push({\n          key: 'muteAllKey',\n          text: strings.muteAllButtonLabel,\n          title: strings.muteAllButtonLabel,\n          styles: styles?.menuStyles?.menuItemStyles,\n          iconProps: { iconName: 'MicOff2' },\n          onClick: onMuteAllCallback\n        });\n      }\n    }\n\n    return items;\n  }, [\n    participantCount,\n    onRenderParticipantList,\n    defaultParticipantList,\n    onMuteAll,\n    strings.muteAllButtonLabel,\n    styles?.menuStyles?.menuItemStyles,\n    onMuteAllCallback\n  ]);\n\n  const defaultMenuProps = useMemo((): IContextualMenuProps => {\n    const menuProps: IContextualMenuProps = {\n      title: strings.menuHeader,\n      ariaLabel: strings.menuHeader,\n      styles: merge(participantsButtonMenuPropsStyle, styles?.menuStyles),\n      items: [],\n      calloutProps: {\n        preventDismissOnEvent\n      }\n    };\n\n    if (participantCount > 0) {\n      const participantIds = participants.map((p) => p.userId);\n\n      let participantCountWithoutMe = participantIds.length;\n      if (excludeMe) {\n        participantCountWithoutMe -= 1;\n      }\n\n      menuProps.items.push({\n        key: 'participantCountKey',\n        name: _formatString(strings.participantsListButtonLabel, { numParticipants: `${participantCountWithoutMe}` }),\n        itemProps: { styles: styles?.menuStyles?.menuItemStyles },\n        iconProps: { iconName: 'People' },\n        subMenuProps: {\n          items: generateDefaultParticipantsSubMenuProps(),\n          calloutProps: {\n            styles: {\n              root: {\n                // Confine the menu to the parents bounds.\n                // More info: https://github.com/microsoft/fluentui/issues/18835\n                maxWidth: '100%'\n              }\n            },\n            style: {\n              maxHeight: '20rem'\n            },\n            // Disable dismiss on resize to work around a couple Fluent UI bugs\n            // See reasoning in the props for the parent menu.\n            preventDismissOnEvent\n          }\n        },\n        'data-ui-id': ids.participantButtonPeopleMenuItem\n      });\n    }\n\n    if (callInvitationURL) {\n      menuProps.items.push({\n        key: 'InviteLinkKey',\n        name: strings.copyInviteLinkButtonLabel,\n        title: strings.copyInviteLinkButtonLabel,\n        itemProps: { styles: styles?.menuStyles?.menuItemStyles },\n        iconProps: { iconName: 'Link' },\n        onClick: () => {\n          onCopyCallback();\n          toggleAnnouncerString();\n        }\n      });\n    }\n\n    return menuProps;\n  }, [\n    strings.menuHeader,\n    strings.participantsListButtonLabel,\n    strings.copyInviteLinkButtonLabel,\n    styles?.menuStyles,\n    participantCount,\n    callInvitationURL,\n    participants,\n    excludeMe,\n    ids.participantButtonPeopleMenuItem,\n    generateDefaultParticipantsSubMenuProps,\n    onCopyCallback,\n    toggleAnnouncerString\n  ]);\n\n  return (\n    <>\n      <Announcer announcementString={copyInviteLinkAnnouncerStrings} ariaLive={'polite'} />\n      <ControlBarButton\n        {...props}\n        disabled={disabled}\n        menuProps={props.menuProps ?? defaultMenuProps}\n        menuIconProps={{ hidden: true }}\n        onRenderIcon={onRenderIcon ?? onRenderPeopleIcon}\n        strings={strings}\n        labelKey={props.labelKey ?? 'participantsButtonLabel'}\n      />\n    </>\n  );\n};\n\"../../../acs-ui-common/src\""]}