@zohodesk/dot 1.0.0-beta.225 → 1.0.0-beta.226

package/lib/Provider.js

@@ -65,6 +65,28 @@ require("@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkCom
 
 require("@zohodesk/components/assets/Appearance/dark/mode/darkMode.module.css");
 
+require("@zohodesk/components/assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/mode/pureDarkMode.module.css");
+
 require("@zohodesk/svg/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
 
 require("@zohodesk/svg/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
@@ -89,12 +111,22 @@ require("@zohodesk/svg/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.m
 
 require("@zohodesk/svg/assets/Appearance/dark/mode/darkEmptyStates.module.css");
 
+require("@zohodesk/svg/assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css");
+
+require("@zohodesk/svg/assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css");
+
+require("@zohodesk/svg/assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css");
+
+require("@zohodesk/svg/assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css");
+
+require("@zohodesk/svg/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css");
+
+require("@zohodesk/svg/assets/Appearance/pureDark/mode/pureDarkEmptyStates.module.css");
+
 var _IdProvider = require("@zohodesk/components/lib/Provider/IdProvider");
 
 var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider");
 
-var _Switch = _interopRequireDefault(require("@zohodesk/components/lib/Switch/Switch"));
-
 require("../assets/Appearance/default/themes/blue/blueDefaultDotTheme.module.css");
 
 require("../assets/Appearance/default/themes/green/greenDefaultDotTheme.module.css");
@@ -119,6 +151,18 @@ require("../assets/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css")
 
 require("../assets/Appearance/dark/mode/dotDarkMode.module.css");
 
+require("../assets/Appearance/pureDark/themes/blue/bluePureDarkDotTheme.module.css");
+
+require("../assets/Appearance/pureDark/themes/green/greenPureDarkDotTheme.module.css");
+
+require("../assets/Appearance/pureDark/themes/orange/orangePureDarkDotTheme.module.css");
+
+require("../assets/Appearance/pureDark/themes/red/redPureDarkDotTheme.module.css");
+
+require("../assets/Appearance/pureDark/themes/yellow/yellowPureDarkDotTheme.module.css");
+
+require("../assets/Appearance/pureDark/mode/dotPureDarkMode.module.css");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -164,25 +208,16 @@ var Provider = /*#__PURE__*/function (_React$Component) {
       appearanceName: 'default',
       themeName: 'blue'
     };
-    _this.switchMode = _this.switchMode.bind(_assertThisInitialized(_this));
     _this.setTheme = _this.setTheme.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(Provider, [{
-    key: "switchMode",
-    value: function switchMode() {
-      var appearanceName = this.state.appearanceName;
-
-      if (appearanceName == 'default') {
-        this.setState({
-          appearanceName: 'dark'
-        });
-      } else {
-        this.setState({
-          appearanceName: 'default'
-        });
-      }
+    key: "setAppearance",
+    value: function setAppearance(mode) {
+      this.setState({
+        appearanceName: mode
+      });
     }
   }, {
     key: "setTheme",
@@ -221,6 +256,29 @@ var Provider = /*#__PURE__*/function (_React$Component) {
       var yellow = {
         backgroundColor: '#e8b923'
       };
+      var light = {
+        backgroundColor: '#fff'
+      };
+      var night = {
+        backgroundColor: '#232b38'
+      };
+      var dark = {
+        backgroundColor: '#212121'
+      };
+      var fixedPosition = {
+        position: 'fixed',
+        bottom: '0',
+        backgroundColor: '#272727',
+        padding: '10px',
+        borderRadius: '15px 15px 0 0',
+        minWidth: '100px',
+        textAlign: 'center',
+        boxShadow: '0 0 3px #000',
+        fontSize: '12px',
+        zIndex: '3',
+        display: 'flex',
+        alignItems: 'center'
+      };
       return /*#__PURE__*/_react["default"].createElement(_i18n.I18NProvider, {
         i18n: _i18n2["default"],
         timeZone: "Asia/Kolkata",
@@ -243,29 +301,46 @@ var Provider = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         scroll: "vertical"
       }, this.props.children), /*#__PURE__*/_react["default"].createElement("div", {
+        style: Object.assign({}, fixedPosition, {
+          left: '20%',
+          transform: 'translate(-20%)'
+        })
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          color: '#fff'
+        }
+      }, "Appearance:"), /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        title: "Light Mode",
+        style: Object.assign({}, themeClass, light),
+        onClick: function onClick() {
+          return _this2.setAppearance('default');
+        }
+      }), /*#__PURE__*/_react["default"].createElement("span", {
+        title: "Night Mode",
+        style: Object.assign({}, themeClass, night),
+        onClick: function onClick() {
+          return _this2.setAppearance('dark');
+        }
+      }), /*#__PURE__*/_react["default"].createElement("span", {
+        title: "Dark Mode",
+        style: Object.assign({}, themeClass, dark),
+        onClick: function onClick() {
+          return _this2.setAppearance('pureDark');
+        }
+      }))), /*#__PURE__*/_react["default"].createElement("div", {
+        style: Object.assign({}, fixedPosition, {
+          left: '80%',
+          transform: 'translate(-80%)'
+        })
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
-          position: 'fixed',
-          bottom: '0',
-          backgroundColor: '#272727',
-          padding: '10px',
-          borderRadius: '15px 15px 0 0',
-          minWidth: '100px',
-          textAlign: 'center',
-          left: '50%',
-          transform: 'translate(-50%)',
-          boxShadow: '0 0 3px #000',
-          fontSize: '12px',
-          zIndex: '1000',
-          display: 'flex',
-          alignItems: 'center'
+          color: '#fff'
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
-        id: "switchMode",
-        text: "Light/Night Mode",
-        labelSize: "small",
-        onChange: this.switchMode,
-        checked: appearanceName == 'dark'
-      })), /*#__PURE__*/_react["default"].createElement("div", {
+      }, "Themes:"), /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           display: 'flex'
         }

package/lib/common/dot_animation.module.css

@@ -0,0 +1,27 @@
+
+[dir=ltr] .rotate{
+  animation-name:  rotate-ltr ;
+}
+[dir=rtl] .rotate{
+  animation-name:  rotate-rtl ;
+}
+
+@keyframes rotate-ltr {
+  from {
+      transform: rotate(0);
+  }
+  
+  to {
+      transform: rotate(360deg);
+  }
+  }
+
+@keyframes rotate-rtl {
+  from {
+      transform: rotate(0);
+  }
+  
+  to {
+      transform: rotate(-360deg);
+  }
+  }

package/lib/common/dot_common.module.css

@@ -0,0 +1,4 @@
+.audioImage {
+  background-image: url('../../images/audio_thumbnail.png');
+  background-repeat: no-repeat;
+}

package/lib/deprecated/utils/General.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatCurrency = formatCurrency;
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function formatCurrency(number, symbol) {
+  // format number 1000000 to 1,234,567
+  if (number && number != 0) {
+    var typeOfData = _typeof(number);
+
+    var isDecimal = typeOfData == 'string' ? number.indexOf('.') != -1 : !Number.isInteger(number);
+
+    if (isDecimal) {
+      var val = number.toString().split('.');
+      var arr1 = "".concat(val[0].replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ','));
+      var finalVal = "".concat(symbol).concat(arr1, ".").concat(val[1]);
+      return finalVal;
+    } else {
+      var value = "".concat(symbol).concat(number.toString().replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ','));
+      return value;
+    }
+  }
+
+  return number;
+}

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -863,8 +863,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
         }, ListItemProps)));
       })) : /*#__PURE__*/_react["default"].createElement(_CommonEmptyState["default"], {
         className: _ToggleDropDownModule["default"].svgWrapper,
-        title: searchErrorText || 'oops !',
         description: searchEmptyHint,
+        title: searchErrorText || 'No results',
         size: "small",
         getEmptyState: this.emptySearchSVG
       }) : /*#__PURE__*/_react["default"].createElement("div", {

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

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

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

@@ -23,8 +23,6 @@ var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
 var _FieldsModule = _interopRequireDefault(require("../Fields.module.css"));
 
-var _General = require("../../../utils/General");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -145,7 +143,8 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
           needReadOnlyStyle = _this$props3.needReadOnlyStyle,
           isClickable = _this$props3.isClickable,
           userCurrencyType = _this$props3.userCurrencyType,
-          customProps = _this$props3.customProps;
+          customProps = _this$props3.customProps,
+          formatCurrency = _this$props3.formatCurrency;
       var _customProps$LabelPro = customProps.LabelProps,
           LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
           _customProps$TextBoxP = customProps.TextBoxProps,
@@ -157,8 +156,8 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
       var isActive = this.state.isActive;
       var formatValue = value;
 
-      if (!isActive && value != 0) {
-        formatValue = (0, _General.formatCurrency)(value, userCurrencyType);
+      if (!isActive) {
+        formatValue = formatCurrency(value, userCurrencyType);
       } else {
         formatValue = value;
       }
@@ -166,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 : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
@@ -266,7 +265,8 @@ CurrencyField.propTypes = {
     TextBoxProps: _propTypes["default"].object,
     ValidationMessageProps1: _propTypes["default"].object,
     ValidationMessageProps2: _propTypes["default"].object
-  })
+  }),
+  formatCurrency: _propTypes["default"].func
 };
 CurrencyField.defaultProps = {
   errorType: 'primary',
@@ -282,7 +282,8 @@ CurrencyField.defaultProps = {
   labelCustomClass: '',
   isClickable: false,
   needReadOnlyStyle: true,
-  customProps: {}
+  customProps: {},
+  formatCurrency: function formatCurrency() {}
 };
 
 if (false) {

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

@@ -172,7 +172,7 @@ var DateField = /*#__PURE__*/function (_PureComponent) {
       var getAriaId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({

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

@@ -185,7 +185,7 @@ var MultiSelectField = /*#__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 : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({

package/lib/form/fields/PhoneField/PhoneField.js

@@ -169,7 +169,7 @@ var PhoneField = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxField["default"], _extends({

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

@@ -106,7 +106,7 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, labelName && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
         size: "medium",

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

@@ -153,7 +153,7 @@ var SelectField = /*#__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 : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({

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

@@ -71,16 +71,23 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
     _this.state = {
       showAll: false
     };
-    _this.textBoxRef = /*#__PURE__*/_react["default"].createRef();
     _this.emptySearchSVG = _this.emptySearchSVG.bind(_assertThisInitialized(_this));
     _this.onShowAllClick = _this.onShowAllClick.bind(_assertThisInitialized(_this));
     _this.getContainerRef = _this.getContainerRef.bind(_assertThisInitialized(_this));
     _this.onScroll = _this.onScroll.bind(_assertThisInitialized(_this));
     _this.getSelectedItemRef = _this.getSelectedItemRef.bind(_assertThisInitialized(_this));
+    _this.textInputRef = _this.textInputRef.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(TagsMultiSelect, [{
+    key: "textInputRef",
+    value: function textInputRef(el) {
+      var getTextInputRef = this.props.getTextInputRef;
+      this.inputEl = el;
+      getTextInputRef && getTextInputRef(el);
+    }
+  }, {
     key: "onScroll",
     value: function onScroll() {
       var _this$props = this.props,
@@ -114,10 +121,8 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
 
       if (prevProps.isTagListLoading !== isTagListLoading && !isTagListLoading || isPopupReady && prevProps.tagsList.length !== tagsList.length) {
         setTimeout(function () {
-          var textBoxElementRef = _this2.textBoxRef.current;
-
-          if (textBoxElementRef && typeof textBoxElementRef.handleFocus === 'function') {
-            _this2.textBoxRef.current.handleFocus();
+          if (_this2.inputEl) {
+            _this2.inputEl.focus();
           }
         }, 300);
       }
@@ -177,7 +182,9 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           needBorder = _this$props3.needBorder,
           borderColor = _this$props3.borderColor,
           getTextBoxChildren = _this$props3.getTextBoxChildren,
-          htmlId = _this$props3.htmlId;
+          htmlId = _this$props3.htmlId,
+          boxSize = _this$props3.boxSize,
+          onSelectTag = _this$props3.onSelectTag;
       var showAll = this.state.showAll;
       var chipLimit = !isPopupReady ? showAll ? tagsList.length : chipNeedToShow : tagsList.length;
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -194,16 +201,19 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         scroll: "vertical"
       }, tagsList.length ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, tagsList.map(function (tag, index) {
         var name = tag.name,
-            tagType = tag.tagType;
+            tagType = tag.tagType,
+            id = tag.id;
         return index < chipLimit ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: _TagsMultiSelectModule["default"].tag,
           key: index
         }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+          id: id,
           text: name,
           onRemove: isReadOnly ? null : deleteTag.bind(_this3, name),
           closeTitle: i18nKeys.deleteText,
           palette: tagType === 'SYSTEM' ? 'primary' : 'default',
-          isReadOnly: isReadOnly
+          isReadOnly: isReadOnly,
+          onSelectTag: onSelectTag ? onSelectTag : undefined
         })) : null;
       }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _TagsMultiSelectModule["default"].moreLess,
@@ -224,7 +234,6 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         onChange: handleChange,
         maxLength: 50,
         isReadOnly: isReadOnly,
-        ref: this.textBoxRef,
         needBorder: false,
         placeHolder: tagsList.length ? '' : i18nKeys.placeholderText || '-',
         onClick: !isReadOnly ? handleTogglePopup : undefined,
@@ -232,14 +241,15 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           customTBoxWrap: _TagsMultiSelectModule["default"].custmInp,
           customTextBox: _TagsMultiSelectModule["default"].input
         },
-        size: "xsmall"
+        size: "xsmall",
+        inputRef: this.textInputRef
       }, getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
         isAnimate: true,
         isActive: isPopupReady,
         isArrow: false,
         getRef: getContainerRef,
         isBoxPaddingNeed: true,
-        size: "default",
+        size: boxSize,
         boxPosition: boxPosition,
         isPadding: false,
         customClass: {
@@ -306,6 +316,7 @@ TagsMultiSelect.propTypes = {
   deleteTag: _propTypes["default"].func,
   getContainerRef: _propTypes["default"].func,
   getTargetRef: _propTypes["default"].func,
+  getTextInputRef: _propTypes["default"].func,
   handleChange: _propTypes["default"].func,
   handleKeyUp: _propTypes["default"].func,
   handleTogglePopup: _propTypes["default"].func,
@@ -335,7 +346,9 @@ TagsMultiSelect.propTypes = {
   borderColor: _propTypes["default"].oneOf(['transparent', 'default', 'dark']),
   needBorder: _propTypes["default"].bool,
   getTextBoxChildren: _propTypes["default"].func,
-  htmlId: _propTypes["default"].string
+  htmlId: _propTypes["default"].string,
+  boxSize: _propTypes["default"].string,
+  onSelectTag: _propTypes["default"].func
 };
 TagsMultiSelect.defaultProps = {
   className: '',
@@ -343,7 +356,8 @@ TagsMultiSelect.defaultProps = {
   chipNeedToShow: '5',
   borderColor: 'default',
   needBorder: true,
-  dataId: ''
+  dataId: '',
+  boxSize: 'default'
 };
 
 if (false) {

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

@@ -147,7 +147,7 @@ var TextBoxField = /*#__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 : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({

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

@@ -109,6 +109,7 @@ var TextEditor = /*#__PURE__*/function (_Component) {
           needEditorFocus = _this$props$needEdito === void 0 ? true : _this$props$needEdito,
           handleDropUpload = _this$props.handleDropUpload,
           fontFamily = _this$props.fontFamily,
+          fontSize = _this$props.fontSize,
           initCallback = _this$props.initCallback,
           handleAlertMessage = _this$props.handleAlertMessage,
           needInlineAttachment = _this$props.needInlineAttachment;
@@ -144,7 +145,7 @@ var TextEditor = /*#__PURE__*/function (_Component) {
         }
 
         defaultObj = Object.assign(defaultObj, editorOptions);
-        ZohoDeskEditor_Init.init(editorMode, fontFamily, initCallback);
+        ZohoDeskEditor_Init.init(editorMode, fontFamily, initCallback, fontSize);
         ZohoDeskEditor.create && ZohoDeskEditor.create(defaultObj);
       }
     }
@@ -450,6 +451,7 @@ TextEditor.defaultProps = {
   type: 'large',
   changeEditorContent: false,
   fontFamily: 'Lato',
+  fontSize: '16',
   shouldUpdateContent: true,
   i18nKeys: {},
   needInlineAttachment: false,
@@ -466,6 +468,7 @@ TextEditor.propTypes = {
   editorMode: _propTypes["default"].string,
   editorOptions: _propTypes["default"].object,
   fontFamily: _propTypes["default"].oneOf(['Lato', 'Roboto', 'Puvi']),
+  fontSize: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
   handleAlertMessage: _propTypes["default"].func,
   handleDropUpload: _propTypes["default"].func,

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

@@ -649,7 +649,18 @@
   right: 0;
   left: 0;
 }
-.readOnly :global .KB_Editor_menus,
-.editorHide :global .KB_Editor {
+.readOnly :global .KB_Editor_menus {
   display: none !important;
 }
+.editorHide :global .KB_Editor {
+  position: absolute !important;
+  top: 0;
+  opacity: 0;
+  visibility: hidden;
+}
+[dir=ltr] .editorHide :global .KB_Editor {
+  left: 0;
+}
+[dir=rtl] .editorHide :global .KB_Editor {
+  right: 0;
+}

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

@@ -143,7 +143,7 @@ var TextareaField = /*#__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 : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({

package/lib/list/DepartmentDropDown/DepartmentDropDown.js

@@ -108,7 +108,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           _i18nKeys$searchEmpty = i18nKeys.searchEmptyText,
           searchEmptyText = _i18nKeys$searchEmpty === void 0 ? 'No results found' : _i18nKeys$searchEmpty,
           _i18nKeys$searchError = i18nKeys.searchErrorText,
-          searchErrorText = _i18nKeys$searchError === void 0 ? 'OOPS !' : _i18nKeys$searchError,
+          searchErrorText = _i18nKeys$searchError === void 0 ? 'No results' : _i18nKeys$searchError,
           _i18nKeys$placeholder = i18nKeys.placeholder,
           placeholder = _i18nKeys$placeholder === void 0 ? 'Search Department' : _i18nKeys$placeholder;
       return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], {

package/lib/list/GridStencils/GridStencils.module.css

@@ -1,9 +1,11 @@
 .stenLoading {
   position: relative;
+  width: var(--zd_size265);
   background-color: var(--zdt_gridstencils_default_bg);
   border-bottom: 1px solid var(--zdt_gridstencils_default_border);
   padding: var(--zd_size13) var(--zd_size20) var(--zd_size11);
-  margin-bottom: var(--zd_size10);
+  margin: 0 auto var(--zd_size10) auto;
+  border-radius: var(--zd_size5);
 }
 [dir=ltr] .stenLoadbody {
   margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0;

package/lib/list/SecondaryText/SecondaryText.module.css

@@ -105,7 +105,7 @@ display: block
   composes: inlineBlockMiddle from '../listCommon.module.css';
 }
 .happinessImg {
-  width: var(--zd_size10);
+  width: var(--zd_size13);
   vertical-align: middle;
 }
 [dir=ltr] .happinessImg {