@zohodesk/dot 1.0.0-temp-184.2 → 1.0.0-temp-186

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

@@ -8,9 +8,7 @@ import { Box, Container } from '@zohodesk/components/es/v1/Layout';
 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 EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
 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 [optionsList, setOptionsList] = useState(options);
+  const [searchString, setSearchString] = useState('');
   const getAriaId = useUniqueId();
   const {
     tabIndex = 0,
@@ -94,72 +87,19 @@ function StatusDropdown(props) {
     return /*#__PURE__*/React.createElement(EmptySearch, {
       size: "small"
     });
-  } // 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);
@@ -168,8 +108,7 @@ function StatusDropdown(props) {
 
   function handleChange(value, e) {
     let foptions = searchList(value);
-    setSearchString(value); // setSelectedIndex(-1);
-
+    setSearchString(value);
     setOptionsList(foptions);
   }
 
@@ -177,14 +116,11 @@ function StatusDropdown(props) {
     let foptions = searchList('');
     setSearchString('');
     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);
     }
   }
 
@@ -203,19 +139,7 @@ function StatusDropdown(props) {
     setOptionsList(options);
   }, [options.length]);
   useEffectCallOnlyAfterState(() => {
-    if (isPopupOpen) {
-      onSearchClear();
-    } //   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}`];
-    //     optionsContainer.current && scrollTo(optionsContainer.current, selSuggestion);
-
+    isPopupOpen && onSearchClear();
   }, [isPopupOpen]);
   return /*#__PURE__*/React.createElement("div", {
     className: style.posRel,
@@ -229,8 +153,7 @@ function StatusDropdown(props) {
     eleRef: getTargetRef,
     align: targetAlign,
     isCover: false,
-    dataId: dataId // onClick={removeClose}
-    ,
+    dataId: dataId,
     disabled: isDisabled || isReadOnly ? true : false,
     "aria-haspopup": isSearch ? 'listbox' : 'menu',
     "aria-expanded": isPopupReady && isEditable ? true : false,
@@ -274,7 +197,14 @@ function StatusDropdown(props) {
       needResponsive: needResponsive,
       isResponsivePadding: true,
       needFocusScope: true,
-      onClose: handleTogglePopup
+      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, {
@@ -282,9 +212,7 @@ function StatusDropdown(props) {
       onChange: handleChange,
       value: searchString,
       onClear: onSearchClear,
-      size: searchBoxSize // inputRef={searchInputRef}
-      // onKeyDown={handleKeyDown}
-      ,
+      size: searchBoxSize,
       customProps: {
         TextBoxProps: {
           'data-a11y-autofocus': true
@@ -311,29 +239,24 @@ function StatusDropdown(props) {
       shrink: true,
       dataId: `${dataId}_list`,
       preventParentScroll: "vertical",
-      className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}` // eleRef={scrollContentRef}
-      ,
+      className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}`,
       onScroll: handleScroll,
       role: isSearch ? 'listbox' : 'menu',
       tabindex: "-1",
-      "data-scroll": "true"
+      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(React.Fragment, {
-        key: i
-      }, /*#__PURE__*/React.createElement(StatusListItem, {
+      return /*#__PURE__*/React.createElement(StatusListItem, {
+        key: i,
         dataId: `dataid_${i}`,
         value: listItemText,
         id: item[idName],
         active: isActive,
         onClick: e => onSelect(item, e),
-        index: i // highlight={selectedIndex === i}
-        ,
+        index: i,
         needTick: needTick,
-        needBorder: false // onMouseEnter={handleMouseEnter}
-        // getRef={itemRef}
-        ,
+        needBorder: false,
         bulletColor: item[statusColor],
         title: listItemText,
         needMultiLineText: needMultiLineText,
@@ -343,8 +266,11 @@ function StatusDropdown(props) {
           ariaSelected: isActive,
           ariaLabel: listItemText
         }
-      }));
-    })) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
+      });
+    }), 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,5 +1,3 @@
-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';
@@ -68,7 +66,7 @@ export default function StatusListItem(props) {
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
 
-  return /*#__PURE__*/React.createElement(Container, _extends({
+  return /*#__PURE__*/React.createElement(Container, {
     role: role,
     "aria-selected": ariaSelected,
     "aria-label": ariaLabel,
@@ -83,8 +81,10 @@ 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,5 +1,3 @@
-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';
@@ -68,7 +66,7 @@ export default function Lookup(props) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, []);
-  const content = /*#__PURE__*/React.createElement("div", _extends({
+  const content = /*#__PURE__*/React.createElement("div", {
     ref: createRef,
     tabIndex: "-1",
     "data-a11y-need-focus-style": "false",
@@ -80,8 +78,9 @@ 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,5 +1,3 @@
-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 ***/
@@ -71,7 +69,11 @@ export default function Search(props) {
     selectedId: selectedId,
     onDropDownOpen: handleDropDownOpen,
     onDropDownClose: handleDropDownClose
-  }, /*#__PURE__*/React.createElement(SearchUI, _extends({}, props, searchUIExtraProps))) : /*#__PURE__*/React.createElement(SearchUI, _extends({}, props, searchUIExtraProps));
+  }, /*#__PURE__*/React.createElement(SearchUI, { ...props,
+    ...searchUIExtraProps
+  })) : /*#__PURE__*/React.createElement(SearchUI, { ...props,
+    ...searchUIExtraProps
+  });
 }
 Search.propTypes = Search_propTypes;
 

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

@@ -1,5 +1,3 @@
-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';
@@ -117,14 +115,15 @@ export function DesktopNotificationUI(props) {
     let {
       uptoTablet
     } = _ref2;
-    return /*#__PURE__*/React.createElement(Container, _extends({
+    return /*#__PURE__*/React.createElement(Container, {
       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,
@@ -178,9 +177,9 @@ export function DesktopNotificationUI(props) {
 DesktopNotificationUI.propTypes = DesktopNotificationUI_propTypes;
 DesktopNotificationUI.propTypes = defaultProps;
 export default function DesktopNotification(props) {
-  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(AutoClose, { ...props,
     Element: DesktopNotificationUI
-  }));
+  });
 }
 DesktopNotification.propTypes = propTypes;
 DesktopNotification.defaultProps = defaultProps; // if (__DOCS__) {

package/es/version2/GlobalNotification/GlobalNotification.js

@@ -1,5 +1,3 @@
-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';
@@ -121,7 +119,7 @@ export function GlobalNotificationUI(props) {
   let {
     ExtraProps = {}
   } = customProps;
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", {
     ref: eleRef,
     className: ` ${style.message} 
         ${needShadow && shadowCount >= 2 ? shadowCount > 2 ? `${style.stackShadowTwo} ${style.stackShadowOne}` : style.stackShadowOne : ''}
@@ -130,8 +128,9 @@ 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,
@@ -163,8 +162,8 @@ export function GlobalNotificationUI(props) {
 }
 GlobalNotificationUI.propTypes = UI_propTypes;
 export function GlobalNotificationNew(props) {
-  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(AutoClose, { ...props,
     Element: GlobalNotificationUI
-  }));
+  });
 }
 GlobalNotificationNew.propTypes = new_propTypes;

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

@@ -1,5 +1,3 @@
-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';
@@ -123,7 +121,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, _extends({
+    return /*#__PURE__*/React.createElement(Lookup, {
       onClose: onEsc == 'close' ? onClose : onCancelClick,
       needFocusScope: true,
       isActive: isActive,
@@ -133,8 +131,9 @@ 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"
@@ -143,14 +142,15 @@ export default class AlertLookup extends Component {
       className: style.section
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "column"
-    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AlertHeader, _extends({
+    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AlertHeader, {
       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, _extends({
+    }, /*#__PURE__*/React.createElement(Button, {
       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, _extends({
+    }), cancelText && /*#__PURE__*/React.createElement(Button, {
       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,5 +1,3 @@
-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';
@@ -116,13 +114,14 @@ export function DesktopNotificationUI(props) {
     let {
       uptoTablet
     } = _ref2;
-    return /*#__PURE__*/React.createElement(Container, _extends({
+    return /*#__PURE__*/React.createElement(Container, {
       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,
@@ -175,9 +174,9 @@ export function DesktopNotificationUI(props) {
 }
 DesktopNotificationUI.propTypes = DesktopNotificationUI_propTypes;
 export default function DesktopNotification(props) {
-  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(AutoClose, { ...props,
     Element: DesktopNotificationUI
-  }));
+  });
 }
 DesktopNotification.propTypes = propTypes;
 DesktopNotification.defaultProps = defaultProps; // if (__DOCS__) {

package/lib/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,