@zohodesk/components 1.0.0-temp-210.3 → 1.0.0-temp-212

package/es/PopOver/PopOver.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { PopOver_defaultProps, PopOverContainer_defaultProps } from "./props/defaultProps";
-import { PopOver_propTypes, PopOverTarget_propTypes, PopOverContainer_propTypes } from "./props/propTypes";
-import Popup from "../Popup/Popup";
-import { Box } from "../Layout";
-import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
-import style from "./PopOver.module.css";
+import { PopOver_defaultProps, PopOverContainer_defaultProps } from './props/defaultProps';
+import { PopOver_propTypes, PopOverTarget_propTypes, PopOverContainer_propTypes } from './props/propTypes';
+import Popup from '../Popup/Popup';
+import { Box } from '../Layout';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
+import style from './PopOver.module.css';
 
 class PopOver extends React.Component {
   constructor(props) {

package/es/PopOver/__tests__/PopOver.spec.js

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

package/es/PopOver/index.js

@@ -1,3 +1,3 @@
-export { default as PopOver } from "./PopOver";
-export { PopOverTarget } from "./PopOver";
-export { PopOverContainer } from "./PopOver";
+export { default as PopOver } from './PopOver';
+export { PopOverTarget } from './PopOver';
+export { PopOverContainer } from './PopOver';

package/es/Popup/Popup.js

@@ -1,14 +1,13 @@
 /**** Libraries ****/
 import React from 'react';
+import PropTypes from 'prop-types';
 import hoistStatics from 'hoist-non-react-statics';
-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 } 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";
 let lastOpenedGroup = [];
 let popups = {};
 
@@ -90,12 +89,6 @@ const Popup = function (Component) {
       this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
       this.handleDocumentFocus = this.handleDocumentFocus.bind(this);
       this.handleGetNeedPrevent = this.handleGetNeedPrevent.bind(this);
-      this.handleBlockScroll = this.handleBlockScroll.bind(this);
-      this.handlePositionChange = this.handlePositionChange.bind(this);
-      this.preventKeyboardScroll = this.preventKeyboardScroll.bind(this);
-      this.addScrollBlockListeners = this.addScrollBlockListeners.bind(this);
-      this.removeScrollBlockListeners = this.removeScrollBlockListeners.bind(this);
-      this.handleIntersectionObserver = this.handleIntersectionObserver.bind(this);
       this.popupObserver = new ResizeObserver(this.handlePopupResize); //dropBoxSize
 
       this.size = null;
@@ -108,7 +101,6 @@ const Popup = function (Component) {
         scrollDebounceTime
       } = this.getScrollDebounceTime(this);
       this.handleScroll = debounce(this.handleScroll.bind(this), scrollDebounceTime);
-      this.handleDebouncedPositionChange = debounce(this.handlePositionChange.bind(this), 100);
     }
 
     componentDidMount() {
@@ -152,9 +144,7 @@ const Popup = function (Component) {
         dropElement
       } = this;
       const {
-        needResizeHandling: propResizeHandling,
-        isAbsolutePositioningNeeded,
-        isOutsideScrollBlocked
+        needResizeHandling: propResizeHandling
       } = this.props;
 
       if (oldStateOpen !== isPopupReady) {
@@ -164,16 +154,6 @@ const Popup = function (Component) {
           this.size = null;
           this.popupObserver.disconnect();
         }
-
-        if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
-          if (isPopupReady) {
-            addIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
-            this.addScrollBlockListeners();
-          } else {
-            removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
-            this.removeScrollBlockListeners();
-          }
-        }
       }
     }
 
@@ -189,7 +169,6 @@ const Popup = function (Component) {
 
         return res;
       }, popups);
-      this.removeScrollBlockListeners();
       let noPopups = true;
 
       for (const i in popups) {
@@ -214,82 +193,6 @@ const Popup = function (Component) {
       }
     }
 
-    addScrollBlockListeners() {
-      document.addEventListener('wheel', this.handleBlockScroll, {
-        capture: true,
-        passive: false
-      });
-      document.addEventListener('touchmove', this.handleBlockScroll, {
-        capture: true,
-        passive: false
-      });
-      document.addEventListener('scroll', this.handleDebouncedPositionChange, {
-        capture: true,
-        passive: false
-      });
-      document.addEventListener('keydown', this.preventKeyboardScroll, {
-        capture: true,
-        passive: false
-      });
-    }
-
-    removeScrollBlockListeners() {
-      document.removeEventListener('wheel', this.handleBlockScroll, {
-        capture: true,
-        passive: false
-      });
-      document.removeEventListener('touchmove', this.handleBlockScroll, {
-        capture: true,
-        passive: false
-      });
-      document.removeEventListener('scroll', this.handleDebouncedPositionChange, {
-        capture: true,
-        passive: false
-      });
-      document.removeEventListener('keydown', this.preventKeyboardScroll, {
-        capture: true,
-        passive: false
-      });
-    }
-
-    handleBlockScroll(event) {
-      // const targetElement = this.placeHolderElement;
-      const containerElement = this.dropElement;
-
-      if (containerElement && containerElement !== event.target && !containerElement.contains(event.target)) {
-        // --- Scroll exclude Target & Container elements --- For reference. Will adopt in future
-        // if(
-        //   (containerElement && (containerElement !== event.target && !containerElement.contains(event.target)))
-        //   && (targetElement && (targetElement !== event.target && !targetElement.contains(event.target)))
-        // ) {
-        event.preventDefault();
-      }
-    }
-
-    handlePositionChange(event) {
-      const targetElement = this.placeHolderElement;
-      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);
-      }
-    }
-
-    preventKeyboardScroll(event) {
-      const containerElement = this.dropElement;
-      const keys = [32, 37, 38, 39, 40]; // Space, Arrow keys
-
-      if (containerElement && containerElement !== event.target && !containerElement.contains(event.target) && keys.includes(event.keyCode)) {
-        event.preventDefault();
-      }
-    }
-
-    handleIntersectionObserver(entry) {
-      if (entry.intersectionRatio === 0) {
-        this.closePopupOnly();
-      }
-    }
-
     getGroup() {
       const {
         popupGroup
@@ -620,15 +523,13 @@ const Popup = function (Component) {
                 } = betterPosition || {};
                 const {
                   left: oldLeft = '',
-                  top: oldTop = '',
-                  bottom: oldBottom = ''
+                  top: oldTop = ''
                 } = positionsOffset[position] || {};
                 const {
                   left = '',
-                  top = '',
-                  bottom = ''
+                  top = ''
                 } = 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; // let isInViewPort = viewPort.isInViewPort(
                 //   placeHolderElement,
                 //   scrollContainer
                 // );
@@ -734,8 +635,9 @@ const Popup = function (Component) {
   }
 
   Popup.displayName = Component.displayName || Component.name || Popup.name;
-  Popup.contextTypes = ContextTypes;
-  Popup.propTypes = PopupPropTypes;
+  Popup.contextTypes = {
+    direction: PropTypes.string
+  };
   return hoistStatics(Popup, Component);
 };
 

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 {
@@ -9,13 +9,15 @@ const LibraryContextProvider = _ref => {
     direction,
     coloredTagVariant,
     hasTagColorInheritedToText,
+    a11y_strikeThroughButtons,
     children
   } = _ref;
   const [value, setValue] = useState({
     isReducedMotion,
     direction,
     coloredTagVariant,
-    hasTagColorInheritedToText
+    hasTagColorInheritedToText,
+    a11y_strikeThroughButtons
   });
 
   function setGlobalContext(key, data) {

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,10 +1,10 @@
 /* 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 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 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/ResizeObserver.js

@@ -1,68 +1,45 @@
-const hasResizeObserver = !!window.ResizeObserver;
-const mutationObserverOptions = {
-  //NOTE: we donot consider child Count
-  // childList: true,
-  attributes: true
-};
-
-function getSize(element) {
-  let {
-    offsetHeight,
-    offsetWidth
-  } = element; // const { height, width } = element.getBoundingClientRect();
+function getBorderBoxSizeFromEntry(entry) {
+  const {
+    borderBoxSize
+  } = entry;
+  return borderBoxSize[0];
+}
 
+function getSize(entry) {
+  const borderBoxSize = getBorderBoxSizeFromEntry(entry);
   return {
-    height: offsetHeight,
-    width: offsetWidth
+    height: borderBoxSize.blockSize,
+    width: borderBoxSize.inlineSize
   };
 }
 
-function dispatch() {
-  let resizeResponsive = new Event('resizeResponsive');
-  window.dispatchEvent(resizeResponsive);
-}
-
-if (!hasResizeObserver) {
-  let interval = null;
-  window.addEventListener('resize', () => {
-    clearTimeout(interval);
-    interval = setTimeout(dispatch, 100);
-  });
-} // NOTE: this is not full polyfill , we just wrote what types of changes wlli
-
-
 export default class ResizeObserverPolyfill {
   constructor(onResize) {
-    // method finding
-    this.transitionEndHandler = this.transitionEndHandler.bind(this);
-    this.resizeHandlerDispatch = this.resizeHandlerDispatch.bind(this);
     this.resizeHandler = this.resizeHandler.bind(this);
-    this.replaceResizeHandler = this.replaceResizeHandler.bind(this);
-    this.debounce = this.debounce.bind(this);
     this.onResize = onResize;
     this.targetNode = null;
     this.size = {
       height: 0,
       width: 0
     };
-
-    if (hasResizeObserver) {
-      this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandlerDispatch);
-    } else {
-      this.mutationObserverInstance = new window.MutationObserver(this.resizeHandlerDispatch);
-    }
+    this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandler);
   }
 
   replaceResizeHandler(onResize) {
     this.onResize = onResize;
   }
 
-  resizeHandler() {
-    if (!this.targetNode) {
+  getEntry(entries) {
+    return entries[0];
+  }
+
+  resizeHandler(entries) {
+    if (!this.targetNode || !entries.length) {
       return;
     }
 
-    const currentSize = getSize(this.targetNode); // if (this.size && shallowCompare(currentSize, this.size)) {
+    const entry = this.getEntry(entries);
+    const currentSize = getSize(entry);
 
     if (this.size && currentSize.height === this.size.height && currentSize.width === this.size.width) {
       return;
@@ -73,48 +50,9 @@ export default class ResizeObserverPolyfill {
     return true;
   }
 
-  resizeHandlerDispatch() {
-    if (!this.resizeHandler() || hasResizeObserver) {
-      return;
-    }
-
-    dispatch();
-  }
-
-  debounce() {
-    clearTimeout(this.interval);
-    this.interval = setTimeout(this.resizeHandler, 100);
-  }
-
-  transitionEndHandler(event) {
-    if (event.propertyName.indexOf('color') === -1) {
-      this.resizeHandlerDispatch();
-    }
-  }
-
-  addEventListeners(targetNode) {
-    targetNode.addEventListener('transitionend', this.transitionEndHandler);
-    window.addEventListener('resizeResponsive', this.debounce);
-    targetNode.addEventListener('animationend', this.resizeHandlerDispatch);
-    targetNode.addEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
-  }
-
-  removeEventListeners(targetNode) {
-    targetNode.removeEventListener('transitionend', this.transitionEndHandler);
-    window.removeEventListener('resizeResponsive', this.debounce);
-    targetNode.removeEventListener('animationend', this.resizeHandlerDispatch);
-    targetNode.removeEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
-  }
-
   observe(targetNode) {
     this.targetNode = targetNode;
-
-    if (hasResizeObserver) {
-      this.resizeObserverInstance.observe(targetNode);
-    } else {
-      this.addEventListeners(targetNode);
-      this.mutationObserverInstance.observe(targetNode, mutationObserverOptions);
-    }
+    this.resizeObserverInstance.observe(targetNode);
   }
 
   replaceObservationElement(targetNode) {
@@ -124,12 +62,10 @@ export default class ResizeObserverPolyfill {
 
     this.targetNode && this.disconnect();
     targetNode && this.observe(targetNode);
-    targetNode && this.resizeHandlerDispatch();
   }
 
   disconnect() {
-    this.targetNode && this.removeEventListeners(this.targetNode);
-    hasResizeObserver ? this.resizeObserverInstance.disconnect() : this.mutationObserverInstance.disconnect();
+    this.resizeObserverInstance.disconnect();
     this.targetNode = null;
     this.size = {
       height: 0,

package/es/Responsive/ResizeObserverWithPolyfill.js

@@ -0,0 +1,140 @@
+const hasResizeObserver = !!window.ResizeObserver;
+const mutationObserverOptions = {
+  //NOTE: we donot consider child Count
+  // childList: true,
+  attributes: true
+};
+
+function getSize(element) {
+  let {
+    offsetHeight,
+    offsetWidth
+  } = element; // const { height, width } = element.getBoundingClientRect();
+
+  return {
+    height: offsetHeight,
+    width: offsetWidth
+  };
+}
+
+function dispatch() {
+  let resizeResponsive = new Event('resizeResponsive');
+  window.dispatchEvent(resizeResponsive);
+}
+
+if (!hasResizeObserver) {
+  let interval = null;
+  window.addEventListener('resize', () => {
+    clearTimeout(interval);
+    interval = setTimeout(dispatch, 100);
+  });
+} // NOTE: this is not full polyfill , we just wrote what types of changes wlli
+
+
+export default class ResizeObserverPolyfill {
+  constructor(onResize) {
+    // method finding
+    this.transitionEndHandler = this.transitionEndHandler.bind(this);
+    this.resizeHandlerDispatch = this.resizeHandlerDispatch.bind(this);
+    this.resizeHandler = this.resizeHandler.bind(this);
+    this.replaceResizeHandler = this.replaceResizeHandler.bind(this);
+    this.debounce = this.debounce.bind(this);
+    this.onResize = onResize;
+    this.targetNode = null;
+    this.size = {
+      height: 0,
+      width: 0
+    };
+
+    if (hasResizeObserver) {
+      this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandlerDispatch);
+    } else {
+      this.mutationObserverInstance = new window.MutationObserver(this.resizeHandlerDispatch);
+    }
+  }
+
+  replaceResizeHandler(onResize) {
+    this.onResize = onResize;
+  }
+
+  resizeHandler() {
+    if (!this.targetNode) {
+      return;
+    }
+
+    const currentSize = getSize(this.targetNode); // if (this.size && shallowCompare(currentSize, this.size)) {
+
+    if (this.size && currentSize.height === this.size.height && currentSize.width === this.size.width) {
+      return;
+    }
+
+    this.size = currentSize;
+    this.onResize(this.size, this.targetNode);
+    return true;
+  }
+
+  resizeHandlerDispatch() {
+    if (!this.resizeHandler() || hasResizeObserver) {
+      return;
+    }
+
+    dispatch();
+  }
+
+  debounce() {
+    clearTimeout(this.interval);
+    this.interval = setTimeout(this.resizeHandler, 100);
+  }
+
+  transitionEndHandler(event) {
+    if (event.propertyName.indexOf('color') === -1) {
+      this.resizeHandlerDispatch();
+    }
+  }
+
+  addEventListeners(targetNode) {
+    targetNode.addEventListener('transitionend', this.transitionEndHandler);
+    window.addEventListener('resizeResponsive', this.debounce);
+    targetNode.addEventListener('animationend', this.resizeHandlerDispatch);
+    targetNode.addEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
+  }
+
+  removeEventListeners(targetNode) {
+    targetNode.removeEventListener('transitionend', this.transitionEndHandler);
+    window.removeEventListener('resizeResponsive', this.debounce);
+    targetNode.removeEventListener('animationend', this.resizeHandlerDispatch);
+    targetNode.removeEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
+  }
+
+  observe(targetNode) {
+    this.targetNode = targetNode;
+
+    if (hasResizeObserver) {
+      this.resizeObserverInstance.observe(targetNode);
+    } else {
+      this.addEventListeners(targetNode);
+      this.mutationObserverInstance.observe(targetNode, mutationObserverOptions);
+    }
+  }
+
+  replaceObservationElement(targetNode) {
+    if (this.targetNode === targetNode) {
+      return;
+    }
+
+    this.targetNode && this.disconnect();
+    targetNode && this.observe(targetNode);
+    targetNode && this.resizeHandlerDispatch();
+  }
+
+  disconnect() {
+    this.targetNode && this.removeEventListeners(this.targetNode);
+    hasResizeObserver ? this.resizeObserverInstance.disconnect() : this.mutationObserverInstance.disconnect();
+    this.targetNode = null;
+    this.size = {
+      height: 0,
+      width: 0
+    };
+  }
+
+}

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';