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

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -1,5 +1,3 @@
-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 { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -50,19 +48,15 @@ class DepartmentDropDown extends Component {
       onSearch,
       needSearchFetching,
       searchStr,
-      i18nKeys,
-      customProps
+      i18nKeys
     } = this.props;
-    const {
-      toggleDropDownProps = {}
-    } = customProps;
     let {
       title = 'Move Department',
       searchEmptyText = 'No results found',
       searchErrorText = 'No results',
       placeholder = 'Search Department'
     } = i18nKeys;
-    return /*#__PURE__*/React.createElement(ToggleDropDown, _extends({
+    return /*#__PURE__*/React.createElement(ToggleDropDown, {
       title: title,
       options: departmentList,
       value: /*#__PURE__*/React.createElement(DepartmentText, {
@@ -91,7 +85,7 @@ class DepartmentDropDown extends Component {
       isNextOptions: isNextOptions,
       onSearch: onSearch,
       needSearchFetching: needSearchFetching
-    }, toggleDropDownProps));
+    });
   }
 
 }

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

@@ -3,6 +3,5 @@ export const defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {},
-  customProps: {}
+  i18nKeys: {}
 };

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

@@ -20,6 +20,5 @@ export const propTypes = {
     searchEmptyText: PropTypes.string,
     searchErrorText: PropTypes.string,
     placeholder: PropTypes.string
-  }),
-  customProps: PropTypes.string
+  })
 };

package/es/list/Thread/Thread.js

@@ -11,13 +11,12 @@ export default class Thread extends Component {
 
   render() {
     let {
-      count: threadCount,
+      count,
       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,

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

@@ -7,9 +7,9 @@ import { Box, Container } from '@zohodesk/components/lib/Layout';
 import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
 import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
-import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
-import { scrollTo } from '@zohodesk/components/lib/utils/Common.js';
-import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
+import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch'; // import { scrollTo } from '@zohodesk/components/lib/utils/Common.js';
+// import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
+
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
 import StatusListItem from '../StatusListItem/StatusListItem';
 import commonStyle from '@zohodesk/components/lib/common/common.module.css';
@@ -23,20 +23,20 @@ export class StatusDropdown extends React.Component {
     super(props);
     this.state = {
       searchString: '',
-      selectedIndex: 0,
+      // selectedIndex: 0,
       options: props.options
     };
-    this.handleChange = this.handleChange.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleChange = this.handleChange.bind(this); // this.handleKeyDown = this.handleKeyDown.bind(this);
+
     this.onSelect = this.onSelect.bind(this);
     this.handleTogglePopup = this.handleTogglePopup.bind(this);
     this.onSearchClear = this.onSearchClear.bind(this);
-    this.searchList = this.searchList.bind(this);
-    this.scrollContentRef = this.scrollContentRef.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.searchInputRef = this.searchInputRef.bind(this);
-    this.itemRef = this.itemRef.bind(this);
-    this.inputRef = this.inputRef.bind(this);
+    this.searchList = this.searchList.bind(this); // this.scrollContentRef = this.scrollContentRef.bind(this);
+    // this.handleMouseEnter = this.handleMouseEnter.bind(this);
+    // this.searchInputRef = this.searchInputRef.bind(this);
+    // this.itemRef = this.itemRef.bind(this);
+    // this.inputRef = this.inputRef.bind(this);
+
     this.handleScroll = this.handleScroll.bind(this);
     this.emptySearchSVG = this.emptySearchSVG.bind(this);
     this.getAriaId = getUniqueId(this);
@@ -46,19 +46,16 @@ export class StatusDropdown extends React.Component {
     return /*#__PURE__*/React.createElement(EmptySearch, {
       size: "small"
     });
-  }
-
-  inputRef(el) {
-    this.hiddenInput = el;
-  }
-
-  itemRef(ele, index, id) {
-    this[`suggestion_${id}`] = ele;
-  }
+  } // inputRef(el) {
+  //   this.hiddenInput = el;
+  // }
+  // itemRef(ele, index, id) {
+  //   this[`suggestion_${id}`] = ele;
+  // }
+  // searchInputRef(el) {
+  //   this.searchInput = el;
+  // }
 
-  searchInputRef(el) {
-    this.searchInput = el;
-  }
 
   handleTogglePopup(e) {
     let {
@@ -71,17 +68,13 @@ export class StatusDropdown extends React.Component {
     !isPopupOpen && onSelectLabel && onSelectLabel(e);
     onTogglePopup && onTogglePopup(isPopupOpen);
     togglePopup(e, boxPosition);
-  }
-
-  scrollContentRef(el) {
-    let {
-      isPopupOpen
-    } = this.props;
+  } // scrollContentRef(el) {
+  //   let { isPopupOpen } = this.props;
+  //   if (isPopupOpen) {
+  //     this.optionsContainer = el;
+  //   }
+  // }
 
-    if (isPopupOpen) {
-      this.optionsContainer = el;
-    }
-  }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.options.length != this.props.options.length) {
@@ -104,107 +97,68 @@ export class StatusDropdown extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    let {
-      isPopupOpen,
-      isSearch,
-      idName
-    } = this.props;
-    let {
-      selectedIndex,
-      options
-    } = this.state;
-
-    if (prevProps.isPopupOpen != isPopupOpen) {
-      setTimeout(() => {
-        isPopupOpen && isSearch ? this.searchInput && this.searchInput.focus() : this.hiddenInput && this.hiddenInput.focus();
-      }, 10);
-    }
-
-    let mergeOptions = options;
-    let option = mergeOptions[selectedIndex];
-    let id = option && option[idName] || {};
-    let selSuggestion = this[`suggestion_${id}`];
-
-    if (isPopupOpen) {
-      this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
-    }
-
+    // let { isPopupOpen, isSearch, idName } = this.props;
+    // let { selectedIndex, options } = this.state;
+    // if (prevProps.isPopupOpen != isPopupOpen) {
+    //   setTimeout(() => {
+    //     isPopupOpen && isSearch
+    //       ? this.searchInput && this.searchInput.focus()
+    //       : this.hiddenInput && this.hiddenInput.focus();
+    //   }, 10);
+    // }
+    // let mergeOptions = options;
+    // let option = mergeOptions[selectedIndex];
+    // let id = (option && option[idName]) || {};
+    // let selSuggestion = this[`suggestion_${id}`];
+    // if (isPopupOpen) {
+    //   this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
+    // }
     if (!prevProps.isPopupOpen && this.props.isPopupOpen) {
       this.onSearchClear();
     }
-  }
-
-  handleKeyDown(e) {
-    let {
-      keyCode
-    } = e;
-    let {
-      selectedIndex,
-      options
-    } = this.state;
-    let totalIndex = options.length;
-    let {
-      togglePopup,
-      onClick,
-      boxPosition,
-      isPopupReady,
-      isNextOptions,
-      getNextOptions,
-      onTogglePopup,
-      isPopupOpen
-    } = this.props;
-
-    if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
-      e.preventDefault(); //prevent body scroll
-    }
-
-    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
-            });
-          }
-
-          break;
-
-        case 38:
-          if (selectedIndex === 0) {
-            this.setState({
-              selectedIndex: totalIndex - 1
-            });
-          } else {
-            this.setState({
-              selectedIndex: selectedIndex - 1
-            });
-          }
-
-          break;
+  } // handleKeyDown(e) {
+  //   let { keyCode } = e;
+  //   let { selectedIndex, options } = this.state;
+  //   let totalIndex = options.length;
+  //   let { togglePopup, onClick, boxPosition, isPopupReady, isNextOptions, getNextOptions, onTogglePopup, isPopupOpen } =
+  //     this.props;
+  //   if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
+  //     e.preventDefault(); //prevent body scroll
+  //   }
+  //   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 });
+  //         }
+  //         break;
+  //       case 38:
+  //         if (selectedIndex === 0) {
+  //           this.setState({ selectedIndex: totalIndex - 1 });
+  //         } else {
+  //           this.setState({ selectedIndex: selectedIndex - 1 });
+  //         }
+  //         break;
+  //       case 13:
+  //         onClick && onClick(options[selectedIndex].name, e);
+  //         onTogglePopup && onTogglePopup(isPopupOpen);
+  //         togglePopup(e, boxPosition);
+  //         break;
+  //       default:
+  //         break;
+  //     }
+  //   } else {
+  //     if (keyCode === 13 || keyCode === 40) {
+  //       togglePopup(e, boxPosition);
+  //     }
+  //   }
+  // }
 
-        case 13:
-          onClick && onClick(options[selectedIndex].name, e);
-          onTogglePopup && onTogglePopup(isPopupOpen);
-          togglePopup(e, boxPosition);
-          break;
-
-        default:
-          break;
-      }
-    } else {
-      if (keyCode === 13 || keyCode === 40) {
-        togglePopup(e, boxPosition);
-      }
-    }
-  }
 
   searchList(value) {
     let {
@@ -219,7 +173,7 @@ export class StatusDropdown extends React.Component {
     let foptions = this.searchList(value);
     this.setState({
       searchString: value,
-      selectedIndex: -1,
+      // selectedIndex: -1,
       options: foptions
     });
   }
@@ -230,13 +184,12 @@ export class StatusDropdown extends React.Component {
       searchString: '',
       options: foptions
     });
-  }
+  } // handleMouseEnter(id, value, index, e) {
+  //   this.setState({
+  //     selectedIndex: index
+  //   });
+  // }
 
-  handleMouseEnter(id, value, index, e) {
-    this.setState({
-      selectedIndex: index
-    });
-  }
 
   handleScroll(e) {
     const {
@@ -262,8 +215,7 @@ export class StatusDropdown extends React.Component {
 
   render() {
     let {
-      options,
-      selectedIndex
+      options
     } = this.state;
     let {
       value,
@@ -328,12 +280,11 @@ export class StatusDropdown extends React.Component {
       tagName: "button",
       alignBox: "row",
       className: `${style.container} ${containerClass} ${btnStyle.buttonReset}`,
-      onMouseDown: !showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : null,
+      onClick: !showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : null,
       eleRef: getTargetRef,
       align: targetAlign,
       isCover: false,
       dataId: dataId,
-      onClick: removeClose,
       disabled: isDisabled || isReadOnly ? true : false,
       "aria-haspopup": isSearch ? 'listbox' : 'menu',
       "aria-expanded": isPopupReady && isEditable ? true : false,
@@ -341,15 +292,7 @@ export class StatusDropdown extends React.Component {
       "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: this.inputRef,
-      onKeyDown: this.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",
@@ -383,7 +326,9 @@ export class StatusDropdown extends React.Component {
           customDropBoxWrap: style.dropBoxContainer
         },
         needResponsive: needResponsive,
-        isResponsivePadding: true
+        isResponsivePadding: true,
+        needFocusScope: true,
+        onClose: this.handleTogglePopup
       }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
         className: style.search
       }, /*#__PURE__*/React.createElement(TextBoxIcon, {
@@ -391,9 +336,14 @@ export class StatusDropdown extends React.Component {
         onChange: this.handleChange,
         value: searchString,
         onClear: this.onSearchClear,
-        size: searchBoxSize,
-        inputRef: this.searchInputRef,
-        onKeyDown: this.handleKeyDown,
+        size: searchBoxSize // inputRef={this.searchInputRef}
+        // onKeyDown={this.handleKeyDown}
+        ,
+        customProps: {
+          TextBoxProps: {
+            'data-a11y-autofocus': true
+          }
+        },
         a11y: {
           ariaHaspopup: isSearch ? 'listbox' : 'menu',
           ariaExpanded: isPopupReady,
@@ -415,35 +365,41 @@ export class StatusDropdown extends React.Component {
         shrink: true,
         dataId: `${dataId}_list`,
         preventParentScroll: "vertical",
-        className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}`,
-        eleRef: this.scrollContentRef,
+        className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}` // eleRef={this.scrollContentRef}
+        ,
         onScroll: this.handleScroll,
         role: isSearch ? 'listbox' : 'menu',
-        "aria-labelledby": ariaTitleId,
-        tabindex: "-1"
-      }, options.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, options.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: this.onSelect.bind(this, item),
-        index: i,
-        highlight: selectedIndex === i,
-        needTick: needTick,
-        needBorder: false,
-        onMouseEnter: this.handleMouseEnter,
-        getRef: this.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"
+      }, options.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, options.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: this.onSelect.bind(this, item),
+          index: i // highlight={selectedIndex === i}
+          ,
+          needTick: needTick,
+          needBorder: false // onMouseEnter={this.handleMouseEnter}
+          // getRef={this.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/list/status/StatusDropdown/StatusDropdown.module.css

@@ -81,12 +81,12 @@
   border-bottom: 1px solid var(--zdt_statusdropdown_line_border);
   margin: var(--zd_size9) 0 var(--zd_size10) ;
 }
-.hiddenInput {
-  width: 0 ;
-  height: 0 ;
+/* .hiddenInput {
+  width: 0;
+  height: 0;
   opacity: 0;
 }
 .hiddenInput > input {
-  width: 100% ;
-  padding: 0 ;
-}
+  width: 100%;
+  padding: 0;
+} */

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

@@ -76,7 +76,9 @@ export default class StatusListItem extends React.Component {
     let {
       role,
       ariaSelected,
-      ariaHidden = true
+      ariaHidden = true,
+      ariaLabel,
+      insetFocus = true
     } = a11y;
 
     if (isLink) {
@@ -87,6 +89,8 @@ export default class StatusListItem extends React.Component {
     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/es/list/status/StatusListItem/StatusListItem.module.css

@@ -6,58 +6,43 @@
   min-height: var(--zd_size35) ;
   cursor: pointer;
 }
-
 [dir=ltr] .withBorder {
   border-left: 1px solid var(--zdt_statuslistitem_default_border);
 }
-
 [dir=rtl] .withBorder {
   border-right: 1px solid var(--zdt_statuslistitem_default_border);
 }
-
 [dir=ltr] .small {
   padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5) ;
 }
-
 [dir=rtl] .small {
   padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3) ;
 }
-
 .medium {
   padding: var(--zd_size7) var(--zd_size20) ;
 }
-
 .large {
   height: var(--zd_size48) ;
 }
-
 [dir=ltr] .large {
   padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25) ;
 }
-
 [dir=rtl] .large {
   padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3) ;
 }
-
-.value,
-.multiLineValue {
+.value,.multiLineValue {
   line-height: 1.5385;
 }
-
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-
-.multiLineValue {
+.multiLineValue{
   word-break: break-word;
-  -webkit-line-clamp: 5;
   composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
 }
-
 [dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
 }
-
 [dir=rtl] .withBorder.active {
   border-right-color: var(--zdt_statuslistitem_default_active_border);
 }
@@ -65,56 +50,44 @@
 .default.hover, .default.effect:hover {
   background-color: var(--zdt_statuslistitem_default_effect_bg);
 }
-
 .primary.hover, .primary.effect:hover, .selected {
   background-color: var(--zdt_statuslistitem_primary_efffect_bg);
 }
-
 .secondary.hover, .secondary.effect:hover {
   background-color: var(--zdt_statuslistitem_secondary_effect_bg);
 }
-
 .list.active.default, .list.active.primary {
   background-color: var(--zdt_statuslistitem_primary_efffect_bg);
 }
-
 .list.active.secondary {
   background-color: var(--zdt_statuslistitem_secondary_effect_bg);
 }
-
 .secondary.hover,
 .secondary.effect:hover,
 .list.active.secondary {
   color: var(--zdt_statuslistitem_secondary_effect_text);
 }
-
 .tickIcon {
   color: var(--zdt_statuslistitem_tickicon);
   position: absolute;
-  top: 50% ;
+  top:50% ;
   transform: translateY(-50%);
 }
-
 [dir=ltr] .tickIcon {
   right: var(--zd_size20) ;
 }
-
 [dir=rtl] .tickIcon {
   left: var(--zd_size20) ;
 }
-
-.tickIcon>i {
+.tickIcon > i {
   display: block;
 }
-
 [dir=ltr] .active.withTick {
   padding-right: var(--zd_size39) ;
 }
-
 [dir=rtl] .active.withTick {
   padding-left: var(--zd_size39) ;
 }
-
 /* Status Type */
 .statusType {
   width: var(--zd_size8) ;
@@ -127,15 +100,12 @@
 [dir=rtl] .statusType {
   margin-left: var(--zd_size13) ;
 }
-
 .black {
   background-color: var(--zdt_statuslistitem_black_bg);
 }
-
 .orange {
   background-color: var(--zdt_statuslistitem_orange_bg);
 }
-
 .green {
   background-color: var(--zdt_statuslistitem_green_bg);
-}
+}