@azure/communication-react 1.11.1-alpha-202401090013 → 1.11.1-alpha-202401110013

package/dist/communication-react.d.ts

@@ -6419,21 +6419,46 @@ export declare const Dialpad: (props: DialpadProps) => JSX.Element;
  */
 export declare interface DialpadProps {
     strings?: DialpadStrings;
-    /**  function to send dtmf tones on button click */
+    /**
+     * function to send dtmf tones on button click
+     */
     onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;
-    /**  Callback for dialpad button behavior*/
+    /**
+     * Callback for dialpad button behavior
+     */
     onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;
-    /** set dialpad textfield content */
+    /**
+     * set dialpad textfield content
+     */
     textFieldValue?: string;
-    /**  on change function for text field, provides an unformatted plain text*/
+    /**
+     * on change function for text field, provides an unformatted plain text
+     */
     onChange?: (input: string) => void;
-    /**  boolean input to determine when to show/hide delete button, default true */
+    /**
+     * flag to determine when to show/hide delete button, default true
+     */
     showDeleteButton?: boolean;
-    /**  boolean input to determine if dialpad is in mobile view, default false */
+    /**
+     * flag to determine if dialpad is in mobile view, default false
+     */
     isMobile?: boolean;
+    /**
+     * Styles for customizing the dialpad component
+     */
     styles?: DialpadStyles;
-    /** Disables DTMF sounds when dialpad buttons are pressed. the actual tones are still sent to the call. */
+    /**
+     * Disables DTMF sounds when dialpad buttons are pressed. the actual
+     * tones are still sent to the call.
+     */
     disableDtmfPlayback?: boolean;
+    /**
+     * Enable the ability to edit the number in the text box.
+     * This mode is for when dailing someone to call to that the user can edit the number before calling if needed.
+     * @default false
+     *
+     */
+    enableInputEditing?: boolean;
 }
 
 /**

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

@@ -17,7 +17,7 @@ var reactFileTypeIcons = require('@fluentui/react-file-type-icons');
 var uuid = require('uuid');
 var reactChat = require('@fluentui-contrib/react-chat');
 var react$1 = require('@griffel/react');
-var htmlToReact = require('html-to-react');
+var parse = require('html-react-parser');
 var Linkify = require('react-linkify');
 var DOMPurify = require('dompurify');
 var reactHooks = require('@fluentui/react-hooks');
@@ -170,7 +170,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.11.1-alpha-202401090013';
+var telemetryVersion = '1.11.1-alpha-202401110013';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -10413,76 +10413,54 @@ const messageContentAriaText = (props) => {
             })
         : undefined;
 };
-const processNodeDefinitions = htmlToReact.ProcessNodeDefinitions();
-const htmlToReactParser = htmlToReact.Parser();
-const processInlineImage = (props) => ({
-    // Custom <img> processing
-    shouldProcessNode: (node) => {
-        var _a;
-        function matchingImageNode(imageMetadata) {
-            return imageMetadata.id === node.attribs.id;
-        }
-        // Process img node with id in attachments list
-        return (node.name &&
-            node.name === 'img' &&
-            node.attribs &&
-            node.attribs.id &&
-            ((_a = props.message.inlineImages) === null || _a === void 0 ? void 0 : _a.find(matchingImageNode)));
-    },
-    processNode: (node, children, index) => {
-        node.attribs = Object.assign(Object.assign({}, node.attribs), { 'aria-label': node.attribs.name });
-        // logic to check id in map/list
-        if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {
-            node.attribs = Object.assign(Object.assign({}, node.attribs), { src: props.attachmentsMap[node.attribs.id] });
-        }
-        const handleOnClick = () => {
-            props.onInlineImageClicked && props.onInlineImageClicked(node.attribs.id);
-        };
-        return (React.createElement("span", { "data-ui-id": node.attribs.id, onClick: handleOnClick, tabIndex: 0, role: "button", style: {
-                cursor: 'pointer'
-            }, onKeyDown: (e) => {
-                if (e.key === 'Enter') {
-                    handleOnClick();
-                }
-            } }, processNodeDefinitions.processDefaultNode(node, children, index)));
-    }
-});
-/* @conditional-compile-remove(mention) */
-const processMention = (props) => ({
-    shouldProcessNode: (node) => {
-        var _a;
-        if ((_a = props.mentionDisplayOptions) === null || _a === void 0 ? void 0 : _a.onRenderMention) {
-            // Override the handling of the <msft-mention> tag in the HTML if there's a custom renderer
-            return node.name === 'msft-mention';
-        }
-        return false;
-    },
-    processNode: (node) => {
-        var _a, _b, _c;
-        if ((_a = props.mentionDisplayOptions) === null || _a === void 0 ? void 0 : _a.onRenderMention) {
-            const { id } = node.attribs;
-            const mention = {
-                id: id,
-                displayText: (_c = (_b = node.children[0]) === null || _b === void 0 ? void 0 : _b.data) !== null && _c !== void 0 ? _c : ''
-            };
-            return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);
-        }
-        return processNodeDefinitions.processDefaultNode;
-    }
-});
 const processHtmlToReact = (props) => {
     var _a;
-    const steps = [
-        processInlineImage(props),
-        /* @conditional-compile-remove(mention) */
-        processMention(props),
-        {
-            // Process everything else in the default way
-            shouldProcessNode: htmlToReact.IsValidNodeDefinitions.alwaysValid,
-            processNode: processNodeDefinitions.processDefaultNode
+    const options = {
+        transform(reactNode, domNode) {
+            var _a, _b, _c;
+            if (domNode instanceof parse.Element && domNode.attribs) {
+                // Transform custom rendering of mentions
+                /* @conditional-compile-remove(mention) */
+                if (((_a = props.mentionDisplayOptions) === null || _a === void 0 ? void 0 : _a.onRenderMention) && domNode.name === 'msft-mention') {
+                    const { id } = domNode.attribs;
+                    const mention = {
+                        id: id,
+                        displayText: (_b = domNode.children[0].nodeValue) !== null && _b !== void 0 ? _b : ''
+                    };
+                    return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);
+                }
+                // Transform inline images
+                if (domNode.name &&
+                    domNode.name === 'img' &&
+                    domNode.attribs &&
+                    domNode.attribs.id &&
+                    ((_c = props.message.inlineImages) === null || _c === void 0 ? void 0 : _c.find((metadata) => {
+                        return metadata.id === domNode.attribs.id;
+                    }))) {
+                    domNode.attribs['aria-label'] = domNode.attribs.name;
+                    // logic to check id in map/list
+                    if (props.attachmentsMap && domNode.attribs.id in props.attachmentsMap) {
+                        domNode.attribs.src = props.attachmentsMap[domNode.attribs.id];
+                    }
+                    const handleOnClick = () => {
+                        props.onInlineImageClicked && props.onInlineImageClicked(domNode.attribs.id);
+                    };
+                    const imgProps = parse.attributesToProps(domNode.attribs);
+                    return (React.createElement("span", { "data-ui-id": domNode.attribs.id, onClick: handleOnClick, tabIndex: 0, role: "button", style: {
+                            cursor: 'pointer'
+                        }, onKeyDown: (e) => {
+                            if (e.key === 'Enter') {
+                                handleOnClick();
+                            }
+                        } },
+                        React.createElement("img", Object.assign({}, imgProps))));
+                }
+            }
+            // Pass through the original node
+            return reactNode;
         }
-    ];
-    return htmlToReactParser.parseWithInstructions((_a = props.message.content) !== null && _a !== void 0 ? _a : '', htmlToReact.IsValidNodeDefinitions.alwaysValid, steps);
+    };
+    return React.createElement(React.Fragment, null, parse((_a = props.message.content) !== null && _a !== void 0 ? _a : '', options));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -17946,12 +17924,8 @@ const DtmfTones = [
 const DialpadButton = (props) => {
     var _a, _b, _c, _d;
     const theme = react.useTheme();
-    const { digit, index, onClick, onLongPress, isMobile = false, 
-    /* @conditional-compile-remove(dtmf-dialer) */ dtmfToneAudioContext, 
-    /* @conditional-compile-remove(dtmf-dialer) */ disableDtmfPlayback } = props;
-    /* @conditional-compile-remove(dtmf-dialer) */
+    const { digit, index, onClick, onLongPress, isMobile = false, dtmfToneAudioContext, disableDtmfPlayback } = props;
     const [buttonPressed, setButtonPressed] = React.useState(false);
-    /* @conditional-compile-remove(dtmf-dialer) */
     const dtmfToneSound = React.useRef(new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2));
     const useLongPressProps = React.useMemo(() => ({
         onClick: () => __awaiter$s(void 0, void 0, void 0, function* () {
@@ -17964,7 +17938,6 @@ const DialpadButton = (props) => {
     }), [digit, index, isMobile, 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) => {
-            /* @conditional-compile-remove(dtmf-dialer) */
             if ((e.key === 'Enter' || e.key === ' ') && !buttonPressed) {
                 if (!disableDtmfPlayback) {
                     dtmfToneSound.current.play();
@@ -17975,7 +17948,6 @@ const DialpadButton = (props) => {
             }
             longPressHandlers.onKeyDown();
         }, onKeyUp: (e) => {
-            /* @conditional-compile-remove(dtmf-dialer) */
             if ((e.key === 'Enter' || e.key === ' ') && buttonPressed) {
                 dtmfToneSound.current.stop();
                 longPressHandlers.onKeyUp();
@@ -17983,26 +17955,21 @@ const DialpadButton = (props) => {
             }
             longPressHandlers.onKeyUp();
         }, onMouseDown: () => {
-            /* @conditional-compile-remove(dtmf-dialer) */
             if (!disableDtmfPlayback) {
                 dtmfToneSound.current.play();
             }
             longPressHandlers.onMouseDown();
         }, onMouseUp: () => {
-            /* @conditional-compile-remove(dtmf-dialer) */
             dtmfToneSound.current.stop();
             longPressHandlers.onMouseUp();
         }, onMouseLeave: () => {
-            /* @conditional-compile-remove(dtmf-dialer) */
             dtmfToneSound.current.stop();
         }, onTouchStart: () => {
-            /* @conditional-compile-remove(dtmf-dialer) */
             if (!disableDtmfPlayback) {
                 dtmfToneSound.current.play();
             }
             longPressHandlers.onTouchStart();
         }, onTouchEnd: () => {
-            /* @conditional-compile-remove(dtmf-dialer) */
             dtmfToneSound.current.stop();
             longPressHandlers.onTouchEnd();
         } }),
@@ -18013,9 +17980,8 @@ const DialpadButton = (props) => {
 const DialpadContainer = (props) => {
     var _a, _b;
     const theme = react.useTheme();
-    const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true, isMobile = false } = props;
+    const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true, isMobile = false, disableDtmfPlayback, enableInputEditing } = props;
     const [plainTextValue, setPlainTextValue] = React.useState(textFieldValue !== null && textFieldValue !== void 0 ? textFieldValue : '');
-    /* @conditional-compile-remove(dtmf-dialer) */
     const dtmfToneAudioContext = React.useRef(new AudioContext());
     React.useEffect(() => {
         if (onChange) {
@@ -18059,18 +18025,16 @@ const DialpadContainer = (props) => {
         setText(modifiedInput);
     };
     return (React.createElement("div", { 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" },
-        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), 
+        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, 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             onChange: (e) => {
-                setText(e.target.value);
-            }, 
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            onClick: (e) => {
-                const input = e.target;
-                const end = input.value.length;
-                // Move focus to end of input field
-                input.setSelectionRange(end, end);
-                input.focus();
+                if (enableInputEditing) {
+                    setText(e.target.value);
+                }
+            }, onClick: (e) => {
+                if (!enableInputEditing) {
+                    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' } }))));
@@ -18094,11 +18058,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, 
-                /* @conditional-compile-remove(dtmf-dialer) */
-                dtmfToneAudioContext: dtmfToneAudioContext.current, 
-                /* @conditional-compile-remove(dtmf-dialer) */
-                disableDtmfPlayback: props.disableDtmfPlayback })))));
+                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 })))));
         }))));
 };
 /**
@@ -21025,12 +20985,12 @@ const accessErrorTargets = [
 ];
 const latestUnableToReachChatServiceError = (latestErrors) => {
     return latestActiveErrorSatisfying(latestErrors, 'unableToReachChatService', (error) => {
-        return !!error && !!error.innerError && error.innerError['code'] === 'REQUEST_SEND_ERROR';
+        return (!!error && !!error.innerError && 'code' in error.innerError && error.innerError.code === 'REQUEST_SEND_ERROR');
     });
 };
 const latestAccessDeniedError = (latestErrors) => {
     return latestActiveErrorSatisfying(latestErrors, 'accessDenied', (error) => {
-        return !!error && !!error.innerError && error.innerError['statusCode'] === 401;
+        return !!error && !!error.innerError && 'statusCode' in error.innerError && error.innerError.statusCode === 401;
     });
 };
 const latestNotInThisThreadError = (latestErrors) => {
@@ -21047,11 +21007,12 @@ const latestNotInThisThreadError = (latestErrors) => {
         }
         // Chat service returns 403 if a user has been removed from a thread.
         // Chat service returns either 400 or 404 if the thread ID is malformed, depending on how the thread ID is malformed.
-        return [400, 403, 404].some((statusCode) => error.innerError['statusCode'] === statusCode);
+        return [400, 403, 404].some((statusCode) => 'statusCode' in error.innerError && error.innerError.statusCode === statusCode);
     });
 };
 const botContactMRIPrefix = '28:';
-const isErrorDueToBotContact = (error) => error.innerError['statusCode'] === 400 &&
+const isErrorDueToBotContact = (error) => 'statusCode' in error.innerError &&
+    error.innerError.statusCode === 400 &&
     error.innerError.message.includes(`Identifier format is not supported (${botContactMRIPrefix}`);
 const latestActiveErrorSatisfying = (errors, activeErrorType, predicate) => {
     const activeErrorMessages = [];
@@ -22821,17 +22782,11 @@ class AzureCommunicationChatAdapter {
         return __awaiter$k(this, void 0, void 0, function* () {
             return this.asyncTeeErrorToEventEmitter(() => __awaiter$k(this, void 0, void 0, function* () {
                 if (this.credential === undefined) {
-                    const e = new Error();
-                    e['target'] = 'ChatThreadClient.getMessage';
-                    e['innerError'] = new Error('AccessToken is null');
-                    throw e;
+                    throw new ChatError('ChatThreadClient.getMessage', new Error('AccessToken is null'));
                 }
                 const accessToken = yield this.credential.getToken();
                 if (!accessToken) {
-                    const e = new Error();
-                    e['target'] = 'ChatThreadClient.getMessage';
-                    e['innerError'] = new Error('AccessToken is null');
-                    throw e;
+                    throw new ChatError('ChatThreadClient.getMessage', new Error('AccessToken is null'));
                 }
                 return this.downloadAuthenticatedFile(accessToken.token, options);
             }));
@@ -22847,10 +22802,7 @@ class AzureCommunicationChatAdapter {
                         return yield fetch(url, { headers });
                     }
                     catch (err) {
-                        const e = new Error();
-                        e['target'] = 'ChatThreadClient.getMessage';
-                        e['innerError'] = err;
-                        throw e;
+                        throw new ChatError('ChatThreadClient.getMessage', err);
                     }
                 });
             }
@@ -22963,10 +22915,10 @@ const convertEventToChatMessage = (event) => {
     };
 };
 const isChatMessageEditedEvent = (event) => {
-    return event['editedOn'] !== undefined;
+    return 'editedOn' in event;
 };
 const isChatMessageDeletedEvent = (event) => {
-    return event['deletedOn'] !== undefined;
+    return 'deletedOn' in event;
 };
 // only text/html message type will be received from event
 const convertEventType = (type) => {
@@ -23119,7 +23071,7 @@ function createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadCli
     });
 }
 const isChatError = (e) => {
-    return e['target'] !== undefined && e['innerError'] !== undefined;
+    return 'target' in e && e['target'] !== undefined && 'innerError' in e && e['innerError'] !== undefined;
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -33586,7 +33538,7 @@ const NotificationIcon = (props) => {
         }
         else {
             const textNumberOfMessages = numberOfMessages < 9 ? numberOfMessages : '9+';
-            return (React.createElement(react.Text, { role: 'status', "aria-label": textNumberOfMessages + label, styles: notificationTextStyles(theme) }, textNumberOfMessages));
+            return (React.createElement(react.Text, { role: 'status', "aria-label": textNumberOfMessages + (label !== null && label !== void 0 ? label : ''), styles: notificationTextStyles(theme) }, textNumberOfMessages));
         }
     };
     return (React.createElement(react.Stack, { "data-ui-id": "call-with-chat-composite-chat-button-unread-icon", horizontalAlign: "center", verticalAlign: "center", styles: notificationIconContainerStyles(theme) },