@zohodesk/dot 1.4.10 → 1.4.11

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,30 @@
-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,
+    children
+  } = 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
+  }, children));
+};
 
-}
-Section.propTypes = propTypes; // if (__DOCS__) {
-//   Section.docs = {
-//     componentGroup: 'ModuleAddForm'
-//   };
-// }
+export default Section;
+Section.propTypes = propTypes;

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;

package/es/v1/list/Thread/Thread.js

@@ -1,43 +1,34 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { Icon } from '@zohodesk/icons';
 import Button from '@zohodesk/components/es/v1/semantic/Button/Button';
 import style from '../../../list/Thread/Thread.module.css';
-export default class Thread extends Component {
-  constructor(props) {
-    super(props);
-  }
 
-  render() {
-    let {
-      count: threadCount,
-      className,
-      iconTitle,
-      dataId,
-      align
-    } = this.props;
-    let count = threadCount === '0' ? '1' : threadCount;
-    return /*#__PURE__*/React.createElement(Button, {
-      customClass: `${style.container} ${style[`align_${align}`]} ${className}`,
-      title: iconTitle,
-      dataId: dataId,
-      a11y: {
-        ariaLabel: iconTitle
-      }
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-TK-thread",
-      size: "9"
-    }), /*#__PURE__*/React.createElement("span", {
-      className: style.count
-    }, count));
-  }
+const Thread = props => {
+  const {
+    count: threadCount,
+    className,
+    iconTitle,
+    dataId,
+    align
+  } = props;
+  const count = threadCount === '0' ? '1' : threadCount;
+  return /*#__PURE__*/React.createElement(Button, {
+    customClass: `${style.container} ${style[`align_${align}`]} ${className}`,
+    title: iconTitle,
+    dataId: dataId,
+    a11y: {
+      ariaLabel: iconTitle
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-TK-thread",
+    size: "9"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: style.count
+  }, count));
+};
 
-}
+export default Thread;
 Thread.propTypes = propTypes;
-Thread.defaultProps = defaultProps; // if (__DOCS__) {
-//   Thread.docs = {
-//     folderName: 'List',
-//     componentGroup: 'Thread'
-//   };
-// }
+Thread.defaultProps = defaultProps;

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -33,12 +33,12 @@ var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/li
 
 var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
 
+var _MultiSelectHeader = _interopRequireDefault(require("@zohodesk/components/lib/MultiSelect/MultiSelectHeader"));
+
 var _General = require("../../../utils/General");
 
 var _Common = require("@zohodesk/components/lib/utils/Common.js");
 
-var _MultiSelectHeader = _interopRequireDefault(require("@zohodesk/components/lib/MultiSelect/MultiSelectHeader"));
-
 var _TagsMultiSelectModule = _interopRequireDefault(require("./TagsMultiSelect.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -225,7 +225,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           _customProps$TagProps = customProps.TagProps,
           TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: " ".concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className),
+        className: "".concat(_TagsMultiSelectModule["default"].container, " ").concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className),
         onClick: _General.stopBubbling,
         "data-id": "".concat(dataId, "_tagsContainer"),
         "data-test-id": "".concat(dataId, "_tagsContainer"),
@@ -247,7 +247,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         return index < chipLimit ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, _extends({
           className: _TagsMultiSelectModule["default"].tag,
           key: index
-        }, boxCustomProps, TagWrapperProps), /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({
+        }, TagWrapperProps, boxCustomProps), /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({
           id: id,
           text: name,
           onRemove: isReadOnly ? null : deleteTag.bind(_this3, name),
@@ -256,7 +256,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           isReadOnly: isReadOnly,
           onSelectTag: onSelectTag ? onSelectTag : undefined,
           customClass: tagCustomClass
-        }, tagCustomProps, TagProps))) : null;
+        }, TagProps, tagCustomProps))) : null;
       }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _TagsMultiSelectModule["default"].moreLess,
         dataId: "".concat(dataId, "_tagsMore"),

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

@@ -1,3 +1,6 @@
+.container {
+  position: relative;
+}
 .tag {
   max-width: 100% ;
 }
@@ -91,6 +94,12 @@
   max-width: 100% ;
   visibility: hidden;
 }
+[dir=ltr] .custmSpan {
+  padding-right: var(--zd_size28) ;
+}
+[dir=rtl] .custmSpan {
+  padding-left: var(--zd_size28) ;
+}
 .custmInp {
   position: absolute;
   top: 0 ;

package/lib/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -117,7 +117,11 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
       value = fieldProperties.value,
       selectedValueCount = fieldProperties.selectedValueCount,
       validationMessage = fieldProperties.validationMessage,
-      options = fieldProperties.options;
+      options = fieldProperties.options,
+      infoText = fieldProperties.infoText,
+      isLocked = fieldProperties.isLocked,
+      lockedInfoText = fieldProperties.lockedInfoText,
+      alignField = fieldProperties.alignField;
   options = options || [];
 
   var handleKeyUp = function handleKeyUp(event) {
@@ -230,7 +234,10 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
     "data-selector-id": dataSelectorId
   }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
     ePhiData: ePhiData,
-    alignContainer: "baseline",
+    alignContainer: alignField,
+    infoText: infoText,
+    isLocked: isLocked,
+    lockedInfoText: lockedInfoText,
     renderProps: {
       end: renderEnd
     }

package/lib/form/fields/TagsMultiSelectField/props/defaultProps.js

@@ -16,7 +16,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var defaultProps = _objectSpread({
   fieldProperties: {
     isDisabled: false,
-    isMandatory: false
+    isMandatory: false,
+    isLocked: false,
+    alignField: 'baseline'
   },
   styleProperties: {
     containerClass: '',

package/lib/form/fields/TagsMultiSelectField/props/propTypes.js

@@ -22,7 +22,11 @@ var propTypes = {
     selectedValueCount: _propTypes["default"].string,
     validationMessage: _propTypes["default"].string,
     options: _propTypes["default"].array,
-    clickableTag: _propTypes["default"].bool
+    clickableTag: _propTypes["default"].bool,
+    infoText: _propTypes["default"].string,
+    isLocked: _propTypes["default"].bool,
+    lockedInfoText: _propTypes["default"].string,
+    alignField: _propTypes["default"].oneOf(['vertical', 'baseline'])
   }),
   styleProperties: _propTypes["default"].shape({
     labelSize: _propTypes["default"].string,

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

@@ -100,13 +100,7 @@ var SelectField = function SelectField(props) {
 
   var handleGetRef = function handleGetRef(el) {
     getRef && getRef(el, id);
-  }; // handleLabelClick() {
-  //   let { isFocusOnLabelClick } = this.props;
-  //   if (isFocusOnLabelClick && this.selectBox && this.selectBox.focus) {
-  //     this.selectBox.focus();
-  //   }
-  // }
-
+  };
 
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),