@zohodesk/components 1.0.0-temp-47 → 1.0.0-temp-50

package/es/ListItem/ListItemWithRadio.js

@@ -6,12 +6,14 @@ import Radio from '../Radio/Radio';
 import { Box } from '../Layout';
 import ListContainer from './ListContainer';
 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) {
@@ -43,6 +45,17 @@ export default class ListItemWithRadio extends React.Component {
     onHover && onHover(id, value, index, e);
   }
 
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      mobileToTab: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     let {
       size,
@@ -70,40 +83,48 @@ export default class ListItemWithRadio extends React.Component {
       customRadio = '',
       customRadioWrap = ''
     } = customClass;
-    return /*#__PURE__*/React.createElement(ListContainer, _extends({
-      a11y: a11y,
-      size: size,
-      palette: palette,
-      highlight: highlight,
-      isDisabled: isDisabled,
-      active: active,
-      autoHover: autoHover,
-      customClass: customListItem,
-      dataId: dataId,
-      onClick: this.onClick,
-      onMouseOver: this.onHover,
-      eleRef: this.getRef,
-      disableTitle: disableTitle,
-      title: null,
-      customProps: ListItemProps
-    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
-      className: style.iconBox
-    }, /*#__PURE__*/React.createElement(Radio, {
-      checked: checked,
-      id: id,
-      a11y: {
-        ariaHidden: true
-      },
-      customClass: {
-        customRadio: customRadio,
-        customRadioWrap: customRadioWrap
-      }
-    })), /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      shrink: true,
-      "data-title": disableTitle ? null : title,
-      className: style.value
-    }, value));
+    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref2 => {
+      let {
+        mobileToTab
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ListContainer, _extends({
+        a11y: a11y,
+        size: size,
+        palette: palette,
+        highlight: highlight,
+        isDisabled: isDisabled,
+        active: active,
+        autoHover: autoHover,
+        customClass: `${customListItem} ${mobileToTab && style.responsiveHeight}`,
+        dataId: dataId,
+        onClick: this.onClick,
+        onMouseOver: this.onHover,
+        eleRef: this.getRef,
+        disableTitle: disableTitle,
+        title: null,
+        customProps: ListItemProps
+      }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
+        className: style.iconBox
+      }, /*#__PURE__*/React.createElement(Radio, {
+        checked: checked,
+        id: id,
+        a11y: {
+          ariaHidden: true
+        },
+        customClass: {
+          customRadio: customRadio,
+          customRadioWrap: customRadioWrap
+        }
+      })), /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        shrink: true,
+        "data-title": disableTitle ? null : title,
+        className: style.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,
@@ -879,7 +887,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
-      "data-title": isDisabled ? title : '',
+      "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus
     }, children ? /*#__PURE__*/React.createElement(Container, {
       align: "vertical",

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -23,7 +23,7 @@ import style from './AdvancedMultiSelect.module.css';
 /**** Methods ****/
 
 import { getIsEmptyValue, getSearchString } from '../utils/Common.js';
-import { filterSelectedOptions } from '../utils/dropDownUtils';
+import { filterSelectedOptions, makeGetIsShowClearIcon } from '../utils/dropDownUtils';
 /* eslint-disable react/sort-prop-types */
 
 /* eslint-disable react/no-unused-prop-types */
@@ -45,6 +45,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     this.state = Object.assign({}, oldState, {
       showedSelectedOptionsCount: !getIsEmptyValue(selectedOptionsLimit) && selectedOptionsLen > selectedOptionsLimit ? selectedOptionsLimit : selectedOptionsLen
     });
+    this.getIsShowClearIcon = makeGetIsShowClearIcon();
     this.handleFilterSuggestions = this.handleFilterSuggestions.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.handleSelectOption = this.handleSelectOption.bind(this);
@@ -76,7 +77,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
@@ -189,7 +192,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       imageField,
       optionType,
       iconName,
-      iconSize
+      iconSize,
+      disabledOptions
     } = props;
     return this.formatSelectedOptions({
       options: selectedOptionDetails,
@@ -198,7 +202,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       imageField,
       optionType,
       iconName,
-      iconSize
+      iconSize,
+      disabledOptions
     });
   }
 
@@ -348,7 +353,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       isBoxPaddingNeed,
       getFooter,
       customProps,
-      needEffect
+      needEffect,
+      disabledOptions
     } = this.props;
     let {
       SuggestionsProps = {},
@@ -380,10 +386,17 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     const moreCount = allselectedOptionIdsLen - showedSelectedOptionsCount;
     const setAriaId = this.getNextAriaId();
     const ariaErrorId = this.getNextAriaId();
+    let {
+      isShowClearIcon: isShowClear
+    } = this.getIsShowClearIcon({
+      selectedOptions,
+      disabledOptions
+    });
+    let isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": dataIdMultiSelectComp,
-      "data-title": isDisabled ? title : '',
+      "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
@@ -429,7 +442,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         ariaDescribedby: ariaErrorId
       },
       autoComplete: false
-    })), !isReadOnly && !isDisabled && selectedOptions.length > 1 ? /*#__PURE__*/React.createElement(Box, {
+    })), isShowClearIcon ? /*#__PURE__*/React.createElement(Box, {
       className: style.delete,
       dataId: dataIdClearIcon,
       "data-title": clearText,

package/es/MultiSelect/MultiSelect.js

@@ -23,7 +23,7 @@ import style from './MultiSelect.module.css';
 /**** Methods ****/
 
 import { debounce, scrollTo, bind, getIsEmptyValue, getSearchString } from '../utils/Common.js';
-import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetMultiSelectSelectedOptions as makeGetSelectedOptions, makeObjectConcat, filterSelectedOptions } from '../utils/dropDownUtils';
+import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetMultiSelectSelectedOptions as makeGetSelectedOptions, makeObjectConcat, filterSelectedOptions, makeGetIsShowClearIcon } from '../utils/dropDownUtils';
 /* eslint-disable react/forbid-component-props */
 
 /* eslint-disable react/no-unused-prop-types */
@@ -35,7 +35,8 @@ export class MultiSelectComponent extends React.Component {
     this.getNextAriaId = getUniqueId(this);
     this.getFilterSuggestions = makeGetFilterSuggestions();
     this.formatOptions = makeFormatOptions();
-    this.getSelectedOptions = makeGetSelectedOptions(); //Use in AdvancedMultiSelect component
+    this.getSelectedOptions = makeGetSelectedOptions();
+    this.getIsShowClearIcon = makeGetIsShowClearIcon(); //Use in AdvancedMultiSelect component
 
     this.objectConcat = makeObjectConcat();
     this.formatSelectedOptions = makeFormatOptions();
@@ -542,7 +543,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 +613,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 +696,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;
@@ -863,7 +872,8 @@ export class MultiSelectComponent extends React.Component {
       children,
       customChildrenClass,
       getFooter,
-      needEffect
+      needEffect,
+      disabledOptions
     } = this.props;
     const {
       clearText = 'Clear all',
@@ -889,11 +899,17 @@ export class MultiSelectComponent extends React.Component {
     const suggestions = this.handleFilterSuggestions();
     const setAriaId = this.getNextAriaId();
     const ariaErrorId = this.getNextAriaId();
-    const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && selectedOptions.length > 1;
+    let {
+      isShowClearIcon: isShowClear
+    } = this.getIsShowClearIcon({
+      selectedOptions,
+      disabledOptions
+    });
+    const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && isShowClear;
     return /*#__PURE__*/React.createElement("div", {
       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 : '',
+      "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -118,7 +118,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     return /*#__PURE__*/React.createElement("div", {
       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 : '',
+      "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",

package/es/PopOver/PopOver.js

@@ -135,26 +135,25 @@ PopOver.propTypes = {
   size: PropTypes.string,
   togglePopup: PropTypes.func,
   top: PropTypes.string
-};
-PopOver.propTypesDescription = {
-  right: ' ',
-  left: ' ',
-  top: ' ',
-  bottom: ' ',
-  arrowRight: ' ',
-  arrowLeft: ' ',
-  arrowTop: ' ',
-  arrowBottom: ' ',
-  arrowPosition: ' ',
-  boxPosition: ' ',
-  size: ' ',
-  children: ' ',
-  onPopupOpen: ' ',
-  isPopupOpen: ' ',
-  onPopupClose: ' ',
-  getTargetRef: ' ',
-  getContainerRef: ' '
-};
+}; // PopOver.propTypesDescription = {
+//   right: ' ',
+//   left: ' ',
+//   top: ' ',
+//   bottom: ' ',
+//   arrowRight: ' ',
+//   arrowLeft: ' ',
+//   arrowTop: ' ',
+//   arrowBottom: ' ',
+//   arrowPosition: ' ',
+//   boxPosition: ' ',
+//   size: ' ',
+//   children: ' ',
+//   onPopupOpen: ' ',
+//   isPopupOpen: ' ',
+//   onPopupClose: ' ',
+//   getTargetRef: ' ',
+//   getContainerRef: ' '
+// };
 
 if (false) {
   PopOver.docs = {

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,11 +416,13 @@ 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
-      } = this.context;
+      } = this.context || {};
       const {
         placeHolderElement,
         dropElement

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/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);
 }

package/es/Responsive/CustomResponsive.js

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

package/es/Responsive/ResizeComponent.js

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

package/es/Responsive/Responsive.js

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