@zohodesk/dot 1.4.14 → 1.4.16

package/lib/svg/__tests__/SnippetIcon.spec.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _SnippetIcon = _interopRequireDefault(require("../SnippetIcon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('SnippetIcon', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SnippetIcon["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/svg/__tests__/TemplateIcon.spec.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _TemplateIcon = _interopRequireDefault(require("../TemplateIcon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('TemplateIcon', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TemplateIcon["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/svg/__tests__/__snapshots__/PlusIcon.spec.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PlusIcon rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="  default svgCenter "
+  >
+    <svg
+      data-id="SVG"
+      data-test-id="SVG"
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <g>
+        <path
+          d="M16,2.7c0.4,0,0.7,0.1,0.9,0.4s0.4,0.6,0.4,0.9v10.7H28c0.4,0,0.7,0.1,0.9,0.4c0.3,0.3,0.4,0.6,0.4,0.9 c0,0.4-0.1,0.7-0.4,0.9c-0.3,0.3-0.6,0.4-0.9,0.4H17.3V28c0,0.4-0.1,0.7-0.4,0.9c-0.3,0.3-0.6,0.4-0.9,0.4c-0.4,0-0.7-0.1-0.9-0.4 c-0.3-0.3-0.4-0.6-0.4-0.9V17.3H4c-0.4,0-0.7-0.1-0.9-0.4S2.7,16.4,2.7,16s0.1-0.7,0.4-0.9c0.3-0.3,0.6-0.4,0.9-0.4h10.7V4 c0-0.4,0.1-0.7,0.4-0.9C15.3,2.8,15.6,2.7,16,2.7z"
+          style="fill: #767d89;"
+        />
+      </g>
+    </svg>
+  </div>
+</DocumentFragment>
+`;

package/lib/svg/__tests__/__snapshots__/SnippetIcon.spec.js.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SnippetIcon rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="  default svgCenter "
+  >
+    <svg
+      data-id="SVG"
+      data-test-id="SVG"
+      height="100%"
+      viewBox="0 0 31 32"
+      width="100%"
+    >
+      <g>
+        <path
+          d="M14.4,8.2L15.6,9L16,8.4l-1-0.7l2.5-3.7L11.5,0L8.9,3.8L7.9,3L7.6,3.6l1.2,0.8c-2.3,3-5.9,0.8-6,0.7L2.3,4.9L0,23.8 l16.6-9.3l-0.4-0.3C15.9,13.9,12.6,11.5,14.4,8.2L14.4,8.2z M1.5,22l5.2-7.7c0.3,0.1,0.6,0.2,0.9,0.2c1.2,0,2.1-0.9,2.2-2.1 c0-1.2-0.9-2.1-2.1-2.2c-1.2,0-2.1,0.9-2.2,2.1c0,0.6,0.2,1.2,0.7,1.6L1,21.6L2.8,6c1.2,0.6,4.4,1.7,6.5-1.1l4.5,3 c-1.8,3,0.4,5.6,1.4,6.5L1.5,22L1.5,22z M6.7,13.6c-0.7-0.4-0.8-1.3-0.4-2s1.3-0.8,2-0.4c0.7,0.4,0.8,1.3,0.4,2 c-0.2,0.3-0.5,0.5-0.9,0.6C7.5,13.9,7.1,13.8,6.7,13.6L6.7,13.6z"
+        />
+        <path
+          d="M30.9,25c-4.9,0.7-5.4,1.2-5.9,6.7c-0.6-5.4-1.1-6-6.1-6.5c4.9-0.7,5.4-1.2,5.9-6.7 C25.4,23.9,25.9,24.5,30.9,25z M30.3,8.2c-4.5,0.6-4.9,1.1-5.5,6.3c-0.5-5.3-0.9-5.8-5.4-6.4c4.5-0.6,4.9-1.1,5.5-6.3 C25.4,7.1,25.8,7.6,30.3,8.2z M16.2,25.7c-4.5,0.6-4.9,1.1-5.5,6.3c-0.5-5.3-0.9-5.8-5.4-6.4c4.5-0.6,4.9-1.1,5.5-6.3 C11.3,24.6,11.7,25.1,16.2,25.7z"
+          style="fill: #03A3FE;"
+        />
+      </g>
+    </svg>
+  </div>
+</DocumentFragment>
+`;

package/lib/svg/__tests__/__snapshots__/TemplateIcon.spec.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TemplateIcon rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="  default svgCenter "
+  >
+    <svg
+      data-id="SVG"
+      data-test-id="SVG"
+      height="100%"
+      viewBox="0 0 40 40"
+      width="100%"
+    >
+      <path
+        d="M33.09,3H6.91A3.91,3.91,0,0,0,3,6.91V33.09A3.91,3.91,0,0,0,6.91,37H33.09A3.91,3.91,0,0,0,37,33.09V6.91A3.92,3.92,0,0,0,33.09,3ZM6.91,5H33.09A1.92,1.92,0,0,1,35,6.91v4.62H5V6.91A1.92,1.92,0,0,1,6.91,5ZM33.09,35H6.91A1.92,1.92,0,0,1,5,33.09V13.53H35V33.09A1.92,1.92,0,0,1,33.09,35Z"
+      />
+      <path
+        d="M9.33,9.33A1.07,1.07,0,1,0,8.27,8.27,1.06,1.06,0,0,0,9.33,9.33Z"
+      />
+      <path
+        d="M13.6,9.33a1.07,1.07,0,1,0-1.07-1.06A1.06,1.06,0,0,0,13.6,9.33Z"
+      />
+      <path
+        d="M24.87,23H21V19.13a1,1,0,1,0-2,0V23H15.13a1,1,0,0,0,0,2H19v3.86a1,1,0,0,0,2,0V25h3.87a1,1,0,1,0,0-2Z"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;

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

@@ -322,7 +322,8 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           eleRef: _this3.getContainerRef
         }, searchList.length ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true,
-          shrink: true
+          shrink: true,
+          dataId: "".concat(dataId, "_Options")
         }, searchList.map(function (item, index) {
           var name = item.name,
               isNew = item.isNew,

package/lib/v1/list/Thread/Thread.js

@@ -20,12 +20,11 @@ var _ThreadModule = _interopRequireDefault(require("../../../list/Thread/Thread.
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var Thread = function Thread(props) {
-  var threadCount = props.count,
+  var count = props.count,
       className = props.className,
       iconTitle = props.iconTitle,
       dataId = props.dataId,
       align = 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,

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

@@ -29,10 +29,6 @@ var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"))
 
 var _EmptySearch = _interopRequireDefault(require("@zohodesk/svg/lib/emptystate/version3/EmptySearch"));
 
-var _Common = require("@zohodesk/components/es/utils/Common");
-
-var _TextBox = _interopRequireDefault(require("@zohodesk/components/es/v1/TextBox/TextBox"));
-
 var _CommonEmptyState = _interopRequireDefault(require("../../../emptystate/CommonEmptyState/CommonEmptyState"));
 
 var _StatusListItem = _interopRequireDefault(require("../StatusListItem/StatusListItem"));
@@ -117,7 +113,7 @@ function StatusDropdown(props) {
       onTogglePopup = props.onTogglePopup,
       onClick = props.onClick,
       onSelectLabel = props.onSelectLabel,
-      isNextOptions = props.isNextOptions,
+      isFetchingOptions = props.isFetchingOptions,
       getNextOptions = props.getNextOptions,
       options = props.options,
       _props$a11y = props.a11y,
@@ -128,20 +124,11 @@ function StatusDropdown(props) {
       optionsList = _useState2[0],
       setOptionsList = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(0),
+  var _useState3 = (0, _react.useState)(''),
       _useState4 = _slicedToArray(_useState3, 2),
-      selectedIndex = _useState4[0],
-      setSelectedIndex = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(''),
-      _useState6 = _slicedToArray(_useState5, 2),
-      searchString = _useState6[0],
-      setSearchString = _useState6[1];
-
-  var hiddenInput = (0, _react.useRef)(null);
-  var searchInput = (0, _react.useRef)(null);
-  var optionsContainer = (0, _react.useRef)(null);
-  var dropdown = (0, _react.useRef)({});
+      searchString = _useState4[0],
+      setSearchString = _useState4[1];
+
   var getAriaId = (0, _IdProvider.useUniqueId)();
   var _a11y$tabIndex = a11y.tabIndex,
       tabIndex = _a11y$tabIndex === void 0 ? 0 : _a11y$tabIndex,
@@ -157,84 +144,18 @@ function StatusDropdown(props) {
     });
   }
 
-  function handleInputRef(el) {
-    hiddenInput.current = el;
-  }
-
-  function itemRef(ele, index, id) {
-    dropdown.current["suggestion_".concat(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) {
-    var keyCode = e.keyCode;
-    var 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) {
     var foptions = options.filter(function (dept) {
       return dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1;
@@ -245,7 +166,6 @@ function StatusDropdown(props) {
   function handleChange(value, e) {
     var foptions = searchList(value);
     setSearchString(value);
-    setSelectedIndex(-1);
     setOptionsList(foptions);
   }
 
@@ -255,13 +175,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);
     }
   }
 
@@ -278,18 +194,7 @@ function StatusDropdown(props) {
     setOptionsList(options);
   }, [options.length]);
   (0, _hooks.useEffectCallOnlyAfterState)(function () {
-    setTimeout(function () {
-      isPopupOpen && isSearch ? searchInput.current && searchInput.current.focus() : hiddenInput.current && hiddenInput.current.focus();
-    }, 10);
-    var mergeOptions = optionsList;
-    var option = mergeOptions[selectedIndex];
-    var id = option && option[idName] || {};
-    var selSuggestion = dropdown.current["suggestion_".concat(id)];
-
-    if (isPopupOpen) {
-      optionsContainer.current && (0, _Common.scrollTo)(optionsContainer.current, selSuggestion);
-      onSearchClear();
-    }
+    isPopupOpen && onSearchClear();
   }, [isPopupOpen]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _StatusDropdownModule["default"].posRel,
@@ -299,12 +204,11 @@ function StatusDropdown(props) {
     tagName: "button",
     alignBox: "row",
     className: "".concat(_StatusDropdownModule["default"].container, " ").concat(containerClass, " ").concat(_semanticButtonModule["default"].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,
@@ -312,15 +216,7 @@ function StatusDropdown(props) {
     "aria-labelledby": ariaLabelledby,
     "aria-label": ariaLabel,
     "aria-disabled": isDisabled || isReadOnly
-  }, isEditable ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: _StatusDropdownModule["default"].hiddenInput
-  }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
-    type: "text",
-    inputRef: handleInputRef,
-    onKeyDown: handleKeyDown,
-    needAppearance: false,
-    placeHolder: placeHolderText
-  })) : null, children ? children : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+  }, children ? children : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     className: "".concat(_StatusDropdownModule["default"].value, " toggleDropText"),
     shrink: true,
     tagName: "span",
@@ -352,7 +248,16 @@ function StatusDropdown(props) {
         customDropBoxWrap: _StatusDropdownModule["default"].dropBoxContainer
       },
       needResponsive: needResponsive,
-      isResponsivePadding: true
+      isResponsivePadding: true,
+      needFocusScope: true,
+      onClose: handleTogglePopup,
+      customProps: {
+        focusScopeProps: {
+          searchValue: searchString,
+          loadNextOptions: getNextOptions,
+          isFetchingOptions: isFetchingOptions
+        }
+      }
     }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
       className: _StatusDropdownModule["default"].search
     }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
@@ -361,8 +266,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,
@@ -385,38 +293,39 @@ function StatusDropdown(props) {
       dataId: "".concat(dataId, "_list"),
       preventParentScroll: "vertical",
       className: "".concat(tabletMode ? _StatusDropdownModule["default"].responsivemaxHgt : _StatusDropdownModule["default"].maxHgt),
-      eleRef: scrollContentRef,
       onScroll: handleScroll,
       role: isSearch ? 'listbox' : 'menu',
-      "aria-labelledby": ariaTitleId,
-      tabindex: "-1"
+      tabindex: "-1",
+      isScrollAttribute: true
     }, optionsList.length != 0 && isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, optionsList.map(function (item, i) {
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-        key: i
-      }, /*#__PURE__*/_react["default"].createElement(_StatusListItem["default"], {
+      var listItemText = item[keyName];
+      var isActive = value === listItemText;
+      return /*#__PURE__*/_react["default"].createElement(_StatusListItem["default"], {
+        key: i,
         dataId: "dataid_".concat(i),
-        value: item[keyName],
+        value: listItemText,
         id: item[idName],
-        active: value === item[keyName],
+        active: isActive,
         onClick: function onClick(e) {
           return onSelect(item, e);
         },
         index: i,
-        highlight: selectedIndex === i,
         needTick: needTick,
         needBorder: false,
-        onMouseEnter: handleMouseEnter,
-        getRef: itemRef,
         bulletColor: item[statusColor],
-        title: item[keyName],
+        title: listItemText,
         needMultiLineText: needMultiLineText,
+        autoHover: true,
         a11y: {
           role: isSearch ? 'option' : 'menuitem',
-          ariaSelected: value === item[keyName],
-          'data-a11y-list-active': selectedIndex === i
+          ariaSelected: isActive,
+          ariaLabel: listItemText
         }
-      }));
-    })) : isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_CommonEmptyState["default"], {
+      });
+    }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      isCover: false,
+      align: "both"
+    }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))) : isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_CommonEmptyState["default"], {
       className: _StatusDropdownModule["default"].svgWrapper,
       title: searchErrorText || 'No results',
       description: searchEmptyHint,

package/lib/v1/list/status/StatusDropdown/props/defaultProps.js

@@ -21,6 +21,7 @@ var defaultProps = {
   boxSize: 'medium',
   needExternalPopupState: false,
   statusColor: 'statusColor',
-  needMultiLineText: false
+  needMultiLineText: false,
+  isFetchingOptions: false
 };
 exports.defaultProps = defaultProps;

package/lib/v1/list/status/StatusDropdown/props/propTypes.js

@@ -30,5 +30,5 @@ var propTypes = (_propTypes = {
   idName: _propTypes2["default"].string,
   isArrow: _propTypes2["default"].bool,
   isDataLoaded: _propTypes2["default"].bool
-}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isNextOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _defineProperty(_propTypes, "onSelectLabel", _propTypes2["default"].func), _defineProperty(_propTypes, "top", _propTypes2["default"].number), _defineProperty(_propTypes, "a11y", _propTypes2["default"].object), _propTypes);
+}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isFetchingOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _defineProperty(_propTypes, "onSelectLabel", _propTypes2["default"].func), _defineProperty(_propTypes, "top", _propTypes2["default"].number), _defineProperty(_propTypes, "a11y", _propTypes2["default"].object), _propTypes);
 exports.propTypes = propTypes;

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

@@ -58,7 +58,10 @@ function StatusListItem(props) {
   var role = a11y.role,
       ariaSelected = a11y.ariaSelected,
       _a11y$ariaHidden = a11y.ariaHidden,
-      ariaHidden = _a11y$ariaHidden === void 0 ? true : _a11y$ariaHidden;
+      ariaHidden = _a11y$ariaHidden === void 0 ? true : _a11y$ariaHidden,
+      ariaLabel = a11y.ariaLabel,
+      _a11y$insetFocus = a11y.insetFocus,
+      insetFocus = _a11y$insetFocus === void 0 ? true : _a11y$insetFocus;
 
   if (isLink) {
     options.href = href;
@@ -83,6 +86,8 @@ function StatusListItem(props) {
   return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
     role: role,
     "aria-selected": ariaSelected,
+    "aria-label": ariaLabel,
+    "data-a11y-inset-focus": insetFocus,
     isCover: false,
     align: "baseline",
     alignBox: "row",

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

@@ -0,0 +1,18 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _AlertClose = _interopRequireDefault(require("../AlertClose"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('AlertClose', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AlertClose["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/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/lib/version2/GlobalNotification/__tests__/GlobalNotification.spec.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _GlobalNotification = _interopRequireDefault(require("../GlobalNotification"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('GlobalNotification', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_GlobalNotification["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});