@microsoft/omnichannel-chat-components 0.1.0-main.ea06308 → 0.1.0-main.edd8c2a
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.
- package/lib/cjs/common/Constants.js +1 -1
- package/lib/cjs/components/callingcontainer/subcomponents/CurrentCall/common/defaultStyles/defaultCurrentCallStyleProps.js +5 -5
- package/lib/cjs/components/callingcontainer/subcomponents/IncomingCall/common/defaultStyles/defaultIncomingCallStyleProps.js +8 -8
- package/lib/cjs/components/chatbutton/ChatButton.js +10 -7
- package/lib/esm/common/Constants.js +1 -1
- package/lib/esm/components/callingcontainer/subcomponents/CurrentCall/common/defaultStyles/defaultCurrentCallStyleProps.js +5 -5
- package/lib/esm/components/callingcontainer/subcomponents/IncomingCall/common/defaultStyles/defaultIncomingCallStyleProps.js +8 -8
- package/lib/esm/components/chatbutton/ChatButton.js +11 -8
- package/lib/types/common/Constants.d.ts +1 -0
- package/package.json +1 -1
|
@@ -16,7 +16,7 @@ const AccessibilityBrightnessRatio = 1.2;
|
|
|
16
16
|
exports.AccessibilityBrightnessRatio = AccessibilityBrightnessRatio;
|
|
17
17
|
const BROADCAST_CHANNEL_NAME = "omnichannel_broadcast_channel";
|
|
18
18
|
exports.BROADCAST_CHANNEL_NAME = BROADCAST_CHANNEL_NAME;
|
|
19
|
-
const KeyCodes = (_class = class KeyCodes {}, _defineProperty(_class, "ENTER", "Enter"), _defineProperty(_class, "ESCAPE", "Escape"), _class);
|
|
19
|
+
const KeyCodes = (_class = class KeyCodes {}, _defineProperty(_class, "ENTER", "Enter"), _defineProperty(_class, "ESCAPE", "Escape"), _defineProperty(_class, "SPACE", "Space"), _class);
|
|
20
20
|
exports.KeyCodes = KeyCodes;
|
|
21
21
|
const Regex = (_class2 = class Regex {}, _defineProperty(_class2, "EmailRegex", "(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])"), _defineProperty(_class2, "URLRegex", /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi), _class2);
|
|
22
22
|
exports.Regex = Regex;
|
|
@@ -13,7 +13,7 @@ const defaultCurrentCallStyleProps = {
|
|
|
13
13
|
},
|
|
14
14
|
micButtonStyleProps: {
|
|
15
15
|
borderRadius: "2px",
|
|
16
|
-
color: "
|
|
16
|
+
color: "#FFFFFF",
|
|
17
17
|
backgroundColor: "#3d3c3c",
|
|
18
18
|
height: "45px",
|
|
19
19
|
width: "50px",
|
|
@@ -24,7 +24,7 @@ const defaultCurrentCallStyleProps = {
|
|
|
24
24
|
},
|
|
25
25
|
videoOffButtonStyleProps: {
|
|
26
26
|
borderRadius: "2px",
|
|
27
|
-
color: "
|
|
27
|
+
color: "#FFFFFF",
|
|
28
28
|
backgroundColor: "#3d3c3c",
|
|
29
29
|
height: "45px",
|
|
30
30
|
width: "50px",
|
|
@@ -38,8 +38,8 @@ const defaultCurrentCallStyleProps = {
|
|
|
38
38
|
},
|
|
39
39
|
endCallButtonStyleProps: {
|
|
40
40
|
borderRadius: "2px",
|
|
41
|
-
color: "
|
|
42
|
-
backgroundColor: "
|
|
41
|
+
color: "#FFFFFF",
|
|
42
|
+
backgroundColor: "#DC0000",
|
|
43
43
|
lineHeight: "50px",
|
|
44
44
|
height: "45px",
|
|
45
45
|
width: "50px",
|
|
@@ -48,7 +48,7 @@ const defaultCurrentCallStyleProps = {
|
|
|
48
48
|
currentCallTimerStyleProps: {
|
|
49
49
|
borderRadius: "2px",
|
|
50
50
|
margin: "1px",
|
|
51
|
-
color: "
|
|
51
|
+
color: "#FFFFFF",
|
|
52
52
|
paddingTop: "18px",
|
|
53
53
|
fontSize: 12,
|
|
54
54
|
fontFamily: "Segoe UI, Arial, sans-serif",
|
|
@@ -12,8 +12,8 @@ const defaultIncomingCallStyleProps = {
|
|
|
12
12
|
},
|
|
13
13
|
audioCallButtonStyleProps: {
|
|
14
14
|
borderRadius: "50%",
|
|
15
|
-
color: "
|
|
16
|
-
backgroundColor: "
|
|
15
|
+
color: "#FFFFFF",
|
|
16
|
+
backgroundColor: "#008000",
|
|
17
17
|
lineHeight: "40px",
|
|
18
18
|
height: "40px",
|
|
19
19
|
width: "40px",
|
|
@@ -24,8 +24,8 @@ const defaultIncomingCallStyleProps = {
|
|
|
24
24
|
},
|
|
25
25
|
videoCallButtonStyleProps: {
|
|
26
26
|
borderRadius: "50%",
|
|
27
|
-
color: "
|
|
28
|
-
backgroundColor: "
|
|
27
|
+
color: "#FFFFFF",
|
|
28
|
+
backgroundColor: "#008000",
|
|
29
29
|
lineHeight: "40px",
|
|
30
30
|
height: "40px",
|
|
31
31
|
width: "40px",
|
|
@@ -40,8 +40,8 @@ const defaultIncomingCallStyleProps = {
|
|
|
40
40
|
},
|
|
41
41
|
declineCallButtonStyleProps: {
|
|
42
42
|
borderRadius: "50%",
|
|
43
|
-
color: "
|
|
44
|
-
backgroundColor: "
|
|
43
|
+
color: "#FFFFFF",
|
|
44
|
+
backgroundColor: "#DC0000",
|
|
45
45
|
lineHeight: "40px",
|
|
46
46
|
height: "40px",
|
|
47
47
|
width: "40px",
|
|
@@ -50,12 +50,12 @@ const defaultIncomingCallStyleProps = {
|
|
|
50
50
|
},
|
|
51
51
|
incomingCallTitleStyleProps: {
|
|
52
52
|
margin: "0 5px",
|
|
53
|
-
color: "
|
|
53
|
+
color: "#FFFFFF",
|
|
54
54
|
fontSize: 12,
|
|
55
55
|
fontFamily: "Segoe UI, Arial, sans-serif"
|
|
56
56
|
},
|
|
57
57
|
itemFocusStyleProps: {
|
|
58
|
-
outline: "2px solid
|
|
58
|
+
outline: "2px solid #FFFFFF"
|
|
59
59
|
}
|
|
60
60
|
};
|
|
61
61
|
exports.defaultIncomingCallStyleProps = defaultIncomingCallStyleProps;
|
|
@@ -43,7 +43,6 @@ function NotificationBubble(props, parentId) {
|
|
|
43
43
|
return (0, _decodeComponentString.decodeComponentString)((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.notificationBubble) || /*#__PURE__*/_react2.default.createElement(_react.Label, {
|
|
44
44
|
styles: notificationBubbleStyles,
|
|
45
45
|
className: (_props$styleProps2 = props.styleProps) === null || _props$styleProps2 === void 0 ? void 0 : (_props$styleProps2$cl = _props$styleProps2.classNames) === null || _props$styleProps2$cl === void 0 ? void 0 : _props$styleProps2$cl.notificationBubbleClassName,
|
|
46
|
-
tabIndex: -1,
|
|
47
46
|
id: parentId + "-notification-bubble"
|
|
48
47
|
}, unreadMessageCount);
|
|
49
48
|
}
|
|
@@ -57,7 +56,6 @@ function IconContainer(props, parentId) {
|
|
|
57
56
|
return (0, _decodeComponentString.decodeComponentString)((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.iconContainer) || /*#__PURE__*/_react2.default.createElement(_react.Icon, {
|
|
58
57
|
className: (_props$styleProps4 = props.styleProps) === null || _props$styleProps4 === void 0 ? void 0 : (_props$styleProps4$cl = _props$styleProps4.classNames) === null || _props$styleProps4$cl === void 0 ? void 0 : _props$styleProps4$cl.iconContainerClassName,
|
|
59
58
|
styles: iconContainerStyles,
|
|
60
|
-
tabIndex: -1,
|
|
61
59
|
id: parentId + "-icon-container"
|
|
62
60
|
});
|
|
63
61
|
}
|
|
@@ -83,18 +81,15 @@ function TextContainer(props, parentId) {
|
|
|
83
81
|
return (0, _decodeComponentString.decodeComponentString)((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.textContainer) || /*#__PURE__*/_react2.default.createElement(_react.Stack, {
|
|
84
82
|
styles: textContainerStyles,
|
|
85
83
|
className: (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : (_props$styleProps8$cl = _props$styleProps8.classNames) === null || _props$styleProps8$cl === void 0 ? void 0 : _props$styleProps8$cl.textContainerClassName,
|
|
86
|
-
id: parentId + "-text-container"
|
|
87
|
-
tabIndex: -1
|
|
84
|
+
id: parentId + "-text-container"
|
|
88
85
|
}, !hideChatTitle && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.title) || /*#__PURE__*/_react2.default.createElement(_react.Label, {
|
|
89
86
|
styles: titleStyles,
|
|
90
|
-
tabIndex: -1,
|
|
91
87
|
dir: titleDir,
|
|
92
88
|
className: (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : (_props$styleProps9$cl = _props$styleProps9.classNames) === null || _props$styleProps9$cl === void 0 ? void 0 : _props$styleProps9$cl.titleClassName,
|
|
93
89
|
id: parentId + "-title",
|
|
94
90
|
title: titleText
|
|
95
91
|
}, titleText)), !hideChatSubtitle && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr5 = props.componentOverrides) === null || _props$componentOverr5 === void 0 ? void 0 : _props$componentOverr5.subtitle) || /*#__PURE__*/_react2.default.createElement(_react.Label, {
|
|
96
92
|
styles: subtitleStyles,
|
|
97
|
-
tabIndex: -1,
|
|
98
93
|
dir: subtitleDir,
|
|
99
94
|
className: (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : (_props$styleProps10$c = _props$styleProps10.classNames) === null || _props$styleProps10$c === void 0 ? void 0 : _props$styleProps10$c.subtitleClassName,
|
|
100
95
|
id: parentId + "-subtitle",
|
|
@@ -130,7 +125,14 @@ function ChatButton(props) {
|
|
|
130
125
|
|
|
131
126
|
props.controlProps.onClick();
|
|
132
127
|
}
|
|
133
|
-
}, []);
|
|
128
|
+
}, []); // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
129
|
+
|
|
130
|
+
const handleInputKeyDown = e => {
|
|
131
|
+
if (e.code === _Constants.KeyCodes.ENTER || e.code === _Constants.KeyCodes.SPACE) {
|
|
132
|
+
handleInitiateChatClick();
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
|
|
134
136
|
return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, !hideChatButton && /*#__PURE__*/_react2.default.createElement(_react.Stack, {
|
|
135
137
|
horizontal: true,
|
|
136
138
|
id: elementId,
|
|
@@ -139,6 +141,7 @@ function ChatButton(props) {
|
|
|
139
141
|
tabIndex: 0,
|
|
140
142
|
role: defaultRole,
|
|
141
143
|
onClick: handleInitiateChatClick,
|
|
144
|
+
onKeyDown: handleInputKeyDown,
|
|
142
145
|
"aria-label": defaultAriaLabel
|
|
143
146
|
}, !hideChatIcon && IconContainer(props, elementId), !hideChatTextContainer && TextContainer(props, elementId), !hideNotificationBubble && NotificationBubble(props, elementId)));
|
|
144
147
|
}
|
|
@@ -7,7 +7,7 @@ export const AccessibilityBrightnessRatio = 1.2;
|
|
|
7
7
|
/* App constants*/
|
|
8
8
|
|
|
9
9
|
export const BROADCAST_CHANNEL_NAME = "omnichannel_broadcast_channel";
|
|
10
|
-
export const KeyCodes = (_class = class KeyCodes {}, _defineProperty(_class, "ENTER", "Enter"), _defineProperty(_class, "ESCAPE", "Escape"), _class);
|
|
10
|
+
export const KeyCodes = (_class = class KeyCodes {}, _defineProperty(_class, "ENTER", "Enter"), _defineProperty(_class, "ESCAPE", "Escape"), _defineProperty(_class, "SPACE", "Space"), _class);
|
|
11
11
|
export const Regex = (_class2 = class Regex {}, _defineProperty(_class2, "EmailRegex", "(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])"), _defineProperty(_class2, "URLRegex", /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi), _class2);
|
|
12
12
|
export let ElementType;
|
|
13
13
|
|
|
@@ -7,7 +7,7 @@ export const defaultCurrentCallStyleProps = {
|
|
|
7
7
|
},
|
|
8
8
|
micButtonStyleProps: {
|
|
9
9
|
borderRadius: "2px",
|
|
10
|
-
color: "
|
|
10
|
+
color: "#FFFFFF",
|
|
11
11
|
backgroundColor: "#3d3c3c",
|
|
12
12
|
height: "45px",
|
|
13
13
|
width: "50px",
|
|
@@ -18,7 +18,7 @@ export const defaultCurrentCallStyleProps = {
|
|
|
18
18
|
},
|
|
19
19
|
videoOffButtonStyleProps: {
|
|
20
20
|
borderRadius: "2px",
|
|
21
|
-
color: "
|
|
21
|
+
color: "#FFFFFF",
|
|
22
22
|
backgroundColor: "#3d3c3c",
|
|
23
23
|
height: "45px",
|
|
24
24
|
width: "50px",
|
|
@@ -32,8 +32,8 @@ export const defaultCurrentCallStyleProps = {
|
|
|
32
32
|
},
|
|
33
33
|
endCallButtonStyleProps: {
|
|
34
34
|
borderRadius: "2px",
|
|
35
|
-
color: "
|
|
36
|
-
backgroundColor: "
|
|
35
|
+
color: "#FFFFFF",
|
|
36
|
+
backgroundColor: "#DC0000",
|
|
37
37
|
lineHeight: "50px",
|
|
38
38
|
height: "45px",
|
|
39
39
|
width: "50px",
|
|
@@ -42,7 +42,7 @@ export const defaultCurrentCallStyleProps = {
|
|
|
42
42
|
currentCallTimerStyleProps: {
|
|
43
43
|
borderRadius: "2px",
|
|
44
44
|
margin: "1px",
|
|
45
|
-
color: "
|
|
45
|
+
color: "#FFFFFF",
|
|
46
46
|
paddingTop: "18px",
|
|
47
47
|
fontSize: 12,
|
|
48
48
|
fontFamily: "Segoe UI, Arial, sans-serif",
|
|
@@ -6,8 +6,8 @@ export const defaultIncomingCallStyleProps = {
|
|
|
6
6
|
},
|
|
7
7
|
audioCallButtonStyleProps: {
|
|
8
8
|
borderRadius: "50%",
|
|
9
|
-
color: "
|
|
10
|
-
backgroundColor: "
|
|
9
|
+
color: "#FFFFFF",
|
|
10
|
+
backgroundColor: "#008000",
|
|
11
11
|
lineHeight: "40px",
|
|
12
12
|
height: "40px",
|
|
13
13
|
width: "40px",
|
|
@@ -18,8 +18,8 @@ export const defaultIncomingCallStyleProps = {
|
|
|
18
18
|
},
|
|
19
19
|
videoCallButtonStyleProps: {
|
|
20
20
|
borderRadius: "50%",
|
|
21
|
-
color: "
|
|
22
|
-
backgroundColor: "
|
|
21
|
+
color: "#FFFFFF",
|
|
22
|
+
backgroundColor: "#008000",
|
|
23
23
|
lineHeight: "40px",
|
|
24
24
|
height: "40px",
|
|
25
25
|
width: "40px",
|
|
@@ -34,8 +34,8 @@ export const defaultIncomingCallStyleProps = {
|
|
|
34
34
|
},
|
|
35
35
|
declineCallButtonStyleProps: {
|
|
36
36
|
borderRadius: "50%",
|
|
37
|
-
color: "
|
|
38
|
-
backgroundColor: "
|
|
37
|
+
color: "#FFFFFF",
|
|
38
|
+
backgroundColor: "#DC0000",
|
|
39
39
|
lineHeight: "40px",
|
|
40
40
|
height: "40px",
|
|
41
41
|
width: "40px",
|
|
@@ -44,11 +44,11 @@ export const defaultIncomingCallStyleProps = {
|
|
|
44
44
|
},
|
|
45
45
|
incomingCallTitleStyleProps: {
|
|
46
46
|
margin: "0 5px",
|
|
47
|
-
color: "
|
|
47
|
+
color: "#FFFFFF",
|
|
48
48
|
fontSize: 12,
|
|
49
49
|
fontFamily: "Segoe UI, Arial, sans-serif"
|
|
50
50
|
},
|
|
51
51
|
itemFocusStyleProps: {
|
|
52
|
-
outline: "2px solid
|
|
52
|
+
outline: "2px solid #FFFFFF"
|
|
53
53
|
}
|
|
54
54
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Icon, Label, Stack } from "@fluentui/react";
|
|
2
2
|
import React, { useCallback } from "react";
|
|
3
3
|
import { BroadcastService } from "../../services/BroadcastService";
|
|
4
|
-
import { ElementType } from "../../common/Constants";
|
|
4
|
+
import { ElementType, KeyCodes } from "../../common/Constants";
|
|
5
5
|
import { decodeComponentString } from "../../common/decodeComponentString";
|
|
6
6
|
import { defaultChatButtonControlProps } from "./common/defaultProps/defaultChatButtonControlProps";
|
|
7
7
|
import { defaultChatButtonGeneralStyles } from "./common/defaultStyles/defaultChatButtonGeneralStyles";
|
|
@@ -21,7 +21,6 @@ function NotificationBubble(props, parentId) {
|
|
|
21
21
|
return decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.notificationBubble) || /*#__PURE__*/React.createElement(Label, {
|
|
22
22
|
styles: notificationBubbleStyles,
|
|
23
23
|
className: (_props$styleProps2 = props.styleProps) === null || _props$styleProps2 === void 0 ? void 0 : (_props$styleProps2$cl = _props$styleProps2.classNames) === null || _props$styleProps2$cl === void 0 ? void 0 : _props$styleProps2$cl.notificationBubbleClassName,
|
|
24
|
-
tabIndex: -1,
|
|
25
24
|
id: parentId + "-notification-bubble"
|
|
26
25
|
}, unreadMessageCount);
|
|
27
26
|
}
|
|
@@ -35,7 +34,6 @@ function IconContainer(props, parentId) {
|
|
|
35
34
|
return decodeComponentString((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.iconContainer) || /*#__PURE__*/React.createElement(Icon, {
|
|
36
35
|
className: (_props$styleProps4 = props.styleProps) === null || _props$styleProps4 === void 0 ? void 0 : (_props$styleProps4$cl = _props$styleProps4.classNames) === null || _props$styleProps4$cl === void 0 ? void 0 : _props$styleProps4$cl.iconContainerClassName,
|
|
37
36
|
styles: iconContainerStyles,
|
|
38
|
-
tabIndex: -1,
|
|
39
37
|
id: parentId + "-icon-container"
|
|
40
38
|
});
|
|
41
39
|
}
|
|
@@ -61,18 +59,15 @@ function TextContainer(props, parentId) {
|
|
|
61
59
|
return decodeComponentString((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.textContainer) || /*#__PURE__*/React.createElement(Stack, {
|
|
62
60
|
styles: textContainerStyles,
|
|
63
61
|
className: (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : (_props$styleProps8$cl = _props$styleProps8.classNames) === null || _props$styleProps8$cl === void 0 ? void 0 : _props$styleProps8$cl.textContainerClassName,
|
|
64
|
-
id: parentId + "-text-container"
|
|
65
|
-
tabIndex: -1
|
|
62
|
+
id: parentId + "-text-container"
|
|
66
63
|
}, !hideChatTitle && (decodeComponentString((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.title) || /*#__PURE__*/React.createElement(Label, {
|
|
67
64
|
styles: titleStyles,
|
|
68
|
-
tabIndex: -1,
|
|
69
65
|
dir: titleDir,
|
|
70
66
|
className: (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : (_props$styleProps9$cl = _props$styleProps9.classNames) === null || _props$styleProps9$cl === void 0 ? void 0 : _props$styleProps9$cl.titleClassName,
|
|
71
67
|
id: parentId + "-title",
|
|
72
68
|
title: titleText
|
|
73
69
|
}, titleText)), !hideChatSubtitle && (decodeComponentString((_props$componentOverr5 = props.componentOverrides) === null || _props$componentOverr5 === void 0 ? void 0 : _props$componentOverr5.subtitle) || /*#__PURE__*/React.createElement(Label, {
|
|
74
70
|
styles: subtitleStyles,
|
|
75
|
-
tabIndex: -1,
|
|
76
71
|
dir: subtitleDir,
|
|
77
72
|
className: (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : (_props$styleProps10$c = _props$styleProps10.classNames) === null || _props$styleProps10$c === void 0 ? void 0 : _props$styleProps10$c.subtitleClassName,
|
|
78
73
|
id: parentId + "-subtitle",
|
|
@@ -106,7 +101,14 @@ function ChatButton(props) {
|
|
|
106
101
|
BroadcastService.postMessage(customEvent);
|
|
107
102
|
props.controlProps.onClick();
|
|
108
103
|
}
|
|
109
|
-
}, []);
|
|
104
|
+
}, []); // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
105
|
+
|
|
106
|
+
const handleInputKeyDown = e => {
|
|
107
|
+
if (e.code === KeyCodes.ENTER || e.code === KeyCodes.SPACE) {
|
|
108
|
+
handleInitiateChatClick();
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
|
|
110
112
|
return /*#__PURE__*/React.createElement(React.Fragment, null, !hideChatButton && /*#__PURE__*/React.createElement(Stack, {
|
|
111
113
|
horizontal: true,
|
|
112
114
|
id: elementId,
|
|
@@ -115,6 +117,7 @@ function ChatButton(props) {
|
|
|
115
117
|
tabIndex: 0,
|
|
116
118
|
role: defaultRole,
|
|
117
119
|
onClick: handleInitiateChatClick,
|
|
120
|
+
onKeyDown: handleInputKeyDown,
|
|
118
121
|
"aria-label": defaultAriaLabel
|
|
119
122
|
}, !hideChatIcon && IconContainer(props, elementId), !hideChatTextContainer && TextContainer(props, elementId), !hideNotificationBubble && NotificationBubble(props, elementId)));
|
|
120
123
|
}
|
package/package.json
CHANGED