@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.
@@ -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: "white",
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: "white",
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: "white",
42
- backgroundColor: "red",
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: "white",
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: "white",
16
- backgroundColor: "green",
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: "white",
28
- backgroundColor: "green",
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: "white",
44
- backgroundColor: "red",
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: "white",
53
+ color: "#FFFFFF",
54
54
  fontSize: 12,
55
55
  fontFamily: "Segoe UI, Arial, sans-serif"
56
56
  },
57
57
  itemFocusStyleProps: {
58
- outline: "2px solid white"
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: "white",
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: "white",
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: "white",
36
- backgroundColor: "red",
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: "white",
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: "white",
10
- backgroundColor: "green",
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: "white",
22
- backgroundColor: "green",
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: "white",
38
- backgroundColor: "red",
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: "white",
47
+ color: "#FFFFFF",
48
48
  fontSize: 12,
49
49
  fontFamily: "Segoe UI, Arial, sans-serif"
50
50
  },
51
51
  itemFocusStyleProps: {
52
- outline: "2px solid white"
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
  }
@@ -4,6 +4,7 @@ export declare const KeyCodes: {
4
4
  new (): {};
5
5
  readonly ENTER: "Enter";
6
6
  readonly ESCAPE: "Escape";
7
+ readonly SPACE: "Space";
7
8
  };
8
9
  export declare const Regex: {
9
10
  new (): {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microsoft/omnichannel-chat-components",
3
- "version": "0.1.0-main.ea06308",
3
+ "version": "0.1.0-main.edd8c2a",
4
4
  "description": "Microsoft Omnichannel Chat Components",
5
5
  "main": "lib/cjs/index.js",
6
6
  "types": "lib/types/index.d.ts",