@zohodesk/dot 1.0.0-temp-56 → 1.0.0-temp-57

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 (55) hide show
  1. package/es/form/fields/CheckBoxField/CheckBoxField.js +1 -1
  2. package/es/form/fields/CurrencyField/CurrencyField.js +2 -2
  3. package/es/form/fields/DateField/DateField.js +2 -2
  4. package/es/form/fields/Fields.module.css +5 -7
  5. package/es/form/fields/MultiSelectField/MultiSelectField.js +2 -2
  6. package/es/form/fields/RadioField/RadioField.js +2 -2
  7. package/es/form/fields/SelectField/SelectField.js +2 -2
  8. package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js +2 -2
  9. package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.js +2 -2
  10. package/es/form/fields/TextBoxField/TextBoxField.js +2 -2
  11. package/es/form/fields/TextEditorField/TextEditorField.js +2 -2
  12. package/es/form/fields/TextareaField/TextareaField.js +2 -2
  13. package/es/form/layout/Field/Field.js +1 -1
  14. package/es/form/layout/Section/Section.js +7 -3
  15. package/es/lookup/header/ModuleHeader/ModuleHeader.js +8 -3
  16. package/es/lookup/header/ModuleHeader/docs/ModuleHeader__default.docs.js +13 -3
  17. package/es/lookup/header/TicketHeader/TicketHeader.js +7 -4
  18. package/es/lookup/header/lookupHeaderCommon.module.css +8 -2
  19. package/lib/form/fields/CheckBoxField/CheckBoxField.js +1 -1
  20. package/lib/form/fields/CurrencyField/CurrencyField.js +2 -2
  21. package/lib/form/fields/DateField/DateField.js +2 -2
  22. package/lib/form/fields/Fields.module.css +5 -7
  23. package/lib/form/fields/MultiSelectField/MultiSelectField.js +2 -2
  24. package/lib/form/fields/RadioField/RadioField.js +2 -2
  25. package/lib/form/fields/SelectField/SelectField.js +2 -2
  26. package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js +2 -2
  27. package/lib/form/fields/TagsMultiSelectField/TagsMultiSelectField.js +2 -2
  28. package/lib/form/fields/TextBoxField/TextBoxField.js +2 -2
  29. package/lib/form/fields/TextEditorField/TextEditorField.js +2 -2
  30. package/lib/form/fields/TextareaField/TextareaField.js +2 -2
  31. package/lib/form/layout/Field/Field.js +1 -1
  32. package/lib/form/layout/Section/Section.js +7 -3
  33. package/lib/lookup/header/ModuleHeader/ModuleHeader.js +8 -3
  34. package/lib/lookup/header/ModuleHeader/docs/ModuleHeader__default.docs.js +13 -3
  35. package/lib/lookup/header/TicketHeader/TicketHeader.js +7 -4
  36. package/lib/lookup/header/lookupHeaderCommon.module.css +8 -2
  37. package/package.json +1 -1
  38. package/src/form/fields/CheckBoxField/CheckBoxField.js +1 -7
  39. package/src/form/fields/CurrencyField/CurrencyField.js +2 -8
  40. package/src/form/fields/DateField/DateField.js +2 -8
  41. package/src/form/fields/Fields.module.css +5 -8
  42. package/src/form/fields/MultiSelectField/MultiSelectField.js +2 -8
  43. package/src/form/fields/RadioField/RadioField.js +2 -8
  44. package/src/form/fields/SelectField/SelectField.js +2 -8
  45. package/src/form/fields/TagsMultiSelect/TagsMultiSelect.js +2 -2
  46. package/src/form/fields/TagsMultiSelectField/TagsMultiSelectField.js +2 -10
  47. package/src/form/fields/TextBoxField/TextBoxField.js +2 -8
  48. package/src/form/fields/TextEditorField/TextEditorField.js +2 -10
  49. package/src/form/fields/TextareaField/TextareaField.js +2 -8
  50. package/src/form/layout/Field/Field.js +4 -3
  51. package/src/form/layout/Section/Section.js +14 -10
  52. package/src/lookup/header/ModuleHeader/ModuleHeader.js +9 -3
  53. package/src/lookup/header/ModuleHeader/docs/ModuleHeader__default.docs.js +21 -8
  54. package/src/lookup/header/TicketHeader/TicketHeader.js +7 -4
  55. package/src/lookup/header/lookupHeaderCommon.module.css +6 -0
package/es/form/fields/CheckBoxField/CheckBoxField.js CHANGED
@@ -104,7 +104,7 @@ export default class CheckBoxField extends PureComponent {
104
104
  title: lockedInfoText
105
105
  }) : null);
106
106
  return /*#__PURE__*/React.createElement("div", {
107
- className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
107
+ className: `${style.container} ${isDisabled ? style.disabled : ''}`,
108
108
  "data-title": isDisabled ? title : ''
109
109
  }, isDirectCol && labelElement, /*#__PURE__*/React.createElement("div", {
110
110
  className: `${isDirectCol ? style.fieldContainer : style.checkboxFieldContainer} ${isDirectCol && labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
package/es/form/fields/CurrencyField/CurrencyField.js CHANGED
@@ -120,7 +120,7 @@ export default class CurrencyField extends PureComponent {
120
120
 
121
121
  let uniqueId = htmlId ? htmlId : this.getNextId();
122
122
  return /*#__PURE__*/React.createElement("div", {
123
- className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
123
+ className: `${style.container} ${isDisabled ? style.disabled : ''}`,
124
124
  "data-title": isDisabled ? title : ''
125
125
  }, labelName && /*#__PURE__*/React.createElement("div", {
126
126
  className: style.labelContainer
@@ -128,7 +128,7 @@ export default class CurrencyField extends PureComponent {
128
128
  text: labelName,
129
129
  size: fieldSize === 'small' ? 'small' : 'medium',
130
130
  palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
131
- customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
131
+ customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
132
132
  htmlFor: uniqueId,
133
133
  dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
134
134
  }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {
package/es/form/fields/DateField/DateField.js CHANGED
@@ -124,7 +124,7 @@ export default class DateField extends PureComponent {
124
124
  } = customProps;
125
125
  let getAriaId = htmlId ? htmlId : this.getNextId();
126
126
  return /*#__PURE__*/React.createElement("div", {
127
- className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
127
+ className: `${style.container} ${isDisabled ? style.disabled : ''}`,
128
128
  "data-title": isDisabled ? title : ''
129
129
  }, labelName && /*#__PURE__*/React.createElement("div", {
130
130
  className: style.labelContainer
@@ -134,7 +134,7 @@ export default class DateField extends PureComponent {
134
134
  size: fieldSize === 'small' ? 'small' : 'medium',
135
135
  palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
136
136
  onClick: isDisabled || isReadOnly ? null : this.handleLabelClick,
137
- customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
137
+ customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
138
138
  dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
139
139
  }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {
140
140
  name: "ZD-GN-info",
package/es/form/fields/Fields.module.css CHANGED
@@ -43,16 +43,14 @@
43
43
  [dir=rtl] .checkboxText {
44
44
  padding-right: var(--zd_size6);
45
45
  }
46
+ .cbTextReadonly {
47
+ cursor: not-allowed;
48
+ }
46
49
  .cbTextPointer {
47
50
  cursor: pointer;
48
51
  }
49
- .disabled, .readonly {
50
- cursor: not-allowed;
51
- }
52
- .cbTextReadonly,
53
- .disabled .fieldLabel,
54
- .readonly .fieldLabel {
55
- --label_cursor: not-allowed;
52
+ .disabled {
53
+ composes: disabled from '~@zohodesk/components/lib/common/common.module.css';
56
54
  }
57
55
  [dir=ltr] .radio {
58
56
  margin: var(--zd_size5) var(--zd_size32) var(--zd_size5) 0;
package/es/form/fields/MultiSelectField/MultiSelectField.js CHANGED
@@ -136,7 +136,7 @@ export default class MultiSelectField extends PureComponent {
136
136
  let isDarkPalette = palette === 'dark';
137
137
  let uniqueId = htmlId ? htmlId : this.getNextId();
138
138
  return /*#__PURE__*/React.createElement("div", {
139
- className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
139
+ className: `${style.container} ${isDisabled ? style.disabled : ''}`,
140
140
  "data-title": isDisabled ? title : ''
141
141
  }, labelName && /*#__PURE__*/React.createElement("div", {
142
142
  className: style.labelContainer
@@ -146,7 +146,7 @@ export default class MultiSelectField extends PureComponent {
146
146
  size: fieldSize === 'small' ? 'small' : 'medium',
147
147
  palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
148
148
  ,
149
- customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
149
+ customClass: `${isMandatory ? style.labelMandatory : ''}`,
150
150
  dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
151
151
  htmlFor: uniqueId
152
152
  }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {
package/es/form/fields/RadioField/RadioField.js CHANGED
@@ -55,14 +55,14 @@ export default class RadioField extends PureComponent {
55
55
  ValidationMessageProps2 = {}
56
56
  } = customProps;
57
57
  return /*#__PURE__*/React.createElement("div", {
58
- className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
58
+ className: `${style.container} ${isDisabled ? style.disabled : ''}`,
59
59
  "data-title": isDisabled ? title : ''
60
60
  }, labelName && /*#__PURE__*/React.createElement(Label, _extends({
61
61
  text: labelName,
62
62
  size: "medium",
63
63
  id: id,
64
64
  palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
65
- customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
65
+ customClass: `${isMandatory ? style.labelMandatory : ''}`,
66
66
  dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
67
67
  }, LabelProps)), /*#__PURE__*/React.createElement("div", {
68
68
  className: `${style.fieldContainer} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`
package/es/form/fields/SelectField/SelectField.js CHANGED
@@ -104,7 +104,7 @@ export default class SelectField extends PureComponent {
104
104
  } = customProps;
105
105
  let uniqueId = htmlId ? htmlId : this.getNextId();
106
106
  return /*#__PURE__*/React.createElement("div", {
107
- className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
107
+ className: `${style.container} ${isDisabled ? style.disabled : ''}`,
108
108
  "data-title": isDisabled ? title : ''
109
109
  }, labelName && /*#__PURE__*/React.createElement("div", {
110
110
  className: style.labelContainer
@@ -112,7 +112,7 @@ export default class SelectField extends PureComponent {
112
112
  text: labelName,
113
113
  size: fieldSize === 'small' ? 'small' : 'medium',
114
114
  palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
115
- customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
115
+ customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
116
116
  htmlFor: uniqueId,
117
117
  dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
118
118
  }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {
package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js CHANGED
@@ -146,10 +146,10 @@ export default class TagsMultiSelect extends React.Component {
146
146
  key: index
147
147
  }, /*#__PURE__*/React.createElement(Tag, {
148
148
  text: name,
149
- onRemove: isReadOnly ? null : deleteTag.bind(this, name),
149
+ onRemove: deleteTag.bind(this, name),
150
150
  closeTitle: i18nKeys.deleteText,
151
151
  palette: tagType === 'SYSTEM' ? 'primary' : 'default',
152
- isReadOnly: isReadOnly
152
+ disabled: isReadOnly
153
153
  })) : null;
154
154
  }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/React.createElement(Box, {
155
155
  className: style.moreLess,
package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.js CHANGED
@@ -182,7 +182,7 @@ const TagsMultiSelectField = props => {
182
182
  };
183
183
  }, []);
184
184
  return /*#__PURE__*/React.createElement("div", {
185
- className: `${style.container} ${isDisabled ? fieldStyle.disabled : isReadOnly ? fieldStyle.readonly : ''}`
185
+ className: style.container
186
186
  }, /*#__PURE__*/React.createElement(Container, {
187
187
  alignBox: "row",
188
188
  align: "baseline",
@@ -193,7 +193,7 @@ const TagsMultiSelectField = props => {
193
193
  id: id,
194
194
  size: labelSize,
195
195
  palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
196
- customClass: `${fieldStyle.fieldLabel} ${isMandatory ? fieldStyle.labelMandatory : ''} ${labelClass ? labelClass : ''}`,
196
+ customClass: `${isMandatory ? fieldStyle.labelMandatory : ''} ${labelClass ? labelClass : ''}`,
197
197
  dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
198
198
  htmlFor: htmlId
199
199
  }, LabelProps)), selectedValueCount ? /*#__PURE__*/React.createElement(Box, {
package/es/form/fields/TextBoxField/TextBoxField.js CHANGED
@@ -97,7 +97,7 @@ export default class TextBoxField extends PureComponent {
97
97
  } = ePhiData;
98
98
  let uniqueId = htmlId ? htmlId : this.getNextId();
99
99
  return /*#__PURE__*/React.createElement("div", {
100
- className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
100
+ className: `${style.container} ${isDisabled ? style.disabled : ''}`,
101
101
  "data-title": isDisabled ? title : ''
102
102
  }, labelName && /*#__PURE__*/React.createElement("div", {
103
103
  className: style.labelContainer
@@ -105,7 +105,7 @@ export default class TextBoxField extends PureComponent {
105
105
  text: labelName,
106
106
  size: fieldSize === 'small' ? 'small' : 'medium',
107
107
  palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
108
- customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
108
+ customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
109
109
  htmlFor: uniqueId,
110
110
  dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
111
111
  }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {
package/es/form/fields/TextEditorField/TextEditorField.js CHANGED
@@ -108,7 +108,7 @@ export default class TextEditorField extends PureComponent {
108
108
  ePhiStatus = false
109
109
  } = ePhiData;
110
110
  return /*#__PURE__*/React.createElement("div", {
111
- className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${className || ''}`
111
+ className: `${style.container} ${className}`
112
112
  }, /*#__PURE__*/React.createElement(Container, {
113
113
  isCover: false,
114
114
  alignBox: "row",
@@ -119,7 +119,7 @@ export default class TextEditorField extends PureComponent {
119
119
  htmlFor: !isReadOnly && !isDisabled ? id : undefined,
120
120
  palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
121
121
  onClick: this.handleLabelClick,
122
- customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
122
+ customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
123
123
  dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
124
124
  }, LabelProps))), infoText ? /*#__PURE__*/React.createElement(Icon, {
125
125
  name: "ZD-GN-info",
package/es/form/fields/TextareaField/TextareaField.js CHANGED
@@ -95,7 +95,7 @@ export default class TextareaField extends PureComponent {
95
95
  } = customProps;
96
96
  let uniqueId = htmlId ? htmlId : this.getNextId();
97
97
  return /*#__PURE__*/React.createElement("div", {
98
- className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
98
+ className: `${style.container} ${isDisabled ? style.disabled : ''}`,
99
99
  "data-title": isDisabled ? title : ''
100
100
  }, labelName && /*#__PURE__*/React.createElement("div", {
101
101
  className: style.labelContainer
@@ -104,7 +104,7 @@ export default class TextareaField extends PureComponent {
104
104
  id: id,
105
105
  size: fieldSize === 'small' ? 'small' : 'medium',
106
106
  palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
107
- customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
107
+ customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
108
108
  htmlFor: uniqueId,
109
109
  dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
110
110
  }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {
package/es/form/layout/Field/Field.js CHANGED
@@ -13,7 +13,7 @@ export default class Field extends Component {
13
13
  dataId
14
14
  } = this.props;
15
15
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
16
- className: `${containerClass ? containerClass : ''} ${column == 'single' ? `${style.singleColumn}` : `${style[width]} `}`,
16
+ className: `${column == 'single' ? `${style.singleColumn}` : `${style[width]}`} ${`formFieldLi_${width}`} ${containerClass ? containerClass : ''} `,
17
17
  "data-id": dataId
18
18
  }, /*#__PURE__*/React.createElement("div", {
19
19
  className: `${className ? className : ''} ${`fieldWidth_${width}`}`
package/es/form/layout/Section/Section.js CHANGED
@@ -14,17 +14,20 @@ export default class Section extends Component {
14
14
  titleClass,
15
15
  className,
16
16
  column,
17
- formName
17
+ formName,
18
+ innerContainerClass
18
19
  } = this.props;
19
20
  return /*#__PURE__*/React.createElement("div", {
20
21
  "data-id": dataId,
21
22
  className: containerClass ? containerClass : ''
23
+ }, /*#__PURE__*/React.createElement("div", {
24
+ className: innerContainerClass ? innerContainerClass : ''
22
25
  }, title && /*#__PURE__*/React.createElement("div", {
23
26
  className: titleClass ? titleClass : ''
24
27
  }, title), /*#__PURE__*/React.createElement("div", {
25
28
  className: `${className ? className : ''} ${column == 'single' ? style.singleColumn : ''}`,
26
29
  "data-id": formName && formName
27
- }, this.props.children));
30
+ }, this.props.children)));
28
31
  }
29
32
 
30
33
  }
@@ -34,7 +37,8 @@ Section.propTypes = {
34
37
  containerClass: PropTypes.string,
35
38
  dataId: PropTypes.string,
36
39
  title: PropTypes.string,
37
- titleClass: PropTypes.string
40
+ titleClass: PropTypes.string,
41
+ innerContainerClass: PropTypes.string
38
42
  };
39
43
 
40
44
  if (false) {
package/es/lookup/header/ModuleHeader/ModuleHeader.js CHANGED
@@ -28,12 +28,13 @@ export default class ModuleHeader extends PureComponent {
28
28
  miniDescription,
29
29
  dataId,
30
30
  closeTitle,
31
- onSearchKeyDown
31
+ onSearchKeyDown,
32
+ palette
32
33
  } = this.props;
33
34
  return /*#__PURE__*/React.createElement(Container, {
34
35
  align: "vertical",
35
36
  alignBox: "row",
36
- className: `${commonStyle.container}`,
37
+ className: `${commonStyle.container} ${commonStyle[`${palette}`]}`,
37
38
  isCover: false,
38
39
  wrap: "wrap",
39
40
  dataId: dataId
@@ -79,7 +80,11 @@ ModuleHeader.propTypes = {
79
80
  title: PropTypes.string,
80
81
  dataId: PropTypes.string,
81
82
  closeTitle: PropTypes.string,
82
- onSearchKeyDown: PropTypes.func
83
+ onSearchKeyDown: PropTypes.func,
84
+ palette: PropTypes.oneOf(['default', 'white'])
85
+ };
86
+ ModuleHeader.defaultProps = {
87
+ palette: 'default'
83
88
  };
84
89
 
85
90
  if (false) {
package/es/lookup/header/ModuleHeader/docs/ModuleHeader__default.docs.js CHANGED
@@ -22,14 +22,24 @@ export default class ModuleHeader__default extends Component {
22
22
  let {
23
23
  searchStr
24
24
  } = this.state;
25
- return /*#__PURE__*/React.createElement(ModuleHeader, {
25
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ModuleHeader, {
26
26
  title: "Find Duplicate",
27
27
  needSearch: true,
28
28
  searchStr: searchStr,
29
29
  onSearchChange: this.handleSearch,
30
30
  searchPlaceHolder: "Search",
31
- miniDescription: "Select a field to search for duplicate records"
32
- });
31
+ miniDescription: "Select a field to search for duplicate records",
32
+ onLookupClose: () => {}
33
+ }), /*#__PURE__*/React.createElement(ModuleHeader, {
34
+ title: "Find Duplicate",
35
+ needSearch: true,
36
+ searchStr: searchStr,
37
+ onSearchChange: this.handleSearch,
38
+ searchPlaceHolder: "Search",
39
+ miniDescription: "Select a field to search for duplicate records",
40
+ onLookupClose: () => {},
41
+ palette: "white"
42
+ }));
33
43
  }
34
44
 
35
45
  }
package/es/lookup/header/TicketHeader/TicketHeader.js CHANGED
@@ -31,7 +31,8 @@ export default class TicketHeader extends Component {
31
31
  needOnTypeSearch,
32
32
  getSearchBoxRef,
33
33
  needViewsList,
34
- i18nKeys
34
+ i18nKeys,
35
+ palette
35
36
  } = this.props;
36
37
  let {
37
38
  menuEmptyMessage = 'No matches found'
@@ -39,7 +40,7 @@ export default class TicketHeader extends Component {
39
40
  return /*#__PURE__*/React.createElement(Container, {
40
41
  align: "vertical",
41
42
  alignBox: "row",
42
- className: `${commonStyle.container} ${commonResponsive.container} ${style.container}`,
43
+ className: `${commonStyle.container} ${commonStyle[`${palette}`]} ${commonResponsive.container} ${style.container}`,
43
44
  isCover: false,
44
45
  wrap: "wrap"
45
46
  }, /*#__PURE__*/React.createElement("div", {
@@ -101,10 +102,12 @@ TicketHeader.propTypes = {
101
102
  title: PropTypes.string,
102
103
  i18nKeys: PropTypes.shape({
103
104
  menuEmptyMessage: PropTypes.string
104
- })
105
+ }),
106
+ palette: PropTypes.oneOf(['default', 'white'])
105
107
  };
106
108
  TicketHeader.defaultProps = {
107
- i18nKeys: {}
109
+ i18nKeys: {},
110
+ palette: 'default'
108
111
  };
109
112
 
110
113
  if (false) {
package/es/lookup/header/lookupHeaderCommon.module.css CHANGED
@@ -1,13 +1,19 @@
1
1
  .container {
2
2
  min-height: var(--zd_size51);
3
3
  position: relative;
4
- background-color: var(--zdt_lookupheader_default_bg);
5
- border-bottom: solid 1px var(--zdt_lookupheader_default_border);
6
4
  }[dir=ltr] .container {
7
5
  padding: 0 var(--zd_size52) 0 var(--zd_size10);
8
6
  }[dir=rtl] .container {
9
7
  padding: 0 var(--zd_size10) 0 var(--zd_size52);
10
8
  }
9
+ .default {
10
+ background-color: var(--zdt_lookupheader_default_bg);
11
+ border-bottom: solid 1px var(--zdt_lookupheader_default_border);
12
+ }
13
+ .white {
14
+ background-color: var(--zdt_lookupheader_white_bg);
15
+ border-bottom: solid 1px var(--zdt_lookupheader_white_border);
16
+ }
11
17
  .searchContainer, .title {
12
18
  margin: 0 var(--zd_size20);
13
19
  }
package/lib/form/fields/CheckBoxField/CheckBoxField.js CHANGED
@@ -153,7 +153,7 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
153
153
  }) : null);
154
154
 
155
155
  return /*#__PURE__*/_react["default"].createElement("div", {
156
- className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
156
+ className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
157
157
  "data-title": isDisabled ? title : ''
158
158
  }, isDirectCol && labelElement, /*#__PURE__*/_react["default"].createElement("div", {
159
159
  className: "".concat(isDirectCol ? _FieldsModule["default"].fieldContainer : _FieldsModule["default"].checkboxFieldContainer, " ").concat(isDirectCol && labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
package/lib/form/fields/CurrencyField/CurrencyField.js CHANGED
@@ -165,7 +165,7 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
165
165
 
166
166
  var uniqueId = htmlId ? htmlId : this.getNextId();
167
167
  return /*#__PURE__*/_react["default"].createElement("div", {
168
- className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
168
+ className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
169
169
  "data-title": isDisabled ? title : ''
170
170
  }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
171
171
  className: _FieldsModule["default"].labelContainer
@@ -173,7 +173,7 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
173
173
  text: labelName,
174
174
  size: fieldSize === 'small' ? 'small' : 'medium',
175
175
  palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
176
- customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
176
+ customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
177
177
  htmlFor: uniqueId,
178
178
  dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
179
179
  }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
package/lib/form/fields/DateField/DateField.js CHANGED
@@ -171,7 +171,7 @@ var DateField = /*#__PURE__*/function (_PureComponent) {
171
171
  ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
172
172
  var getAriaId = htmlId ? htmlId : this.getNextId();
173
173
  return /*#__PURE__*/_react["default"].createElement("div", {
174
- className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
174
+ className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
175
175
  "data-title": isDisabled ? title : ''
176
176
  }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
177
177
  className: _FieldsModule["default"].labelContainer
@@ -181,7 +181,7 @@ var DateField = /*#__PURE__*/function (_PureComponent) {
181
181
  size: fieldSize === 'small' ? 'small' : 'medium',
182
182
  palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
183
183
  onClick: isDisabled || isReadOnly ? null : this.handleLabelClick,
184
- customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
184
+ customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
185
185
  dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
186
186
  }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
187
187
  name: "ZD-GN-info",
package/lib/form/fields/Fields.module.css CHANGED
@@ -43,16 +43,14 @@
43
43
  [dir=rtl] .checkboxText {
44
44
  padding-right: var(--zd_size6);
45
45
  }
46
+ .cbTextReadonly {
47
+ cursor: not-allowed;
48
+ }
46
49
  .cbTextPointer {
47
50
  cursor: pointer;
48
51
  }
49
- .disabled, .readonly {
50
- cursor: not-allowed;
51
- }
52
- .cbTextReadonly,
53
- .disabled .fieldLabel,
54
- .readonly .fieldLabel {
55
- --label_cursor: not-allowed;
52
+ .disabled {
53
+ composes: disabled from '~@zohodesk/components/lib/common/common.module.css';
56
54
  }
57
55
  [dir=ltr] .radio {
58
56
  margin: var(--zd_size5) var(--zd_size32) var(--zd_size5) 0;
package/lib/form/fields/MultiSelectField/MultiSelectField.js CHANGED
@@ -184,7 +184,7 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
184
184
  var isDarkPalette = palette === 'dark';
185
185
  var uniqueId = htmlId ? htmlId : this.getNextId();
186
186
  return /*#__PURE__*/_react["default"].createElement("div", {
187
- className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
187
+ className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
188
188
  "data-title": isDisabled ? title : ''
189
189
  }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
190
190
  className: _FieldsModule["default"].labelContainer
@@ -194,7 +194,7 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
194
194
  size: fieldSize === 'small' ? 'small' : 'medium',
195
195
  palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
196
196
  ,
197
- customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
197
+ customClass: "".concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
198
198
  dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
199
199
  htmlFor: uniqueId
200
200
  }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
package/lib/form/fields/RadioField/RadioField.js CHANGED
@@ -105,14 +105,14 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
105
105
  _customProps$Validati2 = customProps.ValidationMessageProps2,
106
106
  ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
107
107
  return /*#__PURE__*/_react["default"].createElement("div", {
108
- className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
108
+ className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
109
109
  "data-title": isDisabled ? title : ''
110
110
  }, labelName && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
111
111
  text: labelName,
112
112
  size: "medium",
113
113
  id: id,
114
114
  palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
115
- customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
115
+ customClass: "".concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
116
116
  dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
117
117
  }, LabelProps)), /*#__PURE__*/_react["default"].createElement("div", {
118
118
  className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
package/lib/form/fields/SelectField/SelectField.js CHANGED
@@ -152,7 +152,7 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
152
152
  ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
153
153
  var uniqueId = htmlId ? htmlId : this.getNextId();
154
154
  return /*#__PURE__*/_react["default"].createElement("div", {
155
- className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
155
+ className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
156
156
  "data-title": isDisabled ? title : ''
157
157
  }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
158
158
  className: _FieldsModule["default"].labelContainer
@@ -160,7 +160,7 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
160
160
  text: labelName,
161
161
  size: fieldSize === 'small' ? 'small' : 'medium',
162
162
  palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
163
- customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
163
+ customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
164
164
  htmlFor: uniqueId,
165
165
  dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
166
166
  }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js CHANGED
@@ -200,10 +200,10 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
200
200
  key: index
201
201
  }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
202
202
  text: name,
203
- onRemove: isReadOnly ? null : deleteTag.bind(_this3, name),
203
+ onRemove: deleteTag.bind(_this3, name),
204
204
  closeTitle: i18nKeys.deleteText,
205
205
  palette: tagType === 'SYSTEM' ? 'primary' : 'default',
206
- isReadOnly: isReadOnly
206
+ disabled: isReadOnly
207
207
  })) : null;
208
208
  }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
209
209
  className: _TagsMultiSelectModule["default"].moreLess,
package/lib/form/fields/TagsMultiSelectField/TagsMultiSelectField.js CHANGED
@@ -220,7 +220,7 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
220
220
  };
221
221
  }, []);
222
222
  return /*#__PURE__*/_react["default"].createElement("div", {
223
- className: "".concat(_TagsMultiSelectFieldModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '')
223
+ className: _TagsMultiSelectFieldModule["default"].container
224
224
  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
225
225
  alignBox: "row",
226
226
  align: "baseline",
@@ -231,7 +231,7 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
231
231
  id: id,
232
232
  size: labelSize,
233
233
  palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
234
- customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : '', " ").concat(labelClass ? labelClass : ''),
234
+ customClass: "".concat(isMandatory ? _FieldsModule["default"].labelMandatory : '', " ").concat(labelClass ? labelClass : ''),
235
235
  dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
236
236
  htmlFor: htmlId
237
237
  }, LabelProps)), selectedValueCount ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
package/lib/form/fields/TextBoxField/TextBoxField.js CHANGED
@@ -146,7 +146,7 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
146
146
  ePhiStatus = _ePhiData$ePhiStatus === void 0 ? false : _ePhiData$ePhiStatus;
147
147
  var uniqueId = htmlId ? htmlId : this.getNextId();
148
148
  return /*#__PURE__*/_react["default"].createElement("div", {
149
- className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
149
+ className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
150
150
  "data-title": isDisabled ? title : ''
151
151
  }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
152
152
  className: _FieldsModule["default"].labelContainer
@@ -154,7 +154,7 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
154
154
  text: labelName,
155
155
  size: fieldSize === 'small' ? 'small' : 'medium',
156
156
  palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
157
- customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
157
+ customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
158
158
  htmlFor: uniqueId,
159
159
  dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
160
160
  }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
package/lib/form/fields/TextEditorField/TextEditorField.js CHANGED
@@ -156,7 +156,7 @@ var TextEditorField = /*#__PURE__*/function (_PureComponent) {
156
156
  _ePhiData$ePhiStatus = ePhiData.ePhiStatus,
157
157
  ePhiStatus = _ePhiData$ePhiStatus === void 0 ? false : _ePhiData$ePhiStatus;
158
158
  return /*#__PURE__*/_react["default"].createElement("div", {
159
- className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '', " ").concat(className || '')
159
+ className: "".concat(_FieldsModule["default"].container, " ").concat(className)
160
160
  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
161
161
  isCover: false,
162
162
  alignBox: "row",
@@ -167,7 +167,7 @@ var TextEditorField = /*#__PURE__*/function (_PureComponent) {
167
167
  htmlFor: !isReadOnly && !isDisabled ? id : undefined,
168
168
  palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
169
169
  onClick: this.handleLabelClick,
170
- customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
170
+ customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
171
171
  dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
172
172
  }, LabelProps))), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
173
173
  name: "ZD-GN-info",
package/lib/form/fields/TextareaField/TextareaField.js CHANGED
@@ -142,7 +142,7 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
142
142
  ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
143
143
  var uniqueId = htmlId ? htmlId : this.getNextId();
144
144
  return /*#__PURE__*/_react["default"].createElement("div", {
145
- className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
145
+ className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
146
146
  "data-title": isDisabled ? title : ''
147
147
  }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
148
148
  className: _FieldsModule["default"].labelContainer
@@ -151,7 +151,7 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
151
151
  id: id,
152
152
  size: fieldSize === 'small' ? 'small' : 'medium',
153
153
  palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
154
- customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
154
+ customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
155
155
  htmlFor: uniqueId,
156
156
  dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
157
157
  }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
package/lib/form/layout/Field/Field.js CHANGED
@@ -62,7 +62,7 @@ var Field = /*#__PURE__*/function (_Component) {
62
62
  containerClass = _this$props.containerClass,
63
63
  dataId = _this$props.dataId;
64
64
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
65
- className: "".concat(containerClass ? containerClass : '', " ").concat(column == 'single' ? "".concat(_FieldModule["default"].singleColumn) : "".concat(_FieldModule["default"][width], " ")),
65
+ className: "".concat(column == 'single' ? "".concat(_FieldModule["default"].singleColumn) : "".concat(_FieldModule["default"][width]), " ", "formFieldLi_".concat(width), " ").concat(containerClass ? containerClass : '', " "),
66
66
  "data-id": dataId
67
67
  }, /*#__PURE__*/_react["default"].createElement("div", {
68
68
  className: "".concat(className ? className : '', " ", "fieldWidth_".concat(width))