@microsoft/omnichannel-chat-components 0.1.0-main.cb39af7 → 0.1.0-main.d066b23

package/lib/cjs/components/callingcontainer/subcomponents/IncomingCall/IncomingCall.js

@@ -137,7 +137,9 @@ function IncomingCall(props) {
     className: (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : _props$styleProps10.className,
     horizontalAlign: "space-between",
     styles: stackStyles,
-    dir: ((_props$controlProps18 = props.controlProps) === null || _props$controlProps18 === void 0 ? void 0 : _props$controlProps18.dir) ?? ((_defaultIncomingCallP27 = _defaultIncomingCallProps.defaultIncomingCallProps.controlProps) === null || _defaultIncomingCallP27 === void 0 ? void 0 : _defaultIncomingCallP27.dir)
+    dir: ((_props$controlProps18 = props.controlProps) === null || _props$controlProps18 === void 0 ? void 0 : _props$controlProps18.dir) ?? ((_defaultIncomingCallP27 = _defaultIncomingCallProps.defaultIncomingCallProps.controlProps) === null || _defaultIncomingCallP27 === void 0 ? void 0 : _defaultIncomingCallP27.dir),
+    role: "alert",
+    "aria-label": incomingCallTitleProps === null || incomingCallTitleProps === void 0 ? void 0 : incomingCallTitleProps.text
   }, /*#__PURE__*/React.createElement(_react2.Stack, {
     horizontal: true,
     id: "incomingCallLeftGroup",

package/lib/cjs/components/confirmationpane/ConfirmationPane.js

@@ -80,6 +80,12 @@ function ConfirmationPane(props) {
 
       (_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.onCancel();
     }
+  }, []); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const handleEscKeyDown = (0, _react2.useCallback)(e => {
+    if (e.code === _Constants.KeyCodes.ESCAPE) {
+      handleCancelClick();
+    }
   }, []);
   const containerStyles = {
     root: Object.assign({}, _defaultConfirmationPaneGeneralStyles.defaultConfirmationPaneGeneralStyles, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps)
@@ -107,6 +113,7 @@ function ConfirmationPane(props) {
   };
   return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, !((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.hideConfirmationPane) && /*#__PURE__*/_react2.default.createElement(_react.Stack, {
     id: elementId,
+    onKeyDown: handleEscKeyDown,
     tabIndex: -1,
     dir: ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.dir) || _defaultConfirmationPaneControlProps.defaultConfirmationPaneControlProps.dir,
     styles: containerStyles,

package/lib/cjs/components/inputvalidationpane/InputValidationPane.js

@@ -55,23 +55,28 @@ function InputValidationPane(props) {
   const [isInitialRendering, setIsInitialRendering] = (0, _react2.useState)(true);
   const [isInvalidInput, setIsInvalidInput] = (0, _react2.useState)(false);
   const [isSendButtonEnabled, setIsSendButtonEnabled] = (0, _react2.useState)(false);
-
-  const isValidInput = () => {
+  const isValidInput = (0, _react2.useCallback)(() => {
     var _props$controlProps2, _props$controlProps3;
 
-    return (_props$controlProps2 = props.controlProps) !== null && _props$controlProps2 !== void 0 && _props$controlProps2.checkInput ? inputValue && ((_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.checkInput(inputValue)) : true;
-  }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (!((_props$controlProps2 = props.controlProps) !== null && _props$controlProps2 !== void 0 && _props$controlProps2.checkInput)) {
+      return true;
+    }
+
+    if (!inputValue) {
+      return false;
+    }
 
+    return (_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.checkInput(inputValue);
+  }, [inputValue]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-  const handleInputChange = e => {
+  const handleInputChange = (0, _react2.useCallback)(e => {
     var _props$controlProps4, _props$controlProps5;
 
     setInputValue(e.target.value);
     e.target.value ? setIsSendButtonEnabled(((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : _props$controlProps4.enableSendButton) || e.target.value !== "") : setIsSendButtonEnabled(((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.enableSendButton) ?? false);
     setIsInvalidInput(false);
-  };
-
-  const send = (controlId, suffix) => {
+  }, []);
+  const send = (0, _react2.useCallback)((controlId, suffix) => {
     var _props$controlProps6;
 
     if ((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.onSend) {
@@ -90,20 +95,17 @@ function InputValidationPane(props) {
         setIsInvalidInput(true);
       }
     }
-  }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  }, [inputValue]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-
-  const handleInputKeyDown = e => {
+  const handleInputKeyUp = (0, _react2.useCallback)(e => {
     if (e.code === _Constants.KeyCodes.ENTER) {
-      send(elementId + "-textField", "KeyDown");
+      send(elementId + "-textField", "KeyUp");
     }
-  };
-
-  const handleSendClick = () => {
+  }, [inputValue]);
+  const handleSendClick = (0, _react2.useCallback)(() => {
     send(elementId + "-sendbutton", "Click");
-  };
-
-  const cancel = (controlId, suffix) => {
+  }, [inputValue]);
+  const cancel = (0, _react2.useCallback)((controlId, suffix) => {
     var _props$controlProps8;
 
     if ((_props$controlProps8 = props.controlProps) !== null && _props$controlProps8 !== void 0 && _props$controlProps8.onCancel) {
@@ -121,19 +123,16 @@ function InputValidationPane(props) {
 
       (_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.onCancel();
     }
-  }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+  }, []); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-  const handleEscKeyDown = e => {
+  const handleEscKeyDown = (0, _react2.useCallback)(e => {
     if (e.code === _Constants.KeyCodes.ESCAPE) {
       cancel(elementId, "KeyDown");
     }
-  };
-
-  const handleCancelClick = () => {
+  }, []);
+  const handleCancelClick = (0, _react2.useCallback)(() => {
     cancel(elementId + "-cancelbutton", "Click");
-  };
-
+  }, []);
   (0, _react2.useEffect)(() => {
     var _props$controlProps11, _props$controlProps12, _props$controlProps13;
 
@@ -160,7 +159,8 @@ function InputValidationPane(props) {
   const redBorderStyles = {
     borderColor: ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.inputWithErrorMessageBorderColor) ?? _defaultInputValidationPaneControlProps.defaultInputValidationPaneControlProps.inputWithErrorMessageBorderColor,
     borderRadius: "1px",
-    borderStyle: "solid"
+    borderStyle: "solid",
+    borderWidth: "1px"
   };
   const inputStyles = {
     root: Object.assign({}, _defaultInputValidationPaneInputStyles.defaultInputValidationPaneInputStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.inputStyleProps),
@@ -244,7 +244,7 @@ function InputValidationPane(props) {
     ariaLabel: ((_props$controlProps24 = props.controlProps) === null || _props$controlProps24 === void 0 ? void 0 : _props$controlProps24.inputAriaLabel) || _defaultInputValidationPaneControlProps.defaultInputValidationPaneControlProps.inputAriaLabel,
     borderless: isInvalidInput,
     onChange: handleInputChange,
-    onKeyDown: handleInputKeyDown
+    onKeyUp: handleInputKeyUp
   })), isInvalidInput && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.invalidInputErrorMessage) || /*#__PURE__*/_react2.default.createElement(_react.Stack, {
     className: (_props$styleProps22 = props.styleProps) === null || _props$styleProps22 === void 0 ? void 0 : (_props$styleProps22$c = _props$styleProps22.classNames) === null || _props$styleProps22$c === void 0 ? void 0 : _props$styleProps22$c.invalidInputErrorMessageClassName,
     styles: invalidInputErrorMessageStyles,

package/lib/cjs/components/inputvalidationpane/common/default/defaultStyles/defaultInputValidationPaneCancelButtonStyles.js

@@ -16,6 +16,7 @@ const defaultInputValidationPaneCancelButtonStyles = {
   fontWeight: "500",
   lineHeight: "19px",
   textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
+  whiteSpace: "nowrap",
+  width: "80px"
 };
 exports.defaultInputValidationPaneCancelButtonStyles = defaultInputValidationPaneCancelButtonStyles;

package/lib/cjs/components/inputvalidationpane/common/default/defaultStyles/defaultInputValidationPaneInvalidInputErrorMessageStyles.js

@@ -8,7 +8,7 @@ const defaultInputValidationPaneInvalidInputErrorMessageStyles = {
   color: "#a4262c",
   fontFamily: "'Segoe UI', Arial, sans-serif",
   fontSize: "12px",
-  height: "16px,",
+  height: "16px",
   lineHeight: "16px",
   marginTop: "4px"
 };

package/lib/cjs/components/inputvalidationpane/common/default/defaultStyles/defaultInputValidationPaneSendButtonStyles.js

@@ -12,6 +12,7 @@ const defaultInputValidationPaneSendButtonStyles = {
   fontWeight: "500",
   lineHeight: "19px",
   textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
+  whiteSpace: "nowrap",
+  width: "80px"
 };
 exports.defaultInputValidationPaneSendButtonStyles = defaultInputValidationPaneSendButtonStyles;

package/lib/cjs/components/prechatsurveypane/PreChatSurveyPane.js

@@ -82,6 +82,7 @@ function PreChatSurveyPane(props) {
     }
   }, []); //Adaptive Card Initilializations
 
+  AdaptiveCards.GlobalSettings.setTabIndexAtCardRoot = false;
   const adaptiveCard = new AdaptiveCards.AdaptiveCard();
   adaptiveCard.hostConfig = new AdaptiveCards.HostConfig(adaptiveCardHostConfig);
   adaptiveCard.parse(adpativeCardPayload);

package/lib/esm/components/callingcontainer/subcomponents/IncomingCall/IncomingCall.js

@@ -119,7 +119,9 @@ function IncomingCall(props) {
     className: (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : _props$styleProps10.className,
     horizontalAlign: "space-between",
     styles: stackStyles,
-    dir: ((_props$controlProps18 = props.controlProps) === null || _props$controlProps18 === void 0 ? void 0 : _props$controlProps18.dir) ?? ((_defaultIncomingCallP27 = defaultIncomingCallProps.controlProps) === null || _defaultIncomingCallP27 === void 0 ? void 0 : _defaultIncomingCallP27.dir)
+    dir: ((_props$controlProps18 = props.controlProps) === null || _props$controlProps18 === void 0 ? void 0 : _props$controlProps18.dir) ?? ((_defaultIncomingCallP27 = defaultIncomingCallProps.controlProps) === null || _defaultIncomingCallP27 === void 0 ? void 0 : _defaultIncomingCallP27.dir),
+    role: "alert",
+    "aria-label": incomingCallTitleProps === null || incomingCallTitleProps === void 0 ? void 0 : incomingCallTitleProps.text
   }, /*#__PURE__*/React.createElement(Stack, {
     horizontal: true,
     id: "incomingCallLeftGroup",

package/lib/esm/components/confirmationpane/ConfirmationPane.js

@@ -2,7 +2,7 @@ import { DefaultButton, PrimaryButton } from "@fluentui/react/lib/Button";
 import { Label, Stack } from "@fluentui/react";
 import React, { useCallback } from "react";
 import { BroadcastService } from "../../services/BroadcastService";
-import { ElementType } from "../../common/Constants";
+import { ElementType, KeyCodes } from "../../common/Constants";
 import { decodeComponentString } from "../../common/decodeComponentString";
 import { defaultConfirmationPaneButtonGroupStyles } from "./common/defaultStyles/defaultConfirmationPaneButtonGroupStyles";
 import { defaultConfirmationPaneCancelButtonHoveredStyles } from "./common/defaultStyles/defaultConfirmationPaneCancelButtonHoveredStyles";
@@ -49,6 +49,12 @@ function ConfirmationPane(props) {
       BroadcastService.postMessage(customEvent);
       (_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.onCancel();
     }
+  }, []); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const handleEscKeyDown = useCallback(e => {
+    if (e.code === KeyCodes.ESCAPE) {
+      handleCancelClick();
+    }
   }, []);
   const containerStyles = {
     root: Object.assign({}, defaultConfirmationPaneGeneralStyles, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps)
@@ -76,6 +82,7 @@ function ConfirmationPane(props) {
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, !((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.hideConfirmationPane) && /*#__PURE__*/React.createElement(Stack, {
     id: elementId,
+    onKeyDown: handleEscKeyDown,
     tabIndex: -1,
     dir: ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.dir) || defaultConfirmationPaneControlProps.dir,
     styles: containerStyles,

package/lib/esm/components/inputvalidationpane/InputValidationPane.js

@@ -1,6 +1,6 @@
 import { DefaultButton, PrimaryButton } from "@fluentui/react/lib/Button";
 import { Label, Stack, TextField } from "@fluentui/react";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { BroadcastService } from "../../services/BroadcastService";
 import { KeyCodes } from "../../common/Constants";
 import { decodeComponentString } from "../../common/decodeComponentString";
@@ -26,23 +26,28 @@ function InputValidationPane(props) {
   const [isInitialRendering, setIsInitialRendering] = useState(true);
   const [isInvalidInput, setIsInvalidInput] = useState(false);
   const [isSendButtonEnabled, setIsSendButtonEnabled] = useState(false);
-
-  const isValidInput = () => {
+  const isValidInput = useCallback(() => {
     var _props$controlProps2, _props$controlProps3;
 
-    return (_props$controlProps2 = props.controlProps) !== null && _props$controlProps2 !== void 0 && _props$controlProps2.checkInput ? inputValue && ((_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.checkInput(inputValue)) : true;
-  }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (!((_props$controlProps2 = props.controlProps) !== null && _props$controlProps2 !== void 0 && _props$controlProps2.checkInput)) {
+      return true;
+    }
+
+    if (!inputValue) {
+      return false;
+    }
 
+    return (_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.checkInput(inputValue);
+  }, [inputValue]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-  const handleInputChange = e => {
+  const handleInputChange = useCallback(e => {
     var _props$controlProps4, _props$controlProps5;
 
     setInputValue(e.target.value);
     e.target.value ? setIsSendButtonEnabled(((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : _props$controlProps4.enableSendButton) || e.target.value !== "") : setIsSendButtonEnabled(((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.enableSendButton) ?? false);
     setIsInvalidInput(false);
-  };
-
-  const send = (controlId, suffix) => {
+  }, []);
+  const send = useCallback((controlId, suffix) => {
     var _props$controlProps6;
 
     if ((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.onSend) {
@@ -59,20 +64,17 @@ function InputValidationPane(props) {
         setIsInvalidInput(true);
       }
     }
-  }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  }, [inputValue]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-
-  const handleInputKeyDown = e => {
+  const handleInputKeyUp = useCallback(e => {
     if (e.code === KeyCodes.ENTER) {
-      send(elementId + "-textField", "KeyDown");
+      send(elementId + "-textField", "KeyUp");
     }
-  };
-
-  const handleSendClick = () => {
+  }, [inputValue]);
+  const handleSendClick = useCallback(() => {
     send(elementId + "-sendbutton", "Click");
-  };
-
-  const cancel = (controlId, suffix) => {
+  }, [inputValue]);
+  const cancel = useCallback((controlId, suffix) => {
     var _props$controlProps8;
 
     if ((_props$controlProps8 = props.controlProps) !== null && _props$controlProps8 !== void 0 && _props$controlProps8.onCancel) {
@@ -88,19 +90,16 @@ function InputValidationPane(props) {
       BroadcastService.postMessage(customEvent);
       (_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.onCancel();
     }
-  }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+  }, []); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-  const handleEscKeyDown = e => {
+  const handleEscKeyDown = useCallback(e => {
     if (e.code === KeyCodes.ESCAPE) {
       cancel(elementId, "KeyDown");
     }
-  };
-
-  const handleCancelClick = () => {
+  }, []);
+  const handleCancelClick = useCallback(() => {
     cancel(elementId + "-cancelbutton", "Click");
-  };
-
+  }, []);
   useEffect(() => {
     var _props$controlProps11, _props$controlProps12, _props$controlProps13;
 
@@ -127,7 +126,8 @@ function InputValidationPane(props) {
   const redBorderStyles = {
     borderColor: ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.inputWithErrorMessageBorderColor) ?? defaultInputValidationPaneControlProps.inputWithErrorMessageBorderColor,
     borderRadius: "1px",
-    borderStyle: "solid"
+    borderStyle: "solid",
+    borderWidth: "1px"
   };
   const inputStyles = {
     root: Object.assign({}, defaultInputValidationPaneInputStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.inputStyleProps),
@@ -211,7 +211,7 @@ function InputValidationPane(props) {
     ariaLabel: ((_props$controlProps24 = props.controlProps) === null || _props$controlProps24 === void 0 ? void 0 : _props$controlProps24.inputAriaLabel) || defaultInputValidationPaneControlProps.inputAriaLabel,
     borderless: isInvalidInput,
     onChange: handleInputChange,
-    onKeyDown: handleInputKeyDown
+    onKeyUp: handleInputKeyUp
   })), isInvalidInput && (decodeComponentString((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.invalidInputErrorMessage) || /*#__PURE__*/React.createElement(Stack, {
     className: (_props$styleProps22 = props.styleProps) === null || _props$styleProps22 === void 0 ? void 0 : (_props$styleProps22$c = _props$styleProps22.classNames) === null || _props$styleProps22$c === void 0 ? void 0 : _props$styleProps22$c.invalidInputErrorMessageClassName,
     styles: invalidInputErrorMessageStyles,

package/lib/esm/components/inputvalidationpane/common/default/defaultStyles/defaultInputValidationPaneCancelButtonStyles.js

@@ -10,5 +10,6 @@ export const defaultInputValidationPaneCancelButtonStyles = {
   fontWeight: "500",
   lineHeight: "19px",
   textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
+  whiteSpace: "nowrap",
+  width: "80px"
 };

package/lib/esm/components/inputvalidationpane/common/default/defaultStyles/defaultInputValidationPaneInvalidInputErrorMessageStyles.js

@@ -2,7 +2,7 @@ export const defaultInputValidationPaneInvalidInputErrorMessageStyles = {
   color: "#a4262c",
   fontFamily: "'Segoe UI', Arial, sans-serif",
   fontSize: "12px",
-  height: "16px,",
+  height: "16px",
   lineHeight: "16px",
   marginTop: "4px"
 };

package/lib/esm/components/inputvalidationpane/common/default/defaultStyles/defaultInputValidationPaneSendButtonStyles.js

@@ -6,5 +6,6 @@ export const defaultInputValidationPaneSendButtonStyles = {
   fontWeight: "500",
   lineHeight: "19px",
   textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
+  whiteSpace: "nowrap",
+  width: "80px"
 };

package/lib/esm/components/prechatsurveypane/PreChatSurveyPane.js

@@ -60,6 +60,7 @@ function PreChatSurveyPane(props) {
     }
   }, []); //Adaptive Card Initilializations
 
+  AdaptiveCards.GlobalSettings.setTabIndexAtCardRoot = false;
   const adaptiveCard = new AdaptiveCards.AdaptiveCard();
   adaptiveCard.hostConfig = new AdaptiveCards.HostConfig(adaptiveCardHostConfig);
   adaptiveCard.parse(adpativeCardPayload);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/omnichannel-chat-components",
-  "version": "0.1.0-main.cb39af7",
+  "version": "0.1.0-main.d066b23",
   "description": "Microsoft Omnichannel Chat Components",
   "main": "lib/cjs/index.js",
   "types": "lib/types/index.d.ts",