@zohodesk/components 1.0.0-temp-136 → 1.0.0-temp-138

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/README.md CHANGED
@@ -32,6 +32,8 @@ In this Package, we Provide Some Basic Components to Build Web App
32
32
  - TextBoxIcon
33
33
  - Tooltip
34
34
 
35
+ # 1.0.0-alpha-262
36
+ - **Listitem,ListitemwithAvatar,ListitemwithCheckbox,ListitemwithIcon,ListitemwithRadio** - Added New Prop 'needMultiLineText'
35
37
  # 1.0.0-alpha-261
36
38
 
37
39
  - **Tab,Tabs** - Removed offsection property from css.
package/css_error.log ADDED
File without changes
@@ -65,7 +65,7 @@ export default class ListItem extends React.Component {
65
65
  a11y,
66
66
  customClass,
67
67
  customProps,
68
- isMultiLineNeeded
68
+ needMultiLineText
69
69
  } = this.props;
70
70
  let {
71
71
  ListItemProps = {},
@@ -105,7 +105,7 @@ export default class ListItem extends React.Component {
105
105
  }, ContainerProps), value ? /*#__PURE__*/React.createElement(Box, {
106
106
  shrink: true,
107
107
  adjust: true,
108
- className: isMultiLineNeeded ? style.multiLineValue : style.value
108
+ className: needMultiLineText ? style.multiLineValue : style.value
109
109
  }, value) : null, children ? /*#__PURE__*/React.createElement(Box, {
110
110
  shrink: true,
111
111
  adjust: true,
@@ -75,6 +75,7 @@
75
75
  composes: dotted from '../common/common.module.css';
76
76
  }
77
77
  .multiLineValue{
78
+ word-break: break-word;
78
79
  line-height: var(--zd_size18);
79
80
  composes: clamp from '../common/common.module.css'
80
81
  }
@@ -70,7 +70,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
70
70
  a11y,
71
71
  customClass,
72
72
  customProps,
73
- isMultiLineNeeded
73
+ needMultiLineText
74
74
  } = this.props;
75
75
  let {
76
76
  ListItemProps = {},
@@ -131,7 +131,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
131
131
  flexible: true,
132
132
  shrink: true,
133
133
  "data-title": isDisabled ? null : title,
134
- className: isMultiLineNeeded ? style.multiLineValue : style.value
134
+ className: needMultiLineText ? style.multiLineValue : style.value
135
135
  }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
136
136
  className: style.tickIcon,
137
137
  "aria-hidden": ariaHidden,
@@ -56,7 +56,7 @@ export default class ListItemWithCheckBox extends React.Component {
56
56
  a11y,
57
57
  customClass,
58
58
  customProps,
59
- isMultiLineNeeded
59
+ needMultiLineText
60
60
  } = this.props;
61
61
  let {
62
62
  ListItemProps = {},
@@ -99,7 +99,7 @@ export default class ListItemWithCheckBox extends React.Component {
99
99
  flexible: true,
100
100
  shrink: true,
101
101
  "data-title": isDisabled ? null : title,
102
- className: isMultiLineNeeded ? style.multiLineValue : style.value
102
+ className: needMultiLineText ? style.multiLineValue : style.value
103
103
  }, value));
104
104
  }
105
105
  }
@@ -66,7 +66,7 @@ export default class ListItemWithIcon extends React.Component {
66
66
  a11y,
67
67
  customClass,
68
68
  customProps,
69
- isMultiLineNeeded
69
+ needMultiLineText
70
70
  } = this.props;
71
71
  let {
72
72
  ListItemProps = {},
@@ -111,7 +111,7 @@ export default class ListItemWithIcon extends React.Component {
111
111
  }) : null, value && /*#__PURE__*/React.createElement(Box, {
112
112
  flexible: true,
113
113
  shrink: true,
114
- className: isMultiLineNeeded ? style.multiLineValue : style.value,
114
+ className: needMultiLineText ? style.multiLineValue : style.value,
115
115
  "data-title": isDisabled ? null : title,
116
116
  dataId: `${dataIdString}_Text`
117
117
  }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {
@@ -57,7 +57,7 @@ export default class ListItemWithRadio extends React.Component {
57
57
  a11y,
58
58
  customClass,
59
59
  customProps,
60
- isMultiLineNeeded
60
+ needMultiLineText
61
61
  } = this.props;
62
62
  let {
63
63
  ListItemProps = {},
@@ -101,7 +101,7 @@ export default class ListItemWithRadio extends React.Component {
101
101
  flexible: true,
102
102
  shrink: true,
103
103
  "data-title": disableTitle ? null : title,
104
- className: isMultiLineNeeded ? style.multiLineValue : style.value
104
+ className: needMultiLineText ? style.multiLineValue : style.value
105
105
  }, value));
106
106
  }
107
107
  }
@@ -12,7 +12,7 @@ export const ListContainerDefaultProps = {
12
12
  customClass: '',
13
13
  customProps: {},
14
14
  dataSelectorId: 'listContainer',
15
- isMultiLineNeeded: false
15
+ needMultiLineText: false
16
16
  };
17
17
  export const ListItemDefaultProps = {
18
18
  active: false,
@@ -29,7 +29,7 @@ export const ListItemDefaultProps = {
29
29
  customClass: {},
30
30
  customProps: {},
31
31
  dataSelectorId: 'listItem',
32
- isMultiLineNeeded: false
32
+ needMultiLineText: false
33
33
  };
34
34
  export const ListItemWithAvatarDefaultProps = {
35
35
  active: false,
@@ -47,7 +47,7 @@ export const ListItemWithAvatarDefaultProps = {
47
47
  customClass: {},
48
48
  customProps: {},
49
49
  dataSelectorId: 'listItemWithAvatar',
50
- isMultiLineNeeded: false
50
+ needMultiLineText: false
51
51
  };
52
52
  export const ListItemWithCheckBoxDefaultProps = {
53
53
  active: false,
@@ -61,7 +61,7 @@ export const ListItemWithCheckBoxDefaultProps = {
61
61
  customClass: {},
62
62
  customProps: {},
63
63
  dataSelectorId: 'listItemWithCheckBox',
64
- isMultiLineNeeded: false
64
+ needMultiLineText: false
65
65
  };
66
66
  export const ListItemWithIconDefaultProps = {
67
67
  active: false,
@@ -78,7 +78,7 @@ export const ListItemWithIconDefaultProps = {
78
78
  customClass: '',
79
79
  customProps: {},
80
80
  dataSelectorId: 'listItemWithIcon',
81
- isMultiLineNeeded: false
81
+ needMultiLineText: false
82
82
  };
83
83
  export const ListItemWithRadioDefaultProps = {
84
84
  active: false,
@@ -93,5 +93,5 @@ export const ListItemWithRadioDefaultProps = {
93
93
  customClass: {},
94
94
  customProps: {},
95
95
  dataSelectorId: 'listItemWithRadio',
96
- isMultiLineNeeded: false
96
+ needMultiLineText: false
97
97
  };
@@ -24,7 +24,8 @@ export const ListContainer_Props = {
24
24
  ariaSelected: PropTypes.bool
25
25
  }),
26
26
  customClass: PropTypes.string,
27
- customProps: PropTypes.object
27
+ customProps: PropTypes.object,
28
+ needMultiLineText: PropTypes.bool
28
29
  };
29
30
  export const ListItem_Props = {
30
31
  active: PropTypes.bool,
@@ -53,6 +54,7 @@ export const ListItem_Props = {
53
54
  role: PropTypes.string,
54
55
  ariaSelected: PropTypes.bool
55
56
  }),
57
+ needMultiLineText: PropTypes.bool,
56
58
  customClass: PropTypes.shape({
57
59
  customListItem: PropTypes.string,
58
60
  customTickIcon: PropTypes.string
@@ -97,6 +99,7 @@ export const ListItemWithAvatar_Props = {
97
99
  customAvatar: PropTypes.string,
98
100
  customAvatarTeam: PropTypes.string
99
101
  }),
102
+ needMultiLineText: PropTypes.bool,
100
103
  customProps: PropTypes.shape({
101
104
  ListItemProps: PropTypes.object
102
105
  })
@@ -123,6 +126,7 @@ export const ListItemWithCheckBox_Props = {
123
126
  role: PropTypes.string,
124
127
  ariaSelected: PropTypes.bool
125
128
  }),
129
+ needMultiLineText: PropTypes.bool,
126
130
  customClass: PropTypes.shape({
127
131
  customListItem: PropTypes.string,
128
132
  customCheckBox: PropTypes.string,
@@ -156,6 +160,7 @@ export const ListItemWithIcon_Props = {
156
160
  ariaSelected: PropTypes.bool,
157
161
  ariaHidden: PropTypes.bool
158
162
  }),
163
+ needMultiLineText: PropTypes.bool,
159
164
  customClass: PropTypes.string,
160
165
  customProps: PropTypes.shape({
161
166
  ListItemProps: PropTypes.object
@@ -183,6 +188,7 @@ export const ListItemWithRadio_Props = {
183
188
  role: PropTypes.string,
184
189
  ariaSelected: PropTypes.bool
185
190
  }),
191
+ needMultiLineText: PropTypes.bool,
186
192
  customClass: PropTypes.shape({
187
193
  customListItem: PropTypes.string,
188
194
  customRadio: PropTypes.string,
@@ -349,7 +349,6 @@ export function isTextSelected() {
349
349
  let selectedText = '';
350
350
  if (window.getSelection) {
351
351
  selectedText = window.getSelection().toString();
352
- console.log(selectedText, 'selectedText');
353
352
  } else if (document.getSelection) {
354
353
  selectedText = document.getSelection().toString();
355
354
  }
@@ -92,7 +92,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
92
92
  a11y = _this$props4.a11y,
93
93
  customClass = _this$props4.customClass,
94
94
  customProps = _this$props4.customProps,
95
- isMultiLineNeeded = _this$props4.isMultiLineNeeded;
95
+ needMultiLineText = _this$props4.needMultiLineText;
96
96
  var _customProps$ListItem = customProps.ListItemProps,
97
97
  ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
98
98
  _customProps$Containe = customProps.ContainerProps,
@@ -130,7 +130,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
130
130
  }, ContainerProps), value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
131
131
  shrink: true,
132
132
  adjust: true,
133
- className: isMultiLineNeeded ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
133
+ className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
134
134
  }, value) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
135
135
  shrink: true,
136
136
  adjust: true,
@@ -75,6 +75,7 @@
75
75
  composes: dotted from '../common/common.module.css';
76
76
  }
77
77
  .multiLineValue{
78
+ word-break: break-word;
78
79
  line-height: var(--zd_size18);
79
80
  composes: clamp from '../common/common.module.css'
80
81
  }
@@ -96,7 +96,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
96
96
  a11y = _this$props4.a11y,
97
97
  customClass = _this$props4.customClass,
98
98
  customProps = _this$props4.customProps,
99
- isMultiLineNeeded = _this$props4.isMultiLineNeeded;
99
+ needMultiLineText = _this$props4.needMultiLineText;
100
100
  var _customProps$ListItem = customProps.ListItemProps,
101
101
  ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
102
102
  _customProps$Containe = customProps.ContainerProps,
@@ -156,7 +156,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
156
156
  flexible: true,
157
157
  shrink: true,
158
158
  "data-title": isDisabled ? null : title,
159
- className: isMultiLineNeeded ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
159
+ className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
160
160
  }, value) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
161
161
  className: _ListItemModule["default"].tickIcon,
162
162
  "aria-hidden": ariaHidden,
@@ -86,7 +86,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
86
86
  a11y = _this$props4.a11y,
87
87
  customClass = _this$props4.customClass,
88
88
  customProps = _this$props4.customProps,
89
- isMultiLineNeeded = _this$props4.isMultiLineNeeded;
89
+ needMultiLineText = _this$props4.needMultiLineText;
90
90
  var _customProps$ListItem = customProps.ListItemProps,
91
91
  ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
92
92
  _customProps$Containe = customProps.ContainerProps,
@@ -129,7 +129,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
129
129
  flexible: true,
130
130
  shrink: true,
131
131
  "data-title": isDisabled ? null : title,
132
- className: isMultiLineNeeded ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
132
+ className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
133
133
  }, value));
134
134
  }
135
135
  }]);
@@ -94,7 +94,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
94
94
  a11y = _this$props4.a11y,
95
95
  customClass = _this$props4.customClass,
96
96
  customProps = _this$props4.customProps,
97
- isMultiLineNeeded = _this$props4.isMultiLineNeeded;
97
+ needMultiLineText = _this$props4.needMultiLineText;
98
98
  var _customProps$ListItem = customProps.ListItemProps,
99
99
  ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
100
100
  _customProps$Containe = customProps.ContainerProps,
@@ -137,7 +137,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
137
137
  }) : null, value && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
138
138
  flexible: true,
139
139
  shrink: true,
140
- className: isMultiLineNeeded ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value,
140
+ className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value,
141
141
  "data-title": isDisabled ? null : title,
142
142
  dataId: "".concat(dataIdString, "_Text")
143
143
  }, value), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -87,7 +87,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
87
87
  a11y = _this$props4.a11y,
88
88
  customClass = _this$props4.customClass,
89
89
  customProps = _this$props4.customProps,
90
- isMultiLineNeeded = _this$props4.isMultiLineNeeded;
90
+ needMultiLineText = _this$props4.needMultiLineText;
91
91
  var _customProps$ListItem = customProps.ListItemProps,
92
92
  ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
93
93
  _customProps$Containe = customProps.ContainerProps,
@@ -131,7 +131,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
131
131
  flexible: true,
132
132
  shrink: true,
133
133
  "data-title": disableTitle ? null : title,
134
- className: isMultiLineNeeded ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
134
+ className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
135
135
  }, value));
136
136
  }
137
137
  }]);
@@ -18,7 +18,7 @@ var ListContainerDefaultProps = {
18
18
  customClass: '',
19
19
  customProps: {},
20
20
  dataSelectorId: 'listContainer',
21
- isMultiLineNeeded: false
21
+ needMultiLineText: false
22
22
  };
23
23
  exports.ListContainerDefaultProps = ListContainerDefaultProps;
24
24
  var ListItemDefaultProps = {
@@ -36,7 +36,7 @@ var ListItemDefaultProps = {
36
36
  customClass: {},
37
37
  customProps: {},
38
38
  dataSelectorId: 'listItem',
39
- isMultiLineNeeded: false
39
+ needMultiLineText: false
40
40
  };
41
41
  exports.ListItemDefaultProps = ListItemDefaultProps;
42
42
  var ListItemWithAvatarDefaultProps = {
@@ -55,7 +55,7 @@ var ListItemWithAvatarDefaultProps = {
55
55
  customClass: {},
56
56
  customProps: {},
57
57
  dataSelectorId: 'listItemWithAvatar',
58
- isMultiLineNeeded: false
58
+ needMultiLineText: false
59
59
  };
60
60
  exports.ListItemWithAvatarDefaultProps = ListItemWithAvatarDefaultProps;
61
61
  var ListItemWithCheckBoxDefaultProps = {
@@ -70,7 +70,7 @@ var ListItemWithCheckBoxDefaultProps = {
70
70
  customClass: {},
71
71
  customProps: {},
72
72
  dataSelectorId: 'listItemWithCheckBox',
73
- isMultiLineNeeded: false
73
+ needMultiLineText: false
74
74
  };
75
75
  exports.ListItemWithCheckBoxDefaultProps = ListItemWithCheckBoxDefaultProps;
76
76
  var ListItemWithIconDefaultProps = {
@@ -88,7 +88,7 @@ var ListItemWithIconDefaultProps = {
88
88
  customClass: '',
89
89
  customProps: {},
90
90
  dataSelectorId: 'listItemWithIcon',
91
- isMultiLineNeeded: false
91
+ needMultiLineText: false
92
92
  };
93
93
  exports.ListItemWithIconDefaultProps = ListItemWithIconDefaultProps;
94
94
  var ListItemWithRadioDefaultProps = {
@@ -104,6 +104,6 @@ var ListItemWithRadioDefaultProps = {
104
104
  customClass: {},
105
105
  customProps: {},
106
106
  dataSelectorId: 'listItemWithRadio',
107
- isMultiLineNeeded: false
107
+ needMultiLineText: false
108
108
  };
109
109
  exports.ListItemWithRadioDefaultProps = ListItemWithRadioDefaultProps;
@@ -36,7 +36,8 @@ var ListContainer_Props = {
36
36
  ariaSelected: _propTypes["default"].bool
37
37
  }),
38
38
  customClass: _propTypes["default"].string,
39
- customProps: _propTypes["default"].object
39
+ customProps: _propTypes["default"].object,
40
+ needMultiLineText: _propTypes["default"].bool
40
41
  };
41
42
  exports.ListContainer_Props = ListContainer_Props;
42
43
  var ListItem_Props = {
@@ -66,6 +67,7 @@ var ListItem_Props = {
66
67
  role: _propTypes["default"].string,
67
68
  ariaSelected: _propTypes["default"].bool
68
69
  }),
70
+ needMultiLineText: _propTypes["default"].bool,
69
71
  customClass: _propTypes["default"].shape({
70
72
  customListItem: _propTypes["default"].string,
71
73
  customTickIcon: _propTypes["default"].string
@@ -87,7 +89,7 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
87
89
  customListItem: _propTypes["default"].string,
88
90
  customAvatar: _propTypes["default"].string,
89
91
  customAvatarTeam: _propTypes["default"].string
90
- })), _defineProperty(_ListItemWithAvatar_P, "customProps", _propTypes["default"].shape({
92
+ })), _defineProperty(_ListItemWithAvatar_P, "needMultiLineText", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "customProps", _propTypes["default"].shape({
91
93
  ListItemProps: _propTypes["default"].object
92
94
  })), _ListItemWithAvatar_P);
93
95
  exports.ListItemWithAvatar_Props = ListItemWithAvatar_Props;
@@ -113,6 +115,7 @@ var ListItemWithCheckBox_Props = {
113
115
  role: _propTypes["default"].string,
114
116
  ariaSelected: _propTypes["default"].bool
115
117
  }),
118
+ needMultiLineText: _propTypes["default"].bool,
116
119
  customClass: _propTypes["default"].shape({
117
120
  customListItem: _propTypes["default"].string,
118
121
  customCheckBox: _propTypes["default"].string,
@@ -147,6 +150,7 @@ var ListItemWithIcon_Props = {
147
150
  ariaSelected: _propTypes["default"].bool,
148
151
  ariaHidden: _propTypes["default"].bool
149
152
  }),
153
+ needMultiLineText: _propTypes["default"].bool,
150
154
  customClass: _propTypes["default"].string,
151
155
  customProps: _propTypes["default"].shape({
152
156
  ListItemProps: _propTypes["default"].object
@@ -175,6 +179,7 @@ var ListItemWithRadio_Props = {
175
179
  role: _propTypes["default"].string,
176
180
  ariaSelected: _propTypes["default"].bool
177
181
  }),
182
+ needMultiLineText: _propTypes["default"].bool,
178
183
  customClass: _propTypes["default"].shape({
179
184
  customListItem: _propTypes["default"].string,
180
185
  customRadio: _propTypes["default"].string,
@@ -396,7 +396,6 @@ function isTextSelected() {
396
396
  var selectedText = '';
397
397
  if (window.getSelection) {
398
398
  selectedText = window.getSelection().toString();
399
- console.log(selectedText, 'selectedText');
400
399
  } else if (document.getSelection) {
401
400
  selectedText = document.getSelection().toString();
402
401
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/components",
3
- "version": "1.0.0-temp-136",
3
+ "version": "1.0.0-temp-138",
4
4
  "main": "es/index.js",
5
5
  "module": "es/index.js",
6
6
  "private": false,
@@ -47,12 +47,12 @@
47
47
  },
48
48
  "devDependencies": {
49
49
  "@zohodesk/docstool": "1.0.0-alpha-2",
50
- "@zohodesk/variables": "1.0.0-beta.29",
50
+ "@zohodesk/variables": "1.0.0-beta.30",
51
51
  "@zohodesk/icons": "1.0.0-beta.119",
52
52
  "@zohodesk/virtualizer": "1.0.3",
53
53
  "velocity-react": "1.4.3",
54
54
  "react-sortable-hoc": "^0.8.3",
55
- "@zohodesk/svg": "1.0.0-beta.48",
55
+ "@zohodesk/svg": "1.0.0-beta.54",
56
56
  "@zohodesk/a11y": "1.3.7"
57
57
  },
58
58
  "dependencies": {
@@ -63,8 +63,8 @@
63
63
  },
64
64
  "peerDependencies": {
65
65
  "@zohodesk/icons": "1.0.0-beta.119",
66
- "@zohodesk/variables": "1.0.0-beta.29",
67
- "@zohodesk/svg": "1.0.0-beta.49",
66
+ "@zohodesk/variables": "1.0.0-beta.30",
67
+ "@zohodesk/svg": "1.0.0-beta.54",
68
68
  "@zohodesk/virtualizer": "1.0.3",
69
69
  "velocity-react": "1.4.3",
70
70
  "react-sortable-hoc": "^0.8.3",