@azure/communication-react 1.3.2-alpha-202208110020.0 → 1.3.3-alpha-202208120013.0

package/CHANGELOG.md

@@ -1,12 +1,17 @@
 # Change Log - @azure/communication-react
 
-This log was last generated on Wed, 29 Jun 2022 17:31:05 GMT and should not be manually modified.
+This log was last generated on Wed, 10 Aug 2022 18:29:31 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [1.3.1](https://github.com/azure/communication-ui-library/tree/1.3.1)
+
+This is a patch release for issue [#2186](https://github.com/Azure/communication-ui-library/issues/2186):
+- Fix infinite spinner bug during screenshare. ([PR #2191](https://github.com/Azure/communication-ui-library/pull/2191) by jiangnanhello@live.com).
+
 ## [1.3.1-beta.1](https://github.com/azure/communication-ui-library/tree/@azure/communication-react_v1.3.1-beta.1)
 
-Wed, 29 Jun 2022 17:31:05 GMT 
+Wed, 29 Jun 2022 17:31:05 GMT
 [Compare changes](https://github.com/azure/communication-ui-library/compare/1.3.0...1.3.1-beta.1)
 
 ### Features
@@ -20,7 +25,7 @@ Wed, 29 Jun 2022 17:31:05 GMT
   - Update microphone and camera button to be disabled when there are no cameras or microphones present ([PR #1993](https://github.com/azure/communication-ui-library/pull/1993) by 2684369+JamesBurnside@users.noreply.github.com)
   - Add autofocus to rejoin call button on call end page ([PR #2008](https://github.com/azure/communication-ui-library/pull/2008) by 82062616+prprabhu-ms@users.noreply.github.com)
   - Add new prop onChange to dialpad to grab textfield values and modified onClickDialpadButton type to (buttonValue: string, buttonIndex: number) => void so we can grab info regarding which button is clicked ([PR #1989](https://github.com/azure/communication-ui-library/pull/1989) by carolinecao@microsoft.com)
-  
+
 
 ### Bug Fixes
 
@@ -57,7 +62,7 @@ A lot of bug fixes in this stable release are related to accessibility. Fixes in
 
 Also included are updates to the video streams with new features like a loading spinner in the remote stream when the remote participants connection is loading. Available in the components now and coming soon to the composites.
 
-Mon, 13 Jun 2022 18:29:25 GMT 
+Mon, 13 Jun 2022 18:29:25 GMT
 [Compare changes](https://github.com/azure/communication-ui-library/compare/@azure/communication-react_v1.2.2-beta.1...@azure/communication-react_v1.3.0)
 
 ### Minor changes
@@ -115,7 +120,7 @@ Mon, 13 Jun 2022 18:29:25 GMT
 
 ## [1.2.2-beta.1](https://github.com/azure/communication-ui-library/tree/@azure/communication-react_v1.2.2-beta.1)
 
-Tue, 19 Apr 2022 20:46:13 GMT 
+Tue, 19 Apr 2022 20:46:13 GMT
 [Compare changes](https://github.com/azure/communication-ui-library/compare/1.2.0...1.2.2-beta.1)
 
 ### Features

package/dist/communication-react.d.ts

@@ -481,6 +481,12 @@ export declare interface CallAdapterCallManagement {
      * @beta
      */
     addParticipant(participant: CommunicationIdentifier, options?: AddPhoneNumberOptions): Promise<void>;
+    /**
+     * send dtmf tone to another participant in a 1:1 PSTN call
+     *
+     * @beta
+     */
+    sendDtmfTone(dtmfTone: DtmfTone_2): Promise<void>;
 }
 
 /**
@@ -1392,7 +1398,7 @@ export declare type CallingHandlers = {
     onRemoveParticipant: (userId: string) => Promise<void>;
     onDisposeRemoteStreamView: (userId: string) => Promise<void>;
     onDisposeLocalStreamView: () => Promise<void>;
-    onSendDtmfTone?: (dtmfTone: DtmfTone_2) => Promise<void>;
+    onSendDtmfTone: (dtmfTone: DtmfTone_2) => Promise<void>;
 };
 
 /**
@@ -1822,6 +1828,12 @@ export declare interface CallWithChatAdapterManagement {
      * @beta
      */
     addParticipant: (participant: CommunicationIdentifier, options?: AddPhoneNumberOptions) => Promise<void>;
+    /**
+     * send dtmf tone to another participant in the call in 1:1 calls
+     *
+     * @beta
+     */
+    sendDtmfTone: (dtmfTone: DtmfTone_2) => Promise<void>;
 }
 
 /**
@@ -4159,6 +4171,8 @@ export declare interface DialpadProps {
     onDisplayDialpadInput?: (input: string) => string;
     /**  on change function for text field */
     onChange?: (input: string) => void;
+    /**  boolean input to determine when to show/hide delete button, default true */
+    showDeleteButton?: boolean;
     styles?: DialpadStyles;
 }
 
@@ -4169,7 +4183,7 @@ export declare interface DialpadProps {
  */
 export declare interface DialpadStrings {
     placeholderText: string;
-    deleteButtonAriaLabel: string;
+    deleteButtonAriaLabel?: string;
 }
 
 /**

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

@@ -192,7 +192,7 @@ const fromFlatCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.3.2-alpha-202208110020.0';
+var telemetryVersion = '1.3.3-alpha-202208120013.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -759,7 +759,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             yield (call === null || call === void 0 ? void 0 : call.addParticipant(participant));
         }
     });
-    /* @conditional-compile-remove(dialpad) */
+    /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
     const onSendDtmfTone = (dtmfTone) => __awaiter$t(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
     return {
         onHangUp,
@@ -782,8 +782,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         onStartLocalVideo,
         onDisposeRemoteStreamView,
         onDisposeLocalStreamView,
-        /* @conditional-compile-remove(dialpad) */
-        onSendDtmfTone
+        /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */ onSendDtmfTone
     };
 });
 /**
@@ -1945,7 +1944,7 @@ const DEFAULT_COMPONENT_ICONS = {
     SendBoxSend: React__default['default'].createElement(reactIcons.Send20Regular, null),
     SendBoxSendHovered: React__default['default'].createElement(reactIcons.Send20Filled, null),
     VideoTileMicOff: React__default['default'].createElement(reactIcons.MicOff16Filled, null),
-    /* @conditional-compile-remove(dialpad) */
+    /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
     BackSpace: React__default['default'].createElement(reactIcons.Backspace20Regular, null)
 };
 
@@ -4437,7 +4436,7 @@ 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, { 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) }, 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
@@ -7821,7 +7820,7 @@ const DialpadContainer = (props) => {
     var _a, _b;
     const theme = react.useTheme();
     const [textValue, setTextValue] = React.useState('');
-    const { onSendDtmfTone, onClickDialpadButton, onDisplayDialpadInput, onChange } = props;
+    const { onSendDtmfTone, onClickDialpadButton, onDisplayDialpadInput, onChange, showDeleteButton } = props;
     const sanitizeInput = (input) => {
         // remove non-valid characters from input: letters,special characters excluding +, *,#
         return input.replace(/[^\d*#+]/g, '');
@@ -7868,7 +7867,7 @@ const DialpadContainer = (props) => {
                 }
             }, placeholder: props.strings.placeholderText, "data-test-id": "dialpad-input", onRenderSuffix: () => {
                 var _a;
-                return (React__default['default'].createElement(React__default['default'].Fragment, null, textValue.length !== 0 && (React__default['default'].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: 'BackSpace' } }))));
+                return (React__default['default'].createElement(React__default['default'].Fragment, null, showDeleteButton && textValue.length !== 0 && (React__default['default'].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: 'BackSpace' } }))));
             } }),
         React__default['default'].createElement(react.FocusZone, null, dialPadButtonsDefault.map((rows, rowIndex) => {
             return (React__default['default'].createElement(react.Stack, { horizontal: true, key: `row_${rowIndex}`, horizontalAlign: "stretch" }, rows.map((button, columnIndex) => (React__default['default'].createElement(DialpadButton, { key: `button_${columnIndex}`, 
@@ -7899,14 +7898,16 @@ const DialpadContainer = (props) => {
  * @beta
  */
 const Dialpad = (props) => {
-    /* @conditional-compile-remove(dialpad) */
+    var _a;
+    /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
     const localeStrings = useLocale$1().strings.dialpad;
     const dialpadLocaleStringsTrampoline = () => {
-        /* @conditional-compile-remove(dialpad) */
+        /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
         return localeStrings;
     };
     const strings = Object.assign(Object.assign({}, dialpadLocaleStringsTrampoline()), props.strings);
-    return React__default['default'].createElement(DialpadContainer, Object.assign({ strings: strings }, props));
+    const showDeleteButton = (_a = props.showDeleteButton) !== null && _a !== void 0 ? _a : true;
+    return React__default['default'].createElement(DialpadContainer, Object.assign({ strings: strings }, props, { showDeleteButton: showDeleteButton }));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -8335,7 +8336,7 @@ const getSelector$1 = (component) => {
     return findSelector$1(component);
 };
 const findSelector$1 = (component) => {
-    /* @conditional-compile-remove(dialpad) */
+    /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
     // Dialpad only has handlers currently and doesn't require any props from the stateful layer so return the emptySelector
     if (component === Dialpad) {
         return emptySelector;
@@ -14463,6 +14464,10 @@ const createCompositeHandlers = memoizeOne__default['default']((adapter) => ({
     onAddParticipant: (participant, options) => __awaiter$9(void 0, void 0, void 0, function* () {
         return yield adapter.addParticipant(participant, options);
     }),
+    /* @conditional-compile-remove(PSTN-calls) */
+    onSendDtmfTone: (dtmfTone) => __awaiter$9(void 0, void 0, void 0, function* () {
+        yield adapter.sendDtmfTone(dtmfTone);
+    }),
     onRemoveParticipant: (userId) => __awaiter$9(void 0, void 0, void 0, function* () {
         yield adapter.removeParticipant(userId);
     }),
@@ -14833,6 +14838,113 @@ const People = (props) => {
     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.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+const themeddialpadModalStyle$1 = (theme) => ({
+    main: {
+        borderRadius: theme.effects.roundedCorner6,
+        padding: '1rem'
+    }
+});
+/**
+ * @private
+ */
+const themedDialpadStyle$1 = (isMobile, theme) => ({
+    root: {
+        padding: 0,
+        marginLeft: 0,
+        marginRight: 0,
+        maxWidth: '100%'
+    },
+    textField: {
+        root: {
+            borderBottom: `1px solid ${theme.palette.neutralTertiaryAlt}`
+        },
+        field: {
+            backgroundColor: theme.palette.white,
+            fontSize: theme.fonts.large.fontSize,
+            padding: '1.063rem 0.5rem',
+            textAlign: 'center',
+            paddingTop: 0
+        }
+    },
+    primaryContent: {
+        color: theme.palette.themeDarkAlt
+    }
+});
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+const compositeOuterContainerStyles = {
+    root: {
+        width: '100%',
+        // Create a new stacking context so that DrawerMenu can be positioned absolutely.
+        position: 'relative'
+    }
+};
+/** @private */
+const callCompositeContainerStyles = {
+    root: {
+        // Start a new stacking context so that any `position:absolute` elements
+        // inside the call composite do not compete with its siblings.
+        position: 'relative'
+    }
+};
+/** @private */
+const controlBarContainerStyles$1 = {
+    root: {
+        // Start a new stacking context so that any `position:absolute` elements
+        // inside the control bar do not compete with its siblings.
+        position: 'relative'
+    }
+};
+/** @private */
+const drawerContainerStyles$1 = {
+    root: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        // Any zIndex > 0 will work because this is the only absolutely
+        // positioned element in the container.
+        zIndex: 1
+    }
+};
+
+// Copyright (c) Microsoft Corporation.
+/** @private */
+const SendDtmfDialpad = (props) => {
+    const dialpadProps = usePropsFor$1(Dialpad);
+    const { strings, isMobile, showDialpad, onDismissDialpad } = props;
+    const theme = react.useTheme();
+    const onDismissTriggered = () => {
+        onDismissDialpad();
+    };
+    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 }))))))));
+    }
+    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 }))))));
+};
+
 // Copyright (c) Microsoft Corporation.
 // Enforce a background color on control bar to ensure it matches the composite background color.
 const controlBarStyles = react.memoizeFunction((background) => ({ root: { background: background } }));
@@ -14849,6 +14961,13 @@ const CallControls = (props) => {
         tooltipOffContent: localeStrings.strings.callWithChat.peopleButtonTooltipOpen,
         tooltipOnContent: localeStrings.strings.callWithChat.peopleButtonTooltipClose
     }), [localeStrings]);
+    /* @conditional-compile-remove(PSTN-calls) */
+    const dialpadStrings = React.useMemo(() => ({
+        dialpadModalAriaLabel: localeStrings.strings.call.dialpadModalAriaLabel,
+        dialpadCloseModalButtonAriaLabel: localeStrings.strings.call.dialpadCloseModalButtonAriaLabel
+    }), [localeStrings]);
+    /* @conditional-compile-remove(PSTN-calls) */
+    const [showDialpad, setShowDialpad] = React.useState(false);
     const theme = react.useTheme();
     /* @conditional-compile-remove(control-bar-button-injection) */
     const customButtons = React.useMemo(() => generateCustomControlBarButtons(onFetchCustomButtonPropsTrampoline$1(options), options === null || options === void 0 ? void 0 : options.displayType), [options]);
@@ -14856,7 +14975,13 @@ const CallControls = (props) => {
     if (props.options === false) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
+    /* @conditional-compile-remove(PSTN-calls) */
+    const onDismissDialpad = () => {
+        setShowDialpad(false);
+    };
     return (React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
+        /* @conditional-compile-remove(PSTN-calls) */
+        React__default['default'].createElement(SendDtmfDialpad, { isMobile: !!props.isMobile, strings: dialpadStrings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
         React__default['default'].createElement(react.Stack.Item, null,
             React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: controlBarStyles(theme.semanticColors.bodyBackground) },
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton) && React__default['default'].createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType }),
@@ -14892,7 +15017,7 @@ const callStatusSelector = reselect.createSelector([getCallStatus, getIsScreenSh
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 /** @private */
-const controlBarContainerStyles$1 = {
+const controlBarContainerStyles = {
     paddingTop: '0.25rem',
     paddingBottom: '0.25rem',
     // @TODO: this should be exposed through a custom CallComposite Theme API that extends the fluent theme with semantic values
@@ -14911,7 +15036,7 @@ const NOTIFICATION_CONTAINER_Z_INDEX = Math.max(CONTROL_BAR_Z_INDEX, VIDEO_GALLE
 /**
  * @private
  */
-const callControlsContainerStyles = react.mergeStyles(controlBarContainerStyles$1, {
+const callControlsContainerStyles = react.mergeStyles(controlBarContainerStyles, {
     zIndex: CONTROL_BAR_Z_INDEX
 });
 const containerStyle$2 = {
@@ -15336,7 +15461,7 @@ const iconStyles = {
 /**
  * @private
  */
-const themedDialpadModelStyle = (theme) => ({
+const themeddialpadModalStyle = (theme) => ({
     main: {
         borderRadius: theme.effects.roundedCorner6,
         padding: '1rem'
@@ -15385,48 +15510,6 @@ const themedCallButtonStyle = (theme) => ({
     }
 });
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-/**
- * @private
- */
-const compositeOuterContainerStyles = {
-    root: {
-        width: '100%',
-        // Create a new stacking context so that DrawerMenu can be positioned absolutely.
-        position: 'relative'
-    }
-};
-/** @private */
-const callCompositeContainerStyles = {
-    root: {
-        // Start a new stacking context so that any `position:absolute` elements
-        // inside the call composite do not compete with its siblings.
-        position: 'relative'
-    }
-};
-/** @private */
-const controlBarContainerStyles = {
-    root: {
-        // Start a new stacking context so that any `position:absolute` elements
-        // inside the control bar do not compete with its siblings.
-        position: 'relative'
-    }
-};
-/** @private */
-const drawerContainerStyles$1 = {
-    root: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        // Any zIndex > 0 will work because this is the only absolutely
-        // positioned element in the container.
-        zIndex: 1
-    }
-};
-
 // Copyright (c) Microsoft Corporation.
 /** @private */
 const CallingDialpad = (props) => {
@@ -15448,7 +15531,7 @@ const CallingDialpad = (props) => {
             onDismissTriggered();
         }
     };
-    const dialpadModelStyle = React.useMemo(() => themedDialpadModelStyle(theme), [theme]);
+    const dialpadModalStyle = React.useMemo(() => themeddialpadModalStyle(theme), [theme]);
     const dialpadStyle = React.useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);
     const callButtonStyle = React.useMemo(() => themedCallButtonStyle(theme), [theme]);
     const dialpadComponent = () => {
@@ -15459,12 +15542,12 @@ const CallingDialpad = (props) => {
     if (isMobile) {
         return (React__default['default'].createElement(react.Stack, { "data-ui-id": "call-with-chat-composite-dialpad" }, 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: '16px' } }, dialpadComponent()))))));
+                React__default['default'].createElement(react.Stack, { style: { padding: '1rem' } }, dialpadComponent()))))));
     }
-    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: dialpadModelStyle, "data-ui-id": "call-with-chat-composite-dialpad" },
+    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, "data-ui-id": "call-with-chat-composite-dialpad" },
         React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center" },
             React__default['default'].createElement(react.Text, null, strings.dialpadModalTitle),
-            React__default['default'].createElement(react.IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: { color: 'black' } })),
+            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, dialpadComponent()))));
 };
 function DialpadStartCallIconTrampoline() {
@@ -17295,6 +17378,8 @@ class AzureCommunicationCallAdapter {
         this.holdCall.bind(this);
         /* @conditional-compile-remove(PSTN-calls) */
         this.resumeCall.bind(this);
+        /* @conditional-compile-remove(PSTN-calls) */
+        this.sendDtmfTone.bind(this);
     }
     dispose() {
         this.resetDiagnosticsForwarder();
@@ -17554,6 +17639,12 @@ class AzureCommunicationCallAdapter {
             }
         });
     }
+    /* @conditional-compile-remove(PSTN-calls) */
+    sendDtmfTone(dtmfTone) {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            this.handlers.onSendDtmfTone(dtmfTone);
+        });
+    }
     getState() {
         return this.context.getState();
     }
@@ -18037,7 +18128,7 @@ const inferCallWithChatControlOptions$1 = (mobileView, callWithChatControls) =>
  * @private
  */
 const CallWithChatControlBar = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     const theme = react.useTheme();
     const callWithChatStrings = useCallWithChatCompositeStrings();
     const options = inferCallWithChatControlOptions$1(props.mobileView, props.callControls);
@@ -18069,14 +18160,27 @@ 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 }));
-    return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(callControlsContainerStyles, controlBarContainerStyles$1) },
+    /* @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 },
@@ -18085,8 +18189,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) */
-                        (_a = customButtons['primary']) === null || _a === void 0 ? void 0 :
-                            _a.props.children.slice(0, props.mobileView
+                        (_b = customButtons['primary']) === null || _b === void 0 ? void 0 :
+                            _b.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' })));
@@ -18095,8 +18199,8 @@ const CallWithChatControlBar = (props) => {
                             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) */
-        (_b = customButtons['secondary']) === null || _b === void 0 ? void 0 :
-            _b.props.children.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((element) => {
+        (_c = customButtons['secondary']) === null || _c === void 0 ? void 0 :
+            _c.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 })),
@@ -18270,6 +18374,10 @@ class CallWithChatBackedCallAdapter {
         this.addParticipant = (participant, options) => __awaiter$3(this, void 0, void 0, function* () {
             yield this.callWithChatAdapter.addParticipant(participant, options);
         });
+        /* @conditional-compile-remove(PSTN-calls) */
+        this.sendDtmfTone = (dtmfTone) => __awaiter$3(this, void 0, void 0, function* () {
+            yield this.callWithChatAdapter.sendDtmfTone(dtmfTone);
+        });
         this.callWithChatAdapter = callWithChatAdapter;
     }
 }
@@ -18713,7 +18821,7 @@ const CallWithChatScreen = (props) => {
                     /* @conditional-compile-remove(file-sharing) */
                     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 },
+                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 })))),
             showControlBar && showDrawer && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
                 React__default['default'].createElement(CallAdapterProvider, { adapter: callAdapter },
@@ -18959,6 +19067,8 @@ class AzureCommunicationCallWithChatAdapter {
         this.resumeCall.bind(this);
         /* @conditional-compile-remove(PSTN-calls) */
         this.addParticipant.bind(this);
+        /* @conditional-compile-remove(PSTN-calls) */
+        this.sendDtmfTone.bind(this);
     }
     /** Join existing Call. */
     joinCall(microphoneOn) {
@@ -19155,6 +19265,12 @@ class AzureCommunicationCallWithChatAdapter {
             return yield this.callAdapter.addParticipant(participant, options);
         });
     }
+    /* @conditional-compile-remove(PSTN-calls) */
+    sendDtmfTone(dtmfTone) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.callAdapter.sendDtmfTone(dtmfTone);
+        });
+    }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     on(event, listener) {
         switch (event) {