@azure/communication-react 1.3.3-alpha-202208170014.0 → 1.3.3-alpha-202208180014.0

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-202208170014.0';
+var telemetryVersion = '1.3.3-alpha-202208180014.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -405,7 +405,7 @@ var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments,
  *
  * @internal
  */
-const _isInCall = (callStatus) => !!callStatus && !['None', 'Disconnected', 'Connecting', 'LocalHold', 'RemoteHold', 'Ringing'].includes(callStatus);
+const _isInCall = (callStatus) => !!callStatus && !['None', 'Disconnected', 'Connecting', 'LocalHold', 'Ringing', 'EarlyMedia'].includes(callStatus);
 /**
  * Check if the call state represents being in the lobby or waiting to be admitted.
  *
@@ -2271,6 +2271,12 @@ const useLocaleFileCardStringsTrampoline = () => {
     /* @conditional-compile-remove(file-sharing) */
     return useLocale$1().strings.sendBox;
 };
+/**
+ * Identify if a participant state if part of the Calling states or Hold states.
+ */
+const _isParticipantStateCallingOrHold = (participantState) => {
+    return !!participantState && ['Idle', 'Connecting', 'EarlyMedia', 'Ringing', 'Hold'].includes(participantState);
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -4348,7 +4354,7 @@ const participantStateMaxWidth = '5rem';
 /**
  * @private
  */
-const participantStateStringStyles = {
+const participantStateStringStyles$1 = {
     maxWidth: participantStateMaxWidth,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -4421,7 +4427,7 @@ const ParticipantItem = (props) => {
         setItemHovered(false);
         setMenuHidden(true);
     };
-    const participantStateString = participantStateStringTrampoline(props, strings);
+    const participantStateString = participantStateStringTrampoline$1(props, strings);
     return (React__default['default'].createElement("div", { ref: containerRef, role: 'menuitem', "data-is-focusable": true, className: react.mergeStyles(participantItemContainerStyle({ localparticipant: me, clickable: !!menuItems }), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
             if (!participantStateString) {
                 setItemHovered(true);
@@ -4436,13 +4442,13 @@ const ParticipantItem = (props) => {
             avatar,
             me && React__default['default'].createElement(react.Text, { className: meTextStyle }, strings.isMeText),
             React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(infoContainerStyle) }, onRenderIcon && onRenderIcon(props))),
-        !me && participantStateString ? (React__default['default'].createElement(react.Text, { "data-ui-id": "participant-item-state-string", className: react.mergeStyles(participantStateStringStyles) }, participantStateString)) : (React__default['default'].createElement("div", null, menuItems && menuItems.length > 0 && (React__default['default'].createElement(React__default['default'].Fragment, null,
+        !me && participantStateString ? (React__default['default'].createElement(react.Text, { "data-ui-id": "participant-item-state-string", className: react.mergeStyles(participantStateStringStyles$1) }, participantStateString)) : (React__default['default'].createElement("div", null, menuItems && menuItems.length > 0 && (React__default['default'].createElement(React__default['default'].Fragment, null,
             menuButton,
             React__default['default'].createElement(react.ContextualMenu, { items: menuItems, hidden: menuHidden, target: containerRef, onItemClick: onDismissMenu, onDismiss: onDismissMenu, directionalHint: react.DirectionalHint.bottomRightEdge, className: contextualMenuStyle, calloutProps: {
                     preventDismissOnEvent: _preventDismissOnEvent
                 } })))))));
 };
-const participantStateStringTrampoline = (props, strings) => {
+const participantStateStringTrampoline$1 = (props, strings) => {
     /* @conditional-compile-remove(one-to-n-calling) */
     /* @conditional-compile-remove(PSTN-calls) */
     return props.participantState === 'Idle' || props.participantState === 'Connecting'
@@ -4454,6 +4460,65 @@ const participantStateStringTrampoline = (props, strings) => {
                 : undefined;
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @internal
+ */
+const presenterPermissions = {
+    cameraButton: true,
+    microphoneButton: true,
+    screenShare: true,
+    removeParticipantButton: true
+};
+/**
+ * @internal
+ */
+const consumerPermissions = {
+    cameraButton: false,
+    microphoneButton: false,
+    screenShare: false,
+    removeParticipantButton: false
+};
+/**
+ * @internal
+ */
+const attendeePermissions = {
+    cameraButton: true,
+    microphoneButton: true,
+    screenShare: false,
+    removeParticipantButton: false
+};
+/**
+ * @internal
+ */
+const PermissionsContext = React.createContext(presenterPermissions);
+/**
+ * @internal
+ */
+const _PermissionsProvider = (props) => {
+    const { permissions, children } = props;
+    return React__default['default'].createElement(PermissionsContext.Provider, { value: permissions }, children);
+};
+/**
+ * @internal
+ * React hook to access permissions
+ */
+const _usePermissions = () => React.useContext(PermissionsContext);
+/**
+ * @internal
+ */
+const _getPermissions = (role) => {
+    if (role === 'Consumer') {
+        return consumerPermissions;
+    }
+    else if (role === 'Attendee') {
+        return attendeePermissions;
+    }
+    else {
+        return presenterPermissions;
+    }
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -4534,6 +4599,11 @@ const ParticipantList = (props) => {
     const createParticipantMenuItems = (participant) => {
         var _a, _b;
         let menuItems = [];
+        let disabled = !participant.isRemovable;
+        /* @conditional-compile-remove(rooms) */
+        const isRemovable = _usePermissions().removeParticipantButton;
+        /* @conditional-compile-remove(rooms) */
+        disabled = !isRemovable || disabled;
         if (participant.userId !== myUserId && onRemoveParticipant) {
             menuItems.push({
                 key: 'remove',
@@ -4542,7 +4612,7 @@ const ParticipantList = (props) => {
                 itemProps: {
                     styles: (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles) === null || _b === void 0 ? void 0 : _b.participantSubMenuItemsStyles
                 },
-                disabled: !participant.isRemovable,
+                disabled: disabled,
                 'data-ui-id': ids.participantListRemoveParticipantButton
             });
         }
@@ -4769,15 +4839,6 @@ const displayNameStyle = {
     textOverflow: 'ellipsis',
     maxWidth: '100%'
 };
-/**
- * @private
- */
-const participantStateStyle$1 = {
-    textAlign: 'center',
-    paddingTop: '0.5rem',
-    fontWeight: 600,
-    fontSize: '0.75rem'
-};
 /**
  * @private
  */
@@ -4801,6 +4862,25 @@ const isSpeakingBorderDiv = {
     // Ensure the isSpeaking element does not steal any pointer events such as onClick events
     pointerEvents: 'none'
 };
+/**
+ * @private
+ */
+const participantStateStringStyles = (showLabel) => {
+    return {
+        textAlign: 'center',
+        minWidth: '3rem',
+        color: 'inherit',
+        width: showLabel ? 'auto' : '100%',
+        marginRight: showLabel ? 0 : 'none',
+        marginLeft: showLabel ? 'auto' : 'none',
+        fontSize: '0.75rem',
+        lineHeight: 'normal',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        padding: '0.25rem'
+    };
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -4817,26 +4897,10 @@ const DEFAULT_PERSONA_MAX_SIZE_PX = 100;
 // Coin min size is set PersonaSize.size32
 const DEFAULT_PERSONA_MIN_SIZE_PX = 32;
 const DefaultPlaceholder = (props) => {
-    const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails, participantState, strings } = props;
-    const participantStateString = React__default['default'].useMemo(() => {
-        if (!strings) {
-            return;
-        }
-        if (participantState === 'Idle' || participantState === 'Connecting') {
-            return strings === null || strings === void 0 ? void 0 : strings.participantStateConnecting;
-        }
-        else if (participantState === 'EarlyMedia' || participantState === 'Ringing') {
-            return strings === null || strings === void 0 ? void 0 : strings.participantStateRinging;
-        }
-        else if (participantState === 'Hold') {
-            return strings === null || strings === void 0 ? void 0 : strings.participantStateHold;
-        }
-        return;
-    }, [participantState, strings]);
+    const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails } = props;
     return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
         React__default['default'].createElement(react.Stack, { styles: defaultPersonaStyles },
-            React__default['default'].createElement(react.Persona, { coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '', showOverflowTooltip: false }),
-            participantStateString && React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStyle$1) }, participantStateString))));
+            React__default['default'].createElement(react.Persona, { coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '', showOverflowTooltip: false }))));
 };
 const defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };
 /**
@@ -4847,15 +4911,10 @@ const defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };
  * @public
  */
 const VideoTile = (props) => {
-    const { children, displayName, initialsName, isMirrored, isMuted, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX, 
-    /* @conditional-compile-remove(one-to-n-calling) */
-    /* @conditional-compile-remove(PSTN-calls) */
-    participantState } = props;
-    /* @conditional-compile-remove(one-to-n-calling) */
-    // @conditional-compile-remove(PSTN-calls)
-    const strings = Object.assign(Object.assign({}, useLocale$1().strings.videoTile), props.strings);
+    const { children, displayName, initialsName, isMirrored, isMuted, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX } = props;
     const [personaSize, setPersonaSize] = React.useState(100);
     const videoTileRef = React.useRef(null);
+    const locale = useLocale$1();
     const theme = useTheme();
     const isVideoRendered = !!renderElement;
     const observer = React.useRef(new ResizeObserver((entries) => {
@@ -4876,14 +4935,13 @@ const VideoTile = (props) => {
         noVideoAvailableAriaLabel,
         coinSize: personaSize,
         styles: defaultPersonaStyles,
-        hidePersonaDetails: true,
-        /* @conditional-compile-remove(one-to-n-calling) */
-        /* @conditional-compile-remove(PSTN-calls) */
-        participantState: participantState
+        hidePersonaDetails: true
     };
     const videoHintWithBorderRadius = react.mergeStyles(videoHint, { borderRadius: theme.effects.roundedCorner4 });
     const tileInfoStyle = React.useMemo(() => react.mergeStyles(isVideoRendered ? videoHintWithBorderRadius : disabledVideoHint, getVideoTileOverrideColor(isVideoRendered, theme, 'neutralPrimary'), styles === null || styles === void 0 ? void 0 : styles.displayNameContainer), [isVideoRendered, videoHintWithBorderRadius, theme, styles === null || styles === void 0 ? void 0 : styles.displayNameContainer]);
     const ids = useIdentifiers();
+    const canShowLabel = showLabel && (displayName || (showMuteIndicator && isMuted));
+    const participantStateString = participantStateStringTrampoline(props, locale);
     return (React__default['default'].createElement(reactNorthstar.Ref, { innerRef: videoTileRef },
         React__default['default'].createElement(react.Stack, { "data-ui-id": ids.videoTile, className: react.mergeStyles(rootStyles, {
                 background: theme.palette.neutralLighter,
@@ -4893,216 +4951,33 @@ const VideoTile = (props) => {
                     borderRadius: theme.effects.roundedCorner4,
                     border: `0.25rem solid ${isSpeaking ? theme.palette.themePrimary : 'transparent'}`
                 }) }),
-            isVideoRendered ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles, isMirrored && { transform: 'scaleX(-1)' }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement)) : (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles) }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React__default['default'].createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions, { 
-                /* @conditional-compile-remove(one-to-n-calling) */
-                // @conditional-compile-remove(PSTN-calls)
-                strings: strings }))))),
-            showLabel && (displayName || (showMuteIndicator && isMuted)) && (React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoContainerStyle },
-                React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoStyle },
-                    displayName && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(displayNameStyle), title: displayName }, displayName)),
+            isVideoRendered ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles, isMirrored && { transform: 'scaleX(-1)' }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement)) : (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles) }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React__default['default'].createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))))),
+            (canShowLabel || participantStateString) && (React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoContainerStyle, tokens: tileInfoContainerTokens },
+                canShowLabel && (React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoStyle },
+                    React__default['default'].createElement(react.Text, { className: react.mergeStyles(displayNameStyle), title: displayName }, displayName),
                     showMuteIndicator && isMuted && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle) },
-                        React__default['default'].createElement(react.Icon, { iconName: "VideoTileMicOff" })))))),
+                        React__default['default'].createElement(react.Icon, { iconName: "VideoTileMicOff" }))))),
+                participantStateString && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStringStyles(showLabel)) }, participantStateString)))),
             children && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(overlayContainerStyles, styles === null || styles === void 0 ? void 0 : styles.overlayContainer) }, children)))));
 };
-
-// Copyright (c) Microsoft Corporation.
-/**
- * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance
- * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the
- * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo
- *
- * @internal
- */
-const _RemoteVideoTile = React__default['default'].memo((props) => {
-    const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
-    isMuted, isSpeaking, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, displayName, onRenderAvatar, showMuteIndicator, 
+const participantStateStringTrampoline = (props, locale) => {
     /* @conditional-compile-remove(one-to-n-calling) */
     /* @conditional-compile-remove(PSTN-calls) */
-    participantState } = props;
-    const remoteVideoStreamProps = React.useMemo(() => ({
-        isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
-        isScreenSharingOn,
-        isStreamAvailable: isAvailable,
-        isStreamReceiving: isReceiving,
-        onCreateRemoteStreamView,
-        onDisposeRemoteStreamView,
-        remoteParticipantId: userId,
-        renderElementExists: !!renderElement,
-        scalingMode: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode
-    }), [
-        isAvailable,
-        isReceiving,
-        isScreenSharingOn,
-        onCreateRemoteStreamView,
-        onDisposeRemoteStreamView,
-        remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
-        remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode,
-        renderElement,
-        userId
-    ]);
-    // Handle creating, destroying and updating the video stream as necessary
-    useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);
-    const renderVideoStreamElement = React.useMemo(() => {
-        // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which
-        // implies that, after their threshold, all streams have no child (blank video)
-        if (!renderElement || !renderElement.childElementCount) {
-            // Returning `undefined` results in the placeholder with avatar being shown
-            return undefined;
-        }
-        return (React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' }));
-    }, [renderElement, isReceiving]);
-    return (React__default['default'].createElement(VideoTile, { key: userId, userId: userId, renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, isSpeaking: isSpeaking, showMuteIndicator: showMuteIndicator, showLabel: props.showLabel, personaMinSize: props.personaMinSize, 
-        /* @conditional-compile-remove(one-to-n-calling) */
-        /* @conditional-compile-remove(PSTN-calls) */
-        participantState: participantState }));
-});
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-/**
- * Horizontal Gallery button width in rem
- */
-const HORIZONTAL_GALLERY_BUTTON_WIDTH = 1.75;
-/**
- * @private
- */
-const leftRightButtonStyles = (theme) => {
-    return {
-        background: 'none',
-        padding: 0,
-        height: 'auto',
-        minWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,
-        maxWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,
-        border: `1px solid ${theme.palette.neutralLight}`,
-        borderRadius: theme.effects.roundedCorner4
-    };
-};
-/**
- * Horizontal Gallery gap size in rem between tiles and buttons
- */
-const HORIZONTAL_GALLERY_GAP = 0.5;
-/**
- * @private
- */
-const rootStyle = {
-    height: '100%',
-    width: '100%',
-    gap: `${HORIZONTAL_GALLERY_GAP}rem`
-};
-/**
- * @private
- */
-const childrenContainerStyle = {
-    height: '100%',
-    gap: `${HORIZONTAL_GALLERY_GAP}rem`
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * {@link HorizontalGallery} default children per page
- */
-const DEFAULT_CHILDREN_PER_PAGE = 5;
-/**
- * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.
- * @param props - HorizontalGalleryProps {@link @azure/communication-react#HorizontalGalleryProps}
- * @returns
- */
-const HorizontalGallery = (props) => {
-    var _a, _b;
-    const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles } = props;
-    const ids = useIdentifiers();
-    const [page, setPage] = React.useState(0);
-    const numberOfChildren = React__default['default'].Children.count(children);
-    const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;
-    const paginatedChildren = React.useMemo(() => {
-        return bucketize(React__default['default'].Children.toArray(children), childrenPerPage);
-    }, [children, childrenPerPage]);
-    // If children per page is 0 or less return empty element
-    if (childrenPerPage <= 0) {
-        return React__default['default'].createElement(React__default['default'].Fragment, null);
-    }
-    const firstIndexOfCurrentPage = page * childrenPerPage;
-    const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
-    const childrenOnCurrentPage = paginatedChildren[clippedPage];
-    const showButtons = numberOfChildren > childrenPerPage;
-    const disablePreviousButton = page === 0;
-    const disableNextButton = page === lastPage;
-    return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(rootStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) },
-        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryLeftButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.previousButton, onClick: () => setPage(Math.max(0, Math.min(lastPage, page - 1))), disabled: disablePreviousButton, identifier: ids.horizontalGalleryLeftNavButton })),
-        React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(childrenContainerStyle, { '> *': (_b = props.styles) === null || _b === void 0 ? void 0 : _b.children }) }, childrenOnCurrentPage),
-        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton, identifier: ids.horizontalGalleryRightNavButton }))));
-};
-const HorizontalGalleryNavigationButton = (props) => {
-    const theme = useTheme();
-    return (React__default['default'].createElement(react.DefaultButton, { className: react.mergeStyles(leftRightButtonStyles(theme), props.styles), onClick: props.onClick, disabled: props.disabled, "data-ui-id": props.identifier }, props.icon));
-};
-function bucketize(arr, bucketSize) {
-    const bucketArray = [];
-    if (bucketSize <= 0) {
-        return bucketArray;
-    }
-    for (let i = 0; i < arr.length; i += bucketSize) {
-        bucketArray.push(arr.slice(i, i + bucketSize));
-    }
-    return bucketArray;
-}
-
-// Copyright (c) Microsoft Corporation.
-/**
- * Wrapped HorizontalGallery that adjusts the number of items per page based on the
- * available width obtained from a ResizeObserver, width per child, gap width, and button width
- */
-const ResponsiveHorizontalGallery = (props) => {
-    const { childWidthRem, gapWidthRem, buttonWidthRem = 0 } = props;
-    const containerRef = React.useRef(null);
-    const containerWidth = _useContainerWidth(containerRef);
-    const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;
-    const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;
-    const childrenPerPage = calculateChildrenPerPage({
-        numberOfChildren: React__default['default'].Children.count(props.children),
-        containerWidth: (containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0) - leftPadding - rightPadding,
-        childWidthRem,
-        gapWidthRem,
-        buttonWidthRem
-    });
-    return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(props.containerStyles) },
-        React__default['default'].createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles }, props.children)));
+    const strings = Object.assign(Object.assign({}, locale.strings.videoTile), props.strings);
+    /* @conditional-compile-remove(one-to-n-calling) */
+    /* @conditional-compile-remove(PSTN-calls) */
+    return props.participantState === 'Idle' || props.participantState === 'Connecting'
+        ? strings === null || strings === void 0 ? void 0 : strings.participantStateConnecting
+        : props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'
+            ? strings === null || strings === void 0 ? void 0 : strings.participantStateRinging
+            : props.participantState === 'Hold'
+                ? strings === null || strings === void 0 ? void 0 : strings.participantStateHold
+                : undefined;
 };
-/**
- * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and
- * gaps in between
- */
-const calculateChildrenPerPage = (args) => {
-    const { numberOfChildren, containerWidth, buttonWidthRem, childWidthRem, gapWidthRem } = args;
-    const childWidth = _convertRemToPx(childWidthRem);
-    const gapWidth = _convertRemToPx(gapWidthRem);
-    /** First check how many children can fit in containerWidth.
-     *    __________________________________
-     *   |                ||                |
-     *   |                ||                |
-     *   |________________||________________|
-     *   <-----------containerWidth--------->
-     *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
-     */
-    const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childWidth + gapWidth));
-    // If all children fit then return numberOfChildrenInContainer
-    if (numberOfChildren <= numberOfChildrenInContainer) {
-        return numberOfChildrenInContainer;
-    }
-    const buttonWidth = _convertRemToPx(buttonWidthRem);
-    /** We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from
-     * containerWidth to compute childrenSpace
-     *   <-----------containerWidth--------->
-     *    __________________________________
-     *   | ||             ||             || |
-     *   |<||             ||             ||>|
-     *   |_||_____________||_____________||_|
-     *       <-------childrenSpace------>
-     */
-    const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;
-    // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.
-    // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
-    return Math.floor((childrenSpace + gapWidth) / (childWidth + gapWidth));
+const tileInfoContainerTokens = {
+    // A horizontal Stack sets the left margin to 0 for all it's children.
+    // We need to allow the children to set their own margins
+    childrenGap: 'none'
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -5244,44 +5119,278 @@ const layerHostStyle = {
     pointerEvents: 'none'
 };
 /**
- * @private
+ * @private
+ */
+const localVideoCameraCycleButtonStyles = (theme) => {
+    return {
+        root: {
+            position: 'absolute',
+            width: _pxToRem(32),
+            height: _pxToRem(32),
+            right: '0rem',
+            top: '0rem',
+            color: '#FFFFFF',
+            zIndex: 2,
+            background: 'rgba(0,0,0,0.4)',
+            borderRadius: theme.effects.roundedCorner2
+        },
+        rootFocused: {
+            // styles to remove the unwanted white highlight and blue colour after tapping on button.
+            color: '#FFFFFF',
+            background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.
+        },
+        icon: {
+            paddingLeft: _pxToRem(3),
+            paddingRight: _pxToRem(3),
+            margin: 0
+        },
+        flexContainer: {
+            paddingBottom: _pxToRem(8)
+        }
+    };
+};
+/**
+ * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video
+ * @private
+ */
+const localVideoModalStyles = {
+    keyboardMoveIconContainer: {
+        zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.
+    }
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance
+ * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the
+ * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo
+ *
+ * @internal
+ */
+const _RemoteVideoTile = React__default['default'].memo((props) => {
+    const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
+    isMuted, isSpeaking, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, displayName, onRenderAvatar, showMuteIndicator } = props;
+    const containerRef = React__default['default'].useRef(null);
+    /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
+    const containerWidth = _useContainerWidth(containerRef);
+    const remoteVideoStreamProps = React.useMemo(() => ({
+        isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
+        isScreenSharingOn,
+        isStreamAvailable: isAvailable,
+        isStreamReceiving: isReceiving,
+        onCreateRemoteStreamView,
+        onDisposeRemoteStreamView,
+        remoteParticipantId: userId,
+        renderElementExists: !!renderElement,
+        scalingMode: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode
+    }), [
+        isAvailable,
+        isReceiving,
+        isScreenSharingOn,
+        onCreateRemoteStreamView,
+        onDisposeRemoteStreamView,
+        remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
+        remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode,
+        renderElement,
+        userId
+    ]);
+    // Handle creating, destroying and updating the video stream as necessary
+    useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);
+    const renderVideoStreamElement = React.useMemo(() => {
+        // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which
+        // implies that, after their threshold, all streams have no child (blank video)
+        if (!renderElement || !renderElement.childElementCount) {
+            // Returning `undefined` results in the placeholder with avatar being shown
+            return undefined;
+        }
+        return (React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' }));
+    }, [renderElement, isReceiving]);
+    const showLabelTrampoline = React.useMemo(() => {
+        /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
+        return canShowLabel(props.participantState, props.showLabel, containerWidth);
+    }, [
+        /* @conditional-compile-remove(one-to-n-calling) */
+        /* @conditional-compile-remove(PSTN-calls) */
+        containerWidth,
+        props
+    ]);
+    return (
+    // IMPORTANT: This div needs to be a flex so that the children take up its full width and height
+    React__default['default'].createElement("div", { ref: containerRef, style: { display: 'flex', flexGrow: 1 } },
+        React__default['default'].createElement(VideoTile, { key: userId, userId: userId, renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, isSpeaking: isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: showLabelTrampoline, 
+            /* @conditional-compile-remove(one-to-n-calling) */
+            /* @conditional-compile-remove(PSTN-calls) */
+            participantState: props.participantState })));
+});
+/* @conditional-compile-remove(one-to-n-calling) */
+/* @conditional-compile-remove(PSTN-calls) */
+/**
+ * Determines if a label should be shown for a remote video tile.
+ * When the remote video tile is rendered as a small tile in horizontal gallery,
+ * we hide the participants name if they are in hold/connecting states.
+ */
+const canShowLabel = (participantState, showLabel, containerWidth) => {
+    // if showLabel has been explicitly set to false, don't show the label
+    if (showLabel === false) {
+        return showLabel;
+    }
+    // If the participant state is in calling or hold and
+    // the container width is less than the small horizontal gallery tile size,
+    // don't show the label (participant name)
+    if (_isParticipantStateCallingOrHold(participantState)) {
+        if (containerWidth && containerWidth / 16 <= SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width) {
+            return false;
+        }
+    }
+    return showLabel;
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * Horizontal Gallery button width in rem
+ */
+const HORIZONTAL_GALLERY_BUTTON_WIDTH = 1.75;
+/**
+ * @private
+ */
+const leftRightButtonStyles = (theme) => {
+    return {
+        background: 'none',
+        padding: 0,
+        height: 'auto',
+        minWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,
+        maxWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,
+        border: `1px solid ${theme.palette.neutralLight}`,
+        borderRadius: theme.effects.roundedCorner4
+    };
+};
+/**
+ * Horizontal Gallery gap size in rem between tiles and buttons
+ */
+const HORIZONTAL_GALLERY_GAP = 0.5;
+/**
+ * @private
+ */
+const rootStyle = {
+    height: '100%',
+    width: '100%',
+    gap: `${HORIZONTAL_GALLERY_GAP}rem`
+};
+/**
+ * @private
+ */
+const childrenContainerStyle = {
+    height: '100%',
+    gap: `${HORIZONTAL_GALLERY_GAP}rem`
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * {@link HorizontalGallery} default children per page
+ */
+const DEFAULT_CHILDREN_PER_PAGE = 5;
+/**
+ * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.
+ * @param props - HorizontalGalleryProps {@link @azure/communication-react#HorizontalGalleryProps}
+ * @returns
+ */
+const HorizontalGallery = (props) => {
+    var _a, _b;
+    const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles } = props;
+    const ids = useIdentifiers();
+    const [page, setPage] = React.useState(0);
+    const numberOfChildren = React__default['default'].Children.count(children);
+    const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;
+    const paginatedChildren = React.useMemo(() => {
+        return bucketize(React__default['default'].Children.toArray(children), childrenPerPage);
+    }, [children, childrenPerPage]);
+    // If children per page is 0 or less return empty element
+    if (childrenPerPage <= 0) {
+        return React__default['default'].createElement(React__default['default'].Fragment, null);
+    }
+    const firstIndexOfCurrentPage = page * childrenPerPage;
+    const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
+    const childrenOnCurrentPage = paginatedChildren[clippedPage];
+    const showButtons = numberOfChildren > childrenPerPage;
+    const disablePreviousButton = page === 0;
+    const disableNextButton = page === lastPage;
+    return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(rootStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) },
+        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryLeftButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.previousButton, onClick: () => setPage(Math.max(0, Math.min(lastPage, page - 1))), disabled: disablePreviousButton, identifier: ids.horizontalGalleryLeftNavButton })),
+        React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(childrenContainerStyle, { '> *': (_b = props.styles) === null || _b === void 0 ? void 0 : _b.children }) }, childrenOnCurrentPage),
+        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton, identifier: ids.horizontalGalleryRightNavButton }))));
+};
+const HorizontalGalleryNavigationButton = (props) => {
+    const theme = useTheme();
+    return (React__default['default'].createElement(react.DefaultButton, { className: react.mergeStyles(leftRightButtonStyles(theme), props.styles), onClick: props.onClick, disabled: props.disabled, "data-ui-id": props.identifier }, props.icon));
+};
+function bucketize(arr, bucketSize) {
+    const bucketArray = [];
+    if (bucketSize <= 0) {
+        return bucketArray;
+    }
+    for (let i = 0; i < arr.length; i += bucketSize) {
+        bucketArray.push(arr.slice(i, i + bucketSize));
+    }
+    return bucketArray;
+}
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * Wrapped HorizontalGallery that adjusts the number of items per page based on the
+ * available width obtained from a ResizeObserver, width per child, gap width, and button width
  */
-const localVideoCameraCycleButtonStyles = (theme) => {
-    return {
-        root: {
-            position: 'absolute',
-            width: _pxToRem(32),
-            height: _pxToRem(32),
-            right: '0rem',
-            top: '0rem',
-            color: '#FFFFFF',
-            zIndex: 2,
-            background: 'rgba(0,0,0,0.4)',
-            borderRadius: theme.effects.roundedCorner2
-        },
-        rootFocused: {
-            // styles to remove the unwanted white highlight and blue colour after tapping on button.
-            color: '#FFFFFF',
-            background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.
-        },
-        icon: {
-            paddingLeft: _pxToRem(3),
-            paddingRight: _pxToRem(3),
-            margin: 0
-        },
-        flexContainer: {
-            paddingBottom: _pxToRem(8)
-        }
-    };
+const ResponsiveHorizontalGallery = (props) => {
+    const { childWidthRem, gapWidthRem, buttonWidthRem = 0 } = props;
+    const containerRef = React.useRef(null);
+    const containerWidth = _useContainerWidth(containerRef);
+    const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;
+    const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;
+    const childrenPerPage = calculateChildrenPerPage({
+        numberOfChildren: React__default['default'].Children.count(props.children),
+        containerWidth: (containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0) - leftPadding - rightPadding,
+        childWidthRem,
+        gapWidthRem,
+        buttonWidthRem
+    });
+    return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(props.containerStyles) },
+        React__default['default'].createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles }, props.children)));
 };
 /**
- * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video
- * @private
+ * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and
+ * gaps in between
  */
-const localVideoModalStyles = {
-    keyboardMoveIconContainer: {
-        zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.
+const calculateChildrenPerPage = (args) => {
+    const { numberOfChildren, containerWidth, buttonWidthRem, childWidthRem, gapWidthRem } = args;
+    const childWidth = _convertRemToPx(childWidthRem);
+    const gapWidth = _convertRemToPx(gapWidthRem);
+    /** First check how many children can fit in containerWidth.
+     *    __________________________________
+     *   |                ||                |
+     *   |                ||                |
+     *   |________________||________________|
+     *   <-----------containerWidth--------->
+     *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
+     */
+    const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childWidth + gapWidth));
+    // If all children fit then return numberOfChildrenInContainer
+    if (numberOfChildren <= numberOfChildrenInContainer) {
+        return numberOfChildrenInContainer;
     }
+    const buttonWidth = _convertRemToPx(buttonWidthRem);
+    /** We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from
+     * containerWidth to compute childrenSpace
+     *   <-----------containerWidth--------->
+     *    __________________________________
+     *   | ||             ||             || |
+     *   |<||             ||             ||>|
+     *   |_||_____________||_____________||_|
+     *       <-------childrenSpace------>
+     */
+    const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;
+    // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.
+    // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
+    return Math.floor((childrenSpace + gapWidth) / (childWidth + gapWidth));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -6542,65 +6651,6 @@ const HighContrastAwareIcon = (props) => {
         }) }));
 };
 
-// Copyright (c) Microsoft Corporation.
-/**
- * @internal
- */
-const presenterPermissions = {
-    cameraButton: true,
-    microphoneButton: true,
-    screenShare: true,
-    participantList: true
-};
-/**
- * @internal
- */
-const consumerPermissions = {
-    cameraButton: false,
-    microphoneButton: false,
-    screenShare: false,
-    participantList: false
-};
-/**
- * @internal
- */
-const attendeePermissions = {
-    cameraButton: true,
-    microphoneButton: true,
-    screenShare: false,
-    participantList: true
-};
-/**
- * @internal
- */
-const PermissionsContext = React.createContext(presenterPermissions);
-/**
- * @internal
- */
-const _PermissionsProvider = (props) => {
-    const { permissions, children } = props;
-    return React__default['default'].createElement(PermissionsContext.Provider, { value: permissions }, children);
-};
-/**
- * @internal
- * React hook to access permissions
- */
-const _usePermissions = () => React.useContext(PermissionsContext);
-/**
- * @internal
- */
-const _getPermissions = (role) => {
-    if (role === 'Consumer') {
-        return consumerPermissions;
-    }
-    else if (role === 'Attendee') {
-        return attendeePermissions;
-    }
-    else {
-        return presenterPermissions;
-    }
-};
-
 // Copyright (c) Microsoft Corporation.
 /**
  * Generates default {@link IContextualMenuProps} for buttons that
@@ -6995,9 +7045,7 @@ const MicrophoneButton = (props) => {
 const ParticipantsButton = (props) => {
     var _a, _b, _c, _d;
     const { callInvitationURL, styles, onMuteAll, onRenderIcon, onRenderParticipantList, participants, myUserId, excludeMe, onRenderParticipant, onRenderAvatar, onRemoveParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip } = props;
-    let disabled = props.disabled;
-    /* @conditional-compile-remove(rooms) */
-    disabled = disabled || !_usePermissions().participantList;
+    const disabled = props.disabled;
     const onRenderPeopleIcon = () => (React__default['default'].createElement(HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonParticipants" }));
     const ids = useIdentifiers();
     const onMuteAllCallback = React.useCallback(() => {
@@ -12663,7 +12711,7 @@ const CallCompositeIcon = (props) => (React__default['default'].createElement(re
  */
 const CallWithChatCompositeIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$d={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",peopleButtonLabel:"People",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",soundLabel:"Sound",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close Dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumeCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold"};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close Dialpad"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
+var call$d={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",peopleButtonLabel:"People",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",soundLabel:"Sound",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close Dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumeCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpad:"Show Dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close Dialpad",openDtmfDialpad:"Show Dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
 
 var call$c={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",defaultPlaceHolder:"Select an option",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",soundLabel:"Sound",startCallButtonLabel:"Start call",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby."};var chat$c={chatListHeader:"In this chat"};var callWithChat$c={peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",chatButtonLabel:"Chat",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipOpen:"Show chat",chatButtonTooltipClose:"Hide chat",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",chatPaneTitle:"Chat",chatButtonNewMessageNotificationLabel:"New Message",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",copyInviteLinkButtonLabel:"Copy invite link",dismissSidePaneButton:"Close",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back"};var en_GB = {call:call$c,chat:chat$c,callWithChat:callWithChat$c};
 
@@ -14828,12 +14876,6 @@ const icon$2 = () => React__default['default'].createElement(CallCompositeIcon,
 /** @beta */
 const People = (props) => {
     const { strings, onRenderOnIcon, onRenderOffIcon, onClick } = props;
-    /* @conditional-compile-remove(rooms) */
-    let disabled = props.disabled;
-    /* @conditional-compile-remove(rooms) */
-    const permissions = _usePermissions();
-    /* @conditional-compile-remove(rooms) */
-    disabled = disabled || !permissions.participantList;
     const theme = useTheme();
     const styles = React.useMemo(() => {
         var _a;
@@ -14843,9 +14885,7 @@ const People = (props) => {
             }
         }, (_a = props.styles) !== null && _a !== void 0 ? _a : {}, controlButtonBaseStyle);
     }, [props.styles, theme.palette.neutralLight]);
-    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { "data-ui-id": "call-composite-participants-button", strings: strings, labelKey: 'peopleButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon$2, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon$2, onClick: onClick, styles: styles, 
-        /* @conditional-compile-remove(rooms) */
-        disabled: disabled })));
+    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { "data-ui-id": "call-composite-participants-button", strings: strings, labelKey: 'peopleButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon$2, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon$2, onClick: onClick, styles: styles })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -14948,20 +14988,17 @@ const SendDtmfDialpad = (props) => {
     };
     const dialpadModalStyle = React.useMemo(() => themeddialpadModalStyle$1(theme), [theme]);
     const dialpadStyle = React.useMemo(() => themedDialpadStyle$1(isMobile, theme), [theme, isMobile]);
-    const dialpadStrings = {
-        placeholderText: ''
-    };
     if (isMobile) {
         return (React__default['default'].createElement(react.Stack, null, showDialpad && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles$1 },
             React__default['default'].createElement(_DrawerSurface, { onLightDismiss: onDismissTriggered },
                 React__default['default'].createElement(react.Stack, { style: { padding: '1rem' } },
-                    React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false }))))))));
+                    React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: strings }))))))));
     }
     return (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(react.Modal, { titleAriaId: strings.dialpadModalAriaLabel, isOpen: showDialpad, onDismiss: onDismissTriggered, isBlocking: true, styles: dialpadModalStyle },
         React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "end", verticalAlign: "center" },
             React__default['default'].createElement(react.IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: { color: theme.palette.black } })),
         React__default['default'].createElement(react.Stack, null,
-            React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: dialpadStrings }))))));
+            React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: strings }))))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -14988,11 +15025,12 @@ const CallControls = (props) => {
     /* @conditional-compile-remove(PSTN-calls) */
     const dialpadStrings = React.useMemo(() => ({
         dialpadModalAriaLabel: localeStrings.strings.call.dialpadModalAriaLabel,
-        dialpadCloseModalButtonAriaLabel: localeStrings.strings.call.dialpadCloseModalButtonAriaLabel
+        dialpadCloseModalButtonAriaLabel: localeStrings.strings.call.dialpadCloseModalButtonAriaLabel,
+        placeholderText: localeStrings.strings.call.dtmfDialpadPlaceHolderText
     }), [localeStrings]);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const holdButtonProps = usePropsFor$1(HoldButton);
-    /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */
+    /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
     const moreButtonContextualMenuItems = () => {
         const items = [];
         if (props.isMobile && props.onPeopleButtonClicked) {
@@ -15021,6 +15059,18 @@ const CallControls = (props) => {
                 styles: buttonFlyoutIncreasedSizeStyles
             }
         });
+        /* @conditional-compile-remove(PSTN-calls) */
+        items.push({
+            key: 'showDialpadKey',
+            text: localeStrings.strings.call.openDtmfDialpad,
+            onClick: () => {
+                setShowDialpad(true);
+            },
+            iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } },
+            itemProps: {
+                styles: buttonFlyoutIncreasedSizeStyles
+            }
+        });
         return items;
     };
     /* @conditional-compile-remove(PSTN-calls) */
@@ -16092,7 +16142,7 @@ const CallArrangement = (props) => {
     const isMobileWithActivePane = props.mobileView && activePane !== 'none';
     /* @conditional-compile-remove(one-to-n-calling) */
     const togglePeople = React.useCallback(() => {
-        if (activePane === 'people' || !(callStatus === 'Connected')) {
+        if (activePane === 'people' || !_isInCall(callStatus)) {
             setActivePane('none');
         }
         else {
@@ -16101,7 +16151,7 @@ const CallArrangement = (props) => {
     }, [activePane, setActivePane, callStatus]);
     /* @conditional-compile-remove(one-to-n-calling) */
     const selectPeople = React.useCallback(() => {
-        if (callStatus === 'Connected') {
+        if (_isInCall(callStatus)) {
             setActivePane('people');
         }
     }, [setActivePane, callStatus]);
@@ -16118,7 +16168,7 @@ const CallArrangement = (props) => {
     /* @conditional-compile-remove(one-to-n-calling) */
     const callPaneContent = () => {
         var _a;
-        if (adapter && callStatus === 'Connected') {
+        if (adapter && _isInCall(callStatus)) {
             return (React__default['default'].createElement(CallPane, { callAdapter: adapter, onClose: closePane, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems, onPeopleButtonClicked: showShowPeopleTabHeaderButton$1(props.callControlProps.options) ? selectPeople : undefined, modalLayerHostId: props.modalLayerHostId, activePane: activePane, mobileView: props.mobileView, inviteLink: props.callControlProps.callInvitationURL }));
         }
         return React__default['default'].createElement(React__default['default'].Fragment, null);
@@ -16166,61 +16216,6 @@ const localVideoCameraCycleButtonSelector = reselect.createSelector([getDeviceMa
     };
 });
 
-// Copyright (c) Microsoft Corporation.
-const videoBaseStyle = react.mergeStyles({
-    border: 0
-});
-/**
- * @private
- */
-react.mergeStyles(videoBaseStyle, {
-    width: '100%',
-    height: '100%'
-});
-/**
- * @private
- */
-react.mergeStyles(videoBaseStyle, {
-    width: '100%',
-    height: 0,
-    position: 'relative',
-    paddingTop: '56.25%' /* default to 16:9 Aspect Ratio for now*/
-});
-/**
- * @private
- */
-react.mergeStyles({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%'
-});
-/**
- * @private
- */
-react.mergeStyles({
-    height: '100%',
-    width: '15%'
-});
-/**
- * @private
- */
-react.mergeStyles({
-    height: '100%',
-    width: '85%',
-    position: 'relative'
-});
-/**
- * @private
- */
-const participantStateStyle = {
-    textAlign: 'center',
-    paddingTop: '0.5rem',
-    fontWeight: 400,
-    fontSize: '0.75rem'
-};
-
 // Copyright (c) Microsoft Corporation.
 const VideoGalleryStyles = {
     root: {
@@ -16246,26 +16241,11 @@ const MediaGallery = (props) => {
     const cameraSwitcherProps = React.useMemo(() => {
         return Object.assign(Object.assign({}, cameraSwitcherCallback), cameraSwitcherCameras);
     }, [cameraSwitcherCallback, cameraSwitcherCameras]);
-    /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-    const locale = useLocale().component;
-    /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-    const videoTileStrings = locale.strings.videoTile;
     const onRenderAvatar = React.useCallback((userId, options) => {
         return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
             React__default['default'].createElement(react.Stack, { styles: { root: { margin: 'auto', maxHeight: '100%' } } },
-                React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData })),
-                /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                (options === null || options === void 0 ? void 0 : options.participantState) === 'Ringing' && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStyle) }, videoTileStrings.participantStateConnecting)),
-                /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                (options === null || options === void 0 ? void 0 : options.participantState) === 'Connecting' && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStyle) }, videoTileStrings.participantStateRinging)),
-                /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                (options === null || options === void 0 ? void 0 : options.participantState) === 'Hold' && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStyle) }, videoTileStrings.participantStateHold)))));
-    }, [
-        props.onFetchAvatarPersonaData,
-        /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */ videoTileStrings.participantStateConnecting,
-        /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */ videoTileStrings.participantStateRinging,
-        /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */ videoTileStrings.participantStateHold
-    ]);
+                React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData })))));
+    }, [props.onFetchAvatarPersonaData]);
     useLocalVideoStartTrigger(!!props.isVideoStreamOn);
     const VideoGalleryMemoized = React.useMemo(() => {
         return (React__default['default'].createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions$2, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: "floatingLocalVideo", showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: onRenderAvatar })));
@@ -16506,7 +16486,7 @@ const CallPage = (props) => {
         /* @conditional-compile-remove(one-to-n-calling) */
         onFetchAvatarPersonaData: onFetchAvatarPersonaData, mobileView: mobileView, 
         /* @conditional-compile-remove(one-to-n-calling) */
-        modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => callStatus === 'Connected' ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (React__default['default'].createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData }))) : (React__default['default'].createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React__default['default'].createElement(React__default['default'].Fragment, null)), dataUiId: 'call-page' }));
+        modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (React__default['default'].createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData }))) : (React__default['default'].createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React__default['default'].createElement(React__default['default'].Fragment, null)), dataUiId: 'call-page' }));
 };
 /**
  * @private
@@ -18345,6 +18325,20 @@ const DesktopMoreButton = (props) => {
                 styles: buttonFlyoutIncreasedSizeStyles
             }
         });
+        /*@conditional-compile-remove(PSTN-calls) */
+        if (props.onClickShowDialpad) {
+            items.push({
+                key: 'showDialpadKey',
+                text: localeStrings.strings.callWithChat.openDtmfDialpad,
+                onClick: () => {
+                    props.onClickShowDialpad && props.onClickShowDialpad();
+                },
+                iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } },
+                itemProps: {
+                    styles: buttonFlyoutIncreasedSizeStyles
+                }
+            });
+        }
         return items;
     };
     return (React__default['default'].createElement(MoreButton, Object.assign({}, props, { "data-ui-id": "call-with-chat-composite-more-button", 
@@ -18373,7 +18367,7 @@ const inferCallWithChatControlOptions$1 = (mobileView, callWithChatControls) =>
  * @private
  */
 const CallWithChatControlBar = (props) => {
-    var _a, _b, _c;
+    var _a, _b;
     const theme = react.useTheme();
     const callWithChatStrings = useCallWithChatCompositeStrings();
     const options = inferCallWithChatControlOptions$1(props.mobileView, props.callControls);
@@ -18405,27 +18399,14 @@ const CallWithChatControlBar = (props) => {
     const endCallButtonStyles = React.useMemo(() => (!props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined), [props.mobileView, theme]);
     /* @conditional-compile-remove(control-bar-button-injection) */
     const customButtons = React.useMemo(() => generateCustomCallWithChatControlBarButton(onFetchCustomButtonPropsTrampoline(options !== false ? options : undefined), options !== false ? options === null || options === void 0 ? void 0 : options.displayType : undefined), [options]);
-    /* @conditional-compile-remove(PSTN-calls) */
-    const dialpadStrings = React.useMemo(() => ({
-        dialpadModalAriaLabel: callWithChatStrings.dialpadModalAriaLabel,
-        dialpadCloseModalButtonAriaLabel: callWithChatStrings.dialpadCloseModalButtonAriaLabel
-    }), [callWithChatStrings]);
-    /* @conditional-compile-remove(PSTN-calls) */
-    const [showDialpad, setShowDialpad] = React.useState(false);
     // when options is false then we want to hide the whole control bar.
     if (options === false) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     const chatButton = (React__default['default'].createElement(ChatButtonWithUnreadMessagesBadge, { chatAdapter: props.chatAdapter, checked: props.chatButtonChecked, showLabel: options.displayType !== 'compact', isChatPaneVisible: props.chatButtonChecked, onClick: props.onChatButtonClicked, disabled: props.disableButtonsForLobbyPage, strings: chatButtonStrings, styles: commonButtonStyles, newMessageLabel: callWithChatStrings.chatButtonNewMessageNotificationLabel }));
-    /* @conditional-compile-remove(PSTN-calls) */
-    const onDismissDialpad = () => {
-        setShowDialpad(false);
-    };
     return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(callControlsContainerStyles, controlBarContainerStyles) },
         React__default['default'].createElement(react.Stack.Item, { grow: true },
             React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
-                /* @conditional-compile-remove(PSTN-calls) */
-                React__default['default'].createElement(SendDtmfDialpad, { isMobile: (_a = props.mobileView) !== null && _a !== void 0 ? _a : false, strings: dialpadStrings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
                 React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
                     React__default['default'].createElement(react.Stack.Item, null,
                         React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: centerContainerStyles },
@@ -18434,8 +18415,8 @@ const CallWithChatControlBar = (props) => {
                             props.mobileView && isEnabled$1(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton,
                             isEnabled$1(options.screenShareButton) && (React__default['default'].createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles })), 
                         /* @conditional-compile-remove(control-bar-button-injection) */
-                        (_b = customButtons['primary']) === null || _b === void 0 ? void 0 :
-                            _b.props.children.slice(0, props.mobileView
+                        (_a = customButtons['primary']) === null || _a === void 0 ? void 0 :
+                            _a.props.children.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' })));
@@ -18443,12 +18424,12 @@ const CallWithChatControlBar = (props) => {
                             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) &&
                                 /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.holdButton) &&
-                                !props.mobileView && (React__default['default'].createElement(DesktopMoreButton, { disabled: props.disableButtonsForLobbyPage, styles: commonButtonStyles })),
+                                !props.mobileView && (React__default['default'].createElement(DesktopMoreButton, { disabled: props.disableButtonsForLobbyPage, styles: commonButtonStyles, onClickShowDialpad: props.onClickShowDialpad })),
                             React__default['default'].createElement(EndCall, { displayType: "compact", styles: endCallButtonStyles })))))),
         !props.mobileView && (React__default['default'].createElement(react.Stack, { horizontal: true, className: !props.mobileView ? react.mergeStyles(desktopButtonContainerStyle) : undefined }, 
         /* @conditional-compile-remove(control-bar-button-injection) */
-        (_c = customButtons['secondary']) === null || _c === void 0 ? void 0 :
-            _c.props.children.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((element) => {
+        (_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' })));
             }),
             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, strings: peopleButtonStrings, styles: commonButtonStyles })),
@@ -18862,6 +18843,17 @@ const MoreDrawer = (props) => {
             iconProps: { iconName: 'HoldCall', styles: { root: { lineHeight: 0 } } }
         });
     }
+    /*@conditional-compile-remove(PSTN-calls) */
+    if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.peopleButton) && props.onClickShowDialpad) {
+        drawerMenuItems.push({
+            itemKey: 'showDialpadKey',
+            text: localeStrings.strings.callWithChat.openDtmfDialpad,
+            onItemClick: () => {
+                props.onClickShowDialpad && props.onClickShowDialpad();
+            },
+            iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } }
+        });
+    }
     /* @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) */
@@ -19073,6 +19065,24 @@ const CallWithChatScreen = (props) => {
     const callCompositeContainerCSS = React.useMemo(() => {
         return { display: isMobileWithActivePane ? 'none' : 'flex' };
     }, [isMobileWithActivePane]);
+    /* @conditional-compile-remove(PSTN-calls) */
+    const [showDtmfDialpad, setShowDtmfDialpad] = React.useState(false);
+    /* @conditional-compile-remove(PSTN-calls) */
+    const onDismissDtmfDialpad = () => {
+        setShowDtmfDialpad(false);
+    };
+    /* @conditional-compile-remove(PSTN-calls) */
+    const onClickShowDialpad = () => {
+        setShowDtmfDialpad(true);
+    };
+    /* @conditional-compile-remove(PSTN-calls) */
+    const callWithChatStrings = useCallWithChatCompositeStrings();
+    /* @conditional-compile-remove(PSTN-calls) */
+    const dialpadStrings = React.useMemo(() => ({
+        dialpadModalAriaLabel: callWithChatStrings.dialpadModalAriaLabel,
+        dialpadCloseModalButtonAriaLabel: callWithChatStrings.dialpadCloseModalButtonAriaLabel,
+        placeholderText: callWithChatStrings.dtmfDialpadPlaceHolderText
+    }), [callWithChatStrings]);
     return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles) },
         React__default['default'].createElement(react.Stack, { verticalFill: true, grow: true, styles: compositeOuterContainerStyles, id: compositeParentDivId },
             React__default['default'].createElement(react.Stack, { horizontal: true, grow: true },
@@ -19085,11 +19095,20 @@ const CallWithChatScreen = (props) => {
                     fileSharing: props.fileSharing, rtl: props.rtl }))),
             showControlBar && !isMobileWithActivePane && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
                 React__default['default'].createElement(react.Stack.Item, { styles: controlBarContainerStyles$1 },
-                    React__default['default'].createElement(CallWithChatControlBar, { callAdapter: callAdapter, chatAdapter: chatProps.adapter, chatButtonChecked: activePane === 'chat', onChatButtonClicked: toggleChat, peopleButtonChecked: activePane === 'people', onPeopleButtonClicked: togglePeople, onMoreButtonClicked: onMoreButtonClicked, mobileView: mobileView, disableButtonsForLobbyPage: isInLobbyOrConnecting, callControls: props.callControls, containerHeight: containerHeight, containerWidth: containerWidth })))),
+                    React__default['default'].createElement(CallWithChatControlBar, { callAdapter: callAdapter, chatAdapter: chatProps.adapter, chatButtonChecked: activePane === 'chat', onChatButtonClicked: toggleChat, peopleButtonChecked: activePane === 'people', onPeopleButtonClicked: togglePeople, onMoreButtonClicked: onMoreButtonClicked, mobileView: mobileView, disableButtonsForLobbyPage: isInLobbyOrConnecting, callControls: props.callControls, containerHeight: containerHeight, containerWidth: containerWidth, 
+                        /* @conditional-compile-remove(PSTN-calls) */
+                        onClickShowDialpad: onClickShowDialpad })))),
             showControlBar && showDrawer && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
                 React__default['default'].createElement(CallAdapterProvider, { adapter: callAdapter },
                     React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles$1 },
-                        React__default['default'].createElement(PreparedMoreDrawer, { callControls: props.callControls, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked }))))),
+                        React__default['default'].createElement(PreparedMoreDrawer, { callControls: props.callControls, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, 
+                            /* @conditional-compile-remove(PSTN-calls) */
+                            onClickShowDialpad: onClickShowDialpad }))))),
+            /* @conditional-compile-remove(PSTN-calls) */
+            showControlBar && showDtmfDialpad && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
+                React__default['default'].createElement(CallAdapterProvider, { adapter: callAdapter },
+                    React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles$1 },
+                        React__default['default'].createElement(SendDtmfDialpad, { isMobile: mobileView, strings: dialpadStrings, showDialpad: showDtmfDialpad, onDismissDialpad: onDismissDtmfDialpad }))))),
             // This layer host is for ModalLocalAndRemotePIP in CallWithChatPane. This LayerHost cannot be inside the CallWithChatPane
             // because when the CallWithChatPane is hidden, ie. style property display is 'none', it takes up no space. This causes problems when dragging
             // the Modal because the draggable bounds thinks it has no space and will always return to its initial position after dragging.