@zohodesk/dot 1.0.0-temp-112 → 1.0.0-temp-114

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

@@ -10,7 +10,6 @@ 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 ****/
 
@@ -23,17 +22,6 @@ 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 {
@@ -48,65 +36,9 @@ export default class SelectField extends PureComponent {
       getRef,
       id
     } = this.props;
-    this.textBox = el;
+    this.selectBox = 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;
@@ -163,8 +95,6 @@ export default class SelectField extends PureComponent {
       iconOnHover,
       customProps,
       renderLabelProps,
-      handleDropBoxOpen,
-      needFieldStyle,
       ariaLabelledby
     } = this.props;
     const {
@@ -174,19 +104,9 @@ export default class SelectField extends PureComponent {
       ValidationMessageProps2 = {}
     } = customProps;
     let uniqueId = htmlId ? htmlId : this.getNextId();
-    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
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      "data-title": isDisabled ? title : null
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,
@@ -196,20 +116,18 @@ 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 : ''} ${style.labelindex}`
-      // htmlFor={uniqueId}
-      ,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      htmlFor: uniqueId,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps, {
       id: uniqueId
     }))), /*#__PURE__*/React.createElement("div", {
-      className: `${needFieldStyle ? style.highlightPosition : style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''} ${fieldClass ? fieldClass : ''}`
+      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''} ${fieldClass ? fieldClass : ''}`
     }, /*#__PURE__*/React.createElement(Select, _extends({
       options: options,
       selectedValue: selectedValue,
       onChange: this.handleChange,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
+      onFocus: onFocus,
       getRef: this.handleGetRef,
       needSearch: needSearch,
       emptyMessage: emptyMessage,
@@ -229,17 +147,12 @@ 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,
-      needPosition: needFieldStyle ? true : false,
-      getPopupHandlers: this.getPopupHandlers,
-      onDropBoxOpen: this.handleDropBoxOpen,
-      onDropBoxClose: this.handleDropBoxClose
+      iconOnHover: iconOnHover
     }, SelectProps, {
       ariaLabelledby: uniqueId
     }), children ? children : null)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
@@ -254,7 +167,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,6 +13,5 @@ export const defaultProps = {
   isDefaultSelectValue: true,
   placeHolder: '',
   customProps: {},
-  needFieldStyle: false,
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.module.css

@@ -1,107 +1,107 @@
-.tag {
-  max-width: 100%;
-}
-[dir=ltr] .moreLess, [dir=ltr] .tag {
-  margin: 0 var(--zd_size6) var(--zd_size6) 0;
-}
-[dir=rtl] .moreLess, [dir=rtl] .tag {
-  margin: 0 0 var(--zd_size6) var(--zd_size6);
-}
-.input {
-  height: var(--zd_size20);
-  width: 100%;
-  margin-bottom: var(--zd_size4);
-}
-.viewpopNew {
-  max-height: var(--zd_size250);
-}
-.tagDiv {
-  max-height: var(--zd_size160);
-  margin-top: var(--zd_size5);
-}
-.hasBorder {
-  transition: border var(--zd_transition2) linear 0s;
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-}
-.borderColor_transparent {
-  border-bottom-color: var(--zdt_tagsmultiselect_transparent_border);
-}
-.borderColor_transparent:hover {
-  border-bottom-color: var(--zdt_tagsmultiselect_transparent_hover_border);
-}
-.borderColor_transparent.active {
-  border-bottom-color: var(--zdt_tagsmultiselect_transparent_active_border);
-}
-.borderColor_default {
-  border-bottom-color: var(--zdt_tagsmultiselect_default_border);
-}
-.borderColor_default:hover {
-  border-bottom-color: var(--zdt_tagsmultiselect_default_hover_border);
-}
-.borderColor_default.active {
-  border-bottom-color: var(--zdt_tagsmultiselect_default_active_border);
-}
-.borderColor_dark {
-  border-bottom-color: var(--zdt_tagsmultiselect_dark_border);
-}
-.borderColor_dark:hover {
-  border-bottom-color: var(--zdt_tagsmultiselect_dark_hover_border);
-}
-.borderColor_dark.active {
-  border-bottom-color: var(--zdt_tagsmultiselect_dark_active_border);
-}
-.moreLess {
-  color: var(--zdt_tagsmultiselect_more_text);
-  font-size: var(--zd_font_size13);
-  cursor: pointer;
-}
-.moreLess:hover {
-  color: var(--zdt_tagsmultiselect_more_hover_text);
-}
-.inputWrapper {
-  position: relative;
-  max-width: 100%;
-  min-width: var(--zd_size5);
-  font-size: 0;
-}
-.newTagLabel {
-  color: var(--zdt_tagsmultiselect_labelt_text);
-  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
-}
-[dir=ltr] .newTagLabel {
-  margin-right: var(--zd_size5);
-}
-[dir=rtl] .newTagLabel {
-  margin-left: var(--zd_size5);
-}
-.dotted {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-.dropdown {
-  margin-top: var(--zd_size1);
-}
-.custmSpan {
-  height: var(--zd_size25);
-  display: inline-block;
-  vertical-align: middle;
-  opacity: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  max-width: 100%;
-  visibility: hidden;
-}
-.custmInp {
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-[dir=ltr] .custmInp {
-  left: 0;
-}
-[dir=rtl] .custmInp {
-  right: 0;
-}
-.newTagText {
-  color: var(--zdt_tagsmultiselect_more_text);
-}
+.tag {
+  max-width: 100%;
+}
+[dir=ltr] .moreLess, [dir=ltr] .tag {
+  margin: 0 var(--zd_size6) var(--zd_size6) 0;
+}
+[dir=rtl] .moreLess, [dir=rtl] .tag {
+  margin: 0 0 var(--zd_size6) var(--zd_size6);
+}
+.input {
+  height: var(--zd_size20);
+  width: 100%;
+  margin-bottom: var(--zd_size4);
+}
+.viewpopNew {
+  max-height: var(--zd_size250);
+}
+.tagDiv {
+  max-height: var(--zd_size160);
+  margin-top: var(--zd_size5);
+}
+.hasBorder {
+  transition: border var(--zd_transition2) linear 0s;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+}
+.borderColor_transparent {
+  border-bottom-color: var(--zdt_tagsmultiselect_transparent_border);
+}
+.borderColor_transparent:hover {
+  border-bottom-color: var(--zdt_tagsmultiselect_transparent_hover_border);
+}
+.borderColor_transparent.active {
+  border-bottom-color: var(--zdt_tagsmultiselect_transparent_active_border);
+}
+.borderColor_default {
+  border-bottom-color: var(--zdt_tagsmultiselect_default_border);
+}
+.borderColor_default:hover {
+  border-bottom-color: var(--zdt_tagsmultiselect_default_hover_border);
+}
+.borderColor_default.active {
+  border-bottom-color: var(--zdt_tagsmultiselect_default_active_border);
+}
+.borderColor_dark {
+  border-bottom-color: var(--zdt_tagsmultiselect_dark_border);
+}
+.borderColor_dark:hover {
+  border-bottom-color: var(--zdt_tagsmultiselect_dark_hover_border);
+}
+.borderColor_dark.active {
+  border-bottom-color: var(--zdt_tagsmultiselect_dark_active_border);
+}
+.moreLess {
+  color: var(--zdt_tagsmultiselect_more_text);
+  font-size: var(--zd_font_size13);
+  cursor: pointer;
+}
+.moreLess:hover {
+  color: var(--zdt_tagsmultiselect_more_hover_text);
+}
+.inputWrapper {
+  position: relative;
+  max-width: 100%;
+  min-width: var(--zd_size5);
+  font-size: 0;
+}
+.newTagLabel {
+  color: var(--zdt_tagsmultiselect_labelt_text);
+  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
+}
+[dir=ltr] .newTagLabel {
+  margin-right: var(--zd_size5);
+}
+[dir=rtl] .newTagLabel {
+  margin-left: var(--zd_size5);
+}
+.dotted {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+.dropdown {
+  margin-top: var(--zd_size1);
+}
+.custmSpan {
+  height: var(--zd_size25);
+  display: inline-block;
+  vertical-align: middle;
+  opacity: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 100%;
+  visibility: hidden;
+}
+.custmInp {
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+[dir=ltr] .custmInp {
+  left: 0;
+}
+[dir=rtl] .custmInp {
+  right: 0;
+}
+.newTagText {
+  color: var(--zdt_tagsmultiselect_more_text);
+}

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.module.css

@@ -1,9 +1,9 @@
-.count {
-  color: var(--zdt_tagsmultiselectField_count_text);
-  font-size: var(--zd_font_size12);
-  word-break: break-word;
-}[dir=ltr] .count {
-  margin-left: var(--zd_size4);
-}[dir=rtl] .count {
-  margin-right: var(--zd_size4);
-}
+.count {
+  color: var(--zdt_tagsmultiselectField_count_text);
+  font-size: var(--zd_font_size12);
+  word-break: break-word;
+}[dir=ltr] .count {
+  margin-left: var(--zd_size4);
+}[dir=rtl] .count {
+  margin-right: var(--zd_size4);
+}

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

@@ -10,7 +10,6 @@ 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';
@@ -21,13 +20,6 @@ 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 {
@@ -52,40 +44,6 @@ 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,
@@ -122,8 +80,7 @@ export default class TextBoxField extends PureComponent {
       ePhiData,
       children,
       customProps,
-      renderLabelProps,
-      needFieldStyle
+      renderLabelProps
     } = this.props;
     const {
       LabelProps = {},
@@ -132,17 +89,9 @@ export default class TextBoxField extends PureComponent {
       ValidationMessageProps2 = {}
     } = customProps;
     let uniqueId = htmlId ? htmlId : this.getNextId();
-    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
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      "data-title": isDisabled ? title : null
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,
@@ -154,7 +103,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 : ''} ${style.labelindex}`,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps, {
@@ -173,11 +122,11 @@ export default class TextBoxField extends PureComponent {
       value: value,
       onChange: this.handleChange,
       dataId: dataId,
-      onBlur: this.handleBlur,
+      onBlur: onBlur,
       onKeyDown: onKeyDown,
       placeHolder: placeHolder,
       borderColor: borderColor,
-      onFocus: this.handleFocus,
+      onFocus: onFocus,
       isDisabled: isDisabled,
       needEffect: isReadOnly || isDisabled ? false : true,
       isClickable: isClickable,
@@ -198,7 +147,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,6 +12,5 @@ export const defaultProps = {
   isClickable: false,
   needReadOnlyStyle: true,
   customProps: {},
-  needFieldStyle: false,
   ...FieldCommonDefaultProps()
 };