@zohodesk/dot 1.0.0-beta.22 → 1.0.0-beta.220

package/es/list/AvatarFlip/AvatarFlip.module.css

@@ -1,15 +1,3 @@
-.taskNone {
-  font-size: var(--zd_size18);
-}
-.taskMeeting {
-  font-size: var(--zd_size19);
-}
-.taskCall {
-  font-size: var(--zd_size15);
-}
-.taskDemo {
-  font-size: var(--zd_size17);
-}
 .iconStyle {
-  color: var(--dot_text_black);
+  color: var(--zdt_avatarflip_default_text);
 }

package/es/list/BluePrintStatus/BluePrintStatus.js

@@ -1,50 +1,32 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
 import React from 'react';
 import PropTypes from 'prop-types';
 import style from './BluePrintStatus.module.css';
 import Icon from '@zohodesk/icons/lib/Icon';
-
-var BluePrintStatus = function (_React$Component) {
-  _inherits(BluePrintStatus, _React$Component);
-
-  function BluePrintStatus(props) {
-    _classCallCheck(this, BluePrintStatus);
-
-    return _possibleConstructorReturn(this, (BluePrintStatus.__proto__ || _Object$getPrototypeOf(BluePrintStatus)).call(this, props));
+export default class BluePrintStatus extends React.Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(BluePrintStatus, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          isOverdue = _props.isOverdue,
-          title = _props.title;
-
-      return React.createElement(
-        'span',
-        {
-          className: style.container + ' ' + (isOverdue ? style.danger : style.default)
-        },
-        React.createElement(Icon, { name: 'ZD-blueprint', title: title, iconClass: style.iconStyle })
-      );
-    }
-  }]);
-
-  return BluePrintStatus;
-}(React.Component);
-
-export default BluePrintStatus;
+  render() {
+    let {
+      title
+    } = this.props;
+    return /*#__PURE__*/React.createElement("span", {
+      className: `${style.container}`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-blueprint",
+      title: title,
+      iconClass: style.iconStyle
+    }));
+  }
 
+}
 BluePrintStatus.propTypes = {
-  isOverdue: PropTypes.bool,
   title: PropTypes.string
 };
+
 if (false) {
   BluePrintStatus.docs = {
-    componentGroup: ''
+    componentGroup: 'Atom'
   };
 }

package/es/list/BluePrintStatus/BluePrintStatus.module.css

@@ -1,15 +1,17 @@
-[dir=ltr] .container {
+.container {
+  display: inherit;
+}[dir=ltr] .container {
   padding-right: var(--zd_size5);
 }[dir=rtl] .container {
   padding-left: var(--zd_size5);
 }
-.danger {
-  color: var(--dot_text_brightRed);
+/* .danger {
+  color: var(--dot_brightRed);
 }
 .default {
-  color: var(--dot_text_shuttleGrey);
-}
+  color: var(--dot_shuttleGrey);
+} */
 .iconStyle {
   display: block;
-  font-size: var(--zd_size10);
+  font-size: var(--zd_font_size10);
 }

package/es/list/Comment/Comment.js

@@ -1,78 +1,49 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
-import { RestrictionValidator } from '@zohodesk/permissions';
-
 import { i18NProviderUtils } from '@zohodesk/i18n';
-
+import Button from '@zohodesk/components/lib/semantic/Button/Button';
 import style from './Comment.module.css';
-
-var Comment = function (_Component) {
-  _inherits(Comment, _Component);
-
-  function Comment(props) {
-    _classCallCheck(this, Comment);
-
-    return _possibleConstructorReturn(this, (Comment.__proto__ || _Object$getPrototypeOf(Comment)).call(this, props));
+export default class Comment extends Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(Comment, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          count = _props.count,
-          onClick = _props.onClick,
-          _props$features = _props.features,
-          features = _props$features === undefined ? [] : _props$features,
-          _props$module = _props.module,
-          module = _props$module === undefined ? 'tickets' : _props$module;
-
-      var i18N = i18NProviderUtils.getI18NValue;
-      var commentCount = parseInt(count);
-      var commentTitle = !commentCount ? i18N('tabs.request.comment') : commentCount > 1 ? i18N('support.comment.many.count', count) : i18N('support.comment.count.one');
-      return React.createElement(
-        RestrictionValidator,
-        {
-          features: features,
-          module: module,
-          action: 'show_comment'
-        },
-        React.createElement(
-          'div',
-          {
-            className: style.container,
-            onClick: onClick,
-            'data-id': 'commentLstContainer',
-            'data-title': commentTitle
-          },
-          React.createElement(Icon, { name: 'ZD-comments1', iconClass: style.commentIcon }),
-          count && React.createElement(
-            'span',
-            { className: style.count },
-            count
-          )
-        )
-      );
-    }
-  }]);
-
-  return Comment;
-}(Component);
-
-export default Comment;
+  render() {
+    let {
+      count,
+      onClick,
+      className
+    } = this.props;
+    let i18N = i18NProviderUtils.getI18NValue;
+    let commentCount = parseInt(count);
+    let commentTitle = !commentCount ? i18N('tabs.request.comment') : commentCount > 1 ? i18N('support.comment.many', count) : i18N('support.comment.one');
+    return /*#__PURE__*/React.createElement(Button, {
+      customClass: `${style.container} ${className} `,
+      onClick: onClick,
+      dataId: "commentLstContainer",
+      title: commentTitle
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-TK-commentLine",
+      iconClass: style.commentIcon
+    }), count && /*#__PURE__*/React.createElement("span", {
+      className: style.count
+    }, count));
+  }
 
+}
+Comment.defaultProps = {
+  className: ''
+};
 Comment.propTypes = {
+  className: PropTypes.string,
   count: PropTypes.string,
   features: PropTypes.array,
   iconTitle: PropTypes.string,
   module: PropTypes.string,
   onClick: PropTypes.func
 };
+
 if (false) {
   Comment.docs = {
     folderName: 'List',

package/es/list/Comment/Comment.module.css

@@ -1,14 +1,21 @@
+.varClass {
+  --icon_color: var(--zdt_comment_iconText);
+}
 .container {
-  composes: inlineBlockMiddle from "../listCommon.module.css";
+  composes: varClass;
+  composes: inlineBlockMiddle from '../listCommon.module.css';
   position: relative;
-  color: var(--dot_text_shuttleGrey);
+  color: var(--icon_color);
   padding: 0 var(--zd_size2);
   cursor: pointer;
 }
+.container:hover {
+  --icon_color: var(--zdt_comment_hover_iconText);
+}
 .count {
   position: absolute;
-  top: 0;
-  font-size: var(--zd_size9);
+  top: var(--zd_size1);
+  font-size: var(--zd_font_size9);
   text-align: center;
 }
 [dir=ltr] .count {
@@ -18,5 +25,5 @@
   right: 100%;
 }
 .commentIcon {
-  font-size: var(--zd_size10);
+  font-size: var(--zd_font_size13);
 }

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -1,99 +1,126 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ToggleDropDown from '../../dropdown/ToggleDropDown/ToggleDropDown';
 import { DepartmentText } from '../SecondaryText';
-import { i18NProviderUtils } from '@zohodesk/i18n';
+import style from './DepartmentDropDown.module.css';
 
-var DepartmentDropDown = function (_Component) {
-  _inherits(DepartmentDropDown, _Component);
-
-  function DepartmentDropDown(props) {
-    _classCallCheck(this, DepartmentDropDown);
-
-    var _this = _possibleConstructorReturn(this, (DepartmentDropDown.__proto__ || _Object$getPrototypeOf(DepartmentDropDown)).call(this, props));
-
-    _this.onClick = _this.onClick.bind(_this);
-    _this.onMoveDepartment = _this.onMoveDepartment.bind(_this);
-    return _this;
+class DepartmentDropDown extends Component {
+  constructor(props) {
+    super(props);
+    this.onClick = this.onClick.bind(this);
+    this.onMoveDepartment = this.onMoveDepartment.bind(this);
   }
 
-  _createClass(DepartmentDropDown, [{
-    key: 'onClick',
-    value: function onClick(e) {
-      var _props = this.props,
-          getDepartment = _props.getDepartment,
-          onSearchDepts = _props.onSearchDepts;
+  onClick(e) {
+    let {
+      getDepartment,
+      onSearch
+    } = this.props;
 
-      if (getDepartment) {
-        getDepartment(e);
-      }
-      onSearchDepts('');
+    if (getDepartment) {
+      getDepartment(e);
     }
-  }, {
-    key: 'onMoveDepartment',
-    value: function onMoveDepartment(deptId) {
-      var _props2 = this.props,
-          onSearchDepts = _props2.onSearchDepts,
-          onMoveDepartment = _props2.onMoveDepartment;
 
-      onSearchDepts('');
-      onMoveDepartment(deptId);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props3 = this.props,
-          departmentName = _props3.departmentName,
-          _props3$departmentLis = _props3.departmentList,
-          departmentList = _props3$departmentLis === undefined ? [] : _props3$departmentLis,
-          onSelectLabel = _props3.onSelectLabel,
-          isEditable = _props3.isEditable,
-          dataId = _props3.dataId,
-          isFetching = _props3.isFetching;
+    onSearch('');
+  }
 
-      return React.createElement(ToggleDropDown, {
-        title: i18NProviderUtils.getI18NValue('support.label.move.department'),
-        options: departmentList,
-        value: React.createElement(DepartmentText, { text: departmentName }),
-        dataTitle: departmentName,
-        keyName: 'name',
-        idName: 'id',
-        onClick: this.onMoveDepartment,
-        isArrow: false,
-        isEditable: isEditable,
-        onSelectLabel: onSelectLabel,
-        isSearch: departmentList.length > 5,
-        boxSize: 'small',
-        dataId: dataId,
-        isDataLoaded: !isFetching,
-        showIconOnHover: true
-      });
-    }
-  }]);
+  onMoveDepartment(deptId) {
+    let {
+      onSearch,
+      onMoveDepartment
+    } = this.props;
+    onSearch('');
+    onMoveDepartment(deptId);
+  }
 
-  return DepartmentDropDown;
-}(Component);
+  render() {
+    let {
+      departmentName,
+      departmentList = [],
+      onSelectLabel,
+      isEditable,
+      dataId,
+      isFetching,
+      isPopupActive,
+      getNextOptions,
+      isNextOptions,
+      onSearch,
+      needSearchFetching,
+      searchStr,
+      i18nKeys
+    } = this.props;
+    let {
+      title = 'Move Department',
+      searchEmptyText = 'No results found',
+      searchErrorText = 'OOPS !',
+      placeholder = 'Search Department'
+    } = i18nKeys;
+    return /*#__PURE__*/React.createElement(ToggleDropDown, {
+      title: title,
+      options: departmentList,
+      value: /*#__PURE__*/React.createElement(DepartmentText, {
+        text: departmentName,
+        dataTitle: departmentName
+      }),
+      keyName: "name",
+      idName: "id",
+      onClick: this.onMoveDepartment,
+      isArrow: false,
+      isEditable: isEditable,
+      onSelectLabel: onSelectLabel,
+      isPopupActive: isPopupActive,
+      needExternalPopupState: true,
+      isSearch: departmentList.length > 5 || searchStr.length !== 0,
+      boxSize: "small",
+      dataId: dataId,
+      isDataLoaded: !isFetching,
+      isPadding: false,
+      searchErrorText: searchErrorText,
+      searchEmptyHint: searchEmptyText,
+      isNeedEffect: false,
+      className: style.departmentBox,
+      placeHolderText: placeholder,
+      getNextOptions: getNextOptions,
+      isNextOptions: isNextOptions,
+      onSearch: onSearch,
+      needSearchFetching: needSearchFetching
+    });
+  }
+
+}
 
 DepartmentDropDown.defaultProps = {
-  isEditable: true
+  isEditable: true,
+  isPopupActive: true,
+  isNextOptions: false,
+  searchStr: '',
+  i18nKeys: {}
 };
 DepartmentDropDown.propTypes = {
   dataId: PropTypes.string,
   departmentList: PropTypes.array,
   departmentName: PropTypes.string,
   getDepartment: PropTypes.func,
+  getNextOptions: PropTypes.func,
   isEditable: PropTypes.bool,
   isFetching: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  isPopupActive: PropTypes.bool,
+  needSearchFetching: PropTypes.bool,
   onMoveDepartment: PropTypes.func,
-  onSearchDepts: PropTypes.func,
-  onSelectLabel: PropTypes.func
+  onSearch: PropTypes.func,
+  onSearch: PropTypes.func,
+  onSelectLabel: PropTypes.func,
+  searchStr: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    title: PropTypes.string,
+    searchEmptyText: PropTypes.string,
+    searchErrorText: PropTypes.string,
+    placeholder: PropTypes.string
+  })
 };
 export default DepartmentDropDown;
+
 if (false) {
   DepartmentDropDown.docs = {
     folderName: 'List',

package/es/list/DepartmentDropDown/DepartmentDropDown.module.css

@@ -1,83 +1,9 @@
-.container {
-  position: relative;
-  width: 100%;
-  composes: inlineBlockMiddle from '../listCommon.module.css';
-  cursor: default;
+.departmentBox {
+  max-width: 100%;
 }
-
-.pointer {
-  cursor: pointer;
+.departmentBox :global .toggleDropIcon {
+  color: var(--zdt_departmentdropdown_default_text);
 }
-
-.read {
-  font-family: var(--zd_semibold);
-}
-
-.label {
-  composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
-  composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  width: 100%;
-}
-
-.departmentName {
-  font-style: italic;
-  font-size: var(--zd_size12);
-  color: var(--dot_text_shuttleGrey);
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  font-family: var(--zd_light);
-}
-
-.arrow {
-  vertical-align: middle;
-}
-
-[dir=ltr] .arrow {
-  margin-left: var(--zd_size5);
-}
-
-[dir=rtl] .arrow {
-  margin-right: var(--zd_size5);
-}
-
-.arrow,
-.hiddenArrow {
-  visibility: hidden;
-}
-
-.container:hover .arrow {
-  visibility: visible;
-}
-
-.dropdown {
-  max-height: var(--zd_size200);
-  composes: oflowy from '~@zohodesk/components/lib/common/common.module.css';
-  margin: var(--zd_size10) 0;
-}
-
-[dir=ltr] .dropdown {
-  text-align: left;
-}
-
-[dir=rtl] .dropdown {
-  text-align: right;
-}
-
-.moveDepartment {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-transform: uppercase;
-  font: var(--zd_size13) var(--zd_semibold);
-  padding: var(--zd_size10);
-  border-bottom: 1px solid var(--zd_text_dark6);
-}
-
-[dir=ltr] .moveDepartment {
-  text-align: left;
-}
-
-[dir=rtl] .moveDepartment {
-  text-align: right;
-}
-.iconSize {
-  font-size: var(--zd_size8);
+.departmentBox:hover :global .toggleDropIcon {
+  color: var(--zdt_departmentdropdown_default_hover_text);
 }

package/es/list/Dot/Dot.js

@@ -1,47 +1,27 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import style from './Dot.module.css';
-
-var Dot = function (_Component) {
-  _inherits(Dot, _Component);
-
-  function Dot(props) {
-    _classCallCheck(this, Dot);
-
-    return _possibleConstructorReturn(this, (Dot.__proto__ || _Object$getPrototypeOf(Dot)).call(this, props));
+export default class Dot extends Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(Dot, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          className = _props.className,
-          spacingType = _props.spacingType;
-
-      return React.createElement(
-        'div',
-        {
-          className: style.dot + ' ' + style[spacingType] + ' ' + (className ? className : '')
-        },
-        '.'
-      );
-    }
-  }]);
-
-  return Dot;
-}(Component);
-
-export default Dot;
+  render() {
+    let {
+      className,
+      spacingType
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.dot} ${style[spacingType]} ${className}`
+    }, ".");
+  }
 
+}
 Dot.propTypes = {
   className: PropTypes.string,
   spacingType: PropTypes.oneOf(['minimalList', 'list'])
 };
-Dot.propTypes = {
-  spacingType: 'list'
+Dot.defaultProps = {
+  spacingType: 'list',
+  className: ''
 };

package/es/list/Dot/Dot.module.css

@@ -1,12 +1,14 @@
+.varClass {
+  --dotColor: var(--zdt_dot_text)
+}
 .dot {
-  font-size: 100%;
-  color: var(--dot_text_paleNavy);
-  position: relative;
-  bottom: 0;
+  composes: varClass;
+  font-size: var(--zd_font_size16);
+  color: var(--dotColor);
   transform: perspective(1px);
 }
 .list {
-  margin: 0 var(--zd_size10);
+  margin: 0 var(--zd_size6);
 }
 .minimalList {
   margin: 0 var(--zd_size6);