@zohodesk/dot 1.0.0-temp-175.6 → 1.0.0-temp-181

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

@@ -1,7 +1,7 @@
 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 './props/defaultProps';
 import { propTypes } from './props/propTypes';
 /**** Components ****/
@@ -9,153 +9,129 @@ import { propTypes } from './props/propTypes';
 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/es/v1/Provider/IdProvider';
+import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /**** CSS ****/
 
 import style from '../../../../form/fields/Fields.module.css';
-export default class TextareaField extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleGetRef = this.handleGetRef.bind(this); // this.handleLabelClick = this.handleLabelClick.bind(this);
 
-    this.getNextId = getUniqueId(this);
-  }
+const TextareaField = props => {
+  const {
+    labelName,
+    id,
+    isMandatory,
+    textBoxSize,
+    animated,
+    textBoxVariant,
+    isReadOnly,
+    validationMessage,
+    validationPalette,
+    maxLength,
+    value,
+    errorType,
+    isDisabled,
+    title,
+    placeHolder,
+    dataId,
+    dataSelectorId,
+    validationRuleMessage,
+    validationRulePalette,
+    // onKeyDown,
+    infoText,
+    borderColor,
+    fieldSize,
+    labelPalette,
+    labelCustomClass,
+    htmlId,
+    lockedInfoText,
+    isLocked,
+    customProps,
+    renderLabelProps,
+    onChange,
+    onBlur,
+    getRef
+  } = props;
+  const {
+    LabelProps = {},
+    TextareaProps = {},
+    ValidationMessageProps1 = {},
+    ValidationMessageProps2 = {}
+  } = customProps;
+  const getNextId = useUniqueId();
+  let uniqueId = htmlId ? htmlId : getNextId();
 
-  handleChange(value) {
-    let {
-      id,
-      onChange
-    } = this.props;
+  const handleChange = value => {
     onChange && onChange(id, value);
-  }
+  };
 
-  handleBlur(value) {
-    let {
-      id,
-      onBlur
-    } = this.props;
+  const handleBlur = value => {
     onBlur && onBlur(id, value);
-  }
+  };
 
-  handleGetRef(el) {
-    let {
-      getRef,
-      id
-    } = this.props;
-    this.textarea = el;
+  const handleGetRef = el => {
     getRef && getRef(el, id);
-  } // handleLabelClick() {
-  //   let { isFocusOnLabelClick } = this.props;
-  //   if (isFocusOnLabelClick && this.textarea && this.textarea.focus) {
-  //     this.textarea.focus();
-  //   }
-  // }
+  };
 
+  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,
+    id: id,
+    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))), /*#__PURE__*/React.createElement("div", {
+    className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+  }, /*#__PURE__*/React.createElement(Textarea, _extends({
+    onChange: handleChange,
+    animated: animated,
+    size: fieldSize === 'medium' ? textBoxSize : 'xmedium',
+    variant: textBoxVariant,
+    isReadOnly: isReadOnly,
+    isDisabled: isDisabled,
+    getRef: handleGetRef,
+    maxLength: maxLength,
+    text: value,
+    placeHolder: placeHolder,
+    dataId: `property(${dataId})`,
+    onBlur: handleBlur,
+    borderColor: borderColor,
+    needEffect: isReadOnly || isDisabled ? false : true,
+    resize: "vertical" // onKeyDown={onKeyDown}
+    ,
+    htmlId: uniqueId
+  }, TextareaProps, {
+    a11y: {
+      ariaLabelledby: labelName
+    }
+  })), 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))));
+};
 
-  render() {
-    let {
-      labelName,
-      id,
-      isMandatory,
-      textBoxSize,
-      animated,
-      textBoxVariant,
-      isReadOnly,
-      validationMessage,
-      validationPalette,
-      maxLength,
-      value,
-      errorType,
-      isDisabled,
-      title,
-      placeHolder,
-      dataId,
-      dataSelectorId,
-      validationRuleMessage,
-      validationRulePalette,
-      // onKeyDown,
-      infoText,
-      borderColor,
-      fieldSize,
-      labelPalette,
-      labelCustomClass,
-      htmlId,
-      lockedInfoText,
-      isLocked,
-      customProps,
-      renderLabelProps
-    } = this.props;
-    const {
-      LabelProps = {},
-      TextareaProps = {},
-      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,
-      id: id,
-      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))), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
-    }, /*#__PURE__*/React.createElement(Textarea, _extends({
-      onChange: this.handleChange,
-      animated: animated,
-      size: fieldSize === 'medium' ? textBoxSize : 'xmedium',
-      variant: textBoxVariant,
-      isReadOnly: isReadOnly,
-      isDisabled: isDisabled,
-      getRef: this.handleGetRef,
-      maxLength: maxLength,
-      text: value,
-      placeHolder: placeHolder,
-      dataId: `property(${dataId})`,
-      onBlur: this.handleBlur,
-      borderColor: borderColor,
-      needEffect: isReadOnly || isDisabled ? false : true,
-      resize: "vertical" // onKeyDown={onKeyDown}
-      ,
-      htmlId: uniqueId
-    }, TextareaProps, {
-      a11y: {
-        ariaLabelledby: labelName
-      }
-    })), 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))));
-  }
-
-}
 TextareaField.propTypes = propTypes;
-TextareaField.defaultProps = defaultProps; // if (__DOCS__) {
-//   TextareaField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+TextareaField.defaultProps = defaultProps;
+const MemoizedTextareaField = /*#__PURE__*/memo(TextareaField);
+MemoizedTextareaField.propTypes = propTypes;
+MemoizedTextareaField.defaultProps = defaultProps;
+MemoizedTextareaField.displayName = 'TextareaField';
+export default TextareaField;

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

@@ -5,50 +5,50 @@ 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 {
-  render() {
-    let {
-      palette,
-      text,
-      htmlFor,
-      onClick,
-      type,
-      size,
-      dataId,
-      clipped,
-      a11y,
-      tooltip,
-      dataSelectorId
-    } = this.props;
-    let {
-      role = 'alert'
-    } = a11y;
-    return /*#__PURE__*/React.createElement("div", {
-      role: role,
-      onClick: onClick,
-      className: `${type === 'primary' ? style.primary : style.secondary}`,
-      "data-id": "errorMsgContainer",
-      "data-test-id": "errorMsgContainer",
-      "data-selector-id": dataSelectorId
-    }, /*#__PURE__*/React.createElement(Label, {
-      text: text,
-      htmlFor: htmlFor,
-      palette: palette,
-      size: size,
-      dataId: dataId,
-      clipped: clipped,
-      title: clipped ? text : '',
-      customClass: style.lable
-    }), tooltip ? /*#__PURE__*/React.createElement("span", {
-      className: `${style.icon} ${colors[palette]}`,
-      "data-title": tooltip
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-information57",
-      size: "14"
-    })) : null);
-  }
 
-}
+const ValidationMessage = props => {
+  const {
+    palette,
+    text,
+    htmlFor,
+    onClick,
+    type,
+    size,
+    dataId,
+    clipped,
+    a11y,
+    tooltip,
+    dataSelectorId
+  } = props;
+  const {
+    role = 'alert'
+  } = a11y;
+  return /*#__PURE__*/React.createElement("div", {
+    role: role,
+    onClick: onClick,
+    className: `${type === 'primary' ? style.primary : style.secondary}`,
+    "data-id": "errorMsgContainer",
+    "data-test-id": "errorMsgContainer",
+    "data-selector-id": dataSelectorId
+  }, /*#__PURE__*/React.createElement(Label, {
+    text: text,
+    htmlFor: htmlFor,
+    palette: palette,
+    size: size,
+    dataId: dataId,
+    clipped: clipped,
+    title: clipped ? text : '',
+    customClass: style.lable
+  }), tooltip ? /*#__PURE__*/React.createElement("span", {
+    className: `${style.icon} ${colors[palette]}`,
+    "data-title": tooltip
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-information57",
+    size: "14"
+  })) : null);
+};
+
+export default ValidationMessage;
 ValidationMessage.propTypes = propTypes;
 ValidationMessage.defaultProps = defaultProps; // if (__DOCS__) {
 //   ValidationMessage.docs = {

package/es/v1/form/layout/Field/Field.js

@@ -1,33 +1,29 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import style from '../../../../form/layout/Field/Field.module.css';
-export default class Field extends Component {
-  render() {
-    let {
-      width,
-      children,
-      rowBreak,
-      column,
-      className,
-      containerClass,
-      dataId
-    } = this.props;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: `${containerClass ? containerClass : ''} ${column == 'single' ? `${style.singleColumn}` : `${style[width]} `}`,
-      "data-id": dataId,
-      "data-test-id": dataId
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${className ? className : ''} ${`fieldWidth_${width}`}`
-    }, children)), rowBreak && /*#__PURE__*/React.createElement("div", {
-      className: style.rowBreak
-    }));
-  }
 
-}
+const Field = props => {
+  const {
+    width,
+    children,
+    rowBreak,
+    column,
+    className,
+    containerClass,
+    dataId
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: `${containerClass ? containerClass : ''} ${column == 'single' ? `${style.singleColumn}` : `${style[width]} `}`,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${className ? className : ''} ${`fieldWidth_${width}`}`
+  }, children)), rowBreak && /*#__PURE__*/React.createElement("div", {
+    className: style.rowBreak
+  }));
+};
+
 Field.propTypes = propTypes;
-Field.defaultProps = defaultProps; // if (__DOCS__) {
-//   Field.docs = {
-//     componentGroup: 'ModuleAddForm'
-//   };
-// }
+Field.defaultProps = defaultProps;
+export default Field;

package/es/v1/form/layout/Section/Section.js

@@ -1,37 +1,29 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { propTypes } from './props/propTypes';
 import style from '../../../../form/layout/Section/ModuleFormSection.module.css';
-export default class Section extends Component {
-  constructor(props) {
-    super(props);
-  }
 
-  render() {
-    let {
-      title,
-      dataId,
-      containerClass,
-      titleClass,
-      className,
-      column,
-      formName
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      "data-id": dataId,
-      "data-test-id": dataId,
-      className: containerClass ? containerClass : ''
-    }, title && /*#__PURE__*/React.createElement("div", {
-      className: titleClass ? titleClass : ''
-    }, title), /*#__PURE__*/React.createElement("div", {
-      className: `${className ? className : ''} ${column == 'single' ? style.singleColumn : ''}`,
-      "data-id": formName && formName,
-      "data-test-id": formName && formName
-    }, this.props.children));
-  }
+const Section = props => {
+  const {
+    title,
+    dataId,
+    containerClass,
+    titleClass,
+    className,
+    column,
+    formName
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-id": dataId,
+    "data-test-id": dataId,
+    className: containerClass ? containerClass : ''
+  }, title && /*#__PURE__*/React.createElement("div", {
+    className: titleClass ? titleClass : ''
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: `${className ? className : ''} ${column == 'single' ? style.singleColumn : ''}`,
+    "data-id": formName && formName,
+    "data-test-id": formName && formName
+  }, this.props.children));
+};
 
-}
-Section.propTypes = propTypes; // if (__DOCS__) {
-//   Section.docs = {
-//     componentGroup: 'ModuleAddForm'
-//   };
-// }
+export default Section;
+Section.propTypes = propTypes;

package/es/v1/form/layout/Section/props/propTypes.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
-  children: PropTypes.node,
   className: PropTypes.string,
   containerClass: PropTypes.string,
   dataId: PropTypes.string,

package/es/v1/list/Subject/Subject.js

@@ -1,57 +1,48 @@
 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, { Component } from 'react';
+import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import Link from '../../Link/Link';
 import style from '../../../list/Subject/Subject.module.css';
-export default class Subject extends Component {
-  constructor(props) {
-    super(props);
-  }
 
-  render() {
-    let {
-      text,
-      dataId,
-      urlName,
-      href,
-      urlData,
-      onClick,
-      isLink,
-      target,
-      fontWeight,
-      className,
-      isDotted,
-      children,
-      customProps
-    } = this.props;
-    let {
-      LinkProps = {},
-      TextProps = {}
-    } = customProps;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
-      urlName: urlName,
-      href: href,
-      urlData: urlData,
-      onClick: onClick,
-      className: `${style.subject} ${isDotted ? style.dotted : ''} ${className} ${style[`font_${fontWeight}`]} ${style.cursorPointer}`,
-      dataId: dataId,
-      title: text,
-      target: target
-    }, LinkProps), children ? children : text) : /*#__PURE__*/React.createElement("span", _extends({
-      className: `${style.subject} ${isDotted ? style.dotted : ''} ${className} ${style[`font_${fontWeight}`]}`,
-      "data-title": text,
-      "data-id": dataId,
-      "data-test-id": dataId
-    }, TextProps), text));
-  }
+const Subject = props => {
+  const {
+    text,
+    dataId,
+    urlName,
+    href,
+    urlData,
+    onClick,
+    isLink,
+    target,
+    fontWeight,
+    className,
+    isDotted,
+    children,
+    customProps
+  } = props;
+  const {
+    LinkProps = {},
+    TextProps = {}
+  } = customProps;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
+    urlName: urlName,
+    href: href,
+    urlData: urlData,
+    onClick: onClick,
+    className: `${style.subject} ${isDotted ? style.dotted : ''} ${className} ${style[`font_${fontWeight}`]} ${style.cursorPointer}`,
+    dataId: dataId,
+    title: text,
+    target: target
+  }, LinkProps), children ? children : text) : /*#__PURE__*/React.createElement("span", _extends({
+    className: `${style.subject} ${isDotted ? style.dotted : ''} ${className} ${style[`font_${fontWeight}`]}`,
+    "data-title": text,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, TextProps), text));
+};
 
-}
+export default Subject;
 Subject.propTypes = propTypes;
-Subject.defaultProps = defaultProps; // if (__DOCS__) {
-//   Subject.docs = {
-//     folderName: 'List',
-//     componentGroup: 'Subject'
-//   };
-// }
+Subject.defaultProps = defaultProps;

package/es/v1/list/TagNew/TagNew.js

@@ -1,33 +1,24 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import style from '../../../list/TagNew/TagNew.module.css';
-export default class TagNew extends Component {
-  constructor(props) {
-    super(props);
-  }
 
-  render() {
-    let {
-      className,
-      text,
-      animate,
-      onClick,
-      dataId
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.tagStyle} ${animate ? style.bounceIn : ''} ${className ? className : ''}`,
-      onClick: onClick,
-      "data-id": dataId,
-      "data-test-id": dataId
-    }, text);
-  }
+const TagNew = props => {
+  const {
+    className,
+    text,
+    animate,
+    onClick,
+    dataId
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.tagStyle} ${animate ? style.bounceIn : ''} ${className ? className : ''}`,
+    onClick: onClick,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, text);
+};
 
-}
+export default TagNew;
 TagNew.propTypes = propTypes;
-TagNew.defaultProps = defaultProps; // if (__DOCS__) {
-//   TagNew.docs = {
-//     folderName: 'List',
-//     componentGroup: 'TagNew'
-//   };
-// }
+TagNew.defaultProps = defaultProps;