react-laag - npm Package Compare versions

Comparing version 1.4.3 to 1.5.0

dist/index.d.ts

@@ -7,4 +7,5 @@ import * as types from "./ToggleLayer/types";
 export { default as useHover } from "./useHover";
+export { default as useBreakpoint } from "./useBreakpoint";
 export { default as Transition } from "./Transition";
 export declare type LayerSide = types.LayerSide;
 export declare type RenderLayerProps = types.RenderLayerProps;

dist/index.es.js

@@ -91,3 +91,3 @@ import React__default, { useState, useRef, useEffect, useCallback, createElement, Fragment, useMemo, useLayoutEffect } from 'react';
 function useOutsideClick(refs, callback) {
-  const [events] = React__default.useState(["click", "touchstart"]);
+  const [events] = React__default.useState(["click"]);
   useEvent(typeof document !== "undefined" ? document : null, events, React__default.useCallback(evt => {
@@ -1172,3 +1172,5 @@ for (const ref of refs) {
       if (hasOnDisappear) {
-        onDisappear(full ? "full" : "partial");
+        if (partial || full) {
+          onDisappear(full ? "full" : "partial");
+        }
       } // ... else close accordingly
@@ -1666,3 +1668,4 @@ else {
     delayEnter = 0,
-    delayLeave = 0
+    delayLeave = 0,
+    hideOnScroll = true
   } = _temp === void 0 ? {} : _temp;
@@ -1672,2 +1675,3 @@ const [show, setShow] = useState(false);
   const timeoutState = useRef(null);
+  const hasTouchMoved = useRef(false);
 
@@ -1717,9 +1721,19 @@ function onMouseEnter() {
 
+    function clear() {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    }
+
     function onScroll() {
+      if (show && hideOnScroll) {
+        clear();
+        setShow(false);
+      }
+    }
+
+    function onTouchEnd() {
       if (show) {
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-          timeoutRef.current = null;
-        }
-
+        clear();
         setShow(false);
@@ -1730,4 +1744,6 @@ }
     window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("touchend", onTouchEnd, true);
     return () => {
-      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("touchend", onTouchEnd, true);
 
@@ -1738,9 +1754,39 @@ if (to) {
     };
-  }, [show]);
+  }, [show, hideOnScroll]);
   return [show, {
     onMouseEnter,
-    onMouseLeave
+    onMouseLeave,
+    onTouchStart: () => {
+      hasTouchMoved.current = false;
+    },
+    onTouchMove: () => {
+      hasTouchMoved.current = true;
+    },
+    onTouchEnd: () => {
+      if (!hasTouchMoved.current && !show) {
+        setShow(true);
+      }
+
+      hasTouchMoved.current = false;
+    }
   }];
 }
 
+function useBreakpoint(maxPixels) {
+  const [match, setMatch] = useState(typeof window !== "undefined" ? window.matchMedia("(max-width: " + maxPixels + "px)").matches : false);
+  useEffect(() => {
+    const matcher = window.matchMedia("(max-width: " + maxPixels + "px)");
+
+    function onMatch(evt) {
+      setMatch(evt.matches);
+    }
+
+    matcher.addListener(onMatch);
+    return () => {
+      matcher.removeListener(onMatch);
+    };
+  }, [maxPixels]);
+  return match;
+}
+
 function Transition(_ref) {
@@ -1786,3 +1832,3 @@ let {
 
-export { ToggleLayer, Arrow, useToggleLayer, Anchor as anchor, useHover, Transition };
+export { ToggleLayer, Arrow, useToggleLayer, Anchor as anchor, useHover, useBreakpoint, Transition };
 //# sourceMappingURL=index.es.js.map

dist/index.es.min.js

@@ -1,1 +0,1 @@
-import React__default,{useState,useRef,useEffect,useCallback,createElement,Fragment,useMemo,useLayoutEffect}from"react";import{createPortal}from"react-dom";function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function _objectWithoutPropertiesLoose(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}function useEvent(e,t,r,n,o){return void 0===n&&(n=!0),void 0===o&&(o=!1),useEffect(()=>{if(!n||!e)return;const i=r,s=Array.isArray(e)?e:[e],l=Array.isArray(t)?t:[t];return s.forEach(e=>{l.forEach(t=>{e.addEventListener(t,i,o)})}),()=>{s.forEach(e=>{l.forEach(t=>{e.removeEventListener(t,i,o)})})}},[r,e,n,t,o])}function isChildOf(e,t){if(e===t)return!0;if(e.children&&e.children.length>0)for(let r=0;r<e.children.length;r++){const n=e.children[r];if(n&&isChildOf(n,t))return!0}return!1}function useOutsideClick(e,t){const[r]=React__default.useState(["click","touchstart"]);useEvent("undefined"!=typeof document?document:null,r,React__default.useCallback(r=>{for(const t of e)if(t.current&&isChildOf(t.current,r.target))return;t()},[t]),!0,!0)}function useOnScroll(e,t,r){void 0===r&&(r=!0),useEvent(useMemo(()=>"undefined"!=typeof window?[window,...e]:[],[e]),"scroll",t,r)}function useOnWindowResize(e,t){void 0===t&&(t=!0),useEvent("undefined"!=typeof window?window:null,"resize",e,t)}const useIsomorphicLayoutEffect="undefined"!=typeof window?useLayoutEffect:useEffect;function useTrackElementResize(e,t,r,n,o){const i=useRef(o);i.current=o;const s=e||("undefined"==typeof window?class{}:window.ResizeObserver);if(!s)throw new Error("This browser does not support `ResizeObserver` out of the box. Please provide a polyfill as a prop.");const l=useRef(new s(()=>{t.current&&i.current()}));return useIsomorphicLayoutEffect(()=>{n?r&&l.current.observe(r):(r&&l.current.unobserve(r),t.current&&l.current.unobserve(t.current))},[n,r]),useEffect(()=>()=>{l.current.disconnect()},[]),l.current}const EMPTY_STYLE={};function isSet(e){return void 0!==e&&null!==e}function areStylesTheSame(e,t){const r=Object.keys(e),n=Object.keys(t);if(r.length!==n.length)return!1;for(let o=0;o<Math.max(r.length,n.length);o++){const i=r[o]||n[o];if(e[i]!==t[i])return!1}return!0}function shouldUpdateStyles(e,t){return!areStylesTheSame(e.layer,t.layer)||!areStylesTheSame(e.arrow,t.arrow)}function getWindowClientRect(){return{top:0,left:0,right:window.innerWidth,bottom:window.innerHeight,height:window.innerHeight,width:window.innerWidth}}const convertFloat=e=>parseFloat(e.replace("px",""));function getContentBox(e){const{width:t,height:r,boxSizing:n,borderLeft:o,borderRight:i,borderTop:s,borderBottom:l,paddingLeft:c,paddingRight:a,paddingTop:u,paddingBottom:f}=window.getComputedStyle(e);return{width:"border-box"===n?convertFloat(t):[t,o,i,c,a].reduce((e,t)=>e+(t?convertFloat(t):0),0),height:"border-box"===n?convertFloat(r):[r,s,l,u,f].reduce((e,t)=>e+(t?convertFloat(t):0),0)}}function clientRectToObject(e){return{top:e.top,left:e.left,right:e.right,bottom:e.bottom,width:e.width,height:e.height}}function getElementFromAnchorNode(e){let t=e;for(;!t.getBoundingClientRect;){if(!t.parentElement)return null;t=t.parentElement}return t}function useStyleState(e){const[t]=useState({layer:EMPTY_STYLE,arrow:EMPTY_STYLE,layerSide:e.split("_")[0].toLowerCase()}),[r,n]=useState(t),o=useRef(r);return{styles:r,lastStyles:o,setStyles:n,resetLastStyles:()=>{o.current=t}}}const Anchor={BOTTOM_LEFT:"BOTTOM_LEFT",BOTTOM_RIGHT:"BOTTOM_RIGHT",BOTTOM_CENTER:"BOTTOM_CENTER",TOP_LEFT:"TOP_LEFT",TOP_CENTER:"TOP_CENTER",TOP_RIGHT:"TOP_RIGHT",LEFT_BOTTOM:"LEFT_BOTTOM",LEFT_CENTER:"LEFT_CENTER",LEFT_TOP:"LEFT_TOP",RIGHT_BOTTOM:"RIGHT_BOTTOM",RIGHT_CENTER:"RIGHT_CENTER",RIGHT_TOP:"RIGHT_TOP"},POSSIBLE_ANCHORS=Object.keys(Anchor);function getPrimaryDirection(e){return e.startsWith("TOP_")||e.startsWith("BOTTOM_")?"Y":"X"}function primaryIsY(e){return"TOP"===e||"BOTTOM"===e}function getPrimaryByIndex(e,t,r,n){const o=primaryIsY(t);return e<3?t:e<6?o?r:n:e<9?o?["LEFT","RIGHT"].filter(e=>e!==r)[0]:["TOP","BOTTOM"].filter(e=>e!==n)[0]:o?["TOP","BOTTOM"].filter(e=>e!==t)[0]:["LEFT","RIGHT"].filter(e=>e!==t)[0]}function getSecondaryByIndex(e,t,r){const n=primaryIsY(t);switch(e){case 9:case 0:return r;case 1:case 10:return"CENTER"===r?n?"RIGHT":"BOTTOM":"CENTER";case 4:case 7:return"CENTER";case 2:case 11:return n?["LEFT","RIGHT"].filter(e=>e!==r)[0]:["TOP","BOTTOM"].filter(e=>e!==r)[0];case 3:case 6:return n?"BOTTOM"===t?"TOP":"BOTTOM":"LEFT"===t?"RIGHT":"LEFT";case 5:case 8:return n?"BOTTOM"===t?"BOTTOM":"TOP":"LEFT"===t?"LEFT":"RIGHT"}return"LEFT"}function getSecondaryAnchorOptionsByPrimary(e,t){return t.filter(t=>t.startsWith(e))}function splitAnchor(e){const[t,r]=e.split("_");return{primary:t,secondary:r}}function getLayerSideByAnchor(e){return"CENTER"===e?"center":splitAnchor(e).primary.toLowerCase()}function getAnchorPriority(e,t,r,n){const{primary:o,secondary:i}="CENTER"!==e?splitAnchor(e):{primary:n,secondary:"CENTER"};let s=POSSIBLE_ANCHORS.map((e,t)=>getPrimaryByIndex(t,o,r,n)+"_"+getSecondaryByIndex(t,o,i)).filter(e=>t.indexOf(e)>-1);return-1===s.indexOf(e)&&(s=[e,...s]),s}function getPrimaryStyle(e,t,r,n){const o="TOP"===e||"BOTTOM"===e?"top":"left",i="TOP"===e||"BOTTOM"===e?"height":"width";return"TOP"===e||"LEFT"===e?{[o]:t.trigger[o]-t.layer[i]-(t.relativeParent[o]-r[o])-n}:{[o]:t.trigger[o]+t.trigger[i]-(t.relativeParent[o]-r[o])+n}}function getCenter(e,t,r,n,o){return e.trigger[n]-e.relativeParent[n]+t[n]+e.trigger[o]/2-e.layer[o]/2-r}function getSecondaryStyle(e,t,r,n,o){if("CENTER"===e){const e="X"===o?"top":"left";return{[e]:getCenter(t,r,n,e,"X"===o?"height":"width")}}const i="TOP"===e||"BOTTOM"===e?"top":"left",s="TOP"===e||"BOTTOM"===e?"height":"width";return"TOP"===e||"LEFT"===e?{[i]:t.trigger[i]-t.relativeParent[i]+r[i]+n}:{[i]:t.trigger[i]+t.trigger[s]-t.layer[s]-(t.relativeParent[i]-r[i])-n}}function getAbsolutePositions(e){let{anchor:t,rects:r,triggerOffset:n,offsetSecondary:o,scrollLeft:i,scrollTop:s}=e;const l={left:i,top:s};if("CENTER"===t)return{top:getCenter(r,l,0,"top","height"),left:getCenter(r,l,0,"left","width")};const{primary:c,secondary:a}=splitAnchor(t),u=getPrimaryDirection(t);return _extends({},getPrimaryStyle(c,r,l,n),{},getSecondaryStyle(a,r,l,o,u))}function fixLayerDimensions(e,t,r){const n="function"==typeof r?r(getLayerSideByAnchor(t)):r;return _extends({},clientRectToObject(e),{},n)}const propMap={TOP:{side1:"bottom",side2:"top",size:"height",factor:-1},BOTTOM:{side1:"top",side2:"bottom",size:"height",factor:1},LEFT:{side1:"right",side2:"left",size:"width",factor:-1},RIGHT:{side1:"left",side2:"right",size:"width",factor:1}};function getPrimaryRect(e,t,r,n){const{side1:o,side2:i,size:s,factor:l}=propMap[e],c=t[i]+n*l;return{[o]:c,[i]:c+r[s]*l}}function getCenter$1(e,t,r,n,o){const i=e[n]+e[o]/2-t[o]/2-r;return{[n]:i,["left"===n?"right":"bottom"]:i+t[o]}}function getSecondaryRect(e,t,r,n,o){if("CENTER"===e){return getCenter$1(t,r,n,"X"===o?"top":"left","X"===o?"height":"width")}const{side1:i,side2:s,size:l,factor:c}=propMap[e],a=t[s]-n*c;return{[s]:a,[i]:a-r[l]*c}}function getLayerRectByAnchor(e){let t,r,{trigger:n,layer:o,anchor:i,triggerOffset:s,scrollOffset:l=0,offsetSecondary:c=0,layerDimensions:a}=e;const u=a?fixLayerDimensions(o,i,a):o;if("CENTER"===i)t=getCenter$1(n,u,0,"top","height"),r=getCenter$1(n,u,0,"left","width");else{const{primary:e,secondary:o}=splitAnchor(i),l=getPrimaryDirection(i);t=getPrimaryRect(e,n,u,s),r=getSecondaryRect(o,n,u,c,l)}const f=_extends({},u,{},t,{},r);return f.top=f.top-l,f.right=f.right+l,f.left=f.left-l,f.bottom=f.bottom+l,f}const ALL_OFFSET_SIDES=["bottom","top","left","right"];function getLayerOffsetsToParent(e,t){return{top:e.top-t.top,bottom:t.bottom-e.bottom,left:e.left-t.left,right:t.right-e.right}}function getLayerOffsetsToParents(e,t){return t.map(t=>getLayerOffsetsToParent(e,t))}function isLayerCompletelyInvisible(e,t){return t.some(t=>e.bottom<=t.top||e.right<=t.left||e.top>=t.bottom||e.left>=t.right)}function doesEntireLayerFitWithinScrollParents(e,t){return getLayerOffsetsToParents(e,t).every(e=>ALL_OFFSET_SIDES.every(t=>e[t]>=0))}function reduceOffsets(e){const t=e.reduce((e,t)=>(ALL_OFFSET_SIDES.forEach(r=>{e[r]=[...e[r],t[r]]}),e),{top:[],bottom:[],left:[],right:[]});return ALL_OFFSET_SIDES.reduce((e,r)=>(e[r]=t[r].sort((e,t)=>e-t)[0],e),{})}function getNegativeOffsetSides(e){const t=reduceOffsets(e);return ALL_OFFSET_SIDES.filter(e=>t[e]<0)}function getVisibleLayerSurface(e,t){const r=getLayerOffsetsToParent(e,t),n=ALL_OFFSET_SIDES.filter(e=>r[e]<0).reduce((e,t)=>{const n="top"===t||"bottom"===t?"height":"width";return _extends({},e,{[n]:e[n]+r[t]})},e);return n.width*n.height}function getVisibleLayerSurfaceWithinScrollParent(e,t){return t.map(t=>getVisibleLayerSurface(e,t)).sort((e,t)=>e-t)[0]}function doesAnchorFitWithinScrollParents(e,t,r,n,o){return doesEntireLayerFitWithinScrollParents(getLayerRectByAnchor({anchor:e,trigger:t.trigger,layer:t.layer,triggerOffset:r,scrollOffset:n,layerDimensions:o}),t.scrollParents)}function getLayerOffsetsToScrollParentsByAnchor(e,t,r,n){return getLayerOffsetsToParents(getLayerRectByAnchor({anchor:e,trigger:t.trigger,layer:t.layer,triggerOffset:r,scrollOffset:n,layerDimensions:null}),t.scrollParents)}function getOffsetSurface(e,t,r,n){const o=getPrimaryDirection(e);return(t["X"===o?"width":"height"]-r-2*n)*(t["X"===o?"height":"width"]-r-2*n)}function findAnchorByLayerSurface(e,t,r,n,o){return t.map(t=>{const i=getLayerRectByAnchor({anchor:t,layer:e.layer,trigger:e.trigger,scrollOffset:n,triggerOffset:r,layerDimensions:o});return{anchor:t,square:getVisibleLayerSurfaceWithinScrollParent(i,e.scrollParents)-getOffsetSurface(t,i,r,n)}}).sort((e,t)=>t.square-e.square)[0].anchor}function findBestSuitableAnchor(e,t,r,n,o){const i=t.find(t=>doesAnchorFitWithinScrollParents(t,e,r,n,o));return i||findAnchorByLayerSurface(e,t,r,n,o)}function getSecondaryOffsetSide(e,t,r,n,o){const i=getPrimaryDirection(e);return getNegativeOffsetSides(getLayerOffsetsToScrollParentsByAnchor(t,r,n,o)).find(e=>"X"===i?"top"===e||"bottom"===e:"left"===e||"right"===e)}function findSecondaryOffset(e,t,r,n,o){const{primary:i}=splitAnchor(e),s=getSecondaryAnchorOptionsByPrimary(i,t);if(1===s.length)return 0;const l=0===s.indexOf(e),c=doesAnchorFitWithinScrollParents(e,r,n,o,null);if(l&&c)return 0;const a=getSecondaryOffsetSide(e,s.find(e=>!doesAnchorFitWithinScrollParents(e,r,n,o,null)),r,n,o);if(!a)return 0;const u=reduceOffsets(getLayerOffsetsToScrollParentsByAnchor(e,r,n,o));let f=Math.min(-u[a],0);return!e.includes("_CENTER")||"top"!==a&&"left"!==a||(f=-f),f}function getArrowStyle(e,t,r){return"bottom"===r?{bottom:"100%",top:null,left:t.left+t.width/2-e.left,right:null}:"right"===r?{right:"100%",left:null,top:t.top+t.height/2-e.top,bottom:null}:"top"===r?{top:"100%",bottom:null,left:t.left+t.width/2-e.left,right:null}:{left:"100%",right:null,top:t.top+t.height/2-e.top,bottom:null}}function getAbsoluteStyle(e){let{rects:t,scrollTop:r,scrollLeft:n,triggerOffset:o,scrollOffset:i,possibleAnchors:s,preferedAnchor:l,preferedX:c,preferedY:a,autoAdjust:u,snapToAnchor:f,layerDimensions:g}=e;const d=getAnchorPriority(l,s,c,a),h=u?findBestSuitableAnchor(t,d,o,i,g):l,y=u&&!f&&"CENTER"!==h?findSecondaryOffset(h,d,t,o,i):0,p=getAbsolutePositions({anchor:h,rects:t,triggerOffset:o,offsetSecondary:y,scrollLeft:n,scrollTop:r}),T=getLayerRectByAnchor({anchor:h,trigger:t.trigger,layer:t.layer,triggerOffset:o,offsetSecondary:y,layerDimensions:g});return g&&(p.width=T.width,p.height=T.height),{layerStyle:p,layerRect:T,anchor:h}}function compensateScrollbars(e,t,r){const n=e.width-t,o=e.height-r;return{left:e.left,top:e.top,width:e.width-n,right:e.right-n,height:e.height-o,bottom:e.bottom-o}}const defaultPlacement={autoAdjust:!1,snapToAnchor:!1,anchor:"TOP_CENTER",layerDimensions:null,possibleAnchors:POSSIBLE_ANCHORS,preferX:"RIGHT",preferY:"BOTTOM",scrollOffset:10,triggerOffset:0};function getPositioning(e){let{triggerRect:t,layerElement:r,relativeParentElement:n,scrollParents:o,placement:i={},fixed:s}=e;if(0===t.height)return;if(!r)return;const l=s?[getWindowClientRect()]:[...o.map(e=>compensateScrollbars(e.getBoundingClientRect(),e.clientWidth,e.clientHeight)),getWindowClientRect()],c={autoAdjust:i.autoAdjust||defaultPlacement.autoAdjust,snapToAnchor:i.snapToAnchor||defaultPlacement.snapToAnchor,triggerOffset:isSet(i.triggerOffset)?i.triggerOffset:defaultPlacement.triggerOffset,scrollOffset:isSet(i.scrollOffset)?i.scrollOffset:defaultPlacement.scrollOffset,possibleAnchors:i.possibleAnchors||defaultPlacement.possibleAnchors,preferedAnchor:i.anchor||defaultPlacement.anchor,preferedX:i.preferX||defaultPlacement.preferX,preferedY:i.preferY||defaultPlacement.preferY,scrollLeft:n===document.body?0:n.scrollLeft,scrollTop:n===document.body?0:n.scrollTop,relativeParentElement:n,layerDimensions:i.layerDimensions||defaultPlacement.layerDimensions},a=r.getBoundingClientRect(),u={layer:_extends({top:a.top,left:a.left,right:a.right,bottom:a.bottom},getContentBox(r)),relativeParent:n.getBoundingClientRect(),scrollParents:l,trigger:t},{layerRect:f,layerStyle:g,anchor:d}=getAbsoluteStyle(_extends({rects:u},c));s&&(g.top=f.top,g.left=f.left);const h=getLayerSideByAnchor(d);return{styles:{layer:g,arrow:"CENTER"===d?EMPTY_STYLE:getArrowStyle(f,t,h),layerSide:h},layerRect:f}}function useElementRef(e,t){const[r,n]=useState(e||null),o=useRef(null);return[useCallback(e=>{e&&e!==o.current&&(o.current=e,n(t?t(e):e))},[]),r]}function findScrollContainers(e){const t=[];if(!e)return t;if(e===document.body)return t;const{overflow:r,overflowX:n,overflowY:o}=window.getComputedStyle(e);return[r,n,o].some(e=>"auto"===e||"scroll"===e)&&t.push(e),[...t,...findScrollContainers(e.parentElement)]}function useElementState(e,t){return useElementRef({triggerElement:null,relativeParentElement:null,scrollParents:[]},useCallback(r=>{const n=findScrollContainers(r),o=n[0]||document.body;if(o===document.body)document.body.style.position="relative";else if("development"===process.env.NODE_ENV){const r="function"==typeof e?e():e,n=window.getComputedStyle(o).position;"relative"!==n&&"absolute"!==n&&"fixed"!==n&&!t&&!r&&console.error("react-laag: Set the 'position' style of the nearest scroll-container to 'relative', 'absolute' or 'fixed', or set the 'fixed' prop to true. This is needed in order to position the layers properly. Currently the scroll-container is positioned: \""+n+'". Visit https://react-laag.com/docs/#position-relative for more info.',o)}return{triggerElement:r,relativeParentElement:o,scrollParents:n}},[]))}function ToggleLayer(e){let{children:t,renderLayer:r,placement:n={},onStyle:o,isOpen:i,closeOnOutsideClick:s,onOutsideClick:l,onDisappear:c,closeOnDisappear:a,fixed:u,container:f}=e,g=_objectWithoutPropertiesLoose(e,["children","renderLayer","placement","onStyle","isOpen","closeOnOutsideClick","onOutsideClick","onDisappear","closeOnDisappear","fixed","container"]);const[d,{relativeParentElement:h,triggerElement:y,scrollParents:p}]=useElementState(f,u),{styles:T,setStyles:O,lastStyles:m,resetLastStyles:S}=useStyleState(n.anchor||defaultPlacement.anchor),E=useRef(null),[P,b]=useState(!1),L=isSet(i)?i:P,w=useCallback(()=>{const e=y.getBoundingClientRect(),t=getPositioning({triggerRect:e,layerElement:E.current,placement:n,relativeParentElement:h,scrollParents:p,fixed:u});if(!t)return;const{layerRect:r,styles:s}=t;shouldUpdateStyles(m.current,s)&&(isSet(o)?(m.current=s,o(s.layer,s.arrow,s.layerSide)):O(s));const l=isSet(c),f=a&&!isSet(i);if(l||f){const t=[...p.map(e=>e.getBoundingClientRect()),getWindowClientRect()],n=!doesEntireLayerFitWithinScrollParents(u?e:r,t),o=isLayerCompletelyInvisible(u?e:r,t);l?c(o?"full":"partial"):("partial"===a&&n&&b(!1),"full"===a&&o&&b(!1))}},[h,L,y,p,u,n]),R=useTrackElementResize(g.ResizeObserver,E,y,L,w);useIsomorphicLayoutEffect(()=>{const e=!isSet(o);T!==m.current&&e?m.current=T:L?w():S()}),useOnWindowResize(w,L),useOnScroll(p,w,L),useOutsideClick([{current:y},E],useCallback(()=>{L&&(l&&l(),s&&!isSet(i)&&b(!1))},[L,b,i]));const C="function"==typeof f?f():f;return createElement(Fragment,null,t({isOpen:L,close:()=>{if(isSet(i))throw new Error("You cannot call `close()` while using the `isOpen` prop");b(!1)},open:()=>{if(isSet(i))throw new Error("You cannot call `open()` while using the `isOpen` prop");b(!0)},toggle:()=>{if(isSet(i))throw new Error("You cannot call `toggle()` while using the `isOpen` prop");b(!P)},triggerRef:d,layerSide:L?T.layerSide:null}),h&&createPortal(r({layerProps:{ref:e=>{e&&R.observe(e),E.current=e},style:_extends({},isSet(o)?EMPTY_STYLE:T.layer,{position:u?"fixed":"absolute",willChange:"top, bottom, left, right, width, height"})},arrowStyle:_extends({},isSet(o)?EMPTY_STYLE:T.arrow,{position:"absolute",willChange:"top, bottom, left, right"}),isOpen:L,layerSide:T.layerSide,triggerRect:y?y.getBoundingClientRect():null,close:()=>{if(isSet(i))throw new Error("You cannot call `close()` while using the `isOpen` prop");b(!1)}}),C||h))}function getWidthBasedOnAngle(e,t){return Math.tan(e*(Math.PI/180))*t}function getViewBox(e,t,r,n){switch(r){case"bottom":return"0 "+-n+" "+t+" "+e;case"top":return"0 0 "+t+" "+(e+n);case"right":return-n+" 0 "+e+" "+t;case"left":return"0 0 "+(e+n)+" "+t}return""}function getTrianglePath(e){let{sizeA:t,sizeB:r,layerSide:n,roundness:o,angle:i}=e;const s=o/10*t*2,l="bottom"===n?"0 "+t:"top"===n?"0 0":"right"===n?t+" "+r:"0 "+r,c=("bottom"===n||"top"===n?"H":"V")+" "+("bottom"===n||"top"===n?r:0),a=r/2,u=r/2+getWidthBasedOnAngle(i,t/8),f=t/8,g="bottom"===n?"C "+u+" "+f+" "+(a+s)+" 0 "+a+" 0":"top"===n?"C "+u+" "+(t-f)+" "+(a+s)+" "+t+" "+a+" "+t:"right"===n?"C "+f+" "+(r-u)+" 0 "+(a-s)+" 0 "+a:"C "+(t-f)+" "+(r-u)+" "+t+" "+(a-s)+" "+t+" "+a,d=r/2-getWidthBasedOnAngle(i,t/8),h=t/8;return"M "+l+" "+c+" "+g+" "+("bottom"===n?"C "+(a-s)+" 0 "+d+" "+h+" "+l:"top"===n?"C "+(a-s)+" "+t+" "+d+" "+(t-h)+" "+l:"right"===n?"C 0 "+(a+s)+" "+h+" "+(r-d)+" "+l:"C"+t+" "+(a+s)+" "+(t-h)+" "+(r-d)+" "+l)}function getBorderMaskPath(e){let{sizeA:t,sizeB:r,borderWidth:n,layerSide:o,angle:i}=e;const s=getWidthBasedOnAngle(i,n);return"bottom"===o||"top"===o?"M "+n+" "+("bottom"===o?t:0)+" H "+(r-n)+" L "+(r-n-s)+" "+("bottom"===o?t-n:n)+" H "+(s+n)+" Z":"M "+("right"===o?t:0)+" "+n+" V "+(r-n)+" L "+("right"===o?t-n:n)+" "+(r-n-s)+" V "+(s+n)+" Z"}function Arrow(e){let{size:t=8,angle:r=45,borderWidth:n=0,borderColor:o="black",roundness:i=0,backgroundColor:s="white",layerSide:l="top",style:c={}}=e;if("center"===l)return null;const a=t,u=2*getWidthBasedOnAngle(r,t);return createElement("svg",{style:_extends({},c,{transform:"translate"+("left"===l||"right"===l?"Y":"X")+"(-50%)"}),width:"left"===l||"right"===l?a:u,viewBox:getViewBox(a,u,l,n)},createElement("path",{fill:s,strokeWidth:n,stroke:o,d:getTrianglePath({angle:r,layerSide:l,roundness:i,sizeA:a,sizeB:u})}),createElement("path",{fill:s,d:getBorderMaskPath({sizeA:a,sizeB:u,angle:r,borderWidth:n,layerSide:l})}))}function useToggleLayer(e,t){let r=void 0===t?{}:t,{onStyle:n,closeOnOutsideClick:o,closeOnDisappear:i,fixed:s,container:l,placement:c={}}=r,a=_objectWithoutPropertiesLoose(r,["onStyle","closeOnOutsideClick","closeOnDisappear","fixed","container","placement"]);const[u,{relativeParentElement:f,triggerElement:g,scrollParents:d}]=useElementState(l,s),{styles:h,setStyles:y,lastStyles:p,resetLastStyles:T}=useStyleState(c.anchor||defaultPlacement.anchor),O=useRef(null),m=useRef(null);function S(){return"function"==typeof m.current?m.current():m.current}const[E,P]=useState(!1);function b(){m.current=null,P(!1)}const L=useCallback(()=>{const e=S();if(!e)return;const t=getPositioning({triggerRect:e,layerElement:O.current,placement:c,relativeParentElement:f,scrollParents:d,fixed:s});if(!t)return;const{layerRect:r,styles:o}=t;if(shouldUpdateStyles(p.current,o)&&(isSet(n)?(p.current=o,n(o.layer,o.arrow,o.layerSide)):y(o)),i){const t=[...d.map(e=>e.getBoundingClientRect()),getWindowClientRect()],n=!doesEntireLayerFitWithinScrollParents(s?e:r,t),o=isLayerCompletelyInvisible(s?e:r,t);"partial"===i&&n&&b(),"full"===i&&o&&b()}},[f,E,g,d,s,c]),w=useTrackElementResize(a.ResizeObserver,O,g,E,L);useIsomorphicLayoutEffect(()=>{const e=!isSet(n);h!==p.current&&e?p.current=h:E?L():T()}),useOnWindowResize(L,E),useOnScroll(d,L,E),useOutsideClick([O],useCallback(()=>{E&&o&&b()},[E,P]));const R="function"==typeof l?l():l;function C(e){let{clientRect:t,target:r}=e;m.current=t,E&&r===g?L():(u(r),P(!0))}const v={isOpen:E,close:b,open:C,openFromContextMenuEvent:e=>{e.preventDefault();const t=e.target;C({clientRect:{top:e.clientY,left:e.clientX,bottom:e.clientY+1,right:e.clientX+1,width:1,height:1},target:t})},openFromMouseEvent:e=>{const t=e.currentTarget;if(!t||!t.getBoundingClientRect)return;C({clientRect:()=>t.getBoundingClientRect(),target:t})},openFromSelection:e=>{if(!e.anchorNode||e.isCollapsed)return;const t=getElementFromAnchorNode(e.anchorNode);if(!t)return;const r=e.getRangeAt(0);C({clientRect:()=>r.getBoundingClientRect(),target:t})},layerSide:E?h.layerSide:null};return[f&&createPortal(e({layerProps:{ref:e=>{e&&w.observe(e),O.current=e},style:_extends({},isSet(n)?EMPTY_STYLE:h.layer,{position:s?"fixed":"absolute",willChange:"top, bottom, left, right, width, height"})},arrowStyle:_extends({},isSet(n)?EMPTY_STYLE:h.arrow,{position:"absolute",willChange:"top, bottom, left, right"}),isOpen:E,layerSide:h.layerSide,triggerRect:S(),close:()=>{b()}}),R||f),v]}function useHover(e){let{delayEnter:t=0,delayLeave:r=0}=void 0===e?{}:e;const[n,o]=useState(!1),i=useRef(null),s=useRef(null);return useEffect(()=>{const e=i.current;function t(){n&&(i.current&&(clearTimeout(i.current),i.current=null),o(!1))}return window.addEventListener("scroll",t,!0),()=>{window.removeEventListener("scroll",t),e&&clearTimeout(e)}},[n]),[n,{onMouseEnter:function(){"leaving"===s.current&&i.current&&(clearTimeout(i.current),i.current=null,s.current=null),n||(s.current="entering",i.current=setTimeout(()=>{o(!0),i.current=null,s.current=null},t))},onMouseLeave:function(){"entering"===s.current&&i.current&&(clearTimeout(i.current),i.current=null),n&&(s.current="leaving",i.current=setTimeout(()=>{o(!1),i.current=null},r))}}]}function Transition(e){let{isOpen:t,children:r}=e;const[n,o]=useState({isOpenInternal:t,isLeaving:!1}),i=useRef(!1);return useEffect(()=>{t?o({isOpenInternal:!0,isLeaving:!1}):i.current&&o({isOpenInternal:!1,isLeaving:!0})},[t,o]),useEffect(()=>{i.current=!0},[]),t||n.isOpenInternal||n.isLeaving?r(n.isOpenInternal,()=>{n.isOpenInternal||o(e=>_extends({},e,{isLeaving:!1}))},n.isLeaving):null}export{ToggleLayer,Arrow,useToggleLayer,Anchor as anchor,useHover,Transition};
+import React__default,{useState,useRef,useEffect,useCallback,createElement,Fragment,useMemo,useLayoutEffect}from"react";import{createPortal}from"react-dom";function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function _objectWithoutPropertiesLoose(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}function useEvent(e,t,r,n,o){return void 0===n&&(n=!0),void 0===o&&(o=!1),useEffect(()=>{if(!n||!e)return;const i=r,s=Array.isArray(e)?e:[e],l=Array.isArray(t)?t:[t];return s.forEach(e=>{l.forEach(t=>{e.addEventListener(t,i,o)})}),()=>{s.forEach(e=>{l.forEach(t=>{e.removeEventListener(t,i,o)})})}},[r,e,n,t,o])}function isChildOf(e,t){if(e===t)return!0;if(e.children&&e.children.length>0)for(let r=0;r<e.children.length;r++){const n=e.children[r];if(n&&isChildOf(n,t))return!0}return!1}function useOutsideClick(e,t){const[r]=React__default.useState(["click"]);useEvent("undefined"!=typeof document?document:null,r,React__default.useCallback(r=>{for(const t of e)if(t.current&&isChildOf(t.current,r.target))return;t()},[t]),!0,!0)}function useOnScroll(e,t,r){void 0===r&&(r=!0),useEvent(useMemo(()=>"undefined"!=typeof window?[window,...e]:[],[e]),"scroll",t,r)}function useOnWindowResize(e,t){void 0===t&&(t=!0),useEvent("undefined"!=typeof window?window:null,"resize",e,t)}const useIsomorphicLayoutEffect="undefined"!=typeof window?useLayoutEffect:useEffect;function useTrackElementResize(e,t,r,n,o){const i=useRef(o);i.current=o;const s=e||("undefined"==typeof window?class{}:window.ResizeObserver);if(!s)throw new Error("This browser does not support `ResizeObserver` out of the box. Please provide a polyfill as a prop.");const l=useRef(new s(()=>{t.current&&i.current()}));return useIsomorphicLayoutEffect(()=>{n?r&&l.current.observe(r):(r&&l.current.unobserve(r),t.current&&l.current.unobserve(t.current))},[n,r]),useEffect(()=>()=>{l.current.disconnect()},[]),l.current}const EMPTY_STYLE={};function isSet(e){return void 0!==e&&null!==e}function areStylesTheSame(e,t){const r=Object.keys(e),n=Object.keys(t);if(r.length!==n.length)return!1;for(let o=0;o<Math.max(r.length,n.length);o++){const i=r[o]||n[o];if(e[i]!==t[i])return!1}return!0}function shouldUpdateStyles(e,t){return!areStylesTheSame(e.layer,t.layer)||!areStylesTheSame(e.arrow,t.arrow)}function getWindowClientRect(){return{top:0,left:0,right:window.innerWidth,bottom:window.innerHeight,height:window.innerHeight,width:window.innerWidth}}const convertFloat=e=>parseFloat(e.replace("px",""));function getContentBox(e){const{width:t,height:r,boxSizing:n,borderLeft:o,borderRight:i,borderTop:s,borderBottom:l,paddingLeft:c,paddingRight:a,paddingTop:u,paddingBottom:f}=window.getComputedStyle(e);return{width:"border-box"===n?convertFloat(t):[t,o,i,c,a].reduce((e,t)=>e+(t?convertFloat(t):0),0),height:"border-box"===n?convertFloat(r):[r,s,l,u,f].reduce((e,t)=>e+(t?convertFloat(t):0),0)}}function clientRectToObject(e){return{top:e.top,left:e.left,right:e.right,bottom:e.bottom,width:e.width,height:e.height}}function getElementFromAnchorNode(e){let t=e;for(;!t.getBoundingClientRect;){if(!t.parentElement)return null;t=t.parentElement}return t}function useStyleState(e){const[t]=useState({layer:EMPTY_STYLE,arrow:EMPTY_STYLE,layerSide:e.split("_")[0].toLowerCase()}),[r,n]=useState(t),o=useRef(r);return{styles:r,lastStyles:o,setStyles:n,resetLastStyles:()=>{o.current=t}}}const Anchor={BOTTOM_LEFT:"BOTTOM_LEFT",BOTTOM_RIGHT:"BOTTOM_RIGHT",BOTTOM_CENTER:"BOTTOM_CENTER",TOP_LEFT:"TOP_LEFT",TOP_CENTER:"TOP_CENTER",TOP_RIGHT:"TOP_RIGHT",LEFT_BOTTOM:"LEFT_BOTTOM",LEFT_CENTER:"LEFT_CENTER",LEFT_TOP:"LEFT_TOP",RIGHT_BOTTOM:"RIGHT_BOTTOM",RIGHT_CENTER:"RIGHT_CENTER",RIGHT_TOP:"RIGHT_TOP"},POSSIBLE_ANCHORS=Object.keys(Anchor);function getPrimaryDirection(e){return e.startsWith("TOP_")||e.startsWith("BOTTOM_")?"Y":"X"}function primaryIsY(e){return"TOP"===e||"BOTTOM"===e}function getPrimaryByIndex(e,t,r,n){const o=primaryIsY(t);return e<3?t:e<6?o?r:n:e<9?o?["LEFT","RIGHT"].filter(e=>e!==r)[0]:["TOP","BOTTOM"].filter(e=>e!==n)[0]:o?["TOP","BOTTOM"].filter(e=>e!==t)[0]:["LEFT","RIGHT"].filter(e=>e!==t)[0]}function getSecondaryByIndex(e,t,r){const n=primaryIsY(t);switch(e){case 9:case 0:return r;case 1:case 10:return"CENTER"===r?n?"RIGHT":"BOTTOM":"CENTER";case 4:case 7:return"CENTER";case 2:case 11:return n?["LEFT","RIGHT"].filter(e=>e!==r)[0]:["TOP","BOTTOM"].filter(e=>e!==r)[0];case 3:case 6:return n?"BOTTOM"===t?"TOP":"BOTTOM":"LEFT"===t?"RIGHT":"LEFT";case 5:case 8:return n?"BOTTOM"===t?"BOTTOM":"TOP":"LEFT"===t?"LEFT":"RIGHT"}return"LEFT"}function getSecondaryAnchorOptionsByPrimary(e,t){return t.filter(t=>t.startsWith(e))}function splitAnchor(e){const[t,r]=e.split("_");return{primary:t,secondary:r}}function getLayerSideByAnchor(e){return"CENTER"===e?"center":splitAnchor(e).primary.toLowerCase()}function getAnchorPriority(e,t,r,n){const{primary:o,secondary:i}="CENTER"!==e?splitAnchor(e):{primary:n,secondary:"CENTER"};let s=POSSIBLE_ANCHORS.map((e,t)=>getPrimaryByIndex(t,o,r,n)+"_"+getSecondaryByIndex(t,o,i)).filter(e=>t.indexOf(e)>-1);return-1===s.indexOf(e)&&(s=[e,...s]),s}function getPrimaryStyle(e,t,r,n){const o="TOP"===e||"BOTTOM"===e?"top":"left",i="TOP"===e||"BOTTOM"===e?"height":"width";return"TOP"===e||"LEFT"===e?{[o]:t.trigger[o]-t.layer[i]-(t.relativeParent[o]-r[o])-n}:{[o]:t.trigger[o]+t.trigger[i]-(t.relativeParent[o]-r[o])+n}}function getCenter(e,t,r,n,o){return e.trigger[n]-e.relativeParent[n]+t[n]+e.trigger[o]/2-e.layer[o]/2-r}function getSecondaryStyle(e,t,r,n,o){if("CENTER"===e){const e="X"===o?"top":"left";return{[e]:getCenter(t,r,n,e,"X"===o?"height":"width")}}const i="TOP"===e||"BOTTOM"===e?"top":"left",s="TOP"===e||"BOTTOM"===e?"height":"width";return"TOP"===e||"LEFT"===e?{[i]:t.trigger[i]-t.relativeParent[i]+r[i]+n}:{[i]:t.trigger[i]+t.trigger[s]-t.layer[s]-(t.relativeParent[i]-r[i])-n}}function getAbsolutePositions(e){let{anchor:t,rects:r,triggerOffset:n,offsetSecondary:o,scrollLeft:i,scrollTop:s}=e;const l={left:i,top:s};if("CENTER"===t)return{top:getCenter(r,l,0,"top","height"),left:getCenter(r,l,0,"left","width")};const{primary:c,secondary:a}=splitAnchor(t),u=getPrimaryDirection(t);return _extends({},getPrimaryStyle(c,r,l,n),{},getSecondaryStyle(a,r,l,o,u))}function fixLayerDimensions(e,t,r){const n="function"==typeof r?r(getLayerSideByAnchor(t)):r;return _extends({},clientRectToObject(e),{},n)}const propMap={TOP:{side1:"bottom",side2:"top",size:"height",factor:-1},BOTTOM:{side1:"top",side2:"bottom",size:"height",factor:1},LEFT:{side1:"right",side2:"left",size:"width",factor:-1},RIGHT:{side1:"left",side2:"right",size:"width",factor:1}};function getPrimaryRect(e,t,r,n){const{side1:o,side2:i,size:s,factor:l}=propMap[e],c=t[i]+n*l;return{[o]:c,[i]:c+r[s]*l}}function getCenter$1(e,t,r,n,o){const i=e[n]+e[o]/2-t[o]/2-r;return{[n]:i,["left"===n?"right":"bottom"]:i+t[o]}}function getSecondaryRect(e,t,r,n,o){if("CENTER"===e){return getCenter$1(t,r,n,"X"===o?"top":"left","X"===o?"height":"width")}const{side1:i,side2:s,size:l,factor:c}=propMap[e],a=t[s]-n*c;return{[s]:a,[i]:a-r[l]*c}}function getLayerRectByAnchor(e){let t,r,{trigger:n,layer:o,anchor:i,triggerOffset:s,scrollOffset:l=0,offsetSecondary:c=0,layerDimensions:a}=e;const u=a?fixLayerDimensions(o,i,a):o;if("CENTER"===i)t=getCenter$1(n,u,0,"top","height"),r=getCenter$1(n,u,0,"left","width");else{const{primary:e,secondary:o}=splitAnchor(i),l=getPrimaryDirection(i);t=getPrimaryRect(e,n,u,s),r=getSecondaryRect(o,n,u,c,l)}const f=_extends({},u,{},t,{},r);return f.top=f.top-l,f.right=f.right+l,f.left=f.left-l,f.bottom=f.bottom+l,f}const ALL_OFFSET_SIDES=["bottom","top","left","right"];function getLayerOffsetsToParent(e,t){return{top:e.top-t.top,bottom:t.bottom-e.bottom,left:e.left-t.left,right:t.right-e.right}}function getLayerOffsetsToParents(e,t){return t.map(t=>getLayerOffsetsToParent(e,t))}function isLayerCompletelyInvisible(e,t){return t.some(t=>e.bottom<=t.top||e.right<=t.left||e.top>=t.bottom||e.left>=t.right)}function doesEntireLayerFitWithinScrollParents(e,t){return getLayerOffsetsToParents(e,t).every(e=>ALL_OFFSET_SIDES.every(t=>e[t]>=0))}function reduceOffsets(e){const t=e.reduce((e,t)=>(ALL_OFFSET_SIDES.forEach(r=>{e[r]=[...e[r],t[r]]}),e),{top:[],bottom:[],left:[],right:[]});return ALL_OFFSET_SIDES.reduce((e,r)=>(e[r]=t[r].sort((e,t)=>e-t)[0],e),{})}function getNegativeOffsetSides(e){const t=reduceOffsets(e);return ALL_OFFSET_SIDES.filter(e=>t[e]<0)}function getVisibleLayerSurface(e,t){const r=getLayerOffsetsToParent(e,t),n=ALL_OFFSET_SIDES.filter(e=>r[e]<0).reduce((e,t)=>{const n="top"===t||"bottom"===t?"height":"width";return _extends({},e,{[n]:e[n]+r[t]})},e);return n.width*n.height}function getVisibleLayerSurfaceWithinScrollParent(e,t){return t.map(t=>getVisibleLayerSurface(e,t)).sort((e,t)=>e-t)[0]}function doesAnchorFitWithinScrollParents(e,t,r,n,o){return doesEntireLayerFitWithinScrollParents(getLayerRectByAnchor({anchor:e,trigger:t.trigger,layer:t.layer,triggerOffset:r,scrollOffset:n,layerDimensions:o}),t.scrollParents)}function getLayerOffsetsToScrollParentsByAnchor(e,t,r,n){return getLayerOffsetsToParents(getLayerRectByAnchor({anchor:e,trigger:t.trigger,layer:t.layer,triggerOffset:r,scrollOffset:n,layerDimensions:null}),t.scrollParents)}function getOffsetSurface(e,t,r,n){const o=getPrimaryDirection(e);return(t["X"===o?"width":"height"]-r-2*n)*(t["X"===o?"height":"width"]-r-2*n)}function findAnchorByLayerSurface(e,t,r,n,o){return t.map(t=>{const i=getLayerRectByAnchor({anchor:t,layer:e.layer,trigger:e.trigger,scrollOffset:n,triggerOffset:r,layerDimensions:o});return{anchor:t,square:getVisibleLayerSurfaceWithinScrollParent(i,e.scrollParents)-getOffsetSurface(t,i,r,n)}}).sort((e,t)=>t.square-e.square)[0].anchor}function findBestSuitableAnchor(e,t,r,n,o){const i=t.find(t=>doesAnchorFitWithinScrollParents(t,e,r,n,o));return i||findAnchorByLayerSurface(e,t,r,n,o)}function getSecondaryOffsetSide(e,t,r,n,o){const i=getPrimaryDirection(e);return getNegativeOffsetSides(getLayerOffsetsToScrollParentsByAnchor(t,r,n,o)).find(e=>"X"===i?"top"===e||"bottom"===e:"left"===e||"right"===e)}function findSecondaryOffset(e,t,r,n,o){const{primary:i}=splitAnchor(e),s=getSecondaryAnchorOptionsByPrimary(i,t);if(1===s.length)return 0;const l=0===s.indexOf(e),c=doesAnchorFitWithinScrollParents(e,r,n,o,null);if(l&&c)return 0;const a=getSecondaryOffsetSide(e,s.find(e=>!doesAnchorFitWithinScrollParents(e,r,n,o,null)),r,n,o);if(!a)return 0;const u=reduceOffsets(getLayerOffsetsToScrollParentsByAnchor(e,r,n,o));let f=Math.min(-u[a],0);return!e.includes("_CENTER")||"top"!==a&&"left"!==a||(f=-f),f}function getArrowStyle(e,t,r){return"bottom"===r?{bottom:"100%",top:null,left:t.left+t.width/2-e.left,right:null}:"right"===r?{right:"100%",left:null,top:t.top+t.height/2-e.top,bottom:null}:"top"===r?{top:"100%",bottom:null,left:t.left+t.width/2-e.left,right:null}:{left:"100%",right:null,top:t.top+t.height/2-e.top,bottom:null}}function getAbsoluteStyle(e){let{rects:t,scrollTop:r,scrollLeft:n,triggerOffset:o,scrollOffset:i,possibleAnchors:s,preferedAnchor:l,preferedX:c,preferedY:a,autoAdjust:u,snapToAnchor:f,layerDimensions:d}=e;const g=getAnchorPriority(l,s,c,a),h=u?findBestSuitableAnchor(t,g,o,i,d):l,y=u&&!f&&"CENTER"!==h?findSecondaryOffset(h,g,t,o,i):0,p=getAbsolutePositions({anchor:h,rects:t,triggerOffset:o,offsetSecondary:y,scrollLeft:n,scrollTop:r}),T=getLayerRectByAnchor({anchor:h,trigger:t.trigger,layer:t.layer,triggerOffset:o,offsetSecondary:y,layerDimensions:d});return d&&(p.width=T.width,p.height=T.height),{layerStyle:p,layerRect:T,anchor:h}}function compensateScrollbars(e,t,r){const n=e.width-t,o=e.height-r;return{left:e.left,top:e.top,width:e.width-n,right:e.right-n,height:e.height-o,bottom:e.bottom-o}}const defaultPlacement={autoAdjust:!1,snapToAnchor:!1,anchor:"TOP_CENTER",layerDimensions:null,possibleAnchors:POSSIBLE_ANCHORS,preferX:"RIGHT",preferY:"BOTTOM",scrollOffset:10,triggerOffset:0};function getPositioning(e){let{triggerRect:t,layerElement:r,relativeParentElement:n,scrollParents:o,placement:i={},fixed:s}=e;if(0===t.height)return;if(!r)return;const l=s?[getWindowClientRect()]:[...o.map(e=>compensateScrollbars(e.getBoundingClientRect(),e.clientWidth,e.clientHeight)),getWindowClientRect()],c={autoAdjust:i.autoAdjust||defaultPlacement.autoAdjust,snapToAnchor:i.snapToAnchor||defaultPlacement.snapToAnchor,triggerOffset:isSet(i.triggerOffset)?i.triggerOffset:defaultPlacement.triggerOffset,scrollOffset:isSet(i.scrollOffset)?i.scrollOffset:defaultPlacement.scrollOffset,possibleAnchors:i.possibleAnchors||defaultPlacement.possibleAnchors,preferedAnchor:i.anchor||defaultPlacement.anchor,preferedX:i.preferX||defaultPlacement.preferX,preferedY:i.preferY||defaultPlacement.preferY,scrollLeft:n===document.body?0:n.scrollLeft,scrollTop:n===document.body?0:n.scrollTop,relativeParentElement:n,layerDimensions:i.layerDimensions||defaultPlacement.layerDimensions},a=r.getBoundingClientRect(),u={layer:_extends({top:a.top,left:a.left,right:a.right,bottom:a.bottom},getContentBox(r)),relativeParent:n.getBoundingClientRect(),scrollParents:l,trigger:t},{layerRect:f,layerStyle:d,anchor:g}=getAbsoluteStyle(_extends({rects:u},c));s&&(d.top=f.top,d.left=f.left);const h=getLayerSideByAnchor(g);return{styles:{layer:d,arrow:"CENTER"===g?EMPTY_STYLE:getArrowStyle(f,t,h),layerSide:h},layerRect:f}}function useElementRef(e,t){const[r,n]=useState(e||null),o=useRef(null);return[useCallback(e=>{e&&e!==o.current&&(o.current=e,n(t?t(e):e))},[]),r]}function findScrollContainers(e){const t=[];if(!e)return t;if(e===document.body)return t;const{overflow:r,overflowX:n,overflowY:o}=window.getComputedStyle(e);return[r,n,o].some(e=>"auto"===e||"scroll"===e)&&t.push(e),[...t,...findScrollContainers(e.parentElement)]}function useElementState(e,t){return useElementRef({triggerElement:null,relativeParentElement:null,scrollParents:[]},useCallback(r=>{const n=findScrollContainers(r),o=n[0]||document.body;if(o===document.body)document.body.style.position="relative";else if("development"===process.env.NODE_ENV){const r="function"==typeof e?e():e,n=window.getComputedStyle(o).position;"relative"!==n&&"absolute"!==n&&"fixed"!==n&&!t&&!r&&console.error("react-laag: Set the 'position' style of the nearest scroll-container to 'relative', 'absolute' or 'fixed', or set the 'fixed' prop to true. This is needed in order to position the layers properly. Currently the scroll-container is positioned: \""+n+'". Visit https://react-laag.com/docs/#position-relative for more info.',o)}return{triggerElement:r,relativeParentElement:o,scrollParents:n}},[]))}function ToggleLayer(e){let{children:t,renderLayer:r,placement:n={},onStyle:o,isOpen:i,closeOnOutsideClick:s,onOutsideClick:l,onDisappear:c,closeOnDisappear:a,fixed:u,container:f}=e,d=_objectWithoutPropertiesLoose(e,["children","renderLayer","placement","onStyle","isOpen","closeOnOutsideClick","onOutsideClick","onDisappear","closeOnDisappear","fixed","container"]);const[g,{relativeParentElement:h,triggerElement:y,scrollParents:p}]=useElementState(f,u),{styles:T,setStyles:O,lastStyles:m,resetLastStyles:S}=useStyleState(n.anchor||defaultPlacement.anchor),E=useRef(null),[P,w]=useState(!1),L=isSet(i)?i:P,b=useCallback(()=>{const e=y.getBoundingClientRect(),t=getPositioning({triggerRect:e,layerElement:E.current,placement:n,relativeParentElement:h,scrollParents:p,fixed:u});if(!t)return;const{layerRect:r,styles:s}=t;shouldUpdateStyles(m.current,s)&&(isSet(o)?(m.current=s,o(s.layer,s.arrow,s.layerSide)):O(s));const l=isSet(c),f=a&&!isSet(i);if(l||f){const t=[...p.map(e=>e.getBoundingClientRect()),getWindowClientRect()],n=!doesEntireLayerFitWithinScrollParents(u?e:r,t),o=isLayerCompletelyInvisible(u?e:r,t);l?(n||o)&&c(o?"full":"partial"):("partial"===a&&n&&w(!1),"full"===a&&o&&w(!1))}},[h,L,y,p,u,n]),R=useTrackElementResize(d.ResizeObserver,E,y,L,b);useIsomorphicLayoutEffect(()=>{const e=!isSet(o);T!==m.current&&e?m.current=T:L?b():S()}),useOnWindowResize(b,L),useOnScroll(p,b,L),useOutsideClick([{current:y},E],useCallback(()=>{L&&(l&&l(),s&&!isSet(i)&&w(!1))},[L,w,i]));const C="function"==typeof f?f():f;return createElement(Fragment,null,t({isOpen:L,close:()=>{if(isSet(i))throw new Error("You cannot call `close()` while using the `isOpen` prop");w(!1)},open:()=>{if(isSet(i))throw new Error("You cannot call `open()` while using the `isOpen` prop");w(!0)},toggle:()=>{if(isSet(i))throw new Error("You cannot call `toggle()` while using the `isOpen` prop");w(!P)},triggerRef:g,layerSide:L?T.layerSide:null}),h&&createPortal(r({layerProps:{ref:e=>{e&&R.observe(e),E.current=e},style:_extends({},isSet(o)?EMPTY_STYLE:T.layer,{position:u?"fixed":"absolute",willChange:"top, bottom, left, right, width, height"})},arrowStyle:_extends({},isSet(o)?EMPTY_STYLE:T.arrow,{position:"absolute",willChange:"top, bottom, left, right"}),isOpen:L,layerSide:T.layerSide,triggerRect:y?y.getBoundingClientRect():null,close:()=>{if(isSet(i))throw new Error("You cannot call `close()` while using the `isOpen` prop");w(!1)}}),C||h))}function getWidthBasedOnAngle(e,t){return Math.tan(e*(Math.PI/180))*t}function getViewBox(e,t,r,n){switch(r){case"bottom":return"0 "+-n+" "+t+" "+e;case"top":return"0 0 "+t+" "+(e+n);case"right":return-n+" 0 "+e+" "+t;case"left":return"0 0 "+(e+n)+" "+t}return""}function getTrianglePath(e){let{sizeA:t,sizeB:r,layerSide:n,roundness:o,angle:i}=e;const s=o/10*t*2,l="bottom"===n?"0 "+t:"top"===n?"0 0":"right"===n?t+" "+r:"0 "+r,c=("bottom"===n||"top"===n?"H":"V")+" "+("bottom"===n||"top"===n?r:0),a=r/2,u=r/2+getWidthBasedOnAngle(i,t/8),f=t/8,d="bottom"===n?"C "+u+" "+f+" "+(a+s)+" 0 "+a+" 0":"top"===n?"C "+u+" "+(t-f)+" "+(a+s)+" "+t+" "+a+" "+t:"right"===n?"C "+f+" "+(r-u)+" 0 "+(a-s)+" 0 "+a:"C "+(t-f)+" "+(r-u)+" "+t+" "+(a-s)+" "+t+" "+a,g=r/2-getWidthBasedOnAngle(i,t/8),h=t/8;return"M "+l+" "+c+" "+d+" "+("bottom"===n?"C "+(a-s)+" 0 "+g+" "+h+" "+l:"top"===n?"C "+(a-s)+" "+t+" "+g+" "+(t-h)+" "+l:"right"===n?"C 0 "+(a+s)+" "+h+" "+(r-g)+" "+l:"C"+t+" "+(a+s)+" "+(t-h)+" "+(r-g)+" "+l)}function getBorderMaskPath(e){let{sizeA:t,sizeB:r,borderWidth:n,layerSide:o,angle:i}=e;const s=getWidthBasedOnAngle(i,n);return"bottom"===o||"top"===o?"M "+n+" "+("bottom"===o?t:0)+" H "+(r-n)+" L "+(r-n-s)+" "+("bottom"===o?t-n:n)+" H "+(s+n)+" Z":"M "+("right"===o?t:0)+" "+n+" V "+(r-n)+" L "+("right"===o?t-n:n)+" "+(r-n-s)+" V "+(s+n)+" Z"}function Arrow(e){let{size:t=8,angle:r=45,borderWidth:n=0,borderColor:o="black",roundness:i=0,backgroundColor:s="white",layerSide:l="top",style:c={}}=e;if("center"===l)return null;const a=t,u=2*getWidthBasedOnAngle(r,t);return createElement("svg",{style:_extends({},c,{transform:"translate"+("left"===l||"right"===l?"Y":"X")+"(-50%)"}),width:"left"===l||"right"===l?a:u,viewBox:getViewBox(a,u,l,n)},createElement("path",{fill:s,strokeWidth:n,stroke:o,d:getTrianglePath({angle:r,layerSide:l,roundness:i,sizeA:a,sizeB:u})}),createElement("path",{fill:s,d:getBorderMaskPath({sizeA:a,sizeB:u,angle:r,borderWidth:n,layerSide:l})}))}function useToggleLayer(e,t){let r=void 0===t?{}:t,{onStyle:n,closeOnOutsideClick:o,closeOnDisappear:i,fixed:s,container:l,placement:c={}}=r,a=_objectWithoutPropertiesLoose(r,["onStyle","closeOnOutsideClick","closeOnDisappear","fixed","container","placement"]);const[u,{relativeParentElement:f,triggerElement:d,scrollParents:g}]=useElementState(l,s),{styles:h,setStyles:y,lastStyles:p,resetLastStyles:T}=useStyleState(c.anchor||defaultPlacement.anchor),O=useRef(null),m=useRef(null);function S(){return"function"==typeof m.current?m.current():m.current}const[E,P]=useState(!1);function w(){m.current=null,P(!1)}const L=useCallback(()=>{const e=S();if(!e)return;const t=getPositioning({triggerRect:e,layerElement:O.current,placement:c,relativeParentElement:f,scrollParents:g,fixed:s});if(!t)return;const{layerRect:r,styles:o}=t;if(shouldUpdateStyles(p.current,o)&&(isSet(n)?(p.current=o,n(o.layer,o.arrow,o.layerSide)):y(o)),i){const t=[...g.map(e=>e.getBoundingClientRect()),getWindowClientRect()],n=!doesEntireLayerFitWithinScrollParents(s?e:r,t),o=isLayerCompletelyInvisible(s?e:r,t);"partial"===i&&n&&w(),"full"===i&&o&&w()}},[f,E,d,g,s,c]),b=useTrackElementResize(a.ResizeObserver,O,d,E,L);useIsomorphicLayoutEffect(()=>{const e=!isSet(n);h!==p.current&&e?p.current=h:E?L():T()}),useOnWindowResize(L,E),useOnScroll(g,L,E),useOutsideClick([O],useCallback(()=>{E&&o&&w()},[E,P]));const R="function"==typeof l?l():l;function C(e){let{clientRect:t,target:r}=e;m.current=t,E&&r===d?L():(u(r),P(!0))}const v={isOpen:E,close:w,open:C,openFromContextMenuEvent:e=>{e.preventDefault();const t=e.target;C({clientRect:{top:e.clientY,left:e.clientX,bottom:e.clientY+1,right:e.clientX+1,width:1,height:1},target:t})},openFromMouseEvent:e=>{const t=e.currentTarget;if(!t||!t.getBoundingClientRect)return;C({clientRect:()=>t.getBoundingClientRect(),target:t})},openFromSelection:e=>{if(!e.anchorNode||e.isCollapsed)return;const t=getElementFromAnchorNode(e.anchorNode);if(!t)return;const r=e.getRangeAt(0);C({clientRect:()=>r.getBoundingClientRect(),target:t})},layerSide:E?h.layerSide:null};return[f&&createPortal(e({layerProps:{ref:e=>{e&&b.observe(e),O.current=e},style:_extends({},isSet(n)?EMPTY_STYLE:h.layer,{position:s?"fixed":"absolute",willChange:"top, bottom, left, right, width, height"})},arrowStyle:_extends({},isSet(n)?EMPTY_STYLE:h.arrow,{position:"absolute",willChange:"top, bottom, left, right"}),isOpen:E,layerSide:h.layerSide,triggerRect:S(),close:()=>{w()}}),R||f),v]}function useHover(e){let{delayEnter:t=0,delayLeave:r=0,hideOnScroll:n=!0}=void 0===e?{}:e;const[o,i]=useState(!1),s=useRef(null),l=useRef(null),c=useRef(!1);return useEffect(()=>{const e=s.current;function t(){s.current&&(clearTimeout(s.current),s.current=null)}function r(){o&&n&&(t(),i(!1))}function l(){o&&(t(),i(!1))}return window.addEventListener("scroll",r,!0),window.addEventListener("touchend",l,!0),()=>{window.removeEventListener("scroll",r,!0),window.removeEventListener("touchend",l,!0),e&&clearTimeout(e)}},[o,n]),[o,{onMouseEnter:function(){"leaving"===l.current&&s.current&&(clearTimeout(s.current),s.current=null,l.current=null),o||(l.current="entering",s.current=setTimeout(()=>{i(!0),s.current=null,l.current=null},t))},onMouseLeave:function(){"entering"===l.current&&s.current&&(clearTimeout(s.current),s.current=null),o&&(l.current="leaving",s.current=setTimeout(()=>{i(!1),s.current=null},r))},onTouchStart:()=>{c.current=!1},onTouchMove:()=>{c.current=!0},onTouchEnd:()=>{c.current||o||i(!0),c.current=!1}}]}function useBreakpoint(e){const[t,r]=useState("undefined"!=typeof window&&window.matchMedia("(max-width: "+e+"px)").matches);return useEffect(()=>{const t=window.matchMedia("(max-width: "+e+"px)");function n(e){r(e.matches)}return t.addListener(n),()=>{t.removeListener(n)}},[e]),t}function Transition(e){let{isOpen:t,children:r}=e;const[n,o]=useState({isOpenInternal:t,isLeaving:!1}),i=useRef(!1);return useEffect(()=>{t?o({isOpenInternal:!0,isLeaving:!1}):i.current&&o({isOpenInternal:!1,isLeaving:!0})},[t,o]),useEffect(()=>{i.current=!0},[]),t||n.isOpenInternal||n.isLeaving?r(n.isOpenInternal,()=>{n.isOpenInternal||o(e=>_extends({},e,{isLeaving:!1}))},n.isLeaving):null}export{ToggleLayer,Arrow,useToggleLayer,Anchor as anchor,useHover,useBreakpoint,Transition};

dist/index.js

@@ -108,3 +108,3 @@ 'use strict';
 function useOutsideClick(refs, callback) {
-  const [events] = React__default.useState(["click", "touchstart"]);
+  const [events] = React__default.useState(["click"]);
   useEvent(typeof document !== "undefined" ? document : null, events, React__default.useCallback(evt => {
@@ -1189,3 +1189,5 @@ for (const ref of refs) {
       if (hasOnDisappear) {
-        onDisappear(full ? "full" : "partial");
+        if (partial || full) {
+          onDisappear(full ? "full" : "partial");
+        }
       } // ... else close accordingly
@@ -1683,3 +1685,4 @@ else {
     delayEnter = 0,
-    delayLeave = 0
+    delayLeave = 0,
+    hideOnScroll = true
   } = _temp === void 0 ? {} : _temp;
@@ -1689,2 +1692,3 @@ const [show, setShow] = React.useState(false);
   const timeoutState = React.useRef(null);
+  const hasTouchMoved = React.useRef(false);
 
@@ -1734,9 +1738,19 @@ function onMouseEnter() {
 
+    function clear() {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    }
+
     function onScroll() {
+      if (show && hideOnScroll) {
+        clear();
+        setShow(false);
+      }
+    }
+
+    function onTouchEnd() {
       if (show) {
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-          timeoutRef.current = null;
-        }
-
+        clear();
         setShow(false);
@@ -1747,4 +1761,6 @@ }
     window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("touchend", onTouchEnd, true);
     return () => {
-      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("touchend", onTouchEnd, true);
 
@@ -1755,9 +1771,39 @@ if (to) {
     };
-  }, [show]);
+  }, [show, hideOnScroll]);
   return [show, {
     onMouseEnter,
-    onMouseLeave
+    onMouseLeave,
+    onTouchStart: () => {
+      hasTouchMoved.current = false;
+    },
+    onTouchMove: () => {
+      hasTouchMoved.current = true;
+    },
+    onTouchEnd: () => {
+      if (!hasTouchMoved.current && !show) {
+        setShow(true);
+      }
+
+      hasTouchMoved.current = false;
+    }
   }];
 }
 
+function useBreakpoint(maxPixels) {
+  const [match, setMatch] = React.useState(typeof window !== "undefined" ? window.matchMedia("(max-width: " + maxPixels + "px)").matches : false);
+  React.useEffect(() => {
+    const matcher = window.matchMedia("(max-width: " + maxPixels + "px)");
+
+    function onMatch(evt) {
+      setMatch(evt.matches);
+    }
+
+    matcher.addListener(onMatch);
+    return () => {
+      matcher.removeListener(onMatch);
+    };
+  }, [maxPixels]);
+  return match;
+}
+
 function Transition(_ref) {
@@ -1808,3 +1854,4 @@ let {
 exports.useHover = useHover;
+exports.useBreakpoint = useBreakpoint;
 exports.Transition = Transition;
 //# sourceMappingURL=index.js.map

dist/useHover.d.ts

 declare type UseHoverProps = {
     delayEnter?: number;
     delayLeave?: number;
+    hideOnScroll?: boolean;
 };
-export default function useHover({ delayEnter, delayLeave }?: UseHoverProps): [boolean, {
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
+export default function useHover({ delayEnter, delayLeave, hideOnScroll }?: UseHoverProps): readonly [boolean, {
+    readonly onMouseEnter: () => void;
+    readonly onMouseLeave: () => void;
+    readonly onTouchStart: () => void;
+    readonly onTouchMove: () => void;
+    readonly onTouchEnd: () => void;
 }];
 export {};

package.json

 {
   "name": "react-laag",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "description": "",
@@ -5,0 +5,0 @@ "author": "Erik Verweij",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

397166

increased by2.23%

Number of package files

45

increased by2.27%

Lines of code

3500

increased by2.61%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes