react-laag - npm Package Compare versions

Comparing version 1.4.1 to 1.4.2

dist/index.es.js

 import React__default, { useState, useRef, useEffect, useCallback, createElement, Fragment, useMemo, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 
-function useEvent(element, event, callback, enabled = true) {
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function useEvent(element, event, callback, enabled) {
+  if (enabled === void 0) {
+    enabled = true;
+  }
+
   return useEffect(() => {
@@ -66,3 +103,7 @@ if (!enabled || !element) {
 
-function useOnScroll(elements, onScroll, trackScroll = true) {
+function useOnScroll(elements, onScroll, trackScroll) {
+  if (trackScroll === void 0) {
+    trackScroll = true;
+  }
+
   const memoElements = useMemo(() => typeof window !== "undefined" ? [window, ...elements] : [], [elements]);
@@ -72,3 +113,7 @@ useEvent(memoElements, "scroll", onScroll, trackScroll);
 
-function useOnWindowResize(onResize, trackResize = true) {
+function useOnWindowResize(onResize, trackResize) {
+  if (trackResize === void 0) {
+    trackResize = true;
+  }
+
   useEvent(typeof window !== "undefined" ? window : null, "resize", onResize, trackResize);
@@ -360,3 +405,3 @@ }
   let anchors = POSSIBLE_ANCHORS.map((_, index) => {
-    return `${getPrimaryByIndex(index, primary, preferedX, preferedY)}_${getSecondaryByIndex(index, primary, secondary)}`;
+    return getPrimaryByIndex(index, primary, preferedX, preferedY) + "_" + getSecondaryByIndex(index, primary, secondary);
   }).filter(anchor => possibleAnchors.indexOf(anchor) > -1); // include prefered anchor if not included in possibleAnchors
@@ -414,10 +459,11 @@
 
-function getAbsolutePositions({
-  anchor,
-  rects,
-  triggerOffset,
-  offsetSecondary,
-  scrollLeft,
-  scrollTop
-}) {
+function getAbsolutePositions(_ref) {
+  let {
+    anchor,
+    rects,
+    triggerOffset,
+    offsetSecondary,
+    scrollLeft,
+    scrollTop
+  } = _ref;
   const scroll = {
@@ -440,5 +486,3 @@ left: scrollLeft,
   const primaryDirection = getPrimaryDirection(anchor);
-  return { ...getPrimaryStyle(primary, rects, scroll, triggerOffset),
-    ...getSecondaryStyle(secondary, rects, scroll, offsetSecondary, primaryDirection)
-  };
+  return _extends({}, getPrimaryStyle(primary, rects, scroll, triggerOffset), {}, getSecondaryStyle(secondary, rects, scroll, offsetSecondary, primaryDirection));
 }
@@ -450,5 +494,3 @@
   const dimensions = typeof layerDimensions === "function" ? layerDimensions(getLayerSideByAnchor(anchor)) : layerDimensions;
-  return { ...clientRectToObject(originalLayer),
-    ...dimensions
-  };
+  return _extends({}, clientRectToObject(originalLayer), {}, dimensions);
 }
@@ -525,11 +567,12 @@
 
-function getLayerRectByAnchor({
-  trigger,
-  layer,
-  anchor,
-  triggerOffset,
-  scrollOffset = 0,
-  offsetSecondary = 0,
-  layerDimensions
-}) {
+function getLayerRectByAnchor(_ref) {
+  let {
+    trigger,
+    layer,
+    anchor,
+    triggerOffset,
+    scrollOffset = 0,
+    offsetSecondary = 0,
+    layerDimensions
+  } = _ref;
   let primaryRect;
@@ -553,7 +596,5 @@ let secondaryRect; // get the correct anticipated ClientRect based on the provided Anchor
 
-  const result = { ...layerRect,
-    ...primaryRect,
-    ...secondaryRect
-  }; // correct scrollOffsets
+  const result = _extends({}, layerRect, {}, primaryRect, {}, secondaryRect); // correct scrollOffsets
 
+
   result.top = result.top - scrollOffset;
@@ -618,5 +659,5 @@ result.right = result.right + scrollOffset;
     const affectedProperty = side === "top" || side === "bottom" ? "height" : "width";
-    return { ...rect,
+    return _extends({}, rect, {
       [affectedProperty]: rect[affectedProperty] + offsets[side]
-    };
+    });
   }, layer);
@@ -814,16 +855,17 @@ return visibleRect.width * visibleRect.height;
 
-function getAbsoluteStyle({
-  rects,
-  scrollTop,
-  scrollLeft,
-  triggerOffset,
-  scrollOffset,
-  possibleAnchors,
-  preferedAnchor,
-  preferedX,
-  preferedY,
-  autoAdjust,
-  snapToAnchor,
-  layerDimensions
-}) {
+function getAbsoluteStyle(_ref) {
+  let {
+    rects,
+    scrollTop,
+    scrollLeft,
+    triggerOffset,
+    scrollOffset,
+    possibleAnchors,
+    preferedAnchor,
+    preferedX,
+    preferedY,
+    autoAdjust,
+    snapToAnchor,
+    layerDimensions
+  } = _ref;
   // get a list of possible anchors bases on user set props
@@ -893,10 +935,12 @@ const possibleAnchorsByPriority = getAnchorPriority(preferedAnchor, possibleAnchors, preferedX, preferedY); // on `autoAdjust` find best suitable anchor based on
 };
-function getPositioning({
-  triggerRect,
-  layerElement,
-  relativeParentElement,
-  scrollParents,
-  placement = {},
-  fixed
-}) {
+function getPositioning(_ref) {
+  let {
+    triggerRect,
+    layerElement,
+    relativeParentElement,
+    scrollParents,
+    placement = {},
+    fixed
+  } = _ref;
+
   /**
@@ -935,11 +979,9 @@ * A.
 
-  const layer = {
+  const layer = _extends({
     top: layerBox.top,
     left: layerBox.left,
     right: layerBox.right,
-    bottom: layerBox.bottom,
-    // use `window.getComputedProperty` for width / height in order
-    // to handle things like scale-transforms
-    ...getContentBox(layerElement)
-  };
+    bottom: layerBox.bottom
+  }, getContentBox(layerElement));
+
   const rects = {
@@ -955,6 +997,5 @@ layer,
     anchor
-  } = getAbsoluteStyle({
-    rects,
-    ...options
-  });
+  } = getAbsoluteStyle(_extends({
+    rects
+  }, options));
 
@@ -1047,3 +1088,3 @@ if (fixed) {
       if (shouldWarnAboutPositionStyle) {
-        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: "${position}". Visit https://react-laag.com/docs/#position-relative for more info.`, relativeParentElement);
+        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: \"" + position + "\". Visit https://react-laag.com/docs/#position-relative for more info.", relativeParentElement);
       }
@@ -1060,16 +1101,18 @@ }
 
-function ToggleLayer({
-  children,
-  renderLayer,
-  placement = {},
-  onStyle,
-  isOpen: isOpenExternal,
-  closeOnOutsideClick,
-  onOutsideClick,
-  onDisappear,
-  closeOnDisappear,
-  fixed,
-  container,
-  ...props
-}) {
+function ToggleLayer(_ref) {
+  let {
+    children,
+    renderLayer,
+    placement = {},
+    onStyle,
+    isOpen: isOpenExternal,
+    closeOnOutsideClick,
+    onOutsideClick,
+    onDisappear,
+    closeOnDisappear,
+    fixed,
+    container
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["children", "renderLayer", "placement", "onStyle", "isOpen", "closeOnOutsideClick", "onOutsideClick", "onDisappear", "closeOnDisappear", "fixed", "container"]);
+
   /**
@@ -1253,11 +1296,11 @@ * Tracks trigger element and keeps it in state together with it's
       },
-      style: { ...(isSet(onStyle) ? EMPTY_STYLE : styles.layer),
+      style: _extends({}, isSet(onStyle) ? EMPTY_STYLE : styles.layer, {
         position: fixed ? "fixed" : "absolute",
         willChange: "top, bottom, left, right, width, height"
-      }
+      })
     },
-    arrowStyle: { ...(isSet(onStyle) ? EMPTY_STYLE : styles.arrow),
+    arrowStyle: _extends({}, isSet(onStyle) ? EMPTY_STYLE : styles.arrow, {
       position: "absolute",
       willChange: "top, bottom, left, right"
-    },
+    }),
     isOpen,
@@ -1286,12 +1329,12 @@ layerSide: styles.layerSide,
     case "bottom":
-      return `0 ${-borderWidth} ${sizeB} ${sizeA}`;
+      return "0 " + -borderWidth + " " + sizeB + " " + sizeA;
 
     case "top":
-      return `0 0 ${sizeB} ${sizeA + borderWidth}`;
+      return "0 0 " + sizeB + " " + (sizeA + borderWidth);
 
     case "right":
-      return `${-borderWidth} 0 ${sizeA} ${sizeB}`;
+      return -borderWidth + " 0 " + sizeA + " " + sizeB;
 
     case "left":
-      return `0 0 ${sizeA + borderWidth} ${sizeB}`;
+      return "0 0 " + (sizeA + borderWidth) + " " + sizeB;
   }
@@ -1302,48 +1345,52 @@
 
-function getTrianglePath({
-  sizeA,
-  sizeB,
-  layerSide,
-  roundness,
-  angle
-}) {
+function getTrianglePath(_ref) {
+  let {
+    sizeA,
+    sizeB,
+    layerSide,
+    roundness,
+    angle
+  } = _ref;
   const relativeRoundness = roundness / 10 * sizeA * 2;
-  const A = layerSide === "bottom" ? `0 ${sizeA}` : layerSide === "top" ? `0 0` : layerSide === "right" ? `${sizeA} ${sizeB}` : `0 ${sizeB}`;
-  const B = `${layerSide === "bottom" || layerSide === "top" ? "H" : "V"} ${layerSide === "bottom" || layerSide === "top" ? sizeB : 0}`;
+  const A = layerSide === "bottom" ? "0 " + sizeA : layerSide === "top" ? "0 0" : layerSide === "right" ? sizeA + " " + sizeB : "0 " + sizeB;
+  const B = (layerSide === "bottom" || layerSide === "top" ? "H" : "V") + " " + (layerSide === "bottom" || layerSide === "top" ? sizeB : 0);
   const cPoint = sizeB / 2;
   const c1A = sizeB / 2 + getWidthBasedOnAngle(angle, sizeA / 8);
   const c1B = sizeA / 8;
-  const C = layerSide === "bottom" ? `C ${c1A} ${c1B} ${cPoint + relativeRoundness} 0 ${cPoint} 0` : layerSide === "top" ? `C ${c1A} ${sizeA - c1B} ${cPoint + relativeRoundness} ${sizeA} ${cPoint} ${sizeA}` : layerSide === "right" ? `C ${c1B} ${sizeB - c1A} 0 ${cPoint - relativeRoundness} 0 ${cPoint}` : `C ${sizeA - c1B} ${sizeB - c1A} ${sizeA} ${cPoint - relativeRoundness} ${sizeA} ${cPoint}`;
+  const C = layerSide === "bottom" ? "C " + c1A + " " + c1B + " " + (cPoint + relativeRoundness) + " 0 " + cPoint + " 0" : layerSide === "top" ? "C " + c1A + " " + (sizeA - c1B) + " " + (cPoint + relativeRoundness) + " " + sizeA + " " + cPoint + " " + sizeA : layerSide === "right" ? "C " + c1B + " " + (sizeB - c1A) + " 0 " + (cPoint - relativeRoundness) + " 0 " + cPoint : "C " + (sizeA - c1B) + " " + (sizeB - c1A) + " " + sizeA + " " + (cPoint - relativeRoundness) + " " + sizeA + " " + cPoint;
   const d1A = sizeB / 2 - getWidthBasedOnAngle(angle, sizeA / 8);
   const d1B = sizeA / 8;
-  const D = layerSide === "bottom" ? `C ${cPoint - relativeRoundness} 0 ${d1A} ${d1B} ${A}` : layerSide === "top" ? `C ${cPoint - relativeRoundness} ${sizeA} ${d1A} ${sizeA - d1B} ${A}` : layerSide === "right" ? `C 0 ${cPoint + relativeRoundness} ${d1B} ${sizeB - d1A} ${A}` : `C${sizeA} ${cPoint + relativeRoundness} ${sizeA - d1B} ${sizeB - d1A} ${A}`;
-  return `M ${A} ${B} ${C} ${D}`;
+  const D = layerSide === "bottom" ? "C " + (cPoint - relativeRoundness) + " 0 " + d1A + " " + d1B + " " + A : layerSide === "top" ? "C " + (cPoint - relativeRoundness) + " " + sizeA + " " + d1A + " " + (sizeA - d1B) + " " + A : layerSide === "right" ? "C 0 " + (cPoint + relativeRoundness) + " " + d1B + " " + (sizeB - d1A) + " " + A : "C" + sizeA + " " + (cPoint + relativeRoundness) + " " + (sizeA - d1B) + " " + (sizeB - d1A) + " " + A;
+  return "M " + A + " " + B + " " + C + " " + D;
 }
 
-function getBorderMaskPath({
-  sizeA,
-  sizeB,
-  borderWidth,
-  layerSide,
-  angle
-}) {
+function getBorderMaskPath(_ref2) {
+  let {
+    sizeA,
+    sizeB,
+    borderWidth,
+    layerSide,
+    angle
+  } = _ref2;
   const borderOffset = getWidthBasedOnAngle(angle, borderWidth);
 
   if (layerSide === "bottom" || layerSide === "top") {
-    return `M ${borderWidth} ${layerSide === "bottom" ? sizeA : 0} H ${sizeB - borderWidth} L ${sizeB - borderWidth - borderOffset} ${layerSide === "bottom" ? sizeA - borderWidth : borderWidth} H ${borderOffset + borderWidth} Z`;
+    return "M " + borderWidth + " " + (layerSide === "bottom" ? sizeA : 0) + " H " + (sizeB - borderWidth) + " L " + (sizeB - borderWidth - borderOffset) + " " + (layerSide === "bottom" ? sizeA - borderWidth : borderWidth) + " H " + (borderOffset + borderWidth) + " Z";
   }
 
-  return `M ${layerSide === "right" ? sizeA : 0} ${borderWidth} V ${sizeB - borderWidth} L ${layerSide === "right" ? sizeA - borderWidth : borderWidth} ${sizeB - borderWidth - borderOffset} V ${borderOffset + borderWidth} Z`;
+  return "M " + (layerSide === "right" ? sizeA : 0) + " " + borderWidth + " V " + (sizeB - borderWidth) + " L " + (layerSide === "right" ? sizeA - borderWidth : borderWidth) + " " + (sizeB - borderWidth - borderOffset) + " V " + (borderOffset + borderWidth) + " Z";
 }
 
-function Arrow({
-  size = 8,
-  angle = 45,
-  borderWidth = 0,
-  borderColor = "black",
-  roundness = 0,
-  backgroundColor = "white",
-  layerSide = "top",
-  style = {}
-}) {
+function Arrow(_ref3) {
+  let {
+    size = 8,
+    angle = 45,
+    borderWidth = 0,
+    borderColor = "black",
+    roundness = 0,
+    backgroundColor = "white",
+    layerSide = "top",
+    style = {}
+  } = _ref3;
+
   if (layerSide === "center") {
@@ -1356,5 +1403,5 @@ return null;
   return createElement("svg", {
-    style: { ...style,
-      transform: `translate${layerSide === "left" || layerSide === "right" ? "Y" : "X"}(-50%)`
-    },
+    style: _extends({}, style, {
+      transform: "translate" + (layerSide === "left" || layerSide === "right" ? "Y" : "X") + "(-50%)"
+    }),
     width: layerSide === "left" || layerSide === "right" ? sizeA : sizeB,
@@ -1385,11 +1432,14 @@ viewBox: getViewBox(sizeA, sizeB, layerSide, borderWidth)
 
-function useToggleLayer(renderLayer, {
-  onStyle,
-  closeOnOutsideClick,
-  closeOnDisappear,
-  fixed,
-  container,
-  placement = {},
-  ...props
-} = {}) {
+function useToggleLayer(renderLayer, _temp) {
+  let _ref = _temp === void 0 ? {} : _temp,
+      {
+    onStyle,
+    closeOnOutsideClick,
+    closeOnDisappear,
+    fixed,
+    container,
+    placement = {}
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["onStyle", "closeOnOutsideClick", "closeOnDisappear", "fixed", "container", "placement"]);
+
   /**
@@ -1419,3 +1469,3 @@ * Tracks trigger element and keeps it in state together with it's
 
-  function close() {
+  function _close() {
     triggerRectRef.current = null;
@@ -1474,7 +1524,7 @@ setOpen(false);
       if (closeOnDisappear === "partial" && partial) {
-        close();
+        _close();
       }
 
       if (closeOnDisappear === "full" && full) {
-        close();
+        _close();
       }
@@ -1525,3 +1575,3 @@ }
     if (closeOnOutsideClick) {
-      close();
+      _close();
     }
@@ -1531,6 +1581,7 @@ }, [isOpen, setOpen]));
 
-  function open({
-    clientRect,
-    target
-  }) {
+  function open(_ref2) {
+    let {
+      clientRect,
+      target
+    } = _ref2;
     triggerRectRef.current = clientRect;
@@ -1548,3 +1599,3 @@
     isOpen,
-    close,
+    close: _close,
     open,
@@ -1612,11 +1663,11 @@ openFromContextMenuEvent: evt => {
       },
-      style: { ...(isSet(onStyle) ? EMPTY_STYLE : styles.layer),
+      style: _extends({}, isSet(onStyle) ? EMPTY_STYLE : styles.layer, {
         position: fixed ? "fixed" : "absolute",
         willChange: "top, bottom, left, right, width, height"
-      }
+      })
     },
-    arrowStyle: { ...(isSet(onStyle) ? EMPTY_STYLE : styles.arrow),
+    arrowStyle: _extends({}, isSet(onStyle) ? EMPTY_STYLE : styles.arrow, {
       position: "absolute",
       willChange: "top, bottom, left, right"
-    },
+    }),
     isOpen,
@@ -1626,3 +1677,3 @@ layerSide: styles.layerSide,
     close: () => {
-      close();
+      _close();
     }
@@ -1633,6 +1684,7 @@ }), containerElement || relativeParentElement);
 
-function useHover({
-  delayEnter = 0,
-  delayLeave = 0
-} = {}) {
+function useHover(_temp) {
+  let {
+    delayEnter = 0,
+    delayLeave = 0
+  } = _temp === void 0 ? {} : _temp;
   const [show, setShow] = useState(false);
@@ -1711,6 +1763,7 @@ const timeoutRef = useRef(null);
 
-function Transition({
-  isOpen: isOpenExternal,
-  children
-}) {
+function Transition(_ref) {
+  let {
+    isOpen: isOpenExternal,
+    children
+  } = _ref;
   const [state, setState] = useState({
@@ -1744,7 +1797,7 @@ isOpenInternal: isOpenExternal,
     if (!state.isOpenInternal) {
-      setState(s => ({ ...s,
+      setState(s => _extends({}, s, {
         isLeaving: false
       }));
     }
-  });
+  }, state.isLeaving);
 }
@@ -1751,0 +1804,0 @@

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 useEvent(e,t,r,n=!0){return useEffect(()=>{if(!n||!e)return;const o=r,i=Array.isArray(e)?e:[e],l=Array.isArray(t)?t:[t];return i.forEach(e=>{l.forEach(t=>{e.addEventListener(t,o)})}),()=>{i.forEach(e=>{l.forEach(t=>{e.removeEventListener(t,o)})})}},[r,e,n,t])}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]))}function useOnScroll(e,t,r=!0){useEvent(useMemo(()=>"undefined"!=typeof window?[window,...e]:[],[e]),"scroll",t,r)}function useOnWindowResize(e,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 l=e||("undefined"==typeof window?class{}:window.ResizeObserver);if(!l)throw new Error("This browser does not support `ResizeObserver` out of the box. Please provide a polyfill as a prop.");const s=useRef(new l(()=>{t.current&&i.current()}));return useIsomorphicLayoutEffect(()=>{n?r&&s.current.observe(r):(r&&s.current.unobserve(r),t.current&&s.current.unobserve(t.current))},[n,r]),useEffect(()=>()=>{s.current.disconnect()},[]),s.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:l,borderBottom:s,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,l,s,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 l=POSSIBLE_ANCHORS.map((e,t)=>`${getPrimaryByIndex(t,o,r,n)}_${getSecondaryByIndex(t,o,i)}`).filter(e=>t.indexOf(e)>-1);return-1===l.indexOf(e)&&(l=[e,...l]),l}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",l="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[l]-t.layer[l]-(t.relativeParent[i]-r[i])-n}}function getAbsolutePositions({anchor:e,rects:t,triggerOffset:r,offsetSecondary:n,scrollLeft:o,scrollTop:i}){const l={left:o,top:i};if("CENTER"===e)return{top:getCenter(t,l,0,"top","height"),left:getCenter(t,l,0,"left","width")};const{primary:s,secondary:c}=splitAnchor(e),a=getPrimaryDirection(e);return{...getPrimaryStyle(s,t,l,r),...getSecondaryStyle(c,t,l,n,a)}}function fixLayerDimensions(e,t,r){const n="function"==typeof r?r(getLayerSideByAnchor(t)):r;return{...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:l,factor:s}=propMap[e],c=t[i]+n*s;return{[o]:c,[i]:c+r[l]*s}}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:l,size:s,factor:c}=propMap[e],a=t[l]-n*c;return{[l]:a,[i]:a-r[s]*c}}function getLayerRectByAnchor({trigger:e,layer:t,anchor:r,triggerOffset:n,scrollOffset:o=0,offsetSecondary:i=0,layerDimensions:l}){let s,c;const a=l?fixLayerDimensions(t,r,l):t;if("CENTER"===r)s=getCenter$1(e,a,0,"top","height"),c=getCenter$1(e,a,0,"left","width");else{const{primary:t,secondary:o}=splitAnchor(r),l=getPrimaryDirection(r);s=getPrimaryRect(t,e,a,n),c=getSecondaryRect(o,e,a,i,l)}const u={...a,...s,...c};return u.top=u.top-o,u.right=u.right+o,u.left=u.left-o,u.bottom=u.bottom+o,u}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{...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),l=getSecondaryAnchorOptionsByPrimary(i,t);if(1===l.length)return 0;const s=0===l.indexOf(e),c=doesAnchorFitWithinScrollParents(e,r,n,o,null);if(s&&c)return 0;const a=getSecondaryOffsetSide(e,l.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({rects:e,scrollTop:t,scrollLeft:r,triggerOffset:n,scrollOffset:o,possibleAnchors:i,preferedAnchor:l,preferedX:s,preferedY:c,autoAdjust:a,snapToAnchor:u,layerDimensions:f}){const g=getAnchorPriority(l,i,s,c),d=a?findBestSuitableAnchor(e,g,n,o,f):l,h=a&&!u&&"CENTER"!==d?findSecondaryOffset(d,g,e,n,o):0,y=getAbsolutePositions({anchor:d,rects:e,triggerOffset:n,offsetSecondary:h,scrollLeft:r,scrollTop:t}),p=getLayerRectByAnchor({anchor:d,trigger:e.trigger,layer:e.layer,triggerOffset:n,offsetSecondary:h,layerDimensions:f});return f&&(y.width=p.width,y.height=p.height),{layerStyle:y,layerRect:p,anchor:d}}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({triggerRect:e,layerElement:t,relativeParentElement:r,scrollParents:n,placement:o={},fixed:i}){if(0===e.height)return;if(!t)return;const l=i?[getWindowClientRect()]:[...n.map(e=>compensateScrollbars(e.getBoundingClientRect(),e.clientWidth,e.clientHeight)),getWindowClientRect()],s={autoAdjust:o.autoAdjust||defaultPlacement.autoAdjust,snapToAnchor:o.snapToAnchor||defaultPlacement.snapToAnchor,triggerOffset:isSet(o.triggerOffset)?o.triggerOffset:defaultPlacement.triggerOffset,scrollOffset:isSet(o.scrollOffset)?o.scrollOffset:defaultPlacement.scrollOffset,possibleAnchors:o.possibleAnchors||defaultPlacement.possibleAnchors,preferedAnchor:o.anchor||defaultPlacement.anchor,preferedX:o.preferX||defaultPlacement.preferX,preferedY:o.preferY||defaultPlacement.preferY,scrollLeft:r===document.body?0:r.scrollLeft,scrollTop:r===document.body?0:r.scrollTop,relativeParentElement:r,layerDimensions:o.layerDimensions||defaultPlacement.layerDimensions},c=t.getBoundingClientRect(),a={layer:{top:c.top,left:c.left,right:c.right,bottom:c.bottom,...getContentBox(t)},relativeParent:r.getBoundingClientRect(),scrollParents:l,trigger:e},{layerRect:u,layerStyle:f,anchor:g}=getAbsoluteStyle({rects:a,...s});i&&(f.top=u.top,f.left=u.left);const d=getLayerSideByAnchor(g);return{styles:{layer:f,arrow:"CENTER"===g?EMPTY_STYLE:getArrowStyle(u,e,d),layerSide:d},layerRect:u}}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({children:e,renderLayer:t,placement:r={},onStyle:n,isOpen:o,closeOnOutsideClick:i,onOutsideClick:l,onDisappear:s,closeOnDisappear:c,fixed:a,container:u,...f}){const[g,{relativeParentElement:d,triggerElement:h,scrollParents:y}]=useElementState(u,a),{styles:p,setStyles:T,lastStyles:m,resetLastStyles:O}=useStyleState(r.anchor||defaultPlacement.anchor),S=useRef(null),[E,P]=useState(!1),R=isSet(o)?o:E,w=useCallback(()=>{const e=h.getBoundingClientRect(),t=getPositioning({triggerRect:e,layerElement:S.current,placement:r,relativeParentElement:d,scrollParents:y,fixed:a});if(!t)return;const{layerRect:i,styles:l}=t;shouldUpdateStyles(m.current,l)&&(isSet(n)?(m.current=l,n(l.layer,l.arrow,l.layerSide)):T(l));const u=isSet(s),f=c&&!isSet(o);if(u||f){const t=[...y.map(e=>e.getBoundingClientRect()),getWindowClientRect()],r=!doesEntireLayerFitWithinScrollParents(a?e:i,t),n=isLayerCompletelyInvisible(a?e:i,t);u?s(n?"full":"partial"):("partial"===c&&r&&P(!1),"full"===c&&n&&P(!1))}},[d,R,h,y,a,r]),L=useTrackElementResize(f.ResizeObserver,S,h,R,w);useIsomorphicLayoutEffect(()=>{const e=!isSet(n);p!==m.current&&e?m.current=p:R?w():O()}),useOnWindowResize(w,R),useOnScroll(y,w,R),useOutsideClick([{current:h},S],useCallback(()=>{R&&(l&&l(),i&&!isSet(o)&&P(!1))},[R,P,o]));const b="function"==typeof u?u():u;return createElement(Fragment,null,e({isOpen:R,close:()=>{if(isSet(o))throw new Error("You cannot call `close()` while using the `isOpen` prop");P(!1)},open:()=>{if(isSet(o))throw new Error("You cannot call `open()` while using the `isOpen` prop");P(!0)},toggle:()=>{if(isSet(o))throw new Error("You cannot call `toggle()` while using the `isOpen` prop");P(!E)},triggerRef:g,layerSide:R?p.layerSide:null}),d&&createPortal(t({layerProps:{ref:e=>{e&&L.observe(e),S.current=e},style:{...isSet(n)?EMPTY_STYLE:p.layer,position:a?"fixed":"absolute",willChange:"top, bottom, left, right, width, height"}},arrowStyle:{...isSet(n)?EMPTY_STYLE:p.arrow,position:"absolute",willChange:"top, bottom, left, right"},isOpen:R,layerSide:p.layerSide,triggerRect:h?h.getBoundingClientRect():null,close:()=>{if(isSet(o))throw new Error("You cannot call `close()` while using the `isOpen` prop");P(!1)}}),b||d))}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({sizeA:e,sizeB:t,layerSide:r,roundness:n,angle:o}){const i=n/10*e*2,l="bottom"===r?`0 ${e}`:"top"===r?"0 0":"right"===r?`${e} ${t}`:`0 ${t}`,s=`${"bottom"===r||"top"===r?"H":"V"} ${"bottom"===r||"top"===r?t:0}`,c=t/2,a=t/2+getWidthBasedOnAngle(o,e/8),u=e/8,f="bottom"===r?`C ${a} ${u} ${c+i} 0 ${c} 0`:"top"===r?`C ${a} ${e-u} ${c+i} ${e} ${c} ${e}`:"right"===r?`C ${u} ${t-a} 0 ${c-i} 0 ${c}`:`C ${e-u} ${t-a} ${e} ${c-i} ${e} ${c}`,g=t/2-getWidthBasedOnAngle(o,e/8),d=e/8;return`M ${l} ${s} ${f} ${"bottom"===r?`C ${c-i} 0 ${g} ${d} ${l}`:"top"===r?`C ${c-i} ${e} ${g} ${e-d} ${l}`:"right"===r?`C 0 ${c+i} ${d} ${t-g} ${l}`:`C${e} ${c+i} ${e-d} ${t-g} ${l}`}`}function getBorderMaskPath({sizeA:e,sizeB:t,borderWidth:r,layerSide:n,angle:o}){const i=getWidthBasedOnAngle(o,r);return"bottom"===n||"top"===n?`M ${r} ${"bottom"===n?e:0} H ${t-r} L ${t-r-i} ${"bottom"===n?e-r:r} H ${i+r} Z`:`M ${"right"===n?e:0} ${r} V ${t-r} L ${"right"===n?e-r:r} ${t-r-i} V ${i+r} Z`}function Arrow({size:e=8,angle:t=45,borderWidth:r=0,borderColor:n="black",roundness:o=0,backgroundColor:i="white",layerSide:l="top",style:s={}}){if("center"===l)return null;const c=e,a=2*getWidthBasedOnAngle(t,e);return createElement("svg",{style:{...s,transform:`translate${"left"===l||"right"===l?"Y":"X"}(-50%)`},width:"left"===l||"right"===l?c:a,viewBox:getViewBox(c,a,l,r)},createElement("path",{fill:i,strokeWidth:r,stroke:n,d:getTrianglePath({angle:t,layerSide:l,roundness:o,sizeA:c,sizeB:a})}),createElement("path",{fill:i,d:getBorderMaskPath({sizeA:c,sizeB:a,angle:t,borderWidth:r,layerSide:l})}))}function useToggleLayer(e,{onStyle:t,closeOnOutsideClick:r,closeOnDisappear:n,fixed:o,container:i,placement:l={},...s}={}){const[c,{relativeParentElement:a,triggerElement:u,scrollParents:f}]=useElementState(i,o),{styles:g,setStyles:d,lastStyles:h,resetLastStyles:y}=useStyleState(l.anchor||defaultPlacement.anchor),p=useRef(null),T=useRef(null);function m(){return"function"==typeof T.current?T.current():T.current}const[O,S]=useState(!1);function E(){T.current=null,S(!1)}const P=useCallback(()=>{const e=m();if(!e)return;const r=getPositioning({triggerRect:e,layerElement:p.current,placement:l,relativeParentElement:a,scrollParents:f,fixed:o});if(!r)return;const{layerRect:i,styles:s}=r;if(shouldUpdateStyles(h.current,s)&&(isSet(t)?(h.current=s,t(s.layer,s.arrow,s.layerSide)):d(s)),n){const t=[...f.map(e=>e.getBoundingClientRect()),getWindowClientRect()],r=!doesEntireLayerFitWithinScrollParents(o?e:i,t),l=isLayerCompletelyInvisible(o?e:i,t);"partial"===n&&r&&E(),"full"===n&&l&&E()}},[a,O,u,f,o,l]),R=useTrackElementResize(s.ResizeObserver,p,u,O,P);useIsomorphicLayoutEffect(()=>{const e=!isSet(t);g!==h.current&&e?h.current=g:O?P():y()}),useOnWindowResize(P,O),useOnScroll(f,P,O),useOutsideClick([p],useCallback(()=>{O&&r&&E()},[O,S]));const w="function"==typeof i?i():i;function L({clientRect:e,target:t}){T.current=e,O&&t===u?P():(c(t),S(!0))}const b={isOpen:O,close:E,open:L,openFromContextMenuEvent:e=>{e.preventDefault();const t=e.target;L({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;L({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);L({clientRect:()=>r.getBoundingClientRect(),target:t})},layerSide:O?g.layerSide:null};return[a&&createPortal(e({layerProps:{ref:e=>{e&&R.observe(e),p.current=e},style:{...isSet(t)?EMPTY_STYLE:g.layer,position:o?"fixed":"absolute",willChange:"top, bottom, left, right, width, height"}},arrowStyle:{...isSet(t)?EMPTY_STYLE:g.arrow,position:"absolute",willChange:"top, bottom, left, right"},isOpen:O,layerSide:g.layerSide,triggerRect:m(),close:()=>{E()}}),w||a),b]}function useHover({delayEnter:e=0,delayLeave:t=0}={}){const[r,n]=useState(!1),o=useRef(null),i=useRef(null);return useEffect(()=>{const e=o.current;function t(){r&&(o.current&&(clearTimeout(o.current),o.current=null),n(!1))}return window.addEventListener("scroll",t,!0),()=>{window.removeEventListener("scroll",t),e&&clearTimeout(e)}},[r]),[r,{onMouseEnter:function(){"leaving"===i.current&&o.current&&(clearTimeout(o.current),o.current=null,i.current=null),r||(i.current="entering",o.current=setTimeout(()=>{n(!0),o.current=null,i.current=null},e))},onMouseLeave:function(){"entering"===i.current&&o.current&&(clearTimeout(o.current),o.current=null),r&&(i.current="leaving",o.current=setTimeout(()=>{n(!1),o.current=null},t))}}]}function Transition({isOpen:e,children:t}){const[r,n]=useState({isOpenInternal:e,isLeaving:!1}),o=useRef(!1);return useEffect(()=>{e?n({isOpenInternal:!0,isLeaving:!1}):o.current&&n({isOpenInternal:!1,isLeaving:!0})},[e,n]),useEffect(()=>{o.current=!0},[]),e||r.isOpenInternal||r.isLeaving?t(r.isOpenInternal,()=>{r.isOpenInternal||n(e=>({...e,isLeaving:!1}))}):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){return void 0===n&&(n=!0),useEffect(()=>{if(!n||!e)return;const o=r,i=Array.isArray(e)?e:[e],s=Array.isArray(t)?t:[t];return i.forEach(e=>{s.forEach(t=>{e.addEventListener(t,o)})}),()=>{i.forEach(e=>{s.forEach(t=>{e.removeEventListener(t,o)})})}},[r,e,n,t])}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]))}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};

dist/index.js

@@ -11,3 +11,50 @@ 'use strict';
 
-function useEvent(element, event, callback, enabled = true) {
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var _extends_1 = createCommonjsModule(function (module) {
+  function _extends() {
+    module.exports = _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+
+    return _extends.apply(this, arguments);
+  }
+
+  module.exports = _extends;
+});
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;
+
+function useEvent(element, event, callback, enabled) {
+  if (enabled === void 0) {
+    enabled = true;
+  }
+
   return React.useEffect(() => {
@@ -74,3 +121,7 @@ if (!enabled || !element) {
 
-function useOnScroll(elements, onScroll, trackScroll = true) {
+function useOnScroll(elements, onScroll, trackScroll) {
+  if (trackScroll === void 0) {
+    trackScroll = true;
+  }
+
   const memoElements = React.useMemo(() => typeof window !== "undefined" ? [window, ...elements] : [], [elements]);
@@ -80,3 +131,7 @@ useEvent(memoElements, "scroll", onScroll, trackScroll);
 
-function useOnWindowResize(onResize, trackResize = true) {
+function useOnWindowResize(onResize, trackResize) {
+  if (trackResize === void 0) {
+    trackResize = true;
+  }
+
   useEvent(typeof window !== "undefined" ? window : null, "resize", onResize, trackResize);
@@ -368,3 +423,3 @@ }
   let anchors = POSSIBLE_ANCHORS.map((_, index) => {
-    return `${getPrimaryByIndex(index, primary, preferedX, preferedY)}_${getSecondaryByIndex(index, primary, secondary)}`;
+    return getPrimaryByIndex(index, primary, preferedX, preferedY) + "_" + getSecondaryByIndex(index, primary, secondary);
   }).filter(anchor => possibleAnchors.indexOf(anchor) > -1); // include prefered anchor if not included in possibleAnchors
@@ -422,10 +477,11 @@
 
-function getAbsolutePositions({
-  anchor,
-  rects,
-  triggerOffset,
-  offsetSecondary,
-  scrollLeft,
-  scrollTop
-}) {
+function getAbsolutePositions(_ref) {
+  let {
+    anchor,
+    rects,
+    triggerOffset,
+    offsetSecondary,
+    scrollLeft,
+    scrollTop
+  } = _ref;
   const scroll = {
@@ -448,5 +504,3 @@ left: scrollLeft,
   const primaryDirection = getPrimaryDirection(anchor);
-  return { ...getPrimaryStyle(primary, rects, scroll, triggerOffset),
-    ...getSecondaryStyle(secondary, rects, scroll, offsetSecondary, primaryDirection)
-  };
+  return _extends_1({}, getPrimaryStyle(primary, rects, scroll, triggerOffset), {}, getSecondaryStyle(secondary, rects, scroll, offsetSecondary, primaryDirection));
 }
@@ -458,5 +512,3 @@
   const dimensions = typeof layerDimensions === "function" ? layerDimensions(getLayerSideByAnchor(anchor)) : layerDimensions;
-  return { ...clientRectToObject(originalLayer),
-    ...dimensions
-  };
+  return _extends_1({}, clientRectToObject(originalLayer), {}, dimensions);
 }
@@ -533,11 +585,12 @@
 
-function getLayerRectByAnchor({
-  trigger,
-  layer,
-  anchor,
-  triggerOffset,
-  scrollOffset = 0,
-  offsetSecondary = 0,
-  layerDimensions
-}) {
+function getLayerRectByAnchor(_ref) {
+  let {
+    trigger,
+    layer,
+    anchor,
+    triggerOffset,
+    scrollOffset = 0,
+    offsetSecondary = 0,
+    layerDimensions
+  } = _ref;
   let primaryRect;
@@ -561,7 +614,5 @@ let secondaryRect; // get the correct anticipated ClientRect based on the provided Anchor
 
-  const result = { ...layerRect,
-    ...primaryRect,
-    ...secondaryRect
-  }; // correct scrollOffsets
+  const result = _extends_1({}, layerRect, {}, primaryRect, {}, secondaryRect); // correct scrollOffsets
 
+
   result.top = result.top - scrollOffset;
@@ -626,5 +677,5 @@ result.right = result.right + scrollOffset;
     const affectedProperty = side === "top" || side === "bottom" ? "height" : "width";
-    return { ...rect,
+    return _extends_1({}, rect, {
       [affectedProperty]: rect[affectedProperty] + offsets[side]
-    };
+    });
   }, layer);
@@ -822,16 +873,17 @@ return visibleRect.width * visibleRect.height;
 
-function getAbsoluteStyle({
-  rects,
-  scrollTop,
-  scrollLeft,
-  triggerOffset,
-  scrollOffset,
-  possibleAnchors,
-  preferedAnchor,
-  preferedX,
-  preferedY,
-  autoAdjust,
-  snapToAnchor,
-  layerDimensions
-}) {
+function getAbsoluteStyle(_ref) {
+  let {
+    rects,
+    scrollTop,
+    scrollLeft,
+    triggerOffset,
+    scrollOffset,
+    possibleAnchors,
+    preferedAnchor,
+    preferedX,
+    preferedY,
+    autoAdjust,
+    snapToAnchor,
+    layerDimensions
+  } = _ref;
   // get a list of possible anchors bases on user set props
@@ -901,10 +953,12 @@ const possibleAnchorsByPriority = getAnchorPriority(preferedAnchor, possibleAnchors, preferedX, preferedY); // on `autoAdjust` find best suitable anchor based on
 };
-function getPositioning({
-  triggerRect,
-  layerElement,
-  relativeParentElement,
-  scrollParents,
-  placement = {},
-  fixed
-}) {
+function getPositioning(_ref) {
+  let {
+    triggerRect,
+    layerElement,
+    relativeParentElement,
+    scrollParents,
+    placement = {},
+    fixed
+  } = _ref;
+
   /**
@@ -943,11 +997,9 @@ * A.
 
-  const layer = {
+  const layer = _extends_1({
     top: layerBox.top,
     left: layerBox.left,
     right: layerBox.right,
-    bottom: layerBox.bottom,
-    // use `window.getComputedProperty` for width / height in order
-    // to handle things like scale-transforms
-    ...getContentBox(layerElement)
-  };
+    bottom: layerBox.bottom
+  }, getContentBox(layerElement));
+
   const rects = {
@@ -963,6 +1015,5 @@ layer,
     anchor
-  } = getAbsoluteStyle({
-    rects,
-    ...options
-  });
+  } = getAbsoluteStyle(_extends_1({
+    rects
+  }, options));
 
@@ -1055,3 +1106,3 @@ if (fixed) {
       if (shouldWarnAboutPositionStyle) {
-        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: "${position}". Visit https://react-laag.com/docs/#position-relative for more info.`, relativeParentElement);
+        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: \"" + position + "\". Visit https://react-laag.com/docs/#position-relative for more info.", relativeParentElement);
       }
@@ -1068,16 +1119,18 @@ }
 
-function ToggleLayer({
-  children,
-  renderLayer,
-  placement = {},
-  onStyle,
-  isOpen: isOpenExternal,
-  closeOnOutsideClick,
-  onOutsideClick,
-  onDisappear,
-  closeOnDisappear,
-  fixed,
-  container,
-  ...props
-}) {
+function ToggleLayer(_ref) {
+  let {
+    children,
+    renderLayer,
+    placement = {},
+    onStyle,
+    isOpen: isOpenExternal,
+    closeOnOutsideClick,
+    onOutsideClick,
+    onDisappear,
+    closeOnDisappear,
+    fixed,
+    container
+  } = _ref,
+      props = objectWithoutPropertiesLoose(_ref, ["children", "renderLayer", "placement", "onStyle", "isOpen", "closeOnOutsideClick", "onOutsideClick", "onDisappear", "closeOnDisappear", "fixed", "container"]);
+
   /**
@@ -1261,11 +1314,11 @@ * Tracks trigger element and keeps it in state together with it's
       },
-      style: { ...(isSet(onStyle) ? EMPTY_STYLE : styles.layer),
+      style: _extends_1({}, isSet(onStyle) ? EMPTY_STYLE : styles.layer, {
         position: fixed ? "fixed" : "absolute",
         willChange: "top, bottom, left, right, width, height"
-      }
+      })
     },
-    arrowStyle: { ...(isSet(onStyle) ? EMPTY_STYLE : styles.arrow),
+    arrowStyle: _extends_1({}, isSet(onStyle) ? EMPTY_STYLE : styles.arrow, {
       position: "absolute",
       willChange: "top, bottom, left, right"
-    },
+    }),
     isOpen,
@@ -1294,12 +1347,12 @@ layerSide: styles.layerSide,
     case "bottom":
-      return `0 ${-borderWidth} ${sizeB} ${sizeA}`;
+      return "0 " + -borderWidth + " " + sizeB + " " + sizeA;
 
     case "top":
-      return `0 0 ${sizeB} ${sizeA + borderWidth}`;
+      return "0 0 " + sizeB + " " + (sizeA + borderWidth);
 
     case "right":
-      return `${-borderWidth} 0 ${sizeA} ${sizeB}`;
+      return -borderWidth + " 0 " + sizeA + " " + sizeB;
 
     case "left":
-      return `0 0 ${sizeA + borderWidth} ${sizeB}`;
+      return "0 0 " + (sizeA + borderWidth) + " " + sizeB;
   }
@@ -1310,48 +1363,52 @@
 
-function getTrianglePath({
-  sizeA,
-  sizeB,
-  layerSide,
-  roundness,
-  angle
-}) {
+function getTrianglePath(_ref) {
+  let {
+    sizeA,
+    sizeB,
+    layerSide,
+    roundness,
+    angle
+  } = _ref;
   const relativeRoundness = roundness / 10 * sizeA * 2;
-  const A = layerSide === "bottom" ? `0 ${sizeA}` : layerSide === "top" ? `0 0` : layerSide === "right" ? `${sizeA} ${sizeB}` : `0 ${sizeB}`;
-  const B = `${layerSide === "bottom" || layerSide === "top" ? "H" : "V"} ${layerSide === "bottom" || layerSide === "top" ? sizeB : 0}`;
+  const A = layerSide === "bottom" ? "0 " + sizeA : layerSide === "top" ? "0 0" : layerSide === "right" ? sizeA + " " + sizeB : "0 " + sizeB;
+  const B = (layerSide === "bottom" || layerSide === "top" ? "H" : "V") + " " + (layerSide === "bottom" || layerSide === "top" ? sizeB : 0);
   const cPoint = sizeB / 2;
   const c1A = sizeB / 2 + getWidthBasedOnAngle(angle, sizeA / 8);
   const c1B = sizeA / 8;
-  const C = layerSide === "bottom" ? `C ${c1A} ${c1B} ${cPoint + relativeRoundness} 0 ${cPoint} 0` : layerSide === "top" ? `C ${c1A} ${sizeA - c1B} ${cPoint + relativeRoundness} ${sizeA} ${cPoint} ${sizeA}` : layerSide === "right" ? `C ${c1B} ${sizeB - c1A} 0 ${cPoint - relativeRoundness} 0 ${cPoint}` : `C ${sizeA - c1B} ${sizeB - c1A} ${sizeA} ${cPoint - relativeRoundness} ${sizeA} ${cPoint}`;
+  const C = layerSide === "bottom" ? "C " + c1A + " " + c1B + " " + (cPoint + relativeRoundness) + " 0 " + cPoint + " 0" : layerSide === "top" ? "C " + c1A + " " + (sizeA - c1B) + " " + (cPoint + relativeRoundness) + " " + sizeA + " " + cPoint + " " + sizeA : layerSide === "right" ? "C " + c1B + " " + (sizeB - c1A) + " 0 " + (cPoint - relativeRoundness) + " 0 " + cPoint : "C " + (sizeA - c1B) + " " + (sizeB - c1A) + " " + sizeA + " " + (cPoint - relativeRoundness) + " " + sizeA + " " + cPoint;
   const d1A = sizeB / 2 - getWidthBasedOnAngle(angle, sizeA / 8);
   const d1B = sizeA / 8;
-  const D = layerSide === "bottom" ? `C ${cPoint - relativeRoundness} 0 ${d1A} ${d1B} ${A}` : layerSide === "top" ? `C ${cPoint - relativeRoundness} ${sizeA} ${d1A} ${sizeA - d1B} ${A}` : layerSide === "right" ? `C 0 ${cPoint + relativeRoundness} ${d1B} ${sizeB - d1A} ${A}` : `C${sizeA} ${cPoint + relativeRoundness} ${sizeA - d1B} ${sizeB - d1A} ${A}`;
-  return `M ${A} ${B} ${C} ${D}`;
+  const D = layerSide === "bottom" ? "C " + (cPoint - relativeRoundness) + " 0 " + d1A + " " + d1B + " " + A : layerSide === "top" ? "C " + (cPoint - relativeRoundness) + " " + sizeA + " " + d1A + " " + (sizeA - d1B) + " " + A : layerSide === "right" ? "C 0 " + (cPoint + relativeRoundness) + " " + d1B + " " + (sizeB - d1A) + " " + A : "C" + sizeA + " " + (cPoint + relativeRoundness) + " " + (sizeA - d1B) + " " + (sizeB - d1A) + " " + A;
+  return "M " + A + " " + B + " " + C + " " + D;
 }
 
-function getBorderMaskPath({
-  sizeA,
-  sizeB,
-  borderWidth,
-  layerSide,
-  angle
-}) {
+function getBorderMaskPath(_ref2) {
+  let {
+    sizeA,
+    sizeB,
+    borderWidth,
+    layerSide,
+    angle
+  } = _ref2;
   const borderOffset = getWidthBasedOnAngle(angle, borderWidth);
 
   if (layerSide === "bottom" || layerSide === "top") {
-    return `M ${borderWidth} ${layerSide === "bottom" ? sizeA : 0} H ${sizeB - borderWidth} L ${sizeB - borderWidth - borderOffset} ${layerSide === "bottom" ? sizeA - borderWidth : borderWidth} H ${borderOffset + borderWidth} Z`;
+    return "M " + borderWidth + " " + (layerSide === "bottom" ? sizeA : 0) + " H " + (sizeB - borderWidth) + " L " + (sizeB - borderWidth - borderOffset) + " " + (layerSide === "bottom" ? sizeA - borderWidth : borderWidth) + " H " + (borderOffset + borderWidth) + " Z";
   }
 
-  return `M ${layerSide === "right" ? sizeA : 0} ${borderWidth} V ${sizeB - borderWidth} L ${layerSide === "right" ? sizeA - borderWidth : borderWidth} ${sizeB - borderWidth - borderOffset} V ${borderOffset + borderWidth} Z`;
+  return "M " + (layerSide === "right" ? sizeA : 0) + " " + borderWidth + " V " + (sizeB - borderWidth) + " L " + (layerSide === "right" ? sizeA - borderWidth : borderWidth) + " " + (sizeB - borderWidth - borderOffset) + " V " + (borderOffset + borderWidth) + " Z";
 }
 
-function Arrow({
-  size = 8,
-  angle = 45,
-  borderWidth = 0,
-  borderColor = "black",
-  roundness = 0,
-  backgroundColor = "white",
-  layerSide = "top",
-  style = {}
-}) {
+function Arrow(_ref3) {
+  let {
+    size = 8,
+    angle = 45,
+    borderWidth = 0,
+    borderColor = "black",
+    roundness = 0,
+    backgroundColor = "white",
+    layerSide = "top",
+    style = {}
+  } = _ref3;
+
   if (layerSide === "center") {
@@ -1364,5 +1421,5 @@ return null;
   return React.createElement("svg", {
-    style: { ...style,
-      transform: `translate${layerSide === "left" || layerSide === "right" ? "Y" : "X"}(-50%)`
-    },
+    style: _extends_1({}, style, {
+      transform: "translate" + (layerSide === "left" || layerSide === "right" ? "Y" : "X") + "(-50%)"
+    }),
     width: layerSide === "left" || layerSide === "right" ? sizeA : sizeB,
@@ -1393,11 +1450,14 @@ viewBox: getViewBox(sizeA, sizeB, layerSide, borderWidth)
 
-function useToggleLayer(renderLayer, {
-  onStyle,
-  closeOnOutsideClick,
-  closeOnDisappear,
-  fixed,
-  container,
-  placement = {},
-  ...props
-} = {}) {
+function useToggleLayer(renderLayer, _temp) {
+  let _ref = _temp === void 0 ? {} : _temp,
+      {
+    onStyle,
+    closeOnOutsideClick,
+    closeOnDisappear,
+    fixed,
+    container,
+    placement = {}
+  } = _ref,
+      props = objectWithoutPropertiesLoose(_ref, ["onStyle", "closeOnOutsideClick", "closeOnDisappear", "fixed", "container", "placement"]);
+
   /**
@@ -1427,3 +1487,3 @@ * Tracks trigger element and keeps it in state together with it's
 
-  function close() {
+  function _close() {
     triggerRectRef.current = null;
@@ -1482,7 +1542,7 @@ setOpen(false);
       if (closeOnDisappear === "partial" && partial) {
-        close();
+        _close();
       }
 
       if (closeOnDisappear === "full" && full) {
-        close();
+        _close();
       }
@@ -1533,3 +1593,3 @@ }
     if (closeOnOutsideClick) {
-      close();
+      _close();
     }
@@ -1539,6 +1599,7 @@ }, [isOpen, setOpen]));
 
-  function open({
-    clientRect,
-    target
-  }) {
+  function open(_ref2) {
+    let {
+      clientRect,
+      target
+    } = _ref2;
     triggerRectRef.current = clientRect;
@@ -1556,3 +1617,3 @@
     isOpen,
-    close,
+    close: _close,
     open,
@@ -1620,11 +1681,11 @@ openFromContextMenuEvent: evt => {
       },
-      style: { ...(isSet(onStyle) ? EMPTY_STYLE : styles.layer),
+      style: _extends_1({}, isSet(onStyle) ? EMPTY_STYLE : styles.layer, {
         position: fixed ? "fixed" : "absolute",
         willChange: "top, bottom, left, right, width, height"
-      }
+      })
     },
-    arrowStyle: { ...(isSet(onStyle) ? EMPTY_STYLE : styles.arrow),
+    arrowStyle: _extends_1({}, isSet(onStyle) ? EMPTY_STYLE : styles.arrow, {
       position: "absolute",
       willChange: "top, bottom, left, right"
-    },
+    }),
     isOpen,
@@ -1634,3 +1695,3 @@ layerSide: styles.layerSide,
     close: () => {
-      close();
+      _close();
     }
@@ -1641,6 +1702,7 @@ }), containerElement || relativeParentElement);
 
-function useHover({
-  delayEnter = 0,
-  delayLeave = 0
-} = {}) {
+function useHover(_temp) {
+  let {
+    delayEnter = 0,
+    delayLeave = 0
+  } = _temp === void 0 ? {} : _temp;
   const [show, setShow] = React.useState(false);
@@ -1719,6 +1781,7 @@ const timeoutRef = React.useRef(null);
 
-function Transition({
-  isOpen: isOpenExternal,
-  children
-}) {
+function Transition(_ref) {
+  let {
+    isOpen: isOpenExternal,
+    children
+  } = _ref;
   const [state, setState] = React.useState({
@@ -1752,7 +1815,7 @@ isOpenInternal: isOpenExternal,
     if (!state.isOpenInternal) {
-      setState(s => ({ ...s,
+      setState(s => _extends_1({}, s, {
         isLeaving: false
       }));
     }
-  });
+  }, state.isLeaving);
 }
@@ -1759,0 +1822,0 @@

dist/Transition.d.ts

 import * as React from "react";
 declare type TransitionProps = {
     isOpen: boolean;
-    children: (isOpen: boolean, onTransitionEnd: any) => React.ReactElement;
+    children: (isOpen: boolean, onTransitionEnd: any, isLeaving: boolean) => React.ReactElement;
 };
 export default function Transition({ isOpen: isOpenExternal, children }: TransitionProps): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
 export {};

package.json

 {
   "name": "react-laag",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "",
@@ -35,2 +35,3 @@ "author": "Erik Verweij",
     "@babel/plugin-proposal-export-default-from": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.6.2",
     "@babel/preset-env": "^7.4.5",
@@ -37,0 +38,0 @@ "@babel/preset-react": "^7.0.0",

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

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

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

Improved metrics

Total package byte prevSize

387851

increased by2.56%

Lines of code

3405

increased by2.44%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

41

increased by2.5%

No dependency changes