@azure/communication-react 1.3.3-alpha-202208270015.0 → 1.3.3-alpha-202208310017.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;
 }
 
@@ -4259,8 +4261,8 @@ export declare interface DialpadStyles {
     root?: IStyle;
     button?: IButtonStyles;
     textField?: Partial<ITextFieldStyles>;
-    primaryContent?: IStyle;
-    secondaryContent?: IStyle;
+    digit?: IStyle;
+    letter?: IStyle;
     deleteIcon?: IButtonStyles;
 }
 

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-202208270015.0';
+var telemetryVersion = '1.3.3-alpha-202208310017.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -7722,7 +7722,7 @@ const buttonStyles = (theme) => ({
 /**
  * @private
  */
-const primaryContentStyles = (theme) => {
+const digitStyles = (theme) => {
     return {
         fontSize: '1.25rem',
         fontWeight: theme.fonts.medium.fontWeight,
@@ -7758,7 +7758,7 @@ const textFieldStyles = (theme) => ({
 /**
  * @private
  */
-const secondaryContentStyles = (theme) => {
+const letterStyles = (theme) => {
     return {
         fontSize: '0.625rem',
         color: `${theme.palette.neutralSecondary}`,
@@ -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 {
@@ -7888,22 +7895,18 @@ var __awaiter$p = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 const dialPadButtonsDefault = [
+    [{ digit: '1' }, { digit: '2', letter: 'ABC' }, { digit: '3', letter: 'DEF' }],
     [
-        { primaryContent: '1' },
-        { primaryContent: '2', secondaryContent: 'ABC' },
-        { primaryContent: '3', secondaryContent: 'DEF' }
+        { digit: '4', letter: 'GHI' },
+        { digit: '5', letter: 'JKL' },
+        { digit: '6', letter: 'MNO' }
     ],
     [
-        { primaryContent: '4', secondaryContent: 'GHI' },
-        { primaryContent: '5', secondaryContent: 'JKL' },
-        { primaryContent: '6', secondaryContent: 'MNO' }
+        { digit: '7', letter: 'PQRS' },
+        { digit: '8', letter: 'TUV' },
+        { digit: '9', letter: 'WXYZ' }
     ],
-    [
-        { primaryContent: '7', secondaryContent: 'PQRS' },
-        { primaryContent: '8', secondaryContent: 'TUV' },
-        { primaryContent: '9', secondaryContent: 'WXYZ' }
-    ],
-    [{ primaryContent: '*' }, { primaryContent: '0', secondaryContent: '+' }, { primaryContent: '#' }]
+    [{ digit: '*' }, { digit: '0', letter: '+' }, { digit: '#' }]
 ];
 const DtmfTones = [
     'Num1',
@@ -7922,23 +7925,23 @@ const DtmfTones = [
 const DialpadButton = (props) => {
     var _a, _b, _c, _d;
     const theme = react.useTheme();
-    const { primaryContent, 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(primaryContent, index);
-    }), [primaryContent, index, onClick]);
+        onClick(digit, index);
+    }), [digit, index, onClick]);
     const longPressFunction = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
-        onLongPress(primaryContent, index);
-    }), [primaryContent, index, onLongPress]);
-    const { handlers } = useLongPress(clickFunction, longPressFunction);
+        onLongPress(digit, index);
+    }), [digit, index, onLongPress]);
+    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(primaryContentStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.primaryContent) }, props.primaryContent),
-            React__default['default'].createElement(react.Text, { className: react.mergeStyles(secondaryContentStyles(theme), (_c = props.styles) === null || _c === void 0 ? void 0 : _c.secondaryContent) }, (_d = props.secondaryContent) !== null && _d !== void 0 ? _d : ' '))));
+            React__default['default'].createElement(react.Text, { className: react.mergeStyles(digitStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.digit) }, props.digit),
+            React__default['default'].createElement(react.Text, { className: react.mergeStyles(letterStyles(theme), (_c = props.styles) === null || _c === void 0 ? void 0 : _c.letter) }, (_d = props.letter) !== null && _d !== void 0 ? _d : ' '))));
 };
 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) {
@@ -8009,7 +8012,7 @@ const DialpadContainer = (props) => {
                 then use this index to locate the corresponding dtmf tones
                 DtmfTones[index]
                 */
-                index: columnIndex + rowIndex * rows.length, primaryContent: button.primaryContent, secondaryContent: button.secondaryContent, 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 })))));
         }))));
 };
 /**
@@ -15067,7 +15070,7 @@ const themedDialpadStyle$1 = (isMobile, theme) => ({
             }
         }
     },
-    primaryContent: {
+    digit: {
         color: theme.palette.themeDarkAlt
     }
 });
@@ -15123,19 +15126,23 @@ const SendDtmfDialpad = (props) => {
     const onDismissTriggered = () => {
         onDismissDialpad();
     };
+    const [textFieldValue, setTextFieldValue] = React.useState();
+    const onChange = (input) => {
+        setTextFieldValue(input);
+    };
     const dialpadModalStyle = React.useMemo(() => themeddialpadModalStyle$1(theme), [theme]);
     const dialpadStyle = React.useMemo(() => themedDialpadStyle$1(isMobile, theme), [theme, isMobile]);
     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, strings: strings }))))))));
+                    React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, textFieldValue: textFieldValue, onChange: onChange, 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, { textFieldValue: textFieldValue, onChange: onChange, showDeleteButton: false, strings: strings, isMobile: isMobile }))))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -15167,6 +15174,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 = [];
@@ -15200,17 +15209,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) */
@@ -15735,14 +15747,13 @@ 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'
             }
         }
     },
-    primaryContent: {
+    digit: {
         color: theme.palette.themeDarkAlt
     }
 });
@@ -15789,7 +15800,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) {
@@ -19072,6 +19083,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',
@@ -19314,6 +19326,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 },
@@ -19330,13 +19344,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) */