@azure/communication-react 1.3.3-alpha-202208280018.0 → 1.3.3-alpha-202208300017.0

package/dist/communication-react.d.ts

@@ -4237,6 +4237,8 @@ export declare interface DialpadProps {
     onChange?: (input: string) => void;
     /**  boolean input to determine when to show/hide delete button, default true */
     showDeleteButton?: boolean;
+    /**  boolean input to determine if dialpad is in mobile view, default false */
+    isMobile?: boolean;
     styles?: DialpadStyles;
 }
 

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

@@ -192,7 +192,7 @@ const fromFlatCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.3.3-alpha-202208280018.0';
+var telemetryVersion = '1.3.3-alpha-202208300017.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -7824,7 +7824,7 @@ const formatPhoneNumber = (phoneNumber) => {
 /**
  * @private
  */
-function useLongPress(onClick, onLongPress) {
+function useLongPress(onClick, onLongPress, isMobile) {
     const timerRef = React.useRef();
     const [isLongPress, setIsLongPress] = React.useState(false);
     const [action, setAction] = React.useState(false);
@@ -7835,6 +7835,10 @@ function useLongPress(onClick, onLongPress) {
         }, 500);
     }
     function handleOnClick() {
+        // when it's mobile use ontouchstart and ontouchend to fire onclick and onlongpress event
+        if (isMobile) {
+            return;
+        }
         onClick();
         if (isLongPress) {
             onLongPress();
@@ -7861,6 +7865,9 @@ function useLongPress(onClick, onLongPress) {
         startPressTimer();
     }
     function handleOnTouchEnd() {
+        if (isMobile) {
+            isLongPress ? onLongPress() : onClick();
+        }
         timerRef.current && clearTimeout(timerRef.current);
     }
     return {
@@ -7918,14 +7925,14 @@ const DtmfTones = [
 const DialpadButton = (props) => {
     var _a, _b, _c, _d;
     const theme = react.useTheme();
-    const { digit, index, onClick, onLongPress } = props;
+    const { digit, index, onClick, onLongPress, isMobile = false } = props;
     const clickFunction = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
         onClick(digit, index);
     }), [digit, index, onClick]);
     const longPressFunction = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
         onLongPress(digit, index);
     }), [digit, index, onLongPress]);
-    const { handlers } = useLongPress(clickFunction, longPressFunction);
+    const { handlers } = useLongPress(clickFunction, longPressFunction, isMobile);
     return (React__default['default'].createElement(react.DefaultButton, Object.assign({ "data-test-id": `dialpad-button-${props.index}`, styles: react.concatStyleSets(buttonStyles(), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.button) }, handlers),
         React__default['default'].createElement(react.Stack, null,
             React__default['default'].createElement(react.Text, { className: react.mergeStyles(digitStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.digit) }, props.digit),
@@ -7934,7 +7941,7 @@ const DialpadButton = (props) => {
 const DialpadContainer = (props) => {
     var _a, _b;
     const theme = react.useTheme();
-    const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true } = props;
+    const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true, isMobile = false } = props;
     const [plainTextValue, setPlainTextValue] = React.useState(textFieldValue !== null && textFieldValue !== void 0 ? textFieldValue : '');
     React.useEffect(() => {
         if (onChange) {
@@ -8005,7 +8012,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 })))));
+                index: columnIndex + rowIndex * rows.length, digit: button.digit, letter: button.letter, styles: props.styles, onClick: onClickDialpad, onLongPress: onLongPressDialpad, isMobile: isMobile })))));
         }))));
 };
 /**
@@ -15056,7 +15063,6 @@ const themedDialpadStyle$1 = (isMobile, theme) => ({
             backgroundColor: theme.palette.white,
             fontSize: theme.fonts.large.fontSize,
             padding: '0 0.5rem ',
-            direction: 'rtl',
             textAlign: 'center',
             ':active': {
                 padding: '0 0.5rem'
@@ -15125,13 +15131,13 @@ const SendDtmfDialpad = (props) => {
         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, strings: strings }))))))));
+                    React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: strings, isMobile: isMobile }))))))));
     }
     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, { style: { overflow: 'hidden' } },
-            React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: strings }))))));
+            React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: strings, isMobile: isMobile }))))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -15163,6 +15169,8 @@ const CallControls = (props) => {
     }), [localeStrings]);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const holdButtonProps = usePropsFor$1(HoldButton);
+    /* @conditional-compile-remove(PSTN-calls) */
+    const alternateCallerId = useAdapter().getState().alternateCallerId;
     /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
     const moreButtonContextualMenuItems = () => {
         const items = [];
@@ -15196,17 +15204,20 @@ const CallControls = (props) => {
             ['data-ui-id']: 'hold-button'
         });
         /* @conditional-compile-remove(PSTN-calls) */
-        items.push({
-            key: 'showDialpadKey',
-            text: localeStrings.strings.call.openDtmfDialpadLabel,
-            onClick: () => {
-                setShowDialpad(true);
-            },
-            iconProps: { iconName: 'PeoplePaneOpenDialpad', styles: { root: { lineHeight: 0 } } },
-            itemProps: {
-                styles: buttonFlyoutIncreasedSizeStyles
-            }
-        });
+        // 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;
     };
     /* @conditional-compile-remove(PSTN-calls) */
@@ -15731,7 +15742,6 @@ const themedDialpadStyle = (isMobile, theme) => ({
             backgroundColor: theme.palette.white,
             fontSize: theme.fonts.large.fontSize,
             padding: '0 0.5rem',
-            direction: 'rtl',
             textAlign: isMobile ? 'center' : 'left',
             ':active': {
                 padding: '0 0.5rem'
@@ -15785,7 +15795,7 @@ const CallingDialpad = (props) => {
     const callButtonStyle = React.useMemo(() => themedCallButtonStyle(theme), [theme]);
     const dialpadComponent = () => {
         return (React__default['default'].createElement(React__default['default'].Fragment, null,
-            React__default['default'].createElement(Dialpad, { styles: dialpadStyle, onChange: setTextFieldInput }),
+            React__default['default'].createElement(Dialpad, { styles: dialpadStyle, onChange: setTextFieldInput, isMobile: isMobile }),
             React__default['default'].createElement(react.PrimaryButton, { text: strings.dialpadStartCallButtonLabel, onRenderIcon: () => DialpadStartCallIconTrampoline(), onClick: onClickCall, styles: callButtonStyle, disabled: textFieldInput === '' })));
     };
     if (isMobile) {
@@ -19068,6 +19078,7 @@ const MoreDrawer = (props) => {
         });
     }
     /*@conditional-compile-remove(PSTN-calls) */
+    // dtmf tone sending only works for 1:1 PSTN call
     if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.peopleButton) && props.onClickShowDialpad) {
         drawerMenuItems.push({
             itemKey: 'showDialpadKey',
@@ -19310,6 +19321,8 @@ const CallWithChatScreen = (props) => {
         dialpadCloseModalButtonAriaLabel: callWithChatStrings.dialpadCloseModalButtonAriaLabel,
         placeholderText: callWithChatStrings.dtmfDialpadPlaceHolderText
     }), [callWithChatStrings]);
+    /* @conditional-compile-remove(PSTN-calls) */
+    const alternateCallerId = callAdapter.getState().alternateCallerId;
     return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles) },
         React__default['default'].createElement(react.Stack, { verticalFill: true, grow: true, styles: compositeOuterContainerStyles, id: compositeParentDivId },
             React__default['default'].createElement(react.Stack, { horizontal: true, grow: true },
@@ -19326,13 +19339,13 @@ const CallWithChatScreen = (props) => {
                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                         disableButtonsForHoldScreen: isInLocalHold, callControls: props.callControls, containerHeight: containerHeight, containerWidth: containerWidth, 
                         /* @conditional-compile-remove(PSTN-calls) */
-                        onClickShowDialpad: onClickShowDialpad })))),
+                        onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined })))),
             showControlBar && showDrawer && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
                 React__default['default'].createElement(CallAdapterProvider, { adapter: callAdapter },
                     React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles$1 },
                         React__default['default'].createElement(PreparedMoreDrawer, { callControls: props.callControls, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, 
                             /* @conditional-compile-remove(PSTN-calls) */
-                            onClickShowDialpad: onClickShowDialpad, 
+                            onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, 
                             /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                             disableButtonsForHoldScreen: isInLocalHold }))))),
             /* @conditional-compile-remove(PSTN-calls) */