@zohodesk/components 1.0.0-temp-45 → 1.0.0-temp-48

package/es/ListItem/ListItemWithCheckBox.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import CheckBox from '../CheckBox/CheckBox';
 import { Container, Box } from '../Layout';
 import CssProvider from '../Provider/CssProvider';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import style from './ListItem.module.css';
 export default class ListItemWithCheckBox extends React.Component {
   constructor(props) {
@@ -13,7 +12,6 @@ export default class ListItemWithCheckBox extends React.Component {
     this.onClick = this.onClick.bind(this);
     this.getRef = this.getRef.bind(this);
     this.onHover = this.onHover.bind(this);
-    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
   getRef(ele) {
@@ -45,16 +43,6 @@ export default class ListItemWithCheckBox extends React.Component {
     onHover && onHover(id, value, index, e);
   }
 
-  responsiveFunc({
-    mediaQueryOR
-  }) {
-    return {
-      mobileToTab: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   render() {
     let {
       size,
@@ -90,18 +78,13 @@ export default class ListItemWithCheckBox extends React.Component {
       options.tabindex = '0';
     }
 
-    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, ({
-      mobileToTab
-    }) => /*#__PURE__*/React.createElement(Container, _extends({
+    return /*#__PURE__*/React.createElement(Container, _extends({
       role: role,
       "aria-selected": ariaSelected,
       isCover: false,
       align: "vertical",
       alignBox: "row",
-      className: `${style.list} ${style[size]} ${mobileToTab && style.responsiveHeight}  ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} 
+      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} 
         ${isDisabled ? CssProvider('isDisable') : ''} ${customListItem}`,
       dataId: `${dataId ? dataId : value}_ListItemWithCheckBox`,
       onClick: !isDisabled && this.onClick,
@@ -125,7 +108,7 @@ export default class ListItemWithCheckBox extends React.Component {
       shrink: true,
       "data-title": isDisabled ? null : title,
       className: style.value
-    }, value)));
+    }, value));
   }
 
 }

package/es/ListItem/ListItemWithIcon.js

@@ -1,5 +1,3 @@
-import "core-js/modules/es.string.replace";
-
 function _extends() { _extends = Object.assign || 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 ****/
@@ -8,7 +6,6 @@ import PropTypes from 'prop-types';
 import { Container, Box } from '../Layout';
 import Icon from '@zohodesk/icons/lib/Icon';
 import CssProvider from '../Provider/CssProvider';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** CSS ****/
 
 import style from './ListItem.module.css';
@@ -18,7 +15,6 @@ export default class ListItemWithIcon extends React.Component {
     this.handleClick = this.handleClick.bind(this);
     this.getRef = this.getRef.bind(this);
     this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
   getRef(ele) {
@@ -51,16 +47,6 @@ export default class ListItemWithIcon extends React.Component {
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
 
-  responsiveFunc({
-    mediaQueryOR
-  }) {
-    return {
-      mobileToTab: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   render() {
     let {
       size,
@@ -101,18 +87,13 @@ export default class ListItemWithIcon extends React.Component {
     }
 
     let dataIdString = dataId ? `${dataId.replace("'", '_')}` : value.toLowerCase().replace("'", '_');
-    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, ({
-      mobileToTab
-    }) => /*#__PURE__*/React.createElement(Container, _extends({
+    return /*#__PURE__*/React.createElement(Container, _extends({
       role: role,
       "aria-selected": ariaSelected,
       isCover: false,
       align: "vertical",
       alignBox: "row",
-      className: `${style.list} ${style[size]} ${mobileToTab && style.responsiveHeight}  ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customClass}`,
+      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customClass}`,
       dataId: dataIdString,
       onClick: !isDisabled && this.handleClick,
       onMouseOver: this.handleMouseEnter,
@@ -142,7 +123,7 @@ export default class ListItemWithIcon extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
-    })) : null));
+    })) : null);
   }
 
 }

package/es/ListItem/ListItemWithRadio.js

@@ -6,14 +6,12 @@ import Radio from '../Radio/Radio';
 import { Container, Box } from '../Layout';
 import CssProvider from '../Provider/CssProvider';
 import style from './ListItem.module.css';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 export default class ListItemWithRadio extends React.Component {
   constructor(props) {
     super(props);
     this.onClick = this.onClick.bind(this);
     this.getRef = this.getRef.bind(this);
     this.onHover = this.onHover.bind(this);
-    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
   getRef(ele) {
@@ -45,16 +43,6 @@ export default class ListItemWithRadio extends React.Component {
     onHover && onHover(id, value, index, e);
   }
 
-  responsiveFunc({
-    mediaQueryOR
-  }) {
-    return {
-      mobileToTab: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   render() {
     let {
       size,
@@ -91,18 +79,13 @@ export default class ListItemWithRadio extends React.Component {
       options.tabindex = '0';
     }
 
-    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, ({
-      mobileToTab
-    }) => /*#__PURE__*/React.createElement(Container, _extends({
+    return /*#__PURE__*/React.createElement(Container, _extends({
       role: role,
       "aria-selected": ariaSelected,
       isCover: false,
       align: "vertical",
       alignBox: "row",
-      className: `${style.list} ${style[size]} ${mobileToTab && style.responsiveHeight} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''}  ${isDisabled ? CssProvider('isDisable') : ''} `,
+      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''}  ${isDisabled ? CssProvider('isDisable') : ''} `,
       className: `${style.list} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} 
         ${isDisabled ? CssProvider('isDisable') : ''} ${customListItem}`,
       dataId: dataId,
@@ -128,7 +111,7 @@ export default class ListItemWithRadio extends React.Component {
       shrink: true,
       "data-title": disableTitle ? null : title,
       className: style.value
-    }, value)));
+    }, value));
   }
 
 }

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -254,7 +254,9 @@ class AdvancedGroupMultiSelect extends React.Component {
     }) : this.togglePopup(e);
   }
 
-  handleClickSelectedOption(id = '', e) {
+  handleClickSelectedOption() {
+    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let e = arguments.length > 1 ? arguments[1] : undefined;
     let {
       selectedOptionIds
     } = this.state;
@@ -525,7 +527,11 @@ class AdvancedGroupMultiSelect extends React.Component {
     });
   }
 
-  handleFetchOptions(...args) {
+  handleFetchOptions() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
     let [APICall, searchStr] = args;
     let {
       isFetchingOptions
@@ -638,7 +644,9 @@ class AdvancedGroupMultiSelect extends React.Component {
     this.handleChange([]);
   }
 
-  handleChange(selectedOptions = [], e) {
+  handleChange() {
+    let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let e = arguments.length > 1 ? arguments[1] : undefined;
     let {
       onChange,
       needToCloseOnSelect,

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -76,7 +76,9 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     return suggestions;
   }
 
-  handleChange(selectedOptions = [], e) {
+  handleChange() {
+    let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let e = arguments.length > 1 ? arguments[1] : undefined;
     const {
       optionsNormalize,
       searchStr

package/es/MultiSelect/AdvancedMultiSelect.module.css

@@ -9,9 +9,9 @@
   composes: oflowy from '../common/common.module.css';
 }
 .hasBorder {
+  transition: border var(--zd_transition2) linear 0s;
   border-bottom-style: solid;
   border-bottom-width: 1px;
-  transition: border var(--zd_transition2) linear 0s;
 }
 .borderColor_transparent {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_border);
@@ -40,25 +40,40 @@
 .borderColor_dark.active {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
 }
-.container.medium {
+[dir=ltr] .container.medium {
   padding: 0 var(--zd_size34) var(--zd_size7) 0;
 }
+[dir=rtl] .container.medium {
+  padding: 0 0 var(--zd_size7) var(--zd_size34);
+}
 .container.xmedium {
-  padding: 0 var(--zd_size34) var(--zd_size1) 0;
   min-height: var(--zd_size30);
 }
+[dir=ltr] .container.xmedium {
+  padding: 0 var(--zd_size34) var(--zd_size1) 0;
+}
+[dir=rtl] .container.xmedium {
+  padding: 0 0 var(--zd_size1) var(--zd_size34);
+}
 
 .delete {
   position: absolute;
   bottom: 0;
-  right: var(--zd_size15);
-  padding-bottom: var(--zd_size10);
   color: var(--zdt_advancedmultiselect_delete_text);
+  padding-bottom: var(--zd_size10);
   cursor: pointer;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }
 
+[dir=ltr] .delete {
+  right: var(--zd_size15);
+}
+
+[dir=rtl] .delete {
+  left: var(--zd_size15);
+}
+
 .delete:hover {
   color: var(--zdt_advancedmultiselect_delete_hover_text);
 }
@@ -104,9 +119,9 @@
 .more {
   font-size: var(--zd_font_size14);
   color: var(--zdt_advancedmultiselect_more_text);
+  font-family: inherit;
   cursor: pointer;
   margin-top: var(--zd_size5);
-  font-family: inherit;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }

package/es/MultiSelect/MultiSelect.js

@@ -292,7 +292,7 @@ export class MultiSelectComponent extends React.Component {
     } = this.props;
     const highLightedSelectOptionsLen = highLightedSelectOptions.length;
 
-    if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13 || keyCode === 27 || keyCode === 9)) {
+    if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13 || keyCode === 27)) {
       suggestions = this.handleFilterSuggestions();
     }
 
@@ -420,13 +420,6 @@ export class MultiSelectComponent extends React.Component {
         });
       }
     } else if (keyCode === 27) {// this.handlePopupClose(e);
-    } else if (keyCode === 9) {
-      const selectedOption = suggestions[hoverOption] || {};
-      const {
-        id
-      } = selectedOption;
-      isPopupOpen && !getIsEmptyValue(id) && this.handleSelectOption(id, e);
-      this.handlePopupClose(e);
     }
   }
 
@@ -542,7 +535,11 @@ export class MultiSelectComponent extends React.Component {
     }
   }
 
-  handleFetchOptions(...args) {
+  handleFetchOptions() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
     const [APICall, searchStr] = args;
     const {
       isFetchingOptions
@@ -608,7 +605,9 @@ export class MultiSelectComponent extends React.Component {
     });
   }
 
-  handleClickSelectedOption(id = '', e) {
+  handleClickSelectedOption() {
+    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let e = arguments.length > 1 ? arguments[1] : undefined;
     const {
       selectedOptions
     } = this.props;
@@ -689,7 +688,9 @@ export class MultiSelectComponent extends React.Component {
     getNextOptions && getNextOptions(searchStr);
   }
 
-  handleChange(selectedOptions = [], e) {
+  handleChange() {
+    let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let e = arguments.length > 1 ? arguments[1] : undefined;
     const {
       optionsNormalize
     } = this.state;

package/es/MultiSelect/MultiSelect.module.css

@@ -15,9 +15,9 @@
   composes: oflowy from '../common/common.module.css';
 }
 .hasBorder {
+  transition: border var(--zd_transition2) linear 0s;
   border-bottom-style: solid;
   border-bottom-width: 1px;
-  transition: border var(--zd_transition2) linear 0s;
 }
 .borderColor_transparent {
   border-bottom-color: var(--zdt_multiselect_transparent_border);
@@ -52,16 +52,16 @@
 }
 
 .container.xmedium {
-  padding-bottom: var(--zd_size3);
   min-height: var(--zd_size30);
+  padding-bottom: var(--zd_size3);
 }
 
 .delete {
+  font: inherit;
   padding: var(--zd_size2) var(--zd_size6);
   cursor: pointer;
   border: 0;
   background-color: var(--zdt_multiselect_delete_bg);
-  font: inherit;
 }
 .delete,
 .defaultDelete {
@@ -91,14 +91,22 @@
   max-width: 100%;
 }
 
-.container.xmedium .tag {
+[dir=ltr] .container.xmedium .tag {
   margin: var(--zd_size2) var(--zd_size10) 0 0;
 }
 
-.container.medium .tag {
+[dir=rtl] .container.xmedium .tag {
+  margin: var(--zd_size2) 0 0 var(--zd_size10);
+}
+
+[dir=ltr] .container.medium .tag {
   margin: var(--zd_size5) var(--zd_size10) 0 0;
 }
 
+[dir=rtl] .container.medium .tag {
+  margin: var(--zd_size5) 0 0 var(--zd_size10);
+}
+
 .box {
   background: var(--zdt_multiselect_box_bg);
 }
@@ -134,9 +142,11 @@
 }
 .dark,
 .darkBox {
-  background: var(--zdt_multiselect_darkmsg_bg);
   color: var(--zdt_multiselect_darkmsg_text);
 }
+.dark, .darkBox {
+  background: var(--zdt_multiselect_darkmsg_bg);
+}
 
 .hide {
   composes: vishidden from '../common/common.module.css';
@@ -160,9 +170,14 @@
 .custmInputWrapper {
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
 }
+[dir=ltr] .custmInputWrapper {
+  left: 0;
+}
+[dir=rtl] .custmInputWrapper {
+  right: 0;
+}
 .title {
   margin-bottom: var(--zd_size6);
 }
@@ -175,6 +190,9 @@
 .iconContainer {
   padding-top: var(--zd_size3)
 }
-.clearIconSpace {
+[dir=ltr] .clearIconSpace {
   padding-right: var(--zd_size37)
 }
+[dir=rtl] .clearIconSpace {
+  padding-left: var(--zd_size37)
+}

package/es/MultiSelect/SelectedOptions.module.css

@@ -1,9 +1,15 @@
 .tag {
   max-width: 100%;
 }
-.xmedium {
+[dir=ltr] .xmedium {
   margin: 0 var(--zd_size10) var(--zd_size2) 0;
 }
-.medium {
+[dir=rtl] .xmedium {
+  margin: 0 0 var(--zd_size2) var(--zd_size10);
+}
+[dir=ltr] .medium {
   margin: var(--zd_size5) var(--zd_size10) 0 0;
 }
+[dir=rtl] .medium {
+  margin: var(--zd_size5) 0 0 var(--zd_size10);
+}

package/es/MultiSelect/docs/AdvancedGroupMultiSelect__default.docs.js

@@ -39,7 +39,8 @@ export default class AdvancedGroupMultiSelect__default extends React.Component {
     return Promise.resolve();
   }
 
-  handleSelectOptions(selectedGroupOptions = []) {
+  handleSelectOptions() {
+    let selectedGroupOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     this.setState({
       selectedGroupOptions
     });

package/es/PopOver/PopOver.module.css

@@ -1,8 +1,8 @@
 .popup {
   position: relative;
-  background-color: var(--dot_white);
+  background-color: var(--dot_bg_white);
 }
 .target {
-  cursor: pointer;
   composes: offSelection from '../common/common.module.css';
+  cursor: pointer;
 }

package/es/Popup/Popup.js

@@ -40,13 +40,17 @@ const defaultState = {
 
 /* eslint-disable react/prop-types */
 
-const Popup = function (Component, group = 'global', needResizeHandling = true, {
-  isAbsolutePositioningNeeded: isAbsolutePopup = true,
-  isArrow: needPopupArrow = false,
-  customOrder: customPositionOrder = [],
-  scrollDebounceTime: popupScrollDebounceTime = 0,
-  closeOnScroll: closeOnScrollPopup = false
-} = {}) {
+const Popup = function (Component) {
+  let group = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'global';
+  let needResizeHandling = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  let {
+    isAbsolutePositioningNeeded: isAbsolutePopup = true,
+    isArrow: needPopupArrow = false,
+    customOrder: customPositionOrder = [],
+    scrollDebounceTime: popupScrollDebounceTime = 0,
+    closeOnScroll: closeOnScrollPopup = false
+  } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+
   class Popup extends React.Component {
     constructor(props) {
       super(props);
@@ -412,7 +416,9 @@ const Popup = function (Component, group = 'global', needResizeHandling = true,
       e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
     }
 
-    handlePopupPosition(defaultPosition = 'bottomCenter', isResizeHandling) {
+    handlePopupPosition() {
+      let defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
+      let isResizeHandling = arguments.length > 1 ? arguments[1] : undefined;
       // isResizeHandling --->>> Window resize and dropBox resize
       const {
         direction

package/es/Popup/viewPort.js

@@ -77,10 +77,12 @@ let viewPort = {
   getViewPortEle: el => {
     return el.closest('[data-viewport-container=true]') ? el.closest('[data-viewport-container=true]') : document.documentElement;
   },
-  possibilities: (el, relativeBox, customFrame, {
-    needArrow,
-    isAbsolute
-  } = {}) => {
+  possibilities: function (el, relativeBox, customFrame) {
+    let {
+      needArrow,
+      isAbsolute
+    } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+
     if (!el) {
       return;
     }
@@ -301,11 +303,14 @@ let viewPort = {
       bottom: relativeBoxGap.center.bottom - rectGap.bottom
     };
   },
-  betterView: (popup, relativeBox, defaultView = '', customFrame, {
-    needArrow,
-    isAbsolute,
-    customOrder = []
-  } = {}) => {
+  betterView: function (popup, relativeBox) {
+    let defaultView = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+    let customFrame = arguments.length > 3 ? arguments[3] : undefined;
+    let {
+      needArrow,
+      isAbsolute,
+      customOrder = []
+    } = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
     let customScrollFrame = isAbsolute ? customFrame : '';
     let viewPortPossibilities = viewPort.possibilities(popup, relativeBox, customScrollFrame, {
       needArrow,

package/es/Provider/Config.js

@@ -5,8 +5,7 @@ let id = {
   idPrefix: 'ZD',
   scrollFetchLimit: 80,
   isReducedMotion: false,
-  direction: 'ltr',
-  tooltipDebounce: 175
+  direction: 'ltr'
 };
 export function getLibraryConfig(key) {
   return id[key];

package/es/Provider/IdProvider.js

@@ -30,10 +30,11 @@ function getDeletedIndexes() {
   return deletedIndexes;
 }
 
-function callback({
-  globalId,
-  deletedIndexes
-}) {
+function callback(_ref) {
+  let {
+    globalId,
+    deletedIndexes
+  } = _ref;
   setGlobalId(globalId);
   setDeletedIndexes(deletedIndexes);
 }

package/es/Provider/LibraryContext.js

@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import LibraryContextInit from './LibraryContextInit';
 import { getLibraryConfig } from './Config';
 
-const LibraryContextProvider = ({
-  isReducedMotion = getLibraryConfig('isReducedMotion'),
-  direction = getLibraryConfig('direction'),
-  children
-}) => {
+const LibraryContextProvider = _ref => {
+  let {
+    isReducedMotion = getLibraryConfig('isReducedMotion'),
+    direction = getLibraryConfig('direction'),
+    children
+  } = _ref;
   const [value, setValue] = useState({
     isReducedMotion,
     direction

package/es/Provider/NumberGenerator/NumberGenerator.js

@@ -50,13 +50,14 @@ export function decreaseGlobalIds(numbers, deletedIndexes, globalId) {
     deletedIndexes
   };
 }
-export function useNumberGenerator({
-  getGlobalId,
-  prefix,
-  getGlobalPrefix,
-  getDeletedIndexes,
-  callback
-}) {
+export function useNumberGenerator(_ref) {
+  let {
+    getGlobalId,
+    prefix,
+    getGlobalPrefix,
+    getDeletedIndexes,
+    callback
+  } = _ref;
   let presentValues = useRef([]),
       presentIndex = useRef(0);
   prefix = typeof prefix === 'undefined' ? '' : `${prefix}_`;
@@ -83,14 +84,15 @@ export function useNumberGenerator({
   presentIndex.current = -1;
   return getNextId;
 }
-export function getNumberGenerators({
-  Component,
-  prefix,
-  getGlobalPrefix,
-  getGlobalId,
-  getDeletedIndexes,
-  callback
-}) {
+export function getNumberGenerators(_ref2) {
+  let {
+    Component,
+    prefix,
+    getGlobalPrefix,
+    getGlobalId,
+    getDeletedIndexes,
+    callback
+  } = _ref2;
   let presentIndex = 0,
       presentValues = [],
       {

package/es/Provider/ZindexProvider.js

@@ -27,10 +27,11 @@ function getDeletedIndexes() {
   return deletedIndexes;
 }
 
-function callback({
-  globalId,
-  deletedIndexes
-}) {
+function callback(_ref) {
+  let {
+    globalId,
+    deletedIndexes
+  } = _ref;
   setInitialZIndex(globalId);
   setDeletedIndexes(deletedIndexes);
 }