@azure/communication-react 1.12.1-alpha-202401240013 → 1.12.1-alpha-202401250013

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

@@ -14,6 +14,9 @@ var textareaCaretTs = require('textarea-caret-ts');
 var reactComponents = require('@fluentui/react-components');
 var useDebounce = require('use-debounce');
 var reactFileTypeIcons = require('@fluentui/react-file-type-icons');
+require('roosterjs-editor-plugins');
+require('roosterjs-editor-core');
+require('roosterjs-react');
 var uuid = require('uuid');
 var reactChat = require('@fluentui-contrib/react-chat');
 var react$1 = require('@griffel/react');
@@ -170,7 +173,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.12.1-alpha-202401240013';
+var telemetryVersion = '1.12.1-alpha-202401250013';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -6029,11 +6032,17 @@ const sendButtonStyle = react.mergeStyles({
 /**
  * @private
  */
-const sendIconStyle = react.mergeStyles({
-    width: '1.25rem',
-    height: '1.25rem',
-    margin: 'auto'
-});
+const sendIconStyle = (props) => {
+    const { theme, hasText, 
+    /* @conditional-compile-remove(file-sharing) */ hasFile, hasErrorMessage, customSendIconStyle } = props;
+    const hasNoContent = !hasText && /* @conditional-compile-remove(file-sharing) */ !hasFile;
+    return react.mergeStyles({
+        width: '1.25rem',
+        height: '1.25rem',
+        margin: 'auto',
+        color: hasErrorMessage || hasNoContent ? theme.palette.neutralTertiary : theme.palette.themePrimary
+    }, customSendIconStyle);
+};
 /**
  * @private
  */
@@ -6066,7 +6075,7 @@ const borderAndBoxShadowStyle = (props) => {
     const borderColorActive = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.themePrimary;
     const borderThickness = disabled ? 0 : defaultSendBoxInactiveBorderThicknessREM;
     const borderActiveThickness = disabled ? 0 : defaultSendBoxActiveBorderThicknessREM;
-    return {
+    return react.mergeStyles({
         borderRadius: theme.effects.roundedCorner4,
         border: `${borderThickness}rem solid ${borderColor}`,
         // The border thickness of the sendbox wrapper changes on hover, to prevent the border thickness change causing the
@@ -6076,7 +6085,7 @@ const borderAndBoxShadowStyle = (props) => {
             border: `${borderActiveThickness}rem solid ${borderColorActive}`,
             margin: `${defaultSendBoxActiveBorderThicknessREM - borderActiveThickness}rem`
         }
-    };
+    });
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -6544,57 +6553,6 @@ const textFieldStyle = {
         borderRadius: '0.25rem'
     }
 };
-/**
- * @private
- */
-const inputButtonStyle = react.mergeStyles({
-    color: 'grey',
-    margin: 'auto',
-    width: '1.0625rem',
-    height: '1.0625rem',
-    backgroundColor: 'transparent',
-    '&:hover': {
-        backgroundColor: 'transparent'
-    }
-});
-/**
- * @private
- */
-const inputButtonTooltipStyle = react.mergeStyles({
-    // The toolTip host container show be a flex box, so that alignItems: 'center' works for inside buttons
-    display: 'flex'
-});
-/**
- * @private
- */
-const iconWrapperStyle$1 = react.mergeStyles({
-    pointerEvents: 'none'
-});
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const isDarkThemed = (theme) => {
-    const themeBlackBrightness = getPerceptualBrightnessOfHexColor(theme.palette.black);
-    const themeWhiteBrightness = getPerceptualBrightnessOfHexColor(theme.palette.white);
-    if (Number.isNaN(themeBlackBrightness) || Number.isNaN(themeWhiteBrightness)) {
-        return false;
-    }
-    return themeBlackBrightness > themeWhiteBrightness;
-};
-const getPerceptualBrightnessOfHexColor = (hexColor) => {
-    // return NaN if hexColor is not a hex code
-    if (!/^#[0-9A-Fa-f]{6}$/i.test(hexColor)) {
-        return NaN;
-    }
-    const r = parseInt(hexColor.substring(1, 3), 16);
-    const g = parseInt(hexColor.substring(3, 5), 16);
-    const b = parseInt(hexColor.substring(5, 7), 16);
-    // arithmetic mean μ of the red, green, and blue color coordinates. Source: https://en.wikipedia.org/wiki/Brightness
-    return (r + g + b) / 3;
-};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -8317,14 +8275,71 @@ const InputBoxComponent = (props) => {
     return (React.createElement(react.Stack, { className: mergedRootStyle },
         React.createElement("div", { className: mergedTextContainerStyle }, renderTextField())));
 };
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+const isDarkThemed = (theme) => {
+    const themeBlackBrightness = getPerceptualBrightnessOfHexColor(theme.palette.black);
+    const themeWhiteBrightness = getPerceptualBrightnessOfHexColor(theme.palette.white);
+    if (Number.isNaN(themeBlackBrightness) || Number.isNaN(themeWhiteBrightness)) {
+        return false;
+    }
+    return themeBlackBrightness > themeWhiteBrightness;
+};
+const getPerceptualBrightnessOfHexColor = (hexColor) => {
+    // return NaN if hexColor is not a hex code
+    if (!/^#[0-9A-Fa-f]{6}$/i.test(hexColor)) {
+        return NaN;
+    }
+    const r = parseInt(hexColor.substring(1, 3), 16);
+    const g = parseInt(hexColor.substring(3, 5), 16);
+    const b = parseInt(hexColor.substring(5, 7), 16);
+    // arithmetic mean μ of the red, green, and blue color coordinates. Source: https://en.wikipedia.org/wiki/Brightness
+    return (r + g + b) / 3;
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+const inputBoxButtonStyle = react.mergeStyles({
+    color: 'grey',
+    margin: 'auto',
+    width: '1.0625rem',
+    height: '1.0625rem',
+    backgroundColor: 'transparent',
+    '&:hover': {
+        backgroundColor: 'transparent'
+    }
+});
+/**
+ * @private
+ */
+const inputBoxButtonTooltipStyle = react.mergeStyles({
+    // The toolTip host container show be a flex box, so that alignItems: 'center' works for inside buttons
+    display: 'flex'
+});
+/**
+ * @private
+ */
+const iconWrapperStyle$1 = react.mergeStyles({
+    pointerEvents: 'none'
+});
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
 /**
  * @private
  */
 const InputBoxButton = (props) => {
     const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent } = props;
     const [isHover, setIsHover] = React.useState(false);
-    const mergedButtonStyle = react.mergeStyles(inputButtonStyle, className);
-    const theme = useTheme();
+    const mergedButtonStyle = react.mergeStyles(inputBoxButtonStyle, className);
+    const theme = react.useTheme();
     const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
     // Place callout with no gap between it and the button.
     const calloutProps = {
@@ -8332,7 +8347,7 @@ const InputBoxButton = (props) => {
         styles: calloutStyle,
         backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
     };
-    return (React.createElement(react.TooltipHost, { hostClassName: inputButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
+    return (React.createElement(react.TooltipHost, { hostClassName: inputBoxButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
         React.createElement(react.IconButton, { className: mergedButtonStyle, ariaLabel: ariaLabel, onClick: onClick, id: id, onMouseEnter: () => {
                 setIsHover(true);
             }, onMouseLeave: () => {
@@ -8568,8 +8583,26 @@ const _FileUploadCards = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-const EMPTY_MESSAGE_REGEX = /^\s*$/;
+/* @conditional-compile-remove(file-sharing) */
+/**
+ * @private
+ */
+const hasIncompleteFileUploads = (activeFileUploads) => {
+    return !!((activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.length) &&
+        !activeFileUploads.filter((fileUpload) => !fileUpload.error).every((fileUpload) => fileUpload.uploadComplete));
+};
+/* @conditional-compile-remove(file-sharing) */
+/**
+ * @private
+ */
+const hasCompletedFileUploads = (activeFileUploads) => {
+    return !!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.find((file) => !file.error));
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
 const MAXIMUM_LENGTH_OF_MESSAGE$1 = 8000;
+const EMPTY_MESSAGE_REGEX = /^\s*$/;
 /**
  * Component for typing and sending messages.
  *
@@ -8581,15 +8614,17 @@ const MAXIMUM_LENGTH_OF_MESSAGE$1 = 8000;
 const SendBox = (props) => {
     const { disabled, systemMessage, supportNewline, onSendMessage, onTyping, onRenderIcon, onRenderSystemMessage, styles, autoFocus, 
     /* @conditional-compile-remove(mention) */
-    mentionLookupOptions } = props;
+    mentionLookupOptions, 
+    /* @conditional-compile-remove(file-sharing) */
+    activeFileUploads } = props;
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.sendBox;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const ids = useIdentifiers();
-    const activeFileUploads = activeFileUploadsTrampoline(props);
     const [textValue, setTextValue] = React.useState('');
     const [textValueOverflow, setTextValueOverflow] = React.useState(false);
     const sendTextFieldRef = React.useRef(null);
+    /* @conditional-compile-remove(file-sharing) */
     const [fileUploadsPendingError, setFileUploadsPendingError] = React.useState(undefined);
     const sendMessageOnClick = () => {
         var _a;
@@ -8598,16 +8633,18 @@ const SendBox = (props) => {
             return;
         }
         // Don't send message until all files have been uploaded successfully
+        /* @conditional-compile-remove(file-sharing) */
         setFileUploadsPendingError(undefined);
-        if (hasIncompleteFileUploads(props)) {
-            /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(file-sharing) */
+        if (hasIncompleteFileUploads(activeFileUploads)) {
             setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });
             return;
         }
         const message = textValue;
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid file upload
-        if (!EMPTY_MESSAGE_REGEX.test(message) || hasFile(props)) {
+        if (!EMPTY_MESSAGE_REGEX.test(message) ||
+            /* @conditional-compile-remove(file-sharing) */ hasCompletedFileUploads(activeFileUploads)) {
             onSendMessage && onSendMessage(sanitizeText(message));
             setTextValue('');
         }
@@ -8629,18 +8666,28 @@ const SendBox = (props) => {
     const errorMessage = systemMessage !== null && systemMessage !== void 0 ? systemMessage : textTooLongMessage;
     const mergedSendButtonStyle = React.useMemo(() => react.mergeStyles(sendButtonStyle, styles === null || styles === void 0 ? void 0 : styles.sendMessageIconContainer), [styles === null || styles === void 0 ? void 0 : styles.sendMessageIconContainer]);
     const mergedStyles = React.useMemo(() => react.concatStyleSets(styles), [styles]);
-    const hasText = !!textValue;
-    const hasTextOrFile = hasText || hasFile(props);
-    const mergedSendIconStyle = React.useMemo(() => react.mergeStyles(sendIconStyle, {
-        color: !!errorMessage || !hasTextOrFile ? theme.palette.neutralTertiary : theme.palette.themePrimary
-    }, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon), [errorMessage, hasTextOrFile, theme, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon]);
+    const mergedSendIconStyle = React.useMemo(() => sendIconStyle({
+        theme,
+        hasText: !!textValue,
+        /* @conditional-compile-remove(file-sharing) */ hasFile: hasCompletedFileUploads(activeFileUploads),
+        hasErrorMessage: !!errorMessage,
+        customSendIconStyle: styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon
+    }), [
+        theme,
+        textValue,
+        /* @conditional-compile-remove(file-sharing) */ activeFileUploads,
+        errorMessage,
+        styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon
+    ]);
     const onRenderSendIcon = React.useCallback((isHover) => onRenderIcon ? (onRenderIcon(isHover)) : (React.createElement(react.Icon, { iconName: isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle })), [mergedSendIconStyle, onRenderIcon, textValue]);
     // Ensure that errors are cleared when there are no files in sendBox
+    /* @conditional-compile-remove(file-sharing) */
     React.useEffect(() => {
         if (!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((upload) => !upload.error).length)) {
             setFileUploadsPendingError(undefined);
         }
     }, [activeFileUploads]);
+    /* @conditional-compile-remove(file-sharing) */
     const sendBoxErrorsProps = React.useMemo(() => {
         var _a;
         return {
@@ -8662,13 +8709,13 @@ const SendBox = (props) => {
                 } })));
     }, [activeFileUploads, props, localeStrings]);
     return (React.createElement(react.Stack, { className: react.mergeStyles(sendBoxWrapperStyles, { overflow: 'visible' } // This is needed for the mention popup to be visible
-        ) },
+        ) }, /* @conditional-compile-remove(file-sharing) */
         React.createElement(SendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
-        React.createElement(react.Stack, { className: react.mergeStyles(borderAndBoxShadowStyle({
+        React.createElement(react.Stack, { className: borderAndBoxShadowStyle({
                 theme,
                 hasErrorMessage: !!errorMessage,
                 disabled: !!disabled
-            })) },
+            }) },
             React.createElement(InputBoxComponent, { autoFocus: autoFocus, "data-ui-id": ids.sendboxTextField, disabled: disabled, errorMessage: onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage, textFieldRef: sendTextFieldRef, id: "sendbox", placeholderText: strings.placeholderText, textValue: textValue, onChange: (_, newValue) => setText(newValue), onKeyDown: (ev) => {
                     const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);
                     if (!keyWasSendingMessage) {
@@ -8691,15 +8738,6 @@ const SendBox = (props) => {
 /**
  * @private
  */
-const hasIncompleteFileUploads = (props) => {
-    const activeFileUploads = activeFileUploadsTrampoline(props);
-    return !!((activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.length) &&
-        !activeFileUploads.filter((fileUpload) => !fileUpload.error).every((fileUpload) => fileUpload.uploadComplete));
-};
-const hasFile = (props) => {
-    const activeFileUploads = activeFileUploadsTrampoline(props);
-    return !!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.find((file) => !file.error));
-};
 const sanitizeText = (message) => {
     if (EMPTY_MESSAGE_REGEX.test(message)) {
         return '';
@@ -8708,10 +8746,6 @@ const sanitizeText = (message) => {
         return message;
     }
 };
-const activeFileUploadsTrampoline = (props) => {
-    /* @conditional-compile-remove(file-sharing) */
-    return props.activeFileUploads;
-};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -8959,6 +8993,21 @@ const ImageGallery = (props) => {
         renderBodyWithLightDismiss()));
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+react.mergeStyles({
+    border: 'none',
+    overflow: 'auto',
+    padding: '10px',
+    outline: 'none',
+    bottom: '0',
+    minHeight: '2.25rem',
+    maxHeight: '8.25rem'
+});
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /** @private */
@@ -18403,7 +18452,7 @@ const DialpadButton = (props) => {
 const DialpadContainer = (props) => {
     var _a, _b;
     const theme = react.useTheme();
-    const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true, isMobile = false, disableDtmfPlayback, enableInputEditing } = props;
+    const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true, isMobile = false, disableDtmfPlayback, dialpadMode = 'dialer' } = props;
     const dtmfToneAudioContext = React.useRef(new AudioContext());
     const [plainTextValue, setPlainTextValue] = React.useState(textFieldValue !== null && textFieldValue !== void 0 ? textFieldValue : '');
     const plainTextValuePreviousRenderValue = React.useRef(plainTextValue);
@@ -18450,20 +18499,16 @@ const DialpadContainer = (props) => {
         setText(modifiedInput);
     };
     return (React.createElement(react.Stack, { className: react.mergeStyles(containerStyles$3(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), "data-test-id": "dialpadContainer", "data-ui-id": "dialpadContainer", horizontalAlign: 'center' },
-        React.createElement(react.TextField, { styles: react.concatStyleSets(textFieldStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.textField), value: textFieldValue ? textFieldValue : enableInputEditing ? formatPhoneNumber(plainTextValue) : plainTextValue, 
+        dialpadMode === 'dialer' && (React.createElement(react.TextField, { styles: react.concatStyleSets(textFieldStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.textField), value: textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue), 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             onChange: (e) => {
-                if (enableInputEditing) {
-                    setText(e.target.value);
-                }
+                setText(e.target.value);
             }, onClick: (e) => {
-                if (!enableInputEditing) {
-                    e.preventDefault();
-                }
+                e.preventDefault();
             }, placeholder: props.strings.placeholderText, "data-test-id": "dialpad-input", onRenderSuffix: () => {
                 var _a;
                 return (React.createElement(React.Fragment, null, showDeleteButton && plainTextValue.length !== 0 && (React.createElement(react.IconButton, { ariaLabel: props.strings.deleteButtonAriaLabel, onClick: deleteNumbers, styles: react.concatStyleSets(iconButtonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.deleteIcon), iconProps: { iconName: 'DialpadBackspace' } }))));
-            } }),
+            } })),
         React.createElement(react.FocusZone, null, dialPadButtonsDefault.map((rows, rowIndex) => {
             return (React.createElement(react.Stack, { horizontal: true, key: `row_${rowIndex}`, horizontalAlign: "stretch", tokens: { childrenGap: '1rem' } }, rows.map((button, columnIndex) => (React.createElement(DialpadButton, { key: `button_${columnIndex}`, 
                 /* row index = 0
@@ -25714,6 +25759,10 @@ const getLatestCapabilitiesChangedInfo = (state) => {
     var _a, _b;
     return (_b = (_a = state.call) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.latestCapabilitiesChangeInfo;
 };
+/**
+ * @private
+ */
+const getTargetCallees = (state) => state.targetCallees;
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -26472,6 +26521,151 @@ const useCallWithChatCompositeStrings = () => {
     return locale.strings.callWithChat;
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+const mediaGallerySelector = reselect__namespace.createSelector([getLocalVideoStreams], (localVideoStreams) => {
+    var _a, _b;
+    return {
+        isVideoStreamOn: !!((_b = (_a = localVideoStreams === null || localVideoStreams === void 0 ? void 0 : localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.target)
+    };
+});
+/**
+ * Custom selector for this hook to retrieve all the participants that are currently
+ * connected to the call.
+ */
+const getRemoteParticipantsConnectedSelector = reselect__namespace.createSelector([getRemoteParticipants], (remoteParticipants) => {
+    const participants = Object.values(remoteParticipants !== null && remoteParticipants !== void 0 ? remoteParticipants : {});
+    return participants.filter((p) => p.state === 'Connected');
+});
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * sets the announcement string whenever a Participant comes or goes from a call to be
+ * used by the system narrator.
+ *
+ * @returns string to be used by the narrator and Announcer component
+ *
+ * @internal
+ */
+const useParticipantChangedAnnouncement = () => {
+    const locale = useLocale().strings.call;
+    const strings = React.useMemo(() => {
+        return {
+            participantJoinedNoticeString: locale.participantJoinedNoticeString,
+            twoParticipantJoinedNoticeString: locale.twoParticipantJoinedNoticeString,
+            threeParticipantJoinedNoticeString: locale.threeParticipantJoinedNoticeString,
+            participantLeftNoticeString: locale.participantLeftNoticeString,
+            twoParticipantLeftNoticeString: locale.twoParticipantLeftNoticeString,
+            threeParticipantLeftNoticeString: locale.threeParticipantLeftNoticeString,
+            unnamedParticipantString: locale.unnamedParticipantString,
+            manyParticipantsJoined: locale.manyParticipantsJoined,
+            manyParticipantsLeft: locale.manyParticipantsLeft,
+            manyUnnamedParticipantsJoined: locale.manyUnnamedParticipantsJoined,
+            manyUnnamedParticipantsLeft: locale.manyUnnamedParticipantsLeft
+        };
+    }, [locale]);
+    const [announcerString, setAnnouncerString] = React.useState('');
+    const currentParticipants = useSelector$1(getRemoteParticipantsConnectedSelector);
+    /**
+     * We want to use a useRef here since we want to not fire this hook based on the previous participants
+     * this allows this value to be used in the hook without being in the dependency array.
+     *
+     * Note: By definition if this hook is used in another component it is not pure anymore.
+     */
+    const previousParticipants = React.useRef(currentParticipants);
+    const resetAnnoucement = (string) => {
+        setAnnouncerString(string);
+    };
+    React.useMemo(() => {
+        const currentIds = currentParticipants.map((p) => toFlatCommunicationIdentifier(p.identifier));
+        const previousIds = previousParticipants.current.map((p) => toFlatCommunicationIdentifier(p.identifier));
+        const whoJoined = currentParticipants.filter((p) => !previousIds.includes(toFlatCommunicationIdentifier(p.identifier)));
+        const whoLeft = previousParticipants.current.filter((p) => !currentIds.includes(toFlatCommunicationIdentifier(p.identifier)));
+        if (whoJoined.length > 0) {
+            resetAnnoucement(createAnnouncementString('joined', whoJoined, strings));
+        }
+        if (whoLeft.length > 0) {
+            resetAnnoucement(createAnnouncementString('left', whoLeft, strings));
+        }
+        // Update cached value at the end.
+        previousParticipants.current = currentParticipants;
+    }, [currentParticipants, strings]);
+    return announcerString;
+};
+/**
+ * Generates the announcement string for when a participant joins or leaves a call.
+ */
+const createAnnouncementString = (direction, participants, strings) => {
+    var _a, _b, _c;
+    /**
+     * If there are no participants return empty string.
+     */
+    if (participants.length === 0) {
+        return '';
+    }
+    /**
+     * Filter participants into two arrays to put all the unnamed participants at the back of the
+     * names being announced.
+     */
+    const unnamedParticipants = participants.filter((p) => !p.displayName);
+    const namedParicipants = participants.filter((p) => p.displayName);
+    const sortedParticipants = namedParicipants.concat(unnamedParticipants);
+    /**
+     * if there are only unnamed participants present in the array announce a special unnamed participants
+     * only string.
+     */
+    if (sortedParticipants.filter((p) => p.displayName).length === 0 && sortedParticipants.length > 1) {
+        return _formatString(direction === 'joined' ? strings.manyUnnamedParticipantsJoined : strings.manyUnnamedParticipantsLeft, {
+            numOfParticipants: (sortedParticipants.length - 1).toString()
+        });
+    }
+    const participantNames = sortedParticipants.map((p) => { var _a; return (_a = p.displayName) !== null && _a !== void 0 ? _a : strings.unnamedParticipantString; });
+    switch (sortedParticipants.length) {
+        case 1:
+            return _formatString(direction === 'joined' ? strings.participantJoinedNoticeString : strings.participantLeftNoticeString, { displayName: participantNames[0] });
+        case 2:
+            return _formatString(direction === 'joined' ? strings.twoParticipantJoinedNoticeString : strings.twoParticipantLeftNoticeString, {
+                displayName1: participantNames[0],
+                displayName2: participantNames[1]
+            });
+        case 3:
+            return _formatString(direction === 'joined' ? strings.threeParticipantJoinedNoticeString : strings.threeParticipantLeftNoticeString, {
+                displayName1: participantNames[0],
+                displayName2: participantNames[1],
+                displayName3: participantNames[2]
+            });
+    }
+    /**
+     * If we have more than 3 participants joining we need to do something more to announce them
+     * appropriately.
+     *
+     * We don't want to announce every name when more than 3 participants join at once so
+     * we parse out the first 3 names we have and announce those with the number of others.
+     */
+    const numberOfExtraParticipants = sortedParticipants.length - 3;
+    return _formatString(direction === 'joined' ? strings.manyParticipantsJoined : strings.manyParticipantsLeft, {
+        displayName1: (_a = sortedParticipants[0].displayName) !== null && _a !== void 0 ? _a : strings.unnamedParticipantString,
+        displayName2: (_b = sortedParticipants[1].displayName) !== null && _b !== void 0 ? _b : strings.unnamedParticipantString,
+        displayName3: (_c = sortedParticipants[2].displayName) !== null && _c !== void 0 ? _c : strings.unnamedParticipantString,
+        numOfParticipants: numberOfExtraParticipants.toString()
+    });
+};
+/* @conditional-compile-remove(dtmf-dialer) */
+/**
+ * determines if the media gallery should be replaced by the dtmf dialer
+ * @param callees Target callees to determine if the dtmf dialer should be shown
+ * @returns whether the dialer should be the gallery content or not
+ */
+const showDtmfDialer = (callees) => {
+    return !!((callees === null || callees === void 0 ? void 0 : callees.filter((callee) => {
+        return communicationCommon.isPhoneNumberIdentifier(callee) || communicationCommon.isMicrosoftTeamsAppIdentifier(callee);
+    })) && callees.length > 0);
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 var __awaiter$f = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -26510,6 +26704,10 @@ const DesktopMoreButton = (props) => {
     /* @conditional-compile-remove(gallery-layouts) */
     const [previousLayout, setPreviousLayout] = React.useState((_a = props.userSetGalleryLayout) !== null && _a !== void 0 ? _a : 'floatingLocalVideo');
     /* @conditional-compile-remove(dtmf-dialer) */
+    const callees = useSelector$1(getTargetCallees);
+    /* @conditional-compile-remove(dtmf-dialer) */
+    const allowDtmfDialer = showDtmfDialer(callees);
+    /* @conditional-compile-remove(dtmf-dialer) */
     const [dtmfDialerChecked, setDtmfDialerChecked] = React.useState((_b = props.dtmfDialerPresent) !== null && _b !== void 0 ? _b : false);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
     const moreButtonStrings = React.useMemo(() => ({
@@ -26624,24 +26822,9 @@ const DesktopMoreButton = (props) => {
     /**
      * Only render the dtmf dialer if the dialpad for PSTN calls is not present
      */
-    if (props.onSetDialpadPage && !props.onClickShowDialpad) {
+    if (props.onSetDialpadPage && allowDtmfDialer) {
         moreButtonContextualMenuItems.push(dtmfDialerScreenOption);
     }
-    /*@conditional-compile-remove(PSTN-calls) */
-    if (props.onClickShowDialpad) {
-        moreButtonContextualMenuItems.push({
-            key: 'showDialpadKey',
-            text: localeStrings.strings.callWithChat.openDtmfDialpadLabel,
-            onClick: () => {
-                props.onClickShowDialpad && props.onClickShowDialpad();
-            },
-            iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } },
-            itemProps: {
-                styles: buttonFlyoutIncreasedSizeStyles
-            },
-            disabled: props.disableButtonsForHoldScreen
-        });
-    }
     /* @conditional-compile-remove(gallery-layouts) */
     if (props.onUserSetOverflowGalleryPositionChange) {
         const galleryOptions = {
@@ -29385,140 +29568,6 @@ const localVideoCameraCycleButtonSelector = reselect.createSelector([getDeviceMa
     };
 });
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const mediaGallerySelector = reselect__namespace.createSelector([getLocalVideoStreams], (localVideoStreams) => {
-    var _a, _b;
-    return {
-        isVideoStreamOn: !!((_b = (_a = localVideoStreams === null || localVideoStreams === void 0 ? void 0 : localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.target)
-    };
-});
-/**
- * Custom selector for this hook to retrieve all the participants that are currently
- * connected to the call.
- */
-const getRemoteParticipantsConnectedSelector = reselect__namespace.createSelector([getRemoteParticipants], (remoteParticipants) => {
-    const participants = Object.values(remoteParticipants !== null && remoteParticipants !== void 0 ? remoteParticipants : {});
-    return participants.filter((p) => p.state === 'Connected');
-});
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * sets the announcement string whenever a Participant comes or goes from a call to be
- * used by the system narrator.
- *
- * @returns string to be used by the narrator and Announcer component
- *
- * @internal
- */
-const useParticipantChangedAnnouncement = () => {
-    const locale = useLocale().strings.call;
-    const strings = React.useMemo(() => {
-        return {
-            participantJoinedNoticeString: locale.participantJoinedNoticeString,
-            twoParticipantJoinedNoticeString: locale.twoParticipantJoinedNoticeString,
-            threeParticipantJoinedNoticeString: locale.threeParticipantJoinedNoticeString,
-            participantLeftNoticeString: locale.participantLeftNoticeString,
-            twoParticipantLeftNoticeString: locale.twoParticipantLeftNoticeString,
-            threeParticipantLeftNoticeString: locale.threeParticipantLeftNoticeString,
-            unnamedParticipantString: locale.unnamedParticipantString,
-            manyParticipantsJoined: locale.manyParticipantsJoined,
-            manyParticipantsLeft: locale.manyParticipantsLeft,
-            manyUnnamedParticipantsJoined: locale.manyUnnamedParticipantsJoined,
-            manyUnnamedParticipantsLeft: locale.manyUnnamedParticipantsLeft
-        };
-    }, [locale]);
-    const [announcerString, setAnnouncerString] = React.useState('');
-    const currentParticipants = useSelector$1(getRemoteParticipantsConnectedSelector);
-    /**
-     * We want to use a useRef here since we want to not fire this hook based on the previous participants
-     * this allows this value to be used in the hook without being in the dependency array.
-     *
-     * Note: By definition if this hook is used in another component it is not pure anymore.
-     */
-    const previousParticipants = React.useRef(currentParticipants);
-    const resetAnnoucement = (string) => {
-        setAnnouncerString(string);
-    };
-    React.useMemo(() => {
-        const currentIds = currentParticipants.map((p) => toFlatCommunicationIdentifier(p.identifier));
-        const previousIds = previousParticipants.current.map((p) => toFlatCommunicationIdentifier(p.identifier));
-        const whoJoined = currentParticipants.filter((p) => !previousIds.includes(toFlatCommunicationIdentifier(p.identifier)));
-        const whoLeft = previousParticipants.current.filter((p) => !currentIds.includes(toFlatCommunicationIdentifier(p.identifier)));
-        if (whoJoined.length > 0) {
-            resetAnnoucement(createAnnouncementString('joined', whoJoined, strings));
-        }
-        if (whoLeft.length > 0) {
-            resetAnnoucement(createAnnouncementString('left', whoLeft, strings));
-        }
-        // Update cached value at the end.
-        previousParticipants.current = currentParticipants;
-    }, [currentParticipants, strings]);
-    return announcerString;
-};
-/**
- * Generates the announcement string for when a participant joins or leaves a call.
- */
-const createAnnouncementString = (direction, participants, strings) => {
-    var _a, _b, _c;
-    /**
-     * If there are no participants return empty string.
-     */
-    if (participants.length === 0) {
-        return '';
-    }
-    /**
-     * Filter participants into two arrays to put all the unnamed participants at the back of the
-     * names being announced.
-     */
-    const unnamedParticipants = participants.filter((p) => !p.displayName);
-    const namedParicipants = participants.filter((p) => p.displayName);
-    const sortedParticipants = namedParicipants.concat(unnamedParticipants);
-    /**
-     * if there are only unnamed participants present in the array announce a special unnamed participants
-     * only string.
-     */
-    if (sortedParticipants.filter((p) => p.displayName).length === 0 && sortedParticipants.length > 1) {
-        return _formatString(direction === 'joined' ? strings.manyUnnamedParticipantsJoined : strings.manyUnnamedParticipantsLeft, {
-            numOfParticipants: (sortedParticipants.length - 1).toString()
-        });
-    }
-    const participantNames = sortedParticipants.map((p) => { var _a; return (_a = p.displayName) !== null && _a !== void 0 ? _a : strings.unnamedParticipantString; });
-    switch (sortedParticipants.length) {
-        case 1:
-            return _formatString(direction === 'joined' ? strings.participantJoinedNoticeString : strings.participantLeftNoticeString, { displayName: participantNames[0] });
-        case 2:
-            return _formatString(direction === 'joined' ? strings.twoParticipantJoinedNoticeString : strings.twoParticipantLeftNoticeString, {
-                displayName1: participantNames[0],
-                displayName2: participantNames[1]
-            });
-        case 3:
-            return _formatString(direction === 'joined' ? strings.threeParticipantJoinedNoticeString : strings.threeParticipantLeftNoticeString, {
-                displayName1: participantNames[0],
-                displayName2: participantNames[1],
-                displayName3: participantNames[2]
-            });
-    }
-    /**
-     * If we have more than 3 participants joining we need to do something more to announce them
-     * appropriately.
-     *
-     * We don't want to announce every name when more than 3 participants join at once so
-     * we parse out the first 3 names we have and announce those with the number of others.
-     */
-    const numberOfExtraParticipants = sortedParticipants.length - 3;
-    return _formatString(direction === 'joined' ? strings.manyParticipantsJoined : strings.manyParticipantsLeft, {
-        displayName1: (_a = sortedParticipants[0].displayName) !== null && _a !== void 0 ? _a : strings.unnamedParticipantString,
-        displayName2: (_b = sortedParticipants[1].displayName) !== null && _b !== void 0 ? _b : strings.unnamedParticipantString,
-        displayName3: (_c = sortedParticipants[2].displayName) !== null && _c !== void 0 ? _c : strings.unnamedParticipantString,
-        numOfParticipants: numberOfExtraParticipants.toString()
-    });
-};
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 const VideoGalleryStyles = {
@@ -29878,16 +29927,22 @@ const DtmfDialpadPageContent = (props) => {
     const remoteParticipants = (_b = adapterState.call) === null || _b === void 0 ? void 0 : _b.remoteParticipants;
     let calleeName;
     if (remoteParticipants) {
-        calleeName = Object.values(remoteParticipants).find((p) => p.identifier === calleeId);
+        const remoteParticipantValues = Object.values(remoteParticipants);
+        if (calleeId && communicationCommon.isPhoneNumberIdentifier(calleeId)) {
+            calleeName = calleeId.phoneNumber;
+        }
+        else {
+            calleeName = remoteParticipantValues.find((p) => p.identifier === calleeId);
+        }
     }
     return (React.createElement(react.Stack, { style: { height: '100%', width: '100%', background: theme.palette.white } },
-        React.createElement(react.Stack, { style: { margin: 'auto' } },
+        React.createElement(react.Stack, { verticalAlign: 'center', style: { margin: 'auto' } },
             React.createElement(DtmfDialerContentTimer, null),
-            React.createElement(react.Text, null, calleeName !== 'Unnamed participant' ? calleeName : ''),
+            React.createElement(react.Text, { style: { margin: 'auto' } }, calleeName !== 'Unnamed participant' ? calleeName : ''),
             React.createElement(Dialpad, { onSendDtmfTone: (tone) => __awaiter$b(void 0, void 0, void 0, function* () {
                     /* @conditional-compile-remove(dtmf-dialer) */
                     yield adapter.sendDtmfTone(tone);
-                }), enableInputEditing: false }))));
+                }), dialpadMode: 'dtmf' }))));
 };
 const DtmfDialerContentTimer = () => {
     const [time, setTime] = React.useState(0);
@@ -29936,7 +29991,26 @@ const CallPage = (props) => {
     const mutedNotificationProps = useSelector$1(mutedNotificationSelector);
     const networkReconnectTileProps = useSelector$1(networkReconnectTileSelector);
     /* @conditional-compile-remove(dtmf-dialer) */
-    const [dtmfDialerPresent, setDtmfDialerPresent] = React.useState(false);
+    const remoteParticipantsConnected = useSelector$1(getRemoteParticipantsConnectedSelector);
+    /* @conditional-compile-remove(dtmf-dialer) */
+    const callees = useSelector$1(getTargetCallees);
+    /* @conditional-compile-remove(dtmf-dialer) */
+    const renderDtmfDialerFromStart = showDtmfDialer(callees);
+    /* @conditional-compile-remove(dtmf-dialer) */
+    const [dtmfDialerPresent, setDtmfDialerPresent] = React.useState(renderDtmfDialerFromStart);
+    /* @conditional-compile-remove(dtmf-dialer) */
+    const dialerShouldAutoDismiss = React.useRef(renderDtmfDialerFromStart);
+    /* @conditional-compile-remove(dtmf-dialer) */
+    /**
+     * This useEffect is about clearing the dtmf dialer should there be a new participant that joins the call.
+     * This will only happen the first time should the dialer be present when the call starts.
+     */
+    React.useEffect(() => {
+        if (remoteParticipantsConnected.length > 1 && dtmfDialerPresent && dialerShouldAutoDismiss.current) {
+            setDtmfDialerPresent(false);
+            dialerShouldAutoDismiss.current = false;
+        }
+    }, [dtmfDialerPresent, remoteParticipantsConnected, setDtmfDialerPresent]);
     const strings = useLocale().strings.call;
     // Reduce the controls shown when mobile view is enabled.
     const callControlOptions = mobileView ? reduceCallControlsForMobile(options === null || options === void 0 ? void 0 : options.callControls) : options === null || options === void 0 ? void 0 : options.callControls;
@@ -29977,7 +30051,9 @@ const CallPage = (props) => {
         /* @conditional-compile-remove(capabilities) */
         capabilitiesChangedNotificationBarProps: props.capabilitiesChangedNotificationBarProps, 
         /* @conditional-compile-remove(dtmf-dialer) */
-        onSetDialpadPage: () => setDtmfDialerPresent(!dtmfDialerPresent) }));
+        onSetDialpadPage: () => setDtmfDialerPresent(!dtmfDialerPresent), 
+        /* @conditional-compile-remove(dtmf-dialer) */
+        dtmfDialerPresent: dtmfDialerPresent }));
 };
 /**
  * @private