@zohodesk/dot 1.0.0-temp-181.8 → 1.0.0-temp-184

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

@@ -7,9 +7,9 @@ import { Box, Container } from '@zohodesk/components/lib/Layout';
 import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
 import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
-import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
-import { scrollTo } from '@zohodesk/components/lib/utils/Common.js';
-import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
+import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch'; // import { scrollTo } from '@zohodesk/components/lib/utils/Common.js';
+// import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
+
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
 import StatusListItem from '../StatusListItem/StatusListItem';
 import commonStyle from '@zohodesk/components/lib/common/common.module.css';
@@ -23,20 +23,20 @@ export class StatusDropdown extends React.Component {
     super(props);
     this.state = {
       searchString: '',
-      selectedIndex: 0,
+      // selectedIndex: 0,
       options: props.options
     };
-    this.handleChange = this.handleChange.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleChange = this.handleChange.bind(this); // this.handleKeyDown = this.handleKeyDown.bind(this);
+
     this.onSelect = this.onSelect.bind(this);
     this.handleTogglePopup = this.handleTogglePopup.bind(this);
     this.onSearchClear = this.onSearchClear.bind(this);
     this.searchList = this.searchList.bind(this);
-    this.scrollContentRef = this.scrollContentRef.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+    this.scrollContentRef = this.scrollContentRef.bind(this); // this.handleMouseEnter = this.handleMouseEnter.bind(this);
+
     this.searchInputRef = this.searchInputRef.bind(this);
-    this.itemRef = this.itemRef.bind(this);
-    this.inputRef = this.inputRef.bind(this);
+    this.itemRef = this.itemRef.bind(this); // this.inputRef = this.inputRef.bind(this);
+
     this.handleScroll = this.handleScroll.bind(this);
     this.emptySearchSVG = this.emptySearchSVG.bind(this);
     this.getAriaId = getUniqueId(this);
@@ -46,11 +46,10 @@ export class StatusDropdown extends React.Component {
     return /*#__PURE__*/React.createElement(EmptySearch, {
       size: "small"
     });
-  }
+  } // inputRef(el) {
+  //   this.hiddenInput = el;
+  // }
 
-  inputRef(el) {
-    this.hiddenInput = el;
-  }
 
   itemRef(ele, index, id) {
     this[`suggestion_${id}`] = ele;
@@ -104,107 +103,68 @@ export class StatusDropdown extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    let {
-      isPopupOpen,
-      isSearch,
-      idName
-    } = this.props;
-    let {
-      selectedIndex,
-      options
-    } = this.state;
-
-    if (prevProps.isPopupOpen != isPopupOpen) {
-      setTimeout(() => {
-        isPopupOpen && isSearch ? this.searchInput && this.searchInput.focus() : this.hiddenInput && this.hiddenInput.focus();
-      }, 10);
-    }
-
-    let mergeOptions = options;
-    let option = mergeOptions[selectedIndex];
-    let id = option && option[idName] || {};
-    let selSuggestion = this[`suggestion_${id}`];
-
-    if (isPopupOpen) {
-      this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
-    }
-
+    // let { isPopupOpen, isSearch, idName } = this.props;
+    // let { selectedIndex, options } = this.state;
+    // if (prevProps.isPopupOpen != isPopupOpen) {
+    //   setTimeout(() => {
+    //     isPopupOpen && isSearch
+    //       ? this.searchInput && this.searchInput.focus()
+    //       : this.hiddenInput && this.hiddenInput.focus();
+    //   }, 10);
+    // }
+    // let mergeOptions = options;
+    // let option = mergeOptions[selectedIndex];
+    // let id = (option && option[idName]) || {};
+    // let selSuggestion = this[`suggestion_${id}`];
+    // if (isPopupOpen) {
+    //   this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
+    // }
     if (!prevProps.isPopupOpen && this.props.isPopupOpen) {
       this.onSearchClear();
     }
-  }
-
-  handleKeyDown(e) {
-    let {
-      keyCode
-    } = e;
-    let {
-      selectedIndex,
-      options
-    } = this.state;
-    let totalIndex = options.length;
-    let {
-      togglePopup,
-      onClick,
-      boxPosition,
-      isPopupReady,
-      isNextOptions,
-      getNextOptions,
-      onTogglePopup,
-      isPopupOpen
-    } = this.props;
-
-    if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
-      e.preventDefault(); //prevent body scroll
-    }
-
-    if (isPopupReady) {
-      switch (keyCode) {
-        case 40:
-          if (selectedIndex === totalIndex - 1) {
-            this.setState({
-              selectedIndex: 0
-            });
-          } else {
-            if (selectedIndex === totalIndex - 3) {
-              isNextOptions && getNextOptions && getNextOptions();
-            }
-
-            this.setState({
-              selectedIndex: selectedIndex + 1
-            });
-          }
-
-          break;
-
-        case 38:
-          if (selectedIndex === 0) {
-            this.setState({
-              selectedIndex: totalIndex - 1
-            });
-          } else {
-            this.setState({
-              selectedIndex: selectedIndex - 1
-            });
-          }
+  } // handleKeyDown(e) {
+  //   let { keyCode } = e;
+  //   let { selectedIndex, options } = this.state;
+  //   let totalIndex = options.length;
+  //   let { togglePopup, onClick, boxPosition, isPopupReady, isNextOptions, getNextOptions, onTogglePopup, isPopupOpen } =
+  //     this.props;
+  //   if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
+  //     e.preventDefault(); //prevent body scroll
+  //   }
+  //   if (isPopupReady) {
+  //     switch (keyCode) {
+  //       case 40:
+  //         if (selectedIndex === totalIndex - 1) {
+  //           this.setState({ selectedIndex: 0 });
+  //         } else {
+  //           if (selectedIndex === totalIndex - 3) {
+  //             isNextOptions && getNextOptions && getNextOptions();
+  //           }
+  //           this.setState({ selectedIndex: selectedIndex + 1 });
+  //         }
+  //         break;
+  //       case 38:
+  //         if (selectedIndex === 0) {
+  //           this.setState({ selectedIndex: totalIndex - 1 });
+  //         } else {
+  //           this.setState({ selectedIndex: selectedIndex - 1 });
+  //         }
+  //         break;
+  //       case 13:
+  //         onClick && onClick(options[selectedIndex].name, e);
+  //         onTogglePopup && onTogglePopup(isPopupOpen);
+  //         togglePopup(e, boxPosition);
+  //         break;
+  //       default:
+  //         break;
+  //     }
+  //   } else {
+  //     if (keyCode === 13 || keyCode === 40) {
+  //       togglePopup(e, boxPosition);
+  //     }
+  //   }
+  // }
 
-          break;
-
-        case 13:
-          onClick && onClick(options[selectedIndex].name, e);
-          onTogglePopup && onTogglePopup(isPopupOpen);
-          togglePopup(e, boxPosition);
-          break;
-
-        default:
-          break;
-      }
-    } else {
-      if (keyCode === 13 || keyCode === 40) {
-        togglePopup(e, boxPosition);
-      }
-    }
-  }
 
   searchList(value) {
     let {
@@ -219,7 +179,7 @@ export class StatusDropdown extends React.Component {
     let foptions = this.searchList(value);
     this.setState({
       searchString: value,
-      selectedIndex: -1,
+      // selectedIndex: -1,
       options: foptions
     });
   }
@@ -230,13 +190,12 @@ export class StatusDropdown extends React.Component {
       searchString: '',
       options: foptions
     });
-  }
+  } // handleMouseEnter(id, value, index, e) {
+  //   this.setState({
+  //     selectedIndex: index
+  //   });
+  // }
 
-  handleMouseEnter(id, value, index, e) {
-    this.setState({
-      selectedIndex: index
-    });
-  }
 
   handleScroll(e) {
     const {
@@ -262,8 +221,7 @@ export class StatusDropdown extends React.Component {
 
   render() {
     let {
-      options,
-      selectedIndex
+      options
     } = this.state;
     let {
       value,
@@ -328,12 +286,11 @@ export class StatusDropdown extends React.Component {
       tagName: "button",
       alignBox: "row",
       className: `${style.container} ${containerClass} ${btnStyle.buttonReset}`,
-      onMouseDown: !showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : null,
+      onClick: !showOnHover && !isDisabled && !isReadOnly && isEditable ? this.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,
@@ -341,15 +298,7 @@ export class StatusDropdown extends React.Component {
       "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: this.inputRef,
-      onKeyDown: this.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",
@@ -383,7 +332,10 @@ export class StatusDropdown extends React.Component {
           customDropBoxWrap: style.dropBoxContainer
         },
         needResponsive: needResponsive,
-        isResponsivePadding: true
+        isResponsivePadding: true,
+        tabindex: 0,
+        needFocusScope: true,
+        onClose: this.handleTogglePopup
       }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
         className: style.search
       }, /*#__PURE__*/React.createElement(TextBoxIcon, {
@@ -392,8 +344,13 @@ export class StatusDropdown extends React.Component {
         value: searchString,
         onClear: this.onSearchClear,
         size: searchBoxSize,
-        inputRef: this.searchInputRef,
-        onKeyDown: this.handleKeyDown,
+        inputRef: this.searchInputRef // onKeyDown={this.handleKeyDown}
+        ,
+        customProps: {
+          TextBoxProps: {
+            'data-a11y-autofocus': true
+          }
+        },
         a11y: {
           ariaHaspopup: isSearch ? 'listbox' : 'menu',
           ariaExpanded: isPopupReady,
@@ -419,8 +376,9 @@ export class StatusDropdown extends React.Component {
         eleRef: this.scrollContentRef,
         onScroll: this.handleScroll,
         role: isSearch ? 'listbox' : 'menu',
-        "aria-labelledby": ariaTitleId,
-        tabindex: "-1"
+        "aria-labelledby": ariaTitleId // tabindex='-1'
+        ,
+        "data-scroll": "true"
       }, options.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, {
         key: i
       }, /*#__PURE__*/React.createElement(StatusListItem, {
@@ -429,11 +387,11 @@ export class StatusDropdown extends React.Component {
         id: item[idName],
         active: value === item[keyName],
         onClick: this.onSelect.bind(this, item),
-        index: i,
-        highlight: selectedIndex === i,
+        index: i // highlight={selectedIndex === i}
+        ,
         needTick: needTick,
-        needBorder: false,
-        onMouseEnter: this.handleMouseEnter,
+        needBorder: false // onMouseEnter={this.handleMouseEnter}
+        ,
         getRef: this.itemRef,
         bulletColor: item[statusColor],
         title: item[keyName],
@@ -441,8 +399,9 @@ export class StatusDropdown extends React.Component {
         a11y: {
           role: isSearch ? 'option' : 'menuitem',
           ariaSelected: value === item[keyName],
-          'data-a11y-list-active': selectedIndex === i
-        }
+          'data-a11y-list-active': value === item[keyName]
+        },
+        autoHover: true
       })))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
         className: style.svgWrapper,
         title: searchErrorText || 'No results',

package/es/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 from 'react';
 import { defaultProps } from './props/defaultProps';
@@ -82,7 +84,7 @@ export default class StatusListItem extends React.Component {
       options.target = `_${target}`;
     }
 
-    return /*#__PURE__*/React.createElement(Container, {
+    return /*#__PURE__*/React.createElement(Container, _extends({
       role: role,
       "aria-selected": ariaSelected,
       isCover: false,
@@ -95,10 +97,8 @@ export default class StatusListItem extends React.Component {
       eleRef: this.getRef,
       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/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, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
@@ -76,7 +78,7 @@ export default class Lookup extends Component {
       needFocusLoop = true,
       needEnterAction = true
     } = focusScopeProps;
-    const content = /*#__PURE__*/React.createElement("div", {
+    const content = /*#__PURE__*/React.createElement("div", _extends({
       ref: this.createRef,
       tabIndex: "-1",
       "data-a11y-need-focus-style": "false",
@@ -88,9 +90,8 @@ export default class Lookup extends Component {
       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/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 ***/
@@ -98,11 +100,7 @@ export default class Search extends Component {
       selectedId: selectedId,
       onDropDownOpen: this.handleDropDownOpen,
       onDropDownClose: this.handleDropDownClose
-    }, /*#__PURE__*/React.createElement(SearchUI, { ...this.props,
-      ...searchUIExtraProps
-    })) : /*#__PURE__*/React.createElement(SearchUI, { ...this.props,
-      ...searchUIExtraProps
-    });
+    }, /*#__PURE__*/React.createElement(SearchUI, _extends({}, this.props, searchUIExtraProps))) : /*#__PURE__*/React.createElement(SearchUI, _extends({}, this.props, searchUIExtraProps));
   }
 
 }

package/es/v1/Drawer/Drawer.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, { useRef } from 'react';
 import { Header_defaultProps, Footer_defaultProps, Drawer_defaultProps } from './props/defaultProps';
 import { Header_propTypes, Content_propTypes, Footer_propTypes, Drawer_propTypes } from './props/propTypes';
@@ -159,13 +161,12 @@ export default function Drawer(props) {
 
       return child;
     });
-    let content = /*#__PURE__*/React.createElement(Box, {
+    let content = /*#__PURE__*/React.createElement(Box, _extends({
       className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`,
       "data-a11y-need-focus-style": "false",
       tabindex: -1,
-      eleRef: contentRef,
-      ...a11y
-    }, /*#__PURE__*/React.createElement(Card, {
+      eleRef: contentRef
+    }, a11y), /*#__PURE__*/React.createElement(Card, {
       onClick: e => {
         e && e.stopPropagation && e.stopPropagation();
         onBodyClick(e);

package/es/v1/ExternalLink/ExternalLink.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 from 'react';
 import { defaultProps } from './props/defaultProps';
@@ -30,7 +32,7 @@ const ExternalLink = props => {
   };
 
   let urlOutput = href && typeof href !== 'boolean' ? addHttp(String(href)) : 'javascript:void(0);';
-  return /*#__PURE__*/React.createElement("a", {
+  return /*#__PURE__*/React.createElement("a", _extends({
     href: urlOutput,
     target: target,
     className: `${style.link} ${className ? className : ''}`,
@@ -38,9 +40,8 @@ const ExternalLink = props => {
     rel: rel,
     "data-id": dataId,
     "data-test-id": dataId,
-    onClick: onClick,
-    ...customProps
-  }, children);
+    onClick: onClick
+  }, customProps), children);
 };
 
 ExternalLink.defaultProps = defaultProps;

package/es/v1/FlipCard/FlipCard.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 } from './props/propTypes';
@@ -74,17 +76,16 @@ export default function FlipCard(props) {
   }, !noNeedFlip ? /*#__PURE__*/React.createElement(Container, {
     align: "both",
     className: `${style.front} ${frontClass ? frontClass : ''}`
-  }, /*#__PURE__*/React.createElement(CheckBox, {
+  }, /*#__PURE__*/React.createElement(CheckBox, _extends({
     isFilled: isFilledCheckbox,
     checked: isChecked,
     onChange: onChange,
     id: `checkbox_${id}`,
-    dataId: `listViewCheckBox_${id}`,
-    ...CheckBoxProps
-  })) : null, /*#__PURE__*/React.createElement(Container, {
+    dataId: `listViewCheckBox_${id}`
+  }, CheckBoxProps))) : null, /*#__PURE__*/React.createElement(Container, {
     align: "both",
     className: style.back
-  }, channel && action ? /*#__PURE__*/React.createElement(ChannelIcon, {
+  }, channel && action ? /*#__PURE__*/React.createElement(ChannelIcon, _extends({
     name: channel,
     action: action,
     size: size,
@@ -97,9 +98,8 @@ export default function FlipCard(props) {
     customTextClass: customTextClass,
     iconColor: iconColor,
     title: channelTitle,
-    iconTitle: channelTitle,
-    ...ChannelIconProps
-  }) : icon ? /*#__PURE__*/React.createElement(AvatarIcon, {
+    iconTitle: channelTitle
+  }, ChannelIconProps)) : icon ? /*#__PURE__*/React.createElement(AvatarIcon, _extends({
     name: icon,
     iconSize: iconSize,
     size: size,
@@ -107,9 +107,8 @@ export default function FlipCard(props) {
     dataId: icon,
     className: className,
     iconColor: iconColor,
-    title: needTitle ? name : '',
-    ...AvatarIconProps
-  }) : /*#__PURE__*/React.createElement(AvatarUser, {
+    title: needTitle ? name : ''
+  }, AvatarIconProps)) : /*#__PURE__*/React.createElement(AvatarUser, _extends({
     name: name,
     initial: initial,
     size: size,
@@ -120,9 +119,8 @@ export default function FlipCard(props) {
     needTitle: needTitle,
     palette: palette,
     textPalette: textPalette,
-    customTextClass: customTextClass,
-    ...AvatarUserProps
-  }))));
+    customTextClass: customTextClass
+  }, AvatarUserProps)))));
 }
 FlipCard.propTypes = propTypes;
 FlipCard.defaultProps = defaultProps; // if (__DOCS__) {

package/es/v1/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, { useEffect } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes, UI_propTypes, new_propTypes } from './props/propTypes';
@@ -94,7 +96,7 @@ export function GlobalNotificationUI(props) {
     onClose && onClose(e);
   }
 
-  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 : ''}
@@ -103,9 +105,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,
@@ -137,8 +138,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/v1/IconButton/IconButton.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 } from './props/propTypes';
@@ -71,7 +73,7 @@ export default function IconButton(props) {
     hoverType: hoverType,
     isDisabled: isDisabled,
     isNeedEffect: isNeedEffect
-  }, /*#__PURE__*/React.createElement(Container, {
+  }, /*#__PURE__*/React.createElement(Container, _extends({
     "aria-label": ariaLabel,
     "aria-haspopup": ariaHaspopup,
     "aria-expanded": ariaExpanded,
@@ -95,9 +97,8 @@ export default function IconButton(props) {
     onKeyDown: handleToggle,
     onFocus: triggerMouseOver,
     onBlur: onBlur,
-    disabled: isDisabled,
-    ...customProps
-  }, iconName ? /*#__PURE__*/React.createElement(Icon, {
+    disabled: isDisabled
+  }, customProps), iconName ? /*#__PURE__*/React.createElement(Icon, {
     isBold: isBold,
     size: iconSize,
     name: iconName,

package/es/v1/Link/Link.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, { useContext, useRef } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -70,20 +72,20 @@ export default function Link(props) {
   } //urlOutput = addHttp(urlOutput);
 
 
-  return /*#__PURE__*/React.createElement("a", {
+  return /*#__PURE__*/React.createElement("a", _extends({
     href: isLink && urlOutput ? urlOutput : 'javascript:void(0);',
     target: target,
     "data-title": title,
-    className: `${style.container}  ${className ? className : ''}`,
-    ...option.current,
+    className: `${style.container}  ${className ? className : ''}`
+  }, option.current, {
     rel: rel,
     "data-id": dataId,
-    "data-test-id": dataId,
-    ...others,
-    onClick: callBack,
-    ...customProps,
+    "data-test-id": dataId
+  }, others, {
+    onClick: callBack
+  }, customProps, {
     "aria-label": ariaLabel
-  }, children);
+  }), children);
 }
 Link.defaultProps = defaultProps;
 Link.propTypes = propTypes; // if (__DOCS__) {