@azure/communication-react 1.5.1-alpha-202302140014 → 1.5.1-alpha-202302152318

package/dist/communication-react.d.ts

@@ -64,6 +64,7 @@ import { IStyleFunctionOrObject } from '@fluentui/react';
 import { ITextFieldStyles } from '@fluentui/react';
 import { LatestMediaDiagnostics } from '@azure/communication-calling';
 import { LatestNetworkDiagnostics } from '@azure/communication-calling';
+import { LocalVideoStream } from '@azure/communication-calling';
 import type { MediaDiagnosticChangedEventArgs } from '@azure/communication-calling';
 import { MediaStreamType } from '@azure/communication-calling';
 import { MicrosoftTeamsUserIdentifier } from '@azure/communication-common';
@@ -93,6 +94,7 @@ import { TypingIndicatorReceivedEvent } from '@azure/communication-chat';
 import { UnknownIdentifier } from '@azure/communication-common';
 import { UnknownIdentifierKind } from '@azure/communication-common';
 import { VideoDeviceInfo } from '@azure/communication-calling';
+import { VideoEffectName } from '@azure/communication-calling';
 import { VideoStreamRenderer } from '@azure/communication-calling';
 import { VideoStreamRendererView } from '@azure/communication-calling';
 
@@ -1776,7 +1778,7 @@ export declare type CallErrors = {
  *
  * @public
  */
-export declare type CallErrorTarget = 'Call.addParticipant' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.dispose' | 'Call.feature' | 'Call.hangUp' | 'Call.hold' | 'Call.mute' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.muteIncomingAudio' | 'Call.off' | 'Call.on' | 'Call.removeParticipant' | 'Call.resume' | 'Call.sendDtmf' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.startAudio' | 'Call.startScreenSharing' | 'Call.startVideo' | 'Call.stopScreenSharing' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.stopAudio' | 'Call.stopVideo' | 'Call.unmute' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.unmuteIncomingAudio' | 'CallAgent.dispose' | 'CallAgent.feature' | 'CallAgent.join' | 'CallAgent.off' | 'CallAgent.on' | 'CallAgent.startCall' | 'CallClient.createCallAgent' | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'CallClient.createTeamsCallAgent' | 'CallClient.feature' | 'CallClient.getDeviceManager' | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallClient.getEnvironmentInfo' | 'DeviceManager.askDevicePermission' | 'DeviceManager.getCameras' | 'DeviceManager.getMicrophones' | 'DeviceManager.getSpeakers' | 'DeviceManager.off' | 'DeviceManager.on' | 'DeviceManager.selectMicrophone' | 'DeviceManager.selectSpeaker' | 'IncomingCall.accept' | 'IncomingCall.reject' | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'TeamsCall.addParticipant';
+export declare type CallErrorTarget = 'Call.addParticipant' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.dispose' | 'Call.feature' | 'Call.hangUp' | 'Call.hold' | 'Call.mute' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.muteIncomingAudio' | 'Call.off' | 'Call.on' | 'Call.removeParticipant' | 'Call.resume' | 'Call.sendDtmf' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.startAudio' | 'Call.startScreenSharing' | 'Call.startVideo' | 'Call.stopScreenSharing' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.stopAudio' | 'Call.stopVideo' | 'Call.unmute' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.unmuteIncomingAudio' | 'CallAgent.dispose' | 'CallAgent.feature' | 'CallAgent.join' | 'CallAgent.off' | 'CallAgent.on' | 'CallAgent.startCall' | 'CallClient.createCallAgent' | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'CallClient.createTeamsCallAgent' | 'CallClient.feature' | 'CallClient.getDeviceManager' | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallClient.getEnvironmentInfo' | 'DeviceManager.askDevicePermission' | 'DeviceManager.getCameras' | 'DeviceManager.getMicrophones' | 'DeviceManager.getSpeakers' | 'DeviceManager.off' | 'DeviceManager.on' | 'DeviceManager.selectMicrophone' | 'DeviceManager.selectSpeaker' | 'IncomingCall.accept' | 'IncomingCall.reject' | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'TeamsCall.addParticipant' | /* @conditional-compile-remove(video-background-effects) */ 'VideoEffectsFeature.startEffects';
 
 /**
  * Callback for {@link CallAdapterSubscribers} 'callIdChanged' event.
@@ -5857,6 +5859,27 @@ export declare interface LocalVideoStreamState {
      * API. This can be undefined if the stream has not yet been rendered and defined after createView creates the view.
      */
     view?: VideoStreamRendererViewState;
+    /**
+     * Stores the state of the video effects.
+     * @beta
+     */
+    videoEffects?: LocalVideoStreamVideoEffectsState;
+}
+
+/**
+ * State only version of a LocalVideoStream's {@link @azure/communication-calling#VideoEffectsFeature}.
+ *
+ * @beta
+ */
+export declare interface LocalVideoStreamVideoEffectsState {
+    /**
+     * State of the video background effect.
+     */
+    isActive: boolean;
+    /**
+     * Name of the effect if one is active.
+     */
+    effectName?: VideoEffectName;
 }
 
 /**
@@ -7587,6 +7610,14 @@ export declare interface StatefulDeviceManager extends DeviceManager {
      * {@link StatefulDeviceManager}. See also {@link DeviceManagerState.selectedCamera}.
      */
     selectCamera: (VideoDeviceInfo: any) => void;
+    /**
+     * Gets the list of unparented video streams. This is a list of video streams that have not been added to a
+     * {@link @azure/communication-calling#Call}. This is useful for developers who want to interact with rendered
+     * video streams before they have started a call. See also {@link @azure/communication-react#CallClient.createView}.
+     *
+     * @beta
+     */
+    getUnparentedVideoStreams: LocalVideoStream[];
 }
 
 /**

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

@@ -161,7 +161,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-202302140014';
+var telemetryVersion = '1.5.1-alpha-202302152318';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -1059,8 +1059,10 @@ const dedupeById = (devices) => {
  *
  * @param deviceManager - DeviceManager from SDK
  * @param context - CallContext from StatefulCallClient
+ *
+ * @private
  */
-const deviceManagerDeclaratify = (deviceManager, context) => {
+const deviceManagerDeclaratify = (deviceManager, context, internalContext) => {
     const proxyDeviceManager = new ProxyDeviceManager(deviceManager, context);
     Object.defineProperty(deviceManager, 'unsubscribe', {
         configurable: false,
@@ -1070,6 +1072,11 @@ const deviceManagerDeclaratify = (deviceManager, context) => {
         configurable: false,
         value: (videoDeviceInfo) => proxyDeviceManager.selectCamera(videoDeviceInfo)
     });
+    /* @conditional-compile-remove(video-background-effects) */
+    Object.defineProperty(deviceManager, 'getUnparentedViews', {
+        configurable: false,
+        value: () => internalContext.getUnparentedRenderInfos()
+    });
     return new Proxy(deviceManager, proxyDeviceManager);
 };
 
@@ -3514,6 +3521,9 @@ class InternalCallContext {
     getUnparentedRenderInfo(localVideoStream) {
         return this._unparentedRenderInfos.get(localVideoStream.source.id);
     }
+    getUnparentedRenderInfos() {
+        return [...this._unparentedRenderInfos].map(([, renderInfo]) => renderInfo.stream);
+    }
     setUnparentedRenderInfo(statefulStream, stream, status, renderer) {
         this._unparentedRenderInfos.set(statefulStream.source.id, { stream, status, renderer });
     }
@@ -3767,7 +3777,7 @@ class ProxyCallClient {
                     else {
                         this._sdkDeviceManager = deviceManager;
                     }
-                    this._deviceManager = deviceManagerDeclaratify(deviceManager, this._context);
+                    this._deviceManager = deviceManagerDeclaratify(deviceManager, this._context, this._internalContext);
                     return this._deviceManager;
                 }), 'CallClient.getDeviceManager');
             }
@@ -8660,18 +8670,16 @@ const VideoTile = (props) => {
     const canShowContextMenuButton = isHovered || isFocused;
     return (React__default['default'].createElement(react.Stack, Object.assign({ "data-ui-id": ids.videoTile, className: react.mergeStyles(rootStyles, {
             background: theme.palette.neutralLighter,
-            borderRadius: theme.effects.roundedCorner4,
-            // To ensure that the video tile is focusable when there is a floating video tile
-            zIndex: 1
+            borderRadius: theme.effects.roundedCorner4
         }, isSpeaking && {
-            '&::before': {
+            '&::after': {
                 content: `''`,
                 position: 'absolute',
-                zIndex: 1,
                 border: `0.25rem solid ${theme.palette.themePrimary}`,
                 borderRadius: theme.effects.roundedCorner4,
                 width: '100%',
-                height: '100%'
+                height: '100%',
+                pointerEvents: 'none'
             }
         }, styles === null || styles === void 0 ? void 0 : styles.root) }, longPressHandlersTrampoline),
         React__default['default'].createElement("div", Object.assign({ ref: videoTileRef, style: { width: '100%', height: '100%' } }, hoverHandlers, { "data-is-focusable": true }),
@@ -10400,11 +10408,11 @@ const FloatingLocalVideoLayout = (props) => {
         return (React__default['default'].createElement(VideoGalleryResponsiveHorizontalGallery, { isNarrow: isNarrow, shouldFloatLocalVideo: true, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery }));
     }, [isNarrow, horizontalGalleryTiles, styles === null || styles === void 0 ? void 0 : styles.horizontalGallery]);
     return (React__default['default'].createElement(react.Stack, { styles: rootLayoutStyle },
+        wrappedLocalVideoComponent,
+        React__default['default'].createElement(react.LayerHost, { id: layerHostId, className: react.mergeStyles(layerHostStyle) }),
         React__default['default'].createElement(react.Stack, { horizontal: false, styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
             screenShareComponent ? (screenShareComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-            horizontalGallery),
-        wrappedLocalVideoComponent,
-        React__default['default'].createElement(react.LayerHost, { id: layerHostId, className: react.mergeStyles(layerHostStyle) })));
+            horizontalGallery)));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -10835,7 +10843,7 @@ const ControlBarButton = (props) => {
             : (_l = props === null || props === void 0 ? void 0 : props.strings) === null || _l === void 0 ? void 0 : _l.tooltipOffContent);
     const tooltipId = ((_m = props.tooltipId) !== null && _m !== void 0 ? _m : props.labelKey) ? props.labelKey + '-tooltip' : undefined;
     return (React__default['default'].createElement(ControlButtonTooltip, { content: tooltipContent, id: tooltipId },
-        React__default['default'].createElement(react.DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel && props.onRenderText ? props.onRenderText : undefined, onRenderIcon: (_o = props.onRenderIcon) !== null && _o !== void 0 ? _o : DefaultRenderIcon, ariaLabel: (_r = (_q = (_p = props.splitButtonAriaLabel) !== null && _p !== void 0 ? _p : props.ariaLabel) !== null && _q !== void 0 ? _q : tooltipContent) !== null && _r !== void 0 ? _r : labelText, allowDisabledFocus: (_s = props.allowDisabledFocus) !== null && _s !== void 0 ? _s : true, menuTriggerKeyCode: react.KeyCodes.down }), props.showLabel ? labelText : React__default['default'].createElement(React__default['default'].Fragment, null))));
+        React__default['default'].createElement(react.DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel && props.onRenderText ? props.onRenderText : undefined, onRenderIcon: (_o = props.onRenderIcon) !== null && _o !== void 0 ? _o : DefaultRenderIcon, ariaLabel: (_r = (_q = (_p = props.splitButtonAriaLabel) !== null && _p !== void 0 ? _p : props.ariaLabel) !== null && _q !== void 0 ? _q : tooltipContent) !== null && _r !== void 0 ? _r : labelText, allowDisabledFocus: (_s = props.allowDisabledFocus) !== null && _s !== void 0 ? _s : true, menuTriggerKeyCode: react.KeyCodes.down, text: undefined }), props.showLabel ? labelText : React__default['default'].createElement(React__default['default'].Fragment, null))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -17140,11 +17148,7 @@ const Camera = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 /** @private */
-const generateCustomControlBarButtonStrings = (text) => {
-    return { label: text };
-};
-/** @private */
-const generateCustomControlBarButtons = (onFetchCustomButtonProps, displayType) => {
+const generateCustomControlBarButtons$1 = (onFetchCustomButtonProps, displayType) => {
     const response = {
         primary: undefined
     };
@@ -17157,7 +17161,7 @@ const generateCustomControlBarButtons = (onFetchCustomButtonProps, displayType)
             .filter((buttonProps) => buttonProps.placement === key)
             .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 (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, text: buttonProps.text, styles: buttonProps.styles }));
         })));
     }
     return response;
@@ -17585,7 +17589,7 @@ const CallControls = (props) => {
     const [showDialpad, setShowDialpad] = React.useState(false);
     const theme = react.useTheme();
     /* @conditional-compile-remove(control-bar-button-injection) */
-    const customButtons = React.useMemo(() => generateCustomControlBarButtons(onFetchCustomButtonPropsTrampoline$1(options), options === null || options === void 0 ? void 0 : options.displayType), [options]);
+    const customButtons = React.useMemo(() => generateCustomControlBarButtons$1(onFetchCustomButtonPropsTrampoline$1(options), options === null || options === void 0 ? void 0 : options.displayType), [options]);
     // when props.options is false then we want to hide the whole control bar.
     if (props.options === false) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
@@ -21816,54 +21820,60 @@ const CUSTOM_BUTTON_OPTIONS = {
 };
 /** @private */
 const generateCustomCallWithChatControlBarButton = (onFetchCustomButtonProps, displayType) => {
-    const response = {
-        primary: undefined,
-        secondary: undefined,
-        overflow: undefined
+    const allButtonProps = onFetchCustomButtonProps === null || onFetchCustomButtonProps === void 0 ? void 0 : onFetchCustomButtonProps.map((callback) => callback({ displayType }));
+    return {
+        primary: generateCustomControlBarButtons('primary', allButtonProps),
+        secondary: generateCustomControlBarButtons('secondary', allButtonProps),
+        overflow: generateCustomControlBarButtons('overflow', allButtonProps)
     };
-    if (!onFetchCustomButtonProps) {
-        return response;
-    }
-    const allButtonProps = onFetchCustomButtonProps.map((f) => f({ 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) => {
-            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;
 };
 /** @private */
+const generateCustomControlBarButtons = (placement, customButtons) => customButtons
+    ? customButtons
+        .filter((buttonProps) => buttonProps.placement === placement)
+        .map((buttonProps, i) => (internalProps) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return (React__default['default'].createElement(ControlBarButton, { ariaDescription: (_a = buttonProps.ariaDescription) !== null && _a !== void 0 ? _a : internalProps.ariaDescription, ariaLabel: (_b = buttonProps.ariaLabel) !== null && _b !== void 0 ? _b : internalProps.ariaLabel, disabled: (_c = buttonProps.disabled) !== null && _c !== void 0 ? _c : internalProps.disabled, id: (_d = buttonProps.id) !== null && _d !== void 0 ? _d : internalProps.id, key: (_e = buttonProps.key) !== null && _e !== void 0 ? _e : `${buttonProps.placement}_${i}`, onClick: (_f = buttonProps.onItemClick) !== null && _f !== void 0 ? _f : internalProps.onClick, onRenderIcon: () => {
+                var _a, _b, _c;
+                return (React__default['default'].createElement(react.Icon, { iconName: (_c = (_a = buttonProps.iconName) !== null && _a !== void 0 ? _a : (_b = internalProps.iconProps) === null || _b === void 0 ? void 0 : _b.iconName) !== null && _c !== void 0 ? _c : 'ControlButtonOptions' }));
+            }, showLabel: (_g = buttonProps.showLabel) !== null && _g !== void 0 ? _g : internalProps.showLabel, text: (_h = buttonProps.text) !== null && _h !== void 0 ? _h : internalProps.text, styles: react.mergeStyleSets(internalProps.styles, buttonProps.styles) }));
+    })
+    : [];
+/** @private */
+const generateCustomDrawerButtons = (placement, customButtons) => customButtons
+    ? customButtons
+        .filter((buttonProps) => buttonProps.placement === placement)
+        .map((buttonProps, i) => (Object.assign(Object.assign({}, buttonProps), { disabled: buttonProps.disabled, iconProps: { iconName: buttonProps.iconName }, id: buttonProps.id, itemKey: buttonProps.key ? '' + buttonProps.key : `${buttonProps.placement}_${i}`, onItemClick: buttonProps.onItemClick, text: buttonProps.text })))
+    : [];
+/** @private */
 const generateCustomCallWithChatDrawerButtons = (onFetchCustomButtonProps, displayType) => {
-    const response = {
-        primary: undefined,
-        secondary: undefined,
-        overflow: undefined
+    const customButtons = onFetchCustomButtonProps === null || onFetchCustomButtonProps === void 0 ? void 0 : onFetchCustomButtonProps.map((callback) => callback({ displayType }));
+    return {
+        primary: generateCustomDrawerButtons('primary', customButtons),
+        secondary: generateCustomDrawerButtons('secondary', customButtons),
+        overflow: generateCustomDrawerButtons('overflow', customButtons)
+    };
+};
+/** @private */
+const generateCustomCallWithChatDesktopOverflowButtons = (onFetchCustomButtonProps, displayType) => {
+    const customButtons = onFetchCustomButtonProps === null || onFetchCustomButtonProps === void 0 ? void 0 : onFetchCustomButtonProps.map((callback) => callback({ displayType }));
+    return {
+        primary: generateCustomDrawerButtons('primary', customButtons).map(drawerMenuItemToContextualMenuItem),
+        secondary: generateCustomDrawerButtons('secondary', customButtons).map(drawerMenuItemToContextualMenuItem),
+        overflow: generateCustomDrawerButtons('overflow', customButtons).map(drawerMenuItemToContextualMenuItem)
     };
-    if (!onFetchCustomButtonProps) {
-        return response;
-    }
-    const allButtonProps = onFetchCustomButtonProps.map((f) => f({ 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) => {
-            var _a, _b;
-            return ({
-                disabled: buttonProps.disabled,
-                id: buttonProps.id,
-                iconProps: { iconName: buttonProps.iconName },
-                itemKey: (_a = buttonProps.key) !== null && _a !== void 0 ? _a : `${buttonProps.placement}_${i}`,
-                key: (_b = buttonProps.key) !== null && _b !== void 0 ? _b : `${buttonProps.placement}_${i}`,
-                onItemClick: buttonProps.onItemClick,
-                text: buttonProps.text
-            });
-        })));
-    }
-    return response;
 };
+/** @private */
+const drawerMenuItemToContextualMenuItem = (item) => (Object.assign(Object.assign({}, item), { key: item.itemKey, onClick: item.onItemClick
+        ? (ev) => {
+            var _a;
+            (_a = item.onItemClick) === null || _a === void 0 ? void 0 : _a.call(item, ev);
+        }
+        : undefined, subMenuProps: item.subMenuProps
+        ? {
+            items: item.subMenuProps.map(drawerMenuItemToContextualMenuItem)
+        }
+        : undefined }));
 /* @conditional-compile-remove(control-bar-button-injection) */
 /** @private */
 const onFetchCustomButtonPropsTrampoline = (options) => {
@@ -21878,7 +21888,6 @@ const onFetchCustomButtonPropsTrampoline = (options) => {
  * @private
  */
 const DesktopMoreButton = (props) => {
-    var _a;
     /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const localeStrings = useLocale();
     /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -21918,9 +21927,23 @@ const DesktopMoreButton = (props) => {
         });
     }
     /* @conditional-compile-remove(control-bar-button-injection) */
-    const customDrawerButtons = React.useMemo(() => generateCustomCallWithChatDrawerButtons(onFetchCustomButtonPropsTrampoline(typeof props.callControls === 'object' ? props.callControls : undefined), typeof props.callControls === 'object' ? props.callControls.displayType : undefined), [props.callControls]);
+    const customDrawerButtons = React.useMemo(() => generateCustomCallWithChatDesktopOverflowButtons(onFetchCustomButtonPropsTrampoline(typeof props.callControls === 'object' ? props.callControls : undefined), typeof props.callControls === 'object' ? props.callControls.displayType : undefined), [props.callControls]);
+    /* @conditional-compile-remove(control-bar-button-injection) */
+    customDrawerButtons['primary'].slice(CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).forEach((element) => {
+        moreButtonContextualMenuItems.push(Object.assign({ itemProps: {
+                styles: buttonFlyoutIncreasedSizeStyles
+            } }, element));
+    });
+    /* @conditional-compile-remove(control-bar-button-injection) */
+    customDrawerButtons['secondary']
+        .slice(CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS)
+        .forEach((element) => {
+        moreButtonContextualMenuItems.push(Object.assign({ itemProps: {
+                styles: buttonFlyoutIncreasedSizeStyles
+            } }, element));
+    });
     /* @conditional-compile-remove(control-bar-button-injection) */
-    (_a = customDrawerButtons['overflow']) === null || _a === void 0 ? void 0 : _a.props.children.forEach((element) => {
+    customDrawerButtons['overflow'].forEach((element) => {
         moreButtonContextualMenuItems.push(Object.assign({ itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
             } }, element));
@@ -22043,10 +22066,10 @@ const CallWithChatControlBar = (props) => {
                                 disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.screenShareButton) })), 
                         /* @conditional-compile-remove(control-bar-button-injection) */
                         (_a = customButtons['primary']) === null || _a === void 0 ? void 0 :
-                            _a.props.children.slice(0, props.mobileView
+                            _a.slice(0, props.mobileView
                                 ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS
-                                : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((element) => {
-                                return (React__default['default'].createElement(element.type, Object.assign({}, element.props, { key: element.props.strings.label, styles: commonButtonStyles, displayType: options.displayType, showLabel: options.displayType !== 'compact' })));
+                                : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
+                                return (React__default['default'].createElement(CustomButton, { key: `primary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
                             }),
                             props.mobileView && (React__default['default'].createElement(MoreButton, { "data-ui-id": "call-with-chat-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage })),
                             /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.moreButton) &&
@@ -22058,8 +22081,8 @@ const CallWithChatControlBar = (props) => {
         !props.mobileView && (React__default['default'].createElement(react.Stack, { horizontal: true, className: !props.mobileView ? react.mergeStyles(desktopButtonContainerStyle) : undefined }, 
         /* @conditional-compile-remove(control-bar-button-injection) */
         (_b = customButtons['secondary']) === null || _b === void 0 ? void 0 :
-            _b.props.children.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((element) => {
-                return (React__default['default'].createElement(element.type, Object.assign({}, element.props, { key: element.props.key, styles: commonButtonStyles, displayType: options.displayType, showLabel: options.displayType !== 'compact' })));
+            _b.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
+                return (React__default['default'].createElement(CustomButton, { key: `secondary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
             }),
             isEnabled$1(options === null || options === void 0 ? void 0 : options.peopleButton) && (React__default['default'].createElement(PeopleButton, { checked: props.peopleButtonChecked, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-with-chat-composite-people-button", disabled: props.disableButtonsForLobbyPage || isDisabled$2(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles })),
             isEnabled$1(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton))));
@@ -22435,7 +22458,7 @@ const inferCallWithChatControlOptions = (callWithChatControls) => {
 };
 /** @private */
 const MoreDrawer = (props) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b;
     const drawerMenuItems = [];
     const { speakers, onSelectSpeaker, onLightDismiss } = props;
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -22545,15 +22568,15 @@ const MoreDrawer = (props) => {
     /* @conditional-compile-remove(control-bar-button-injection) */
     const customDrawerButtons = React.useMemo(() => generateCustomCallWithChatDrawerButtons(onFetchCustomButtonPropsTrampoline(drawerSelectionOptions !== false ? drawerSelectionOptions : undefined), drawerSelectionOptions !== false ? drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.displayType : undefined), [drawerSelectionOptions]);
     /* @conditional-compile-remove(control-bar-button-injection) */
-    (_c = customDrawerButtons['overflow']) === null || _c === void 0 ? void 0 : _c.props.children.forEach((element) => {
+    customDrawerButtons['primary'].slice(CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS).forEach((element) => {
         drawerMenuItems.push(element);
     });
     /* @conditional-compile-remove(control-bar-button-injection) */
-    (_d = customDrawerButtons['primary']) === null || _d === void 0 ? void 0 : _d.props.children.slice(CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS).forEach((element) => {
+    customDrawerButtons['secondary'].forEach((element) => {
         drawerMenuItems.push(element);
     });
     /* @conditional-compile-remove(control-bar-button-injection) */
-    (_e = customDrawerButtons['secondary']) === null || _e === void 0 ? void 0 : _e.props.children.forEach((element) => {
+    customDrawerButtons['overflow'].forEach((element) => {
         drawerMenuItems.push(element);
     });
     return React__default['default'].createElement(_DrawerMenu, { items: drawerMenuItems, onLightDismiss: props.onLightDismiss });