@azure/communication-react 1.5.1-alpha-202305310014 → 1.5.1-alpha-202306010016

package/dist/communication-react.d.ts

@@ -102,6 +102,22 @@ import { VideoEffectName } from '@azure/communication-calling';
 import { VideoStreamRenderer } from '@azure/communication-calling';
 import { VideoStreamRendererView } from '@azure/communication-calling';
 
+/**
+ * Transfer feature state
+ *
+ * @beta
+ */
+export declare interface AcceptedTransfer {
+    /**
+     * Stores call id of accepted transfer
+     */
+    callId: string;
+    /**
+     * Stores timestamp when transfer was accepted
+     */
+    timestamp: Date;
+}
+
 /**
  * Active error messages to be shown via {@link ErrorBar}.
  *
@@ -2164,6 +2180,10 @@ export declare interface CallState {
      * Proxy of {@link @azure/communication-calling#Call.totalParticipantCount}.
      */
     totalParticipantCount?: number;
+    /**
+     * Transfer state of call
+     */
+    transferFeature: TransferFeature;
 }
 
 /**
@@ -8451,6 +8471,20 @@ export declare interface TranscriptionCallFeature {
     isTranscriptionActive: boolean;
 }
 
+/**
+ * Transfer feature state
+ *
+ * @beta
+ */
+export declare interface TransferFeature {
+    /**
+     * Accepted transfer requests
+     */
+    acceptedTransfers: {
+        [key: string]: AcceptedTransfer;
+    };
+}
+
 /**
  * Component to notify local user when one or more participants in the chat thread are typing.
  *

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

@@ -20,6 +20,7 @@ var reactFileTypeIcons = require('@fluentui/react-file-type-icons');
 var uuid = require('uuid');
 var htmlToReact = require('html-to-react');
 var Linkify = require('react-linkify');
+var DOMPurify = require('dompurify');
 var reactUseDraggableScroll = require('react-use-draggable-scroll');
 var reactHooks = require('@fluentui/react-hooks');
 var reactWindowProvider = require('@fluentui/react-window-provider');
@@ -57,6 +58,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var r__namespace = /*#__PURE__*/_interopNamespace(r);
 var Linkify__default = /*#__PURE__*/_interopDefaultLegacy(Linkify);
+var DOMPurify__default = /*#__PURE__*/_interopDefaultLegacy(DOMPurify);
 var copy__default = /*#__PURE__*/_interopDefaultLegacy(copy);
 
 // Copyright (c) Microsoft Corporation.
@@ -165,7 +167,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202305310014';
+var telemetryVersion = '1.5.1-alpha-202306010016';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -1457,6 +1459,10 @@ function convertSdkCallToDeclarativeCall(call) {
             currentSpokenLanguage: '',
             isCaptionsFeatureActive: false,
             startCaptionsInProgress: false
+        },
+        /* @conditional-compile-remove(call-transfer) */
+        transferFeature: {
+            acceptedTransfers: {}
         }
     };
 }
@@ -2153,6 +2159,15 @@ class CallContext$2 {
             }
         });
     }
+    /* @conditional-compile-remove(call-transfer) */
+    setAcceptedTransfer(callId, acceptedTransfer) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                call.transferFeature.acceptedTransfers[acceptedTransfer.callId] = acceptedTransfer;
+            }
+        });
+    }
     /**
      * Tees any errors encountered in an async function to the state.
      *
@@ -3685,6 +3700,12 @@ class ProxyCallCommon {
                         const proxyFeature = new ProxyTeamsCaptionsFeature(this._context, target);
                         return new Proxy(captionsFeature, proxyFeature);
                     }
+                    /* @conditional-compile-remove(call-transfer) */
+                    if (args[0] === communicationCalling.Features.Transfer) {
+                        const transferFeature = target.feature(communicationCalling.Features.Transfer);
+                        const proxyFeature = new ProxyTransferCallFeature(this._context, target);
+                        return new Proxy(transferFeature, proxyFeature);
+                    }
                     return target.feature(...args);
                 }, 'Call.feature');
             }
@@ -3736,6 +3757,41 @@ class ProxyTeamsCaptionsFeature {
         }
     }
 }
+/* @conditional-compile-remove(call-transfer) */
+/**
+ * @private
+ */
+class ProxyTransferCallFeature {
+    constructor(context, call) {
+        this._context = context;
+        this._call = call;
+    }
+    get(target, prop) {
+        switch (prop) {
+            case 'on':
+                return (...args) => {
+                    const isTransferRequested = args[0] === 'transferRequested';
+                    if (isTransferRequested) {
+                        const listener = args[1];
+                        const newListener = (args) => {
+                            const newArgs = Object.assign(Object.assign({}, args), { accept: (acceptOptions) => {
+                                    const acceptedTransferCall = args.accept(acceptOptions);
+                                    this._context.setAcceptedTransfer(this._call.id, {
+                                        callId: acceptedTransferCall.id,
+                                        timestamp: new Date()
+                                    });
+                                    return acceptedTransferCall;
+                                } });
+                            listener(newArgs);
+                        };
+                        return target.on('transferRequested', newListener);
+                    }
+                };
+            default:
+                return Reflect.get(target, prop);
+        }
+    }
+}
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -5730,6 +5786,32 @@ const DEFAULT_COMPONENT_ICONS = {
     ChangeSpokenLanguageIcon: React__default['default'].createElement(reactIcons.PersonVoice20Regular, null)
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @internal
+ * Announcer component to maker aria announcements on actions
+ */
+const Announcer$1 = (props) => {
+    const { announcementString, ariaLive } = props;
+    return React__default['default'].createElement(react.Stack, { "aria-label": announcementString, "aria-live": ariaLive, styles: announcerStyles });
+};
+/**
+ * Styles to hide the announcer from view but still existing on the DOM tree it so that narration can happen.
+ */
+const announcerStyles = {
+    root: {
+        position: 'absolute',
+        width: '1px',
+        height: '1px',
+        padding: 0,
+        margin: '-1px',
+        overflow: 'hidden',
+        clip: 'rect(0,0,0,0)',
+        whiteSpace: 'nowrap',
+        border: 0
+    }
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -6119,7 +6201,7 @@ const InputBoxComponent = (props) => {
         updateMentionSuggestions([]);
     }, [textValue, mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger, updateMentionSuggestions]);
     const mergedRootStyle = react.mergeStyles(inputBoxWrapperStyle, styles === null || styles === void 0 ? void 0 : styles.root);
-    const mergedTextFiledStyle = react.mergeStyles(inputBoxStyle, inputClassName, props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance);
+    const mergedInputFieldStyle = react.mergeStyles(inputBoxStyle, inputClassName, props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance);
     /* @conditional-compile-remove(mention) */
     React.useEffect(() => {
         var _a;
@@ -6215,9 +6297,9 @@ const InputBoxComponent = (props) => {
             return;
         }
         if (ev.key === 'ArrowUp') {
-            ev.preventDefault();
             /* @conditional-compile-remove(mention) */
             if (mentionSuggestions.length > 0) {
+                ev.preventDefault();
                 const newActiveIndex = activeSuggestionIndex === undefined
                     ? mentionSuggestions.length - 1
                     : Math.max(activeSuggestionIndex - 1, 0);
@@ -6225,15 +6307,21 @@ const InputBoxComponent = (props) => {
             }
         }
         else if (ev.key === 'ArrowDown') {
-            ev.preventDefault();
             /* @conditional-compile-remove(mention) */
             if (mentionSuggestions.length > 0) {
+                ev.preventDefault();
                 const newActiveIndex = activeSuggestionIndex === undefined
                     ? 0
                     : Math.min(activeSuggestionIndex + 1, mentionSuggestions.length - 1);
                 setActiveSuggestionIndex(newActiveIndex);
             }
         }
+        else if (ev.key === 'Escape') {
+            /* @conditional-compile-remove(mention) */
+            if (mentionSuggestions.length > 0) {
+                updateMentionSuggestions([]);
+            }
+        }
         if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {
             ev.preventDefault();
             // If we are looking up a mention, select the focused suggestion
@@ -6257,7 +6345,9 @@ const InputBoxComponent = (props) => {
         /* @conditional-compile-remove(mention) */
         activeSuggestionIndex,
         /* @conditional-compile-remove(mention) */
-        onSuggestionSelected
+        onSuggestionSelected,
+        /* @conditional-compile-remove(mention) */
+        updateMentionSuggestions
     ]);
     const onRenderChildren = () => {
         return (React__default['default'].createElement(react.Stack, { horizontal: true, className: mergedChildrenStyle }, children));
@@ -6270,6 +6360,7 @@ const InputBoxComponent = (props) => {
             setActiveSuggestionIndex(undefined);
         }
         else if (activeSuggestionIndex === undefined) {
+            // Set the active to the first, if it's not already set
             setActiveSuggestionIndex(0);
         }
         updateMentionSuggestions(suggestions);
@@ -6547,12 +6638,23 @@ const InputBoxComponent = (props) => {
             }
         }
     }, [setTargetSelection, targetSelection, setShouldHandleOnMouseDownDuringSelect, interactionStartPoint, tagsValue]);
+    /* @conditional-compile-remove(mention) */
+    const announcerText = React.useMemo(() => {
+        if (activeSuggestionIndex === undefined) {
+            return undefined;
+        }
+        const currentMention = mentionSuggestions[activeSuggestionIndex !== null && activeSuggestionIndex !== void 0 ? activeSuggestionIndex : 0];
+        return (currentMention === null || currentMention === void 0 ? void 0 : currentMention.displayText.length) > 0
+            ? currentMention === null || currentMention === void 0 ? void 0 : currentMention.displayText
+            : localeStrings.participantItem.displayNamePlaceholder;
+    }, [activeSuggestionIndex, mentionSuggestions, localeStrings.participantItem.displayNamePlaceholder]);
     return (React__default['default'].createElement(react.Stack, { className: mergedRootStyle },
         React__default['default'].createElement("div", { className: mergedTextContainerStyle },
             /* @conditional-compile-remove(mention) */ mentionSuggestions.length > 0 && (React__default['default'].createElement(_MentionPopover, { suggestions: mentionSuggestions, activeSuggestionIndex: activeSuggestionIndex, target: inputBoxRef, targetPositionOffset: caretPosition, onRenderSuggestionItem: mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onRenderSuggestionItem, onSuggestionSelected: onSuggestionSelected, onDismiss: () => {
                     updateMentionSuggestions([]);
                 } })),
-            React__default['default'].createElement(react.TextField, { autoFocus: props.autoFocus === 'sendBoxTextField', "data-ui-id": dataUiId, multiline: true, autoAdjustHeight: true, multiple: false, resizable: false, componentRef: textFieldRef, id: id, inputClassName: mergedTextFiledStyle, placeholder: placeholderText, value: getInputFieldTextValue(), onChange: (e, newValue) => {
+            /* @conditional-compile-remove(mention) */ announcerText !== undefined && (React__default['default'].createElement(Announcer$1, { announcementString: announcerText, ariaLive: 'polite' })),
+            React__default['default'].createElement(react.TextField, { autoFocus: props.autoFocus === 'sendBoxTextField', "data-ui-id": dataUiId, multiline: true, autoAdjustHeight: true, multiple: false, resizable: false, componentRef: textFieldRef, id: id, inputClassName: mergedInputFieldStyle, placeholder: placeholderText, value: getInputFieldTextValue(), onChange: (e, newValue) => {
                     // Remove when switching to react 17+, currently needed because of https://legacy.reactjs.org/docs/legacy-event-pooling.html
                     /* @conditional-compile-remove(mention) */
                     // Prevents React from resetting event's properties
@@ -6615,6 +6717,8 @@ const InputBoxComponent = (props) => {
                     setCaretIndex(undefined);
                     setSelectionStartValue(null);
                     setSelectionEndValue(null);
+                    // Dismiss the suggestions on blur
+                    setMentionSuggestions([]);
                 }, autoComplete: "off", onKeyDown: onTextFieldKeyDown, styles: mergedTextFieldStyle, disabled: disabled, errorMessage: errorMessage, onRenderSuffix: onRenderChildren, elementRef: inputBoxRef }))));
 };
 /**
@@ -7427,32 +7531,6 @@ const addTag = (tag, parseStack, tags) => {
     }
 };
 
-// Copyright (c) Microsoft Corporation.
-/**
- * @internal
- * Announcer component to maker aria announcements on actions
- */
-const Announcer$1 = (props) => {
-    const { announcementString, ariaLive } = props;
-    return React__default['default'].createElement(react.Stack, { "aria-label": announcementString, "aria-live": ariaLive, styles: announcerStyles });
-};
-/**
- * Styles to hide the announcer from view but still existing on the DOM tree it so that narration can happen.
- */
-const announcerStyles = {
-    root: {
-        position: 'absolute',
-        width: '1px',
-        height: '1px',
-        padding: 0,
-        margin: '-1px',
-        overflow: 'hidden',
-        clip: 'rect(0,0,0,0)',
-        whiteSpace: 'nowrap',
-        border: 0
-    }
-};
-
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -8761,14 +8839,15 @@ const extractContent = (s) => {
     return span.textContent || span.innerText;
 };
 const messageContentAriaText = (props) => {
+    // Strip all html tags from the content for aria.
     return props.message.content
         ? props.message.mine
             ? _formatString(props.strings.messageContentMineAriaText, {
-                message: props.message.content
+                message: DOMPurify__default['default'].sanitize(props.message.content, { ALLOWED_TAGS: [] })
             })
             : _formatString(props.strings.messageContentAriaText, {
                 author: `${props.message.senderDisplayName}`,
-                message: props.message.content
+                message: DOMPurify__default['default'].sanitize(props.message.content, { ALLOWED_TAGS: [] })
             })
         : undefined;
 };