@zohodesk/dot 1.0.0-temp-66 → 1.0.0-temp-69

package/lib/list/SecondaryText/AccountName.js

@@ -82,40 +82,44 @@ var AccountName = /*#__PURE__*/function (_Component) {
           TextProps = _customProps$TextProp === void 0 ? {} : _customProps$TextProp,
           _customProps$Secondar = customProps.SecondaryTextProps,
           SecondaryTextProps = _customProps$Secondar === void 0 ? {} : _customProps$Secondar;
-      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        alignBox: "row",
-        align: "baseline",
-        isCover: false,
-        "data-title": dataTitle,
-        dataId: dataId
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        flexible: true
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        alignBox: "row",
-        align: "baseline",
-        isCover: false,
-        className: _SecondaryTextModule["default"].primaryAccountNameCnt
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _SecondaryTextModule["default"].primaryAccountName,
-        shrink: true
-      }, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
-        href: href,
-        urlName: urlName,
-        urlData: urlData,
-        onClick: onClick,
-        dataId: "".concat(dataId, "_link"),
-        className: _SecondaryTextModule["default"].link
-      }, LinkProps), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
-      }, text)) : /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : '')
-      }, TextProps), text)), secondaryAccountText && /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
-        href: secondaryAccountHref,
-        onClick: secondaryAccountClick,
-        className: _SecondaryTextModule["default"].link
-      }, /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
-      }, SecondaryTextProps), secondaryAccountText))))));
+      return (
+        /*#__PURE__*/
+        // <Container
+        //   alignBox='row'
+        //   align='baseline'
+        //   isCover={false}
+        //   data-title={dataTitle}
+        //   dataId={dataId}
+        // >
+        // <Box flexible>
+        _react["default"].createElement("div", {
+          className: _SecondaryTextModule["default"].primaryAccountNameCnt,
+          "data-title": dataTitle,
+          "data-id": dataId
+        }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+          className: _SecondaryTextModule["default"].primaryAccountName,
+          shrink: true
+        }, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
+          href: href,
+          urlName: urlName,
+          urlData: urlData,
+          onClick: onClick,
+          dataId: "".concat(dataId, "_link"),
+          className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].link)
+        }, LinkProps), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
+        }, text)) : /*#__PURE__*/_react["default"].createElement("div", _extends({
+          className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : '')
+        }, TextProps), text)), secondaryAccountText && /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+          href: secondaryAccountHref,
+          onClick: secondaryAccountClick,
+          className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].link)
+        }, /*#__PURE__*/_react["default"].createElement("div", _extends({
+          className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
+        }, SecondaryTextProps), secondaryAccountText))) //   </Box>
+        // </Container>
+
+      );
     }
   }]);
 

package/lib/list/SecondaryText/ContactName.js

@@ -93,36 +93,30 @@ var ContactName = /*#__PURE__*/function (_Component) {
           LinkProps = _customProps$LinkProp === void 0 ? {} : _customProps$LinkProp,
           _customProps$TextProp = customProps.TextProps,
           TextProps = _customProps$TextProp === void 0 ? {} : _customProps$TextProp;
-      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        alignBox: "row",
-        align: "baseline",
-        isCover: false,
-        dataId: dataId
-      }, isPaidUser && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _SecondaryTextModule["default"].paidUserIcon,
-        title: paidTitle
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: _SecondaryTextModule["default"].contactNameCnt,
+        "data-id": dataId
+      }, isPaidUser && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-paiduser",
-        iconClass: _SecondaryTextModule["default"].icon
-      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        flexible: true
-      }, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
+        iconClass: _SecondaryTextModule["default"].paidUserIcon,
+        title: paidTitle
+      }), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
         urlName: urlName,
         href: href,
         urlData: urlData,
         onClick: onClick,
         title: dataTitle,
         dataId: "".concat(dataId, "_link"),
-        className: _SecondaryTextModule["default"].link
+        className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].link)
       }, LinkProps), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
       }, text)) : /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : ''),
+        className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : ''),
         "data-title": dataTitle
-      }, TextProps), text)), sentimentType && /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_SentimentStatus["default"], {
+      }, TextProps), text)), sentimentType && /*#__PURE__*/_react["default"].createElement(_SentimentStatus["default"], {
         type: sentimentType,
         dataTitle: sentimentDataTitle
-      })));
+      }));
     }
   }]);
 
@@ -164,7 +158,8 @@ ContactName.defaultProps = {
   dataId: 'contactName',
   fontWeight: 'regular',
   i18nKeys: {},
-  customProps: {}
+  customProps: {},
+  sentimentType: 'positive'
 };
 
 if (false) {

package/lib/list/SecondaryText/SecondaryText.module.css

@@ -1,13 +1,3 @@
-.paidUserIcon {
-  vertical-align: middle;
-  bottom: var(--zd_size1);
-  position: relative;
-  font-size: var(--zd_font_size8);
-}[dir=ltr] .paidUserIcon {
-  margin-right: var(--zd_size5);
-}[dir=rtl] .paidUserIcon {
-  margin-left: var(--zd_size5);
-}
 .icon {
   display: block;
 }
@@ -67,9 +57,6 @@ display: block
 .ticketIdLink:hover, .ticketIdLink:focus {
   color: var(--zdt_secondaryText_blue_hover_text);
 }
-.primaryAccountNameCnt {
-  max-width: 100%;
-}
 /* status */
 .font_regular {
   font-family: var(--zd_regular);
@@ -134,3 +121,31 @@ display: block
 .black {
   color: var(--zdt_secondaryText_black_text);
 }
+/* Contact Name */
+.contactNameCnt {
+  display: inline-grid;
+  grid-template-columns: minmax(auto,max-content) 1fr minmax(auto,max-content);
+  align-items: baseline;
+}
+.paidUserIcon {
+  vertical-align: middle;
+  bottom: var(--zd_size1);
+  position: relative;
+  font-size: var(--zd_font_size8);
+}
+[dir=ltr] .paidUserIcon {
+  margin-right: var(--zd_size5);
+}
+[dir=rtl] .paidUserIcon {
+  margin-left: var(--zd_size5);
+}
+.gridItem {
+  min-width: 0;
+}
+/* Account Name */
+.primaryAccountNameCnt {
+  max-width: 100%;
+  display: grid;
+  grid-template-columns: 1fr minmax(auto,max-content);
+  align-items: baseline;
+}

package/lib/list/Thread/Thread.js

@@ -23,8 +23,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _extends() { _extends = Object.assign || 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); }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -64,14 +62,13 @@ var Thread = /*#__PURE__*/function (_Component) {
           className = _this$props.className,
           iconTitle = _this$props.iconTitle,
           dataId = _this$props.dataId,
-          align = _this$props.align,
-          customProps = _this$props.customProps;
+          align = _this$props.align;
       var count = threadCount === '0' ? '1' : threadCount;
-      return /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
+      return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         customClass: "".concat(_ThreadModule["default"].container, " ").concat(_ThreadModule["default"]["align_".concat(align)], " ").concat(className),
         title: iconTitle,
         dataId: dataId
-      }, customProps), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-TK-thread",
         size: "9"
       }), /*#__PURE__*/_react["default"].createElement("span", {
@@ -89,13 +86,11 @@ Thread.propTypes = {
   className: _propTypes["default"].string,
   count: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
-  iconTitle: _propTypes["default"].string,
-  customProps: _propTypes["default"].object
+  iconTitle: _propTypes["default"].string
 };
 Thread.defaultProps = {
   align: 'left',
-  className: '',
-  customProps: {}
+  className: ''
 };
 
 if (false) {

package/lib/list/status/StatusDropdown/StatusDropdown.js

@@ -182,7 +182,7 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
 
       if (prevProps.isPopupOpen != isPopupOpen) {
         setTimeout(function () {
-          isPopupOpen ? isSearch ? _this2.searchInput && _this2.searchInput.focus() : _this2.hiddenInput && _this2.hiddenInput.focus() : _this2.hiddenInput && _this2.hiddenInput.focus();
+          isPopupOpen && isSearch ? _this2.searchInput && _this2.searchInput.focus() : _this2.hiddenInput && _this2.hiddenInput.focus();
         }, 10);
       }
 
@@ -211,54 +211,61 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           togglePopup = _this$props4.togglePopup,
           onClick = _this$props4.onClick,
           boxPosition = _this$props4.boxPosition,
-          isPopupOpen = _this$props4.isPopupOpen,
+          isPopupReady = _this$props4.isPopupReady,
           isNextOptions = _this$props4.isNextOptions,
           getNextOptions = _this$props4.getNextOptions,
-          onTogglePopup = _this$props4.onTogglePopup;
+          onTogglePopup = _this$props4.onTogglePopup,
+          isPopupOpen = _this$props4.isPopupOpen;
 
-      if (isPopupOpen && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
+      if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
         e.preventDefault(); //prevent body scroll
       }
 
-      switch (keyCode) {
-        case 40:
-          if (selectedIndex === totalIndex - 1) {
-            this.setState({
-              selectedIndex: 0
-            });
-          } else {
-            if (selectedIndex === totalIndex - 3) {
-              isNextOptions && getNextOptions && getNextOptions();
+      if (isPopupReady) {
+        switch (keyCode) {
+          case 40:
+            if (selectedIndex === totalIndex - 1) {
+              this.setState({
+                selectedIndex: 0
+              });
+            } else {
+              if (selectedIndex === totalIndex - 3) {
+                isNextOptions && getNextOptions && getNextOptions();
+              }
+
+              this.setState({
+                selectedIndex: selectedIndex + 1
+              });
             }
 
-            this.setState({
-              selectedIndex: selectedIndex + 1
-            });
-          }
+            break;
+
+          case 38:
+            if (selectedIndex === 0) {
+              this.setState({
+                selectedIndex: totalIndex - 1
+              });
+            } else {
+              this.setState({
+                selectedIndex: selectedIndex - 1
+              });
+            }
 
-          break;
-
-        case 38:
-          if (selectedIndex === 0) {
-            this.setState({
-              selectedIndex: totalIndex - 1
-            });
-          } else {
-            this.setState({
-              selectedIndex: selectedIndex - 1
-            });
-          }
+            break;
 
-          break;
+          case 13:
+            onClick && onClick(options[selectedIndex].name, e);
+            onTogglePopup && onTogglePopup(isPopupOpen);
+            togglePopup(e, boxPosition);
+            break;
 
-        case 13:
-          onClick && onClick(options[selectedIndex].name, e);
-          onTogglePopup && onTogglePopup(isPopupOpen);
+          default:
+            break;
+        }
+      } else {
+        if (keyCode === 13 || keyCode === 40) {
           togglePopup(e, boxPosition);
-          break;
-
-        default:
-          break;
+        }
       }
     }
   }, {

package/lib/setup/header/Views/Views.js

@@ -62,14 +62,14 @@ var Views = /*#__PURE__*/function (_React$Component) {
         className: _ViewsModule["default"].container
       }, /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_ViewsModule["default"].icon, " ").concat(_ViewsModule["default"].first, " ").concat(isList ? _ViewsModule["default"].active : ''),
-        "data-title": !isList ? listTitle : '',
+        "data-title": !isList ? listTitle : null,
         onClick: onListClick
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-list22",
         size: "10"
       })), /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_ViewsModule["default"].icon, " ").concat(_ViewsModule["default"].last, "  ").concat(isGrid ? _ViewsModule["default"].active : ''),
-        "data-title": !isGrid ? gridTitle : '',
+        "data-title": !isGrid ? gridTitle : null,
         onClick: onGridClick
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-grid",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-66",
+  "version": "1.0.0-temp-69",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -33,7 +33,7 @@
     "velocity-react": "^1.4.3",
     "@zohodesk/variables": "1.0.0-beta.29",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-temp-49",
+    "@zohodesk/components": "file:../components",
     "@zohodesk/icons": "1.0.0-beta.92",
     "@zohodesk/svg": "1.0.0-beta.41",
     "@zohodesk/virtualizer": "1.0.3",