@azure/communication-react 1.3.3-alpha-202209080049.0 → 1.3.3-alpha-202209110016.0

package/dist/communication-react.d.ts

@@ -960,6 +960,37 @@ export declare type CallCompositeOptions = {
      * @defaultValue true
      */
     callControls?: boolean | CallControlOptions;
+    /**
+     * Callback you may provide to supply users with further steps to troubleshoot why they have been
+     * unable to grant your site the required permissions for the call.
+     *
+     * @example
+     * ```ts
+     * onPermissionsTroubleshootingClick: () =>
+     *  window.open('https://contoso.com/permissions-troubleshooting', '_blank');
+     * ```
+     *
+     * @remarks
+     * if this is not supplied, the composite will not show a 'further troubleshooting' link.
+     */
+    onPermissionsTroubleshootingClick?: (permissionsState: {
+        camera: PermissionState;
+        microphone: PermissionState;
+    }) => void;
+    /**
+     * Callback you may provide to supply users with further steps to troubleshoot why they have been
+     * having network issues when connecting to the call.
+     *
+     * @example
+     * ```ts
+     * onNetworkingTroubleShootingClick?: () =>
+     *  window.open('https://contoso.com/network-troubleshooting', '_blank');
+     * ```
+     *
+     * @remarks
+     * if this is not supplied, the composite will not show a 'network troubleshooting' link.
+     */
+    onNetworkingTroubleShootingClick?: () => void;
 };
 
 /**
@@ -1510,7 +1541,7 @@ export declare type CallParticipantListParticipant = ParticipantListParticipant
  * @beta
  */
 export declare type CallParticipantsLocator = {
-    participantIDs: string[];
+    participantIds: string[];
 };
 
 /**
@@ -2097,6 +2128,37 @@ export declare type CallWithChatCompositeOptions = {
      * @beta
      */
     fileSharing?: FileSharingOptions;
+    /**
+     * Callback you may provide to supply users with further steps to troubleshoot why they have been
+     * unable to grant your site the required permissions for the call.
+     *
+     * @example
+     * ```ts
+     * onPermissionsTroubleshootingClick: () =>
+     *  window.open('https://contoso.com/permissions-troubleshooting', '_blank');
+     * ```
+     *
+     * @remarks
+     * if this is not supplied, the composite will not show a 'further troubleshooting' link.
+     */
+    onPermissionsTroubleshootingClick?: (permissionsState: {
+        camera: PermissionState;
+        microphone: PermissionState;
+    }) => void;
+    /**
+     * Optional callback to supply users with further troubleshooting steps for network issues
+     * experienced when connecting to a call.
+     *
+     * @example
+     * ```ts
+     * onNetworkingTroubleShootingClick?: () =>
+     *  window.open('https://contoso.com/network-troubleshooting', '_blank');
+     * ```
+     *
+     * @remarks
+     * if this is not supplied, the composite will not show a 'network troubleshooting' link.
+     */
+    onNetworkingTroubleShootingClick?: () => void;
 };
 
 /**
@@ -3801,6 +3863,9 @@ export declare interface CustomCallWithChatControlButtonProps extends CustomCont
  * @beta
  */
 export declare interface CustomControlButtonProps {
+    /**
+     * Calback for when button is clicked
+     */
     onItemClick?: () => void;
     /**
      * Whether the buttons is disabled
@@ -3820,6 +3885,22 @@ export declare interface CustomControlButtonProps {
      * Optional label for the button
      */
     text?: string;
+    /**
+     * A unique key for the button
+     */
+    key?: string | number;
+    /**
+     * The aria label of the button for the benefit of screen readers.
+     */
+    ariaLabel?: string;
+    /**
+     * Detailed description of the button for the benefit of screen readers.
+     */
+    ariaDescription?: string;
+    /**
+     * A unique id set for the standard HTML id attibute
+     */
+    id?: string;
 }
 
 /**

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

@@ -192,7 +192,7 @@ const fromFlatCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.3.3-alpha-202209080049.0';
+var telemetryVersion = '1.3.3-alpha-202209110016.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -7257,7 +7257,7 @@ const DrawerMenuItem = (props) => {
     const onClick = (ev) => props.onItemClick && props.onItemClick(ev, props.itemKey);
     const onKeyPress = (ev) => onClick && submitWithKeyboard(ev, onClick);
     const secondaryIcon = props.secondaryIconProps ? (React__default['default'].createElement(MenuItemIcon, Object.assign({}, props.secondaryIconProps))) : props.subMenuProps ? (React__default['default'].createElement(MenuItemIcon, { iconName: "ChevronRight" })) : undefined;
-    return (React__default['default'].createElement(react.Stack, { tabIndex: 0, role: "menuitem", horizontal: true, className: react.mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), onKeyPress: props.disabled ? undefined : onKeyPress, onClick: props.disabled ? undefined : onClick, tokens: menuItemChildrenGap },
+    return (React__default['default'].createElement(react.Stack, { tabIndex: 0, role: "menuitem", horizontal: true, className: react.mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), onKeyPress: props.disabled ? undefined : onKeyPress, onClick: props.disabled ? undefined : onClick, tokens: menuItemChildrenGap, id: props.id },
         props.iconProps && (React__default['default'].createElement(react.Stack.Item, { role: "presentation", styles: props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined },
             React__default['default'].createElement(MenuItemIcon, Object.assign({}, props.iconProps)))),
         React__default['default'].createElement(react.Stack.Item, { styles: drawerMenuItemTextStyles, grow: true },
@@ -14833,9 +14833,10 @@ const generateCustomControlBarButtons = (onFetchCustomButtonProps, displayType)
     for (const key in response) {
         response[key] = (React__default['default'].createElement(React__default['default'].Fragment, null, allButtonProps
             .filter((buttonProps) => buttonProps.placement === key)
-            .map((buttonProps, i) => (React__default['default'].createElement(ControlBarButton, { onClick: buttonProps.onItemClick, showLabel: buttonProps.showLabel, strings: generateCustomControlBarButtonStrings(buttonProps.text), styles: buttonProps.styles, key: `${buttonProps.placement}_${i}`, 
-            // set default icon if not provided
-            onRenderIcon: () => { var _a; return React__default['default'].createElement(react.Icon, { iconName: (_a = buttonProps.iconName) !== null && _a !== void 0 ? _a : 'ControlButtonOptions' }); }, disabled: buttonProps.disabled })))));
+            .map((buttonProps, i) => {
+            var _a;
+            return (React__default['default'].createElement(ControlBarButton, { ariaDescription: buttonProps.ariaDescription, ariaLabel: buttonProps.ariaLabel, disabled: buttonProps.disabled, id: buttonProps.id, key: (_a = buttonProps.key) !== null && _a !== void 0 ? _a : `${buttonProps.placement}_${i}`, onClick: buttonProps.onItemClick, onRenderIcon: () => { var _a; return React__default['default'].createElement(react.Icon, { iconName: (_a = buttonProps.iconName) !== null && _a !== void 0 ? _a : 'ControlButtonOptions' }); }, showLabel: buttonProps.showLabel, strings: generateCustomControlBarButtonStrings(buttonProps.text), styles: buttonProps.styles }));
+        })));
     }
     return response;
 };
@@ -16256,10 +16257,7 @@ const CallPane = (props) => {
 function MutedNotification(props) {
     const locale = useLocale();
     const theme = react.useTheme();
-    if (!props.speakingWhileMuted) {
-        return React__default['default'].createElement(React__default['default'].Fragment, null);
-    }
-    return (React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "center" },
+    return (React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "center", className: react.mergeStyles(props.speakingWhileMuted === true ? isSpeakingAndMutedAnimationStyles : isNotSpeakingAndMutedAnimationStyles) },
         React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(stackStyle(theme)) },
             React__default['default'].createElement(CallCompositeIcon, { iconName: "Muted", className: react.mergeStyles(iconStyle(theme)) }),
             React__default['default'].createElement(react.Text, { className: react.mergeStyles(textStyle(theme)), "aria-live": 'polite' }, locale.strings.call.mutedMessage))));
@@ -16267,11 +16265,11 @@ function MutedNotification(props) {
 const stackStyle = (theme) => {
     return {
         background: theme.palette.black,
-        opacity: 0.8,
         gap: `1rem`,
         padding: `1rem`,
         borderRadius: theme.effects.roundedCorner4,
-        width: 'fit-content'
+        width: 'fit-content',
+        opacity: 0.8
     };
 };
 const iconStyle = (theme) => {
@@ -16286,6 +16284,8 @@ const textStyle = (theme) => {
         fontSize: `1rem`
     };
 };
+const isSpeakingAndMutedAnimationStyles = Object.assign({}, react.AnimationStyles.fadeIn100);
+const isNotSpeakingAndMutedAnimationStyles = Object.assign(Object.assign({}, react.AnimationStyles.fadeOut200), { display: 'none' });
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -17854,18 +17854,20 @@ class AzureCommunicationCallAdapter {
         if (_isInCall((_b = (_a = this.getState().call) === null || _a === void 0 ? void 0 : _a.state) !== null && _b !== void 0 ? _b : 'None')) {
             throw new Error('You are already in the call!');
         }
-        /* @conditional-compile-remove(teams-adhoc-call) */
-        /* @conditional-compile-remove(PSTN-calls) */
-        if (isOutboundCall(this.locator)) {
-            const phoneNumber = this.getState().alternateCallerId;
-            return this.startCall(this.locator.participantIDs, {
-                alternateCallerId: phoneNumber ? { phoneNumber: phoneNumber } : undefined
-            });
-        }
         return this.teeErrorToEventEmitter(() => {
             const audioOptions = { muted: !(microphoneOn !== null && microphoneOn !== void 0 ? microphoneOn : this.getState().isLocalPreviewMicrophoneEnabled) };
             // TODO: find a way to expose stream to here
             const videoOptions = { localVideoStreams: this.localStream ? [this.localStream] : undefined };
+            /* @conditional-compile-remove(teams-adhoc-call) */
+            /* @conditional-compile-remove(PSTN-calls) */
+            if (isOutboundCall(this.locator)) {
+                const phoneNumber = this.getState().alternateCallerId;
+                return this.startCall(this.locator.participantIds, {
+                    alternateCallerId: phoneNumber ? { phoneNumber: phoneNumber } : undefined,
+                    audioOptions,
+                    videoOptions
+                });
+            }
             const call = this._joinCall(audioOptions, videoOptions);
             this.processNewCall(call);
             return call;
@@ -18313,7 +18315,7 @@ const isCallError = (e) => {
 /* @conditional-compile-remove(teams-adhoc-call) */
 /* @conditional-compile-remove(PSTN-calls) */
 const isOutboundCall = (callLocator) => {
-    return 'participantIDs' in callLocator;
+    return 'participantIds' in callLocator;
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -18494,7 +18496,10 @@ const generateCustomCallWithChatControlBarButton = (onFetchCustomButtonProps, di
     for (const key in response) {
         response[key] = (React__default['default'].createElement(React__default['default'].Fragment, null, allButtonProps
             .filter((buttonProps) => buttonProps.placement === key)
-            .map((buttonProps, i) => (React__default['default'].createElement(ControlBarButton, { onClick: buttonProps.onItemClick, showLabel: buttonProps.showLabel, strings: generateCustomControlBarButtonStrings(buttonProps.text), styles: buttonProps.styles, key: `${buttonProps.placement}_${i}`, onRenderIcon: () => { var _a; return React__default['default'].createElement(react.Icon, { iconName: (_a = buttonProps.iconName) !== null && _a !== void 0 ? _a : 'ControlButtonOptions' }); }, disabled: buttonProps.disabled })))));
+            .map((buttonProps, i) => {
+            var _a;
+            return (React__default['default'].createElement(ControlBarButton, { ariaDescription: buttonProps.ariaDescription, ariaLabel: buttonProps.ariaLabel, disabled: buttonProps.disabled, id: buttonProps.id, key: (_a = buttonProps.key) !== null && _a !== void 0 ? _a : `${buttonProps.placement}_${i}`, onClick: buttonProps.onItemClick, onRenderIcon: () => { var _a; return React__default['default'].createElement(react.Icon, { iconName: (_a = buttonProps.iconName) !== null && _a !== void 0 ? _a : 'ControlButtonOptions' }); }, showLabel: buttonProps.showLabel, strings: generateCustomControlBarButtonStrings(buttonProps.text), styles: buttonProps.styles }));
+        })));
     }
     return response;
 };
@@ -18512,13 +18517,17 @@ const generateCustomCallWithChatDrawerButtons = (onFetchCustomButtonProps, displ
     for (const key in response) {
         response[key] = (React__default['default'].createElement(React__default['default'].Fragment, null, allButtonProps
             .filter((buttonProps) => buttonProps.placement === key)
-            .map((buttonProps, i) => ({
-            itemKey: `${buttonProps.placement}_${i}`,
-            text: buttonProps.text,
-            onItemClick: buttonProps.onItemClick,
-            iconProps: { iconName: buttonProps.iconName },
-            disabled: buttonProps.disabled
-        }))));
+            .map((buttonProps, i) => {
+            var _a;
+            return ({
+                disabled: buttonProps.disabled,
+                id: buttonProps.id,
+                iconProps: { iconName: buttonProps.iconName },
+                itemKey: (_a = buttonProps.key) !== null && _a !== void 0 ? _a : `${buttonProps.placement}_${i}`,
+                onItemClick: buttonProps.onItemClick,
+                text: buttonProps.text
+            });
+        })));
     }
     return response;
 };