@zohodesk/dot 1.4.13 → 1.4.15

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

@@ -8,8 +8,6 @@ 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 CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
 import StatusListItem from '../StatusListItem/StatusListItem';
 import commonStyle from '@zohodesk/components/lib/common/common.module.css';
@@ -23,20 +21,13 @@ export class StatusDropdown extends React.Component {
     super(props);
     this.state = {
       searchString: '',
-      selectedIndex: 0,
       options: props.options
     };
     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.handleScroll = this.handleScroll.bind(this);
     this.emptySearchSVG = this.emptySearchSVG.bind(this);
     this.getAriaId = getUniqueId(this);
@@ -48,18 +39,6 @@ export class StatusDropdown extends React.Component {
     });
   }
 
-  inputRef(el) {
-    this.hiddenInput = el;
-  }
-
-  itemRef(ele, index, id) {
-    this[`suggestion_${id}`] = ele;
-  }
-
-  searchInputRef(el) {
-    this.searchInput = el;
-  }
-
   handleTogglePopup(e) {
     let {
       togglePopup,
@@ -73,16 +52,6 @@ export class StatusDropdown extends React.Component {
     togglePopup(e, boxPosition);
   }
 
-  scrollContentRef(el) {
-    let {
-      isPopupOpen
-    } = this.props;
-
-    if (isPopupOpen) {
-      this.optionsContainer = el;
-    }
-  }
-
   componentWillReceiveProps(nextProps) {
     if (nextProps.options.length != this.props.options.length) {
       this.setState({
@@ -104,108 +73,11 @@ 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);
-    }
-
     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;
-
-        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 {
       options,
@@ -219,7 +91,6 @@ export class StatusDropdown extends React.Component {
     let foptions = this.searchList(value);
     this.setState({
       searchString: value,
-      selectedIndex: -1,
       options: foptions
     });
   }
@@ -232,20 +103,13 @@ export class StatusDropdown extends React.Component {
     });
   }
 
-  handleMouseEnter(id, value, index, e) {
-    this.setState({
-      selectedIndex: index
-    });
-  }
-
   handleScroll(e) {
     const {
-      isNextOptions,
       getNextOptions
     } = this.props;
 
     if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
-      isNextOptions && getNextOptions && getNextOptions(e);
+      getNextOptions && getNextOptions(e);
     }
   }
 
@@ -262,8 +126,7 @@ export class StatusDropdown extends React.Component {
 
   render() {
     let {
-      options,
-      selectedIndex
+      options
     } = this.state;
     let {
       value,
@@ -307,6 +170,8 @@ export class StatusDropdown extends React.Component {
       needExternalPopupState = false,
       isPopupActive = false,
       needMultiLineText,
+      isFetchingOptions,
+      getNextOptions,
       a11y = {}
     } = this.props;
     const {
@@ -328,12 +193,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 +205,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 +239,16 @@ export class StatusDropdown extends React.Component {
           customDropBoxWrap: style.dropBoxContainer
         },
         needResponsive: needResponsive,
-        isResponsivePadding: true
+        isResponsivePadding: true,
+        needFocusScope: true,
+        onClose: this.handleTogglePopup,
+        customProps: {
+          focusScopeProps: {
+            loadNextOptions: getNextOptions,
+            searchValue: searchString,
+            isFetchingOptions: isFetchingOptions
+          }
+        }
       }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
         className: style.search
       }, /*#__PURE__*/React.createElement(TextBoxIcon, {
@@ -392,8 +257,11 @@ export class StatusDropdown extends React.Component {
         value: searchString,
         onClear: this.onSearchClear,
         size: searchBoxSize,
-        inputRef: this.searchInputRef,
-        onKeyDown: this.handleKeyDown,
+        customProps: {
+          TextBoxProps: {
+            'data-a11y-autofocus': true
+          }
+        },
         a11y: {
           ariaHaspopup: isSearch ? 'listbox' : 'menu',
           ariaExpanded: isPopupReady,
@@ -416,34 +284,37 @@ export class StatusDropdown extends React.Component {
         dataId: `${dataId}_list`,
         preventParentScroll: "vertical",
         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",
+        isScrollAttribute: 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(StatusListItem, {
+          key: i,
+          dataId: `dataid_${i}`,
+          value: listItemText,
+          id: item[idName],
+          active: isActive,
+          onClick: this.onSelect.bind(this, item),
+          index: i,
+          needTick: needTick,
+          needBorder: false,
+          bulletColor: item[statusColor],
+          title: listItemText,
+          needMultiLineText: needMultiLineText,
+          autoHover: true,
+          a11y: {
+            role: isSearch ? 'option' : 'menuitem',
+            ariaSelected: isActive,
+            ariaLabel: listItemText
+          }
+        });
+      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        align: "both"
+      }, /*#__PURE__*/React.createElement(Loader, null))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
         className: style.svgWrapper,
         title: searchErrorText || 'No results',
         description: searchEmptyHint,

package/es/list/status/StatusDropdown/StatusDropdown.module.css

@@ -80,13 +80,4 @@
   height: var(--zd_size1) ;
   border-bottom: 1px solid var(--zdt_statusdropdown_line_border);
   margin: var(--zd_size9) 0 var(--zd_size10) ;
-}
-.hiddenInput {
-  width: 0 ;
-  height: 0 ;
-  opacity: 0;
-}
-.hiddenInput > input {
-  width: 100% ;
-  padding: 0 ;
-}
+}

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

@@ -15,5 +15,6 @@ export const defaultProps = {
   boxSize: 'medium',
   needExternalPopupState: false,
   statusColor: 'statusColor',
-  needMultiLineText: false
+  needMultiLineText: false,
+  isFetchingOptions: false
 };

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

@@ -19,7 +19,7 @@ export const propTypes = {
   isDataLoaded: PropTypes.bool,
   isDisabled: PropTypes.bool,
   isEditable: PropTypes.bool,
-  isNextOptions: PropTypes.bool,
+  isFetchingOptions: PropTypes.bool,
   isPopupActive: PropTypes.bool,
   isPopupOpen: PropTypes.bool,
   isPopupReady: PropTypes.bool,

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/lookup/Lookup/Lookup.js

@@ -57,7 +57,8 @@ export default class Lookup extends Component {
       onClose,
       needFocusScope,
       customProps,
-      isMinHeight
+      isMinHeight,
+      lookupClass
     } = this.props;
     const {
       role = 'dialog',
@@ -87,7 +88,7 @@ export default class Lookup extends Component {
       "aria-label": ariaLabel,
       "aria-modal": ariaModal,
       id: htmlId,
-      className: `${style.box} ${style[`${size}Size`]}`,
+      className: `${style.box} ${style[`${size}Size`]} ${lookupClass ? lookupClass : ''}`,
       "data-id": dataId,
       "data-test-id": dataId
     }, a11yAttributes), /*#__PURE__*/React.createElement(Container, {

package/es/lookup/Lookup/Lookup.module.css

@@ -35,7 +35,10 @@
 .largeSize {
   max-width: 70% ;
 }
+.xlargeSize {
+  max-width: 80% ;
+}
 
 .fullSize {
   max-width: 90% ;
-}
+}

package/es/lookup/Lookup/props/propTypes.js

@@ -4,7 +4,7 @@ export const propTypes = {
   customClass: PropTypes.string,
   dataId: PropTypes.string,
   isActive: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'xmedium', 'medium', 'large', 'full']),
+  size: PropTypes.oneOf(['small', 'xmedium', 'medium', 'large', 'xlarge', 'full']),
   htmlId: PropTypes.string,
   a11y: PropTypes.shape({
     role: PropTypes.string,
@@ -19,5 +19,6 @@ export const propTypes = {
   forwardRef: PropTypes.object,
   onClick: PropTypes.func,
   onClose: PropTypes.func,
-  isMinHeight: PropTypes.bool
+  isMinHeight: PropTypes.bool,
+  lookupClass: PropTypes.string
 };

package/es/lookup/header/TicketHeader/TicketHeader.js

@@ -1,5 +1,5 @@
 /*** Libraries ***/
-import React, { Component } from 'react';
+import React, { memo, useRef } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 /*** Components ***/
@@ -9,6 +9,7 @@ import Close from '../Close/Close';
 import Search from '../Search/Search';
 import ViewDropDown from '../ViewDropDown/ViewDropDown';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
+import useDragger from '../../../Hooks/Dragger/useDragger';
 /*** CSS ***/
 
 import commonStyle from '../lookupHeaderCommon.module.css';
@@ -16,81 +17,95 @@ import commonResponsive from '../lookupHeaderCommonResponsive.module.css';
 import style from './TicketHeader.module.css';
 /* eslint-disable react/forbid-component-props */
 
-export default class TicketHeader extends Component {
-  render() {
-    let {
-      needSearch,
-      onLookupClose,
-      searchStr,
-      onSearchChange,
-      searchPlaceHolder,
-      title,
-      selectedViewId,
-      onSelectView,
-      allViews,
-      onSearch,
-      needOnTypeSearch,
-      getSearchBoxRef,
-      needViewsList,
-      i18nKeys,
-      palette
-    } = this.props;
-    let {
-      menuEmptyMessage = 'No matches found'
-    } = i18nKeys;
-    return /*#__PURE__*/React.createElement(Container, {
-      align: "vertical",
-      alignBox: "row",
-      className: `${commonStyle.container} ${commonStyle[`${palette}`]} ${commonResponsive.container} ${style.container}`,
-      isCover: false,
-      wrap: "wrap"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: commonStyle.closeContainer
-    }, /*#__PURE__*/React.createElement(Close, {
-      onClose: onLookupClose,
-      dataId: "close"
-    })), /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "column",
-      className: `${style.innerContainer}`,
-      isCover: false,
-      wrap: "wrap",
-      dataId: "lookupView"
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: commonStyle.title
-    }, /*#__PURE__*/React.createElement(Title, {
-      text: title
-    })), needViewsList ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.dropdown}`,
-      dataId: "filterIdselected"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: style.menuWrapper
-    }, /*#__PURE__*/React.createElement(ViewDropDown, {
-      dropBoxSize: "small",
-      emptyMessage: menuEmptyMessage,
-      needSearch: true,
-      onChange: onSelectView,
-      options: allViews,
-      textField: "displayLabel",
-      selectedValue: selectedViewId,
-      needCloseOnSelect: true
-    }))) : null)), needSearch ? /*#__PURE__*/React.createElement(Box, {
-      className: `${commonStyle.searchContainer} ${commonResponsive.searchContainer} ${style.searchContainer}`
-    }, /*#__PURE__*/React.createElement(Search, {
-      onSearch: onSearch,
-      searchStr: searchStr,
-      onChange: onSearchChange,
-      placeHolder: searchPlaceHolder,
-      dataId: "search",
-      needOnTypeSearch: needOnTypeSearch,
-      getRef: getSearchBoxRef
-    })) : null);
-  }
+function TicketHeader(props) {
+  let {
+    needSearch,
+    onLookupClose,
+    searchStr,
+    onSearchChange,
+    searchPlaceHolder,
+    title,
+    selectedViewId,
+    onSelectView,
+    allViews,
+    onSearch,
+    needOnTypeSearch,
+    getSearchBoxRef,
+    needViewsList,
+    i18nKeys,
+    palette,
+    dragBoundaryLimit
+  } = props;
+  let {
+    menuEmptyMessage = 'No matches found'
+  } = i18nKeys;
+  const dragRef = useRef(null); //dragRef
 
+  useDragger({
+    isActive: true,
+    ChildRef: dragRef,
+    boundaryLimit: dragBoundaryLimit
+  }); //custom Hook
+
+  return /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: `${commonStyle.container} ${commonStyle[`${palette}`]} ${commonResponsive.container} ${style.container}`,
+    isCover: false,
+    wrap: "wrap",
+    eleRef: dragRef,
+    "data-drag-hook": "true"
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "column",
+    className: `${style.innerContainer}`,
+    isCover: false,
+    wrap: "wrap",
+    dataId: "lookupView"
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: commonStyle.title
+  }, /*#__PURE__*/React.createElement(Title, {
+    text: title
+  })), needViewsList ? /*#__PURE__*/React.createElement(Box, {
+    className: `${style.dropdown}`,
+    dataId: "filterIdselected"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.menuWrapper
+  }, /*#__PURE__*/React.createElement(ViewDropDown, {
+    dropBoxSize: "small",
+    emptyMessage: menuEmptyMessage,
+    needSearch: true,
+    onChange: onSelectView,
+    options: allViews,
+    textField: "displayLabel",
+    selectedValue: selectedViewId,
+    needCloseOnSelect: true
+  }))) : null)), needSearch ? /*#__PURE__*/React.createElement(Box, {
+    className: `${commonStyle.searchContainer} ${commonResponsive.searchContainer} ${style.searchContainer}`
+  }, /*#__PURE__*/React.createElement(Search, {
+    onSearch: onSearch,
+    searchStr: searchStr,
+    onChange: onSearchChange,
+    placeHolder: searchPlaceHolder,
+    dataId: "search",
+    needOnTypeSearch: needOnTypeSearch,
+    getRef: getSearchBoxRef
+  })) : null, /*#__PURE__*/React.createElement("div", {
+    className: commonStyle.closeContainer
+  }, /*#__PURE__*/React.createElement(Close, {
+    onClose: onLookupClose,
+    dataId: "close"
+  })));
 }
+
 TicketHeader.propTypes = propTypes;
-TicketHeader.defaultProps = defaultProps; // if (__DOCS__) {
+TicketHeader.defaultProps = defaultProps;
+const MemoizedTicketHeader = /*#__PURE__*/memo(TicketHeader);
+MemoizedTicketHeader.propTypes = propTypes;
+MemoizedTicketHeader.defaultProps = defaultProps;
+MemoizedTicketHeader.displayName = 'TicketHeader';
+export default MemoizedTicketHeader; // if (__DOCS__) {
 //   TicketHeader.docs = {
 //     componentGroup: 'Lookup'
 //   };

package/es/lookup/header/TicketHeader/props/defaultProps.js

@@ -1,4 +1,10 @@
 export const defaultProps = {
   i18nKeys: {},
-  palette: 'default'
+  palette: 'default',
+  dragBoundaryLimit: {
+    top: 0,
+    left: 50,
+    right: 50,
+    bottom: 50
+  }
 };

package/es/lookup/header/TicketHeader/props/propTypes.js

@@ -16,5 +16,6 @@ export const propTypes = {
   i18nKeys: PropTypes.shape({
     menuEmptyMessage: PropTypes.string
   }),
-  palette: PropTypes.oneOf(['default', 'white'])
+  palette: PropTypes.oneOf(['default', 'white']),
+  dragBoundaryLimit: PropTypes.object
 };

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,