@zohodesk/dot 1.0.0-temp-187.23 → 1.0.0-temp-187.25

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 (14) hide show
  1. package/README.md +22 -0
  2. package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js +3 -3
  3. package/es/list/DepartmentDropDown/DepartmentDropDown.js +13 -11
  4. package/es/list/DepartmentDropDown/props/propTypes.js +2 -1
  5. package/es/list/Subject/Subject.js +1 -0
  6. package/es/list/status/StatusListItem/StatusListItem.module.css +0 -2
  7. package/es/list/status/StatusListItem/__tests__/__snapshots__/StatusListItem.spec.js.snap +30 -23
  8. package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js +3 -3
  9. package/lib/list/DepartmentDropDown/DepartmentDropDown.js +14 -11
  10. package/lib/list/DepartmentDropDown/props/propTypes.js +2 -1
  11. package/lib/list/Subject/Subject.js +1 -0
  12. package/lib/list/status/StatusListItem/StatusListItem.module.css +0 -2
  13. package/lib/list/status/StatusListItem/__tests__/__snapshots__/StatusListItem.spec.js.snap +30 -23
  14. package/package.json +7 -6
package/README.md CHANGED
@@ -2,6 +2,28 @@
2
2
 
3
3
  In this Library, we Provide Some Basic Components to Build Your Application
4
4
 
5
+ # 1.9.4
6
+
7
+ - **list/Subject** testId added in missed place (issue fix)
8
+
9
+ # 1.9.3
10
+
11
+ - **TagsMultiSelect**
12
+ - Added dropBoxClass under customClass in .
13
+ - Added ListItemProps support under customProps
14
+ - Renamed listItemProps to listProps inside item objects.
15
+
16
+ - Introduced --picklist-field-line-clamp CSS variable in **Fields.module.css** for common module form handling.
17
+
18
+ - Added ToggleDropDownProps to customProps in **DepartmentDropdown**.
19
+
20
+ - Added dropBoxClass via customClass in **StatusDropdown**.
21
+
22
+ - Introduced lhsAlignContent prop in **StatusListItem**.
23
+ - **v1** code removed.
24
+ - **CBT** cli migrated for build.
25
+
26
+
5
27
  # 1.9.2
6
28
 
7
29
  - **Highlight options added**
package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js CHANGED
@@ -286,9 +286,9 @@ export default class TagsMultiSelect extends React.Component {
286
286
  let {
287
287
  name,
288
288
  isNew,
289
- listProps
289
+ listItemProps: listProps
290
290
  } = item;
291
- return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, _extends({
291
+ return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, _extends({}, ListItemProps, {
292
292
  key: index,
293
293
  index: index,
294
294
  autoHover: true,
@@ -301,7 +301,7 @@ export default class TagsMultiSelect extends React.Component {
301
301
  isDisabled: listDisabled,
302
302
  customProps: listProps,
303
303
  customClass: listItemClass
304
- }, ListItemProps), isNew ? /*#__PURE__*/React.createElement(Container, {
304
+ }), isNew ? /*#__PURE__*/React.createElement(Container, {
305
305
  alignBox: "row",
306
306
  align: "vertical"
307
307
  }, /*#__PURE__*/React.createElement(Box, {
package/es/list/DepartmentDropDown/DepartmentDropDown.js CHANGED
@@ -54,7 +54,8 @@ class DepartmentDropDown extends Component {
54
54
  customProps
55
55
  } = this.props;
56
56
  const {
57
- ToggleDropDownProps = {}
57
+ ToggleDropDownProps = {},
58
+ DepartmentTextProps = {}
58
59
  } = customProps;
59
60
  let {
60
61
  title = 'Move Department',
@@ -62,29 +63,30 @@ class DepartmentDropDown extends Component {
62
63
  searchErrorText = 'No results',
63
64
  placeholder = 'Search Department'
64
65
  } = i18nKeys;
65
- return /*#__PURE__*/React.createElement(ToggleDropDown, _extends({}, ToggleDropDownProps, {
66
+ return /*#__PURE__*/React.createElement(ToggleDropDown, _extends({
67
+ keyName: "name",
68
+ idName: "id",
69
+ isArrow: false,
70
+ boxSize: "small",
71
+ isPadding: false,
72
+ isNeedEffect: false,
73
+ isSearch: departmentList.length > 5 || searchStr.length !== 0
74
+ }, ToggleDropDownProps, {
66
75
  title: title,
67
76
  options: departmentList,
68
- value: /*#__PURE__*/React.createElement(DepartmentText, {
77
+ value: /*#__PURE__*/React.createElement(DepartmentText, _extends({
69
78
  text: departmentName,
70
79
  dataTitle: departmentName
71
- }),
72
- keyName: "name",
73
- idName: "id",
80
+ }, DepartmentTextProps)),
74
81
  onClick: this.onMoveDepartment,
75
- isArrow: false,
76
82
  isEditable: isEditable,
77
83
  onSelectLabel: onSelectLabel,
78
84
  isPopupActive: isPopupActive,
79
85
  needExternalPopupState: true,
80
- isSearch: departmentList.length > 5 || searchStr.length !== 0,
81
- boxSize: "small",
82
86
  dataId: dataId,
83
87
  isDataLoaded: !isFetching,
84
- isPadding: false,
85
88
  searchErrorText: searchErrorText,
86
89
  searchEmptyHint: searchEmptyText,
87
- isNeedEffect: false,
88
90
  className: style.departmentBox,
89
91
  placeHolderText: placeholder,
90
92
  getNextOptions: getNextOptions,
package/es/list/DepartmentDropDown/props/propTypes.js CHANGED
@@ -22,6 +22,7 @@ export const propTypes = {
22
22
  placeholder: PropTypes.string
23
23
  }),
24
24
  customProps: PropTypes.shape({
25
- ToggleDropDownProps: PropTypes.object
25
+ ToggleDropDownProps: PropTypes.object,
26
+ DepartmentTextProps: PropTypes.object
26
27
  })
27
28
  };
package/es/list/Subject/Subject.js CHANGED
@@ -53,6 +53,7 @@ export default class Subject extends Component {
53
53
  $i18n_dataTitle: text,
54
54
  $ui_className: `${style.subject} ${whiteSpaceClassMapping[whiteSpace]} ${className} ${style.cursorPointer}`,
55
55
  customId: dataId,
56
+ testId: dataId,
56
57
  $flag_dotted: isDotted,
57
58
  $ui_weight: fontWeight,
58
59
  $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
package/es/list/status/StatusListItem/StatusListItem.module.css CHANGED
@@ -112,9 +112,7 @@
112
112
  content: '';
113
113
  height: var(--status_listitem_bullet_size);
114
114
  width: var(--status_listitem_bullet_size);
115
- /* css:theme-validation:ignore */
116
115
  border-radius: 50%;
117
- background-color: var(--zdt_statuslistitem_black_bg);
118
116
  }
119
117
  [dir=ltr] .statusType::after{
120
118
  margin-right: var(--zd_size12) ;
package/es/list/status/StatusListItem/__tests__/__snapshots__/StatusListItem.spec.js.snap CHANGED
@@ -3,7 +3,7 @@
3
3
  exports[`StatusListItem rendering the defult props 1`] = `
4
4
  <DocumentFragment>
5
5
  <li
6
- class="list medium default withBorder flex rowdir baseline"
6
+ class="list medium default withBorder flex rowdir vCenter"
7
7
  data-a11y-inset-focus="true"
8
8
  data-id="undefined"
9
9
  data-selector-id="container"
@@ -11,35 +11,42 @@ exports[`StatusListItem rendering the defult props 1`] = `
11
11
  tabindex="0"
12
12
  >
13
13
  <div
14
- class="statusType black shrinkOff"
15
- data-id="boxComponent"
16
- data-selector-id="box"
17
- data-test-id="boxComponent"
18
- />
19
- <div
20
- class="grow basis shrinkOn"
14
+ class="contentWrapper shrinkOff"
21
15
  data-id="boxComponent"
22
16
  data-selector-id="box"
23
17
  data-test-id="boxComponent"
24
18
  >
25
19
  <div
26
- class="flex cover rowdir vCenter"
27
- data-id="containerComponent"
28
- data-selector-id="container"
29
- data-test-id="containerComponent"
20
+ class="statusType black shrinkOff selfStart"
21
+ data-id="boxComponent"
22
+ data-selector-id="box"
23
+ data-test-id="boxComponent"
24
+ />
25
+ <div
26
+ class="grow basis shrinkOn"
27
+ data-id="boxComponent"
28
+ data-selector-id="box"
29
+ data-test-id="boxComponent"
30
30
  >
31
31
  <div
32
- class="value shrinkOn"
33
- data-id="boxComponent"
34
- data-selector-id="box"
35
- data-test-id="boxComponent"
36
- />
37
- <div
38
- class="shrinkOff"
39
- data-id="boxComponent"
40
- data-selector-id="box"
41
- data-test-id="boxComponent"
42
- />
32
+ class="flex cover rowdir vCenter"
33
+ data-id="containerComponent"
34
+ data-selector-id="container"
35
+ data-test-id="containerComponent"
36
+ >
37
+ <div
38
+ class="value shrinkOn"
39
+ data-id="boxComponent"
40
+ data-selector-id="box"
41
+ data-test-id="boxComponent"
42
+ />
43
+ <div
44
+ class="shrinkOff"
45
+ data-id="boxComponent"
46
+ data-selector-id="box"
47
+ data-test-id="boxComponent"
48
+ />
49
+ </div>
43
50
  </div>
44
51
  </div>
45
52
  </li>
package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js CHANGED
@@ -342,8 +342,8 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
342
342
  }, searchList.map(function (item, index) {
343
343
  var name = item.name,
344
344
  isNew = item.isNew,
345
- listProps = item.listProps;
346
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
345
+ listProps = item.listItemProps;
346
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({}, ListItemProps, {
347
347
  key: index,
348
348
  index: index,
349
349
  autoHover: true,
@@ -356,7 +356,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
356
356
  isDisabled: listDisabled,
357
357
  customProps: listProps,
358
358
  customClass: listItemClass
359
- }, ListItemProps), isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
359
+ }), isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
360
360
  alignBox: "row",
361
361
  align: "vertical"
362
362
  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
package/lib/list/DepartmentDropDown/DepartmentDropDown.js CHANGED
@@ -105,7 +105,9 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
105
105
  i18nKeys = _this$props3.i18nKeys,
106
106
  customProps = _this$props3.customProps;
107
107
  var _customProps$ToggleDr = customProps.ToggleDropDownProps,
108
- ToggleDropDownProps = _customProps$ToggleDr === void 0 ? {} : _customProps$ToggleDr;
108
+ ToggleDropDownProps = _customProps$ToggleDr === void 0 ? {} : _customProps$ToggleDr,
109
+ _customProps$Departme = customProps.DepartmentTextProps,
110
+ DepartmentTextProps = _customProps$Departme === void 0 ? {} : _customProps$Departme;
109
111
  var _i18nKeys$title = i18nKeys.title,
110
112
  title = _i18nKeys$title === void 0 ? 'Move Department' : _i18nKeys$title,
111
113
  _i18nKeys$searchEmpty = i18nKeys.searchEmptyText,
@@ -114,29 +116,30 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
114
116
  searchErrorText = _i18nKeys$searchError === void 0 ? 'No results' : _i18nKeys$searchError,
115
117
  _i18nKeys$placeholder = i18nKeys.placeholder,
116
118
  placeholder = _i18nKeys$placeholder === void 0 ? 'Search Department' : _i18nKeys$placeholder;
117
- return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], _extends({}, ToggleDropDownProps, {
119
+ return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], _extends({
120
+ keyName: "name",
121
+ idName: "id",
122
+ isArrow: false,
123
+ boxSize: "small",
124
+ isPadding: false,
125
+ isNeedEffect: false,
126
+ isSearch: departmentList.length > 5 || searchStr.length !== 0
127
+ }, ToggleDropDownProps, {
118
128
  title: title,
119
129
  options: departmentList,
120
- value: /*#__PURE__*/_react["default"].createElement(_SecondaryText.DepartmentText, {
130
+ value: /*#__PURE__*/_react["default"].createElement(_SecondaryText.DepartmentText, _extends({
121
131
  text: departmentName,
122
132
  dataTitle: departmentName
123
- }),
124
- keyName: "name",
125
- idName: "id",
133
+ }, DepartmentTextProps)),
126
134
  onClick: this.onMoveDepartment,
127
- isArrow: false,
128
135
  isEditable: isEditable,
129
136
  onSelectLabel: onSelectLabel,
130
137
  isPopupActive: isPopupActive,
131
138
  needExternalPopupState: true,
132
- isSearch: departmentList.length > 5 || searchStr.length !== 0,
133
- boxSize: "small",
134
139
  dataId: dataId,
135
140
  isDataLoaded: !isFetching,
136
- isPadding: false,
137
141
  searchErrorText: searchErrorText,
138
142
  searchEmptyHint: searchEmptyText,
139
- isNeedEffect: false,
140
143
  className: _DepartmentDropDownModule["default"].departmentBox,
141
144
  placeHolderText: placeholder,
142
145
  getNextOptions: getNextOptions,
package/lib/list/DepartmentDropDown/props/propTypes.js CHANGED
@@ -32,6 +32,7 @@ var propTypes = (_propTypes = {
32
32
  searchErrorText: _propTypes2["default"].string,
33
33
  placeholder: _propTypes2["default"].string
34
34
  })), _defineProperty(_propTypes, "customProps", _propTypes2["default"].shape({
35
- ToggleDropDownProps: _propTypes2["default"].object
35
+ ToggleDropDownProps: _propTypes2["default"].object,
36
+ DepartmentTextProps: _propTypes2["default"].object
36
37
  })), _propTypes);
37
38
  exports.propTypes = propTypes;
package/lib/list/Subject/Subject.js CHANGED
@@ -111,6 +111,7 @@ var Subject = /*#__PURE__*/function (_Component) {
111
111
  $i18n_dataTitle: text,
112
112
  $ui_className: "".concat(_SubjectModule["default"].subject, " ").concat(_cssUtils.whiteSpaceClassMapping[whiteSpace], " ").concat(className, " ").concat(_SubjectModule["default"].cursorPointer),
113
113
  customId: dataId,
114
+ testId: dataId,
114
115
  $flag_dotted: isDotted,
115
116
  $ui_weight: fontWeight,
116
117
  $ui_highlightConfig: isHighlighted ? highlightData : _Common.DUMMY_OBJECT
package/lib/list/status/StatusListItem/StatusListItem.module.css CHANGED
@@ -112,9 +112,7 @@
112
112
  content: '';
113
113
  height: var(--status_listitem_bullet_size);
114
114
  width: var(--status_listitem_bullet_size);
115
- /* css:theme-validation:ignore */
116
115
  border-radius: 50%;
117
- background-color: var(--zdt_statuslistitem_black_bg);
118
116
  }
119
117
  [dir=ltr] .statusType::after{
120
118
  margin-right: var(--zd_size12) ;
package/lib/list/status/StatusListItem/__tests__/__snapshots__/StatusListItem.spec.js.snap CHANGED
@@ -3,7 +3,7 @@
3
3
  exports[`StatusListItem rendering the defult props 1`] = `
4
4
  <DocumentFragment>
5
5
  <li
6
- class="list medium default withBorder flex rowdir baseline"
6
+ class="list medium default withBorder flex rowdir vCenter"
7
7
  data-a11y-inset-focus="true"
8
8
  data-id="undefined"
9
9
  data-selector-id="container"
@@ -11,35 +11,42 @@ exports[`StatusListItem rendering the defult props 1`] = `
11
11
  tabindex="0"
12
12
  >
13
13
  <div
14
- class="statusType black shrinkOff"
15
- data-id="boxComponent"
16
- data-selector-id="box"
17
- data-test-id="boxComponent"
18
- />
19
- <div
20
- class="grow basis shrinkOn"
14
+ class="contentWrapper shrinkOff"
21
15
  data-id="boxComponent"
22
16
  data-selector-id="box"
23
17
  data-test-id="boxComponent"
24
18
  >
25
19
  <div
26
- class="flex cover rowdir vCenter"
27
- data-id="containerComponent"
28
- data-selector-id="container"
29
- data-test-id="containerComponent"
20
+ class="statusType black shrinkOff selfStart"
21
+ data-id="boxComponent"
22
+ data-selector-id="box"
23
+ data-test-id="boxComponent"
24
+ />
25
+ <div
26
+ class="grow basis shrinkOn"
27
+ data-id="boxComponent"
28
+ data-selector-id="box"
29
+ data-test-id="boxComponent"
30
30
  >
31
31
  <div
32
- class="value shrinkOn"
33
- data-id="boxComponent"
34
- data-selector-id="box"
35
- data-test-id="boxComponent"
36
- />
37
- <div
38
- class="shrinkOff"
39
- data-id="boxComponent"
40
- data-selector-id="box"
41
- data-test-id="boxComponent"
42
- />
32
+ class="flex cover rowdir vCenter"
33
+ data-id="containerComponent"
34
+ data-selector-id="container"
35
+ data-test-id="containerComponent"
36
+ >
37
+ <div
38
+ class="value shrinkOn"
39
+ data-id="boxComponent"
40
+ data-selector-id="box"
41
+ data-test-id="boxComponent"
42
+ />
43
+ <div
44
+ class="shrinkOff"
45
+ data-id="boxComponent"
46
+ data-selector-id="box"
47
+ data-test-id="boxComponent"
48
+ />
49
+ </div>
43
50
  </div>
44
51
  </div>
45
52
  </li>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/dot",
3
- "version": "1.0.0-temp-187.23",
3
+ "version": "1.0.0-temp-187.25",
4
4
  "main": "lib/index",
5
5
  "module": "es/index.js",
6
6
  "private": false,
@@ -21,8 +21,9 @@
21
21
  "dubCheck": "node ./node_modules/@zohodesk-private/node-plugins/es/dublication_css_file_finder node_modules/@zohodesk/components/es node_modules/@zohodesk/icons/es node_modules/@zohodesk/variables/es node_modules/@zohodesk/svg/es",
22
22
  "build:lib": "cbt build:lib src,assets lib,assets",
23
23
  "build:es": "cbt build:es src,assets es,assets",
24
+ "build:es:watch": "cbt build:es src es",
24
25
  "build": "npm run theme:validate && npm run build:lib && npm run build:es",
25
- "build:watch": "npm run build:es --module:mode=dev -- -w",
26
+ "build:watch": "npm run build:es:watch --module:mode=dev -- -w",
26
27
  "prepare": "npm run clean && npm run css:build",
27
28
  "lint": "react-cli lint",
28
29
  "lintAll": "react-cli lint ./src",
@@ -67,9 +68,9 @@
67
68
  "@zohodesk-private/node-plugins": "1.1.13",
68
69
  "@zohodesk-private/react-prop-validator": "1.2.3",
69
70
  "@zohodesk/a11y": "2.3.8",
70
- "@zohodesk/components": "../components",
71
+ "@zohodesk/components": "1.6.3",
71
72
  "@zohodesk/hooks": "2.0.6",
72
- "@zohodesk/icons": "1.2.1",
73
+ "@zohodesk/icons": "1.2.4",
73
74
  "@zohodesk/layout": "^3.1.0",
74
75
  "@zohodesk/svg": "1.3.2",
75
76
  "@zohodesk/utils": "1.3.16",
@@ -84,8 +85,8 @@
84
85
  "peerDependencies": {
85
86
  "velocity-react": "1.4.3",
86
87
  "@zohodesk/variables": "1.2.0",
87
- "@zohodesk/components": "1.6.1",
88
- "@zohodesk/icons": "1.2.1",
88
+ "@zohodesk/components": "1.6.3",
89
+ "@zohodesk/icons": "1.2.4",
89
90
  "@zohodesk/svg": "1.3.2",
90
91
  "@zohodesk/virtualizer": "1.0.13",
91
92
  "react-sortable-hoc": "^0.8.3",