@zohodesk/dot 1.4.14 → 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

@@ -1,3 +1,5 @@
+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); }
+
 /**** Libraries ****/
 import React, { useRef } from 'react';
 import { defaultProps } from './props/defaultProps';
@@ -41,7 +43,9 @@ export default function StatusListItem(props) {
   let {
     role,
     ariaSelected,
-    ariaHidden = true
+    ariaHidden = true,
+    ariaLabel,
+    insetFocus = true
   } = a11y;
 
   if (isLink) {
@@ -64,9 +68,11 @@ export default function StatusListItem(props) {
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
 
-  return /*#__PURE__*/React.createElement(Container, {
+  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",
@@ -77,10 +83,8 @@ export default function StatusListItem(props) {
     eleRef: getReference,
     tagName: isLink ? 'a' : 'li',
     "data-title": isDisabled ? disableTitle : null,
-    tabindex: isDisabled ? '-1' : '0',
-    ...options,
-    ...a11y
-  }, /*#__PURE__*/React.createElement(Box, {
+    tabindex: isDisabled ? '-1' : '0'
+  }, options, a11y), /*#__PURE__*/React.createElement(Box, {
     className: `${style.statusType} ${style[bulletColor]}`
   }), /*#__PURE__*/React.createElement(Box, {
     flexible: true,

package/es/v1/lookup/Lookup/Lookup.js

@@ -1,3 +1,5 @@
+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); }
+
 /*** Libraries ***/
 import React, { useRef, useCallback, useEffect } from 'react';
 import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
@@ -66,7 +68,7 @@ export default function Lookup(props) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, []);
-  const content = /*#__PURE__*/React.createElement("div", {
+  const content = /*#__PURE__*/React.createElement("div", _extends({
     ref: createRef,
     tabIndex: "-1",
     "data-a11y-need-focus-style": "false",
@@ -78,9 +80,8 @@ export default function Lookup(props) {
     id: htmlId,
     className: `${style.box} ${style[`${size}Size`]} ${lookupClass ? lookupClass : ''}`,
     "data-id": dataId,
-    "data-test-id": dataId,
-    ...a11yAttributes
-  }, /*#__PURE__*/React.createElement(Container, {
+    "data-test-id": dataId
+  }, a11yAttributes), /*#__PURE__*/React.createElement(Container, {
     "data-drag-container": "true",
     isCover: false,
     className: isMinHeight ? `${style.wrapper}` : `${style.coverwrap}`

package/es/v1/lookup/header/Search/Search.js

@@ -1,3 +1,5 @@
+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); }
+
 /* eslint-disable react/forbid-component-props */
 
 /*** Libraries ***/
@@ -69,11 +71,7 @@ export default function Search(props) {
     selectedId: selectedId,
     onDropDownOpen: handleDropDownOpen,
     onDropDownClose: handleDropDownClose
-  }, /*#__PURE__*/React.createElement(SearchUI, { ...props,
-    ...searchUIExtraProps
-  })) : /*#__PURE__*/React.createElement(SearchUI, { ...props,
-    ...searchUIExtraProps
-  });
+  }, /*#__PURE__*/React.createElement(SearchUI, _extends({}, props, searchUIExtraProps))) : /*#__PURE__*/React.createElement(SearchUI, _extends({}, props, searchUIExtraProps));
 }
 Search.propTypes = Search_propTypes;
 

package/es/v1/notification/DesktopNotification/DesktopNotification.js

@@ -1,3 +1,5 @@
+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 from 'react';
 import defaultProps from './props/defaultProps';
 import { propTypes, DesktopNotificationUI_propTypes } from './props/propTypes';
@@ -115,15 +117,14 @@ export function DesktopNotificationUI(props) {
     let {
       uptoTablet
     } = _ref2;
-    return /*#__PURE__*/React.createElement(Container, {
+    return /*#__PURE__*/React.createElement(Container, _extends({
       className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass}
              ${isShrinkView ? style.globalNotify : ''} ${containerClass}
              ${uptoTablet ? style.tapWidth : style[`${size}`]}`,
       isCover: false,
       dataId: dataId,
-      isInline: uiVariantTwo,
-      ...ExtraProps
-    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
+      isInline: uiVariantTwo
+    }, ExtraProps), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
       type: type,
       title: title,
       variant: titleVariant,
@@ -177,9 +178,9 @@ export function DesktopNotificationUI(props) {
 DesktopNotificationUI.propTypes = DesktopNotificationUI_propTypes;
 DesktopNotificationUI.propTypes = defaultProps;
 export default function DesktopNotification(props) {
-  return /*#__PURE__*/React.createElement(AutoClose, { ...props,
+  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
     Element: DesktopNotificationUI
-  });
+  }));
 }
 DesktopNotification.propTypes = propTypes;
 DesktopNotification.defaultProps = defaultProps; // if (__DOCS__) {

package/es/version2/GlobalNotification/GlobalNotification.js

@@ -1,3 +1,5 @@
+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 from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes, UI_propTypes, new_propTypes } from './props/propTypes';
@@ -119,7 +121,7 @@ export function GlobalNotificationUI(props) {
   let {
     ExtraProps = {}
   } = customProps;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({
     ref: eleRef,
     className: ` ${style.message} 
         ${needShadow && shadowCount >= 2 ? shadowCount > 2 ? `${style.stackShadowTwo} ${style.stackShadowOne}` : style.stackShadowOne : ''}
@@ -128,9 +130,8 @@ export function GlobalNotificationUI(props) {
     "data-id": `show_${type}_message`,
     "data-test-id": `show_${type}_message`,
     tabIndex: 0,
-    "data-selector-id": dataSelectorId,
-    ...ExtraProps
-  }, /*#__PURE__*/React.createElement(Container, {
+    "data-selector-id": dataSelectorId
+  }, ExtraProps), /*#__PURE__*/React.createElement(Container, {
     className: `${style.container}`,
     alignBox: "row",
     isCover: false,
@@ -162,8 +163,8 @@ export function GlobalNotificationUI(props) {
 }
 GlobalNotificationUI.propTypes = UI_propTypes;
 export function GlobalNotificationNew(props) {
-  return /*#__PURE__*/React.createElement(AutoClose, { ...props,
+  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
     Element: GlobalNotificationUI
-  });
+  }));
 }
 GlobalNotificationNew.propTypes = new_propTypes;

package/es/version2/lookup/AlertLookup/AlertLookup.js

@@ -1,3 +1,5 @@
+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); }
+
 /**** Libraries ****/
 import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
@@ -121,7 +123,7 @@ export default class AlertLookup extends Component {
       ariaLabelledby: a11y && a11y.ariaLabelledby ? a11y.ariaLabelledby : ariaTitleId,
       ariaDescribedby: a11y && a11y.ariaDescribedby ? a11y.ariaDescribedby : ariaMessageId + ' ' + ariaConfirmMsgId
     };
-    return /*#__PURE__*/React.createElement(Lookup, {
+    return /*#__PURE__*/React.createElement(Lookup, _extends({
       onClose: onEsc == 'close' ? onClose : onCancelClick,
       needFocusScope: true,
       isActive: isActive,
@@ -131,9 +133,8 @@ export default class AlertLookup extends Component {
       onClick: onLookupClick,
       customClass: containerClass,
       a11y: a11y,
-      childAnimationName: childAnimationName,
-      ...LookupProps
-    }, /*#__PURE__*/React.createElement(Container, {
+      childAnimationName: childAnimationName
+    }, LookupProps), /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: align,
       wrap: "wrap"
@@ -142,15 +143,14 @@ export default class AlertLookup extends Component {
       className: style.section
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "column"
-    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AlertHeader, {
+    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AlertHeader, _extends({
       htmlId: ariaTitleId,
       title: title,
       type: type,
       needIcon: needIcon,
       onClose: onClose,
-      breakChildren: wrapHeader,
-      ...AlertHeaderProps
-    }, headerChildren ? headerChildren() : null)), /*#__PURE__*/React.createElement(Box, {
+      breakChildren: wrapHeader
+    }, AlertHeaderProps), headerChildren ? headerChildren() : null)), /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement("div", {
       className: `${style.innerSection} ${style[`${scroll}Scroll`] ? style[`${scroll}Scroll`] : ''} ${sectionClass}`
@@ -169,30 +169,30 @@ export default class AlertLookup extends Component {
     }, /*#__PURE__*/React.createElement(FormAction, {
       size: "small",
       paddingLeftSize: "xmedium"
-    }, /*#__PURE__*/React.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(Button, _extends({
       text: submitText,
       dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : `${dataId}_confirmButton`,
       onClick: onSubmitClick,
       palette: buttonPalette,
       customProps: {
         'data-a11y-autofocus': isDefaultFocus
-      },
-      ...PrimaryButtonProps,
+      }
+    }, PrimaryButtonProps, {
       a11y: {
         'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaLeaveButtonId
       },
       id: ariaLeaveButtonId
-    }), cancelText && /*#__PURE__*/React.createElement(Button, {
+    })), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
       dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
       text: cancelText,
       onClick: onCancelClick,
-      palette: "secondary",
-      ...SecondaryButtonProps,
+      palette: "secondary"
+    }, SecondaryButtonProps, {
       a11y: {
         'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaStayButtonId
       },
       id: ariaStayButtonId
-    })))) : null))));
+    }))))) : null))));
   }
 
 }

package/es/version2/notification/DesktopNotification/DesktopNotification.js

@@ -1,3 +1,5 @@
+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, { useState } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes, DesktopNotificationUI_propTypes } from './props/propTypes';
@@ -114,14 +116,13 @@ export function DesktopNotificationUI(props) {
     let {
       uptoTablet
     } = _ref2;
-    return /*#__PURE__*/React.createElement(Container, {
+    return /*#__PURE__*/React.createElement(Container, _extends({
       className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass}
             ${isShrinkView ? style.globalNotify : ''} ${containerClass}  ${uptoTablet ? style.tapWidth : style[`${size}`]}`,
       isCover: false,
       dataId: dataId,
-      isInline: uiVariantTwo,
-      ...ExtraProps
-    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
+      isInline: uiVariantTwo
+    }, ExtraProps), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
       type: type,
       title: title,
       variant: titleVariant,
@@ -174,9 +175,9 @@ export function DesktopNotificationUI(props) {
 }
 DesktopNotificationUI.propTypes = DesktopNotificationUI_propTypes;
 export default function DesktopNotification(props) {
-  return /*#__PURE__*/React.createElement(AutoClose, { ...props,
+  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
     Element: DesktopNotificationUI
-  });
+  }));
 }
 DesktopNotification.propTypes = propTypes;
 DesktopNotification.defaultProps = defaultProps; // if (__DOCS__) {

package/lib/list/Thread/Thread.js

@@ -60,12 +60,11 @@ var Thread = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          threadCount = _this$props.count,
+          count = _this$props.count,
           className = _this$props.className,
           iconTitle = _this$props.iconTitle,
           dataId = _this$props.dataId,
           align = _this$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,