@zohodesk/components 1.0.0-temp-42 → 1.0.0-temp-43

package/es/ListItem/ListItemWithIcon.js

@@ -1,3 +1,5 @@
+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 ****/

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -254,9 +254,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     }) : this.togglePopup(e);
   }
 
-  handleClickSelectedOption() {
-    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    let e = arguments.length > 1 ? arguments[1] : undefined;
+  handleClickSelectedOption(id = '', e) {
     let {
       selectedOptionIds
     } = this.state;
@@ -527,11 +525,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     });
   }
 
-  handleFetchOptions() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
+  handleFetchOptions(...args) {
     let [APICall, searchStr] = args;
     let {
       isFetchingOptions
@@ -644,9 +638,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     this.handleChange([]);
   }
 
-  handleChange() {
-    let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    let e = arguments.length > 1 ? arguments[1] : undefined;
+  handleChange(selectedOptions = [], e) {
     let {
       onChange,
       needToCloseOnSelect,
@@ -855,7 +847,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       i18nKeys,
       a11y,
       isSearchClearOnSelect,
-      palette
+      palette,
+      needEffect
     } = this.props;
     let {
       clearText = 'Clear all'
@@ -884,7 +877,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''}`,
+      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : '',
       onClick: this.handleInputFocus
@@ -1060,7 +1053,8 @@ AdvancedGroupMultiSelect.defaultProps = {
   isPadding: false,
   i18nKeys: {},
   a11y: {},
-  isSearchClearOnSelect: true
+  isSearchClearOnSelect: true,
+  needEffect: PropTypes.bool
 };
 AdvancedGroupMultiSelect.propTypes = {
   animationStyle: PropTypes.string,
@@ -1110,7 +1104,8 @@ AdvancedGroupMultiSelect.propTypes = {
   variant: PropTypes.string,
   htmlId: PropTypes.string,
   isSearchClearOnSelect: PropTypes.bool,
-  palette: PropTypes.oneOf(['default', 'dark'])
+  palette: PropTypes.oneOf(['default', 'dark']),
+  needEffect: true
 };
 
 if (false) {

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -76,9 +76,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     return suggestions;
   }
 
-  handleChange() {
-    let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    let e = arguments.length > 1 ? arguments[1] : undefined;
+  handleChange(selectedOptions = [], e) {
     const {
       optionsNormalize,
       searchStr
@@ -349,7 +347,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       borderColor,
       isBoxPaddingNeed,
       getFooter,
-      customProps
+      customProps,
+      needEffect
     } = this.props;
     let {
       SuggestionsProps = {},
@@ -382,7 +381,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     const setAriaId = this.getNextAriaId();
     const ariaErrorId = this.getNextAriaId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
+      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": dataIdMultiSelectComp,
       "data-title": isDisabled ? title : '',
       onClick: this.handleInputFocus
@@ -525,6 +524,7 @@ AdvancedMultiSelectComponent.propTypes = {
   //For grouping multiSelect
   getPublicMethods: PropTypes.func,
   optionType: PropTypes.oneOf(['default', 'avatar', 'icon']),
+  needEffect: PropTypes.bool,
   animationStyle: PropTypes.string,
   defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
   dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
@@ -599,7 +599,8 @@ AdvancedMultiSelectComponent.defaultProps = {
   borderColor: 'default',
   isBoxPaddingNeed: true,
   isSearchClearOnSelect: true,
-  customProps: {}
+  customProps: {},
+  needEffect: true
 };
 AdvancedMultiSelectComponent.displayName = 'AdvancedMultiSelect';
 const AdvancedMultiSelect = Popup(AdvancedMultiSelectComponent);

package/es/MultiSelect/AdvancedMultiSelect.module.css

@@ -1,8 +1,8 @@
 .wrapper {
   position: relative;
 }
-.disabled {
-  composes: disabled from '../common/common.module.css';
+.disabled, .readOnly {
+  cursor: not-allowed;
 }
 .container {
   max-height: var(--zd_size120);
@@ -16,28 +16,28 @@
 .borderColor_transparent {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_border);
 }
-.borderColor_transparent:hover {
+.effect .borderColor_transparent:hover {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_hover_border);
 }
-.borderColor_transparent.active {
+.effect .borderColor_transparent.active {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_active_border);
 }
 .borderColor_default {
   border-bottom-color: var(--zdt_advancedmultiselect_default_border);
 }
-.borderColor_default:hover {
+.effect .borderColor_default:hover {
   border-bottom-color: var(--zdt_advancedmultiselect_default_hover_border);
 }
-.borderColor_default.active {
+.effect .borderColor_default.active {
   border-bottom-color: var(--zdt_advancedmultiselect_default_active_border);
 }
 .borderColor_dark {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_border);
 }
-.borderColor_dark:hover {
+.effect .borderColor_dark:hover {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_hover_border);
 }
-.borderColor_dark.active {
+.effect .borderColor_dark.active {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
 }
 [dir=ltr] .container.medium {

package/es/MultiSelect/MultiSelect.js

@@ -542,11 +542,7 @@ export class MultiSelectComponent extends React.Component {
     }
   }
 
-  handleFetchOptions() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
+  handleFetchOptions(...args) {
     const [APICall, searchStr] = args;
     const {
       isFetchingOptions
@@ -612,9 +608,7 @@ export class MultiSelectComponent extends React.Component {
     });
   }
 
-  handleClickSelectedOption() {
-    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    let e = arguments.length > 1 ? arguments[1] : undefined;
+  handleClickSelectedOption(id = '', e) {
     const {
       selectedOptions
     } = this.props;
@@ -695,9 +689,7 @@ export class MultiSelectComponent extends React.Component {
     getNextOptions && getNextOptions(searchStr);
   }
 
-  handleChange() {
-    let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    let e = arguments.length > 1 ? arguments[1] : undefined;
+  handleChange(selectedOptions = [], e) {
     const {
       optionsNormalize
     } = this.state;
@@ -870,7 +862,8 @@ export class MultiSelectComponent extends React.Component {
       a11y,
       children,
       customChildrenClass,
-      getFooter
+      getFooter,
+      needEffect
     } = this.props;
     const {
       clearText = 'Clear all',
@@ -898,7 +891,7 @@ export class MultiSelectComponent extends React.Component {
     const ariaErrorId = this.getNextAriaId();
     const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && selectedOptions.length > 1;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
+      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : '',
       onClick: this.handleInputFocus
@@ -1102,7 +1095,8 @@ MultiSelectComponent.propTypes = {
   children: PropTypes.node,
   customChildrenClass: PropTypes.string,
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  getFooter: PropTypes.func
+  getFooter: PropTypes.func,
+  needEffect: PropTypes.bool
 };
 MultiSelectComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -1132,7 +1126,8 @@ MultiSelectComponent.defaultProps = {
   a11y: {},
   textBoxClass: '',
   palette: 'default',
-  isSearchClearOnSelect: true
+  isSearchClearOnSelect: true,
+  needEffect: true
 };
 
 if (false) {

package/es/MultiSelect/MultiSelect.module.css

@@ -2,14 +2,9 @@
   position: relative;
 }
 
-.disabled {
-  composes: disabled from '../common/common.module.css';
+.disabled, .readOnly {
+  cursor: not-allowed;
 }
-
-.readOnly {
-  composes: readonly from '../common/common.module.css';
-}
-
 .container {
   max-height: var(--zd_size120);
   composes: oflowy from '../common/common.module.css';
@@ -22,28 +17,28 @@
 .borderColor_transparent {
   border-bottom-color: var(--zdt_multiselect_transparent_border);
 }
-.borderColor_transparent:hover {
+.effect .borderColor_transparent:hover {
   border-bottom-color: var(--zdt_multiselect_transparent_hover_border);
 }
-.borderColor_transparent.active {
+.effect .borderColor_transparent.active {
   border-bottom-color: var(--zdt_multiselect_transparent_active_border);
 }
 .borderColor_default {
   border-bottom-color: var(--zdt_multiselect_default_border);
 }
-.borderColor_default:hover {
+.effect .borderColor_default:hover {
   border-bottom-color: var(--zdt_multiselect_default_hover_border);
 }
-.borderColor_default.active {
+.effect .borderColor_default.active {
   border-bottom-color: var(--zdt_multiselect_default_active_border);
 }
 .borderColor_dark {
   border-bottom-color: var(--zdt_multiselect_dark_border);
 }
-.borderColor_dark:hover {
+.effect .borderColor_dark:hover {
   border-bottom-color: var(--zdt_multiselect_dark_hover_border);
 }
-.borderColor_dark.active {
+.effect .borderColor_dark.active {
   border-bottom-color: var(--zdt_multiselect_dark_active_border);
 }
 

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -87,7 +87,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       a11y,
       children,
       customChildrenClass,
-      isBoxPaddingNeed
+      isBoxPaddingNeed,
+      needEffect
     } = this.props;
     const {
       clearText = 'Clear all'
@@ -115,7 +116,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     const popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
     const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && selectedOptions.length > 1;
     return /*#__PURE__*/React.createElement("div", {
-      className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
+      className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : '',
       onClick: this.handleInputFocus
@@ -288,6 +289,7 @@ MultiSelectWithAvatarComponent.propTypes = {
   palette: PropTypes.oneOf(['default', 'dark']),
   htmlId: PropTypes.string,
   isBoxPaddingNeed: PropTypes.bool,
+  needEffect: PropTypes.bool,
 
   /**** Popup props ****/
   isPopupOpen: PropTypes.bool,
@@ -337,7 +339,8 @@ MultiSelectWithAvatarComponent.defaultProps = {
   a11y: {},
   palette: 'default',
   isBoxPaddingNeed: true,
-  isSearchClearOnSelect: true
+  isSearchClearOnSelect: true,
+  needEffect: true
 };
 MultiSelectWithAvatarComponent.displayName = 'MultiSelectWithAvatar';
 const MultiSelectWithAvatar = Popup(MultiSelectWithAvatarComponent);

package/es/MultiSelect/SelectedOptions.js

@@ -37,13 +37,14 @@ export default class SelectedOptions extends React.PureComponent {
       } = option;
       const commonProps = {
         disabled: isDisabled,
-        onRemove: isDisabled ? null : onRemove,
+        onRemove: isDisabled || isReadOnly ? null : onRemove,
         text: value,
         palette: isDarkPalette,
         onSelectTag: isReadOnly ? null : onSelect,
         getRef: getRef,
         initial: value,
-        id: id
+        id: id,
+        isReadOnly: isReadOnly
       };
 
       if (optionType === 'avatar') {

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

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

package/es/PopOver/PopOver.module.css

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

package/es/Popup/Popup.js

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

package/es/Popup/viewPort.js

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

package/es/Provider/IdProvider.js

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

package/es/Provider/LibraryContext.js

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

package/es/Provider/NumberGenerator/NumberGenerator.js

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

package/es/Provider/ZindexProvider.js

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

package/es/Radio/Radio.js

@@ -3,7 +3,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Label from '../Label/Label';
 import { Container, Box } from '../Layout';
-import CssProvider from '../Provider/CssProvider';
 import style from './Radio.module.css';
 export default class Radio extends React.Component {
   constructor(props) {
@@ -45,7 +44,7 @@ export default class Radio extends React.Component {
       customRadio = '',
       customLabel = ''
     } = customClass;
-    let accessMode = isReadOnly ? style.readonly : disabled ? CssProvider('isDisabled') : style.pointer;
+    let accessMode = isReadOnly ? style.readonly : disabled ? style.disabled : style.pointer;
     let toolTip = disabled ? disabledTitle : title ? title : null;
     let {
       ariaHidden,

package/es/Radio/Radio.module.css

@@ -18,8 +18,8 @@
 .pointer {
   cursor: pointer;
 }
-.readonly {
-  cursor: default;
+.readonly, .disabled {
+  cursor: not-allowed;
 }
 .radio {
   composes: offSelection from '../common/common.module.css';

package/es/Responsive/CustomResponsive.js

@@ -98,9 +98,7 @@ ResponsiveSender.propTypes = {
   domRefKey: PropTypes.string,
   responsiveId: PropTypes.string
 };
-export function useResponsiveReceiver() {
-  let responsiveId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultResponsiveId;
-  let query = arguments.length > 1 ? arguments[1] : undefined;
+export function useResponsiveReceiver(responsiveId = defaultResponsiveId, query) {
   const [, forceUpdate] = useState();
   const totalContextData = useContext(ResponsiveContext);
   const validSizeContextData = totalContextData[validSizeResponsiveId];
@@ -172,14 +170,13 @@ export function useResponsiveReceiver() {
   updateLatestData();
   return data.current;
 }
-export function ResponsiveReceiver(_ref) {
-  let {
-    children,
-    responsiveId,
-    query,
-    eleRef,
-    domRefKey
-  } = _ref;
+export function ResponsiveReceiver({
+  children,
+  responsiveId,
+  query,
+  eleRef,
+  domRefKey
+}) {
   const data = useResponsiveReceiver(responsiveId, query);
   const child = children(data);
   return eleRef ? /*#__PURE__*/React.createElement(DOMRefWrapper, {

package/es/Responsive/ResizeComponent.js

@@ -163,9 +163,7 @@ export default class ResizeComponent extends React.Component {
     }
   }
 
-  constructChildren() {
-    let dataCount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    let responsive = arguments.length > 1 ? arguments[1] : undefined;
+  constructChildren(dataCount = 0, responsive) {
     const {
       childrenList,
       getData

package/es/Responsive/Responsive.js

@@ -102,8 +102,7 @@ ResponsiveSender.propTypes = {
   responsiveId: PropTypes.string // matcher: PropTypes.func
 
 };
-export function useResponsiveReceiver() {
-  let responsiveId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultResponsiveId;
+export function useResponsiveReceiver(responsiveId = defaultResponsiveId) {
   const [_, forceUpdate] = useState();
   let totalContextData = useContext(ResponsiveContext);
   let contextData = totalContextData[responsiveId] || totalContextData[defaultResponsiveId]; // NOTE: this for fallback of if responsive receiver id wrong
@@ -150,8 +149,7 @@ export function useResponsiveReceiver() {
         return value1 <= width && value2 >= width || breakPoint1 === breakPoint || breakPoint2 === breakPoint;
       },
 
-      deviceOnly() {
-        let breakPoints = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      deviceOnly(breakPoints = []) {
         return breakPoints.includes(breakPoint);
       },
 
@@ -176,14 +174,13 @@ export function useResponsiveReceiver() {
 //   ) : null;
 // }
 
-export function ResponsiveReceiver(_ref) {
-  let {
-    children,
-    responsiveId,
-    hiddenSizes,
-    eleRef,
-    domRefKey
-  } = _ref;
+export function ResponsiveReceiver({
+  children,
+  responsiveId,
+  hiddenSizes,
+  eleRef,
+  domRefKey
+}) {
   const data = useResponsiveReceiver(responsiveId);
   const {
     breakPoint