@microsoft/omnichannel-chat-components 0.1.0-main.99bac9c → 0.1.0-main.a7ac5de

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/lib/cjs/components/common/commandbutton/CommandButton.js +23 -15
  2. package/lib/cjs/components/confirmationpane/ConfirmationPane.js +7 -0
  3. package/lib/cjs/components/footer/Footer.js +1 -1
  4. package/lib/cjs/components/footer/common/defaultProps/defaultFooterControlProps.js +1 -0
  5. package/lib/cjs/components/footer/common/defaultStyles/defaultFooterStyleProps.js +12 -6
  6. package/lib/cjs/components/footer/subcomponents/AudioNotificationButton.js +20 -16
  7. package/lib/cjs/components/inputvalidationpane/InputValidationPane.js +28 -28
  8. package/lib/cjs/components/inputvalidationpane/common/default/defaultStyles/defaultInputValidationPaneCancelButtonStyles.js +2 -1
  9. package/lib/cjs/components/inputvalidationpane/common/default/defaultStyles/defaultInputValidationPaneInvalidInputErrorMessageStyles.js +1 -1
  10. package/lib/cjs/components/inputvalidationpane/common/default/defaultStyles/defaultInputValidationPaneSendButtonStyles.js +2 -1
  11. package/lib/cjs/components/postchatsurveypane/PostChatSurveyPane.js +2 -1
  12. package/lib/cjs/components/prechatsurveypane/PreChatSurveyPane.js +1 -0
  13. package/lib/esm/components/common/commandbutton/CommandButton.js +23 -15
  14. package/lib/esm/components/confirmationpane/ConfirmationPane.js +8 -1
  15. package/lib/esm/components/footer/Footer.js +1 -1
  16. package/lib/esm/components/footer/common/defaultProps/defaultFooterControlProps.js +1 -0
  17. package/lib/esm/components/footer/common/defaultStyles/defaultFooterStyleProps.js +12 -6
  18. package/lib/esm/components/footer/subcomponents/AudioNotificationButton.js +20 -16
  19. package/lib/esm/components/inputvalidationpane/InputValidationPane.js +29 -29
  20. package/lib/esm/components/inputvalidationpane/common/default/defaultStyles/defaultInputValidationPaneCancelButtonStyles.js +2 -1
  21. package/lib/esm/components/inputvalidationpane/common/default/defaultStyles/defaultInputValidationPaneInvalidInputErrorMessageStyles.js +1 -1
  22. package/lib/esm/components/inputvalidationpane/common/default/defaultStyles/defaultInputValidationPaneSendButtonStyles.js +2 -1
  23. package/lib/esm/components/postchatsurveypane/PostChatSurveyPane.js +2 -1
  24. package/lib/esm/components/prechatsurveypane/PreChatSurveyPane.js +1 -0
  25. package/package.json +1 -1
package/lib/cjs/components/common/commandbutton/CommandButton.js CHANGED
@@ -18,7 +18,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
18
18
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
19
 
20
20
  function CommandButton(props) {
21
- var _props$styles, _props$styles2, _props$styles3, _props$hoverStyles, _props$focusStyles;
21
+ var _props$hoverStyles, _props$hoverStyles2, _props$focusStyles;
22
22
 
23
23
  //imageIconProps > iconName
24
24
  const iconProp = props.imageIconProps ? {
@@ -26,25 +26,33 @@ function CommandButton(props) {
26
26
  } : {
27
27
  iconName: props.iconName
28
28
  };
29
+ let iconStyles = {};
30
+
31
+ if (props.type === "icon") {
32
+ var _props$styles;
33
+
34
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
35
+ iconStyles = { ...(props === null || props === void 0 ? void 0 : (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.icon)
36
+ };
37
+ }
38
+
29
39
  const buttonStyles = {
30
- icon: props.styles,
40
+ icon: { ...iconStyles
41
+ },
31
42
  root: {
32
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
33
- width: props === null || props === void 0 ? void 0 : (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.width,
34
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
35
- height: props === null || props === void 0 ? void 0 : (_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.height,
36
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
37
- backgroundColor: props === null || props === void 0 ? void 0 : (_props$styles3 = props.styles) === null || _props$styles3 === void 0 ? void 0 : _props$styles3.backgroundColor,
38
43
  selectors: {
39
- ":hover .ms-Button-icon": {
40
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
41
- color: props === null || props === void 0 ? void 0 : (_props$hoverStyles = props.hoverStyles) === null || _props$hoverStyles === void 0 ? void 0 : _props$hoverStyles.color
44
+ ":hover .ms-Button-icon": { // eslint-disable-next-line @typescript-eslint/no-explicit-any
45
+ ...(props === null || props === void 0 ? void 0 : (_props$hoverStyles = props.hoverStyles) === null || _props$hoverStyles === void 0 ? void 0 : _props$hoverStyles.icon)
42
46
  },
43
- ":active .ms-Button-icon": {
44
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
45
- color: props === null || props === void 0 ? void 0 : (_props$focusStyles = props.focusStyles) === null || _props$focusStyles === void 0 ? void 0 : _props$focusStyles.color
47
+ ":active .ms-Button-icon": { // eslint-disable-next-line @typescript-eslint/no-explicit-any
48
+ ...(props === null || props === void 0 ? void 0 : (_props$hoverStyles2 = props.hoverStyles) === null || _props$hoverStyles2 === void 0 ? void 0 : _props$hoverStyles2.icon)
49
+ },
50
+ ":focus .ms-Button-icon": { // eslint-disable-next-line @typescript-eslint/no-explicit-any
51
+ ...(props === null || props === void 0 ? void 0 : (_props$focusStyles = props.focusStyles) === null || _props$focusStyles === void 0 ? void 0 : _props$focusStyles.icon)
46
52
  }
47
- }
53
+ },
54
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
55
+ ...(props === null || props === void 0 ? void 0 : props.styles)
48
56
  },
49
57
  rootHovered: props.hoverStyles,
50
58
  rootFocused: props.focusStyles,
package/lib/cjs/components/confirmationpane/ConfirmationPane.js CHANGED
@@ -80,6 +80,12 @@ function ConfirmationPane(props) {
80
80
 
81
81
  (_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.onCancel();
82
82
  }
83
+ }, []); // eslint-disable-next-line @typescript-eslint/no-explicit-any
84
+
85
+ const handleEscKeyDown = (0, _react2.useCallback)(e => {
86
+ if (e.code === _Constants.KeyCodes.ESCAPE) {
87
+ handleCancelClick();
88
+ }
83
89
  }, []);
84
90
  const containerStyles = {
85
91
  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) {
107
113
  };
108
114
  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, {
109
115
  id: elementId,
116
+ onKeyDown: handleEscKeyDown,
110
117
  tabIndex: -1,
111
118
  dir: ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.dir) || _defaultConfirmationPaneControlProps.defaultConfirmationPaneControlProps.dir,
112
119
  styles: containerStyles,
package/lib/cjs/components/footer/Footer.js CHANGED
@@ -87,7 +87,7 @@ function Footer(props) {
87
87
  verticalAlign: "start"
88
88
  }, /*#__PURE__*/React.createElement(_react2.Stack, {
89
89
  horizontal: true,
90
- verticalAlign: "start"
90
+ verticalAlign: "center"
91
91
  }, (0, _utils.processCustomComponents)((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : (_props$controlProps15 = _props$controlProps14.rightGroup) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.children), !((_props$controlProps16 = props.controlProps) !== null && _props$controlProps16 !== void 0 && _props$controlProps16.hideAudioNotificationButton) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.AudioNotificationButton) || /*#__PURE__*/React.createElement(_AudioNotificationButton.default, _extends({}, audioNotificationButtonProps, {
92
92
  onClick: (_props$controlProps17 = props.controlProps) === null || _props$controlProps17 === void 0 ? void 0 : _props$controlProps17.onAudioNotificationClick,
93
93
  styles: audioNotificationButtonStyles,
package/lib/cjs/components/footer/common/defaultProps/defaultFooterControlProps.js CHANGED
@@ -41,6 +41,7 @@ const defaultFooterControlProps = {
41
41
  },
42
42
  audioNotificationButtonProps: {
43
43
  id: "oc-lcw-footer-audionotification-button",
44
+ type: "icon",
44
45
  ariaLabel: "Turn sound off",
45
46
  toggleAriaLabel: "Turn sound on",
46
47
  iconName: "Volume3",
package/lib/cjs/components/footer/common/defaultStyles/defaultFooterStyleProps.js CHANGED
@@ -14,8 +14,10 @@ const defaultFooterStyleProps = {
14
14
  padding: "0 10px 5px 10px"
15
15
  },
16
16
  downloadTranscriptButtonStyleProps: {
17
- color: "blue",
18
- fontSize: 16,
17
+ icon: {
18
+ color: "blue",
19
+ fontSize: 16
20
+ },
19
21
  height: "25px",
20
22
  lineHeight: "25px",
21
23
  width: "25px"
@@ -25,8 +27,10 @@ const defaultFooterStyleProps = {
25
27
  backgroundColor: "#C8C8C8"
26
28
  },
27
29
  emailTranscriptButtonStyleProps: {
28
- color: "blue",
29
- fontSize: 16,
30
+ icon: {
31
+ color: "blue",
32
+ fontSize: 16
33
+ },
30
34
  height: "25px",
31
35
  lineHeight: "25px",
32
36
  width: "25px"
@@ -36,8 +40,10 @@ const defaultFooterStyleProps = {
36
40
  backgroundColor: "#C8C8C8"
37
41
  },
38
42
  audioNotificationButtonStyleProps: {
39
- color: "blue",
40
- fontSize: 16,
43
+ icon: {
44
+ color: "blue",
45
+ fontSize: 16
46
+ },
41
47
  height: "25px",
42
48
  lineHeight: "25px",
43
49
  width: "25px"
package/lib/cjs/components/footer/subcomponents/AudioNotificationButton.js CHANGED
@@ -18,31 +18,34 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
18
18
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
19
 
20
20
  function AudioNotificationButton(props) {
21
- var _props$styles, _props$styles2, _props$styles3, _props$hoverStyles, _props$focusStyles;
22
-
23
21
  const {
24
22
  disabled
25
23
  } = props;
26
24
  const [muted, setMuted] = (0, _react2.useState)(props.isAudioMuted);
25
+ let iconStyles = {};
26
+
27
+ if (props.type === "icon") {
28
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
29
+ iconStyles = { ...(props === null || props === void 0 ? void 0 : props.styles).icon
30
+ };
31
+ }
32
+
27
33
  const iconButtonStyles = {
28
- icon: props.styles,
34
+ icon: iconStyles,
29
35
  root: {
30
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
31
- width: props === null || props === void 0 ? void 0 : (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.width,
32
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
33
- height: props === null || props === void 0 ? void 0 : (_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.height,
34
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
35
- backgroundColor: props === null || props === void 0 ? void 0 : (_props$styles3 = props.styles) === null || _props$styles3 === void 0 ? void 0 : _props$styles3.backgroundColor,
36
36
  selectors: {
37
- ":hover .ms-Button-icon": {
38
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
39
- color: props === null || props === void 0 ? void 0 : (_props$hoverStyles = props.hoverStyles) === null || _props$hoverStyles === void 0 ? void 0 : _props$hoverStyles.color
37
+ ":hover .ms-Button-icon": { // eslint-disable-next-line @typescript-eslint/no-explicit-any
38
+ ...(props === null || props === void 0 ? void 0 : props.hoverStyles).icon
40
39
  },
41
- ":active .ms-Button-icon": {
42
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
43
- color: props === null || props === void 0 ? void 0 : (_props$focusStyles = props.focusStyles) === null || _props$focusStyles === void 0 ? void 0 : _props$focusStyles.color
40
+ ":active .ms-Button-icon": { // eslint-disable-next-line @typescript-eslint/no-explicit-any
41
+ ...(props === null || props === void 0 ? void 0 : props.hoverStyles).icon
42
+ },
43
+ ":focus .ms-Button-icon": { // eslint-disable-next-line @typescript-eslint/no-explicit-any
44
+ ...(props === null || props === void 0 ? void 0 : props.focusStyles).icon
44
45
  }
45
- }
46
+ },
47
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
48
+ ...(props === null || props === void 0 ? void 0 : props.styles)
46
49
  },
47
50
  rootHovered: props.hoverStyles,
48
51
  rootFocused: props.focusStyles,
@@ -85,6 +88,7 @@ function AudioNotificationButton(props) {
85
88
  disabled: disabled,
86
89
  styles: iconButtonStyles,
87
90
  className: props.className,
91
+ "aria-label": muted ? props.toggleAriaLabel ?? "Turn sound on" : props.ariaLabel ?? "Turn sound off",
88
92
  title: muted ? props.toggleAriaLabel ?? "Turn sound on" : props.ariaLabel ?? "Turn sound off"
89
93
  });
90
94
  }
package/lib/cjs/components/inputvalidationpane/InputValidationPane.js CHANGED
@@ -55,23 +55,28 @@ function InputValidationPane(props) {
55
55
  const [isInitialRendering, setIsInitialRendering] = (0, _react2.useState)(true);
56
56
  const [isInvalidInput, setIsInvalidInput] = (0, _react2.useState)(false);
57
57
  const [isSendButtonEnabled, setIsSendButtonEnabled] = (0, _react2.useState)(false);
58
-
59
- const isValidInput = () => {
58
+ const isValidInput = (0, _react2.useCallback)(() => {
60
59
  var _props$controlProps2, _props$controlProps3;
61
60
 
62
- 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;
63
- }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
61
+ if (!((_props$controlProps2 = props.controlProps) !== null && _props$controlProps2 !== void 0 && _props$controlProps2.checkInput)) {
62
+ return true;
63
+ }
64
+
65
+ if (!inputValue) {
66
+ return false;
67
+ }
64
68
 
69
+ return (_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.checkInput(inputValue);
70
+ }, [inputValue]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
65
71
 
66
- const handleInputChange = e => {
72
+ const handleInputChange = (0, _react2.useCallback)(e => {
67
73
  var _props$controlProps4, _props$controlProps5;
68
74
 
69
75
  setInputValue(e.target.value);
70
76
  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);
71
77
  setIsInvalidInput(false);
72
- };
73
-
74
- const send = (controlId, suffix) => {
78
+ }, []);
79
+ const send = (0, _react2.useCallback)((controlId, suffix) => {
75
80
  var _props$controlProps6;
76
81
 
77
82
  if ((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.onSend) {
@@ -90,20 +95,17 @@ function InputValidationPane(props) {
90
95
  setIsInvalidInput(true);
91
96
  }
92
97
  }
93
- }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
98
+ }, [inputValue]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
94
99
 
95
-
96
- const handleInputKeyDown = e => {
100
+ const handleInputKeyUp = (0, _react2.useCallback)(e => {
97
101
  if (e.code === _Constants.KeyCodes.ENTER) {
98
- send(elementId + "-textField", "KeyDown");
102
+ send(elementId + "-textField", "KeyUp");
99
103
  }
100
- };
101
-
102
- const handleSendClick = () => {
104
+ }, [inputValue]);
105
+ const handleSendClick = (0, _react2.useCallback)(() => {
103
106
  send(elementId + "-sendbutton", "Click");
104
- };
105
-
106
- const cancel = (controlId, suffix) => {
107
+ }, [inputValue]);
108
+ const cancel = (0, _react2.useCallback)((controlId, suffix) => {
107
109
  var _props$controlProps8;
108
110
 
109
111
  if ((_props$controlProps8 = props.controlProps) !== null && _props$controlProps8 !== void 0 && _props$controlProps8.onCancel) {
@@ -121,19 +123,16 @@ function InputValidationPane(props) {
121
123
 
122
124
  (_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.onCancel();
123
125
  }
124
- }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
125
-
126
+ }, []); // eslint-disable-next-line @typescript-eslint/no-explicit-any
126
127
 
127
- const handleEscKeyDown = e => {
128
+ const handleEscKeyDown = (0, _react2.useCallback)(e => {
128
129
  if (e.code === _Constants.KeyCodes.ESCAPE) {
129
130
  cancel(elementId, "KeyDown");
130
131
  }
131
- };
132
-
133
- const handleCancelClick = () => {
132
+ }, []);
133
+ const handleCancelClick = (0, _react2.useCallback)(() => {
134
134
  cancel(elementId + "-cancelbutton", "Click");
135
- };
136
-
135
+ }, []);
137
136
  (0, _react2.useEffect)(() => {
138
137
  var _props$controlProps11, _props$controlProps12, _props$controlProps13;
139
138
 
@@ -160,7 +159,8 @@ function InputValidationPane(props) {
160
159
  const redBorderStyles = {
161
160
  borderColor: ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.inputWithErrorMessageBorderColor) ?? _defaultInputValidationPaneControlProps.defaultInputValidationPaneControlProps.inputWithErrorMessageBorderColor,
162
161
  borderRadius: "1px",
163
- borderStyle: "solid"
162
+ borderStyle: "solid",
163
+ borderWidth: "1px"
164
164
  };
165
165
  const inputStyles = {
166
166
  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) {
244
244
  ariaLabel: ((_props$controlProps24 = props.controlProps) === null || _props$controlProps24 === void 0 ? void 0 : _props$controlProps24.inputAriaLabel) || _defaultInputValidationPaneControlProps.defaultInputValidationPaneControlProps.inputAriaLabel,
245
245
  borderless: isInvalidInput,
246
246
  onChange: handleInputChange,
247
- onKeyDown: handleInputKeyDown
247
+ onKeyUp: handleInputKeyUp
248
248
  })), isInvalidInput && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.invalidInputErrorMessage) || /*#__PURE__*/_react2.default.createElement(_react.Stack, {
249
249
  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,
250
250
  styles: invalidInputErrorMessageStyles,
package/lib/cjs/components/inputvalidationpane/common/default/defaultStyles/defaultInputValidationPaneCancelButtonStyles.js CHANGED
@@ -16,6 +16,7 @@ const defaultInputValidationPaneCancelButtonStyles = {
16
16
  fontWeight: "500",
17
17
  lineHeight: "19px",
18
18
  textOverflow: "ellipsis",
19
- whiteSpace: "nowrap"
19
+ whiteSpace: "nowrap",
20
+ width: "80px"
20
21
  };
21
22
  exports.defaultInputValidationPaneCancelButtonStyles = defaultInputValidationPaneCancelButtonStyles;
package/lib/cjs/components/inputvalidationpane/common/default/defaultStyles/defaultInputValidationPaneInvalidInputErrorMessageStyles.js CHANGED
@@ -8,7 +8,7 @@ const defaultInputValidationPaneInvalidInputErrorMessageStyles = {
8
8
  color: "#a4262c",
9
9
  fontFamily: "'Segoe UI', Arial, sans-serif",
10
10
  fontSize: "12px",
11
- height: "16px,",
11
+ height: "16px",
12
12
  lineHeight: "16px",
13
13
  marginTop: "4px"
14
14
  };
package/lib/cjs/components/inputvalidationpane/common/default/defaultStyles/defaultInputValidationPaneSendButtonStyles.js CHANGED
@@ -12,6 +12,7 @@ const defaultInputValidationPaneSendButtonStyles = {
12
12
  fontWeight: "500",
13
13
  lineHeight: "19px",
14
14
  textOverflow: "ellipsis",
15
- whiteSpace: "nowrap"
15
+ whiteSpace: "nowrap",
16
+ width: "80px"
16
17
  };
17
18
  exports.defaultInputValidationPaneSendButtonStyles = defaultInputValidationPaneSendButtonStyles;
package/lib/cjs/components/postchatsurveypane/PostChatSurveyPane.js CHANGED
@@ -28,7 +28,8 @@ function PostChatSurveyPane(props) {
28
28
  const iframeStyles = {
29
29
  height: "100vh",
30
30
  width: "100%",
31
- display: "block"
31
+ display: "block",
32
+ maxHeight: "100%"
32
33
  };
33
34
  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_react.Stack, {
34
35
  id: elementId,
package/lib/cjs/components/prechatsurveypane/PreChatSurveyPane.js CHANGED
@@ -82,6 +82,7 @@ function PreChatSurveyPane(props) {
82
82
  }
83
83
  }, []); //Adaptive Card Initilializations
84
84
 
85
+ AdaptiveCards.GlobalSettings.setTabIndexAtCardRoot = false;
85
86
  const adaptiveCard = new AdaptiveCards.AdaptiveCard();
86
87
  adaptiveCard.hostConfig = new AdaptiveCards.HostConfig(adaptiveCardHostConfig);
87
88
  adaptiveCard.parse(adpativeCardPayload);
package/lib/esm/components/common/commandbutton/CommandButton.js CHANGED
@@ -4,7 +4,7 @@ import { BroadcastService } from "../../../services/BroadcastService";
4
4
  import { ElementType } from "../../../common/Constants";
5
5
 
6
6
  function CommandButton(props) {
7
- var _props$styles, _props$styles2, _props$styles3, _props$hoverStyles, _props$focusStyles;
7
+ var _props$hoverStyles, _props$hoverStyles2, _props$focusStyles;
8
8
 
9
9
  //imageIconProps > iconName
10
10
  const iconProp = props.imageIconProps ? {
@@ -12,25 +12,33 @@ function CommandButton(props) {
12
12
  } : {
13
13
  iconName: props.iconName
14
14
  };
15
+ let iconStyles = {};
16
+
17
+ if (props.type === "icon") {
18
+ var _props$styles;
19
+
20
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
21
+ iconStyles = { ...(props === null || props === void 0 ? void 0 : (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.icon)
22
+ };
23
+ }
24
+
15
25
  const buttonStyles = {
16
- icon: props.styles,
26
+ icon: { ...iconStyles
27
+ },
17
28
  root: {
18
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
19
- width: props === null || props === void 0 ? void 0 : (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.width,
20
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
21
- height: props === null || props === void 0 ? void 0 : (_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.height,
22
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
23
- backgroundColor: props === null || props === void 0 ? void 0 : (_props$styles3 = props.styles) === null || _props$styles3 === void 0 ? void 0 : _props$styles3.backgroundColor,
24
29
  selectors: {
25
- ":hover .ms-Button-icon": {
26
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
27
- color: props === null || props === void 0 ? void 0 : (_props$hoverStyles = props.hoverStyles) === null || _props$hoverStyles === void 0 ? void 0 : _props$hoverStyles.color
30
+ ":hover .ms-Button-icon": { // eslint-disable-next-line @typescript-eslint/no-explicit-any
31
+ ...(props === null || props === void 0 ? void 0 : (_props$hoverStyles = props.hoverStyles) === null || _props$hoverStyles === void 0 ? void 0 : _props$hoverStyles.icon)
28
32
  },
29
- ":active .ms-Button-icon": {
30
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
31
- color: props === null || props === void 0 ? void 0 : (_props$focusStyles = props.focusStyles) === null || _props$focusStyles === void 0 ? void 0 : _props$focusStyles.color
33
+ ":active .ms-Button-icon": { // eslint-disable-next-line @typescript-eslint/no-explicit-any
34
+ ...(props === null || props === void 0 ? void 0 : (_props$hoverStyles2 = props.hoverStyles) === null || _props$hoverStyles2 === void 0 ? void 0 : _props$hoverStyles2.icon)
35
+ },
36
+ ":focus .ms-Button-icon": { // eslint-disable-next-line @typescript-eslint/no-explicit-any
37
+ ...(props === null || props === void 0 ? void 0 : (_props$focusStyles = props.focusStyles) === null || _props$focusStyles === void 0 ? void 0 : _props$focusStyles.icon)
32
38
  }
33
- }
39
+ },
40
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
41
+ ...(props === null || props === void 0 ? void 0 : props.styles)
34
42
  },
35
43
  rootHovered: props.hoverStyles,
36
44
  rootFocused: props.focusStyles,
package/lib/esm/components/confirmationpane/ConfirmationPane.js CHANGED
@@ -2,7 +2,7 @@ import { DefaultButton, PrimaryButton } from "@fluentui/react/lib/Button";
2
2
  import { Label, Stack } from "@fluentui/react";
3
3
  import React, { useCallback } from "react";
4
4
  import { BroadcastService } from "../../services/BroadcastService";
5
- import { ElementType } from "../../common/Constants";
5
+ import { ElementType, KeyCodes } from "../../common/Constants";
6
6
  import { decodeComponentString } from "../../common/decodeComponentString";
7
7
  import { defaultConfirmationPaneButtonGroupStyles } from "./common/defaultStyles/defaultConfirmationPaneButtonGroupStyles";
8
8
  import { defaultConfirmationPaneCancelButtonHoveredStyles } from "./common/defaultStyles/defaultConfirmationPaneCancelButtonHoveredStyles";
@@ -49,6 +49,12 @@ function ConfirmationPane(props) {
49
49
  BroadcastService.postMessage(customEvent);
50
50
  (_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.onCancel();
51
51
  }
52
+ }, []); // eslint-disable-next-line @typescript-eslint/no-explicit-any
53
+
54
+ const handleEscKeyDown = useCallback(e => {
55
+ if (e.code === KeyCodes.ESCAPE) {
56
+ handleCancelClick();
57
+ }
52
58
  }, []);
53
59
  const containerStyles = {
54
60
  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) {
76
82
  };
77
83
  return /*#__PURE__*/React.createElement(React.Fragment, null, !((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.hideConfirmationPane) && /*#__PURE__*/React.createElement(Stack, {
78
84
  id: elementId,
85
+ onKeyDown: handleEscKeyDown,
79
86
  tabIndex: -1,
80
87
  dir: ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.dir) || defaultConfirmationPaneControlProps.dir,
81
88
  styles: containerStyles,
package/lib/esm/components/footer/Footer.js CHANGED
@@ -66,7 +66,7 @@ function Footer(props) {
66
66
  verticalAlign: "start"
67
67
  }, /*#__PURE__*/React.createElement(Stack, {
68
68
  horizontal: true,
69
- verticalAlign: "start"
69
+ verticalAlign: "center"
70
70
  }, processCustomComponents((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : (_props$controlProps15 = _props$controlProps14.rightGroup) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.children), !((_props$controlProps16 = props.controlProps) !== null && _props$controlProps16 !== void 0 && _props$controlProps16.hideAudioNotificationButton) && (decodeComponentString((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.AudioNotificationButton) || /*#__PURE__*/React.createElement(AudioNotificationButton, _extends({}, audioNotificationButtonProps, {
71
71
  onClick: (_props$controlProps17 = props.controlProps) === null || _props$controlProps17 === void 0 ? void 0 : _props$controlProps17.onAudioNotificationClick,
72
72
  styles: audioNotificationButtonStyles,
package/lib/esm/components/footer/common/defaultProps/defaultFooterControlProps.js CHANGED
@@ -35,6 +35,7 @@ export const defaultFooterControlProps = {
35
35
  },
36
36
  audioNotificationButtonProps: {
37
37
  id: "oc-lcw-footer-audionotification-button",
38
+ type: "icon",
38
39
  ariaLabel: "Turn sound off",
39
40
  toggleAriaLabel: "Turn sound on",
40
41
  iconName: "Volume3",
package/lib/esm/components/footer/common/defaultStyles/defaultFooterStyleProps.js CHANGED
@@ -8,8 +8,10 @@ export const defaultFooterStyleProps = {
8
8
  padding: "0 10px 5px 10px"
9
9
  },
10
10
  downloadTranscriptButtonStyleProps: {
11
- color: "blue",
12
- fontSize: 16,
11
+ icon: {
12
+ color: "blue",
13
+ fontSize: 16
14
+ },
13
15
  height: "25px",
14
16
  lineHeight: "25px",
15
17
  width: "25px"
@@ -19,8 +21,10 @@ export const defaultFooterStyleProps = {
19
21
  backgroundColor: "#C8C8C8"
20
22
  },
21
23
  emailTranscriptButtonStyleProps: {
22
- color: "blue",
23
- fontSize: 16,
24
+ icon: {
25
+ color: "blue",
26
+ fontSize: 16
27
+ },
24
28
  height: "25px",
25
29
  lineHeight: "25px",
26
30
  width: "25px"
@@ -30,8 +34,10 @@ export const defaultFooterStyleProps = {
30
34
  backgroundColor: "#C8C8C8"
31
35
  },
32
36
  audioNotificationButtonStyleProps: {
33
- color: "blue",
34
- fontSize: 16,
37
+ icon: {
38
+ color: "blue",
39
+ fontSize: 16
40
+ },
35
41
  height: "25px",
36
42
  lineHeight: "25px",
37
43
  width: "25px"
package/lib/esm/components/footer/subcomponents/AudioNotificationButton.js CHANGED
@@ -4,31 +4,34 @@ import { BroadcastService } from "../../../services/BroadcastService";
4
4
  import { ElementType } from "../../../common/Constants";
5
5
 
6
6
  function AudioNotificationButton(props) {
7
- var _props$styles, _props$styles2, _props$styles3, _props$hoverStyles, _props$focusStyles;
8
-
9
7
  const {
10
8
  disabled
11
9
  } = props;
12
10
  const [muted, setMuted] = useState(props.isAudioMuted);
11
+ let iconStyles = {};
12
+
13
+ if (props.type === "icon") {
14
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
15
+ iconStyles = { ...(props === null || props === void 0 ? void 0 : props.styles).icon
16
+ };
17
+ }
18
+
13
19
  const iconButtonStyles = {
14
- icon: props.styles,
20
+ icon: iconStyles,
15
21
  root: {
16
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
17
- width: props === null || props === void 0 ? void 0 : (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.width,
18
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
19
- height: props === null || props === void 0 ? void 0 : (_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.height,
20
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
21
- backgroundColor: props === null || props === void 0 ? void 0 : (_props$styles3 = props.styles) === null || _props$styles3 === void 0 ? void 0 : _props$styles3.backgroundColor,
22
22
  selectors: {
23
- ":hover .ms-Button-icon": {
24
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
25
- color: props === null || props === void 0 ? void 0 : (_props$hoverStyles = props.hoverStyles) === null || _props$hoverStyles === void 0 ? void 0 : _props$hoverStyles.color
23
+ ":hover .ms-Button-icon": { // eslint-disable-next-line @typescript-eslint/no-explicit-any
24
+ ...(props === null || props === void 0 ? void 0 : props.hoverStyles).icon
26
25
  },
27
- ":active .ms-Button-icon": {
28
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
29
- color: props === null || props === void 0 ? void 0 : (_props$focusStyles = props.focusStyles) === null || _props$focusStyles === void 0 ? void 0 : _props$focusStyles.color
26
+ ":active .ms-Button-icon": { // eslint-disable-next-line @typescript-eslint/no-explicit-any
27
+ ...(props === null || props === void 0 ? void 0 : props.hoverStyles).icon
28
+ },
29
+ ":focus .ms-Button-icon": { // eslint-disable-next-line @typescript-eslint/no-explicit-any
30
+ ...(props === null || props === void 0 ? void 0 : props.focusStyles).icon
30
31
  }
31
- }
32
+ },
33
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
34
+ ...(props === null || props === void 0 ? void 0 : props.styles)
32
35
  },
33
36
  rootHovered: props.hoverStyles,
34
37
  rootFocused: props.focusStyles,
@@ -69,6 +72,7 @@ function AudioNotificationButton(props) {
69
72
  disabled: disabled,
70
73
  styles: iconButtonStyles,
71
74
  className: props.className,
75
+ "aria-label": muted ? props.toggleAriaLabel ?? "Turn sound on" : props.ariaLabel ?? "Turn sound off",
72
76
  title: muted ? props.toggleAriaLabel ?? "Turn sound on" : props.ariaLabel ?? "Turn sound off"
73
77
  });
74
78
  }
package/lib/esm/components/inputvalidationpane/InputValidationPane.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { DefaultButton, PrimaryButton } from "@fluentui/react/lib/Button";
2
2
  import { Label, Stack, TextField } from "@fluentui/react";
3
- import React, { useEffect, useState } from "react";
3
+ import React, { useCallback, useEffect, useState } from "react";
4
4
  import { BroadcastService } from "../../services/BroadcastService";
5
5
  import { KeyCodes } from "../../common/Constants";
6
6
  import { decodeComponentString } from "../../common/decodeComponentString";
@@ -26,23 +26,28 @@ function InputValidationPane(props) {
26
26
  const [isInitialRendering, setIsInitialRendering] = useState(true);
27
27
  const [isInvalidInput, setIsInvalidInput] = useState(false);
28
28
  const [isSendButtonEnabled, setIsSendButtonEnabled] = useState(false);
29
-
30
- const isValidInput = () => {
29
+ const isValidInput = useCallback(() => {
31
30
  var _props$controlProps2, _props$controlProps3;
32
31
 
33
- 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;
34
- }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
32
+ if (!((_props$controlProps2 = props.controlProps) !== null && _props$controlProps2 !== void 0 && _props$controlProps2.checkInput)) {
33
+ return true;
34
+ }
35
+
36
+ if (!inputValue) {
37
+ return false;
38
+ }
35
39
 
40
+ return (_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.checkInput(inputValue);
41
+ }, [inputValue]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
36
42
 
37
- const handleInputChange = e => {
43
+ const handleInputChange = useCallback(e => {
38
44
  var _props$controlProps4, _props$controlProps5;
39
45
 
40
46
  setInputValue(e.target.value);
41
47
  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);
42
48
  setIsInvalidInput(false);
43
- };
44
-
45
- const send = (controlId, suffix) => {
49
+ }, []);
50
+ const send = useCallback((controlId, suffix) => {
46
51
  var _props$controlProps6;
47
52
 
48
53
  if ((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.onSend) {
@@ -59,20 +64,17 @@ function InputValidationPane(props) {
59
64
  setIsInvalidInput(true);
60
65
  }
61
66
  }
62
- }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
67
+ }, [inputValue]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
63
68
 
64
-
65
- const handleInputKeyDown = e => {
69
+ const handleInputKeyUp = useCallback(e => {
66
70
  if (e.code === KeyCodes.ENTER) {
67
- send(elementId + "-textField", "KeyDown");
71
+ send(elementId + "-textField", "KeyUp");
68
72
  }
69
- };
70
-
71
- const handleSendClick = () => {
73
+ }, [inputValue]);
74
+ const handleSendClick = useCallback(() => {
72
75
  send(elementId + "-sendbutton", "Click");
73
- };
74
-
75
- const cancel = (controlId, suffix) => {
76
+ }, [inputValue]);
77
+ const cancel = useCallback((controlId, suffix) => {
76
78
  var _props$controlProps8;
77
79
 
78
80
  if ((_props$controlProps8 = props.controlProps) !== null && _props$controlProps8 !== void 0 && _props$controlProps8.onCancel) {
@@ -88,19 +90,16 @@ function InputValidationPane(props) {
88
90
  BroadcastService.postMessage(customEvent);
89
91
  (_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.onCancel();
90
92
  }
91
- }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
92
-
93
+ }, []); // eslint-disable-next-line @typescript-eslint/no-explicit-any
93
94
 
94
- const handleEscKeyDown = e => {
95
+ const handleEscKeyDown = useCallback(e => {
95
96
  if (e.code === KeyCodes.ESCAPE) {
96
97
  cancel(elementId, "KeyDown");
97
98
  }
98
- };
99
-
100
- const handleCancelClick = () => {
99
+ }, []);
100
+ const handleCancelClick = useCallback(() => {
101
101
  cancel(elementId + "-cancelbutton", "Click");
102
- };
103
-
102
+ }, []);
104
103
  useEffect(() => {
105
104
  var _props$controlProps11, _props$controlProps12, _props$controlProps13;
106
105
 
@@ -127,7 +126,8 @@ function InputValidationPane(props) {
127
126
  const redBorderStyles = {
128
127
  borderColor: ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.inputWithErrorMessageBorderColor) ?? defaultInputValidationPaneControlProps.inputWithErrorMessageBorderColor,
129
128
  borderRadius: "1px",
130
- borderStyle: "solid"
129
+ borderStyle: "solid",
130
+ borderWidth: "1px"
131
131
  };
132
132
  const inputStyles = {
133
133
  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) {
211
211
  ariaLabel: ((_props$controlProps24 = props.controlProps) === null || _props$controlProps24 === void 0 ? void 0 : _props$controlProps24.inputAriaLabel) || defaultInputValidationPaneControlProps.inputAriaLabel,
212
212
  borderless: isInvalidInput,
213
213
  onChange: handleInputChange,
214
- onKeyDown: handleInputKeyDown
214
+ onKeyUp: handleInputKeyUp
215
215
  })), isInvalidInput && (decodeComponentString((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.invalidInputErrorMessage) || /*#__PURE__*/React.createElement(Stack, {
216
216
  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,
217
217
  styles: invalidInputErrorMessageStyles,
package/lib/esm/components/inputvalidationpane/common/default/defaultStyles/defaultInputValidationPaneCancelButtonStyles.js CHANGED
@@ -10,5 +10,6 @@ export const defaultInputValidationPaneCancelButtonStyles = {
10
10
  fontWeight: "500",
11
11
  lineHeight: "19px",
12
12
  textOverflow: "ellipsis",
13
- whiteSpace: "nowrap"
13
+ whiteSpace: "nowrap",
14
+ width: "80px"
14
15
  };
package/lib/esm/components/inputvalidationpane/common/default/defaultStyles/defaultInputValidationPaneInvalidInputErrorMessageStyles.js CHANGED
@@ -2,7 +2,7 @@ export const defaultInputValidationPaneInvalidInputErrorMessageStyles = {
2
2
  color: "#a4262c",
3
3
  fontFamily: "'Segoe UI', Arial, sans-serif",
4
4
  fontSize: "12px",
5
- height: "16px,",
5
+ height: "16px",
6
6
  lineHeight: "16px",
7
7
  marginTop: "4px"
8
8
  };
package/lib/esm/components/inputvalidationpane/common/default/defaultStyles/defaultInputValidationPaneSendButtonStyles.js CHANGED
@@ -6,5 +6,6 @@ export const defaultInputValidationPaneSendButtonStyles = {
6
6
  fontWeight: "500",
7
7
  lineHeight: "19px",
8
8
  textOverflow: "ellipsis",
9
- whiteSpace: "nowrap"
9
+ whiteSpace: "nowrap",
10
+ width: "80px"
10
11
  };
package/lib/esm/components/postchatsurveypane/PostChatSurveyPane.js CHANGED
@@ -15,7 +15,8 @@ function PostChatSurveyPane(props) {
15
15
  const iframeStyles = {
16
16
  height: "100vh",
17
17
  width: "100%",
18
- display: "block"
18
+ display: "block",
19
+ maxHeight: "100%"
19
20
  };
20
21
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stack, {
21
22
  id: elementId,
package/lib/esm/components/prechatsurveypane/PreChatSurveyPane.js CHANGED
@@ -60,6 +60,7 @@ function PreChatSurveyPane(props) {
60
60
  }
61
61
  }, []); //Adaptive Card Initilializations
62
62
 
63
+ AdaptiveCards.GlobalSettings.setTabIndexAtCardRoot = false;
63
64
  const adaptiveCard = new AdaptiveCards.AdaptiveCard();
64
65
  adaptiveCard.hostConfig = new AdaptiveCards.HostConfig(adaptiveCardHostConfig);
65
66
  adaptiveCard.parse(adpativeCardPayload);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microsoft/omnichannel-chat-components",
3
- "version": "0.1.0-main.99bac9c",
3
+ "version": "0.1.0-main.a7ac5de",
4
4
  "description": "Microsoft Omnichannel Chat Components",
5
5
  "main": "lib/cjs/index.js",
6
6
  "types": "lib/types/index.d.ts",