@zohodesk/dot 1.2.4 → 1.3.0-temp-158

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

@@ -1,47 +1,90 @@
 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, { PureComponent } from 'react';
+import React, { memo } from 'react';
 import { defaultProps } from '../../../../form/fields/SelectField/props/defaultProps';
 import { propTypes } from '../../../../form/fields/SelectField/props/propTypes';
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
-import Select from '@zohodesk/components/lib/Select/Select';
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import Select from '@zohodesk/components/es/v1/Select/Select';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /**** props ****/
 
 /** CSS */
 
 import style from '../../../../form/fields/Fields.module.css';
-export default class SelectField extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleGetRef = this.handleGetRef.bind(this); // this.handleLabelClick = this.handleLabelClick.bind(this);
 
-    this.getNextId = getUniqueId(this);
-  }
+const SelectField = props => {
+  const {
+    labelName,
+    isMandatory,
+    options,
+    selectedValue,
+    needSearch,
+    emptyMessage,
+    animationStyle,
+    textBoxSize,
+    textBoxVariant,
+    searchBoxSize,
+    searchBoxPlaceHolder,
+    validationMessage,
+    validationPalette,
+    isReadOnly,
+    valueField,
+    textField,
+    excludeOptions,
+    errorType,
+    isDisabled,
+    title,
+    dataId,
+    dataSelectorId,
+    fieldClass,
+    validationRuleMessage,
+    validationRulePalette,
+    onKeyDown,
+    infoText,
+    isLocked,
+    lockedInfoText,
+    borderColor,
+    fieldSize,
+    isNextOptions,
+    getNextOptions,
+    popupGroup,
+    onSearch,
+    labelPalette,
+    labelCustomClass,
+    htmlId,
+    needLocalSearch,
+    isDefaultSelectValue,
+    placeHolder,
+    children,
+    onFocus,
+    iconOnHover,
+    customProps,
+    renderLabelProps,
+    id,
+    onChange,
+    getRef
+  } = props;
+  const {
+    LabelProps = {},
+    SelectProps = {},
+    ValidationMessageProps1 = {},
+    ValidationMessageProps2 = {}
+  } = customProps;
+  const getNextId = useUniqueId();
+  let uniqueId = htmlId ? htmlId : getNextId();
 
-  handleChange(selctedId, selectedValue) {
-    let {
-      id: fieldId,
-      onChange,
-      selectedValue: propValue
-    } = this.props;
-    onChange && propValue !== selctedId && onChange(fieldId, selctedId, selectedValue);
-  }
+  const handleChange = (selectedId, selectedVal) => {
+    onChange && selectedValue !== selectedId && onChange(id, selectedId, selectedVal);
+  };
 
-  handleGetRef(el) {
-    let {
-      getRef,
-      id
-    } = this.props;
-    this.selectBox = el;
+  const handleGetRef = el => {
     getRef && getRef(el, id);
-  } // handleLabelClick() {
+  }; // handleLabelClick() {
   //   let { isFocusOnLabelClick } = this.props;
   //   if (isFocusOnLabelClick && this.selectBox && this.selectBox.focus) {
   //     this.selectBox.focus();
@@ -49,135 +92,77 @@ export default class SelectField extends PureComponent {
   // }
 
 
-  render() {
-    let {
-      labelName,
-      id,
-      isMandatory,
-      options,
-      selectedValue,
-      needSearch,
-      emptyMessage,
-      animationStyle,
-      textBoxSize,
-      textBoxVariant,
-      searchBoxSize,
-      searchBoxPlaceHolder,
-      validationMessage,
-      validationPalette,
-      isReadOnly,
-      valueField,
-      textField,
-      excludeOptions,
-      errorType,
-      isDisabled,
-      title,
-      dataId,
-      dataSelectorId,
-      fieldClass,
-      validationRuleMessage,
-      validationRulePalette,
-      onKeyDown,
-      infoText,
-      isLocked,
-      lockedInfoText,
-      borderColor,
-      fieldSize,
-      isNextOptions,
-      getNextOptions,
-      popupGroup,
-      onSearch,
-      labelPalette,
-      labelCustomClass,
-      htmlId,
-      needLocalSearch,
-      isDefaultSelectValue,
-      placeHolder,
-      children,
-      onFocus,
-      iconOnHover,
-      customProps,
-      renderLabelProps
-    } = this.props;
-    const {
-      LabelProps = {},
-      SelectProps = {},
-      ValidationMessageProps1 = {},
-      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,
-      "data-selector-id": dataSelectorId
-    }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
-      infoText: infoText,
-      isLocked: isLocked,
-      lockedInfoText: lockedInfoText,
-      renderProps: renderLabelProps
-    }, /*#__PURE__*/React.createElement(Label, _extends({
-      text: labelName,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      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: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''} ${fieldClass ? fieldClass : ''}`
-    }, /*#__PURE__*/React.createElement(Select, _extends({
-      options: options,
-      selectedValue: selectedValue,
-      onChange: this.handleChange,
-      onFocus: onFocus,
-      getRef: this.handleGetRef,
-      needSearch: needSearch,
-      emptyMessage: emptyMessage,
-      animationStyle: animationStyle,
-      textBoxSize: fieldSize === 'medium' ? textBoxSize : 'xsmall',
-      textBoxVariant: textBoxVariant,
-      searchBoxSize: searchBoxSize,
-      searchBoxPlaceHolder: searchBoxPlaceHolder,
-      valueField: valueField,
-      textField: textField,
-      excludeOptions: excludeOptions,
-      dataId: dataId,
-      onKeyDown: onKeyDown,
-      borderColor: borderColor,
-      isDisabled: isDisabled,
-      isReadOnly: isReadOnly,
-      isNextOptions: isNextOptions,
-      getNextOptions: getNextOptions,
-      popupGroup: popupGroup,
-      onSearch: onSearch,
-      htmlId: uniqueId,
-      needLocalSearch: needLocalSearch,
-      isDefaultSelectValue: isDefaultSelectValue,
-      placeHolder: placeHolder,
-      iconOnHover: iconOnHover
-    }, SelectProps, {
-      ariaLabelledby: uniqueId
-    }), children ? children : null)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
-      text: validationMessage,
-      palette: validationPalette,
-      type: errorType,
-      htmlFor: uniqueId,
-      dataId: `${dataId}_ValidationMessage`
-    }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
-      text: validationRuleMessage,
-      palette: validationRulePalette,
-      type: errorType,
-      htmlFor: uniqueId,
-      dataId: `${dataId}_ValidationRuleMessage`
-    }, ValidationMessageProps2)));
-  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+    "data-title": isDisabled ? title : null,
+    "data-selector-id": dataSelectorId
+  }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
+    infoText: infoText,
+    isLocked: isLocked,
+    lockedInfoText: lockedInfoText,
+    renderProps: renderLabelProps
+  }, /*#__PURE__*/React.createElement(Label, _extends({
+    text: labelName,
+    size: fieldSize === 'small' ? 'small' : 'medium',
+    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+    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: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''} ${fieldClass ? fieldClass : ''}`
+  }, /*#__PURE__*/React.createElement(Select, _extends({
+    options: options,
+    selectedValue: selectedValue,
+    onChange: handleChange,
+    onFocus: onFocus,
+    getRef: handleGetRef,
+    needSearch: needSearch,
+    emptyMessage: emptyMessage,
+    animationStyle: animationStyle,
+    textBoxSize: fieldSize === 'medium' ? textBoxSize : 'xsmall',
+    textBoxVariant: textBoxVariant,
+    searchBoxSize: searchBoxSize,
+    searchBoxPlaceHolder: searchBoxPlaceHolder,
+    valueField: valueField,
+    textField: textField,
+    excludeOptions: excludeOptions,
+    dataId: dataId,
+    onKeyDown: onKeyDown,
+    borderColor: borderColor,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    isNextOptions: isNextOptions,
+    getNextOptions: getNextOptions,
+    popupGroup: popupGroup,
+    onSearch: onSearch,
+    htmlId: uniqueId,
+    needLocalSearch: needLocalSearch,
+    isDefaultSelectValue: isDefaultSelectValue,
+    placeHolder: placeHolder,
+    iconOnHover: iconOnHover
+  }, SelectProps, {
+    ariaLabelledby: uniqueId
+  }), children ? children : null)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationMessage,
+    palette: validationPalette,
+    type: errorType,
+    htmlFor: uniqueId,
+    dataId: `${dataId}_ValidationMessage`
+  }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationRuleMessage,
+    palette: validationRulePalette,
+    type: errorType,
+    htmlFor: uniqueId,
+    dataId: `${dataId}_ValidationRuleMessage`
+  }, ValidationMessageProps2)));
+};
 
-}
 SelectField.propTypes = propTypes;
-SelectField.defaultProps = defaultProps; // if (__DOCS__) {
-//   SelectField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+SelectField.defaultProps = defaultProps;
+const MemoizedSelectField = /*#__PURE__*/memo(SelectField);
+MemoizedSelectField.propTypes = propTypes;
+MemoizedSelectField.defaultProps = defaultProps;
+MemoizedSelectField.displayName = 'SelectField';
+export default MemoizedSelectField;

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

@@ -1,18 +1,18 @@
 import React from 'react';
 import { defaultProps } from '../../../../form/fields/TagsMultiSelect/props/defaultProps';
 import { propTypes } from '../../../../form/fields/TagsMultiSelect/props/propTypes';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import Tag from '@zohodesk/components/lib/Tag/Tag';
-import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import Tag from '@zohodesk/components/es/v1/Tag/Tag';
+import TextBoxIcon from '@zohodesk/components/es/v1/TextBoxIcon/TextBoxIcon';
 import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
-import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
+import ListItem from '@zohodesk/components/es/v1/ListItem/ListItem';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
-import DropDownSeparator from '@zohodesk/components/lib/DropDown/DropDownSeparator';
+import DropDownSeparator from '@zohodesk/components/es/v1/DropDown/DropDownSeparator';
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
-import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import ResponsiveDropBox from '@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/es/v1/Responsive/CustomResponsive';
 import { stopBubbling } from '../../../../utils/General';
-import { scrollTo, findScrollEnd } from '@zohodesk/components/lib/utils/Common.js';
+import { scrollTo, findScrollEnd } from '@zohodesk/components/es/utils/Common.js';
 import style from '../../../../form/fields/TagsMultiSelect/TagsMultiSelect.module.css';
 export default class TagsMultiSelect extends React.Component {
   constructor(props) {

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

@@ -3,9 +3,9 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useState, useEffect } from 'react';
 import { defaultProps } from '../../../../form/fields/TagsMultiSelectField/props/defaultProps';
 import { propTypes } from '../../../../form/fields/TagsMultiSelectField/props/propTypes';
-import { Box } from '@zohodesk/components/lib/Layout';
-import Label from '@zohodesk/components/lib/Label/Label';
-import Popup from '@zohodesk/components/lib/Popup/Popup';
+import { Box } from '@zohodesk/components/es/v1/Layout';
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import Popup from '@zohodesk/components/es/v1/Popup/Popup';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import TagsMultiSelect from '../TagsMultiSelect/TagsMultiSelect';
 import FieldContainer from '../FieldContainer/FieldContainer';
@@ -249,9 +249,12 @@ const TagsMultiSelectField = props => {
   }, ValidationMessageProps)));
 };
 
-export default Popup(TagsMultiSelectField);
 TagsMultiSelectField.propTypes = propTypes;
-TagsMultiSelectField.defaultProps = defaultProps; // if (__DOCS__) {
+TagsMultiSelectField.defaultProps = defaultProps;
+const TagsMultiSelectField_Component = Popup(TagsMultiSelectField);
+TagsMultiSelectField_Component.defaultProps = TagsMultiSelectField.defaultProps;
+TagsMultiSelectField_Component.propTypes = TagsMultiSelectField.propTypes;
+export default TagsMultiSelectField_Component; // if (__DOCS__) {
 //   TagsMultiSelectField.docs = {
 //     componentGroup: 'TagsMultiSelectField'
 //   };

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

@@ -6,10 +6,10 @@ import { defaultProps } from '../../../../form/fields/TextBoxField/props/default
 import { propTypes } from '../../../../form/fields/TextBoxField/props/propTypes';
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
-import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import TextBoxIcon from '@zohodesk/components/es/v1/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import { getUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /**** CSS ****/
 

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

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { defaultProps } from '../../../../form/fields/TextEditor/props/defaultProps';
 import { propTypes } from '../../../../form/fields/TextEditor/props/propTypes';
 import selectn from 'selectn';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 /***** Methods *****/
 
 import { bind, editorContentValidate, fixEncoding, isFileNameSizeInvalid, isImageFormat, triggerKeyup, getRichEditorContent, changeContent, validateEditorContentOnInsertHtml, loadResource } from '../../../../utils/editorUtils'; //import './ZohoDeskEditor_Init';

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

@@ -6,7 +6,7 @@ import { defaultProps } from '../../../../form/fields/TextEditorField/props/defa
 import { propTypes } from '../../../../form/fields/TextEditorField/props/propTypes';
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import TextEditorWrapper from '../TextEditorWrapper/TextEditorWrapper';
 import FieldContainer from '../FieldContainer/FieldContainer';

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

@@ -6,10 +6,10 @@ import { propTypes } from '../../../../form/fields/TextEditorWrapper/props/propT
 /**** Components ****/
 
 import TextEditor from '../TextEditor/TextEditor';
-import Textarea from '@zohodesk/components/lib/Textarea/Textarea';
-import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import Textarea from '@zohodesk/components/es/v1/Textarea/Textarea';
+import VelocityAnimationGroup from '@zohodesk/components/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 import { editorContentValidate } from '../../../../utils/editorUtils';
-import style from './TextEditorWrapper.module.css';
+import style from './../../../../form/fields/TextEditorWrapper/TextEditorWrapper.module.css';
 /* eslint-disable react/no-deprecated */
 
 export default class TextEditorWrapper extends Component {

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

@@ -6,10 +6,10 @@ import { defaultProps } from '../../../../form/fields/TextareaField/props/defaul
 import { propTypes } from '../../../../form/fields/TextareaField/props/propTypes';
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
-import Textarea from '@zohodesk/components/lib/Textarea/Textarea';
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import Textarea from '@zohodesk/components/es/v1/Textarea/Textarea';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import { getUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /**** CSS ****/
 

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { defaultProps } from '../../../../form/fields/ValidationMessage/props/defaultProps';
 import { propTypes } from '../../../../form/fields/ValidationMessage/props/propTypes';
-import Label from '@zohodesk/components/lib/Label/Label';
-import colors from '@zohodesk/components/lib/Label/LabelColors.module.css';
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import colors from '@zohodesk/components/es/Label/LabelColors.module.css';
 import style from '../../../../form/fields/ValidationMessage/ValidationMessage.module.css';
 import { Icon } from '@zohodesk/icons';
 export default class ValidationMessage extends React.Component {