@zohodesk/dot 1.4.7 → 1.4.9

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

@@ -1,18 +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, useRef, useState } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-
 /**** 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 ****/
+
 import style from '../../../../form/fields/Fields.module.css';
+
 function CurrencyField(props) {
   let {
     labelName,
@@ -64,27 +66,34 @@ 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,
@@ -138,6 +147,7 @@ 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,18 +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, useEffect, useRef } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-
 /**** 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 ****/
+
 import style from '../../../../form/fields/Fields.module.css';
+
 function DateField(props) {
   let {
     labelName,
@@ -63,13 +65,16 @@ 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(() => {
@@ -78,14 +83,17 @@ 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,
@@ -146,6 +154,7 @@ 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,13 +2,16 @@
 import React, { memo } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-
 /**** 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,
@@ -53,6 +56,7 @@ 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,6 +1,5 @@
 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,18 +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, useRef } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-
 /**** 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 */
+
 import style from '../../../../form/fields/Fields.module.css';
+
 function MultiSelectField(props) {
   let {
     labelName,
@@ -75,28 +77,31 @@ 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 &&
@@ -107,6 +112,7 @@ function MultiSelectField(props) {
   //   }
   // }
 
+
   return /*#__PURE__*/React.createElement("div", {
     className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
     "data-title": isDisabled ? title : null,
@@ -120,8 +126,7 @@ 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`,
@@ -174,6 +179,7 @@ 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,18 +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, useState, useRef } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-
 /**** 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 ****/
+
 import style from '../../../../form/fields/Fields.module.css';
 import { formatPhoneUrl } from '../../../../utils/General';
+
 function PhoneField(props) {
   let {
     labelName,
@@ -67,29 +69,36 @@ 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 : ''}`,
@@ -142,6 +151,7 @@ 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,17 +1,19 @@
 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 ****/
+
 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 */
+
 import style from '../../../../form/fields/Fields.module.css';
+
 const RadioField = props => {
   const {
     labelName,
@@ -44,9 +46,11 @@ 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,
@@ -102,6 +106,7 @@ 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,20 +1,22 @@
 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 ****/
+
 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,
@@ -75,20 +77,21 @@ 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,
@@ -155,6 +158,7 @@ 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,6 +27,7 @@ export default class TagsMultiSelect extends React.Component {
     this.getSelectedItemRef = this.getSelectedItemRef.bind(this);
     this.textInputRef = this.textInputRef.bind(this);
   }
+
   textInputRef(el) {
     const {
       getTextInputRef
@@ -34,6 +35,7 @@ export default class TagsMultiSelect extends React.Component {
     this.inputEl = el;
     getTextInputRef && getTextInputRef(el);
   }
+
   onScroll() {
     let {
       onScroll,
@@ -44,15 +46,18 @@ 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,
@@ -60,6 +65,7 @@ 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) {
@@ -67,6 +73,7 @@ export default class TagsMultiSelect extends React.Component {
         }
       }, 300);
     }
+
     if (selectSearchIndex != prevProps.selectSearchIndex) {
       let selectItemRef = this[`selectedList_${selectSearchIndex}`];
       let {
@@ -75,19 +82,23 @@ 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
@@ -98,6 +109,7 @@ export default class TagsMultiSelect extends React.Component {
       }])
     };
   }
+
   render() {
     let {
       searchList,
@@ -270,11 +282,10 @@ 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,4 +1,5 @@
 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';
@@ -8,10 +9,11 @@ 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 ****/
+
 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);
@@ -76,12 +78,14 @@ 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) {
@@ -98,19 +102,24 @@ 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
@@ -131,17 +140,21 @@ 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);
@@ -151,16 +164,20 @@ 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 () => {
@@ -231,14 +248,13 @@ 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'
 //   };