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

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 (5) hide show
  1. package/lib/cjs/components/inputvalidationpane/InputValidationPane.js +26 -27
  2. package/lib/cjs/components/prechatsurveypane/PreChatSurveyPane.js +1 -0
  3. package/lib/esm/components/inputvalidationpane/InputValidationPane.js +27 -28
  4. package/lib/esm/components/prechatsurveypane/PreChatSurveyPane.js +1 -0
  5. package/package.json +1 -1
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
 
@@ -244,7 +243,7 @@ function InputValidationPane(props) {
244
243
  ariaLabel: ((_props$controlProps24 = props.controlProps) === null || _props$controlProps24 === void 0 ? void 0 : _props$controlProps24.inputAriaLabel) || _defaultInputValidationPaneControlProps.defaultInputValidationPaneControlProps.inputAriaLabel,
245
244
  borderless: isInvalidInput,
246
245
  onChange: handleInputChange,
247
- onKeyDown: handleInputKeyDown
246
+ onKeyUp: handleInputKeyUp
248
247
  })), 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
248
  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
249
  styles: invalidInputErrorMessageStyles,
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/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
 
@@ -211,7 +210,7 @@ function InputValidationPane(props) {
211
210
  ariaLabel: ((_props$controlProps24 = props.controlProps) === null || _props$controlProps24 === void 0 ? void 0 : _props$controlProps24.inputAriaLabel) || defaultInputValidationPaneControlProps.inputAriaLabel,
212
211
  borderless: isInvalidInput,
213
212
  onChange: handleInputChange,
214
- onKeyDown: handleInputKeyDown
213
+ onKeyUp: handleInputKeyUp
215
214
  })), isInvalidInput && (decodeComponentString((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.invalidInputErrorMessage) || /*#__PURE__*/React.createElement(Stack, {
216
215
  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
216
  styles: invalidInputErrorMessageStyles,
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.cb39af7",
3
+ "version": "0.1.0-main.d22acb1",
4
4
  "description": "Microsoft Omnichannel Chat Components",
5
5
  "main": "lib/cjs/index.js",
6
6
  "types": "lib/types/index.d.ts",