@zohodesk/dot 1.0.0-temp-187.3 → 1.0.0-temp-187.4

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 (31) hide show
  1. package/.cli/propValidation_report.html +1 -1
  2. package/README.md +4 -0
  3. package/es/form/fields/TagsMultiSelect/props/propTypes.js +2 -1
  4. package/es/list/DepartmentDropDown/props/propTypes.js +3 -1
  5. package/es/lookup/header/Search/LookupSearch.module.css +33 -27
  6. package/es/lookup/header/Search/Search.js +58 -40
  7. package/es/lookup/header/Search/__tests__/Search.spec.js +67 -1
  8. package/es/lookup/header/Search/__tests__/__snapshots__/Search.spec.js.snap +316 -3
  9. package/es/lookup/header/Search/props/defaultProps.js +3 -1
  10. package/es/lookup/header/Search/props/propTypes.js +6 -1
  11. package/es/v1/form/fields/TagsMultiSelect/TagsMultiSelect.js +4 -2
  12. package/es/v1/form/fields/TagsMultiSelect/props/propTypes.js +2 -1
  13. package/es/v1/list/DepartmentDropDown/DepartmentDropDown.js +7 -2
  14. package/es/v1/list/DepartmentDropDown/props/defaultProps.js +2 -1
  15. package/es/v1/list/DepartmentDropDown/props/propTypes.js +3 -0
  16. package/lib/form/fields/TagsMultiSelect/props/propTypes.js +2 -1
  17. package/lib/list/DepartmentDropDown/props/propTypes.js +3 -1
  18. package/lib/lookup/header/Search/LookupSearch.module.css +33 -27
  19. package/lib/lookup/header/Search/Search.js +76 -66
  20. package/lib/lookup/header/Search/__tests__/Search.spec.js +65 -0
  21. package/lib/lookup/header/Search/__tests__/__snapshots__/Search.spec.js.snap +316 -3
  22. package/lib/lookup/header/Search/props/defaultProps.js +3 -1
  23. package/lib/lookup/header/Search/props/propTypes.js +6 -1
  24. package/lib/v1/form/fields/TagsMultiSelect/TagsMultiSelect.js +5 -3
  25. package/lib/v1/form/fields/TagsMultiSelect/props/propTypes.js +2 -1
  26. package/lib/v1/list/DepartmentDropDown/DepartmentDropDown.js +8 -3
  27. package/lib/v1/list/DepartmentDropDown/props/defaultProps.js +2 -1
  28. package/lib/v1/list/DepartmentDropDown/props/propTypes.js +2 -0
  29. package/package.json +6 -6
  30. package/result.json +1 -1
  31. package/unittest/index.html +1 -1
package/es/lookup/header/Search/__tests__/__snapshots__/Search.spec.js.snap CHANGED
@@ -1,13 +1,196 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
+ exports[`Search rendering the customized style search 1`] = `
4
+ <DocumentFragment>
5
+ <div
6
+ class="wrapper searchWrapperClass borderType
7
+
8
+
9
+ flex rowdir vCenter"
10
+ data-id="containerComponent"
11
+ data-selector-id="container"
12
+ data-test-id="containerComponent"
13
+ >
14
+ <div
15
+ class="grow basis shrinkOff"
16
+ data-id="boxComponent"
17
+ data-selector-id="box"
18
+ data-test-id="boxComponent"
19
+ >
20
+ <div
21
+ class="container effect flex rowdir"
22
+ data-id="containerComponent"
23
+ data-selector-id="textBoxIcon"
24
+ data-test-id="containerComponent"
25
+ >
26
+ <div
27
+ class="grow basis shrinkOff"
28
+ data-id="boxComponent"
29
+ data-selector-id="box"
30
+ data-test-id="boxComponent"
31
+ >
32
+ <input
33
+ class=" container small default effect borderColor_default "
34
+ data-a11y-autofocus="true"
35
+ data-id="textBoxIcon"
36
+ data-selector-id="textBoxIcon"
37
+ data-test-id="textBoxIcon"
38
+ maxlength="250"
39
+ type="text"
40
+ value=""
41
+ />
42
+ </div>
43
+ <div
44
+ class="iconContainer shrinkOff"
45
+ data-id="boxComponent"
46
+ data-selector-id="box"
47
+ data-test-id="boxComponent"
48
+ >
49
+ <div
50
+ class="flex cover rowdir"
51
+ data-id="containerComponent"
52
+ data-selector-id="container"
53
+ data-test-id="containerComponent"
54
+ />
55
+ </div>
56
+ </div>
57
+ </div>
58
+ </div>
59
+ </DocumentFragment>
60
+ `;
61
+
3
62
  exports[`Search rendering the defult props 1`] = `
4
63
  <DocumentFragment>
5
64
  <div
6
- class="searchStyle flex rowdir vCenter"
65
+ class="wrapper borderType
66
+
67
+
68
+ flex rowdir vCenter"
69
+ data-id="containerComponent"
70
+ data-selector-id="container"
71
+ data-test-id="containerComponent"
72
+ >
73
+ <div
74
+ class="grow basis shrinkOff"
75
+ data-id="boxComponent"
76
+ data-selector-id="box"
77
+ data-test-id="boxComponent"
78
+ >
79
+ <div
80
+ class="container effect flex rowdir"
81
+ data-id="containerComponent"
82
+ data-selector-id="textBoxIcon"
83
+ data-test-id="containerComponent"
84
+ >
85
+ <div
86
+ class="grow basis shrinkOff"
87
+ data-id="boxComponent"
88
+ data-selector-id="box"
89
+ data-test-id="boxComponent"
90
+ >
91
+ <input
92
+ class=" container small default effect borderColor_default "
93
+ data-a11y-autofocus="true"
94
+ data-id="textBoxIcon"
95
+ data-selector-id="textBoxIcon"
96
+ data-test-id="textBoxIcon"
97
+ maxlength="250"
98
+ type="text"
99
+ value=""
100
+ />
101
+ </div>
102
+ <div
103
+ class="iconContainer shrinkOff"
104
+ data-id="boxComponent"
105
+ data-selector-id="box"
106
+ data-test-id="boxComponent"
107
+ >
108
+ <div
109
+ class="flex cover rowdir"
110
+ data-id="containerComponent"
111
+ data-selector-id="container"
112
+ data-test-id="containerComponent"
113
+ />
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </DocumentFragment>
119
+ `;
120
+
121
+ exports[`Search rendering the prop hasSeparator is false 1`] = `
122
+ <DocumentFragment>
123
+ <div
124
+ class="wrapper borderType
125
+
126
+
127
+ flex rowdir vCenter"
128
+ data-id="containerComponent"
129
+ data-selector-id="container"
130
+ data-test-id="containerComponent"
131
+ >
132
+ <div
133
+ class="grow basis shrinkOff"
134
+ data-id="boxComponent"
135
+ data-selector-id="box"
136
+ data-test-id="boxComponent"
137
+ >
138
+ <div
139
+ class="container effect flex rowdir"
140
+ data-id="containerComponent"
141
+ data-selector-id="textBoxIcon"
142
+ data-test-id="containerComponent"
143
+ >
144
+ <div
145
+ class="grow basis shrinkOff"
146
+ data-id="boxComponent"
147
+ data-selector-id="box"
148
+ data-test-id="boxComponent"
149
+ >
150
+ <input
151
+ class=" container small default effect borderColor_default "
152
+ data-a11y-autofocus="true"
153
+ data-id="textBoxIcon"
154
+ data-selector-id="textBoxIcon"
155
+ data-test-id="textBoxIcon"
156
+ maxlength="250"
157
+ type="text"
158
+ value=""
159
+ />
160
+ </div>
161
+ <div
162
+ class="iconContainer shrinkOff"
163
+ data-id="boxComponent"
164
+ data-selector-id="box"
165
+ data-test-id="boxComponent"
166
+ >
167
+ <div
168
+ class="flex cover rowdir"
169
+ data-id="containerComponent"
170
+ data-selector-id="container"
171
+ data-test-id="containerComponent"
172
+ />
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </DocumentFragment>
178
+ `;
179
+
180
+ exports[`Search rendering the prop hasSeparator is true 1`] = `
181
+ <DocumentFragment>
182
+ <div
183
+ class="wrapper borderType
184
+
185
+
186
+ flex rowdir vCenter"
7
187
  data-id="containerComponent"
8
188
  data-selector-id="container"
9
189
  data-test-id="containerComponent"
10
190
  >
191
+ <div
192
+ class="separator"
193
+ />
11
194
  <div
12
195
  class="grow basis shrinkOff"
13
196
  data-id="boxComponent"
@@ -50,9 +233,139 @@ exports[`Search rendering the defult props 1`] = `
50
233
  data-test-id="containerComponent"
51
234
  />
52
235
  </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </DocumentFragment>
240
+ `;
241
+
242
+ exports[`Search rendering the renderChildren props via function 1`] = `
243
+ <DocumentFragment>
244
+ <div
245
+ class="wrapper"
246
+ data-selector-id="toggleDropdown"
247
+ >
248
+ <div
249
+ class="flex rowdir vCenter"
250
+ data-id="containerComponent"
251
+ data-selector-id="container"
252
+ data-test-id="containerComponent"
253
+ >
254
+ <div
255
+ class="wrapper borderType
256
+
257
+
258
+ flex rowdir vCenter"
259
+ data-id="containerComponent"
260
+ data-selector-id="container"
261
+ data-test-id="containerComponent"
262
+ >
263
+ <div>
264
+ All Fields
265
+ </div>
53
266
  <div
54
- class="line borderColor_default "
55
- />
267
+ class="grow basis shrinkOff"
268
+ data-id="boxComponent"
269
+ data-selector-id="box"
270
+ data-test-id="boxComponent"
271
+ >
272
+ <div
273
+ class="container effect flex rowdir"
274
+ data-id="containerComponent"
275
+ data-selector-id="textBoxIcon"
276
+ data-test-id="containerComponent"
277
+ >
278
+ <div
279
+ class="grow basis shrinkOff"
280
+ data-id="boxComponent"
281
+ data-selector-id="box"
282
+ data-test-id="boxComponent"
283
+ >
284
+ <input
285
+ class=" container small default effect borderColor_default "
286
+ data-a11y-autofocus="true"
287
+ data-id="textBoxIcon"
288
+ data-selector-id="textBoxIcon"
289
+ data-test-id="textBoxIcon"
290
+ maxlength="250"
291
+ type="text"
292
+ value=""
293
+ />
294
+ </div>
295
+ <div
296
+ class="iconContainer shrinkOff"
297
+ data-id="boxComponent"
298
+ data-selector-id="box"
299
+ data-test-id="boxComponent"
300
+ >
301
+ <div
302
+ class="flex cover rowdir"
303
+ data-id="containerComponent"
304
+ data-selector-id="container"
305
+ data-test-id="containerComponent"
306
+ />
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </DocumentFragment>
314
+ `;
315
+
316
+ exports[`Search rendering the search active 1`] = `
317
+ <DocumentFragment>
318
+ <div
319
+ class="wrapper borderType
320
+ active
321
+ focusWidth
322
+ flex rowdir vCenter"
323
+ data-id="containerComponent"
324
+ data-selector-id="container"
325
+ data-test-id="containerComponent"
326
+ >
327
+ <div
328
+ class="grow basis shrinkOff"
329
+ data-id="boxComponent"
330
+ data-selector-id="box"
331
+ data-test-id="boxComponent"
332
+ >
333
+ <div
334
+ class="container effect effectFocused flex rowdir"
335
+ data-id="containerComponent"
336
+ data-selector-id="textBoxIcon"
337
+ data-test-id="containerComponent"
338
+ >
339
+ <div
340
+ class="grow basis shrinkOff"
341
+ data-id="boxComponent"
342
+ data-selector-id="box"
343
+ data-test-id="boxComponent"
344
+ >
345
+ <input
346
+ class=" container small default effect borderColor_default "
347
+ data-a11y-autofocus="true"
348
+ data-id="textBoxIcon"
349
+ data-selector-id="textBoxIcon"
350
+ data-test-id="textBoxIcon"
351
+ maxlength="250"
352
+ type="text"
353
+ value=""
354
+ />
355
+ </div>
356
+ <div
357
+ class="iconContainer shrinkOff"
358
+ data-id="boxComponent"
359
+ data-selector-id="box"
360
+ data-test-id="boxComponent"
361
+ >
362
+ <div
363
+ class="flex cover rowdir"
364
+ data-id="containerComponent"
365
+ data-selector-id="container"
366
+ data-test-id="containerComponent"
367
+ />
368
+ </div>
56
369
  </div>
57
370
  </div>
58
371
  </div>
package/es/lookup/header/Search/props/defaultProps.js CHANGED
@@ -1,5 +1,7 @@
1
1
  export const SearchUI_defaultProps = {
2
2
  activeClass: '',
3
3
  isBoxed: false,
4
- isSearchIconNeed: false
4
+ isSearchIconNeed: false,
5
+ isActive: false,
6
+ hasSeparator: false
5
7
  };
package/es/lookup/header/Search/props/propTypes.js CHANGED
@@ -6,6 +6,7 @@ export const Search_propTypes = {
6
6
  onSelect: PropTypes.func,
7
7
  options: PropTypes.array,
8
8
  selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
9
+ renderChildren: PropTypes.func,
9
10
  value: PropTypes.string
10
11
  };
11
12
  export const SearchUI_propTypes = {
@@ -24,5 +25,9 @@ export const SearchUI_propTypes = {
24
25
  options: PropTypes.array,
25
26
  placeHolder: PropTypes.string,
26
27
  searchStr: PropTypes.string,
27
- title: PropTypes.string
28
+ title: PropTypes.string,
29
+ isActive: PropTypes.bool,
30
+ hasSeparator: PropTypes.bool,
31
+ renderChildren: PropTypes.func,
32
+ customStyle: PropTypes.object
28
33
  };
package/es/v1/form/fields/TagsMultiSelect/TagsMultiSelect.js CHANGED
@@ -164,7 +164,8 @@ export default class TagsMultiSelect extends React.Component {
164
164
  const {
165
165
  TextBoxIconProps = {},
166
166
  TagWrapperProps = {},
167
- TagProps = {}
167
+ TagProps = {},
168
+ listProps = {}
168
169
  } = customProps;
169
170
  return /*#__PURE__*/React.createElement("div", {
170
171
  className: `${style.container} ${!isReadOnly ? ` ${needBorder ? style.hasBorder : ''}
@@ -298,7 +299,8 @@ export default class TagsMultiSelect extends React.Component {
298
299
  getRef: this.getSelectedItemRef,
299
300
  isDisabled: listDisabled,
300
301
  customProps: listItemProps,
301
- customClass: listItemClass
302
+ customClass: listItemClass,
303
+ ...listProps
302
304
  }, isNew ? /*#__PURE__*/React.createElement(Container, {
303
305
  alignBox: "row",
304
306
  align: "vertical"
package/es/v1/form/fields/TagsMultiSelect/props/propTypes.js CHANGED
@@ -52,6 +52,7 @@ export const propTypes = {
52
52
  customProps: PropTypes.shape({
53
53
  TextBoxIconProps: PropTypes.object,
54
54
  TagWrapperProps: PropTypes.object,
55
- TagProps: PropTypes.object
55
+ TagProps: PropTypes.object,
56
+ listProps: PropTypes.object
56
57
  })
57
58
  };
package/es/v1/list/DepartmentDropDown/DepartmentDropDown.js CHANGED
@@ -21,8 +21,12 @@ function DepartmentDropDown(props) {
21
21
  searchStr,
22
22
  i18nKeys,
23
23
  onMoveDepartment,
24
- getDepartment
24
+ getDepartment,
25
+ customProps
25
26
  } = props;
27
+ const {
28
+ toggleDropDownProps = {}
29
+ } = customProps;
26
30
  let {
27
31
  title = 'Move Department',
28
32
  searchEmptyText = 'No results found',
@@ -71,7 +75,8 @@ function DepartmentDropDown(props) {
71
75
  getNextOptions: getNextOptions,
72
76
  isNextOptions: isNextOptions,
73
77
  onSearch: onSearch,
74
- needSearchFetching: needSearchFetching
78
+ needSearchFetching: needSearchFetching,
79
+ ...toggleDropDownProps
75
80
  });
76
81
  }
77
82
 
package/es/v1/list/DepartmentDropDown/props/defaultProps.js CHANGED
@@ -3,5 +3,6 @@ export const defaultProps = {
3
3
  isPopupActive: true,
4
4
  isNextOptions: false,
5
5
  searchStr: '',
6
- i18nKeys: {}
6
+ i18nKeys: {},
7
+ customProps: {}
7
8
  };
package/es/v1/list/DepartmentDropDown/props/propTypes.js CHANGED
@@ -20,5 +20,8 @@ export const propTypes = {
20
20
  searchEmptyText: PropTypes.string,
21
21
  searchErrorText: PropTypes.string,
22
22
  placeholder: PropTypes.string
23
+ }),
24
+ customProps: PropTypes.shape({
25
+ toggleDropDownProps: PropTypes.object
23
26
  })
24
27
  };
package/lib/form/fields/TagsMultiSelect/props/propTypes.js CHANGED
@@ -62,7 +62,8 @@ var propTypes = {
62
62
  customProps: _propTypes["default"].shape({
63
63
  TextBoxIconProps: _propTypes["default"].object,
64
64
  TagWrapperProps: _propTypes["default"].object,
65
- TagProps: _propTypes["default"].object
65
+ TagProps: _propTypes["default"].object,
66
+ listProps: _propTypes["default"].object
66
67
  })
67
68
  };
68
69
  exports.propTypes = propTypes;
package/lib/list/DepartmentDropDown/props/propTypes.js CHANGED
@@ -31,5 +31,7 @@ var propTypes = (_propTypes = {
31
31
  searchEmptyText: _propTypes2["default"].string,
32
32
  searchErrorText: _propTypes2["default"].string,
33
33
  placeholder: _propTypes2["default"].string
34
- })), _defineProperty(_propTypes, "customProps", _propTypes2["default"].string), _propTypes);
34
+ })), _defineProperty(_propTypes, "customProps", _propTypes2["default"].shape({
35
+ toggleDropDownProps: _propTypes2["default"].object
36
+ })), _propTypes);
35
37
  exports.propTypes = propTypes;
package/lib/lookup/header/Search/LookupSearch.module.css CHANGED
@@ -1,20 +1,25 @@
1
- .searchStyle,
2
- .boxStyle {
1
+ .wrapper {
3
2
  transition: var(--zd_transition1);
4
- width: var(--zd_size96) ;
3
+ width: var(--zd_size160) ;
5
4
  height: var(--zd_size28) ;
6
5
  position: relative;
7
- }.searchStyle, .boxStyle {
8
- background: none;
9
6
  }
10
- .boxStyle {
11
- width: var(--zd_size160) ;
7
+ .boxType {
8
+ border: 1px solid transparent;
12
9
  border-radius: 4px;
13
- border: 1px solid var(--zdt_lookupsearch_boxstyle_border);
14
10
  }
15
- .searchStyle:hover, .boxStyle:hover {
11
+ .borderType {
12
+ border-bottom: 1px solid transparent;
13
+ }
14
+ .boxType, .borderType {
15
+ border-color: var(--zdt_lookupsearch_boxstyle_border);
16
+ }
17
+ .boxType:hover, .borderType:hover {
16
18
  border-color: var(--zdt_lookupsearch_boxstyle_hover_border);
17
19
  }
20
+ .boxType.active, .borderType.active {
21
+ border-color: var(--zdt_lookupsearch_boxstyle_activer_border);
22
+ }
18
23
  .focusWidth {
19
24
  width: var(--zd_size220) ;
20
25
  }
@@ -23,35 +28,36 @@
23
28
  height: var(--zd_size28) ;
24
29
  cursor: pointer;
25
30
  }
26
- .drpSearchBox::after {
27
- content: '';
28
- position: absolute;
29
- top: var(--zd_size8) ;
30
- bottom: var(--zd_size8) ;
31
+ [dir=ltr] .drpSearchBox {
32
+ padding-left: var(--zd_size12) ;
31
33
  }
32
- [dir=ltr] .drpSearchBox::after {
33
- right: calc( var(--zd_size1) * -1 ) ;
34
- border-right: 1px solid var(--zdt_lookupsearch_boxstyle_border);
34
+ [dir=rtl] .drpSearchBox {
35
+ padding-right: var(--zd_size12) ;
35
36
  }
36
- [dir=rtl] .drpSearchBox::after {
37
- left: calc( var(--zd_size1) * -1 ) ;
38
- border-left: 1px solid var(--zdt_lookupsearch_boxstyle_border);
37
+ [dir=ltr] .searchIcon {
38
+ padding-right: var(--zd_size8) ;
39
39
  }
40
- .inputBox, .drpSearchBox {
41
- padding: 0 var(--zd_size9) ;
40
+ [dir=rtl] .searchIcon {
41
+ padding-left: var(--zd_size8) ;
42
42
  }
43
43
  [dir=ltr] .searchIconBox {
44
- padding: var(--zd_size4) 0 var(--zd_size4) var(--zd_size9) ;
44
+ padding-left: var(--zd_size12) ;
45
45
  }
46
46
  [dir=rtl] .searchIconBox {
47
- padding: var(--zd_size4) var(--zd_size9) var(--zd_size4) 0 ;
47
+ padding-right: var(--zd_size12) ;
48
48
  }
49
49
  .active, .boxStyle.active, .lineActive.drpSearchBox::after {
50
50
  border-color: var(--zdt_lookupsearch_boxstyle_activer_border);
51
51
  }
52
52
  [dir=ltr] .iconArrow {
53
- margin-left: var(--zd_size5) ;
53
+ margin-left: var(--zd_size6) ;
54
54
  }
55
55
  [dir=rtl] .iconArrow {
56
- margin-right: var(--zd_size5) ;
57
- }
56
+ margin-right: var(--zd_size6) ;
57
+ }
58
+ .separator {
59
+ width: var(--zd_size1) ;
60
+ height: var(--zd_size16) ;
61
+ margin: 0 var(--zd_size12) ;
62
+ background-color: var(--zdt_lookupsearch_boxstyle_border);
63
+ }