@zohodesk/dot 1.0.0-temp-201 → 1.0.0-temp-187.5

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 +1 -1
  3. package/es/form/fields/RadioField/__tests__/RadioField.spec.js +33 -0
  4. package/es/form/fields/RadioField/__tests__/__snapshots__/RadioField.spec.js.snap +537 -1
  5. package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js +4 -2
  6. package/es/form/fields/TagsMultiSelect/props/propTypes.js +2 -1
  7. package/es/list/DepartmentDropDown/DepartmentDropDown.js +7 -2
  8. package/es/list/DepartmentDropDown/props/defaultProps.js +2 -1
  9. package/es/list/DepartmentDropDown/props/propTypes.js +3 -0
  10. package/es/list/status/StatusListItem/StatusListItem.module.css +35 -5
  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/RadioField/__tests__/RadioField.spec.js +33 -0
  17. package/lib/form/fields/RadioField/__tests__/__snapshots__/RadioField.spec.js.snap +537 -1
  18. package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js +5 -3
  19. package/lib/form/fields/TagsMultiSelect/props/propTypes.js +2 -1
  20. package/lib/list/DepartmentDropDown/DepartmentDropDown.js +8 -3
  21. package/lib/list/DepartmentDropDown/props/defaultProps.js +2 -1
  22. package/lib/list/DepartmentDropDown/props/propTypes.js +2 -0
  23. package/lib/list/status/StatusListItem/StatusListItem.module.css +35 -5
  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 +3 -3
  30. package/result.json +1 -1
  31. package/unittest/index.html +1 -1
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  In this Library, we Provide Some Basic Components to Build Your Application
4
4
 
5
- # 1.7.3
5
+ # 1.7.3 (Yet To Publish)
6
6
 
7
7
  - **RadioField**
8
8
  - `getRef`, `isBoxStyle` props supported
@@ -1,6 +1,22 @@
1
1
  import React from 'react';
2
2
  import { render } from '@testing-library/react';
3
3
  import RadioField from "../RadioField";
4
+ const options = [{
5
+ text: 'Chennai',
6
+ value: '1'
7
+ }, {
8
+ text: 'Mumbai',
9
+ value: '2',
10
+ tooltip: 'Disabled Option',
11
+ disabled: true
12
+ }, {
13
+ text: 'Delhi',
14
+ value: '3',
15
+ infoTooltip: 'Capital of India'
16
+ }, {
17
+ text: 'Kolkata',
18
+ value: '4'
19
+ }];
4
20
  describe('RadioField', () => {
5
21
  test('rendering the defult props', () => {
6
22
  const {
@@ -10,4 +26,21 @@ describe('RadioField', () => {
10
26
  }));
11
27
  expect(asFragment()).toMatchSnapshot();
12
28
  });
29
+ test('rendering with options', () => {
30
+ const {
31
+ asFragment
32
+ } = render( /*#__PURE__*/React.createElement(RadioField, {
33
+ options: options
34
+ }));
35
+ expect(asFragment()).toMatchSnapshot();
36
+ });
37
+ test('rendering options with isBoxStyle', () => {
38
+ const {
39
+ asFragment
40
+ } = render( /*#__PURE__*/React.createElement(RadioField, {
41
+ options: options,
42
+ isBoxStyle: true
43
+ }));
44
+ expect(asFragment()).toMatchSnapshot();
45
+ });
13
46
  });
@@ -1,5 +1,273 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
+ exports[`RadioField rendering options with isBoxStyle 1`] = `
4
+ <DocumentFragment>
5
+ <div
6
+ class="container "
7
+ data-selector-id="radioField"
8
+ >
9
+ <div
10
+ class="fieldContainer radiosWrapper radioContainer"
11
+ >
12
+ <span
13
+ class=" radioWrap"
14
+ >
15
+ <div
16
+ aria-checked="false"
17
+ aria-readonly="false"
18
+ class="container pointer hoverEfffect radioBox hoverableRadioBox flex rowdir both"
19
+ data-id="1"
20
+ data-selector-id="container"
21
+ data-test-id="1"
22
+ role="radio"
23
+ tabindex="0"
24
+ >
25
+ <div
26
+ class="radio
27
+ hoverprimary medium filled centerPathprimary shrinkOff"
28
+ data-id="boxComponent"
29
+ data-selector-id="box"
30
+ data-test-id="boxComponent"
31
+ >
32
+ <input
33
+ id="0"
34
+ type="hidden"
35
+ value="1"
36
+ />
37
+ <label
38
+ class="radioLabel pointer"
39
+ >
40
+ <svg
41
+ viewBox="0 0 40 40"
42
+ xmlns="http://www.w3.org/2000/svg"
43
+ >
44
+ <circle
45
+ class="rdBox"
46
+ cx="20"
47
+ cy="20"
48
+ r="19"
49
+ />
50
+ </svg>
51
+ </label>
52
+ </div>
53
+ <div
54
+ class="text grow basis shrinkOff"
55
+ data-id="boxComponent"
56
+ data-selector-id="box"
57
+ data-test-id="boxComponent"
58
+ >
59
+ <label
60
+ class="label title medium default font_primary
61
+ dotted cursor
62
+ primaryLabel pointer "
63
+ data-id="Chennai_label"
64
+ data-selector-id="label"
65
+ data-test-id="Chennai_label"
66
+ data-title="Chennai"
67
+ >
68
+ Chennai
69
+ </label>
70
+ </div>
71
+ </div>
72
+ </span>
73
+ <span
74
+ class=" radioWrap"
75
+ >
76
+ <div
77
+ aria-checked="false"
78
+ aria-readonly="true"
79
+ class="container disabled radioBox flex rowdir both"
80
+ data-id="2"
81
+ data-selector-id="container"
82
+ data-test-id="2"
83
+ data-title="Disabled Option"
84
+ role="radio"
85
+ tabindex="-1"
86
+ >
87
+ <div
88
+ class="radio
89
+ medium filled centerPathprimary shrinkOff"
90
+ data-id="boxComponent"
91
+ data-selector-id="box"
92
+ data-test-id="boxComponent"
93
+ >
94
+ <input
95
+ id="1"
96
+ type="hidden"
97
+ value="2"
98
+ />
99
+ <label
100
+ class="radioLabel disabled"
101
+ >
102
+ <svg
103
+ viewBox="0 0 40 40"
104
+ xmlns="http://www.w3.org/2000/svg"
105
+ >
106
+ <circle
107
+ class="rdBox"
108
+ cx="20"
109
+ cy="20"
110
+ r="19"
111
+ />
112
+ </svg>
113
+ </label>
114
+ </div>
115
+ <div
116
+ class="text grow basis shrinkOff"
117
+ data-id="boxComponent"
118
+ data-selector-id="box"
119
+ data-test-id="boxComponent"
120
+ >
121
+ <label
122
+ class="label title medium default font_primary
123
+ dotted cursor
124
+ primaryLabel disabled "
125
+ data-id="Mumbai_label"
126
+ data-selector-id="label"
127
+ data-test-id="Mumbai_label"
128
+ data-title="Disabled Option"
129
+ >
130
+ Mumbai
131
+ </label>
132
+ </div>
133
+ </div>
134
+ </span>
135
+ <span
136
+ class=" radioWrap"
137
+ >
138
+ <div
139
+ aria-checked="false"
140
+ aria-readonly="false"
141
+ class="container pointer hoverEfffect radioBox hoverableRadioBox flex rowdir both"
142
+ data-id="3"
143
+ data-selector-id="container"
144
+ data-test-id="3"
145
+ role="radio"
146
+ tabindex="-1"
147
+ >
148
+ <div
149
+ class="radio
150
+ hoverprimary medium filled centerPathprimary shrinkOff"
151
+ data-id="boxComponent"
152
+ data-selector-id="box"
153
+ data-test-id="boxComponent"
154
+ >
155
+ <input
156
+ id="2"
157
+ type="hidden"
158
+ value="3"
159
+ />
160
+ <label
161
+ class="radioLabel pointer"
162
+ >
163
+ <svg
164
+ viewBox="0 0 40 40"
165
+ xmlns="http://www.w3.org/2000/svg"
166
+ >
167
+ <circle
168
+ class="rdBox"
169
+ cx="20"
170
+ cy="20"
171
+ r="19"
172
+ />
173
+ </svg>
174
+ </label>
175
+ </div>
176
+ <div
177
+ class="text grow basis shrinkOff"
178
+ data-id="boxComponent"
179
+ data-selector-id="box"
180
+ data-test-id="boxComponent"
181
+ >
182
+ <label
183
+ class="label title medium default font_primary
184
+ dotted cursor
185
+ primaryLabel pointer "
186
+ data-id="Delhi_label"
187
+ data-selector-id="label"
188
+ data-test-id="Delhi_label"
189
+ data-title="Delhi"
190
+ >
191
+ Delhi
192
+ </label>
193
+ </div>
194
+ <i
195
+ aria-hidden="true"
196
+ class="zd_font_icons basic icon-info infoIcon "
197
+ data-id="fontIcon"
198
+ data-selector-id="fontIcon"
199
+ data-test-id="fontIcon"
200
+ data-title="Capital of India"
201
+ style="--zd-iconfont-size: var(--zd_font_size16);"
202
+ />
203
+ </div>
204
+ </span>
205
+ <span
206
+ class=" radioWrap"
207
+ >
208
+ <div
209
+ aria-checked="false"
210
+ aria-readonly="false"
211
+ class="container pointer hoverEfffect radioBox hoverableRadioBox flex rowdir both"
212
+ data-id="4"
213
+ data-selector-id="container"
214
+ data-test-id="4"
215
+ role="radio"
216
+ tabindex="-1"
217
+ >
218
+ <div
219
+ class="radio
220
+ hoverprimary medium filled centerPathprimary shrinkOff"
221
+ data-id="boxComponent"
222
+ data-selector-id="box"
223
+ data-test-id="boxComponent"
224
+ >
225
+ <input
226
+ id="3"
227
+ type="hidden"
228
+ value="4"
229
+ />
230
+ <label
231
+ class="radioLabel pointer"
232
+ >
233
+ <svg
234
+ viewBox="0 0 40 40"
235
+ xmlns="http://www.w3.org/2000/svg"
236
+ >
237
+ <circle
238
+ class="rdBox"
239
+ cx="20"
240
+ cy="20"
241
+ r="19"
242
+ />
243
+ </svg>
244
+ </label>
245
+ </div>
246
+ <div
247
+ class="text grow basis shrinkOff"
248
+ data-id="boxComponent"
249
+ data-selector-id="box"
250
+ data-test-id="boxComponent"
251
+ >
252
+ <label
253
+ class="label title medium default font_primary
254
+ dotted cursor
255
+ primaryLabel pointer "
256
+ data-id="Kolkata_label"
257
+ data-selector-id="label"
258
+ data-test-id="Kolkata_label"
259
+ data-title="Kolkata"
260
+ >
261
+ Kolkata
262
+ </label>
263
+ </div>
264
+ </div>
265
+ </span>
266
+ </div>
267
+ </div>
268
+ </DocumentFragment>
269
+ `;
270
+
3
271
  exports[`RadioField rendering the defult props 1`] = `
4
272
  <DocumentFragment>
5
273
  <div
@@ -7,8 +275,276 @@ exports[`RadioField rendering the defult props 1`] = `
7
275
  data-selector-id="radioField"
8
276
  >
9
277
  <div
10
- class="fieldContainer radioContainer"
278
+ class="fieldContainer radioContainer"
11
279
  />
12
280
  </div>
13
281
  </DocumentFragment>
14
282
  `;
283
+
284
+ exports[`RadioField rendering with options 1`] = `
285
+ <DocumentFragment>
286
+ <div
287
+ class="container "
288
+ data-selector-id="radioField"
289
+ >
290
+ <div
291
+ class="fieldContainer radioContainer"
292
+ >
293
+ <span
294
+ class="radio radioWrap"
295
+ >
296
+ <div
297
+ aria-checked="false"
298
+ aria-readonly="false"
299
+ class="container pointer hoverEfffect flex rowdir both"
300
+ data-id="1"
301
+ data-selector-id="container"
302
+ data-test-id="1"
303
+ role="radio"
304
+ tabindex="0"
305
+ >
306
+ <div
307
+ class="radio
308
+ hoverprimary medium filled centerPathprimary shrinkOff"
309
+ data-id="boxComponent"
310
+ data-selector-id="box"
311
+ data-test-id="boxComponent"
312
+ >
313
+ <input
314
+ id="0"
315
+ type="hidden"
316
+ value="1"
317
+ />
318
+ <label
319
+ class="radioLabel pointer"
320
+ >
321
+ <svg
322
+ viewBox="0 0 40 40"
323
+ xmlns="http://www.w3.org/2000/svg"
324
+ >
325
+ <circle
326
+ class="rdBox"
327
+ cx="20"
328
+ cy="20"
329
+ r="19"
330
+ />
331
+ </svg>
332
+ </label>
333
+ </div>
334
+ <div
335
+ class="text grow basis shrinkOff"
336
+ data-id="boxComponent"
337
+ data-selector-id="box"
338
+ data-test-id="boxComponent"
339
+ >
340
+ <label
341
+ class="label title medium default font_primary
342
+ dotted cursor
343
+ primaryLabel pointer "
344
+ data-id="Chennai_label"
345
+ data-selector-id="label"
346
+ data-test-id="Chennai_label"
347
+ data-title="Chennai"
348
+ >
349
+ Chennai
350
+ </label>
351
+ </div>
352
+ </div>
353
+ </span>
354
+ <span
355
+ class="radio radioWrap"
356
+ >
357
+ <div
358
+ aria-checked="false"
359
+ aria-readonly="true"
360
+ class="container disabled flex rowdir both"
361
+ data-id="2"
362
+ data-selector-id="container"
363
+ data-test-id="2"
364
+ data-title="Disabled Option"
365
+ role="radio"
366
+ tabindex="-1"
367
+ >
368
+ <div
369
+ class="radio
370
+ medium filled centerPathprimary shrinkOff"
371
+ data-id="boxComponent"
372
+ data-selector-id="box"
373
+ data-test-id="boxComponent"
374
+ >
375
+ <input
376
+ id="1"
377
+ type="hidden"
378
+ value="2"
379
+ />
380
+ <label
381
+ class="radioLabel disabled"
382
+ >
383
+ <svg
384
+ viewBox="0 0 40 40"
385
+ xmlns="http://www.w3.org/2000/svg"
386
+ >
387
+ <circle
388
+ class="rdBox"
389
+ cx="20"
390
+ cy="20"
391
+ r="19"
392
+ />
393
+ </svg>
394
+ </label>
395
+ </div>
396
+ <div
397
+ class="text grow basis shrinkOff"
398
+ data-id="boxComponent"
399
+ data-selector-id="box"
400
+ data-test-id="boxComponent"
401
+ >
402
+ <label
403
+ class="label title medium default font_primary
404
+ dotted cursor
405
+ primaryLabel disabled "
406
+ data-id="Mumbai_label"
407
+ data-selector-id="label"
408
+ data-test-id="Mumbai_label"
409
+ data-title="Disabled Option"
410
+ >
411
+ Mumbai
412
+ </label>
413
+ </div>
414
+ </div>
415
+ </span>
416
+ <span
417
+ class="radio radioWrap"
418
+ >
419
+ <div
420
+ aria-checked="false"
421
+ aria-readonly="false"
422
+ class="container pointer hoverEfffect flex rowdir both"
423
+ data-id="3"
424
+ data-selector-id="container"
425
+ data-test-id="3"
426
+ role="radio"
427
+ tabindex="-1"
428
+ >
429
+ <div
430
+ class="radio
431
+ hoverprimary medium filled centerPathprimary shrinkOff"
432
+ data-id="boxComponent"
433
+ data-selector-id="box"
434
+ data-test-id="boxComponent"
435
+ >
436
+ <input
437
+ id="2"
438
+ type="hidden"
439
+ value="3"
440
+ />
441
+ <label
442
+ class="radioLabel pointer"
443
+ >
444
+ <svg
445
+ viewBox="0 0 40 40"
446
+ xmlns="http://www.w3.org/2000/svg"
447
+ >
448
+ <circle
449
+ class="rdBox"
450
+ cx="20"
451
+ cy="20"
452
+ r="19"
453
+ />
454
+ </svg>
455
+ </label>
456
+ </div>
457
+ <div
458
+ class="text grow basis shrinkOff"
459
+ data-id="boxComponent"
460
+ data-selector-id="box"
461
+ data-test-id="boxComponent"
462
+ >
463
+ <label
464
+ class="label title medium default font_primary
465
+ dotted cursor
466
+ primaryLabel pointer "
467
+ data-id="Delhi_label"
468
+ data-selector-id="label"
469
+ data-test-id="Delhi_label"
470
+ data-title="Delhi"
471
+ >
472
+ Delhi
473
+ </label>
474
+ </div>
475
+ <i
476
+ aria-hidden="true"
477
+ class="zd_font_icons basic icon-info infoIcon "
478
+ data-id="fontIcon"
479
+ data-selector-id="fontIcon"
480
+ data-test-id="fontIcon"
481
+ data-title="Capital of India"
482
+ style="--zd-iconfont-size: var(--zd_font_size16);"
483
+ />
484
+ </div>
485
+ </span>
486
+ <span
487
+ class="radio radioWrap"
488
+ >
489
+ <div
490
+ aria-checked="false"
491
+ aria-readonly="false"
492
+ class="container pointer hoverEfffect flex rowdir both"
493
+ data-id="4"
494
+ data-selector-id="container"
495
+ data-test-id="4"
496
+ role="radio"
497
+ tabindex="-1"
498
+ >
499
+ <div
500
+ class="radio
501
+ hoverprimary medium filled centerPathprimary shrinkOff"
502
+ data-id="boxComponent"
503
+ data-selector-id="box"
504
+ data-test-id="boxComponent"
505
+ >
506
+ <input
507
+ id="3"
508
+ type="hidden"
509
+ value="4"
510
+ />
511
+ <label
512
+ class="radioLabel pointer"
513
+ >
514
+ <svg
515
+ viewBox="0 0 40 40"
516
+ xmlns="http://www.w3.org/2000/svg"
517
+ >
518
+ <circle
519
+ class="rdBox"
520
+ cx="20"
521
+ cy="20"
522
+ r="19"
523
+ />
524
+ </svg>
525
+ </label>
526
+ </div>
527
+ <div
528
+ class="text grow basis shrinkOff"
529
+ data-id="boxComponent"
530
+ data-selector-id="box"
531
+ data-test-id="boxComponent"
532
+ >
533
+ <label
534
+ class="label title medium default font_primary
535
+ dotted cursor
536
+ primaryLabel pointer "
537
+ data-id="Kolkata_label"
538
+ data-selector-id="label"
539
+ data-test-id="Kolkata_label"
540
+ data-title="Kolkata"
541
+ >
542
+ Kolkata
543
+ </label>
544
+ </div>
545
+ </div>
546
+ </span>
547
+ </div>
548
+ </div>
549
+ </DocumentFragment>
550
+ `;
@@ -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"
@@ -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
  };
@@ -48,8 +48,12 @@ class DepartmentDropDown extends Component {
48
48
  onSearch,
49
49
  needSearchFetching,
50
50
  searchStr,
51
- i18nKeys
51
+ i18nKeys,
52
+ customProps
52
53
  } = this.props;
54
+ const {
55
+ toggleDropDownProps = {}
56
+ } = customProps;
53
57
  let {
54
58
  title = 'Move Department',
55
59
  searchEmptyText = 'No results found',
@@ -84,7 +88,8 @@ class DepartmentDropDown extends Component {
84
88
  getNextOptions: getNextOptions,
85
89
  isNextOptions: isNextOptions,
86
90
  onSearch: onSearch,
87
- needSearchFetching: needSearchFetching
91
+ needSearchFetching: needSearchFetching,
92
+ ...toggleDropDownProps
88
93
  });
89
94
  }
90
95
 
@@ -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
  };
@@ -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
  };