@zohodesk/dot 1.4.14 → 1.4.16

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

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

package/es/version2/AlertClose/__tests__/AlertClose.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import AlertClose from '../AlertClose';
+describe('AlertClose', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AlertClose, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/version2/AlertClose/__tests__/__snapshots__/AlertClose.spec.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AlertClose rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="close   inflex rowdir both"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-Cross fbold closeIcon  "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size12);"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/version2/GlobalNotification/__tests__/GlobalNotification.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import GlobalNotification from '../GlobalNotification';
+describe('GlobalNotification', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(GlobalNotification, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/version2/GlobalNotification/__tests__/__snapshots__/GlobalNotification.spec.js.snap

@@ -0,0 +1,144 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GlobalNotification rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class=" message 
+        
+        
+      "
+    data-id="show__message"
+    data-selector-id="globalNotification"
+    data-test-id="show__message"
+    tabindex="0"
+  >
+    <div
+      class="container inflex rowdir vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="icon shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="iconContainer"
+          data-selector-id="alertIcons"
+        >
+          <svg
+            class=""
+            viewBox="0 0 100 100"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              class="danger_secondary"
+              d="M34.89,23.86s27.19-17.79,41-12.44S99,61.81,60.74,82,5.16,58.27,5,50.48C4.87,42.94,5,25,34.89,23.86Z"
+            />
+            <polygon
+              class="outer_cls2"
+              points="95 49.42 94.18 48.61 92.98 49.79 91.79 48.61 90.97 49.42 92.16 50.6 90.97 51.78 91.79 52.59 92.98 51.41 94.18 52.59 95 51.78 93.81 50.6 95 49.42"
+            />
+            <rect
+              class="outer_cls2"
+              height="2.18"
+              width="1.16"
+              x="10"
+              y="21.46"
+            />
+            <rect
+              class="outer_cls2"
+              height="1.15"
+              width="2.21"
+              x="11.8"
+              y="24.27"
+            />
+            <rect
+              class="outer_cls2"
+              height="2.18"
+              width="1.16"
+              x="10"
+              y="26.05"
+            />
+            <rect
+              class="outer_cls2"
+              height="1.15"
+              width="2.21"
+              x="7.15"
+              y="24.27"
+            />
+            <path
+              class="outer_cls3"
+              d="M11.8,82.6a2.76,2.76,0,1,1,2.8-2.76A2.78,2.78,0,0,1,11.8,82.6Zm0-4.37a1.61,1.61,0,1,0,1.63,1.61A1.62,1.62,0,0,0,11.8,78.23Z"
+            />
+            <ellipse
+              class="outer_cls4"
+              cx="50.21"
+              cy="11.21"
+              rx="1.22"
+              ry="1.21"
+            />
+            <polygon
+              class="outer_cls4"
+              points="59.77 90 61.8 87.28 63.69 90 59.77 90"
+            />
+            <path
+              class="outer_cls5"
+              d="M52.28,43.16s-13.79-9-20.78-6.31S19.75,62.42,39.17,72.67s28.2-12.05,28.28-16S67.45,43.72,52.28,43.16Z"
+            />
+            <path
+              class="outer_cls6"
+              d="M61.28,46.39a1.15,1.15,0,1,1-1.15-1.13A1.13,1.13,0,0,1,61.28,46.39ZM71.63,69.28a5.37,5.37,0,0,0,0-5.4L63,48.91a1,1,0,0,0-1.74,1l8.65,15A3.39,3.39,0,0,1,67,70H30.05a3.39,3.39,0,0,1-2.94-5.09l18.46-32a3.39,3.39,0,0,1,5.87,0l4.74,8.2H48a2.54,2.54,0,0,0-1.85.8,2.57,2.57,0,0,0-.69,1.91l.92,12.67a2.54,2.54,0,0,0,5.08,0l.76-9.85a1,1,0,0,0-.92-1.08,1,1,0,0,0-1.07.92l-.76,9.87a.55.55,0,0,1-1.1,0L47.46,43.7a.51.51,0,0,1,.14-.41.58.58,0,0,1,.4-.17h9.91a1,1,0,0,0,.86-1.5l-5.6-9.7a5.39,5.39,0,0,0-9.33,0l-18.46,32A5.39,5.39,0,0,0,30.05,72H67A5.35,5.35,0,0,0,71.63,69.28ZM49,61.34a2.61,2.61,0,1,0,2.6,2.6A2.6,2.6,0,0,0,49,61.34Z"
+            />
+          </svg>
+        </div>
+      </div>
+      <div
+        class="grow basis shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="text"
+          data-id="infoMessage"
+          data-test-id="infoMessage"
+        />
+      </div>
+      <div
+        class="close shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="close   inflex rowdir both"
+          data-id="close__message"
+          data-selector-id="container"
+          data-test-id="close__message"
+          data-title="Close"
+          tabindex="0"
+        >
+          <div
+            class="shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <i
+              aria-hidden="true"
+              class="zd_font_icons basic icon-Cross fbold closeIcon  "
+              data-id="fontIcon"
+              data-selector-id="fontIcon"
+              data-test-id="fontIcon"
+              style="--zd-iconfont-size: var(--zd_font_size12);"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/version2/alertIcons/__tests__/AlarmAlertIcon.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import AlarmAlertIcon from '../AlarmAlertIcon';
+describe('AlarmAlertIcon', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AlarmAlertIcon, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/version2/alertIcons/__tests__/AlertIcons.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import AlertIcons from '../AlertIcons';
+describe('AlertIcons', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AlertIcons, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/version2/alertIcons/__tests__/DangerAlertIcon.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DangerAlertIcon from '../DangerAlertIcon';
+describe('DangerAlertIcon', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DangerAlertIcon, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/version2/alertIcons/__tests__/ErrorAlertIcon.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ErrorAlertIcon from '../ErrorAlertIcon';
+describe('ErrorAlertIcon', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ErrorAlertIcon, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/version2/alertIcons/__tests__/InfoAlertIcon.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import InfoAlertIcon from '../InfoAlertIcon';
+describe('InfoAlertIcon', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InfoAlertIcon, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/version2/alertIcons/__tests__/NotificationAlertIcon.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import NotificationAlertIcon from '../NotificationAlertIcon';
+describe('NotificationAlertIcon', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(NotificationAlertIcon, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/version2/alertIcons/__tests__/SuccessAlertIcon.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import SuccessAlertIcon from '../SuccessAlertIcon';
+describe('SuccessAlertIcon', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SuccessAlertIcon, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/version2/alertIcons/__tests__/WarningAlertIcon.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import WarningAlertIcon from '../WarningAlertIcon';
+describe('WarningAlertIcon', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(WarningAlertIcon, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});