@zohodesk/dot 1.4.11 → 1.4.12

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 (52) hide show
  1. package/.cli/propValidation_report.html +1 -1
  2. package/README.md +6 -1
  3. package/assets/Appearance/dark/mode/Dot_DarkMode.module.css +3 -0
  4. package/assets/Appearance/light/mode/Dot_LightMode.module.css +3 -0
  5. package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css +3 -0
  6. package/coverage/ExternalLink/ExternalLink.js.html +1 -1
  7. package/coverage/ExternalLink/ExternalLink.module.css.html +1 -1
  8. package/coverage/ExternalLink/index.html +1 -1
  9. package/coverage/ExternalLink/props/defaultProps.js.html +1 -1
  10. package/coverage/ExternalLink/props/index.html +1 -1
  11. package/coverage/ExternalLink/props/propTypes.js.html +1 -1
  12. package/coverage/IconButton/IconButton.js.html +1 -1
  13. package/coverage/IconButton/IconButton.module.css.html +1 -1
  14. package/coverage/IconButton/index.html +1 -1
  15. package/coverage/IconButton/props/defaultProps.js.html +1 -1
  16. package/coverage/IconButton/props/index.html +1 -1
  17. package/coverage/IconButton/props/propTypes.js.html +1 -1
  18. package/coverage/Image/Image.js.html +1 -1
  19. package/coverage/Image/Image.module.css.html +1 -1
  20. package/coverage/Image/index.html +1 -1
  21. package/coverage/Image/props/defaultProps.js.html +1 -1
  22. package/coverage/Image/props/index.html +1 -1
  23. package/coverage/Image/props/propTypes.js.html +1 -1
  24. package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.js.html +1 -1
  25. package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.module.css.html +1 -1
  26. package/coverage/avatar/AvatarWithTeam/index.html +1 -1
  27. package/coverage/avatar/AvatarWithTeam/props/defaultProps.js.html +1 -1
  28. package/coverage/avatar/AvatarWithTeam/props/index.html +1 -1
  29. package/coverage/avatar/AvatarWithTeam/props/propTypes.js.html +1 -1
  30. package/coverage/index.html +1 -1
  31. package/es/form/fields/CheckBoxField/CheckBoxField.js +3 -1
  32. package/es/form/fields/CheckBoxField/props/propTypes.js +1 -0
  33. package/es/form/fields/Fields.module.css +20 -0
  34. package/es/form/fields/RadioField/RadioField.js +12 -3
  35. package/es/v1/form/fields/CheckBoxField/CheckBoxField.js +3 -1
  36. package/es/v1/form/fields/CheckBoxField/props/propTypes.js +1 -0
  37. package/es/v1/form/fields/RadioField/RadioField.js +34 -12
  38. package/es/v1/form/fields/RadioField/props/defaultProps.js +1 -0
  39. package/es/v1/form/fields/RadioField/props/propTypes.js +2 -0
  40. package/es/v1/form/fields/RadioField/useRadio.js +44 -0
  41. package/lib/form/fields/CheckBoxField/CheckBoxField.js +3 -1
  42. package/lib/form/fields/CheckBoxField/props/propTypes.js +1 -0
  43. package/lib/form/fields/Fields.module.css +20 -0
  44. package/lib/form/fields/RadioField/RadioField.js +15 -3
  45. package/lib/v1/form/fields/CheckBoxField/CheckBoxField.js +3 -1
  46. package/lib/v1/form/fields/CheckBoxField/props/propTypes.js +1 -0
  47. package/lib/v1/form/fields/RadioField/RadioField.js +37 -10
  48. package/lib/v1/form/fields/RadioField/props/defaultProps.js +1 -0
  49. package/lib/v1/form/fields/RadioField/props/propTypes.js +2 -0
  50. package/lib/v1/form/fields/RadioField/useRadio.js +50 -0
  51. package/package.json +5 -5
  52. package/result.json +1 -1
package/README.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  In this Library, we Provide Some Basic Components to Build Your Application
4
4
 
5
+ # 1.4.12
6
+
7
+ - **CheckBoxField** - getContainerRef prop supported
8
+ - **RadioField** - infoTooltip, disabled support added for the radio
9
+ - **v1/RadioField** - getRef, isBoxStyle props supported
10
+
5
11
  # 1.4.11
6
12
 
7
13
  - **TagsMultiSelectField** - infoText, isLocked, lockedInfoText, alignField props added, position relative added for parent.
@@ -11,7 +17,6 @@ In this Library, we Provide Some Basic Components to Build Your Application
11
17
 
12
18
  - **TextEditor** - FireFox Focus Issue Fixed (Removed Visibility : Hidden)
13
19
 
14
-
15
20
  # 1.4.9
16
21
 
17
22
  - **GlobalNotification**
package/assets/Appearance/dark/mode/Dot_DarkMode.module.css CHANGED
@@ -140,6 +140,9 @@
140
140
  --zdt_flipcard_default_text: hsla(0, 0.00%, calc(46.67% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
141
141
 
142
142
  /* form fields */
143
+ --zdt_radiofield_box_border: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
144
+ --zdt_radiofield_box_active_border: var(--zdt_cta_primary_border);
145
+ --zdt_radiofield_box_active_bg: var(--zdtm_cta_primary_light_bg_default_inverse_low);
143
146
  --zdt_fields_phoneicon_icon: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
144
147
  --zdt_fields_phoneicon_hover_icon: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
145
148
  --zdt_fields_lockicon_icon: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
package/assets/Appearance/light/mode/Dot_LightMode.module.css CHANGED
@@ -140,6 +140,9 @@
140
140
  --zdt_flipcard_default_text: hsla(0, 0.00%, calc(46.67% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
141
141
 
142
142
  /* form fields */
143
+ --zdt_radiofield_box_border: hsla(231, 22.22%, calc(82.35% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
144
+ --zdt_radiofield_box_active_border: var(--zdt_cta_primary_border);
145
+ --zdt_radiofield_box_active_bg: var(--zdtm_cta_primary_light_bg_default_inverse_low);
143
146
  --zdt_fields_phoneicon_icon: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
144
147
  --zdt_fields_phoneicon_hover_icon: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
145
148
  --zdt_fields_lockicon_icon: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css CHANGED
@@ -140,6 +140,9 @@
140
140
  --zdt_flipcard_default_text: hsla(0, 0.00%, calc(46.67% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
141
141
 
142
142
  /* form fields */
143
+ --zdt_radiofield_box_border: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
144
+ --zdt_radiofield_box_active_border: var(--zdt_cta_primary_border);
145
+ --zdt_radiofield_box_active_bg: var(--zdtm_cta_primary_light_bg_default_inverse_low);
143
146
  --zdt_fields_phoneicon_icon: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
144
147
  --zdt_fields_phoneicon_hover_icon: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
145
148
  --zdt_fields_lockicon_icon: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
package/coverage/ExternalLink/ExternalLink.js.html CHANGED
@@ -214,7 +214,7 @@ ExternalLink.propTypes = propTypes;
214
214
  <div class='footer quiet pad2 space-top1 center small'>
215
215
  Code coverage generated by
216
216
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
217
- at 2024-03-26T11:40:17.392Z
217
+ at 2024-03-29T10:32:42.147Z
218
218
  </div>
219
219
  <script src="../prettify.js"></script>
220
220
  <script>
package/coverage/ExternalLink/ExternalLink.module.css.html CHANGED
@@ -79,7 +79,7 @@
79
79
  <div class='footer quiet pad2 space-top1 center small'>
80
80
  Code coverage generated by
81
81
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
82
- at 2024-03-26T11:40:17.392Z
82
+ at 2024-03-29T10:32:42.147Z
83
83
  </div>
84
84
  <script src="../prettify.js"></script>
85
85
  <script>
package/coverage/ExternalLink/index.html CHANGED
@@ -116,7 +116,7 @@
116
116
  <div class='footer quiet pad2 space-top1 center small'>
117
117
  Code coverage generated by
118
118
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
119
- at 2024-03-26T11:40:17.392Z
119
+ at 2024-03-29T10:32:42.147Z
120
120
  </div>
121
121
  <script src="../prettify.js"></script>
122
122
  <script>
package/coverage/ExternalLink/props/defaultProps.js.html CHANGED
@@ -85,7 +85,7 @@
85
85
  <div class='footer quiet pad2 space-top1 center small'>
86
86
  Code coverage generated by
87
87
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
88
- at 2024-03-26T11:40:17.392Z
88
+ at 2024-03-29T10:32:42.147Z
89
89
  </div>
90
90
  <script src="../../prettify.js"></script>
91
91
  <script>
package/coverage/ExternalLink/props/index.html CHANGED
@@ -116,7 +116,7 @@
116
116
  <div class='footer quiet pad2 space-top1 center small'>
117
117
  Code coverage generated by
118
118
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
119
- at 2024-03-26T11:40:17.392Z
119
+ at 2024-03-29T10:32:42.147Z
120
120
  </div>
121
121
  <script src="../../prettify.js"></script>
122
122
  <script>
package/coverage/ExternalLink/props/propTypes.js.html CHANGED
@@ -109,7 +109,7 @@ export const propTypes = {
109
109
  <div class='footer quiet pad2 space-top1 center small'>
110
110
  Code coverage generated by
111
111
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
112
- at 2024-03-26T11:40:17.392Z
112
+ at 2024-03-29T10:32:42.147Z
113
113
  </div>
114
114
  <script src="../../prettify.js"></script>
115
115
  <script>
package/coverage/IconButton/IconButton.js.html CHANGED
@@ -451,7 +451,7 @@ IconButton.defaultProps = defaultProps;
451
451
  <div class='footer quiet pad2 space-top1 center small'>
452
452
  Code coverage generated by
453
453
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
454
- at 2024-03-26T11:40:17.392Z
454
+ at 2024-03-29T10:32:42.147Z
455
455
  </div>
456
456
  <script src="../prettify.js"></script>
457
457
  <script>
package/coverage/IconButton/IconButton.module.css.html CHANGED
@@ -139,7 +139,7 @@
139
139
  <div class='footer quiet pad2 space-top1 center small'>
140
140
  Code coverage generated by
141
141
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
142
- at 2024-03-26T11:40:17.392Z
142
+ at 2024-03-29T10:32:42.147Z
143
143
  </div>
144
144
  <script src="../prettify.js"></script>
145
145
  <script>
package/coverage/IconButton/index.html CHANGED
@@ -116,7 +116,7 @@
116
116
  <div class='footer quiet pad2 space-top1 center small'>
117
117
  Code coverage generated by
118
118
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
119
- at 2024-03-26T11:40:17.392Z
119
+ at 2024-03-29T10:32:42.147Z
120
120
  </div>
121
121
  <script src="../prettify.js"></script>
122
122
  <script>
package/coverage/IconButton/props/defaultProps.js.html CHANGED
@@ -121,7 +121,7 @@
121
121
  <div class='footer quiet pad2 space-top1 center small'>
122
122
  Code coverage generated by
123
123
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
124
- at 2024-03-26T11:40:17.392Z
124
+ at 2024-03-29T10:32:42.147Z
125
125
  </div>
126
126
  <script src="../../prettify.js"></script>
127
127
  <script>
package/coverage/IconButton/props/index.html CHANGED
@@ -116,7 +116,7 @@
116
116
  <div class='footer quiet pad2 space-top1 center small'>
117
117
  Code coverage generated by
118
118
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
119
- at 2024-03-26T11:40:17.392Z
119
+ at 2024-03-29T10:32:42.147Z
120
120
  </div>
121
121
  <script src="../../prettify.js"></script>
122
122
  <script>
package/coverage/IconButton/props/propTypes.js.html CHANGED
@@ -172,7 +172,7 @@ export const propTypes = {
172
172
  <div class='footer quiet pad2 space-top1 center small'>
173
173
  Code coverage generated by
174
174
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
175
- at 2024-03-26T11:40:17.392Z
175
+ at 2024-03-29T10:32:42.147Z
176
176
  </div>
177
177
  <script src="../../prettify.js"></script>
178
178
  <script>
package/coverage/Image/Image.js.html CHANGED
@@ -169,7 +169,7 @@ Image.defaultProps = defaultProps;
169
169
  <div class='footer quiet pad2 space-top1 center small'>
170
170
  Code coverage generated by
171
171
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
172
- at 2024-03-26T11:40:17.392Z
172
+ at 2024-03-29T10:32:42.147Z
173
173
  </div>
174
174
  <script src="../prettify.js"></script>
175
175
  <script>
package/coverage/Image/Image.module.css.html CHANGED
@@ -103,7 +103,7 @@
103
103
  <div class='footer quiet pad2 space-top1 center small'>
104
104
  Code coverage generated by
105
105
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
106
- at 2024-03-26T11:40:17.392Z
106
+ at 2024-03-29T10:32:42.147Z
107
107
  </div>
108
108
  <script src="../prettify.js"></script>
109
109
  <script>
package/coverage/Image/index.html CHANGED
@@ -116,7 +116,7 @@
116
116
  <div class='footer quiet pad2 space-top1 center small'>
117
117
  Code coverage generated by
118
118
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
119
- at 2024-03-26T11:40:17.392Z
119
+ at 2024-03-29T10:32:42.147Z
120
120
  </div>
121
121
  <script src="../prettify.js"></script>
122
122
  <script>
package/coverage/Image/props/defaultProps.js.html CHANGED
@@ -82,7 +82,7 @@
82
82
  <div class='footer quiet pad2 space-top1 center small'>
83
83
  Code coverage generated by
84
84
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
85
- at 2024-03-26T11:40:17.392Z
85
+ at 2024-03-29T10:32:42.147Z
86
86
  </div>
87
87
  <script src="../../prettify.js"></script>
88
88
  <script>
package/coverage/Image/props/index.html CHANGED
@@ -116,7 +116,7 @@
116
116
  <div class='footer quiet pad2 space-top1 center small'>
117
117
  Code coverage generated by
118
118
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
119
- at 2024-03-26T11:40:17.392Z
119
+ at 2024-03-29T10:32:42.147Z
120
120
  </div>
121
121
  <script src="../../prettify.js"></script>
122
122
  <script>
package/coverage/Image/props/propTypes.js.html CHANGED
@@ -112,7 +112,7 @@ export const propTypes = {
112
112
  <div class='footer quiet pad2 space-top1 center small'>
113
113
  Code coverage generated by
114
114
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
115
- at 2024-03-26T11:40:17.392Z
115
+ at 2024-03-29T10:32:42.147Z
116
116
  </div>
117
117
  <script src="../../prettify.js"></script>
118
118
  <script>
package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.js.html CHANGED
@@ -433,7 +433,7 @@ AvatarWithTeam.propTypes = propTypes;
433
433
  <div class='footer quiet pad2 space-top1 center small'>
434
434
  Code coverage generated by
435
435
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
436
- at 2024-03-26T11:40:17.392Z
436
+ at 2024-03-29T10:32:42.147Z
437
437
  </div>
438
438
  <script src="../../prettify.js"></script>
439
439
  <script>
package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.module.css.html CHANGED
@@ -118,7 +118,7 @@
118
118
  <div class='footer quiet pad2 space-top1 center small'>
119
119
  Code coverage generated by
120
120
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
121
- at 2024-03-26T11:40:17.392Z
121
+ at 2024-03-29T10:32:42.147Z
122
122
  </div>
123
123
  <script src="../../prettify.js"></script>
124
124
  <script>
package/coverage/avatar/AvatarWithTeam/index.html CHANGED
@@ -116,7 +116,7 @@
116
116
  <div class='footer quiet pad2 space-top1 center small'>
117
117
  Code coverage generated by
118
118
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
119
- at 2024-03-26T11:40:17.392Z
119
+ at 2024-03-29T10:32:42.147Z
120
120
  </div>
121
121
  <script src="../../prettify.js"></script>
122
122
  <script>
package/coverage/avatar/AvatarWithTeam/props/defaultProps.js.html CHANGED
@@ -97,7 +97,7 @@
97
97
  <div class='footer quiet pad2 space-top1 center small'>
98
98
  Code coverage generated by
99
99
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
100
- at 2024-03-26T11:40:17.392Z
100
+ at 2024-03-29T10:32:42.147Z
101
101
  </div>
102
102
  <script src="../../../prettify.js"></script>
103
103
  <script>
package/coverage/avatar/AvatarWithTeam/props/index.html CHANGED
@@ -116,7 +116,7 @@
116
116
  <div class='footer quiet pad2 space-top1 center small'>
117
117
  Code coverage generated by
118
118
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
119
- at 2024-03-26T11:40:17.392Z
119
+ at 2024-03-29T10:32:42.147Z
120
120
  </div>
121
121
  <script src="../../../prettify.js"></script>
122
122
  <script>
package/coverage/avatar/AvatarWithTeam/props/propTypes.js.html CHANGED
@@ -148,7 +148,7 @@ export const propTypes = {
148
148
  <div class='footer quiet pad2 space-top1 center small'>
149
149
  Code coverage generated by
150
150
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
151
- at 2024-03-26T11:40:17.392Z
151
+ at 2024-03-29T10:32:42.147Z
152
152
  </div>
153
153
  <script src="../../../prettify.js"></script>
154
154
  <script>
package/coverage/index.html CHANGED
@@ -206,7 +206,7 @@
206
206
  <div class='footer quiet pad2 space-top1 center small'>
207
207
  Code coverage generated by
208
208
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
209
- at 2024-03-26T11:40:17.392Z
209
+ at 2024-03-29T10:32:42.147Z
210
210
  </div>
211
211
  <script src="prettify.js"></script>
212
212
  <script>
package/es/form/fields/CheckBoxField/CheckBoxField.js CHANGED
@@ -61,6 +61,7 @@ export default class CheckBoxField extends PureComponent {
61
61
  dataSelectorId,
62
62
  validationRuleMessage,
63
63
  validationRulePalette,
64
+ getContainerRef,
64
65
  infoText,
65
66
  fieldSize,
66
67
  labelPalette,
@@ -115,7 +116,8 @@ export default class CheckBoxField extends PureComponent {
115
116
  disabled: removeEvent,
116
117
  checked: checked,
117
118
  getRef: this.handleGetRef,
118
- dataId: dataId
119
+ dataId: dataId,
120
+ getContainerRef: getContainerRef
119
121
  }, CheckBoxProps))), !isDirectCol && /*#__PURE__*/React.createElement(Box, {
120
122
  flexible: true
121
123
  }, labelElement)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
package/es/form/fields/CheckBoxField/props/propTypes.js CHANGED
@@ -6,6 +6,7 @@ export const propTypes = {
6
6
  errorType: PropTypes.oneOf(['primary', 'secondary']),
7
7
  fieldSize: PropTypes.oneOf(['small', 'medium']),
8
8
  getRef: PropTypes.func,
9
+ getContainerRef: PropTypes.func,
9
10
  id: PropTypes.string.isRequired,
10
11
  labelCustomClass: PropTypes.string,
11
12
  labelName: PropTypes.string,
package/es/form/fields/Fields.module.css CHANGED
@@ -60,6 +60,26 @@
60
60
  [dir=rtl] .radio {
61
61
  margin: var(--zd_size5) 0 var(--zd_size5) var(--zd_size32) ;
62
62
  }
63
+ .radio, .radioWrap {
64
+ max-width: 100%
65
+ }
66
+ .radiosWrapper {
67
+ gap: var(--zd_size10)
68
+ }
69
+ .radioBox {
70
+ max-width: 100% ;
71
+ height: var(--zd_size36) ;
72
+ transition: border var(--zd_transition3);
73
+ padding: 0 var(--zd_size10) ;
74
+ border: 1px solid var(--zdt_radiofield_box_border);
75
+ border-radius: 6px
76
+ }
77
+ .radioBox:hover, .radioBoxActive {
78
+ border-color: var(--zdt_radiofield_box_active_border)
79
+ }
80
+ .radioBoxActive {
81
+ background-color: var(--zdt_radiofield_box_active_bg)
82
+ }
63
83
  [dir=ltr] .duration {
64
84
  margin-right: var(--zd_size15) ;
65
85
  }
package/es/form/fields/RadioField/RadioField.js CHANGED
@@ -6,6 +6,7 @@ import { defaultProps } from './props/defaultProps';
6
6
  import { propTypes } from './props/propTypes';
7
7
  /**** Components ****/
8
8
 
9
+ import Icon from '@zohodesk/icons/es/Icon';
9
10
  import Label from '@zohodesk/components/lib/Label/Label';
10
11
  import Radio from '@zohodesk/components/lib/Radio/Radio';
11
12
  import ValidationMessage from '../ValidationMessage/ValidationMessage';
@@ -53,6 +54,7 @@ export default class RadioField extends PureComponent {
53
54
  const {
54
55
  LabelProps = {},
55
56
  RadioProps = {},
57
+ InfoIconProps = {},
56
58
  ValidationMessageProps1 = {},
57
59
  ValidationMessageProps2 = {}
58
60
  } = customProps;
@@ -72,7 +74,9 @@ export default class RadioField extends PureComponent {
72
74
  }, options.map((option, index) => {
73
75
  let {
74
76
  text,
75
- value
77
+ value,
78
+ disabled = false,
79
+ infoTooltip
76
80
  } = option;
77
81
  return /*#__PURE__*/React.createElement("span", {
78
82
  key: index,
@@ -85,14 +89,19 @@ export default class RadioField extends PureComponent {
85
89
  labelPalette: labelPalette,
86
90
  labelSize: labelSize,
87
91
  active: isActive,
88
- disabled: isDisabled,
92
+ disabled: disabled || isDisabled,
89
93
  onChange: this.handleChange,
90
94
  size: size,
91
95
  checked: selectedValue == value,
92
96
  dataId: dataId,
93
97
  isReadOnly: isReadOnly,
94
98
  variant: variant
95
- }, RadioProps)));
99
+ }, RadioProps), !!infoTooltip ? /*#__PURE__*/React.createElement(Icon, _extends({
100
+ name: "ZD-GN-info",
101
+ size: "16",
102
+ title: infoTooltip,
103
+ iconClass: style.infoIcon
104
+ }, InfoIconProps)) : null));
96
105
  })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
97
106
  text: validationMessage,
98
107
  palette: validationPalette,
package/es/v1/form/fields/CheckBoxField/CheckBoxField.js CHANGED
@@ -42,6 +42,7 @@ function CheckBoxField(props) {
42
42
  customProps,
43
43
  renderLabelProps,
44
44
  getRef,
45
+ getContainerRef,
45
46
  onChange
46
47
  } = props;
47
48
  const {
@@ -100,7 +101,8 @@ function CheckBoxField(props) {
100
101
  disabled: removeEvent,
101
102
  checked: checked,
102
103
  getRef: handleGetRef,
103
- dataId: dataId
104
+ dataId: dataId,
105
+ getContainerRef: getContainerRef
104
106
  }, CheckBoxProps))), !isDirectCol && /*#__PURE__*/React.createElement(Box, {
105
107
  flexible: true
106
108
  }, labelElement)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
package/es/v1/form/fields/CheckBoxField/props/propTypes.js CHANGED
@@ -6,6 +6,7 @@ export const propTypes = {
6
6
  errorType: PropTypes.oneOf(['primary', 'secondary']),
7
7
  fieldSize: PropTypes.oneOf(['small', 'medium']),
8
8
  getRef: PropTypes.func,
9
+ getContainerRef: PropTypes.func,
9
10
  id: PropTypes.string.isRequired,
10
11
  labelCustomClass: PropTypes.string,
11
12
  labelName: PropTypes.string,
package/es/v1/form/fields/RadioField/RadioField.js CHANGED
@@ -10,6 +10,9 @@ import Icon from '@zohodesk/icons/es/Icon';
10
10
  import Label from '@zohodesk/components/es/v1/Label/Label';
11
11
  import Radio from '@zohodesk/components/es/v1/Radio/Radio';
12
12
  import ValidationMessage from '../ValidationMessage/ValidationMessage';
13
+ /** Hook */
14
+
15
+ import useRadio from './useRadio';
13
16
  /** Css */
14
17
 
15
18
  import style from '../../../../form/fields/Fields.module.css';
@@ -30,11 +33,13 @@ const RadioField = props => {
30
33
  size,
31
34
  selectedValue,
32
35
  isActive,
36
+ getRef,
33
37
  dataId,
34
38
  dataSelectorId,
35
39
  validationRuleMessage,
36
40
  validationRulePalette,
37
41
  isReadOnly,
42
+ isBoxStyle,
38
43
  variant,
39
44
  customProps,
40
45
  onChange
@@ -46,11 +51,16 @@ const RadioField = props => {
46
51
  ValidationMessageProps1 = {},
47
52
  ValidationMessageProps2 = {}
48
53
  } = customProps;
49
-
50
- const handleChange = value => {
51
- onChange && onChange(id, value);
52
- };
53
-
54
+ const {
55
+ handleGetRef,
56
+ handleChange
57
+ } = useRadio({
58
+ id,
59
+ onChange,
60
+ getRef,
61
+ options,
62
+ selectedValue
63
+ });
54
64
  return /*#__PURE__*/React.createElement("div", {
55
65
  className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
56
66
  "data-title": isDisabled ? title : null,
@@ -63,16 +73,18 @@ const RadioField = props => {
63
73
  customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
64
74
  dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
65
75
  }, LabelProps)), /*#__PURE__*/React.createElement("div", {
66
- className: `${style.fieldContainer} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`
76
+ className: `${style.fieldContainer} ${isBoxStyle ? style.radiosWrapper : ''} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`
67
77
  }, options.map((option, index) => {
68
78
  let {
69
79
  text,
70
80
  value,
81
+ disabled = false,
71
82
  infoTooltip
72
83
  } = option;
84
+ let isChecked = selectedValue == value;
73
85
  return /*#__PURE__*/React.createElement("span", {
74
86
  key: index,
75
- className: `${style.radio} ${!!infoTooltip ? style.labelContainer : ''}`
87
+ className: `${!isBoxStyle ? style.radio : ''} ${style.radioWrap}`
76
88
  }, /*#__PURE__*/React.createElement(Radio, _extends({
77
89
  id: index,
78
90
  value: value,
@@ -80,20 +92,30 @@ const RadioField = props => {
80
92
  text: text,
81
93
  labelPalette: labelPalette,
82
94
  labelSize: labelSize,
83
- active: isActive,
84
- disabled: isDisabled,
95
+ active: isActive || isBoxStyle && isChecked,
96
+ disabled: disabled || isDisabled,
85
97
  onChange: handleChange,
98
+ getRef: handleGetRef,
86
99
  size: size,
87
- checked: selectedValue == value,
100
+ checked: isChecked,
88
101
  dataId: dataId,
89
102
  isReadOnly: isReadOnly,
90
103
  variant: variant
91
- }, RadioProps)), !!infoTooltip ? /*#__PURE__*/React.createElement(Icon, _extends({
104
+ }, RadioProps, {
105
+ a11y: {
106
+ tabIndex: !!selectedValue ? isChecked ? '0' : '-1' : index === 0 ? '0' : '-1',
107
+ ...RadioProps.a11y
108
+ },
109
+ customClass: {
110
+ customRadioWrap: `${isBoxStyle ? style.radioBox : ''} ${isBoxStyle && isChecked ? style.radioBoxActive : ''}`,
111
+ ...RadioProps.customClass
112
+ }
113
+ }), !!infoTooltip ? /*#__PURE__*/React.createElement(Icon, _extends({
92
114
  name: "ZD-GN-info",
93
115
  size: "16",
94
116
  title: infoTooltip,
95
117
  iconClass: style.infoIcon
96
- }, InfoIconProps)) : null);
118
+ }, InfoIconProps)) : null));
97
119
  })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
98
120
  text: validationMessage,
99
121
  palette: validationPalette,
package/es/v1/form/fields/RadioField/props/defaultProps.js CHANGED
@@ -1,5 +1,6 @@
1
1
  export const defaultProps = {
2
2
  errorType: 'primary',
3
+ isBoxStyle: false,
3
4
  isMandatory: false,
4
5
  isDisabled: false,
5
6
  isReadOnly: false,
package/es/v1/form/fields/RadioField/props/propTypes.js CHANGED
@@ -2,8 +2,10 @@ import PropTypes from 'prop-types';
2
2
  export const propTypes = {
3
3
  dataId: PropTypes.string,
4
4
  errorType: PropTypes.oneOf(['primary', 'secondary']),
5
+ getRef: PropTypes.func,
5
6
  id: PropTypes.string,
6
7
  isActive: PropTypes.bool,
8
+ isBoxStyle: PropTypes.bool,
7
9
  isDisabled: PropTypes.bool,
8
10
  isMandatory: PropTypes.bool,
9
11
  isReadOnly: PropTypes.bool,
package/es/v1/form/fields/RadioField/useRadio.js ADDED
@@ -0,0 +1,44 @@
1
+ import { useRef, useEffect } from 'react';
2
+ export default function useRadio(_ref) {
3
+ let {
4
+ id,
5
+ onChange,
6
+ getRef,
7
+ options,
8
+ selectedValue
9
+ } = _ref;
10
+
11
+ const handleChange = value => {
12
+ onChange && onChange(id, value);
13
+ };
14
+
15
+ const radioRef = useRef({
16
+ radios: {},
17
+ focus: () => {}
18
+ }).current;
19
+ const firstRadioValue = options[0].value;
20
+
21
+ function handleGetRef(ele, val) {
22
+ radioRef.radios[val] = ele;
23
+ }
24
+
25
+ function handleFocus() {
26
+ if (!!selectedValue) {
27
+ radioRef.radios[selectedValue].focus();
28
+ } else {
29
+ radioRef.radios[firstRadioValue].focus();
30
+ }
31
+ }
32
+
33
+ useEffect(() => {
34
+ radioRef.focus = handleFocus;
35
+ getRef && getRef(radioRef, id);
36
+ return () => {
37
+ getRef && getRef(null, id);
38
+ };
39
+ }, [getRef]);
40
+ return {
41
+ handleGetRef,
42
+ handleChange
43
+ };
44
+ }
package/lib/form/fields/CheckBoxField/CheckBoxField.js CHANGED
@@ -110,6 +110,7 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
110
110
  dataSelectorId = _this$props3.dataSelectorId,
111
111
  validationRuleMessage = _this$props3.validationRuleMessage,
112
112
  validationRulePalette = _this$props3.validationRulePalette,
113
+ getContainerRef = _this$props3.getContainerRef,
113
114
  infoText = _this$props3.infoText,
114
115
  fieldSize = _this$props3.fieldSize,
115
116
  labelPalette = _this$props3.labelPalette,
@@ -167,7 +168,8 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
167
168
  disabled: removeEvent,
168
169
  checked: checked,
169
170
  getRef: this.handleGetRef,
170
- dataId: dataId
171
+ dataId: dataId,
172
+ getContainerRef: getContainerRef
171
173
  }, CheckBoxProps))), !isDirectCol && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
172
174
  flexible: true
173
175
  }, labelElement)), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({