@zohodesk/dot 1.0.0-temp-224 → 1.0.0-temp-224.1

package/README.md

@@ -2,11 +2,18 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
-# 1.8.6
+# 1.9.0
+
+- Updated @zohodesk-private/color-variable-preprocessor package - Grayscale introduced
+
+- **TextEditor**
+  - customClass prop added
+  
+# 1.8.7
 
-- **LabelEnhancedComponent-V1**
-  - Accessibility Enhanced Label component has been updated in below components
-    - `CheckBoxField`, `CurrencyField`, `DateField`, `MultiSelectField`, `RadioField`, `SelectField`, `TagsMultiSelectField`, `TextareaField`, `TextBoxField`, `TextEditorField` (v1 folder components excluded)  
+- **CheckBoxField, CurrencyField, DateField, MultiSelectField, RadioField, SelectField, TagsMultiSelectField, TextareaField, TextBoxField, TextEditorField**
+  - Accessibility Enhanced Label component has been updated in above components
+     (v1 folder components excluded)  
 
 # 1.8.6
 

package/es/common/dot_boxShadow.module.css

@@ -37,8 +37,7 @@
     --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
 
     /* onboarding  */
-    --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px rgba(0, 0, 0, 0.09));
+    --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px var(--zd-shadow-saturation, rgba(0, 0, 0, 0.09)));
     --zd_bs_onboarding_gradient: var(--zd_bs_contrast_outline, 0px 20px 30px 0px var(--zdt_onboarding_bg_box_shadow));
     --zd_bs_onboarding_primary_button: var(--zd_bs_contrast_outline, 0px 4px 20px 0px var(--zdt_onboarding_primary_button_shadow));
-
 }

package/es/form/fields/CheckBoxField/CheckBoxField.js

@@ -96,10 +96,15 @@ export default class CheckBoxField extends PureComponent {
         container: !isDirectCol ? style.checkboxText : ''
       },
       size: fieldSize === 'small' ? 'small' : 'medium',
-      textWeight: isDirectCol ? 'regular' : 'semibold',
+      fontWeight: isDirectCol ? 'regular' : 'semibold',
       testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       onClick: !removeEvent ? this.handleLabelClick : null,
+      tagAttributes: {
+        label: {
+          id
+        }
+      },
       ...LabelProps
     }));
     return /*#__PURE__*/React.createElement("div", {

package/es/form/fields/CurrencyField/__tests__/__snapshots__/CurrencyField.spec.js.snap

@@ -10,7 +10,7 @@ exports[`CurrencyField rendering the defult props 1`] = `
       class="fieldContainer "
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+        class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div

package/es/form/fields/DateField/DateField.js

@@ -145,6 +145,11 @@ export default class DateField extends PureComponent {
       testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       onClick: isDisabled || isReadOnly ? null : this.handleLabelClick,
+      tagAttributes: {
+        label: {
+          id: labelName
+        }
+      },
       ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`

package/es/form/fields/DateField/__tests__/__snapshots__/DateField.spec.js.snap

@@ -18,7 +18,7 @@ exports[`DateField rendering the defult props 1`] = `
           data-test-id="dateField(formatted_undefined)_widget"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
+            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/es/form/fields/MultiSelectField/MultiSelectField.js

@@ -17,8 +17,8 @@ export default class MultiSelectField extends PureComponent {
     super(props);
     this.handleChange = this.handleChange.bind(this);
     this.handleGetRef = this.handleGetRef.bind(this);
-    this.onDropBoxOpen = this.onDropBoxOpen.bind(this);
-    this.handleLabelClick = this.handleLabelClick.bind(this);
+    this.onDropBoxOpen = this.onDropBoxOpen.bind(this); // this.handleLabelClick = this.handleLabelClick.bind(this);
+
     this.onSearch = this.onSearch.bind(this);
     this.getNextOptions = this.getNextOptions.bind(this);
     this.getNextId = getUniqueId(this);
@@ -67,17 +67,17 @@ export default class MultiSelectField extends PureComponent {
     } = this.props;
     this.multiSelectBox = el;
     getRef && getRef(el, id);
-  }
-
-  handleLabelClick() {
-    let {
-      isFocusOnLabelClick
-    } = this.props;
+  } // handleLabelClick() {
+  //   let { isFocusOnLabelClick } = this.props;
+  //   if (
+  //     isFocusOnLabelClick &&
+  //     this.multiSelectBox &&
+  //     this.multiSelectBox.focus
+  //   ) {
+  //     this.multiSelectBox.focus();
+  //   }
+  // }
 
-    if (isFocusOnLabelClick && this.multiSelectBox && this.multiSelectBox.focus) {
-      this.multiSelectBox.focus();
-    }
-  }
 
   render() {
     let {
@@ -154,6 +154,11 @@ export default class MultiSelectField extends PureComponent {
       ,
       testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      tagAttributes: {
+        label: {
+          id
+        }
+      },
       ...LabelProps
     })), /*#__PURE__*/React.createElement(MultiSelect, {
       options: options,

package/es/form/fields/MultiSelectField/__tests__/__snapshots__/MultiSelectField.spec.js.snap

@@ -29,7 +29,7 @@ exports[`MultiSelectField rendering the defult props 1`] = `
           "
           />
           <div
-            class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+            class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/es/form/fields/PhoneField/__tests__/__snapshots__/PhoneField.spec.js.snap

@@ -22,7 +22,7 @@ exports[`PhoneField rendering the defult props 1`] = `
           class="fieldContainer "
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/es/form/fields/RadioField/RadioField.js

@@ -132,6 +132,11 @@ export default class RadioField extends PureComponent {
       },
       customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      tagAttributes: {
+        label: {
+          id
+        }
+      },
       ...LabelProps
     }), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${isBoxStyle ? style.radiosWrapper : ''} ${labelName ? isBoxStyle ? style.fieldMargin_large : style.fieldMargin_medium : ''} ${style.radioContainer}`

package/es/form/fields/SelectField/SelectField.js

@@ -126,6 +126,11 @@ export default class SelectField extends PureComponent {
       size: fieldSize === 'small' ? 'small' : 'medium',
       testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      tagAttributes: {
+        label: {
+          id: uniqueId
+        }
+      },
       ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''} ${fieldClass ? fieldClass : ''}`

package/es/form/fields/SelectField/__tests__/__snapshots__/SelectField.spec.js.snap

@@ -19,7 +19,7 @@ exports[`SelectField rendering the defult props 1`] = `
           data-test-id="selectComponent"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/es/form/fields/TagsMultiSelect/__tests__/__snapshots__/TagsMultiSelect.spec.js.snap

@@ -25,7 +25,7 @@ exports[`TagsMultiSelect rendering the defult props 1`] = `
           class="custmSpan"
         />
         <div
-          class="varClass customContainer   effect     container custmInp  flex rowdir"
+          class="varClass customContainer    effect     container custmInp  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -217,6 +217,11 @@ const TagsMultiSelectField = props => {
     size: labelSize,
     testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
     customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+    tagAttributes: {
+      label: {
+        id
+      }
+    },
     ...LabelProps
   }), selectedValueCount ? /*#__PURE__*/React.createElement(Box, {
     dataId: `${dataId}_tagCount`,

package/es/form/fields/TagsMultiSelectField/__tests__/__snapshots__/TagsMultiSelectField.spec.js.snap

@@ -31,7 +31,7 @@ exports[`TagsMultiSelectField rendering the defult props 1`] = `
             class="custmSpan"
           />
           <div
-            class="varClass customContainer   effect     container custmInp  flex rowdir"
+            class="varClass customContainer    effect     container custmInp  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/es/form/fields/TextBoxField/TextBoxField.js

@@ -114,6 +114,11 @@ export default class TextBoxField extends PureComponent {
       testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       htmlFor: uniqueId,
       customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      tagAttributes: {
+        label: {
+          id: labelName
+        }
+      },
       ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`

package/es/form/fields/TextBoxField/__tests__/__snapshots__/TextBoxField.spec.js.snap

@@ -10,7 +10,7 @@ exports[`TextBoxField rendering the defult props 1`] = `
       class="fieldContainer "
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+        class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div

package/es/form/fields/TextEditor/TextEditor.js

@@ -384,8 +384,12 @@ export default class TextEditor extends Component {
       isNightMode,
       isReadOnly,
       dataSelectorId,
-      isDisabled
+      isDisabled,
+      customClass
     } = this.props;
+    const {
+      wrapper: wrapperClass = ''
+    } = customClass;
     let {
       isEditorLoad,
       isEditorShow
@@ -393,7 +397,7 @@ export default class TextEditor extends Component {
     let editorDoc = ImgLazyLoad && global.editor && global.editor[id] ? global.editor[id].doc : null;
     return /*#__PURE__*/React.createElement(Container, {
       className: `${styles.textEditor} ${styles[type]} ${styles[border]}
-        ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${isDisabled ? styles.disable : ''} ${!isEditorShow ? styles.editorHide : ''}`,
+        ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${isDisabled ? styles.disable : ''} ${!isEditorShow ? styles.editorHide : ''} ${wrapperClass}`,
       dataId: dataId,
       "data-isEditor": true,
       dataSelectorId: dataSelectorId

package/es/form/fields/TextEditor/__tests__/__snapshots__/TextEditor.spec.js.snap

@@ -4,7 +4,7 @@ exports[`TextEditor rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     class="textEditor large borderTop
-        light   editorHide flex cover coldir"
+        light   editorHide  flex cover coldir"
     data-id="containerComponent"
     data-iseditor="true"
     data-selector-id="textEditor"

package/es/form/fields/TextEditor/props/defaultProps.js

@@ -12,5 +12,6 @@ export const defaultProps = {
   dataSelectorId: 'textEditor',
   customCSS: '',
   isDisabled: false,
-  inlineImageProps: {}
+  inlineImageProps: {},
+  customClass: {}
 };

package/es/form/fields/TextEditor/props/propTypes.js

@@ -49,5 +49,6 @@ export const propTypes = {
     allowedFileExtensions: PropTypes.array,
     fileNameMaxCharacters: PropTypes.number,
     fileSizeMaxBytes: PropTypes.number
-  })
+  }),
+  customClass: PropTypes.object
 };

package/es/form/fields/TextareaField/TextareaField.js

@@ -142,6 +142,11 @@ export default class TextareaField extends PureComponent {
       testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       htmlFor: uniqueId,
       customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      tagAttributes: {
+        label: {
+          id
+        }
+      },
       ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`

package/es/lookup/header/Search/__tests__/__snapshots__/Search.spec.js.snap

@@ -18,7 +18,7 @@ exports[`Search rendering the customized style search 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect     container   flex rowdir"
+        class="varClass customContainer    effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -75,7 +75,7 @@ exports[`Search rendering the defult props 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect     container   flex rowdir"
+        class="varClass customContainer    effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -132,7 +132,7 @@ exports[`Search rendering the prop hasSeparator is false 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect     container   flex rowdir"
+        class="varClass customContainer    effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -192,7 +192,7 @@ exports[`Search rendering the prop hasSeparator is true 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect     container   flex rowdir"
+        class="varClass customContainer    effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -262,7 +262,7 @@ exports[`Search rendering the renderChildren props via function 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="varClass customContainer   effect     container   flex rowdir"
+            class="varClass customContainer    effect     container   flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div
@@ -321,7 +321,7 @@ exports[`Search rendering the search active 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect  active   container   flex rowdir"
+        class="varClass customContainer    effect  active   container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div

package/lib/common/dot_boxShadow.module.css

@@ -37,8 +37,7 @@
     --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
 
     /* onboarding  */
-    --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px rgba(0, 0, 0, 0.09));
+    --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px var(--zd-shadow-saturation, rgba(0, 0, 0, 0.09)));
     --zd_bs_onboarding_gradient: var(--zd_bs_contrast_outline, 0px 20px 30px 0px var(--zdt_onboarding_bg_box_shadow));
     --zd_bs_onboarding_primary_button: var(--zd_bs_contrast_outline, 0px 4px 20px 0px var(--zdt_onboarding_primary_button_shadow));
-
 }

package/lib/form/fields/CheckBoxField/CheckBoxField.js

@@ -149,10 +149,15 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
           container: !isDirectCol ? _FieldsModule["default"].checkboxText : ''
         },
         size: fieldSize === 'small' ? 'small' : 'medium',
-        textWeight: isDirectCol ? 'regular' : 'semibold',
+        fontWeight: isDirectCol ? 'regular' : 'semibold',
         testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
         customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
-        onClick: !removeEvent ? this.handleLabelClick : null
+        onClick: !removeEvent ? this.handleLabelClick : null,
+        tagAttributes: {
+          label: {
+            id: id
+          }
+        }
       }, LabelProps)));
 
       return /*#__PURE__*/_react["default"].createElement("div", {

package/lib/form/fields/CurrencyField/__tests__/__snapshots__/CurrencyField.spec.js.snap

@@ -10,7 +10,7 @@ exports[`CurrencyField rendering the defult props 1`] = `
       class="fieldContainer "
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+        class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div

package/lib/form/fields/DateField/DateField.js

@@ -196,7 +196,12 @@ var DateField = /*#__PURE__*/function (_PureComponent) {
         htmlFor: getAriaId,
         testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
         customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
-        onClick: isDisabled || isReadOnly ? null : this.handleLabelClick
+        onClick: isDisabled || isReadOnly ? null : this.handleLabelClick,
+        tagAttributes: {
+          label: {
+            id: labelName
+          }
+        }
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
       }, isLocked && lockedValueText ? /*#__PURE__*/_react["default"].createElement("div", {

package/lib/form/fields/DateField/__tests__/__snapshots__/DateField.spec.js.snap

@@ -18,7 +18,7 @@ exports[`DateField rendering the defult props 1`] = `
           data-test-id="dateField(formatted_undefined)_widget"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
+            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/lib/form/fields/MultiSelectField/MultiSelectField.js

@@ -66,8 +66,8 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
     _this = _super.call(this, props);
     _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
     _this.handleGetRef = _this.handleGetRef.bind(_assertThisInitialized(_this));
-    _this.onDropBoxOpen = _this.onDropBoxOpen.bind(_assertThisInitialized(_this));
-    _this.handleLabelClick = _this.handleLabelClick.bind(_assertThisInitialized(_this));
+    _this.onDropBoxOpen = _this.onDropBoxOpen.bind(_assertThisInitialized(_this)); // this.handleLabelClick = this.handleLabelClick.bind(this);
+
     _this.onSearch = _this.onSearch.bind(_assertThisInitialized(_this));
     _this.getNextOptions = _this.getNextOptions.bind(_assertThisInitialized(_this));
     _this.getNextId = (0, _IdProvider.getUniqueId)(_assertThisInitialized(_this));
@@ -118,16 +118,17 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
           id = _this$props5.id;
       this.multiSelectBox = el;
       getRef && getRef(el, id);
-    }
-  }, {
-    key: "handleLabelClick",
-    value: function handleLabelClick() {
-      var isFocusOnLabelClick = this.props.isFocusOnLabelClick;
+    } // handleLabelClick() {
+    //   let { isFocusOnLabelClick } = this.props;
+    //   if (
+    //     isFocusOnLabelClick &&
+    //     this.multiSelectBox &&
+    //     this.multiSelectBox.focus
+    //   ) {
+    //     this.multiSelectBox.focus();
+    //   }
+    // }
 
-      if (isFocusOnLabelClick && this.multiSelectBox && this.multiSelectBox.focus) {
-        this.multiSelectBox.focus();
-      }
-    }
   }, {
     key: "render",
     value: function render() {
@@ -205,7 +206,12 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
         htmlFor: uniqueId // onClick={this.handleLabelClick}
         ,
         testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
-        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        tagAttributes: {
+          label: {
+            id: id
+          }
+        }
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({
         options: options,
         onChange: this.handleChange,

package/lib/form/fields/MultiSelectField/__tests__/__snapshots__/MultiSelectField.spec.js.snap

@@ -29,7 +29,7 @@ exports[`MultiSelectField rendering the defult props 1`] = `
           "
           />
           <div
-            class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+            class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/lib/form/fields/PhoneField/__tests__/__snapshots__/PhoneField.spec.js.snap

@@ -22,7 +22,7 @@ exports[`PhoneField rendering the defult props 1`] = `
           class="fieldContainer "
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/lib/form/fields/RadioField/RadioField.js

@@ -196,7 +196,12 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           label: customLabelClass
         },
         customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
-        testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        tagAttributes: {
+          label: {
+            id: id
+          }
+        }
       }, LabelProps)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(isBoxStyle ? _FieldsModule["default"].radiosWrapper : '', " ").concat(labelName ? isBoxStyle ? _FieldsModule["default"].fieldMargin_large : _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
       }, options.map(function (option, index) {

package/lib/form/fields/SelectField/SelectField.js

@@ -176,7 +176,12 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
         htmlFor: uniqueId,
         size: fieldSize === 'small' ? 'small' : 'medium',
         testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
-        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        tagAttributes: {
+          label: {
+            id: uniqueId
+          }
+        }
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '', " ").concat(fieldClass ? fieldClass : '')
       }, /*#__PURE__*/_react["default"].createElement(_Select["default"], _extends({

package/lib/form/fields/SelectField/__tests__/__snapshots__/SelectField.spec.js.snap

@@ -19,7 +19,7 @@ exports[`SelectField rendering the defult props 1`] = `
           data-test-id="selectComponent"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/lib/form/fields/TagsMultiSelect/__tests__/__snapshots__/TagsMultiSelect.spec.js.snap

@@ -25,7 +25,7 @@ exports[`TagsMultiSelect rendering the defult props 1`] = `
           class="custmSpan"
         />
         <div
-          class="varClass customContainer   effect     container custmInp  flex rowdir"
+          class="varClass customContainer    effect     container custmInp  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div

package/lib/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -257,7 +257,12 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
     htmlFor: htmlId,
     size: labelSize,
     testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
-    customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+    customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+    tagAttributes: {
+      label: {
+        id: id
+      }
+    }
   }, LabelProps)), selectedValueCount ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     dataId: "".concat(dataId, "_tagCount"),
     className: _TagsMultiSelectFieldModule["default"].count

package/lib/form/fields/TagsMultiSelectField/__tests__/__snapshots__/TagsMultiSelectField.spec.js.snap

@@ -31,7 +31,7 @@ exports[`TagsMultiSelectField rendering the defult props 1`] = `
             class="custmSpan"
           />
           <div
-            class="varClass customContainer   effect     container custmInp  flex rowdir"
+            class="varClass customContainer    effect     container custmInp  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/lib/form/fields/TextBoxField/TextBoxField.js

@@ -166,7 +166,12 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
         size: fieldSize === 'small' ? 'small' : 'medium',
         testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
         htmlFor: uniqueId,
-        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        tagAttributes: {
+          label: {
+            id: labelName
+          }
+        }
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({

package/lib/form/fields/TextBoxField/__tests__/__snapshots__/TextBoxField.spec.js.snap

@@ -10,7 +10,7 @@ exports[`TextBoxField rendering the defult props 1`] = `
       class="fieldContainer "
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+        class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div

package/lib/form/fields/TextEditor/TextEditor.js

@@ -427,13 +427,16 @@ var TextEditor = /*#__PURE__*/function (_Component) {
           isNightMode = _this$props9.isNightMode,
           isReadOnly = _this$props9.isReadOnly,
           dataSelectorId = _this$props9.dataSelectorId,
-          isDisabled = _this$props9.isDisabled;
+          isDisabled = _this$props9.isDisabled,
+          customClass = _this$props9.customClass;
+      var _customClass$wrapper = customClass.wrapper,
+          wrapperClass = _customClass$wrapper === void 0 ? '' : _customClass$wrapper;
       var _this$state = this.state,
           isEditorLoad = _this$state.isEditorLoad,
           isEditorShow = _this$state.isEditorShow;
       var editorDoc = ImgLazyLoad && global.editor && global.editor[id] ? global.editor[id].doc : null;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        className: "".concat(_TextEditorModule["default"].textEditor, " ").concat(_TextEditorModule["default"][type], " ").concat(_TextEditorModule["default"][border], "\n        ").concat(isNightMode ? _TextEditorModule["default"].night : _TextEditorModule["default"].light, " ").concat(isReadOnly ? _TextEditorModule["default"].readOnly : '', " ").concat(isDisabled ? _TextEditorModule["default"].disable : '', " ").concat(!isEditorShow ? _TextEditorModule["default"].editorHide : ''),
+        className: "".concat(_TextEditorModule["default"].textEditor, " ").concat(_TextEditorModule["default"][type], " ").concat(_TextEditorModule["default"][border], "\n        ").concat(isNightMode ? _TextEditorModule["default"].night : _TextEditorModule["default"].light, " ").concat(isReadOnly ? _TextEditorModule["default"].readOnly : '', " ").concat(isDisabled ? _TextEditorModule["default"].disable : '', " ").concat(!isEditorShow ? _TextEditorModule["default"].editorHide : '', " ").concat(wrapperClass),
         dataId: dataId,
         "data-isEditor": true,
         dataSelectorId: dataSelectorId

package/lib/form/fields/TextEditor/__tests__/__snapshots__/TextEditor.spec.js.snap

@@ -4,7 +4,7 @@ exports[`TextEditor rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     class="textEditor large borderTop
-        light   editorHide flex cover coldir"
+        light   editorHide  flex cover coldir"
     data-id="containerComponent"
     data-iseditor="true"
     data-selector-id="textEditor"

package/lib/form/fields/TextEditor/props/defaultProps.js

@@ -18,6 +18,7 @@ var defaultProps = {
   dataSelectorId: 'textEditor',
   customCSS: '',
   isDisabled: false,
-  inlineImageProps: {}
+  inlineImageProps: {},
+  customClass: {}
 };
 exports.defaultProps = defaultProps;

package/lib/form/fields/TextEditor/props/propTypes.js

@@ -59,6 +59,7 @@ var propTypes = {
     allowedFileExtensions: _propTypes["default"].array,
     fileNameMaxCharacters: _propTypes["default"].number,
     fileSizeMaxBytes: _propTypes["default"].number
-  })
+  }),
+  customClass: _propTypes["default"].object
 };
 exports.propTypes = propTypes;

package/lib/form/fields/TextareaField/TextareaField.js

@@ -195,7 +195,12 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
         size: fieldSize === 'small' ? 'small' : 'medium',
         testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
         htmlFor: uniqueId,
-        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        tagAttributes: {
+          label: {
+            id: id
+          }
+        }
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
       }, !renderRightPlaceholderNode ? textAreaContent : /*#__PURE__*/_react["default"].createElement("div", {

package/lib/lookup/header/Search/__tests__/__snapshots__/Search.spec.js.snap

@@ -18,7 +18,7 @@ exports[`Search rendering the customized style search 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect     container   flex rowdir"
+        class="varClass customContainer    effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -75,7 +75,7 @@ exports[`Search rendering the defult props 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect     container   flex rowdir"
+        class="varClass customContainer    effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -132,7 +132,7 @@ exports[`Search rendering the prop hasSeparator is false 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect     container   flex rowdir"
+        class="varClass customContainer    effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -192,7 +192,7 @@ exports[`Search rendering the prop hasSeparator is true 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect     container   flex rowdir"
+        class="varClass customContainer    effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -262,7 +262,7 @@ exports[`Search rendering the renderChildren props via function 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="varClass customContainer   effect     container   flex rowdir"
+            class="varClass customContainer    effect     container   flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div
@@ -321,7 +321,7 @@ exports[`Search rendering the search active 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect  active   container   flex rowdir"
+        class="varClass customContainer    effect  active   container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-224",
+  "version": "1.0.0-temp-224.1",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -68,16 +68,16 @@
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
-    "@zohodesk-private/color-variable-preprocessor": "1.2.0",
+    "@zohodesk-private/color-variable-preprocessor": "1.3.0",
     "@zohodesk-private/css-variable-migrator": "1.0.9",
     "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.8",
-    "@zohodesk/components": "1.5.8",
+    "@zohodesk/components": "1.6.0",
     "@zohodesk/hooks": "2.0.6",
-    "@zohodesk/icons": "1.1.6",
+    "@zohodesk/icons": "1.1.7",
     "@zohodesk/layout": "^3.1.0",
-    "@zohodesk/svg": "1.2.7",
+    "@zohodesk/svg": "1.3.1",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/variables": "1.2.0",
     "@zohodesk/virtualizer": "1.0.13",
@@ -89,9 +89,9 @@
   "peerDependencies": {
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.2.0",
-    "@zohodesk/components": "1.5.8",
-    "@zohodesk/icons": "1.1.6",
-    "@zohodesk/svg": "1.2.7",
+    "@zohodesk/components": "1.6.0",
+    "@zohodesk/icons": "1.1.7",
+    "@zohodesk/svg": "1.3.1",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.6",