@zohodesk/components 1.2.55 → 1.2.57

package/es/Popup/Popup.js

@@ -1,14 +1,17 @@
 /**** Libraries ****/
 import React from 'react';
 import hoistStatics from 'hoist-non-react-statics';
-import { PopupPropTypes, ContextTypes } from './props/propTypes';
+import { PopupPropTypes, ContextTypes } from "./props/propTypes";
 /**** Methods ****/
 
-import { debounce, isDescendant, isTextSelected, cancelBubblingEffect } from '../utils/Common.js';
-import viewPort from './viewPort';
-import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from './PositionMapping.js';
+import { debounce, isDescendant, isTextSelected, cancelBubblingEffect, DUMMY_OBJECT } from "../utils/Common.js";
+import viewPort from "./viewPort";
+import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from "./PositionMapping.js";
 import ResizeObserver from '@zohodesk/virtualizer/lib/commons/ResizeObserver.js';
-import { addIntersectionObserver, removeIntersectionObserver } from './intersectionObserver';
+import { addIntersectionObserver, removeIntersectionObserver } from "./intersectionObserver";
+import { positionMapping } from "../DropBox/DropBoxPositionMapping.js";
+import isMobilePopover from "../DropBox/utils/isMobilePopover.js";
+import selectn from 'selectn';
 let lastOpenedGroup = [];
 let popups = {};
 
@@ -47,7 +50,8 @@ const Popup = function (Component) {
     isArrow: needPopupArrow = false,
     customOrder: customPositionOrder = [],
     scrollDebounceTime: popupScrollDebounceTime = 0,
-    closeOnScroll: closeOnScrollPopup = false
+    closeOnScroll: closeOnScrollPopup = false,
+    isOutsideScrollBlocked: isOutsideScrollBlock = false
   } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
 
   class Popup extends React.Component {
@@ -66,7 +70,8 @@ const Popup = function (Component) {
         //{height: ‘’, width: ‘’,}
         popupOffset: {},
         //{height: ‘’, width: ‘’,}
-        isAbsolutePositioningNeeded: true
+        isAbsolutePositioningNeeded: true,
+        isMobile: false
       };
       this.togglePopup = this.togglePopup.bind(this);
       this.documentClickHandler = this.documentClickHandler.bind(this);
@@ -81,10 +86,11 @@ const Popup = function (Component) {
       this.handleResize = debounce(this.handleResize.bind(this), 300);
       this.handlePopupResize = this.handlePopupResize.bind(this);
       this.getIsAbsolutePopup = this.getIsAbsolutePopup.bind(this);
+      this.getIsOutsideScrollBlocked = this.getIsOutsideScrollBlocked.bind(this);
       this.getNeedArrow = this.getNeedArrow.bind(this);
       this.getCustomPositionOrder = this.getCustomPositionOrder.bind(this);
-      this.handleOpenPopupPositionChange = this.handleOpenPopupPositionChange.bind(this);
-      this.getScrollDebounceTime = this.getScrollDebounceTime.bind(this);
+      this.handleOpenPopupPositionChange = this.handleOpenPopupPositionChange.bind(this); // this.getScrollDebounceTime = this.getScrollDebounceTime.bind(this);
+
       this.getCloseOnScrollPopup = this.getCloseOnScrollPopup.bind(this);
       this.handleCloseLastOpenedGroup = this.handleCloseLastOpenedGroup.bind(this);
       this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
@@ -98,19 +104,26 @@ const Popup = function (Component) {
       this.handleAddingScrollBlock = this.handleAddingScrollBlock.bind(this);
       this.handleRemovingScrollBlock = this.handleRemovingScrollBlock.bind(this);
       this.handleIntersectionObserver = this.handleIntersectionObserver.bind(this);
+      this.updateVisibilityOnIntersection = this.updateVisibilityOnIntersection.bind(this);
+      this.handleAddingScrollToUpdatePosition = this.handleAddingScrollToUpdatePosition.bind(this);
+      this.handleRemovingScrollToUpdatePosition = this.handleRemovingScrollToUpdatePosition.bind(this);
+      this.updatePositionOnScroll = this.updatePositionOnScroll.bind(this);
+      this.setContainerDynamicPositioning = this.setContainerDynamicPositioning.bind(this);
+      this.updatePopupState = this.updatePopupState.bind(this);
+      this.handleScrollAndBlockEvents = this.handleScrollAndBlockEvents.bind(this);
+      this.handleDropElementStyleUpdate = this.handleDropElementStyleUpdate.bind(this);
+      this.positionRef = /*#__PURE__*/React.createRef();
       this.popupObserver = new ResizeObserver(this.handlePopupResize); //dropBoxSize
 
       this.size = null;
+      this.isTargetElementVisible = false;
       this.isAbsolutePopup = isAbsolutePopup;
       this.needPopupArrow = needPopupArrow;
       this.customPositionOrder = customPositionOrder;
       this.scrollDebounceTime = popupScrollDebounceTime;
       this.closeOnScroll = closeOnScrollPopup;
-      const {
-        scrollDebounceTime
-      } = this.getScrollDebounceTime(this);
-      this.handleScroll = debounce(this.handleScroll.bind(this), scrollDebounceTime);
-      this.handleDebouncedPositionChange = debounce(this.handlePositionChange.bind(this), 100);
+      this.isOutsideScrollBlock = isOutsideScrollBlock; // const { scrollDebounceTime } = this.getScrollDebounceTime(this);
+      // this.handleScroll = debounce(this.handleScroll.bind(this), scrollDebounceTime);
     }
 
     componentDidMount() {
@@ -143,12 +156,24 @@ const Popup = function (Component) {
       }
     }
 
+    handleScrollAndBlockEvents(isPopupReady, isMobile) {
+      if (isPopupReady && !isMobile) {
+        this.handleAddingScrollBlock();
+        this.handleAddingScrollToUpdatePosition();
+      } else {
+        this.handleRemovingScrollBlock();
+        this.handleRemovingScrollToUpdatePosition();
+      }
+    }
+
     componentDidUpdate(prevProps, prevState) {
       const {
-        isPopupReady
+        isPopupReady,
+        isMobile
       } = this.state;
       const {
-        isPopupReady: oldStateOpen = false
+        isPopupReady: oldStateOpen = false,
+        isMobile: oldIsMobileState
       } = prevState || {};
       const {
         dropElement
@@ -164,12 +189,10 @@ const Popup = function (Component) {
           this.size = null;
           this.popupObserver.disconnect();
         }
+      }
 
-        if (isPopupReady) {
-          this.handleAddingScrollBlock();
-        } else {
-          this.handleRemovingScrollBlock();
-        }
+      if (oldStateOpen !== isPopupReady && !isMobile || oldIsMobileState !== isMobile) {
+        this.handleScrollAndBlockEvents(isPopupReady, isMobile);
       }
     }
 
@@ -186,6 +209,7 @@ const Popup = function (Component) {
         return res;
       }, popups);
       this.handleRemovingScrollBlock();
+      this.handleRemovingScrollToUpdatePosition();
       let noPopups = true;
 
       for (const i in popups) {
@@ -211,10 +235,8 @@ const Popup = function (Component) {
     }
 
     handleAddingScrollBlock() {
-      const {
-        isAbsolutePositioningNeeded,
-        isOutsideScrollBlocked
-      } = this.props;
+      const isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
+      const isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);
 
       if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
         addIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
@@ -223,10 +245,8 @@ const Popup = function (Component) {
     }
 
     handleRemovingScrollBlock() {
-      const {
-        isAbsolutePositioningNeeded,
-        isOutsideScrollBlocked
-      } = this.props;
+      const isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
+      const isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);
 
       if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
         removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
@@ -234,6 +254,98 @@ const Popup = function (Component) {
       }
     }
 
+    handleAddingScrollToUpdatePosition() {
+      const isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
+      const isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);
+
+      if (!isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+        addIntersectionObserver(this.placeHolderElement, this.updateVisibilityOnIntersection);
+        document.addEventListener('scroll', this.updatePositionOnScroll, {
+          capture: true,
+          passive: false
+        });
+      }
+    }
+
+    handleRemovingScrollToUpdatePosition() {
+      const isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
+      const isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);
+
+      if (!isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+        removeIntersectionObserver(this.placeHolderElement, this.updateVisibilityOnIntersection);
+        document.removeEventListener('scroll', this.updatePositionOnScroll, {
+          capture: true,
+          passive: false
+        });
+      }
+    }
+
+    handleDropElementStyleUpdate(_ref) {
+      let {
+        top = '',
+        left = '',
+        bottom = '',
+        right = ''
+      } = _ref;
+      const {
+        dropElement
+      } = this;
+      Object.assign(dropElement.style, {
+        top: top ? `${top}px` : '',
+        left: left ? `${left}px` : '',
+        right: right ? `${right}px` : '',
+        bottom: bottom ? `${bottom}px` : ''
+      });
+    }
+
+    setContainerDynamicPositioning(betterPosition, needArrow) {
+      const {
+        dropElement
+      } = this;
+      const {
+        isMobile
+      } = this.state;
+      const {
+        view,
+        viewsOffset
+      } = betterPosition || DUMMY_OBJECT;
+      const styleToApply = selectn(`${view}`, viewsOffset);
+
+      if (isMobile) {
+        this.handleDropElementStyleUpdate({
+          top: '',
+          left: '',
+          right: '',
+          bottom: ''
+        });
+      } else {
+        this.handleDropElementStyleUpdate(styleToApply);
+
+        if (this.positionRef.current !== view) {
+          dropElement.setAttribute('data-position', `${view}`);
+          dropElement.setAttribute('data-box-direction', selectn(`${view}.direction`, positionMapping));
+
+          if (needArrow) {
+            dropElement.setAttribute('data-arrow-position', selectn(`${view}.arrowPosition`, positionMapping));
+          }
+
+          this.positionRef.current = view;
+        }
+      }
+    }
+
+    updatePositionOnScroll(e) {
+      const {
+        placeHolderElement,
+        defaultPosition,
+        isTargetElementVisible
+      } = this;
+
+      if (e.target.contains(placeHolderElement) && isTargetElementVisible) {
+        this.handlePopupPosition(defaultPosition, true);
+      }
+    }
+
     addScrollBlockListeners() {
       document.addEventListener('wheel', this.handleBlockScroll, {
         capture: true,
@@ -243,7 +355,7 @@ const Popup = function (Component) {
         capture: true,
         passive: false
       });
-      document.addEventListener('scroll', this.handleDebouncedPositionChange, {
+      document.addEventListener('scroll', this.handlePositionChange, {
         capture: true,
         passive: false
       });
@@ -262,7 +374,7 @@ const Popup = function (Component) {
         capture: true,
         passive: false
       });
-      document.removeEventListener('scroll', this.handleDebouncedPositionChange, {
+      document.removeEventListener('scroll', this.handlePositionChange, {
         capture: true,
         passive: false
       });
@@ -291,7 +403,7 @@ const Popup = function (Component) {
       const containerElement = this.dropElement;
 
       if (containerElement && containerElement !== event.target && !containerElement.contains(event.target) && targetElement && targetElement !== event.target && !targetElement.contains(event.target) && event.target.contains(targetElement)) {
-        this.handlePopupPosition(this.state.position); // this.closePopupOnly(event);
+        this.handlePopupPosition(this.state.position, true); // this.closePopupOnly(event);
       }
     }
 
@@ -305,11 +417,25 @@ const Popup = function (Component) {
     }
 
     handleIntersectionObserver(entry) {
-      if (entry.intersectionRatio === 0) {
+      if (entry.intersectionRatio === 0 && entry.isIntersecting === false) {
         this.closePopupOnly();
       }
     }
 
+    updateVisibilityOnIntersection(entry) {
+      const {
+        dropElement
+      } = this;
+
+      if (entry.isIntersecting === true) {
+        this.isTargetElementVisible = true;
+        dropElement.setAttribute('data-visible', 'visible');
+      } else if (entry.intersectionRatio === 0 && entry.isIntersecting === false) {
+        this.isTargetElementVisible = false;
+        dropElement.setAttribute('data-visible', 'hidden');
+      }
+    }
+
     getGroup() {
       const {
         popupGroup
@@ -325,17 +451,12 @@ const Popup = function (Component) {
         needPopupArrow
       } = popup;
       return isArrow !== undefined ? isArrow : needPopupArrow;
-    }
+    } // getScrollDebounceTime(popup) {
+    //   const { scrollDebounceTime } = popup.props;
+    //   const { scrollDebounceTime: popupScrollDebounceTime } = popup;
+    //   return scrollDebounceTime !== undefined ? scrollDebounceTime : popupScrollDebounceTime;
+    // }
 
-    getScrollDebounceTime(popup) {
-      const {
-        scrollDebounceTime
-      } = popup.props;
-      const {
-        scrollDebounceTime: popupScrollDebounceTime
-      } = popup;
-      return scrollDebounceTime !== undefined ? scrollDebounceTime : popupScrollDebounceTime;
-    }
 
     getCloseOnScrollPopup(popup) {
       const {
@@ -357,6 +478,16 @@ const Popup = function (Component) {
       return isAbsolutePositioningNeeded !== undefined ? isAbsolutePositioningNeeded : isAbsolutePopup;
     }
 
+    getIsOutsideScrollBlocked(popup) {
+      const {
+        isOutsideScrollBlocked
+      } = popup.props;
+      const {
+        isOutsideScrollBlock
+      } = popup;
+      return isOutsideScrollBlocked !== undefined ? isOutsideScrollBlocked : isOutsideScrollBlock;
+    }
+
     getCustomPositionOrder(popup) {
       const {
         customOrder = []
@@ -527,10 +658,24 @@ const Popup = function (Component) {
       cancelBubblingEffect(e);
     }
 
+    updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute) {
+      const isMobile = isMobilePopover(true);
+      this.setState({
+        isPopupReady: true,
+        position: view,
+        positions: views,
+        positionsOffset: viewsOffset,
+        targetOffset,
+        popupOffset,
+        isAbsolutePositioningNeeded: isAbsolute,
+        isMobile: isMobile
+      });
+    }
+
     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
+      let isUpdatePosition = arguments.length > 1 ? arguments[1] : undefined;
+      // isUpdatePosition --->>> Window resize and dropBox resize and to update the position
       const {
         direction
       } = this.context || {};
@@ -549,9 +694,11 @@ const Popup = function (Component) {
       }
 
       if (!placeHolderElement && !dropElement) {
+        const isMobile = isMobilePopover(true);
         this.setState({
           isPopupOpen: true,
-          isPopupReady: true
+          isPopupReady: true,
+          isMobile: isMobile
         });
         return;
       }
@@ -578,23 +725,27 @@ const Popup = function (Component) {
             viewsOffset,
             targetOffset,
             popupOffset
-          } = betterPosition || {};
-
-          if (position !== view || !isPopupReady) {
-            this.setState({
-              isPopupReady: true,
-              position: view,
-              positions: views,
-              positionsOffset: viewsOffset,
-              targetOffset,
-              popupOffset,
-              isAbsolutePositioningNeeded: isAbsolute
-            });
+          } = betterPosition || DUMMY_OBJECT;
+
+          if (!isAbsolute) {
+            if (!isPopupReady) {
+              this.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+            }
+
+            if (!dropElement) {
+              return;
+            }
+
+            this.setContainerDynamicPositioning(betterPosition, needArrow);
+          } else {
+            if (position !== view || !isPopupReady) {
+              this.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+            }
           }
         });
       };
 
-      if (isResizeHandling) {
+      if (isUpdatePosition) {
         setPosition();
       } else {
         this.defaultPosition = defaultPosition;
@@ -626,6 +777,7 @@ const Popup = function (Component) {
                 const needArrow = this.getNeedArrow(popup);
                 const isAbsolute = this.getIsAbsolutePopup(popup);
                 const customOrder = this.getCustomPositionOrder(popup);
+                const isMobile = isMobilePopover(true);
                 const betterPosition = viewPort.betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
                   needArrow,
                   isAbsolute,
@@ -641,14 +793,16 @@ const Popup = function (Component) {
                 const {
                   left: oldLeft = '',
                   top: oldTop = '',
-                  bottom: oldBottom = ''
+                  bottom: oldBottom = '',
+                  right: oldRight = ''
                 } = positionsOffset[position] || {};
                 const {
                   left = '',
                   top = '',
-                  bottom = ''
+                  bottom = '',
+                  right = ''
                 } = viewsOffset[view] || {};
-                const changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top || oldBottom !== bottom; // let isInViewPort = viewPort.isInViewPort(
+                const changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top || oldBottom !== bottom || oldRight !== right; // let isInViewPort = viewPort.isInViewPort(
                 //   placeHolderElement,
                 //   scrollContainer
                 // );
@@ -660,7 +814,8 @@ const Popup = function (Component) {
                     positionsOffset: viewsOffset,
                     targetOffset,
                     popupOffset,
-                    isAbsolutePositioningNeeded: isAbsolute
+                    isAbsolutePositioningNeeded: isAbsolute,
+                    isMobile: isMobile
                   });
                 } // if (!isInViewPort && !isAbsolute) {
                 //   popup.setState({ isPopupOpen: false, isPopupReady: false });
@@ -684,26 +839,19 @@ const Popup = function (Component) {
 
     handleResize() {
       this.handleOpenPopupPositionChange();
-    }
-
-    handleScroll(e) {
-      // this.handleOpenPopupPositionChange();
-      const {
-        closeOnScroll
-      } = this.getCloseOnScrollPopup(this);
-      const {
-        isPopupReady
-      } = this.state;
-
-      if (isPopupReady) {
-        console.log('onscrollPopupREady');
-      }
+    } // handleScroll(e) {
+    //   // this.handleOpenPopupPositionChange();
+    //   const { closeOnScroll } = this.getCloseOnScrollPopup(this);
+    //   const { isPopupReady } = this.state;
+    //   if (isPopupReady) {
+    //     console.log('onscrollPopupREady');
+    //   }
+    //   if (isPopupReady && closeOnScroll) {
+    //     console.log(this, 'handle Scroll');
+    //     this.togglePopup(e);
+    //   }
+    // }
 
-      if (isPopupReady && closeOnScroll) {
-        console.log(this, 'handle Scroll');
-        this.togglePopup(e);
-      }
-    }
 
     handlePopupResize(popupSize) {
       const {
@@ -735,13 +883,14 @@ const Popup = function (Component) {
     }
 
     render() {
+      // const { isPopupReady, isPopupOpen } = this.state;
       const {
-        isPopupReady,
-        isPopupOpen
-      } = this.state;
-      const localState = isPopupReady ? this.state : {};
+        isMobile,
+        ...restState
+      } = this.state; // const localState = isPopupReady ? this.state : {};
+
       return /*#__PURE__*/React.createElement(Component, { ...this.props,
-        ...this.state,
+        ...restState,
         openPopupOnly: this.openPopupOnly,
         closePopupOnly: this.closePopupOnly,
         togglePopup: this.togglePopup,

package/es/Provider/AvatarSize.js

@@ -1,4 +1,4 @@
-import style from '../common/avatarsizes.module.css';
+import style from "../common/avatarsizes.module.css";
 let styleList = {
   small: style.small,
   xsmall: style.xsmall,

package/es/Provider/CssProvider.js

@@ -1,4 +1,4 @@
-import style from '../common/common.module.css';
+import style from "../common/common.module.css";
 let styleList = {
   hide: style.hide,
   isDisabled: style.disabled,

package/es/Provider/IdProvider.js

@@ -1,5 +1,5 @@
-import { useNumberGenerator, getNumberGenerators } from './NumberGenerator/NumberGenerator';
-import { getLibraryConfig } from './Config';
+import { useNumberGenerator, getNumberGenerators } from "./NumberGenerator/NumberGenerator";
+import { getLibraryConfig } from "./Config";
 let globalId = getLibraryConfig('idCounter'),
     deletedIndexes = [],
     globalPrefix;

package/es/Provider/LibraryContext.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import LibraryContextInit from './LibraryContextInit';
-import { getLibraryConfig } from './Config';
+import LibraryContextInit from "./LibraryContextInit";
+import { getLibraryConfig } from "./Config";
 
 const LibraryContextProvider = _ref => {
   let {

package/es/Provider/ZindexProvider.js

@@ -1,5 +1,5 @@
-import { useNumberGenerator, getNumberGenerators } from './NumberGenerator/NumberGenerator';
-import { getLibraryConfig } from './Config';
+import { useNumberGenerator, getNumberGenerators } from "./NumberGenerator/NumberGenerator";
+import { getLibraryConfig } from "./Config";
 let globalId = getLibraryConfig('zindexCounter'),
     deletedIndexes = [],
     globalPrefix;

package/es/Provider/index.js

@@ -1,4 +1,4 @@
-export { getLibraryConfig, setLibraryConfig } from './Config';
-export { default as LibraryContextProvider } from './LibraryContext';
-export { removeGlobalZIndexPrefix, setInitialZIndex, useZIndex, getZIndex } from './ZindexProvider';
-export { setGlobalIdPrefix, removeGlobalIdPrefix, useUniqueId, getUniqueId } from './IdProvider';
+export { getLibraryConfig, setLibraryConfig } from "./Config";
+export { default as LibraryContextProvider } from "./LibraryContext";
+export { removeGlobalZIndexPrefix, setInitialZIndex, useZIndex, getZIndex } from "./ZindexProvider";
+export { setGlobalIdPrefix, removeGlobalIdPrefix, useUniqueId, getUniqueId } from "./IdProvider";

package/es/Radio/Radio.js

@@ -1,11 +1,11 @@
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium'] }] */
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import Label from '../Label/Label';
-import { Container, Box } from '../Layout';
-import CssProvider from '../Provider/CssProvider';
-import style from './Radio.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+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) {
     super(props);

package/es/Radio/__tests__/Radio.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Radio from '../Radio.js';
+import Radio from "../Radio.js";
 describe('Radio', () => {
   test('rendering the defult props', () => {
     const {

package/es/Responsive/CustomResponsive.js

@@ -1,11 +1,11 @@
 import React, { useContext, useEffect, useState, useRef, useMemo } from 'react';
-import { CustomResponsiveSender_defaultProps, CustomResponsiveReceiver_defaultProps } from './props/defaultProps';
-import { CustomResponsiveSender_propTypes, CustomResponsiveReceiver_propTypes } from './props/propTypes';
-import ResizeObserver from './ResizeObserver';
-import DOMRefWrapper from './RefWrapper';
-import shallowCompare from './utils/shallowCompare';
-import { isBreackPointMatched, Subscribale, isTouchDevice, windowResizeObserver } from './sizeObservers';
-import { ContextOptimizer } from '../utils/ContextOptimizer'; // const commonBreakPoints = [ 480, 640, 768, 1024, 1440 ];
+import { CustomResponsiveSender_defaultProps, CustomResponsiveReceiver_defaultProps } from "./props/defaultProps";
+import { CustomResponsiveSender_propTypes, CustomResponsiveReceiver_propTypes } from "./props/propTypes";
+import ResizeObserver from "./ResizeObserver";
+import DOMRefWrapper from "./RefWrapper";
+import shallowCompare from "./utils/shallowCompare";
+import { isBreackPointMatched, Subscribale, isTouchDevice, windowResizeObserver } from "./sizeObservers";
+import { ContextOptimizer } from "../utils/ContextOptimizer"; // const commonBreakPoints = [ 480, 640, 768, 1024, 1440 ];
 // const otherBreakPoints = [320, 360, 375, 720, 1280, 1600, 1920];
 // defaultResponsiveId means if ResponsiveSender do not recive id This will be id
 

package/es/Responsive/ResizeComponent.js

@@ -4,8 +4,8 @@
 // 2) debounce Mutation observer and resize observer
 import React from 'react';
 import PropTypes from 'prop-types';
-import ResizeObserver from './ResizeObserver';
-import { getElementSpace, debounce } from '../utils/Common';
+import ResizeObserver from "./ResizeObserver";
+import { getElementSpace, debounce } from "../utils/Common";
 export default class ResizeComponent extends React.Component {
   constructor(props) {
     super(props);

package/es/Responsive/Responsive.js

@@ -1,11 +1,11 @@
 import React, { useContext, useEffect, useState, useMemo } from 'react'; // import React, { useState, useMemo, useCallback, useContext } from 'react';
 
-import { ResponsiveSender_defaultProps, ResponsiveReceiver_defaultProps } from './props/defaultProps';
-import { ResponsiveSender_propTypes, ResponsiveReceiver_propTypes } from './props/propTypes';
-import ResizeObserver from './ResizeObserver';
-import DOMRefWrapper from './RefWrapper';
-import { windowResizeObserver } from './windowResizeObserver';
-import { getBreakPointValue, defaultMatcher } from './utils/'; // const sortedBreackPointKey = [  'MOBILE_XS',  'MOBILE_S',  'MOBILE_M',  'MOBILE',  'TABLET_S',  'TABLET_M',  'TABLET',  'LAPTOP_S',  'LAPTOP_M',  'LAPTOP',  'MONITOR_M',  'MONITOR'];
+import { ResponsiveSender_defaultProps, ResponsiveReceiver_defaultProps } from "./props/defaultProps";
+import { ResponsiveSender_propTypes, ResponsiveReceiver_propTypes } from "./props/propTypes";
+import ResizeObserver from "./ResizeObserver";
+import DOMRefWrapper from "./RefWrapper";
+import { windowResizeObserver } from "./windowResizeObserver";
+import { getBreakPointValue, defaultMatcher } from "./utils/"; // const sortedBreackPointKey = [  'MOBILE_XS',  'MOBILE_S',  'MOBILE_M',  'MOBILE',  'TABLET_S',  'TABLET_M',  'TABLET',  'LAPTOP_S',  'LAPTOP_M',  'LAPTOP',  'MONITOR_M',  'MONITOR'];
 
 export const ResponsiveContext = /*#__PURE__*/React.createContext({});
 const defaultResponsiveId = 'parentReceiver';