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

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

@@ -10,6 +10,7 @@ import MultiSelect from '@zohodesk/components/lib/MultiSelect/MultiSelect';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
+import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
 
 /** CSS */
 import style from '../Fields.module.css';
@@ -23,6 +24,16 @@ export default class MultiSelectField extends PureComponent {
     this.onSearch = this.onSearch.bind(this);
     this.getNextOptions = this.getNextOptions.bind(this);
     this.getNextId = getUniqueId(this);
+    this.handleParentClick = this.handleParentClick.bind(this);
+    this.handleFocusToggle = this.handleFocusToggle.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.getPopupHandlers = this.getPopupHandlers.bind(this);
+    this.handleDropBoxClose = this.handleDropBoxClose.bind(this);
+    this.state = {
+      isFocused: false,
+      isPopupOpen: false
+    };
   }
   handleChange(selectedValueIds, selectedValues) {
     let {
@@ -36,6 +47,14 @@ export default class MultiSelectField extends PureComponent {
       onDropBoxOpen,
       id
     } = this.props;
+    let {
+      isPopupOpen
+    } = this.state;
+    if (isPopupOpen == false) {
+      this.setState({
+        isPopupOpen: true
+      });
+    }
     return onDropBoxOpen && onDropBoxOpen(id);
   }
   onSearch(searchStr) {
@@ -64,6 +83,53 @@ export default class MultiSelectField extends PureComponent {
     this.multiSelectBox = el;
     getRef && getRef(el, id);
   }
+  handleParentClick(e) {
+    const {
+      needFieldStyle
+    } = this.props;
+    if (needFieldStyle) {
+      this.multiSelectBox.focus();
+      this.togglePopup(e);
+    }
+  }
+  handleFocusToggle(value) {
+    this.setState({
+      isFocused: value
+    });
+  }
+  handleFocus(e) {
+    const {
+      onFocus,
+      needFieldStyle
+    } = this.props;
+    needFieldStyle && this.handleFocusToggle(true);
+    onFocus && onFocus(e);
+  }
+  handleBlur(e) {
+    const {
+      onBlur,
+      needFieldStyle
+    } = this.props;
+    needFieldStyle && this.handleFocusToggle(false);
+    onBlur && onBlur(e);
+  }
+  getPopupHandlers(methods) {
+    let {
+      togglePopup
+    } = methods;
+    this.togglePopup = togglePopup;
+    console.log('togglePopup', togglePopup);
+  }
+  handleDropBoxClose() {
+    let {
+      isPopupOpen
+    } = this.state;
+    if (isPopupOpen) {
+      this.setState({
+        isPopupOpen: false
+      });
+    }
+  }
 
   // handleLabelClick() {
   //   let { isFocusOnLabelClick } = this.props;
@@ -120,7 +186,8 @@ export default class MultiSelectField extends PureComponent {
       onFocus,
       customProps,
       i18nKeys,
-      renderLabelProps
+      renderLabelProps,
+      needFieldStyle
     } = this.props;
     const {
       LabelProps = {},
@@ -130,9 +197,19 @@ export default class MultiSelectField extends PureComponent {
     } = customProps;
     let isDarkPalette = palette === 'dark';
     let uniqueId = htmlId ? htmlId : this.getNextId();
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+    const {
+      isFocused,
+      isPopupOpen
+    } = this.state;
+    // let isActive = isPopupOpen || isFocused;
+    return /*#__PURE__*/React.createElement(RippleEffect, {
+      hoverType: "bg",
+      isActive: isFocused,
+      isNeedEffect: !isReadOnly && !isDisabled && needFieldStyle ? true : false
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${needFieldStyle ? style.highlightSpace : ''} ${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      "data-title": isDisabled ? title : null,
+      onClick: this.handleParentClick
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,
@@ -146,8 +223,8 @@ export default class MultiSelectField extends PureComponent {
       // onClick={this.handleLabelClick}
       ,
       customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
-      htmlFor: uniqueId
+      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
+      // htmlFor={uniqueId}
     }, LabelProps))), /*#__PURE__*/React.createElement(MultiSelect, _extends({
       options: options,
       onChange: this.handleChange,
@@ -178,8 +255,13 @@ export default class MultiSelectField extends PureComponent {
       palette: palette,
       i18nKeys: i18nKeys,
       htmlId: uniqueId,
-      customChildrenClass: customChildrenClass,
-      onFocus: onFocus
+      customChildrenClass: customChildrenClass
+      // onFocus={onFocus}
+      ,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      getPublicMethods: this.getPopupHandlers,
+      isPadding: needFieldStyle ? true : false
     }, MultiSelectProps, {
       ariaLabelledby: uniqueId
     }), children ? children : null), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
@@ -194,7 +276,7 @@ export default class MultiSelectField extends PureComponent {
       type: errorType,
       dataId: `${dataId}_ValidationRuleMessage`,
       htmlFor: uniqueId
-    }, ValidationMessageProps2)));
+    }, ValidationMessageProps2))));
   }
 }
 MultiSelectField.propTypes = propTypes;

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

@@ -12,5 +12,6 @@ export const defaultProps = {
   labelPalette: 'default',
   customProps: {},
   i18nKeys: {},
+  // needFieldStyle:true,
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/PhoneField/PhoneField.js

@@ -92,6 +92,7 @@ export default class PhoneField extends PureComponent {
       onCall,
       ePhiData,
       type,
+      needFieldStyle,
       customProps
     } = this.props;
     const {
@@ -149,7 +150,8 @@ export default class PhoneField extends PureComponent {
       labelPalette: labelPalette,
       labelCustomClass: labelCustomClass,
       errorType: errorType,
-      ePhiData: ePhiData
+      ePhiData: ePhiData,
+      needFieldStyle: needFieldStyle
     }, TextBoxFieldProps))), /*#__PURE__*/React.createElement(Box, null, isTelephony && value ? /*#__PURE__*/React.createElement(Link, _extends({
       className: style.phoneIcon,
       callfrom: "phone",

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

@@ -11,5 +11,6 @@ export const defaultProps = {
   labelPalette: 'default',
   labelCustomClass: '',
   i18nKeys: {},
-  customProps: {}
+  customProps: {},
+  needFieldStyle: false
 };

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

@@ -53,7 +53,7 @@ export default class RadioField extends PureComponent {
       ValidationMessageProps2 = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${!isDisabled && !isReadOnly && style.radiobdExxect} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "data-title": isDisabled ? title : null
     }, labelName && /*#__PURE__*/React.createElement(Label, _extends({
       text: labelName,

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

@@ -10,6 +10,7 @@ import Select from '@zohodesk/components/lib/Select/Select';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
+import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
 
 /**** props ****/
 
@@ -22,6 +23,17 @@ export default class SelectField extends PureComponent {
     this.handleGetRef = this.handleGetRef.bind(this);
     // this.handleLabelClick = this.handleLabelClick.bind(this);
     this.getNextId = getUniqueId(this);
+    this.handleParentClick = this.handleParentClick.bind(this);
+    this.handleFocusToggle = this.handleFocusToggle.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.getPopupHandlers = this.getPopupHandlers.bind(this);
+    this.handleDropBoxOpen = this.handleDropBoxOpen.bind(this);
+    this.handleDropBoxClose = this.handleDropBoxClose.bind(this);
+    this.state = {
+      isFocused: false,
+      isPopupOpen: false
+    };
   }
   handleChange(selctedId, selectedValue) {
     let {
@@ -36,9 +48,65 @@ export default class SelectField extends PureComponent {
       getRef,
       id
     } = this.props;
-    this.selectBox = el;
+    this.textBox = el;
     getRef && getRef(el, id);
   }
+  handleParentClick(e) {
+    const {
+      needFieldStyle
+    } = this.props;
+    if (needFieldStyle) {
+      this.textBox.focus();
+      this.togglePopup(e);
+    }
+  }
+  handleFocusToggle(value) {
+    this.setState({
+      isFocused: value
+    });
+  }
+  handleFocus(e) {
+    const {
+      onFocus,
+      needFieldStyle
+    } = this.props;
+    needFieldStyle && this.handleFocusToggle(true);
+    onFocus && onFocus(e);
+  }
+  handleBlur(e) {
+    const {
+      onBlur,
+      needFieldStyle
+    } = this.props;
+    needFieldStyle && this.handleFocusToggle(false);
+    onBlur && onBlur(e);
+  }
+  getPopupHandlers(methods) {
+    let {
+      togglePopup
+    } = methods;
+    this.togglePopup = togglePopup;
+  }
+  handleDropBoxOpen() {
+    let {
+      isPopupOpen
+    } = this.state;
+    if (isPopupOpen == false) {
+      this.setState({
+        isPopupOpen: true
+      });
+    }
+  }
+  handleDropBoxClose() {
+    let {
+      isPopupOpen
+    } = this.state;
+    if (isPopupOpen) {
+      this.setState({
+        isPopupOpen: false
+      });
+    }
+  }
 
   // handleLabelClick() {
   //   let { isFocusOnLabelClick } = this.props;
@@ -95,6 +163,8 @@ export default class SelectField extends PureComponent {
       iconOnHover,
       customProps,
       renderLabelProps,
+      handleDropBoxOpen,
+      needFieldStyle,
       ariaLabelledby
     } = this.props;
     const {
@@ -104,9 +174,19 @@ export default class SelectField extends PureComponent {
       ValidationMessageProps2 = {}
     } = customProps;
     let uniqueId = htmlId ? htmlId : this.getNextId();
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+    const {
+      isFocused,
+      isPopupOpen
+    } = this.state;
+    let isActive = isPopupOpen || isFocused;
+    return /*#__PURE__*/React.createElement(RippleEffect, {
+      hoverType: "bg",
+      isActive: isActive,
+      isNeedEffect: !isReadOnly && !isDisabled && needFieldStyle ? true : false
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${needFieldStyle ? style.highlightSpace : ''}  ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      "data-title": isDisabled ? title : null,
+      onClick: this.handleParentClick
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,
@@ -116,18 +196,20 @@ export default class SelectField extends PureComponent {
       text: labelName,
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
-      htmlFor: uniqueId,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''} ${style.labelindex}`
+      // htmlFor={uniqueId}
+      ,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps, {
       id: uniqueId
     }))), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''} ${fieldClass ? fieldClass : ''}`
+      className: `${needFieldStyle ? style.highlightPosition : style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''} ${fieldClass ? fieldClass : ''}`
     }, /*#__PURE__*/React.createElement(Select, _extends({
       options: options,
       selectedValue: selectedValue,
       onChange: this.handleChange,
-      onFocus: onFocus,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
       getRef: this.handleGetRef,
       needSearch: needSearch,
       emptyMessage: emptyMessage,
@@ -147,12 +229,17 @@ export default class SelectField extends 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.createElement(ValidationMessage, _extends({
@@ -167,7 +254,7 @@ export default class SelectField extends PureComponent {
       type: errorType,
       htmlFor: uniqueId,
       dataId: `${dataId}_ValidationRuleMessage`
-    }, ValidationMessageProps2)));
+    }, ValidationMessageProps2))));
   }
 }
 SelectField.propTypes = propTypes;

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

@@ -13,5 +13,6 @@ export const defaultProps = {
   isDefaultSelectValue: true,
   placeHolder: '',
   customProps: {},
+  needFieldStyle: false,
   ...FieldCommonDefaultProps()
 };

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

@@ -167,7 +167,9 @@ const TagsMultiSelectField = props => {
     };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: `${isDisabled ? fieldStyle.disabled : isReadOnly ? fieldStyle.readonly : ''}`
+    className: `${isDisabled ? fieldStyle.disabled : isReadOnly ? fieldStyle.readonly : ''}`,
+    tabIndex: "0",
+    "aria-label": `${labelName}`
   }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
     ePhiData: ePhiData,
     alignContainer: "baseline",

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

@@ -10,6 +10,7 @@ import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
+import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
 
 /**** CSS ****/
 import style from '../Fields.module.css';
@@ -20,6 +21,13 @@ export default class TextBoxField extends PureComponent {
     this.handleGetRef = this.handleGetRef.bind(this);
     // this.handleLabelClick = this.handleLabelClick.bind(this);
     this.getNextId = getUniqueId(this);
+    this.handleParentClick = this.handleParentClick.bind(this);
+    this.handleFocusToggle = this.handleFocusToggle.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.state = {
+      isFocused: false
+    };
   }
   handleChange(value) {
     let {
@@ -44,6 +52,40 @@ export default class TextBoxField extends PureComponent {
   //   // }
   // }
 
+  handleParentClick() {
+    const {
+      needFieldStyle
+    } = this.props;
+    if (needFieldStyle) {
+      this.textBox.focus();
+    }
+  }
+  handleFocusToggle(value) {
+    const {
+      needFieldStyle
+    } = this.props;
+    if (needFieldStyle) {
+      this.setState({
+        isFocused: value
+      });
+    }
+  }
+  handleFocus(e) {
+    const {
+      onFocus,
+      needFieldStyle
+    } = this.props;
+    needFieldStyle && this.handleFocusToggle(true);
+    onFocus && onFocus(e);
+  }
+  handleBlur(e) {
+    const {
+      onBlur,
+      needFieldStyle
+    } = this.props;
+    needFieldStyle && this.handleFocusToggle(false);
+    onBlur && onBlur(e);
+  }
   render() {
     let {
       labelName,
@@ -80,7 +122,8 @@ export default class TextBoxField extends PureComponent {
       ePhiData,
       children,
       customProps,
-      renderLabelProps
+      renderLabelProps,
+      needFieldStyle
     } = this.props;
     const {
       LabelProps = {},
@@ -89,9 +132,17 @@ export default class TextBoxField extends PureComponent {
       ValidationMessageProps2 = {}
     } = customProps;
     let uniqueId = htmlId ? htmlId : this.getNextId();
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+    const {
+      isFocused
+    } = this.state;
+    return /*#__PURE__*/React.createElement(RippleEffect, {
+      hoverType: "bg",
+      isActive: isFocused,
+      isNeedEffect: !isReadOnly && !isDisabled && needFieldStyle ? true : false
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${needFieldStyle ? style.highlightSpace : ''} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      "data-title": isDisabled ? title : null,
+      onClick: this.handleParentClick
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,
@@ -103,7 +154,7 @@ export default class TextBoxField extends PureComponent {
       text: labelName,
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''} ${style.labelindex}`,
       htmlFor: uniqueId,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps, {
@@ -122,11 +173,11 @@ export default class TextBoxField extends 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,
@@ -147,7 +198,7 @@ export default class TextBoxField extends PureComponent {
       type: errorType,
       htmlFor: uniqueId,
       dataId: `${dataId}_ValidationRuleMessage`
-    }, ValidationMessageProps2))));
+    }, ValidationMessageProps2)))));
   }
 }
 TextBoxField.propTypes = propTypes;

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

@@ -12,5 +12,6 @@ export const defaultProps = {
   isClickable: false,
   needReadOnlyStyle: true,
   customProps: {},
+  needFieldStyle: false,
   ...FieldCommonDefaultProps()
 };

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

@@ -10,6 +10,7 @@ import Textarea from '@zohodesk/components/lib/Textarea/Textarea';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
+import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
 
 /**** CSS ****/
 import style from '../Fields.module.css';
@@ -21,6 +22,13 @@ export default class TextareaField extends PureComponent {
     this.handleGetRef = this.handleGetRef.bind(this);
     // this.handleLabelClick = this.handleLabelClick.bind(this);
     this.getNextId = getUniqueId(this);
+    this.handleParentClick = this.handleParentClick.bind(this);
+    this.handleFocusToggle = this.handleFocusToggle.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.state = {
+      isFocused: false
+    };
   }
   handleChange(value) {
     let {
@@ -29,13 +37,6 @@ export default class TextareaField extends PureComponent {
     } = this.props;
     onChange && onChange(id, value);
   }
-  handleBlur(value) {
-    let {
-      id,
-      onBlur
-    } = this.props;
-    onBlur && onBlur(id, value);
-  }
   handleGetRef(el) {
     let {
       getRef,
@@ -44,6 +45,41 @@ export default class TextareaField extends PureComponent {
     this.textarea = el;
     getRef && getRef(el, id);
   }
+  handleParentClick() {
+    const {
+      needFieldStyle
+    } = this.props;
+    if (needFieldStyle) {
+      this.textarea.focus();
+    }
+  }
+  handleFocusToggle(value) {
+    const {
+      needFieldStyle
+    } = this.props;
+    if (needFieldStyle) {
+      this.setState({
+        isFocused: value
+      });
+    }
+  }
+  handleFocus(e) {
+    const {
+      onFocus,
+      needFieldStyle
+    } = this.props;
+    needFieldStyle && this.handleFocusToggle(true);
+    onFocus && onFocus(e);
+  }
+  handleBlur(value) {
+    let {
+      id,
+      onBlur,
+      needFieldStyle
+    } = this.props;
+    needFieldStyle && this.handleFocusToggle(false);
+    onBlur && onBlur(id, value);
+  }
 
   // handleLabelClick() {
   //   let { isFocusOnLabelClick } = this.props;
@@ -82,7 +118,8 @@ export default class TextareaField extends PureComponent {
       lockedInfoText,
       isLocked,
       customProps,
-      renderLabelProps
+      renderLabelProps,
+      needFieldStyle
     } = this.props;
     const {
       LabelProps = {},
@@ -91,9 +128,17 @@ export default class TextareaField extends PureComponent {
       ValidationMessageProps2 = {}
     } = customProps;
     let uniqueId = htmlId ? htmlId : this.getNextId();
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+    const {
+      isFocused
+    } = this.state;
+    return /*#__PURE__*/React.createElement(RippleEffect, {
+      hoverType: "bg",
+      isActive: isFocused,
+      isNeedEffect: needFieldStyle ? true : false
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${needFieldStyle ? style.highlightSpace : ''} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      "data-title": isDisabled ? title : null,
+      onClick: this.handleParentClick
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,
@@ -122,6 +167,7 @@ export default class TextareaField extends PureComponent {
       placeHolder: placeHolder,
       dataId: `property(${dataId})`,
       onBlur: this.handleBlur,
+      onFocus: this.handleFocus,
       borderColor: borderColor,
       needEffect: isReadOnly || isDisabled ? false : true,
       resize: "vertical"
@@ -144,7 +190,7 @@ export default class TextareaField extends PureComponent {
       type: errorType,
       htmlFor: uniqueId,
       dataId: `${dataId}_ValidationRuleMessage`
-    }, ValidationMessageProps2))));
+    }, ValidationMessageProps2)))));
   }
 }
 TextareaField.propTypes = propTypes;

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

@@ -10,5 +10,6 @@ export const defaultProps = {
   labelPalette: 'default',
   labelCustomClass: '',
   customProps: {},
+  // needFieldStyle:true,
   ...FieldCommonDefaultProps()
 };

package/es/list/Icons/DeleteIcon.js

@@ -16,7 +16,8 @@ export default class DeleteComponent extends React.Component {
       onClick: onClick,
       className: `${style.iconStyle} ${style.redHover} ${className ? className : ''}`,
       "data-id": dataId,
-      "data-title": dataTitle
+      "data-title": dataTitle,
+      tabIndex: 0
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-delete",
       iconClass: iconClass ? iconClass : '',

package/es/list/Icons/SmartIcon.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import { SmartIcon_propTypes } from './props/propTypes';
 import style from './Icons.module.css';
 import Icon from '@zohodesk/icons/lib/Icon';
-import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 export default class SmartIcon extends Component {
   render() {
     let {