@zohodesk/dot 1.4.5 → 1.4.7

package/es/v1/form/fields/CheckBoxField/CheckBoxField.js

@@ -1,20 +1,18 @@
 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); }
-
 /**** Libraries ****/
 import React, { memo } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-/**** Components ****/
 
+/**** Components ****/
 import Label from '@zohodesk/components/es/v1/Label/Label';
 import CheckBox from '@zohodesk/components/es/v1/CheckBox/CheckBox';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import FieldContainer from '../FieldContainer/FieldContainer';
-/**** CSS ****/
 
+/**** CSS ****/
 import style from '../../../../form/fields/Fields.module.css';
-
 function CheckBoxField(props) {
   let {
     labelName,
@@ -69,19 +67,15 @@ function CheckBoxField(props) {
     variant: isDirectCol ? 'default' : 'primary',
     dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
   }, LabelProps)));
-
   function handleChange(value) {
     onChange && onChange(id, value);
   }
-
   function handleGetRef(el) {
     getRef && getRef(el, id);
   }
-
   function handleLabelClick() {
     handleChange(!checked);
   }
-
   return /*#__PURE__*/React.createElement("div", {
     className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
     "data-title": isDisabled ? title : null,
@@ -115,7 +109,6 @@ function CheckBoxField(props) {
     dataId: `${dataId}_ValidationRuleMessage`
   }, ValidationMessageProps2))));
 }
-
 CheckBoxField.propTypes = propTypes;
 CheckBoxField.defaultProps = defaultProps;
 const MemoizedCheckBoxField = /*#__PURE__*/memo(CheckBoxField);

package/es/v1/form/fields/CurrencyField/CurrencyField.js

@@ -1,20 +1,18 @@
 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); }
-
 /**** Libraries ****/
 import React, { memo, useRef, useState } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-/**** Components ****/
 
+/**** Components ****/
 import Label from '@zohodesk/components/es/v1/Label/Label';
 import TextBox from '@zohodesk/components/es/v1/TextBox/TextBox';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
-/**** CSS ****/
 
+/**** CSS ****/
 import style from '../../../../form/fields/Fields.module.css';
-
 function CurrencyField(props) {
   let {
     labelName,
@@ -66,34 +64,27 @@ function CurrencyField(props) {
   const [isActive, setActive] = useState(false);
   const textBox = useRef(null);
   let formatValue = value;
-
   if (!isActive) {
     formatValue = formatCurrency(value, userCurrencyType);
   } else {
     formatValue = value;
   }
-
   let uniqueId = htmlId ? htmlId : getNextId();
-
   function handleChange(value) {
     onChange && onChange(id, value);
   }
-
   function handleGetRef(el) {
     textBox.current = el;
     getRef && getRef(el, id);
   }
-
   function handleonFocus() {
     setActive(true);
     onFocus && onFocus();
   }
-
   function handleonBlur() {
     setActive(false);
     onBlur && onBlur();
   }
-
   return /*#__PURE__*/React.createElement("div", {
     className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
     "data-title": isDisabled ? title : null,
@@ -147,7 +138,6 @@ function CurrencyField(props) {
     dataId: `${dataId}_ValidationRuleMessage`
   }, ValidationMessageProps2))));
 }
-
 CurrencyField.propTypes = propTypes;
 CurrencyField.defaultProps = defaultProps;
 const MemoizedCurrencyField = /*#__PURE__*/memo(CurrencyField);

package/es/v1/form/fields/DateField/DateField.js

@@ -1,20 +1,18 @@
 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); }
-
 /**** Libraries ****/
 import React, { memo, useEffect, useRef } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-/**** Components ****/
 
+/**** Components ****/
 import Label from '@zohodesk/components/es/v1/Label/Label';
 import DateWidget from '@zohodesk/components/es/v1/DateTime/DateWidget';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
-/**** CSS ****/
 
+/**** CSS ****/
 import style from '../../../../form/fields/Fields.module.css';
-
 function DateField(props) {
   let {
     labelName,
@@ -65,16 +63,13 @@ function DateField(props) {
   const dateField = useRef(null);
   const getNextId = useUniqueId();
   let getAriaId = htmlId ? htmlId : getNextId();
-
   function handleChange(value) {
     onChange && onChange(id, value);
   }
-
   function handleGetRef(el) {
     dateField.current = el;
     getRef && getRef(el, id);
   }
-
   function openPopup() {
     if (openPopupOnMount) {
       setTimeout(() => {
@@ -83,17 +78,14 @@ function DateField(props) {
       }, 100);
     }
   }
-
   useEffect(() => {
     openPopup();
   }, [openPopupOnMount]);
-
   function handleLabelClick() {
     if (isFocusOnLabelClick && dateField.current && dateField.current.focus) {
       dateField.current.focus();
     }
   }
-
   return /*#__PURE__*/React.createElement("div", {
     className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
     "data-title": isDisabled ? title : null,
@@ -154,7 +146,6 @@ function DateField(props) {
     dataId: `${dataId}_ValidationRuleMessage`
   }, ValidationMessageProps2))));
 }
-
 DateField.propTypes = propTypes;
 DateField.defaultProps = defaultProps;
 const MemoizedDateField = /*#__PURE__*/memo(DateField);

package/es/v1/form/fields/FieldContainer/FieldContainer.js

@@ -2,16 +2,13 @@
 import React, { memo } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-/**** Components ****/
 
+/**** Components ****/
 import { Container } from '@zohodesk/components/es/v1/Layout';
 /**** Icons ****/
-
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
-
 import style from '../../../../form/fields/Fields.module.css';
-
 function FieldContainer(props) {
   let {
     children,
@@ -56,7 +53,6 @@ function FieldContainer(props) {
     className: style.ePhiTag
   }, ePhiText) : null, renderEnd ? renderEnd() : null);
 }
-
 FieldContainer.propTypes = propTypes;
 FieldContainer.defaultProps = defaultProps;
 const MemoizedFieldContainer = /*#__PURE__*/memo(FieldContainer);

package/es/v1/form/fields/FieldContainer/props/defaultProps.js

@@ -1,5 +1,6 @@
 import { FieldCommonDefaultProps } from '../../props/FieldCommonDefaultProps';
-export const defaultProps = { ...FieldCommonDefaultProps(),
+export const defaultProps = {
+  ...FieldCommonDefaultProps(),
   renderProps: {},
   alignContainer: 'vertical',
   dataSelectorId: 'fieldContainer'

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

@@ -1,20 +1,18 @@
 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); }
-
 /**** Libraries ****/
 import React, { memo, useRef } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-/**** Components ****/
 
+/**** Components ****/
 import Label from '@zohodesk/components/es/v1/Label/Label';
 import MultiSelect from '@zohodesk/components/es/v1/MultiSelect/MultiSelect';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
-/** CSS */
 
+/** CSS */
 import style from '../../../../form/fields/Fields.module.css';
-
 function MultiSelectField(props) {
   let {
     labelName,
@@ -77,31 +75,28 @@ function MultiSelectField(props) {
   const multiSelectBox = useRef(null);
   let isDarkPalette = palette === 'dark';
   let uniqueId = htmlId ? htmlId : getNextId();
-
   function handleChange(selectedValueIds, selectedValues) {
     onChange && onChange(id, selectedValueIds, selectedValues);
   }
-
   function handleDropBoxOpen() {
     return onDropBoxOpen && onDropBoxOpen(id);
   }
-
   function handleSearch(searchStr) {
     return onSearch && onSearch(searchStr, {
       id
     });
   }
-
   function handleGetNextOptions(searchStr) {
     return getNextOptions && getNextOptions(searchStr, {
       id
     });
   }
-
   function handleGetRef(el) {
     multiSelectBox.current = el;
     getRef && getRef(el, id);
-  } // handleLabelClick() {
+  }
+
+  // handleLabelClick() {
   //   let { isFocusOnLabelClick } = this.props;
   //   if (
   //     isFocusOnLabelClick &&
@@ -112,7 +107,6 @@ function MultiSelectField(props) {
   //   }
   // }
 
-
   return /*#__PURE__*/React.createElement("div", {
     className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
     "data-title": isDisabled ? title : null,
@@ -126,7 +120,8 @@ function MultiSelectField(props) {
     text: labelName,
     id: id,
     size: fieldSize === 'small' ? 'small' : 'medium',
-    palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
+    palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette
+    // onClick={this.handleLabelClick}
     ,
     customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
     dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
@@ -179,7 +174,6 @@ function MultiSelectField(props) {
     htmlFor: uniqueId
   }, ValidationMessageProps2)));
 }
-
 MultiSelectField.propTypes = propTypes;
 MultiSelectField.defaultProps = defaultProps;
 const MemoizedMultiSelectField = /*#__PURE__*/memo(MultiSelectField);

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

@@ -1,20 +1,18 @@
 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); }
-
 /**** Libraries ****/
 import React, { memo, useState, useRef } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-/**** Components ****/
 
+/**** Components ****/
 import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import TextBoxField from '../TextBoxField/TextBoxField';
 import Link from '../../../Link/Link';
-/**** CSS ****/
 
+/**** CSS ****/
 import style from '../../../../form/fields/Fields.module.css';
 import { formatPhoneUrl } from '../../../../utils/General';
-
 function PhoneField(props) {
   let {
     labelName,
@@ -69,36 +67,29 @@ function PhoneField(props) {
     entity_module: 'Requests'
   };
   let phoneValue = value;
-
   if (isActive) {
     phoneValue = value;
   } else {
     phoneValue = formatPhoneUrl(value);
   }
-
   function handleChange(id, value) {
     onChange && onChange(id, value);
   }
-
   function handleGetRef(el) {
     textBoxElem.current = el;
     getRef && getRef(el, id);
   }
-
   function focusInput(e) {
     textBoxElem.current.focus();
   }
-
   function handleFocus() {
     setActive(true);
     onFocus && onFocus();
   }
-
   function handleBlur() {
     setActive(false);
     onBlur && onBlur();
   }
-
   return /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     className: `${style.container} ${isDisabled ? style.disabled : ''}`,
@@ -151,7 +142,6 @@ function PhoneField(props) {
     size: "14"
   })) : null));
 }
-
 PhoneField.propTypes = propTypes;
 PhoneField.defaultProps = defaultProps;
 const MemoizedPhoneField = /*#__PURE__*/memo(PhoneField);

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

@@ -1,19 +1,17 @@
 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); }
-
 /**** Libraries ****/
 import React, { memo } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-/**** Components ****/
 
+/**** Components ****/
 import Icon from '@zohodesk/icons/es/Icon';
 import Label from '@zohodesk/components/es/v1/Label/Label';
 import Radio from '@zohodesk/components/es/v1/Radio/Radio';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-/** Css */
 
+/** Css */
 import style from '../../../../form/fields/Fields.module.css';
-
 const RadioField = props => {
   const {
     labelName,
@@ -46,11 +44,9 @@ const RadioField = props => {
     ValidationMessageProps1 = {},
     ValidationMessageProps2 = {}
   } = customProps;
-
   const handleChange = value => {
     onChange && onChange(id, value);
   };
-
   return /*#__PURE__*/React.createElement("div", {
     className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
     "data-title": isDisabled ? title : null,
@@ -106,7 +102,6 @@ const RadioField = props => {
     dataId: `${dataId}_ValidationRuleMessage`
   }, ValidationMessageProps2)));
 };
-
 RadioField.propTypes = propTypes;
 RadioField.defaultProps = defaultProps;
 const MemoizedRadioField = /*#__PURE__*/memo(RadioField);

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

@@ -1,22 +1,20 @@
 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); }
-
 /**** Libraries ****/
 import React, { memo } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-/**** Components ****/
 
+/**** Components ****/
 import Label from '@zohodesk/components/es/v1/Label/Label';
 import Select from '@zohodesk/components/es/v1/Select/Select';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
+
 /**** props ****/
 
 /** CSS */
-
 import style from '../../../../form/fields/Fields.module.css';
-
 const SelectField = props => {
   const {
     labelName,
@@ -77,21 +75,20 @@ const SelectField = props => {
   } = customProps;
   const getNextId = useUniqueId();
   let uniqueId = htmlId ? htmlId : getNextId();
-
   const handleChange = (selectedId, selectedVal) => {
     onChange && selectedValue !== selectedId && onChange(id, selectedId, selectedVal);
   };
-
   const handleGetRef = el => {
     getRef && getRef(el, id);
-  }; // handleLabelClick() {
+  };
+
+  // handleLabelClick() {
   //   let { isFocusOnLabelClick } = this.props;
   //   if (isFocusOnLabelClick && this.selectBox && this.selectBox.focus) {
   //     this.selectBox.focus();
   //   }
   // }
 
-
   return /*#__PURE__*/React.createElement("div", {
     className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
     "data-title": isDisabled ? title : null,
@@ -158,7 +155,6 @@ const SelectField = props => {
     dataId: `${dataId}_ValidationRuleMessage`
   }, ValidationMessageProps2)));
 };
-
 SelectField.propTypes = propTypes;
 SelectField.defaultProps = defaultProps;
 const MemoizedSelectField = /*#__PURE__*/memo(SelectField);

package/es/v1/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -27,7 +27,6 @@ export default class TagsMultiSelect extends React.Component {
     this.getSelectedItemRef = this.getSelectedItemRef.bind(this);
     this.textInputRef = this.textInputRef.bind(this);
   }
-
   textInputRef(el) {
     const {
       getTextInputRef
@@ -35,7 +34,6 @@ export default class TagsMultiSelect extends React.Component {
     this.inputEl = el;
     getTextInputRef && getTextInputRef(el);
   }
-
   onScroll() {
     let {
       onScroll,
@@ -46,18 +44,15 @@ export default class TagsMultiSelect extends React.Component {
     let {
       containerRef
     } = this;
-
     if (findScrollEnd(this.containerRef) && !noMoreData) {
       onScroll(name);
       let selectItemRef = this[`selectedList_${searchList.length - 1}`];
       scrollTo(containerRef, selectItemRef);
     }
   }
-
   getSelectedItemRef(el, index) {
     this[`selectedList_${index}`] = el;
   }
-
   componentDidUpdate(prevProps) {
     let {
       isTagListLoading,
@@ -65,7 +60,6 @@ export default class TagsMultiSelect extends React.Component {
       isPopupReady,
       selectSearchIndex
     } = this.props;
-
     if (prevProps.isTagListLoading !== isTagListLoading && !isTagListLoading || isPopupReady && prevProps.tagsList.length !== tagsList.length) {
       setTimeout(() => {
         if (this.inputEl) {
@@ -73,7 +67,6 @@ export default class TagsMultiSelect extends React.Component {
         }
       }, 300);
     }
-
     if (selectSearchIndex != prevProps.selectSearchIndex) {
       let selectItemRef = this[`selectedList_${selectSearchIndex}`];
       let {
@@ -82,23 +75,19 @@ export default class TagsMultiSelect extends React.Component {
       scrollTo(containerRef, selectItemRef);
     }
   }
-
   emptySearchSVG() {
     return /*#__PURE__*/React.createElement(EmptySearch, {
       size: "small"
     });
   }
-
   onShowAllClick() {
     this.setState({
       showAll: !this.state.showAll
     });
   }
-
   getContainerRef(ele) {
     this.containerRef = ele;
   }
-
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -109,7 +98,6 @@ export default class TagsMultiSelect extends React.Component {
       }])
     };
   }
-
   render() {
     let {
       searchList,
@@ -282,10 +270,11 @@ export default class TagsMultiSelect extends React.Component {
       })))))));
     }) : null);
   }
-
 }
 TagsMultiSelect.propTypes = propTypes;
-TagsMultiSelect.defaultProps = defaultProps; // if (__DOCS__) {
+TagsMultiSelect.defaultProps = defaultProps;
+
+// if (__DOCS__) {
 //   TagsMultiSelect.docs = {
 //     componentGroup: 'TagsMultiSelect'
 //   };

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

@@ -1,5 +1,4 @@
 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); }
-
 import React, { useState, useEffect } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -9,11 +8,10 @@ import Popup from '@zohodesk/components/es/v1/Popup/Popup';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import TagsMultiSelect from '../TagsMultiSelect/TagsMultiSelect';
 import FieldContainer from '../FieldContainer/FieldContainer';
-/**** css ****/
 
+/**** css ****/
 import fieldStyle from '../../../../form/fields/Fields.module.css';
 import style from '../../../../form/fields/TagsMultiSelectField/TagsMultiSelectField.module.css';
-
 const TagsMultiSelectField = props => {
   const [selectedSuggestionIndex, updateSelectedSuggestionIndex] = useState(0);
   const [isValueChanged, updateValueChangedState] = useState(false);
@@ -78,14 +76,12 @@ const TagsMultiSelectField = props => {
     options
   } = fieldProperties;
   options = options || [];
-
   const handleKeyUp = event => {
     let {
       keyCode
     } = event;
     onAdd = typeof onAdd !== 'function' ? () => {} : onAdd;
     onDelete = typeof onDelete !== 'function' ? () => {} : onDelete;
-
     if (keyCode === 13) {
       if (selectedSuggestionIndex > -1 && options.length) {
         if (options.length === 1 && options[0].isNew) {
@@ -102,24 +98,19 @@ const TagsMultiSelectField = props => {
           name: searchValue
         }, event);
       }
-
       changeSearchValue('');
       updateSelectedSuggestionIndex(prevSelectedSuggestionIndex => {
         let newIndex = 0;
-
         if (options.length) {
           if (options.length === 1 && options[0].isNew) {
             return newIndex;
           }
-
           newIndex = prevSelectedSuggestionIndex === options.length - 1 ? options.length - 2 : prevSelectedSuggestionIndex;
         }
-
         return newIndex;
       });
     } else if (keyCode === 188 && !event.shiftKey) {
       searchValue = searchValue.replace(',', '');
-
       if (options.length === 1 && options[0].isNew) {
         onAdd({
           name: searchValue
@@ -140,21 +131,17 @@ const TagsMultiSelectField = props => {
       let valueLength = value.length;
       value.length ? onDelete(value[valueLength - 1].name, event) : undefined;
     }
-
     updateValueChangedState(false);
   };
-
   const handleChange = (searchValue, event) => {
     updateValueChangedState(true);
     updateSelectedSuggestionIndex(0);
     changeSearchValue(searchValue);
     typeof onChange === 'function' && onChange(searchValue, event);
-
     if (!isPopupOpen) {
       togglePopup(event);
     }
   };
-
   const handleTogglePopup = event => {
     if (isPopupReady) {
       removeClose(event);
@@ -164,20 +151,16 @@ const TagsMultiSelectField = props => {
       updateSelectedSuggestionIndex(0);
     }
   };
-
   const handleAdd = value => {
     changeSearchValue('');
     typeof onAdd === 'function' && onAdd(value);
   };
-
   const documentClick = () => {
     changeSearchValue('');
   };
-
   const renderEnd = () => {
     return children ? children : null;
   };
-
   useEffect(() => {
     window.addEventListener('click', documentClick);
     return () => {
@@ -248,13 +231,14 @@ const TagsMultiSelectField = props => {
     htmlFor: htmlId
   }, ValidationMessageProps)));
 };
-
 TagsMultiSelectField.propTypes = propTypes;
 TagsMultiSelectField.defaultProps = defaultProps;
 const TagsMultiSelectField_Component = Popup(TagsMultiSelectField);
 TagsMultiSelectField_Component.defaultProps = TagsMultiSelectField.defaultProps;
 TagsMultiSelectField_Component.propTypes = TagsMultiSelectField.propTypes;
-export default TagsMultiSelectField_Component; // if (__DOCS__) {
+export default TagsMultiSelectField_Component;
+
+// if (__DOCS__) {
 //   TagsMultiSelectField.docs = {
 //     componentGroup: 'TagsMultiSelectField'
 //   };