@zohodesk/dot 1.0.0-temp-109 → 1.0.0-temp-111

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

@@ -13,14 +13,17 @@ var _Select = _interopRequireDefault(require("@zohodesk/components/lib/Select/Se
 var _ValidationMessage = _interopRequireDefault(require("../ValidationMessage/ValidationMessage"));
 var _IdProvider = require("@zohodesk/components/lib/Provider/IdProvider");
 var _FieldContainer = _interopRequireDefault(require("../FieldContainer/FieldContainer"));
+var _RippleEffect = _interopRequireDefault(require("@zohodesk/components/lib/RippleEffect/RippleEffect"));
 var _FieldsModule = _interopRequireDefault(require("../Fields.module.css"));
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -39,6 +42,17 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
     _this.handleGetRef = _this.handleGetRef.bind(_assertThisInitialized(_this));
     // this.handleLabelClick = this.handleLabelClick.bind(this);
     _this.getNextId = (0, _IdProvider.getUniqueId)(_assertThisInitialized(_this));
+    _this.handleParentClick = _this.handleParentClick.bind(_assertThisInitialized(_this));
+    _this.handleFocusToggle = _this.handleFocusToggle.bind(_assertThisInitialized(_this));
+    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_this));
+    _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_this));
+    _this.getPopupHandlers = _this.getPopupHandlers.bind(_assertThisInitialized(_this));
+    _this.handleDropBoxOpen = _this.handleDropBoxOpen.bind(_assertThisInitialized(_this));
+    _this.handleDropBoxClose = _this.handleDropBoxClose.bind(_assertThisInitialized(_this));
+    _this.state = {
+      isFocused: false,
+      isPopupOpen: false
+    };
     return _this;
   }
   _createClass(SelectField, [{
@@ -56,9 +70,69 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
       var _this$props2 = this.props,
         getRef = _this$props2.getRef,
         id = _this$props2.id;
-      this.selectBox = el;
+      this.textBox = el;
       getRef && getRef(el, id);
     }
+  }, {
+    key: "handleParentClick",
+    value: function handleParentClick(e) {
+      var needFieldStyle = this.props.needFieldStyle;
+      if (needFieldStyle) {
+        this.textBox.focus();
+        this.togglePopup(e);
+      }
+    }
+  }, {
+    key: "handleFocusToggle",
+    value: function handleFocusToggle(value) {
+      this.setState({
+        isFocused: value
+      });
+    }
+  }, {
+    key: "handleFocus",
+    value: function handleFocus(e) {
+      var _this$props3 = this.props,
+        onFocus = _this$props3.onFocus,
+        needFieldStyle = _this$props3.needFieldStyle;
+      needFieldStyle && this.handleFocusToggle(true);
+      onFocus && onFocus(e);
+    }
+  }, {
+    key: "handleBlur",
+    value: function handleBlur(e) {
+      var _this$props4 = this.props,
+        onBlur = _this$props4.onBlur,
+        needFieldStyle = _this$props4.needFieldStyle;
+      needFieldStyle && this.handleFocusToggle(false);
+      onBlur && onBlur(e);
+    }
+  }, {
+    key: "getPopupHandlers",
+    value: function getPopupHandlers(methods) {
+      var togglePopup = methods.togglePopup;
+      this.togglePopup = togglePopup;
+    }
+  }, {
+    key: "handleDropBoxOpen",
+    value: function handleDropBoxOpen() {
+      var isPopupOpen = this.state.isPopupOpen;
+      if (isPopupOpen == false) {
+        this.setState({
+          isPopupOpen: true
+        });
+      }
+    }
+  }, {
+    key: "handleDropBoxClose",
+    value: function handleDropBoxClose() {
+      var isPopupOpen = this.state.isPopupOpen;
+      if (isPopupOpen) {
+        this.setState({
+          isPopupOpen: false
+        });
+      }
+    }
 
     // handleLabelClick() {
     //   let { isFocusOnLabelClick } = this.props;
@@ -69,54 +143,56 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-        labelName = _this$props3.labelName,
-        id = _this$props3.id,
-        isMandatory = _this$props3.isMandatory,
-        options = _this$props3.options,
-        selectedValue = _this$props3.selectedValue,
-        needSearch = _this$props3.needSearch,
-        emptyMessage = _this$props3.emptyMessage,
-        animationStyle = _this$props3.animationStyle,
-        textBoxSize = _this$props3.textBoxSize,
-        textBoxVariant = _this$props3.textBoxVariant,
-        searchBoxSize = _this$props3.searchBoxSize,
-        searchBoxPlaceHolder = _this$props3.searchBoxPlaceHolder,
-        validationMessage = _this$props3.validationMessage,
-        validationPalette = _this$props3.validationPalette,
-        isReadOnly = _this$props3.isReadOnly,
-        valueField = _this$props3.valueField,
-        textField = _this$props3.textField,
-        excludeOptions = _this$props3.excludeOptions,
-        errorType = _this$props3.errorType,
-        isDisabled = _this$props3.isDisabled,
-        title = _this$props3.title,
-        dataId = _this$props3.dataId,
-        fieldClass = _this$props3.fieldClass,
-        validationRuleMessage = _this$props3.validationRuleMessage,
-        validationRulePalette = _this$props3.validationRulePalette,
-        onKeyDown = _this$props3.onKeyDown,
-        infoText = _this$props3.infoText,
-        isLocked = _this$props3.isLocked,
-        lockedInfoText = _this$props3.lockedInfoText,
-        borderColor = _this$props3.borderColor,
-        fieldSize = _this$props3.fieldSize,
-        isNextOptions = _this$props3.isNextOptions,
-        getNextOptions = _this$props3.getNextOptions,
-        popupGroup = _this$props3.popupGroup,
-        onSearch = _this$props3.onSearch,
-        labelPalette = _this$props3.labelPalette,
-        labelCustomClass = _this$props3.labelCustomClass,
-        htmlId = _this$props3.htmlId,
-        needLocalSearch = _this$props3.needLocalSearch,
-        isDefaultSelectValue = _this$props3.isDefaultSelectValue,
-        placeHolder = _this$props3.placeHolder,
-        children = _this$props3.children,
-        onFocus = _this$props3.onFocus,
-        iconOnHover = _this$props3.iconOnHover,
-        customProps = _this$props3.customProps,
-        renderLabelProps = _this$props3.renderLabelProps,
-        ariaLabelledby = _this$props3.ariaLabelledby;
+      var _this$props5 = this.props,
+        labelName = _this$props5.labelName,
+        id = _this$props5.id,
+        isMandatory = _this$props5.isMandatory,
+        options = _this$props5.options,
+        selectedValue = _this$props5.selectedValue,
+        needSearch = _this$props5.needSearch,
+        emptyMessage = _this$props5.emptyMessage,
+        animationStyle = _this$props5.animationStyle,
+        textBoxSize = _this$props5.textBoxSize,
+        textBoxVariant = _this$props5.textBoxVariant,
+        searchBoxSize = _this$props5.searchBoxSize,
+        searchBoxPlaceHolder = _this$props5.searchBoxPlaceHolder,
+        validationMessage = _this$props5.validationMessage,
+        validationPalette = _this$props5.validationPalette,
+        isReadOnly = _this$props5.isReadOnly,
+        valueField = _this$props5.valueField,
+        textField = _this$props5.textField,
+        excludeOptions = _this$props5.excludeOptions,
+        errorType = _this$props5.errorType,
+        isDisabled = _this$props5.isDisabled,
+        title = _this$props5.title,
+        dataId = _this$props5.dataId,
+        fieldClass = _this$props5.fieldClass,
+        validationRuleMessage = _this$props5.validationRuleMessage,
+        validationRulePalette = _this$props5.validationRulePalette,
+        onKeyDown = _this$props5.onKeyDown,
+        infoText = _this$props5.infoText,
+        isLocked = _this$props5.isLocked,
+        lockedInfoText = _this$props5.lockedInfoText,
+        borderColor = _this$props5.borderColor,
+        fieldSize = _this$props5.fieldSize,
+        isNextOptions = _this$props5.isNextOptions,
+        getNextOptions = _this$props5.getNextOptions,
+        popupGroup = _this$props5.popupGroup,
+        onSearch = _this$props5.onSearch,
+        labelPalette = _this$props5.labelPalette,
+        labelCustomClass = _this$props5.labelCustomClass,
+        htmlId = _this$props5.htmlId,
+        needLocalSearch = _this$props5.needLocalSearch,
+        isDefaultSelectValue = _this$props5.isDefaultSelectValue,
+        placeHolder = _this$props5.placeHolder,
+        children = _this$props5.children,
+        onFocus = _this$props5.onFocus,
+        iconOnHover = _this$props5.iconOnHover,
+        customProps = _this$props5.customProps,
+        renderLabelProps = _this$props5.renderLabelProps,
+        handleDropBoxOpen = _this$props5.handleDropBoxOpen,
+        needFieldStyle = _this$props5.needFieldStyle,
+        ariaLabelledby = _this$props5.ariaLabelledby;
       var _customProps$LabelPro = customProps.LabelProps,
         LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
         _customProps$SelectPr = customProps.SelectProps,
@@ -126,9 +202,18 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
         _customProps$Validati2 = customProps.ValidationMessageProps2,
         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 : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : null
+      var _this$state = this.state,
+        isFocused = _this$state.isFocused,
+        isPopupOpen = _this$state.isPopupOpen;
+      var isActive = isPopupOpen || isFocused;
+      return /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
+        hoverType: "bg",
+        isActive: isActive,
+        isNeedEffect: !isReadOnly && !isDisabled && needFieldStyle ? true : false
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(_FieldsModule["default"].container, " ").concat(needFieldStyle ? _FieldsModule["default"].highlightSpace : '', "  ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
+        "data-title": isDisabled ? title : null,
+        onClick: this.handleParentClick
       }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
         infoText: infoText,
         isLocked: isLocked,
@@ -138,18 +223,20 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
         text: labelName,
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
-        htmlFor: uniqueId,
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : '', " ").concat(_FieldsModule["default"].labelindex)
+        // htmlFor={uniqueId}
+        ,
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps, {
         id: uniqueId
       }))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '', " ").concat(fieldClass ? fieldClass : '')
+        className: "".concat(needFieldStyle ? _FieldsModule["default"].highlightPosition : _FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '', " ").concat(fieldClass ? fieldClass : '')
       }, /*#__PURE__*/_react["default"].createElement(_Select["default"], _extends({
         options: options,
         selectedValue: selectedValue,
         onChange: this.handleChange,
-        onFocus: onFocus,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
         getRef: this.handleGetRef,
         needSearch: needSearch,
         emptyMessage: emptyMessage,
@@ -169,12 +256,17 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
         isNextOptions: isNextOptions,
         getNextOptions: getNextOptions,
         popupGroup: popupGroup,
-        onSearch: onSearch,
-        htmlId: uniqueId,
+        onSearch: onSearch
+        // htmlId={uniqueId}
+        ,
         needLocalSearch: needLocalSearch,
         isDefaultSelectValue: isDefaultSelectValue,
         placeHolder: placeHolder,
-        iconOnHover: iconOnHover
+        iconOnHover: iconOnHover,
+        needPosition: needFieldStyle ? true : false,
+        getPopupHandlers: this.getPopupHandlers,
+        onDropBoxOpen: this.handleDropBoxOpen,
+        onDropBoxClose: this.handleDropBoxClose
       }, SelectProps, {
         ariaLabelledby: uniqueId
       }), children ? children : null)), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
@@ -189,7 +281,7 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
         type: errorType,
         htmlFor: uniqueId,
         dataId: "".concat(dataId, "_ValidationRuleMessage")
-      }, ValidationMessageProps2)));
+      }, ValidationMessageProps2))));
     }
   }]);
   return SelectField;

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

@@ -5,9 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultProps = void 0;
 var _FieldCommonDefaultProps = require("../../props/FieldCommonDefaultProps");
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var defaultProps = _objectSpread({
   errorType: 'primary',
   needSearch: false,
@@ -21,6 +24,7 @@ var defaultProps = _objectSpread({
   labelCustomClass: '',
   isDefaultSelectValue: true,
   placeHolder: '',
-  customProps: {}
+  customProps: {},
+  needFieldStyle: false
 }, (0, _FieldCommonDefaultProps.FieldCommonDefaultProps)());
 exports.defaultProps = defaultProps;

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

@@ -7,9 +7,12 @@ exports.propTypes = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _FieldCommonPropTypes = require("../../props/FieldCommonPropTypes");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var propTypes = _objectSpread({
   animationStyle: _propTypes["default"].string,
   borderColor: _propTypes["default"].oneOf(['transparent', 'default']),

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

@@ -23,8 +23,10 @@ var _Common = require("@zohodesk/components/lib/utils/Common.js");
 var _TagsMultiSelectModule = _interopRequireDefault(require("./TagsMultiSelect.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"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

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

@@ -24,7 +24,7 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var TagsMultiSelectField = function TagsMultiSelectField(props) {
   var _useState = (0, _react.useState)(0),
@@ -182,7 +182,9 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
     };
   }, []);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '')
+    className: "".concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
+    tabIndex: "0",
+    "aria-label": "".concat(labelName)
   }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
     ePhiData: ePhiData,
     alignContainer: "baseline",

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

@@ -5,9 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultProps = void 0;
 var _FieldCommonDefaultProps = require("../../props/FieldCommonDefaultProps");
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var defaultProps = _objectSpread({
   fieldProperties: {
     isDisabled: false,

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

@@ -7,9 +7,12 @@ exports.propTypes = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _FieldCommonPropTypes = require("../../props/FieldCommonPropTypes");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var propTypes = _objectSpread({
   fieldProperties: _propTypes["default"].shape({
     id: _propTypes["default"].string.isRequired,

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

@@ -13,14 +13,17 @@ var _TextBoxIcon = _interopRequireDefault(require("@zohodesk/components/lib/Text
 var _ValidationMessage = _interopRequireDefault(require("../ValidationMessage/ValidationMessage"));
 var _IdProvider = require("@zohodesk/components/lib/Provider/IdProvider");
 var _FieldContainer = _interopRequireDefault(require("../FieldContainer/FieldContainer"));
+var _RippleEffect = _interopRequireDefault(require("@zohodesk/components/lib/RippleEffect/RippleEffect"));
 var _FieldsModule = _interopRequireDefault(require("../Fields.module.css"));
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -39,6 +42,13 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
     _this.handleGetRef = _this.handleGetRef.bind(_assertThisInitialized(_this));
     // this.handleLabelClick = this.handleLabelClick.bind(this);
     _this.getNextId = (0, _IdProvider.getUniqueId)(_assertThisInitialized(_this));
+    _this.handleParentClick = _this.handleParentClick.bind(_assertThisInitialized(_this));
+    _this.handleFocusToggle = _this.handleFocusToggle.bind(_assertThisInitialized(_this));
+    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_this));
+    _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_this));
+    _this.state = {
+      isFocused: false
+    };
     return _this;
   }
   _createClass(TextBoxField, [{
@@ -66,44 +76,81 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
     //   // }
     // }
   }, {
-    key: "render",
-    value: function render() {
+    key: "handleParentClick",
+    value: function handleParentClick() {
+      var needFieldStyle = this.props.needFieldStyle;
+      if (needFieldStyle) {
+        this.textBox.focus();
+      }
+    }
+  }, {
+    key: "handleFocusToggle",
+    value: function handleFocusToggle(value) {
+      var needFieldStyle = this.props.needFieldStyle;
+      if (needFieldStyle) {
+        this.setState({
+          isFocused: value
+        });
+      }
+    }
+  }, {
+    key: "handleFocus",
+    value: function handleFocus(e) {
       var _this$props3 = this.props,
-        labelName = _this$props3.labelName,
-        id = _this$props3.id,
-        textBoxSize = _this$props3.textBoxSize,
-        textBoxVariant = _this$props3.textBoxVariant,
-        textBoxType = _this$props3.textBoxType,
-        isMandatory = _this$props3.isMandatory,
-        validationMessage = _this$props3.validationMessage,
-        validationPalette = _this$props3.validationPalette,
-        maxLength = _this$props3.maxLength,
-        isReadOnly = _this$props3.isReadOnly,
-        value = _this$props3.value,
-        errorType = _this$props3.errorType,
-        isDisabled = _this$props3.isDisabled,
-        title = _this$props3.title,
-        onBlur = _this$props3.onBlur,
-        dataId = _this$props3.dataId,
-        validationRuleMessage = _this$props3.validationRuleMessage,
-        validationRulePalette = _this$props3.validationRulePalette,
-        onKeyDown = _this$props3.onKeyDown,
-        placeHolder = _this$props3.placeHolder,
-        infoText = _this$props3.infoText,
-        borderColor = _this$props3.borderColor,
-        fieldSize = _this$props3.fieldSize,
-        labelPalette = _this$props3.labelPalette,
-        labelCustomClass = _this$props3.labelCustomClass,
-        htmlId = _this$props3.htmlId,
-        lockedInfoText = _this$props3.lockedInfoText,
-        isLocked = _this$props3.isLocked,
-        needReadOnlyStyle = _this$props3.needReadOnlyStyle,
-        isClickable = _this$props3.isClickable,
         onFocus = _this$props3.onFocus,
-        ePhiData = _this$props3.ePhiData,
-        children = _this$props3.children,
-        customProps = _this$props3.customProps,
-        renderLabelProps = _this$props3.renderLabelProps;
+        needFieldStyle = _this$props3.needFieldStyle;
+      needFieldStyle && this.handleFocusToggle(true);
+      onFocus && onFocus(e);
+    }
+  }, {
+    key: "handleBlur",
+    value: function handleBlur(e) {
+      var _this$props4 = this.props,
+        onBlur = _this$props4.onBlur,
+        needFieldStyle = _this$props4.needFieldStyle;
+      needFieldStyle && this.handleFocusToggle(false);
+      onBlur && onBlur(e);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props5 = this.props,
+        labelName = _this$props5.labelName,
+        id = _this$props5.id,
+        textBoxSize = _this$props5.textBoxSize,
+        textBoxVariant = _this$props5.textBoxVariant,
+        textBoxType = _this$props5.textBoxType,
+        isMandatory = _this$props5.isMandatory,
+        validationMessage = _this$props5.validationMessage,
+        validationPalette = _this$props5.validationPalette,
+        maxLength = _this$props5.maxLength,
+        isReadOnly = _this$props5.isReadOnly,
+        value = _this$props5.value,
+        errorType = _this$props5.errorType,
+        isDisabled = _this$props5.isDisabled,
+        title = _this$props5.title,
+        onBlur = _this$props5.onBlur,
+        dataId = _this$props5.dataId,
+        validationRuleMessage = _this$props5.validationRuleMessage,
+        validationRulePalette = _this$props5.validationRulePalette,
+        onKeyDown = _this$props5.onKeyDown,
+        placeHolder = _this$props5.placeHolder,
+        infoText = _this$props5.infoText,
+        borderColor = _this$props5.borderColor,
+        fieldSize = _this$props5.fieldSize,
+        labelPalette = _this$props5.labelPalette,
+        labelCustomClass = _this$props5.labelCustomClass,
+        htmlId = _this$props5.htmlId,
+        lockedInfoText = _this$props5.lockedInfoText,
+        isLocked = _this$props5.isLocked,
+        needReadOnlyStyle = _this$props5.needReadOnlyStyle,
+        isClickable = _this$props5.isClickable,
+        onFocus = _this$props5.onFocus,
+        ePhiData = _this$props5.ePhiData,
+        children = _this$props5.children,
+        customProps = _this$props5.customProps,
+        renderLabelProps = _this$props5.renderLabelProps,
+        needFieldStyle = _this$props5.needFieldStyle;
       var _customProps$LabelPro = customProps.LabelProps,
         LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
         _customProps$TextBoxI = customProps.TextBoxIconProps,
@@ -113,9 +160,15 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
         _customProps$Validati2 = customProps.ValidationMessageProps2,
         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 : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : null
+      var isFocused = this.state.isFocused;
+      return /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
+        hoverType: "bg",
+        isActive: isFocused,
+        isNeedEffect: !isReadOnly && !isDisabled && needFieldStyle ? true : false
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(_FieldsModule["default"].container, " ").concat(needFieldStyle ? _FieldsModule["default"].highlightSpace : '', " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
+        "data-title": isDisabled ? title : null,
+        onClick: this.handleParentClick
       }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
         infoText: infoText,
         isLocked: isLocked,
@@ -127,7 +180,7 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
         text: labelName,
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : '', " ").concat(_FieldsModule["default"].labelindex),
         htmlFor: uniqueId,
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps, {
@@ -146,11 +199,11 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
         value: value,
         onChange: this.handleChange,
         dataId: dataId,
-        onBlur: onBlur,
+        onBlur: this.handleBlur,
         onKeyDown: onKeyDown,
         placeHolder: placeHolder,
         borderColor: borderColor,
-        onFocus: onFocus,
+        onFocus: this.handleFocus,
         isDisabled: isDisabled,
         needEffect: isReadOnly || isDisabled ? false : true,
         isClickable: isClickable,
@@ -171,7 +224,7 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
         type: errorType,
         htmlFor: uniqueId,
         dataId: "".concat(dataId, "_ValidationRuleMessage")
-      }, ValidationMessageProps2))));
+      }, ValidationMessageProps2)))));
     }
   }]);
   return TextBoxField;