@zohodesk/dot 1.0.0-temp-65 → 1.0.0-temp-68

package/lib/Provider.js

@@ -21,73 +21,73 @@ var _datetimejs = _interopRequireDefault(require("@zohodesk/datetimejs"));
 
 var _i18n2 = _interopRequireDefault(require("./i18n"));
 
-require("@zohodesk/components/lib/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/red/redDefaultCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/green/greenDefaultComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/red/redDefaultComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/mode/defaultMode.module.css");
+require("@zohodesk/components/assets/Appearance/default/mode/defaultMode.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/green/greenDarkCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/red/redDarkCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/green/greenDarkComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/red/redDarkComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/mode/darkMode.module.css");
+require("@zohodesk/components/assets/Appearance/dark/mode/darkMode.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/default/themes/red/redDefaultCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/default/mode/defaultEmptyStates.module.css");
+require("@zohodesk/svg/assets/Appearance/default/mode/defaultEmptyStates.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/dark/themes/green/greenDarkCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/dark/themes/red/redDarkCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/dark/mode/darkEmptyStates.module.css");
+require("@zohodesk/svg/assets/Appearance/dark/mode/darkEmptyStates.module.css");
 
 var _IdProvider = require("@zohodesk/components/lib/Provider/IdProvider");
 
@@ -95,29 +95,29 @@ var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider"
 
 var _Switch = _interopRequireDefault(require("@zohodesk/components/lib/Switch/Switch"));
 
-require("./Appearance/default/themes/blue/blueDefaultDotTheme.module.css");
+require("../assets/Appearance/default/themes/blue/blueDefaultDotTheme.module.css");
 
-require("./Appearance/default/themes/green/greenDefaultDotTheme.module.css");
+require("../assets/Appearance/default/themes/green/greenDefaultDotTheme.module.css");
 
-require("./Appearance/default/themes/orange/orangeDefaultDotTheme.module.css");
+require("../assets/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css");
 
-require("./Appearance/default/themes/red/redDefaultDotTheme.module.css");
+require("../assets/Appearance/default/themes/red/redDefaultDotTheme.module.css");
 
-require("./Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css");
+require("../assets/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css");
 
-require("./Appearance/default/mode/dotDefaultMode.module.css");
+require("../assets/Appearance/default/mode/dotDefaultMode.module.css");
 
-require("./Appearance/dark/themes/blue/blueDarkDotTheme.module.css");
+require("../assets/Appearance/dark/themes/blue/blueDarkDotTheme.module.css");
 
-require("./Appearance/dark/themes/green/greenDarkDotTheme.module.css");
+require("../assets/Appearance/dark/themes/green/greenDarkDotTheme.module.css");
 
-require("./Appearance/dark/themes/orange/orangeDarkDotTheme.module.css");
+require("../assets/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css");
 
-require("./Appearance/dark/themes/red/redDarkDotTheme.module.css");
+require("../assets/Appearance/dark/themes/red/redDarkDotTheme.module.css");
 
-require("./Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css");
+require("../assets/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css");
 
-require("./Appearance/dark/mode/dotDarkMode.module.css");
+require("../assets/Appearance/dark/mode/dotDarkMode.module.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 

package/lib/alert/AlertLookup/AlertLookup.js

@@ -88,11 +88,13 @@ var AlertLookup = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
           onSubmitClick = _this$props.onSubmitClick,
           onCancelClick = _this$props.onCancelClick,
-          isActive = _this$props.isActive;
+          isActive = _this$props.isActive,
+          onEsc = _this$props.onEsc,
+          onClose = _this$props.onClose;
 
       if (e.keyCode === 27 && isActive) {
         e && e.preventDefault && e.preventDefault();
-        onCancelClick && onCancelClick(e);
+        onEsc == 'close' ? onClose && onClose(e) : onCancelClick && onCancelClick(e);
       } else if (e.keyCode === 13 && isActive) {
         e && e.preventDefault && e.preventDefault();
         onSubmitClick && onSubmitClick(e);
@@ -222,7 +224,8 @@ AlertLookup.propTypes = {
     AlertHeaderProps: _propTypes["default"].object,
     PrimaryButtonProps: _propTypes["default"].object,
     SecondaryButtonProps: _propTypes["default"].object
-  })
+  }),
+  onEsc: _propTypes["default"].oneOf(['close', 'cancel'])
 };
 AlertLookup.defaultProps = {
   isActive: false,
@@ -234,7 +237,8 @@ AlertLookup.defaultProps = {
   dataId: 'alertPopup',
   customClass: '',
   isDefaultFocus: true,
-  customProps: {}
+  customProps: {},
+  onEsc: 'cancel'
 };
 
 if (false) {

package/lib/deprecated/SelectDropdown/SelectDropdown.module.css

@@ -43,13 +43,13 @@
 /* select dropdown */
 
 [data-mode='dark'] {
-  --zdt_selectdropdown_hover_bg: var(--zd_bg_smoke64);
-  --zdt_selectdropdown_departname_text: var(--zd_text_dark4);
-  --zdt_selectdropdown_departicon: var(--zd_text_dark5);
+  --zdt_selectdropdown_hover_bg: var(--dot_smoke64);
+  --zdt_selectdropdown_departname_text: var(--zd_dark4);
+  --zdt_selectdropdown_departicon: var(--zd_dark5);
 }
 
 [data-mode='default'] {
-  --zdt_selectdropdown_hover_bg: var(--zd_bg_smoke64);
-  --zdt_selectdropdown_departname_text: var(--zd_text_dark4);
-  --zdt_selectdropdown_departicon: var(--zd_text_dark5);
+  --zdt_selectdropdown_hover_bg: var(--dot_smoke64);
+  --zdt_selectdropdown_departname_text: var(--zd_dark4);
+  --zdt_selectdropdown_departicon: var(--zd_dark5);
 }

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

@@ -153,7 +153,7 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
       }) : null);
 
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, isDirectCol && labelElement, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(isDirectCol ? _FieldsModule["default"].fieldContainer : _FieldsModule["default"].checkboxFieldContainer, " ").concat(isDirectCol && labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')

package/lib/form/fields/CurrencyField/CurrencyField.js

@@ -165,7 +165,7 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
 
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
@@ -173,7 +173,7 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
         text: labelName,
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         htmlFor: uniqueId,
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {

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

@@ -171,7 +171,7 @@ var DateField = /*#__PURE__*/function (_PureComponent) {
           ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
       var getAriaId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
@@ -181,7 +181,7 @@ var DateField = /*#__PURE__*/function (_PureComponent) {
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
         onClick: isDisabled || isReadOnly ? null : this.handleLabelClick,
-        customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-GN-info",

package/lib/form/fields/Fields.module.css

@@ -43,14 +43,16 @@
 [dir=rtl] .checkboxText {
   padding-right: var(--zd_size6);
 }
-.cbTextReadonly {
-  cursor: not-allowed;
-}
 .cbTextPointer {
   cursor: pointer;
 }
-.disabled {
-  composes: disabled from '~@zohodesk/components/lib/common/common.module.css';
+.disabled, .readonly {
+  cursor: not-allowed;
+}
+.cbTextReadonly,
+.disabled .fieldLabel,
+.readonly .fieldLabel {
+  --label_cursor: not-allowed;
 }
 [dir=ltr] .radio {
   margin: var(--zd_size5) var(--zd_size32) var(--zd_size5) 0;

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

@@ -184,7 +184,7 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
       var isDarkPalette = palette === 'dark';
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
@@ -194,7 +194,7 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
         ,
-        customClass: "".concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
         htmlFor: uniqueId
       }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {

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

@@ -105,14 +105,14 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           _customProps$Validati2 = customProps.ValidationMessageProps2,
           ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
         size: "medium",
         id: id,
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
-        customClass: "".concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)

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

@@ -152,7 +152,7 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
           ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
@@ -160,7 +160,7 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
         text: labelName,
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         htmlFor: uniqueId,
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -200,10 +200,10 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           key: index
         }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
           text: name,
-          onRemove: deleteTag.bind(_this3, name),
+          onRemove: isReadOnly ? null : deleteTag.bind(_this3, name),
           closeTitle: i18nKeys.deleteText,
           palette: tagType === 'SYSTEM' ? 'primary' : 'default',
-          disabled: isReadOnly
+          isReadOnly: isReadOnly
         })) : null;
       }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _TagsMultiSelectModule["default"].moreLess,
@@ -226,7 +226,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         isReadOnly: isReadOnly,
         ref: this.textBoxRef,
         needBorder: false,
-        placeHolder: tagsList.length ? '' : '-',
+        placeHolder: tagsList.length ? '' : i18nKeys.placeholderText || '-',
         onClick: !isReadOnly ? handleTogglePopup : undefined,
         customClass: {
           customTBoxWrap: _TagsMultiSelectModule["default"].custmInp,
@@ -329,7 +329,8 @@ TagsMultiSelect.propTypes = {
     errorMessage: _propTypes["default"].string.isRequired,
     deleteText: _propTypes["default"].string.isRequired,
     lessText: _propTypes["default"].string.isRequired,
-    moreText: _propTypes["default"].string.isRequired
+    moreText: _propTypes["default"].string.isRequired,
+    placeholderText: _propTypes["default"].string
   }),
   borderColor: _propTypes["default"].oneOf(['transparent', 'default', 'dark']),
   needBorder: _propTypes["default"].bool,

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

@@ -220,7 +220,7 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
     };
   }, []);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _TagsMultiSelectFieldModule["default"].container
+    className: "".concat(_TagsMultiSelectFieldModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '')
   }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     alignBox: "row",
     align: "baseline",
@@ -231,7 +231,7 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
     id: id,
     size: labelSize,
     palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-    customClass: "".concat(isMandatory ? _FieldsModule["default"].labelMandatory : '', " ").concat(labelClass ? labelClass : ''),
+    customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : '', " ").concat(labelClass ? labelClass : ''),
     dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
     htmlFor: htmlId
   }, LabelProps)), selectedValueCount ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

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

@@ -146,7 +146,7 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
           ePhiStatus = _ePhiData$ePhiStatus === void 0 ? false : _ePhiData$ePhiStatus;
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
@@ -154,7 +154,7 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
         text: labelName,
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         htmlFor: uniqueId,
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {

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

@@ -65,7 +65,8 @@ var TextEditor = /*#__PURE__*/function (_Component) {
     _this = _super.call(this, props);
     _this.state = {
       isEditorLoad: false,
-      isResourceLoaded: false
+      isResourceLoaded: false,
+      isEditorShow: false
     };
     var methods = ['editorCallback', 'handleUpload', 'handleChange', 'focusCallback', 'handleInlineUpload', 'handleDropUpload', 'blurCallback', 'handleGetContent', 'initializeEditor', 'clearEditorData', 'plainTextSwitchCallback', 'onWindowClick', 'toggleEditor'];
 
@@ -246,7 +247,8 @@ var TextEditor = /*#__PURE__*/function (_Component) {
           getRef = _this$props5.getRef,
           isCustomScroll = _this$props5.isCustomScroll;
       this.setState({
-        isEditorLoad: true
+        isEditorLoad: true,
+        isEditorShow: true
       });
       var id = this.props.id;
       global.editor = global.editor || {};
@@ -279,7 +281,7 @@ var TextEditor = /*#__PURE__*/function (_Component) {
 
         if (isCustomScroll) {
           var link = document.createElement('style');
-          link.innerText = ".scroll{--zd-scroll-width:12px;--zd-scroll-height:12px;--zd-scroll-bg:rgba(255,255,255,0.1);--zd-scroll-corner-bg:transparent;--zd-scroll-thump:rgba(44,51,77,0.2);--zd-scroll-thump-hoverbg:rgba(44,51,77,0.3);--zd-scroll-border:rgba(44,51,77,0.1)}.scroll[data-scroll-palette='dark'],.scroll [data-scroll-palette='dark']{--zd-scroll-thump:rgba(255,255,255,0.2);--zd-scroll-thump-hoverbg:rgba(255,255,255,0.4);--zd-scroll-border:rgba(255,255,255,0.07)}.scroll,.scroll *{scrollbar-color:var(--zd-scroll-thump) var(--zd-scroll-bg);scrollbar-width:thin;-ms-scrollbar-highlight-color:var(--zd-scroll-bg);-ms-scrollbar-face-color:var(--zd-scroll-thump)}.scroll::-webkit-scrollbar,.scroll ::-webkit-scrollbar{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-scrollbar:hover,.scroll ::-webkit-scrollbar:hover{background:var(--zd-scroll-bg)}.scroll::-webkit-scrollbar:horizontal,.scroll ::-webkit-scrollbar:horizontal{height:var(--zd-scroll-height)}.scroll::-webkit-scrollbar:vertical,.scroll ::-webkit-scrollbar:vertical{width:var(--zd-scroll-width)}.scroll::-webkit-scrollbar-button,.scroll ::-webkit-scrollbar-button{display:none;width:0;height:0}.scroll::-webkit-scrollbar-track:vertical,.scroll ::-webkit-scrollbar-track:vertical{border-left:1px solid transparent;border-right:1px solid transparent}.scroll::-webkit-scrollbar-track:vertical:hover,.scroll ::-webkit-scrollbar-track:vertical:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track:horizontal,.scroll ::-webkit-scrollbar-track:horizontal{border-top:1px solid transparent;border-bottom:1px solid transparent}.scroll::-webkit-scrollbar-track:horizontal:hover,.scroll ::-webkit-scrollbar-track:horizontal:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track-piece,.scroll ::-webkit-scrollbar-track-piece{background:inherit}.scroll::-webkit-scrollbar-thumb,.scroll ::-webkit-scrollbar-thumb{border-radius:10px;background:var(--zd-scroll-thump);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-thumb:hover,.scroll ::-webkit-scrollbar-thumb:hover{background:var(--zd-scroll-thump-hoverbg);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-corner,.scroll ::-webkit-scrollbar-corner{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-resizer,.scroll::-webkit-resizer{background:inherit}";
+          link.innerText = "body{font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 0}.scroll{--zd-scroll-width:12px;--zd-scroll-height:12px;--zd-scroll-bg:rgba(255,255,255,0.1);--zd-scroll-corner-bg:transparent;--zd-scroll-thump:rgba(44,51,77,0.2);--zd-scroll-thump-hoverbg:rgba(44,51,77,0.3);--zd-scroll-border:rgba(44,51,77,0.1)}.scroll[data-scroll-palette='dark'],.scroll [data-scroll-palette='dark']{--zd-scroll-thump:rgba(255,255,255,0.2);--zd-scroll-thump-hoverbg:rgba(255,255,255,0.4);--zd-scroll-border:rgba(255,255,255,0.07)}.scroll,.scroll *{scrollbar-color:var(--zd-scroll-thump) var(--zd-scroll-bg);scrollbar-width:thin;-ms-scrollbar-highlight-color:var(--zd-scroll-bg);-ms-scrollbar-face-color:var(--zd-scroll-thump)}.scroll::-webkit-scrollbar,.scroll ::-webkit-scrollbar{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-scrollbar:hover,.scroll ::-webkit-scrollbar:hover{background:var(--zd-scroll-bg)}.scroll::-webkit-scrollbar:horizontal,.scroll ::-webkit-scrollbar:horizontal{height:var(--zd-scroll-height)}.scroll::-webkit-scrollbar:vertical,.scroll ::-webkit-scrollbar:vertical{width:var(--zd-scroll-width)}.scroll::-webkit-scrollbar-button,.scroll ::-webkit-scrollbar-button{display:none;width:0;height:0}.scroll::-webkit-scrollbar-track:vertical,.scroll ::-webkit-scrollbar-track:vertical{border-left:1px solid transparent;border-right:1px solid transparent}.scroll::-webkit-scrollbar-track:vertical:hover,.scroll ::-webkit-scrollbar-track:vertical:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track:horizontal,.scroll ::-webkit-scrollbar-track:horizontal{border-top:1px solid transparent;border-bottom:1px solid transparent}.scroll::-webkit-scrollbar-track:horizontal:hover,.scroll ::-webkit-scrollbar-track:horizontal:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track-piece,.scroll ::-webkit-scrollbar-track-piece{background:inherit}.scroll::-webkit-scrollbar-thumb,.scroll ::-webkit-scrollbar-thumb{border-radius:10px;background:var(--zd-scroll-thump);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-thumb:hover,.scroll ::-webkit-scrollbar-thumb:hover{background:var(--zd-scroll-thump-hoverbg);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-corner,.scroll ::-webkit-scrollbar-corner{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-resizer,.scroll::-webkit-resizer{background:inherit}";
           iframeHead.appendChild(link);
           iframe.classList.add('scroll');
         }
@@ -419,10 +421,12 @@ var TextEditor = /*#__PURE__*/function (_Component) {
           loadingComponent = _this$props9.loadingComponent,
           isNightMode = _this$props9.isNightMode,
           isReadOnly = _this$props9.isReadOnly;
-      var isEditorLoad = this.state.isEditorLoad;
+      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 : ''),
+        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(!isEditorShow ? _TextEditorModule["default"].editorHide : ''),
         dataId: dataId,
         "data-isEditor": true
       }, loadingComponent && !isEditorLoad ? loadingComponent : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

package/lib/form/fields/TextEditor/TextEditor.module.css

@@ -649,6 +649,7 @@
   right: 0;
   left: 0;
 }
-.readOnly :global .KB_Editor_menus {
+.readOnly :global .KB_Editor_menus,
+.editorHide :global .KB_Editor {
   display: none !important;
 }

package/lib/form/fields/TextEditorField/TextEditorField.js

@@ -156,7 +156,7 @@ var TextEditorField = /*#__PURE__*/function (_PureComponent) {
           _ePhiData$ePhiStatus = ePhiData.ePhiStatus,
           ePhiStatus = _ePhiData$ePhiStatus === void 0 ? false : _ePhiData$ePhiStatus;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(className)
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '', " ").concat(className || '')
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         alignBox: "row",
@@ -167,7 +167,7 @@ var TextEditorField = /*#__PURE__*/function (_PureComponent) {
         htmlFor: !isReadOnly && !isDisabled ? id : undefined,
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
         onClick: this.handleLabelClick,
-        customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps))), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-GN-info",

package/lib/form/fields/TextEditorWrapper/TextEditorWrapper.js

@@ -119,7 +119,7 @@ var TextEditorWrapper = /*#__PURE__*/function (_Component) {
           isEditorShow: true
         });
       } else {
-        if (!this.state.isEditorFocus) {
+        if (!this.state.isEditorFocus && !this.props.isEditorDefaultOpen) {
           this.setState({
             isEditorShow: false
           });

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

@@ -142,7 +142,7 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
           ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
@@ -151,7 +151,7 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
         id: id,
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         htmlFor: uniqueId,
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {

package/lib/list/BluePrintStatus/BluePrintStatus.module.css

@@ -6,10 +6,10 @@
   padding-left: var(--zd_size5);
 }
 /* .danger {
-  color: var(--dot_text_brightRed);
+  color: var(--dot_brightRed);
 }
 .default {
-  color: var(--dot_text_shuttleGrey);
+  color: var(--dot_shuttleGrey);
 } */
 .iconStyle {
   display: block;

package/lib/list/Comment/Comment.js

@@ -70,10 +70,7 @@ var Comment = /*#__PURE__*/function (_Component) {
         customClass: "".concat(_CommentModule["default"].container, " ").concat(className, " "),
         onClick: onClick,
         dataId: "commentLstContainer",
-        title: commentTitle,
-        customProps: {
-          'aria-label': commentTitle
-        }
+        title: commentTitle
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-TK-commentLine",
         iconClass: _CommentModule["default"].commentIcon

package/lib/list/DotNew/DotNew.module.css

@@ -1,15 +1,15 @@
 .medium {
   width: var(--zd_size6);
-  height: var(--zd_size6); 
+  height: var(--zd_size6);
 }
 .small{
   width: var(--zd_size5);
-  height: var(--zd_size5); 
+  height: var(--zd_size5);
 }
 .container{
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-   /* animation: dotAnimation 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1); 
-  box-shadow: 0 0 0 0 var(--dot_bg_catskillWhite),
+   /* animation: dotAnimation 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
+  box-shadow: 0 0 0 0 var(--dot_catskillWhite),
     0 0 0 0 rgba(10, 115, 235, 0.6); */
   border-radius: 50%;
   background-color: var(--zdt_dotnew_default_bg);