@zohodesk/dot 1.4.13 → 1.4.15

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

@@ -9,8 +9,6 @@ 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 CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
 import StatusListItem from '../StatusListItem/StatusListItem';
 import commonStyle from '@zohodesk/components/es/common/common.module.css';
@@ -68,18 +66,13 @@ function StatusDropdown(props) {
     onTogglePopup,
     onClick,
     onSelectLabel,
-    isNextOptions,
+    isFetchingOptions,
     getNextOptions,
     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 getAriaId = useUniqueId();
   const {
     tabIndex = 0,
@@ -96,86 +89,18 @@ function StatusDropdown(props) {
     });
   }
 
-  function handleInputRef(el) {
-    hiddenInput.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 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();
-            }
-
-            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);
     return foptions;
@@ -184,7 +109,6 @@ function StatusDropdown(props) {
   function handleChange(value, e) {
     let foptions = searchList(value);
     setSearchString(value);
-    setSelectedIndex(-1);
     setOptionsList(foptions);
   }
 
@@ -194,13 +118,9 @@ function StatusDropdown(props) {
     setOptionsList(foptions);
   }
 
-  function handleMouseEnter(id, value, index, e) {
-    setSelectedIndex(index);
-  }
-
   function handleScroll(e) {
     if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
-      isNextOptions && getNextOptions && getNextOptions(e);
+      getNextOptions && getNextOptions(e);
     }
   }
 
@@ -219,18 +139,7 @@ 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();
-    }
+    isPopupOpen && onSearchClear();
   }, [isPopupOpen]);
   return /*#__PURE__*/React.createElement("div", {
     className: style.posRel,
@@ -240,12 +149,11 @@ 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,
     disabled: isDisabled || isReadOnly ? true : false,
     "aria-haspopup": isSearch ? 'listbox' : 'menu',
     "aria-expanded": isPopupReady && isEditable ? true : false,
@@ -253,15 +161,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 +195,16 @@ function StatusDropdown(props) {
         customDropBoxWrap: style.dropBoxContainer
       },
       needResponsive: needResponsive,
-      isResponsivePadding: true
+      isResponsivePadding: true,
+      needFocusScope: true,
+      onClose: handleTogglePopup,
+      customProps: {
+        focusScopeProps: {
+          searchValue: searchString,
+          loadNextOptions: getNextOptions,
+          isFetchingOptions: isFetchingOptions
+        }
+      }
     }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
       className: style.search
     }, /*#__PURE__*/React.createElement(TextBoxIcon, {
@@ -304,8 +213,11 @@ function StatusDropdown(props) {
       value: searchString,
       onClear: onSearchClear,
       size: searchBoxSize,
-      inputRef: searchInputRef,
-      onKeyDown: handleKeyDown,
+      customProps: {
+        TextBoxProps: {
+          'data-a11y-autofocus': true
+        }
+      },
       a11y: {
         ariaHaspopup: isSearch ? 'listbox' : 'menu',
         ariaExpanded: isPopupReady,
@@ -328,34 +240,37 @@ function StatusDropdown(props) {
       dataId: `${dataId}_list`,
       preventParentScroll: "vertical",
       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",
+      isScrollAttribute: 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(StatusListItem, {
+        key: i,
+        dataId: `dataid_${i}`,
+        value: listItemText,
+        id: item[idName],
+        active: isActive,
+        onClick: e => onSelect(item, e),
+        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/v1/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/v1/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/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/es/v1/lookup/Lookup/Lookup.js

@@ -31,7 +31,8 @@ export default function Lookup(props) {
     needFocusScope,
     customProps,
     onKeyDown,
-    isMinHeight
+    isMinHeight,
+    lookupClass
   } = props;
   const {
     role = 'dialog',
@@ -77,7 +78,7 @@ export default function Lookup(props) {
     "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/v1/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/v1/lookup/header/TicketHeader/TicketHeader.js

@@ -1,5 +1,5 @@
 /*** Libraries ***/
-import React 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 '../../../../lookup/header/ViewDropDown/ViewDropDown';
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import useDragger from '../../../../Hooks/Dragger/useDragger';
 /*** CSS ***/
 
 import commonStyle from '../../../../lookup/header/lookupHeaderCommon.module.css';
@@ -16,7 +17,7 @@ import commonResponsive from '../../../../lookup/header/lookupHeaderCommonRespon
 import style from '../../../../lookup/header/TicketHeader/TicketHeader.module.css';
 /* eslint-disable react/forbid-component-props */
 
-export default function TicketHeader(props) {
+function TicketHeader(props) {
   let {
     needSearch,
     onLookupClose,
@@ -32,23 +33,29 @@ export default function TicketHeader(props) {
     getSearchBoxRef,
     needViewsList,
     i18nKeys,
-    palette
+    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"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: commonStyle.closeContainer
-  }, /*#__PURE__*/React.createElement(Close, {
-    onClose: onLookupClose,
-    dataId: "close"
-  })), /*#__PURE__*/React.createElement(Box, {
+    wrap: "wrap",
+    ref: dragRef,
+    "data-drag-hook": "true"
+  }, /*#__PURE__*/React.createElement(Box, {
     flexible: true
   }, /*#__PURE__*/React.createElement(Container, {
     alignBox: "column",
@@ -84,7 +91,18 @@ export default function TicketHeader(props) {
     dataId: "search",
     needOnTypeSearch: needOnTypeSearch,
     getRef: getSearchBoxRef
-  })) : null);
+  })) : null, /*#__PURE__*/React.createElement("div", {
+    className: commonStyle.closeContainer
+  }, /*#__PURE__*/React.createElement(Close, {
+    onClose: onLookupClose,
+    dataId: "close"
+  })));
 }
+
 TicketHeader.propTypes = propTypes;
-TicketHeader.defaultProps = defaultProps;
+TicketHeader.defaultProps = defaultProps;
+const MemoizedTicketHeader = /*#__PURE__*/memo(TicketHeader);
+MemoizedTicketHeader.propTypes = propTypes;
+MemoizedTicketHeader.defaultProps = defaultProps;
+MemoizedTicketHeader.displayName = 'TicketHeader';
+export default MemoizedTicketHeader;

package/es/v1/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/v1/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/version2/GlobalNotification/GlobalNotification.module.css

@@ -29,7 +29,6 @@
 .stackShadowTwo::before {
   content: '';
   position: absolute;
-  /* css:theme-validation:ignore */
   height: var(--zd_size20) ;
 }
 
@@ -78,9 +77,6 @@
 .container {
   position: relative;
   pointer-events: initial;
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
   color: var(--globalnotification_text_color);
   z-index: 1;
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';

package/es/version2/lookup/AlertHeader/css/AlertHeaderNew.module.css

@@ -4,7 +4,6 @@
 .container {
   composes: varClass;
   position: relative;
-  /* css:theme-validation:ignore */
   background-color: var(--zdt_alertlookup_bg);
   border-style: solid;
   border-color: var(--commonalert_border_color);

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css

@@ -5,8 +5,6 @@
     composes: varClass;
     min-height: var(--zd_size54) ;
     position: relative;
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
     color: var(--zdt_desktopnotification_text);
     background-color: var(--alert_lookup_bg_color);
     border-style: solid;