@microsoft/omnichannel-chat-components 1.1.17-main.4139523 → 1.1.17-main.ec0d66a

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 (6) hide show
  1. package/lib/cjs/components/header/Header.js +16 -4
  2. package/lib/cjs/components/header/common/defaultStyles/defaultHeaderStyleProps.js +23 -0
  3. package/lib/esm/components/header/Header.js +16 -4
  4. package/lib/esm/components/header/common/defaultStyles/defaultHeaderStyleProps.js +23 -0
  5. package/lib/types/components/header/interfaces/IHeaderStyleProps.d.ts +12 -0
  6. package/package.json +1 -1
package/lib/cjs/components/header/Header.js CHANGED
@@ -32,7 +32,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
32
32
  (0, _react2.initializeIcons)();
33
33
 
34
34
  function Header(props) {
35
- var _props$controlProps, _defaultHeaderProps$c, _defaultHeaderProps$s, _props$styleProps, _defaultHeaderProps$c2, _props$controlProps2, _defaultHeaderProps$c3, _props$controlProps3, _defaultHeaderProps$c4, _props$controlProps4, _defaultHeaderProps$c5, _props$controlProps5, _defaultHeaderProps$s2, _props$styleProps2, _defaultHeaderProps$s3, _props$styleProps3, _defaultHeaderProps$s4, _props$styleProps4, _defaultHeaderProps$s5, _props$styleProps5, _defaultHeaderProps$s6, _props$styleProps6, _defaultHeaderProps$s7, _props$styleProps7, _defaultHeaderProps$s8, _props$styleProps8, _props$controlProps6, _props$controlProps7, _props$controlProps7$, _props$controlProps8, _props$componentOverr, _props$controlProps9, _props$componentOverr2, _props$controlProps10, _props$controlProps11, _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$componentOverr3, _props$controlProps15, _props$controlProps16, _props$componentOverr4, _props$controlProps17;
35
+ var _props$controlProps, _defaultHeaderProps$c, _defaultHeaderProps$s, _props$styleProps, _defaultHeaderProps$c2, _props$controlProps2, _defaultHeaderProps$c3, _props$controlProps3, _defaultHeaderProps$c4, _props$controlProps4, _defaultHeaderProps$c5, _props$controlProps5, _defaultHeaderProps$s2, _props$styleProps2, _defaultHeaderProps$s3, _props$styleProps3, _defaultHeaderProps$s4, _props$styleProps4, _defaultHeaderProps$s5, _props$styleProps5, _defaultHeaderProps$s6, _props$styleProps6, _defaultHeaderProps$s7, _props$styleProps7, _defaultHeaderProps$s8, _props$styleProps8, _defaultHeaderProps$s9, _props$styleProps9, _defaultHeaderProps$s10, _props$styleProps10, _defaultHeaderProps$s11, _props$styleProps11, _props$controlProps6, _props$controlProps7, _props$controlProps7$, _props$controlProps8, _props$componentOverr, _props$controlProps9, _props$componentOverr2, _props$controlProps10, _props$controlProps11, _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$componentOverr3, _props$controlProps15, _props$controlProps16, _props$componentOverr4, _props$controlProps17;
36
36
 
37
37
  const headerId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? ((_defaultHeaderProps$c = _defaultHeaderProps.defaultHeaderProps.controlProps) === null || _defaultHeaderProps$c === void 0 ? void 0 : _defaultHeaderProps$c.id);
38
38
  const stackStyles = {
@@ -55,6 +55,9 @@ function Header(props) {
55
55
  const minimizeButtonStyles = Object.assign({}, (_defaultHeaderProps$s6 = _defaultHeaderProps.defaultHeaderProps.styleProps) === null || _defaultHeaderProps$s6 === void 0 ? void 0 : _defaultHeaderProps$s6.minimizeButtonStyleProps, (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : _props$styleProps6.minimizeButtonStyleProps);
56
56
  const minimizeButtonHoverStyles = Object.assign({}, (_defaultHeaderProps$s7 = _defaultHeaderProps.defaultHeaderProps.styleProps) === null || _defaultHeaderProps$s7 === void 0 ? void 0 : _defaultHeaderProps$s7.minimizeButtonHoverStyleProps, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.minimizeButtonHoverStyleProps);
57
57
  const headerItemFocusStyles = Object.assign({}, (_defaultHeaderProps$s8 = _defaultHeaderProps.defaultHeaderProps.styleProps) === null || _defaultHeaderProps$s8 === void 0 ? void 0 : _defaultHeaderProps$s8.headerItemFocusStyleProps, (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : _props$styleProps8.headerItemFocusStyleProps);
58
+ const headerLeftGroupStyles = Object.assign({}, (_defaultHeaderProps$s9 = _defaultHeaderProps.defaultHeaderProps.styleProps) === null || _defaultHeaderProps$s9 === void 0 ? void 0 : _defaultHeaderProps$s9.headerLeftGroupStyleProps, (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : _props$styleProps9.headerLeftGroupStyleProps);
59
+ const headerLeftGroupInnerContainerStyles = Object.assign({}, (_defaultHeaderProps$s10 = _defaultHeaderProps.defaultHeaderProps.styleProps) === null || _defaultHeaderProps$s10 === void 0 ? void 0 : _defaultHeaderProps$s10.headerLeftGroupInnerContainerStyleProps, (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : _props$styleProps10.headerLeftGroupInnerContainerStyleProps);
60
+ const titleContainerStyles = Object.assign({}, (_defaultHeaderProps$s11 = _defaultHeaderProps.defaultHeaderProps.styleProps) === null || _defaultHeaderProps$s11 === void 0 ? void 0 : _defaultHeaderProps$s11.titleContainerStyleProps, (_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.titleContainerStyleProps);
58
61
  return /*#__PURE__*/React.createElement(_react2.Stack, {
59
62
  as: "article",
60
63
  id: headerId,
@@ -66,19 +69,28 @@ function Header(props) {
66
69
  }, /*#__PURE__*/React.createElement(_react2.Stack, {
67
70
  horizontal: true,
68
71
  id: _Constants.Ids.HeaderLeftGroupId,
69
- verticalAlign: "center"
72
+ verticalAlign: "center",
73
+ styles: {
74
+ root: headerLeftGroupStyles
75
+ }
70
76
  }, /*#__PURE__*/React.createElement(_react2.Stack, {
71
77
  horizontal: true,
72
- verticalAlign: "center"
78
+ verticalAlign: "center",
79
+ styles: {
80
+ root: headerLeftGroupInnerContainerStyles
81
+ }
73
82
  }, (0, _utils.processCustomComponents)((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : (_props$controlProps7$ = _props$controlProps7.leftGroup) === null || _props$controlProps7$ === void 0 ? void 0 : _props$controlProps7$.children), !((_props$controlProps8 = props.controlProps) !== null && _props$controlProps8 !== void 0 && _props$controlProps8.hideIcon) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.headerIcon) || /*#__PURE__*/React.createElement(_react2.Image, {
74
83
  id: chatIconProps.id,
75
84
  src: chatIconProps.src,
76
85
  alt: chatIconProps.alt,
77
86
  tabIndex: -1,
78
87
  styles: iconImageStyles
79
- })), !((_props$controlProps9 = props.controlProps) !== null && _props$controlProps9 !== void 0 && _props$controlProps9.hideTitle) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.headerTitle) || /*#__PURE__*/React.createElement("h1", null, /*#__PURE__*/React.createElement(_react2.Label, {
88
+ })), !((_props$controlProps9 = props.controlProps) !== null && _props$controlProps9 !== void 0 && _props$controlProps9.hideTitle) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.headerTitle) || /*#__PURE__*/React.createElement("h1", {
89
+ style: titleContainerStyles
90
+ }, /*#__PURE__*/React.createElement(_react2.Label, {
80
91
  id: titleProps.id,
81
92
  tabIndex: -1,
93
+ title: titleProps === null || titleProps === void 0 ? void 0 : titleProps.text,
82
94
  styles: titleStyles
83
95
  }, titleProps === null || titleProps === void 0 ? void 0 : titleProps.text))))), /*#__PURE__*/React.createElement(_react2.Stack, {
84
96
  horizontal: true,
package/lib/cjs/components/header/common/defaultStyles/defaultHeaderStyleProps.js CHANGED
@@ -43,6 +43,29 @@ const defaultHeaderStyleProps = {
43
43
  },
44
44
  headerItemFocusStyleProps: {
45
45
  border: "2px dotted #000"
46
+ },
47
+ headerLeftGroupStyleProps: {
48
+ flex: 1,
49
+ minWidth: 0,
50
+ overflow: "hidden"
51
+ },
52
+ headerLeftGroupInnerContainerStyleProps: {
53
+ minWidth: 0,
54
+ overflow: "hidden",
55
+ flex: 1,
56
+ maxWidth: "100%"
57
+ },
58
+ titleContainerStyleProps: {
59
+ margin: 0,
60
+ minWidth: 0,
61
+ overflow: "hidden",
62
+ flex: 1,
63
+ maxWidth: "100%",
64
+ display: "-webkit-box",
65
+ WebkitLineClamp: 2,
66
+ WebkitBoxOrient: "vertical",
67
+ textOverflow: "ellipsis",
68
+ wordBreak: "break-word"
46
69
  }
47
70
  };
48
71
  exports.defaultHeaderStyleProps = defaultHeaderStyleProps;
package/lib/esm/components/header/Header.js CHANGED
@@ -11,7 +11,7 @@ import { processCustomComponents } from "../../common/utils";
11
11
  initializeIcons();
12
12
 
13
13
  function Header(props) {
14
- var _props$controlProps, _defaultHeaderProps$c, _defaultHeaderProps$s, _props$styleProps, _defaultHeaderProps$c2, _props$controlProps2, _defaultHeaderProps$c3, _props$controlProps3, _defaultHeaderProps$c4, _props$controlProps4, _defaultHeaderProps$c5, _props$controlProps5, _defaultHeaderProps$s2, _props$styleProps2, _defaultHeaderProps$s3, _props$styleProps3, _defaultHeaderProps$s4, _props$styleProps4, _defaultHeaderProps$s5, _props$styleProps5, _defaultHeaderProps$s6, _props$styleProps6, _defaultHeaderProps$s7, _props$styleProps7, _defaultHeaderProps$s8, _props$styleProps8, _props$controlProps6, _props$controlProps7, _props$controlProps7$, _props$controlProps8, _props$componentOverr, _props$controlProps9, _props$componentOverr2, _props$controlProps10, _props$controlProps11, _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$componentOverr3, _props$controlProps15, _props$controlProps16, _props$componentOverr4, _props$controlProps17;
14
+ var _props$controlProps, _defaultHeaderProps$c, _defaultHeaderProps$s, _props$styleProps, _defaultHeaderProps$c2, _props$controlProps2, _defaultHeaderProps$c3, _props$controlProps3, _defaultHeaderProps$c4, _props$controlProps4, _defaultHeaderProps$c5, _props$controlProps5, _defaultHeaderProps$s2, _props$styleProps2, _defaultHeaderProps$s3, _props$styleProps3, _defaultHeaderProps$s4, _props$styleProps4, _defaultHeaderProps$s5, _props$styleProps5, _defaultHeaderProps$s6, _props$styleProps6, _defaultHeaderProps$s7, _props$styleProps7, _defaultHeaderProps$s8, _props$styleProps8, _defaultHeaderProps$s9, _props$styleProps9, _defaultHeaderProps$s10, _props$styleProps10, _defaultHeaderProps$s11, _props$styleProps11, _props$controlProps6, _props$controlProps7, _props$controlProps7$, _props$controlProps8, _props$componentOverr, _props$controlProps9, _props$componentOverr2, _props$controlProps10, _props$controlProps11, _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$componentOverr3, _props$controlProps15, _props$controlProps16, _props$componentOverr4, _props$controlProps17;
15
15
 
16
16
  const headerId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? ((_defaultHeaderProps$c = defaultHeaderProps.controlProps) === null || _defaultHeaderProps$c === void 0 ? void 0 : _defaultHeaderProps$c.id);
17
17
  const stackStyles = {
@@ -34,6 +34,9 @@ function Header(props) {
34
34
  const minimizeButtonStyles = Object.assign({}, (_defaultHeaderProps$s6 = defaultHeaderProps.styleProps) === null || _defaultHeaderProps$s6 === void 0 ? void 0 : _defaultHeaderProps$s6.minimizeButtonStyleProps, (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : _props$styleProps6.minimizeButtonStyleProps);
35
35
  const minimizeButtonHoverStyles = Object.assign({}, (_defaultHeaderProps$s7 = defaultHeaderProps.styleProps) === null || _defaultHeaderProps$s7 === void 0 ? void 0 : _defaultHeaderProps$s7.minimizeButtonHoverStyleProps, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.minimizeButtonHoverStyleProps);
36
36
  const headerItemFocusStyles = Object.assign({}, (_defaultHeaderProps$s8 = defaultHeaderProps.styleProps) === null || _defaultHeaderProps$s8 === void 0 ? void 0 : _defaultHeaderProps$s8.headerItemFocusStyleProps, (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : _props$styleProps8.headerItemFocusStyleProps);
37
+ const headerLeftGroupStyles = Object.assign({}, (_defaultHeaderProps$s9 = defaultHeaderProps.styleProps) === null || _defaultHeaderProps$s9 === void 0 ? void 0 : _defaultHeaderProps$s9.headerLeftGroupStyleProps, (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : _props$styleProps9.headerLeftGroupStyleProps);
38
+ const headerLeftGroupInnerContainerStyles = Object.assign({}, (_defaultHeaderProps$s10 = defaultHeaderProps.styleProps) === null || _defaultHeaderProps$s10 === void 0 ? void 0 : _defaultHeaderProps$s10.headerLeftGroupInnerContainerStyleProps, (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : _props$styleProps10.headerLeftGroupInnerContainerStyleProps);
39
+ const titleContainerStyles = Object.assign({}, (_defaultHeaderProps$s11 = defaultHeaderProps.styleProps) === null || _defaultHeaderProps$s11 === void 0 ? void 0 : _defaultHeaderProps$s11.titleContainerStyleProps, (_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.titleContainerStyleProps);
37
40
  return /*#__PURE__*/React.createElement(Stack, {
38
41
  as: "article",
39
42
  id: headerId,
@@ -45,19 +48,28 @@ function Header(props) {
45
48
  }, /*#__PURE__*/React.createElement(Stack, {
46
49
  horizontal: true,
47
50
  id: Ids.HeaderLeftGroupId,
48
- verticalAlign: "center"
51
+ verticalAlign: "center",
52
+ styles: {
53
+ root: headerLeftGroupStyles
54
+ }
49
55
  }, /*#__PURE__*/React.createElement(Stack, {
50
56
  horizontal: true,
51
- verticalAlign: "center"
57
+ verticalAlign: "center",
58
+ styles: {
59
+ root: headerLeftGroupInnerContainerStyles
60
+ }
52
61
  }, processCustomComponents((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : (_props$controlProps7$ = _props$controlProps7.leftGroup) === null || _props$controlProps7$ === void 0 ? void 0 : _props$controlProps7$.children), !((_props$controlProps8 = props.controlProps) !== null && _props$controlProps8 !== void 0 && _props$controlProps8.hideIcon) && (decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.headerIcon) || /*#__PURE__*/React.createElement(Image, {
53
62
  id: chatIconProps.id,
54
63
  src: chatIconProps.src,
55
64
  alt: chatIconProps.alt,
56
65
  tabIndex: -1,
57
66
  styles: iconImageStyles
58
- })), !((_props$controlProps9 = props.controlProps) !== null && _props$controlProps9 !== void 0 && _props$controlProps9.hideTitle) && (decodeComponentString((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.headerTitle) || /*#__PURE__*/React.createElement("h1", null, /*#__PURE__*/React.createElement(Label, {
67
+ })), !((_props$controlProps9 = props.controlProps) !== null && _props$controlProps9 !== void 0 && _props$controlProps9.hideTitle) && (decodeComponentString((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.headerTitle) || /*#__PURE__*/React.createElement("h1", {
68
+ style: titleContainerStyles
69
+ }, /*#__PURE__*/React.createElement(Label, {
59
70
  id: titleProps.id,
60
71
  tabIndex: -1,
72
+ title: titleProps === null || titleProps === void 0 ? void 0 : titleProps.text,
61
73
  styles: titleStyles
62
74
  }, titleProps === null || titleProps === void 0 ? void 0 : titleProps.text))))), /*#__PURE__*/React.createElement(Stack, {
63
75
  horizontal: true,
package/lib/esm/components/header/common/defaultStyles/defaultHeaderStyleProps.js CHANGED
@@ -37,5 +37,28 @@ export const defaultHeaderStyleProps = {
37
37
  },
38
38
  headerItemFocusStyleProps: {
39
39
  border: "2px dotted #000"
40
+ },
41
+ headerLeftGroupStyleProps: {
42
+ flex: 1,
43
+ minWidth: 0,
44
+ overflow: "hidden"
45
+ },
46
+ headerLeftGroupInnerContainerStyleProps: {
47
+ minWidth: 0,
48
+ overflow: "hidden",
49
+ flex: 1,
50
+ maxWidth: "100%"
51
+ },
52
+ titleContainerStyleProps: {
53
+ margin: 0,
54
+ minWidth: 0,
55
+ overflow: "hidden",
56
+ flex: 1,
57
+ maxWidth: "100%",
58
+ display: "-webkit-box",
59
+ WebkitLineClamp: 2,
60
+ WebkitBoxOrient: "vertical",
61
+ textOverflow: "ellipsis",
62
+ wordBreak: "break-word"
40
63
  }
41
64
  };
package/lib/types/components/header/interfaces/IHeaderStyleProps.d.ts CHANGED
@@ -37,4 +37,16 @@ export interface IHeaderStyleProps {
37
37
  * header item button fucus style props
38
38
  */
39
39
  headerItemFocusStyleProps?: IStyle;
40
+ /**
41
+ * header left group container style props
42
+ */
43
+ headerLeftGroupStyleProps?: IStyle;
44
+ /**
45
+ * header left group inner container style props
46
+ */
47
+ headerLeftGroupInnerContainerStyleProps?: IStyle;
48
+ /**
49
+ * header title container (h1) style props
50
+ */
51
+ titleContainerStyleProps?: IStyle;
40
52
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microsoft/omnichannel-chat-components",
3
- "version": "1.1.17-main.4139523",
3
+ "version": "1.1.17-main.ec0d66a",
4
4
  "description": "Microsoft Omnichannel Chat Components",
5
5
  "main": "lib/cjs/index.js",
6
6
  "types": "lib/types/index.d.ts",