@azure/communication-react 1.7.0-alpha-202307180021 → 1.7.0-alpha-202307190021

package/dist/communication-react.d.ts

@@ -74,6 +74,7 @@ import { MicrosoftTeamsUserIdentifier } from '@azure/communication-common';
 import { MicrosoftTeamsUserKind } from '@azure/communication-common';
 import type { NetworkDiagnosticChangedEventArgs } from '@azure/communication-calling';
 import { PartialTheme } from '@fluentui/react';
+import { ParticipantCapabilities } from '@azure/communication-calling';
 import { ParticipantRole } from '@azure/communication-calling';
 import { PermissionConstraints } from '@azure/communication-calling';
 import { PersonaInitialsColor } from '@fluentui/react';
@@ -2332,6 +2333,10 @@ export declare interface CallState {
      * Transfer state of call
      */
     transfer: TransferFeature;
+    /**
+     * Proxy of {@link @azure/communication-calling#CapabilitiesFeature}.
+     */
+    capabilities?: CapabilitiesCallFeature;
 }
 
 /**
@@ -3398,6 +3403,18 @@ export declare type CameraSitePermissionsStrings = SitePermissionsStrings;
  */
 export declare type CancelEditCallback = (messageId: string) => void;
 
+/**
+ * State only version of {@link @azure/communication-calling#CapabilitiesFeature}
+ *
+ * @beta
+ */
+export declare interface CapabilitiesCallFeature {
+    /**
+     * Proxy of {@link @azure/communication-calling#CapabilitiesFeature.capabilities}.
+     */
+    capabilities: ParticipantCapabilities;
+}
+
 /**
  * @beta
  * strings for captions setting modal

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

@@ -178,7 +178,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.7.0-alpha-202307180021';
+var telemetryVersion = '1.7.0-alpha-202307190021';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -1843,6 +1843,15 @@ class CallContext$2 {
             }
         });
     }
+    /* @conditional-compile-remove(capabilities) */
+    setCapabilities(callId, capabilities) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                call.capabilities = { capabilities: capabilities };
+            }
+        });
+    }
     setCallScreenShareParticipant(callId, participantKey) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -3264,6 +3273,30 @@ class OptimalVideoCountSubscriber {
     }
 }
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/* @conditional-compile-remove(capabilities) */
+/**
+ * @private
+ */
+class CapabilitiesSubscriber {
+    constructor(callIdRef, context, capabilities) {
+        this.subscribe = () => {
+            this._capabilitiesFeature.on('capabilitiesChanged', this.capabilitiesChanged);
+        };
+        this.unsubscribe = () => {
+            this._capabilitiesFeature.off('capabilitiesChanged', this.capabilitiesChanged);
+        };
+        this.capabilitiesChanged = () => {
+            this._context.setCapabilities(this._callIdRef.callId, this._capabilitiesFeature.capabilities);
+        };
+        this._callIdRef = callIdRef;
+        this._context = context;
+        this._capabilitiesFeature = capabilities;
+        this.subscribe();
+    }
+}
+
 // Copyright (c) Microsoft Corporation.
 /**
  * Keeps track of the listeners assigned to a particular call because when we get an event from SDK, it doesn't tell us
@@ -3328,6 +3361,8 @@ class CallSubscriber {
             this._optimalVideoCountSubscriber.unsubscribe();
             /* @conditional-compile-remove(close-captions) */
             (_a = this._captionsSubscriber) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            /* @conditional-compile-remove(capabilities) */
+            this._capabilitiesSubscriber.unsubscribe();
         };
         this.stateChanged = () => {
             this._context.setCallState(this._callIdRef.callId, this._call.state);
@@ -3429,6 +3464,8 @@ class CallSubscriber {
         });
         /* @conditional-compile-remove(video-background-effects) */
         this._localVideoStreamVideoEffectsSubscribers = new Map();
+        /* @conditional-compile-remove(capabilities) */
+        this._capabilitiesSubscriber = new CapabilitiesSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Capabilities));
         this.subscribe();
     }
     addParticipantListener(participant) {
@@ -7529,9 +7566,8 @@ const TextFieldWithMention = (props) => {
             // Update the caret position, used for positioning the suggestions popover
             const textField = event.currentTarget;
             const relativePosition = textareaCaretTs.Caret.getRelativePosition(textField);
-            const adjustOffset = Math.max(0, textField.scrollHeight - textField.clientHeight);
-            if (relativePosition.top > adjustOffset) {
-                relativePosition.top -= adjustOffset;
+            if (textField.scrollHeight > textField.clientHeight) {
+                relativePosition.top -= textField.scrollTop;
             }
             setCaretPosition(relativePosition);
             if (triggerPriorIndex !== undefined) {
@@ -16119,7 +16155,8 @@ const _VideoBackgroundEffectsPicker = (props) => {
         optionsByRow.map((options, rowIndex) => {
             var _a;
             return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles((_a = props.styles) === null || _a === void 0 ? void 0 : _a.rowRoot), wrap: props.itemsPerRow === 'wrap', horizontal: true, key: rowIndex, tokens: { childrenGap: '0.5rem' }, "data-ui-id": "video-effects-picker-row" },
-                options.map((option) => (React__default['default'].createElement(_VideoEffectsItem, Object.assign({}, option, { key: option.itemKey, itemKey: option.itemKey })))),
+                options.map((option) => (React__default['default'].createElement(react.FocusZone, { key: option.itemKey, shouldFocusOnMount: option.itemKey === 'none' },
+                    React__default['default'].createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey }))))),
                 fillCount > 0 &&
                     rowIndex === optionsByRow.length - 1 &&
                     Array.from({ length: fillCount }).map((_, index) => (React__default['default'].createElement(react.Stack, { key: index, styles: hiddenVideoEffectsItemContainerStyles, "data-ui-id": "video-effects-hidden-item" })))));
@@ -24144,7 +24181,7 @@ const VideoEffectsPaneTrampoline = (onDismissError, activeVideoEffectError, sele
     /* @conditional-compile-remove(video-background-effects) */
     const locale = useLocale();
     /* @conditional-compile-remove(video-background-effects) */
-    return (React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
+    return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ paddingLeft: '0.5rem' }) },
         activeVideoEffectError && isCameraOn && (React__default['default'].createElement(react.MessageBar, { messageBarType: react.MessageBarType.error, onDismiss: () => onDismissError(activeVideoEffectError) }, locale.strings.call.unableToStartVideoEffect)),
         showWarning && (React__default['default'].createElement(react.MessageBar, { messageBarType: react.MessageBarType.warning }, locale.strings.call.cameraOffBackgroundEffectWarningText)),
         React__default['default'].createElement(_VideoBackgroundEffectsPicker, { label: locale.strings.call.videoEffectsPaneBackgroundSelectionTitle, styles: backgroundPickerStyles, options: selectableVideoEffects !== null && selectableVideoEffects !== void 0 ? selectableVideoEffects : [], onChange: onEffectChange, selectedEffectKey: selectedEffect })));