@azure/communication-react 1.11.0-alpha-202312090012 → 1.11.0-alpha-202312100013

package/dist/dist-cjs/communication-react/index.js

@@ -170,7 +170,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.11.0-alpha-202312090012';
+var telemetryVersion = '1.11.0-alpha-202312100013';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -12080,6 +12080,8 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
     };
     /* @conditional-compile-remove(hide-attendee-name) */
     displayName = formatDisplayName();
+    /* @conditional-compile-remove(raise-hand) */
+    const callingPalette = theme.callingPalette;
     const onRenderIcon = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isScreenSharing) ||
         (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isMuted) ||
         (
@@ -12101,7 +12103,11 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
                 callingParticipant.isMuted && (React.createElement(react.Icon, { iconName: "ParticipantItemMicOff", className: iconStyles$2, ariaLabel: strings.mutedIconLabel }))));
         }
         : () => null;
-    return (React.createElement(ParticipantItem, { styles: styles, key: participant.userId, userId: participant.userId, displayName: displayName, me: myUserId ? participant.userId === myUserId : false, menuItems: menuItems, presence: presence, onRenderIcon: onRenderIcon, onRenderAvatar: onRenderAvatar, onClick: () => onParticipantClick === null || onParticipantClick === void 0 ? void 0 : onParticipantClick(participant), showParticipantOverflowTooltip: showParticipantOverflowTooltip, 
+    /* @conditional-compile-remove(raise-hand) */
+    const onRenderAvatarWithRaiseHand = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand) && onRenderAvatar
+        ? (userId, options, defaultOnRender) => onRenderAvatar(userId, Object.assign(Object.assign({}, options), { styles: { root: { border: callingPalette.raiseHandGold } } }), defaultOnRender)
+        : onRenderAvatar;
+    return (React.createElement(ParticipantItem, { styles: styles, key: participant.userId, userId: participant.userId, displayName: displayName, me: myUserId ? participant.userId === myUserId : false, menuItems: menuItems, presence: presence, onRenderIcon: onRenderIcon, onRenderAvatar: onRenderAvatarWithRaiseHand, onClick: () => onParticipantClick === null || onParticipantClick === void 0 ? void 0 : onParticipantClick(participant), showParticipantOverflowTooltip: showParticipantOverflowTooltip, 
         /* @conditional-compile-remove(one-to-n-calling) */
         /* @conditional-compile-remove(PSTN-calls) */
         participantState: callingParticipant.state, ariaLabelledBy: participantAriaLabelledBy }));
@@ -22711,7 +22717,24 @@ const AvatarPersona = (props) => {
             }
         }))();
     }, [data, dataProvider, userId]);
-    return (React.createElement(react.Persona, Object.assign({}, props, { text: (_a = data === null || data === void 0 ? void 0 : data.text) !== null && _a !== void 0 ? _a : text, imageUrl: (_b = data === null || data === void 0 ? void 0 : data.imageUrl) !== null && _b !== void 0 ? _b : imageUrl, imageInitials: (_c = data === null || data === void 0 ? void 0 : data.imageInitials) !== null && _c !== void 0 ? _c : imageInitials, initialsColor: (_d = data === null || data === void 0 ? void 0 : data.initialsColor) !== null && _d !== void 0 ? _d : initialsColor, initialsTextColor: (_f = (_e = data === null || data === void 0 ? void 0 : data.initialsTextColor) !== null && _e !== void 0 ? _e : initialsTextColor) !== null && _f !== void 0 ? _f : 'white', 
+    /* @conditional-compile-remove(raise-hand) */
+    let activePersona = '';
+    /* @conditional-compile-remove(raise-hand) */
+    if (props.allowActiveBorder) {
+        // Display a border for raised handed participants in participant list
+        activePersona = react.mergeStyles({
+            border: 'solid 2px',
+            borderColor: 'transparent',
+            borderRadius: '50%',
+            padding: '2px',
+            boxSizing: 'content-box',
+            margin: '-4px'
+        });
+        react.mergeStyles(activePersona, props.styles);
+    }
+    return (React.createElement(react.Persona, Object.assign({}, props, { 
+        /* @conditional-compile-remove(raise-hand) */
+        className: activePersona, text: (_a = data === null || data === void 0 ? void 0 : data.text) !== null && _a !== void 0 ? _a : text, imageUrl: (_b = data === null || data === void 0 ? void 0 : data.imageUrl) !== null && _b !== void 0 ? _b : imageUrl, imageInitials: (_c = data === null || data === void 0 ? void 0 : data.imageInitials) !== null && _c !== void 0 ? _c : imageInitials, initialsColor: (_d = data === null || data === void 0 ? void 0 : data.initialsColor) !== null && _d !== void 0 ? _d : initialsColor, initialsTextColor: (_f = (_e = data === null || data === void 0 ? void 0 : data.initialsTextColor) !== null && _e !== void 0 ? _e : initialsTextColor) !== null && _f !== void 0 ? _f : 'white', 
         // default disable tooltip unless specified
         showOverflowTooltip: showOverflowTooltip !== null && showOverflowTooltip !== void 0 ? showOverflowTooltip : false, 
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -23023,7 +23046,9 @@ const ParticipantListWithHeading = (props) => {
         /* @conditional-compile-remove(total-participant-count) */ totalParticipantCount)),
         React.createElement(react.FocusZone, { className: participantListContainerStyle, shouldFocusOnMount: true },
             React.createElement(ParticipantList$k, Object.assign({}, participantListProps, { styles: props.isMobile ? participantListMobileStyle : participantListStyle, onRenderAvatar: (userId, options) => (React.createElement(React.Fragment, null,
-                    React.createElement(AvatarPersona, Object.assign({ "data-ui-id": "chat-composite-participant-custom-avatar", userId: userId }, options, { hidePersonaDetails: !!(options === null || options === void 0 ? void 0 : options.text) }, { dataProvider: onFetchAvatarPersonaData })),
+                    React.createElement(AvatarPersona, Object.assign({ "data-ui-id": "chat-composite-participant-custom-avatar", userId: userId }, options, { hidePersonaDetails: !!(options === null || options === void 0 ? void 0 : options.text) }, { dataProvider: onFetchAvatarPersonaData, 
+                        /* @conditional-compile-remove(raise-hand) */
+                        allowActiveBorder: true })),
                     (options === null || options === void 0 ? void 0 : options.text) && (React.createElement(react.Text, { nowrap: true, styles: displayNameStyles$1 }, options === null || options === void 0 ? void 0 : options.text)))), onFetchParticipantMenuItems: onFetchParticipantMenuItems, showParticipantOverflowTooltip: !props.isMobile, participantAriaLabelledBy: subheadingUniqueId })))));
 };
 const paneTitleTrampoline = (paneTitle, totalParticipantCount) => {