@zohodesk/dot 1.0.0-temp-183.1 → 1.0.0-temp-184.2

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

@@ -7,13 +7,12 @@ import style from '../../../list/Thread/Thread.module.css';
 
 const Thread = props => {
   const {
-    count: threadCount,
+    count,
     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,

package/es/v1/list/status/StatusDropdown/StatusDropdown.js

@@ -8,9 +8,9 @@ import { Box, Container } from '@zohodesk/components/es/v1/Layout';
 import DropDownHeading from '@zohodesk/components/es/v1/DropDown/DropDownHeading';
 import TextBoxIcon from '@zohodesk/components/es/v1/TextBoxIcon/TextBoxIcon';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
-import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
-import { scrollTo } from '@zohodesk/components/es/utils/Common';
-import TextBox from '@zohodesk/components/es/v1/TextBox/TextBox';
+import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch'; // import { scrollTo } from '@zohodesk/components/es/utils/Common';
+// import TextBox from '@zohodesk/components/es/v1/TextBox/TextBox';
+
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
 import StatusListItem from '../StatusListItem/StatusListItem';
 import commonStyle from '@zohodesk/components/es/common/common.module.css';
@@ -73,13 +73,13 @@ function StatusDropdown(props) {
     options,
     a11y = {}
   } = props;
-  const [optionsList, setOptionsList] = useState(options);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [searchString, setSearchString] = useState('');
-  const hiddenInput = useRef(null);
-  const searchInput = useRef(null);
-  const optionsContainer = useRef(null);
-  const dropdown = useRef({});
+  const [optionsList, setOptionsList] = useState(options); // const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const [searchString, setSearchString] = useState(''); // const hiddenInput = useRef(null);
+  // const searchInput = useRef(null);
+  // const optionsContainer = useRef(null);
+  // const dropdown = useRef({});
+
   const getAriaId = useUniqueId();
   const {
     tabIndex = 0,
@@ -94,87 +94,72 @@ function StatusDropdown(props) {
     return /*#__PURE__*/React.createElement(EmptySearch, {
       size: "small"
     });
-  }
-
-  function handleInputRef(el) {
-    hiddenInput.current = el;
-  }
+  } // function handleInputRef(el) {
+  //   hiddenInput.current = el;
+  // }
+  // function itemRef(ele, index, id) {
+  //   dropdown.current[`suggestion_${id}`] = ele;
+  // }
+  // function searchInputRef(el) {
+  //   searchInput.current = el;
+  // }
 
-  function itemRef(ele, index, id) {
-    dropdown.current[`suggestion_${id}`] = ele;
-  }
-
-  function searchInputRef(el) {
-    searchInput.current = el;
-  }
 
   function handleTogglePopup(e) {
     !isPopupOpen && onSelectLabel && onSelectLabel(e);
     onTogglePopup && onTogglePopup(isPopupOpen);
     togglePopup(e, boxPosition);
-  }
+  } // function scrollContentRef(el) {
+  //   if (isPopupOpen) {
+  //     optionsContainer.current = el;
+  //   }
+  // }
 
-  function scrollContentRef(el) {
-    if (isPopupOpen) {
-      optionsContainer.current = el;
-    }
-  }
 
   function onSelect(element, e) {
     onClick && onClick(e, element);
     onTogglePopup && onTogglePopup(isPopupOpen);
     togglePopup(e);
-  }
-
-  function handleKeyDown(e) {
-    let {
-      keyCode
-    } = e;
-    let totalIndex = optionsList.length;
-
-    if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
-      e.preventDefault(); //prevent body scroll
-    }
-
-    if (isPopupReady) {
-      switch (keyCode) {
-        case 40:
-          if (selectedIndex === totalIndex - 1) {
-            setSelectedIndex(0);
-          } else {
-            if (selectedIndex === totalIndex - 3) {
-              isNextOptions && getNextOptions && getNextOptions();
-            }
+  } // function handleKeyDown(e) {
+  //   let { keyCode } = e;
+  //   let totalIndex = optionsList.length;
+  //   if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
+  //     e.preventDefault(); //prevent body scroll
+  //   }
+  //   if (isPopupReady) {
+  //     switch (keyCode) {
+  //       case 40:
+  //         if (selectedIndex === totalIndex - 1) {
+  //           setSelectedIndex(0);
+  //         } else {
+  //           if (selectedIndex === totalIndex - 3) {
+  //             isNextOptions && getNextOptions && getNextOptions();
+  //           }
+  //           setSelectedIndex(selectedIndex + 1);
+  //         }
+  //         break;
+  //       case 38:
+  //         if (selectedIndex === 0) {
+  //           setSelectedIndex(totalIndex - 1);
+  //         } else {
+  //           setSelectedIndex(selectedIndex - 1);
+  //         }
+  //         break;
+  //       case 13:
+  //         onClick && onClick(optionsList[selectedIndex].name, e);
+  //         onTogglePopup && onTogglePopup(isPopupOpen);
+  //         togglePopup(e, boxPosition);
+  //         break;
+  //       default:
+  //         break;
+  //     }
+  //   } else {
+  //     if (keyCode === 13 || keyCode === 40) {
+  //       togglePopup(e, boxPosition);
+  //     }
+  //   }
+  // }
 
-            setSelectedIndex(selectedIndex + 1);
-          }
-
-          break;
-
-        case 38:
-          if (selectedIndex === 0) {
-            setSelectedIndex(totalIndex - 1);
-          } else {
-            setSelectedIndex(selectedIndex - 1);
-          }
-
-          break;
-
-        case 13:
-          onClick && onClick(optionsList[selectedIndex].name, e);
-          onTogglePopup && onTogglePopup(isPopupOpen);
-          togglePopup(e, boxPosition);
-          break;
-
-        default:
-          break;
-      }
-    } else {
-      if (keyCode === 13 || keyCode === 40) {
-        togglePopup(e, boxPosition);
-      }
-    }
-  }
 
   function searchList(value) {
     let foptions = options.filter(dept => dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1);
@@ -183,8 +168,8 @@ function StatusDropdown(props) {
 
   function handleChange(value, e) {
     let foptions = searchList(value);
-    setSearchString(value);
-    setSelectedIndex(-1);
+    setSearchString(value); // setSelectedIndex(-1);
+
     setOptionsList(foptions);
   }
 
@@ -192,11 +177,10 @@ function StatusDropdown(props) {
     let foptions = searchList('');
     setSearchString('');
     setOptionsList(foptions);
-  }
+  } // function handleMouseEnter(id, value, index, e) {
+  //   setSelectedIndex(index);
+  // }
 
-  function handleMouseEnter(id, value, index, e) {
-    setSelectedIndex(index);
-  }
 
   function handleScroll(e) {
     if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
@@ -219,18 +203,19 @@ function StatusDropdown(props) {
     setOptionsList(options);
   }, [options.length]);
   useEffectCallOnlyAfterState(() => {
-    setTimeout(() => {
-      isPopupOpen && isSearch ? searchInput.current && searchInput.current.focus() : hiddenInput.current && hiddenInput.current.focus();
-    }, 10);
-    let mergeOptions = optionsList;
-    let option = mergeOptions[selectedIndex];
-    let id = option && option[idName] || {};
-    let selSuggestion = dropdown.current[`suggestion_${id}`];
-
     if (isPopupOpen) {
-      optionsContainer.current && scrollTo(optionsContainer.current, selSuggestion);
       onSearchClear();
-    }
+    } //   setTimeout(() => {
+    //     isPopupOpen && isSearch
+    //       ? searchInput.current && searchInput.current.focus()
+    //       : hiddenInput.current && hiddenInput.current.focus();
+    //   }, 10);
+    //   let mergeOptions = optionsList;
+    //   let option = mergeOptions[selectedIndex];
+    //   let id = (option && option[idName]) || {};
+    //   let selSuggestion = dropdown.current[`suggestion_${id}`];
+    //     optionsContainer.current && scrollTo(optionsContainer.current, selSuggestion);
+
   }, [isPopupOpen]);
   return /*#__PURE__*/React.createElement("div", {
     className: style.posRel,
@@ -240,12 +225,12 @@ function StatusDropdown(props) {
     tagName: "button",
     alignBox: "row",
     className: `${style.container} ${containerClass} ${btnStyle.buttonReset}`,
-    onMouseDown: !showOnHover && !isDisabled && !isReadOnly && isEditable ? handleTogglePopup : null,
+    onClick: !showOnHover && !isDisabled && !isReadOnly && isEditable ? handleTogglePopup : null,
     eleRef: getTargetRef,
     align: targetAlign,
     isCover: false,
-    dataId: dataId,
-    onClick: removeClose,
+    dataId: dataId // onClick={removeClose}
+    ,
     disabled: isDisabled || isReadOnly ? true : false,
     "aria-haspopup": isSearch ? 'listbox' : 'menu',
     "aria-expanded": isPopupReady && isEditable ? true : false,
@@ -253,15 +238,7 @@ function StatusDropdown(props) {
     "aria-labelledby": ariaLabelledby,
     "aria-label": ariaLabel,
     "aria-disabled": isDisabled || isReadOnly
-  }, isEditable ? /*#__PURE__*/React.createElement("div", {
-    className: style.hiddenInput
-  }, /*#__PURE__*/React.createElement(TextBox, {
-    type: "text",
-    inputRef: handleInputRef,
-    onKeyDown: handleKeyDown,
-    needAppearance: false,
-    placeHolder: placeHolderText
-  })) : null, children ? children : /*#__PURE__*/React.createElement(Box, {
+  }, children ? children : /*#__PURE__*/React.createElement(Box, {
     className: `${style.value} toggleDropText`,
     shrink: true,
     tagName: "span",
@@ -295,7 +272,9 @@ function StatusDropdown(props) {
         customDropBoxWrap: style.dropBoxContainer
       },
       needResponsive: needResponsive,
-      isResponsivePadding: true
+      isResponsivePadding: true,
+      needFocusScope: true,
+      onClose: handleTogglePopup
     }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
       className: style.search
     }, /*#__PURE__*/React.createElement(TextBoxIcon, {
@@ -303,9 +282,14 @@ function StatusDropdown(props) {
       onChange: handleChange,
       value: searchString,
       onClear: onSearchClear,
-      size: searchBoxSize,
-      inputRef: searchInputRef,
-      onKeyDown: handleKeyDown,
+      size: searchBoxSize // inputRef={searchInputRef}
+      // onKeyDown={handleKeyDown}
+      ,
+      customProps: {
+        TextBoxProps: {
+          'data-a11y-autofocus': true
+        }
+      },
       a11y: {
         ariaHaspopup: isSearch ? 'listbox' : 'menu',
         ariaExpanded: isPopupReady,
@@ -327,35 +311,40 @@ function StatusDropdown(props) {
       shrink: true,
       dataId: `${dataId}_list`,
       preventParentScroll: "vertical",
-      className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}`,
-      eleRef: scrollContentRef,
+      className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}` // eleRef={scrollContentRef}
+      ,
       onScroll: handleScroll,
       role: isSearch ? 'listbox' : 'menu',
-      "aria-labelledby": ariaTitleId,
-      tabindex: "-1"
-    }, optionsList.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, optionsList.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, {
-      key: i
-    }, /*#__PURE__*/React.createElement(StatusListItem, {
-      dataId: `dataid_${i}`,
-      value: item[keyName],
-      id: item[idName],
-      active: value === item[keyName],
-      onClick: e => onSelect(item, e),
-      index: i,
-      highlight: selectedIndex === i,
-      needTick: needTick,
-      needBorder: false,
-      onMouseEnter: handleMouseEnter,
-      getRef: itemRef,
-      bulletColor: item[statusColor],
-      title: item[keyName],
-      needMultiLineText: needMultiLineText,
-      a11y: {
-        role: isSearch ? 'option' : 'menuitem',
-        ariaSelected: value === item[keyName],
-        'data-a11y-list-active': selectedIndex === i
-      }
-    })))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
+      tabindex: "-1",
+      "data-scroll": "true"
+    }, optionsList.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, optionsList.map((item, i) => {
+      const listItemText = item[keyName];
+      const isActive = value === listItemText;
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: i
+      }, /*#__PURE__*/React.createElement(StatusListItem, {
+        dataId: `dataid_${i}`,
+        value: listItemText,
+        id: item[idName],
+        active: isActive,
+        onClick: e => onSelect(item, e),
+        index: i // highlight={selectedIndex === i}
+        ,
+        needTick: needTick,
+        needBorder: false // onMouseEnter={handleMouseEnter}
+        // getRef={itemRef}
+        ,
+        bulletColor: item[statusColor],
+        title: listItemText,
+        needMultiLineText: needMultiLineText,
+        autoHover: true,
+        a11y: {
+          role: isSearch ? 'option' : 'menuitem',
+          ariaSelected: isActive,
+          ariaLabel: listItemText
+        }
+      }));
+    })) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
       className: style.svgWrapper,
       title: searchErrorText || 'No results',
       description: searchEmptyHint,

package/es/v1/list/status/StatusListItem/StatusListItem.js

@@ -43,7 +43,9 @@ export default function StatusListItem(props) {
   let {
     role,
     ariaSelected,
-    ariaHidden = true
+    ariaHidden = true,
+    ariaLabel,
+    insetFocus = true
   } = a11y;
 
   if (isLink) {
@@ -69,6 +71,8 @@ export default function StatusListItem(props) {
   return /*#__PURE__*/React.createElement(Container, _extends({
     role: role,
     "aria-selected": ariaSelected,
+    "aria-label": ariaLabel,
+    "data-a11y-inset-focus": insetFocus,
     isCover: false,
     align: "baseline",
     alignBox: "row",

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

@@ -223,9 +223,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           _customProps$TagWrapp = customProps.TagWrapperProps,
           TagWrapperProps = _customProps$TagWrapp === void 0 ? {} : _customProps$TagWrapp,
           _customProps$TagProps = customProps.TagProps,
-          TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps,
-          _customProps$listProp = customProps.listProps,
-          listProps = _customProps$listProp === void 0 ? {} : _customProps$listProp;
+          TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
         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,
@@ -329,7 +327,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           var name = item.name,
               isNew = item.isNew,
               listItemProps = item.listItemProps;
-          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
+          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
             key: index,
             index: index,
             autoHover: true,
@@ -342,7 +340,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
             isDisabled: listDisabled,
             customProps: listItemProps,
             customClass: listItemClass
-          }, listProps), isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          }, isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
             alignBox: "row",
             align: "vertical"
           }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

package/lib/list/DepartmentDropDown/DepartmentDropDown.js

@@ -25,8 +25,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 ? 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); }
-
 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); } }
@@ -102,10 +100,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           onSearch = _this$props3.onSearch,
           needSearchFetching = _this$props3.needSearchFetching,
           searchStr = _this$props3.searchStr,
-          i18nKeys = _this$props3.i18nKeys,
-          customProps = _this$props3.customProps;
-      var _customProps$toggleDr = customProps.toggleDropDownProps,
-          toggleDropDownProps = _customProps$toggleDr === void 0 ? {} : _customProps$toggleDr;
+          i18nKeys = _this$props3.i18nKeys;
       var _i18nKeys$title = i18nKeys.title,
           title = _i18nKeys$title === void 0 ? 'Move Department' : _i18nKeys$title,
           _i18nKeys$searchEmpty = i18nKeys.searchEmptyText,
@@ -114,7 +109,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           searchErrorText = _i18nKeys$searchError === void 0 ? 'No results' : _i18nKeys$searchError,
           _i18nKeys$placeholder = i18nKeys.placeholder,
           placeholder = _i18nKeys$placeholder === void 0 ? 'Search Department' : _i18nKeys$placeholder;
-      return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], _extends({
+      return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], {
         title: title,
         options: departmentList,
         value: /*#__PURE__*/_react["default"].createElement(_SecondaryText.DepartmentText, {
@@ -143,7 +138,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
         isNextOptions: isNextOptions,
         onSearch: onSearch,
         needSearchFetching: needSearchFetching
-      }, toggleDropDownProps));
+      });
     }
   }]);
 

package/lib/list/DepartmentDropDown/props/defaultProps.js

@@ -9,7 +9,6 @@ var defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {},
-  customProps: {}
+  i18nKeys: {}
 };
 exports.defaultProps = defaultProps;

package/lib/list/DepartmentDropDown/props/propTypes.js

@@ -31,5 +31,5 @@ var propTypes = (_propTypes = {
   searchEmptyText: _propTypes2["default"].string,
   searchErrorText: _propTypes2["default"].string,
   placeholder: _propTypes2["default"].string
-})), _defineProperty(_propTypes, "customProps", _propTypes2["default"].string), _propTypes);
+})), _propTypes);
 exports.propTypes = propTypes;

package/lib/list/Thread/Thread.js

@@ -60,12 +60,11 @@ var Thread = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          threadCount = _this$props.count,
+          count = _this$props.count,
           className = _this$props.className,
           iconTitle = _this$props.iconTitle,
           dataId = _this$props.dataId,
           align = _this$props.align;
-      var count = threadCount === '0' ? '1' : threadCount;
       return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         customClass: "".concat(_ThreadModule["default"].container, " ").concat(_ThreadModule["default"]["align_".concat(align)], " ").concat(className),
         title: iconTitle,