@azure/communication-react 1.12.1-alpha-202401270011 → 1.12.1-alpha-202401280013

package/dist/communication-react.d.ts

@@ -6560,9 +6560,10 @@ export declare interface DialpadProps {
      */
     showDeleteButton?: boolean;
     /**
-     * flag to determine if dialpad is in mobile view, default false
+     * Determines what kind of device that the user is on and should respect that based on interaction
+     * interfaces available to the user
      */
-    isMobile?: boolean;
+    longPressTrigger?: LongPressTrigger;
     /**
      * Styles for customizing the dialpad component
      */
@@ -7679,6 +7680,12 @@ export declare interface LocalVideoTileOptions {
  */
 export declare type LocalVideoTileSize = '9:16' | '16:9' | 'hidden' | 'followDeviceOrientation';
 
+/**
+ * Modes of how the longpress handlers can be tiggered.
+ * @beta
+ */
+export declare type LongPressTrigger = 'mouseAndTouch' | 'touch';
+
 /**
  * Payload for {@link DiagnosticChangedEventListner} where there is a change in a media diagnostic.
  *

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

@@ -173,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-202401270011';
+var telemetryVersion = '1.12.1-alpha-202401280013';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -13169,8 +13169,11 @@ function useLongPress(props) {
         startPressTimer();
     }, [startPressTimer]);
     const handleOnTouchEnd = React.useCallback(() => {
+        if (!isLongPress && onClick) {
+            onClick();
+        }
         timerRef.current && clearTimeout(timerRef.current);
-    }, []);
+    }, [onClick, isLongPress]);
     const handleOnTouchMove = React.useCallback(() => {
         timerRef.current && clearTimeout(timerRef.current);
     }, []);
@@ -18379,7 +18382,7 @@ const DtmfTones = [
 const DialpadButton = (props) => {
     var _a, _b, _c, _d;
     const theme = react.useTheme();
-    const { digit, index, onClick, onLongPress, isMobile = false, dtmfToneAudioContext, disableDtmfPlayback } = props;
+    const { digit, index, onClick, onLongPress, longPressTrigger, dtmfToneAudioContext, disableDtmfPlayback } = props;
     const [buttonPressed, setButtonPressed] = React.useState(false);
     const dtmfToneSound = React.useRef(new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2));
     const useLongPressProps = React.useMemo(() => ({
@@ -18389,8 +18392,8 @@ const DialpadButton = (props) => {
         onLongPress: () => __awaiter$u(void 0, void 0, void 0, function* () {
             onLongPress(digit, index);
         }),
-        touchEventsOnly: isMobile
-    }), [digit, index, isMobile, onClick, onLongPress]);
+        touchEventsOnly: longPressTrigger === 'touch'
+    }), [digit, index, longPressTrigger, onClick, onLongPress]);
     const longPressHandlers = useLongPress(useLongPressProps);
     return (React.createElement(react.DefaultButton, Object.assign({ "data-test-id": `dialpad-button-${props.index}`, styles: react.concatStyleSets(buttonStyles$1(), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.button) }, longPressHandlers, { onKeyDown: (e) => {
             if ((e.key === 'Enter' || e.key === ' ') && !buttonPressed) {
@@ -18401,6 +18404,13 @@ const DialpadButton = (props) => {
                 setButtonPressed(true);
                 return;
             }
+            if (e.key === 'Tab' ||
+                e.key === 'ArrowLeft' ||
+                e.key === 'ArrowRight' ||
+                e.key === 'ArrowUp' ||
+                e.key === 'ArrowDown') {
+                dtmfToneSound.current.stop();
+            }
             longPressHandlers.onKeyDown();
         }, onKeyUp: (e) => {
             if ((e.key === 'Enter' || e.key === ' ') && buttonPressed) {
@@ -18435,7 +18445,7 @@ const DialpadButton = (props) => {
 const DialpadContainer = (props) => {
     var _a, _b;
     const theme = react.useTheme();
-    const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true, isMobile = false, disableDtmfPlayback, dialpadMode = 'dialer' } = props;
+    const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true, longPressTrigger = 'mouseAndTouch', 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);
@@ -18511,7 +18521,7 @@ const DialpadContainer = (props) => {
                 then use this index to locate the corresponding dtmf tones
                 DtmfTones[index]
                 */
-                index: columnIndex + rowIndex * rows.length, digit: button.digit, letter: button.letter, styles: props.styles, onClick: onClickDialpad, onLongPress: onLongPressDialpad, isMobile: isMobile, dtmfToneAudioContext: dtmfToneAudioContext.current, disableDtmfPlayback: disableDtmfPlayback })))));
+                index: columnIndex + rowIndex * rows.length, digit: button.digit, letter: button.letter, styles: props.styles, onClick: onClickDialpad, onLongPress: onLongPressDialpad, longPressTrigger: longPressTrigger, dtmfToneAudioContext: dtmfToneAudioContext.current, disableDtmfPlayback: disableDtmfPlayback })))));
         }))));
 };
 /**
@@ -25906,6 +25916,10 @@ const getLatestCapabilitiesChangedInfo = (state) => {
  * @private
  */
 const getTargetCallees = (state) => state.targetCallees;
+/**
+ * @private
+ */
+const getStartTime = (state) => { var _a; return (_a = state.call) === null || _a === void 0 ? void 0 : _a.startTime; };
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -26018,122 +26032,6 @@ const People = (props) => {
     return (React.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: '0 0.5rem ',
-            textAlign: 'center',
-            ':active': {
-                padding: '0 0.5rem'
-            }
-        }
-    },
-    digit: {
-        color: theme.palette.themeDarkAlt
-    }
-});
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-const DEFAULT_Z_INDEX = 1;
-const mainScreenContainerStyle = {
-    height: '100%',
-    width: '100%'
-};
-/**
- * @private
- */
-const mainScreenContainerStyleDesktop = react.mergeStyles(Object.assign(Object.assign({}, mainScreenContainerStyle), { minWidth: '30rem', minHeight: '22rem' // max height of min-height of composite pages (Configuration page)
- }));
-/**
- * @private
- */
-const mainScreenContainerStyleMobile = react.mergeStyles(Object.assign(Object.assign({}, mainScreenContainerStyle), { minWidth: '17.5rem', minHeight: '13rem' // max height of min-height of composite pages (Configuration page & Call page)
- }));
-/**
- * @private
- * Drawer styles to be used to house the _DrawerComponent on top of other content on the screen.
- * @param zIndex: this defaults to DEFAULT_Z_INDEX if unset
- */
-const drawerContainerStyles = (zIndex = DEFAULT_Z_INDEX) => ({
-    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: zIndex
-    }
-});
-/**
- * @private
- * Page container style for leaving page
- */
-const leavingPageStyle = (palette) => ({
-    background: palette.neutralLighterAlt
-});
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/** @private */
-const SendDtmfDialpad = (props) => {
-    const dialpadProps = usePropsFor$1(Dialpad);
-    const { strings, isMobile, showDialpad, onDismissDialpad } = props;
-    const theme = react.useTheme();
-    const onDismissTriggered = () => {
-        onDismissDialpad();
-    };
-    const [textFieldValue, setTextFieldValue] = React.useState();
-    const onChange = (input) => {
-        if (input.length > 25) {
-            setTextFieldValue(input.slice(1));
-        }
-        else {
-            setTextFieldValue(input);
-        }
-    };
-    const dialpadModalStyle = React.useMemo(() => themeddialpadModalStyle$1(theme), [theme]);
-    const dialpadStyle = React.useMemo(() => themedDialpadStyle$1(isMobile, theme), [theme, isMobile]);
-    if (isMobile) {
-        return (React.createElement(react.Stack, null, showDialpad && (React.createElement(react.Stack, { styles: drawerContainerStyles() },
-            React.createElement(_DrawerSurface, { disableMaxHeight: true, onLightDismiss: onDismissTriggered },
-                React.createElement(react.Stack, { style: { padding: '1rem' } },
-                    React.createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, textFieldValue: textFieldValue, onChange: onChange, strings: strings, isMobile: isMobile }))))))));
-    }
-    return (React.createElement(React.Fragment, null, React.createElement(react.Modal, { titleAriaId: strings.dialpadModalAriaLabel, isOpen: showDialpad, onDismiss: onDismissTriggered, isBlocking: true, styles: dialpadModalStyle },
-        React.createElement(react.Stack, { horizontal: true, horizontalAlign: "end", verticalAlign: "center" },
-            React.createElement(react.IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: { color: theme.palette.black } })),
-        React.createElement(react.Stack, { style: { overflow: 'hidden' } },
-            React.createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { textFieldValue: textFieldValue, onChange: onChange, showDeleteButton: false, strings: strings, isMobile: isMobile }))))));
-};
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /** @private */
@@ -26396,12 +26294,6 @@ const CallControls = (props) => {
         label: localeStrings.strings.call.moreButtonCallingLabel,
         tooltipOffContent: localeStrings.strings.callWithChat.moreDrawerButtonTooltip
     }), [localeStrings]);
-    /* @conditional-compile-remove(PSTN-calls) */
-    const dialpadStrings = React.useMemo(() => ({
-        dialpadModalAriaLabel: localeStrings.strings.call.dialpadModalAriaLabel,
-        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(raise-hand) */
@@ -26410,8 +26302,6 @@ const CallControls = (props) => {
     const capabilitiesSelector = useSelector$1(capabilitySelector);
     /* @conditional-compile-remove(reaction) */
     const isReactionAllowed = !(capabilitiesSelector === null || capabilitiesSelector === void 0 ? void 0 : capabilitiesSelector.capabilities) || capabilitiesSelector.capabilities.useReactions.isPresent;
-    /* @conditional-compile-remove(PSTN-calls) */
-    const alternateCallerId = useAdapter().getState().alternateCallerId;
     const devicesButtonProps = usePropsFor$1(DevicesButton);
     let numberOfButtons = 0;
     const screenShareButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton);
@@ -26476,21 +26366,6 @@ const CallControls = (props) => {
                 ['data-ui-id']: 'hold-button'
             });
         }
-        /* @conditional-compile-remove(PSTN-calls) */
-        // dtmf tone sending only works for 1:1 PSTN call
-        if (alternateCallerId) {
-            items.push({
-                key: 'showDialpadKey',
-                text: localeStrings.strings.call.openDtmfDialpadLabel,
-                onClick: () => {
-                    setShowDialpad(true);
-                },
-                iconProps: { iconName: 'PeoplePaneOpenDialpad', styles: { root: { lineHeight: 0 } } },
-                itemProps: {
-                    styles: buttonFlyoutIncreasedSizeStyles
-                }
-            });
-        }
         return items;
     };
     const customDrawerButtons = React.useMemo(() => generateCustomCallDesktopOverflowButtons(onFetchCustomButtonPropsTrampoline(typeof options === 'object' ? options : undefined), typeof options === 'object' ? options.displayType : undefined), [options]);
@@ -26587,20 +26462,12 @@ const CallControls = (props) => {
                 } }, element));
         });
     }
-    /* @conditional-compile-remove(PSTN-calls) */
-    const [showDialpad, setShowDialpad] = React.useState(false);
     const theme = react.useTheme();
     // when props.options is false then we want to hide the whole control bar.
     if (props.options === false) {
         return React.createElement(React.Fragment, null);
     }
-    /* @conditional-compile-remove(PSTN-calls) */
-    const onDismissDialpad = () => {
-        setShowDialpad(false);
-    };
     return (React.createElement(react.Stack, { horizontalAlign: "center", className: callControlsContainerStyles },
-        /* @conditional-compile-remove(PSTN-calls) */
-        React.createElement(SendDtmfDialpad, { isMobile: !!props.isMobile, strings: dialpadStrings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
         React.createElement(react.Stack.Item, null,
             React.createElement(ControlBar, { layout: props.displayVertical ? 'vertical' : 'horizontal', styles: controlBarStyles(theme.semanticColors.bodyBackground) },
                 microphoneButtonIsEnabled && (React.createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$4(options === null || options === void 0 ? void 0 : options.microphoneButton) })),
@@ -28058,6 +27925,48 @@ const PreparedMoreDrawer = (props) => {
     return React.createElement(MoreDrawer, Object.assign({}, props, deviceProps, callHandlers, { strings: moreDrawerStrings }));
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+const DEFAULT_Z_INDEX = 1;
+const mainScreenContainerStyle = {
+    height: '100%',
+    width: '100%'
+};
+/**
+ * @private
+ */
+const mainScreenContainerStyleDesktop = react.mergeStyles(Object.assign(Object.assign({}, mainScreenContainerStyle), { minWidth: '30rem', minHeight: '22rem' // max height of min-height of composite pages (Configuration page)
+ }));
+/**
+ * @private
+ */
+const mainScreenContainerStyleMobile = react.mergeStyles(Object.assign(Object.assign({}, mainScreenContainerStyle), { minWidth: '17.5rem', minHeight: '13rem' // max height of min-height of composite pages (Configuration page & Call page)
+ }));
+/**
+ * @private
+ * Drawer styles to be used to house the _DrawerComponent on top of other content on the screen.
+ * @param zIndex: this defaults to DEFAULT_Z_INDEX if unset
+ */
+const drawerContainerStyles = (zIndex = DEFAULT_Z_INDEX) => ({
+    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: zIndex
+    }
+});
+/**
+ * @private
+ * Page container style for leaving page
+ */
+const leavingPageStyle = (palette) => ({
+    background: palette.neutralLighterAlt
+});
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 const SIDE_PANE_PADDING_LR_REM = 0.25;
@@ -28515,7 +28424,7 @@ const CallingDialpad = (props) => {
     const callButtonStyle = React.useMemo(() => themedCallButtonStyle(theme), [theme]);
     const dialpadComponent = () => {
         return (React.createElement(React.Fragment, null,
-            React.createElement(Dialpad, { styles: dialpadStyle, onChange: setTextFieldInput, isMobile: isMobile }),
+            React.createElement(Dialpad, { styles: dialpadStyle, onChange: setTextFieldInput, longPressTrigger: isMobile ? 'touch' : 'mouseAndTouch' }),
             React.createElement(react.PrimaryButton, { text: strings.dialpadStartCallButtonLabel, onRenderIcon: () => DialpadStartCallIconTrampoline(), onClick: onClickCall, styles: callButtonStyle, disabled: textFieldInput === '' })));
     };
     if (isMobile) {
@@ -29486,7 +29395,7 @@ const messageBarStyles = {
  * @private
  */
 const CallArrangement = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const containerClassName = React.useMemo(() => {
         return props.mobileView ? containerStyleMobile : containerStyleDesktop;
     }, [props.mobileView]);
@@ -29562,14 +29471,6 @@ const CallArrangement = (props) => {
             position: 'relative'
         };
     }, [isMobileWithActivePane, props.mobileView]);
-    /* @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]);
     /* @conditional-compile-remove(video-background-effects) */
     const onResolveVideoEffectDependency = adapter.getState().onResolveVideoEffectDependency;
     /* @conditional-compile-remove(video-background-effects) */
@@ -29585,18 +29486,6 @@ const CallArrangement = (props) => {
         setShowDrawer(false);
         togglePeoplePane();
     }, [togglePeoplePane]);
-    /* @conditional-compile-remove(PSTN-calls) */
-    const alternateCallerId = useAdapter().getState().alternateCallerId;
-    /* @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);
-    };
     const drawerContainerStylesValue = React.useMemo(() => drawerContainerStyles(DRAWER_Z_INDEX), []);
     /* @conditional-compile-remove(rooms) */
     const role = (_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.role;
@@ -29649,9 +29538,7 @@ const CallArrangement = (props) => {
                     /* @conditional-compile-remove(close-captions) */
                     isCaptionsOn: isCaptionsOn, 
                     /* @conditional-compile-remove(video-background-effects) */
-                    onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, 
-                    /* @conditional-compile-remove(PSTN-calls) */
-                    onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, displayVertical: verticalControlBar, 
+                    onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, displayVertical: verticalControlBar, 
                     /* @conditional-compile-remove(gallery-layouts) */
                     onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, 
                     /* @conditional-compile-remove(gallery-layouts) */
@@ -29664,8 +29551,6 @@ const CallArrangement = (props) => {
                     dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef }))))),
                 ((_g = props.callControlProps) === null || _g === void 0 ? void 0 : _g.options) !== false && showDrawer && (React.createElement(react.Stack, { styles: drawerContainerStylesValue },
                     React.createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, 
-                        /* @conditional-compile-remove(PSTN-calls) */
-                        onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, 
                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                         disableButtonsForHoldScreen: isInLocalHold, 
                         /* @conditional-compile-remove(close-captions) */
@@ -29678,9 +29563,6 @@ const CallArrangement = (props) => {
                         onSetDialpadPage: props.onSetDialpadPage, 
                         /* @conditional-compile-remove(dtmf-dialer) */
                         dtmfDialerPresent: props.dtmfDialerPresent }))),
-                /* @conditional-compile-remove(PSTN-calls) */
-                ((_h = props.callControlProps) === null || _h === void 0 ? void 0 : _h.options) !== false && showDtmfDialpad && (React.createElement(react.Stack, { styles: drawerContainerStylesValue },
-                    React.createElement(SendDtmfDialpad, { isMobile: props.mobileView, strings: dialpadStrings, showDialpad: showDtmfDialpad, onDismissDialpad: onDismissDtmfDialpad }))),
                 React.createElement(react.Stack, { horizontal: true, grow: true },
                     React.createElement(react.Stack.Item, { style: callCompositeContainerCSS },
                         React.createElement(react.Stack.Item, { styles: callGalleryStyles, grow: true },
@@ -29703,7 +29585,7 @@ const CallArrangement = (props) => {
                         maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, minWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)
                             ? undefined
                             : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' &&
-                            isDisabled$4((_j = props.callControlProps.options) === null || _j === void 0 ? void 0 : _j.participantsButton), onChatButtonClicked: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.onClick, disableChatButton: (_l = props.mobileChatTabHeader) === null || _l === void 0 ? void 0 : _l.disabled }),
+                            isDisabled$4((_h = props.callControlProps.options) === null || _h === void 0 ? void 0 : _h.participantsButton), onChatButtonClicked: (_j = props.mobileChatTabHeader) === null || _j === void 0 ? void 0 : _j.onClick, disableChatButton: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.disabled }),
                     props.mobileView && (React.createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, strings: modalStrings, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition, onDismissSidePane: () => {
                             closePeoplePane();
                             if (props.onCloseChatPane) {
@@ -30119,15 +30001,19 @@ const DtmfDialpadPageContent = (props) => {
             React.createElement(Dialpad, { onSendDtmfTone: (tone) => __awaiter$b(void 0, void 0, void 0, function* () {
                     /* @conditional-compile-remove(dtmf-dialer) */
                     yield adapter.sendDtmfTone(tone);
-                }), dialpadMode: 'dtmf' }))));
+                }), longPressTrigger: props.mobileView ? 'touch' : 'mouseAndTouch', dialpadMode: 'dtmf' }))));
 };
 const DtmfDialerContentTimer = () => {
     const [time, setTime] = React.useState(0);
     const elapsedTime = getReadableTime$1(time);
-    const startTime = React.useRef(performance.now());
+    const statefulStartTime = useSelector$1(getStartTime);
+    const startTime = React.useMemo(() => {
+        return statefulStartTime !== null && statefulStartTime !== void 0 ? statefulStartTime : new Date(Date.now());
+    }, [statefulStartTime]);
     React.useEffect(() => {
         const interval = setInterval(() => {
-            setTime(performance.now() - startTime.current);
+            var _a;
+            setTime((_a = new Date(Date.now()).getTime() - (startTime === null || startTime === void 0 ? void 0 : startTime.getTime())) !== null && _a !== void 0 ? _a : 0);
         }, 10);
         return () => {
             clearInterval(interval);