visits-style 1.2.1 → 1.3.0

package/dist/visits-style.esm.js

@@ -1,8 +1,8 @@
-import React, { forwardRef, useLayoutEffect, useEffect, useRef, useMemo, useImperativeHandle, useState, useCallback, cloneElement, Children } from 'react';
+import React, { forwardRef, useLayoutEffect, useEffect, useRef, useMemo, useImperativeHandle, useState, cloneElement, Children, useCallback } from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import { getLuminance, transparentize, darken } from 'polished';
+import { useFloating, shift, flip, offset, autoUpdate } from '@floating-ui/react-dom';
 import { createPortal } from 'react-dom';
-import { createPopper } from '@popperjs/core';
 import { Transition, TransitionGroup } from 'react-transition-group';
 
 function _defineProperty(obj, key, value) {
@@ -1186,66 +1186,6 @@ React.forwardRef(function (_ref, ref) {
 });
 Portal.displayName = 'Portal';
 
-function usePopper(referenceElement, popperElement, options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  var instance = useRef(null);
-  var popperOptions = useMemo(function () {
-    return {
-      placement: options.placement || 'bottom',
-      strategy: options.strategy || 'absolute',
-      modifiers: [{
-        name: 'preventOverflow',
-        enabled: true
-      }, options.offset && {
-        name: 'offset',
-        options: {
-          offset: [options.offset.x, options.offset.y]
-        }
-      }].filter(Boolean)
-    };
-  }, [options.placement, options.strategy, options.offset]);
-  useIsomorphicLayoutEffect(function () {
-    if (instance.current) {
-      instance.current.setOptions(popperOptions);
-    }
-  }, [popperOptions]);
-  useIsomorphicLayoutEffect(function () {
-    return function () {
-      if (instance.current) {
-        instance.current.destroy();
-        instance.current = null;
-      }
-    };
-  }, []);
-  var open = useCallback(function () {
-    if (instance.current) {
-      instance.current.destroy();
-      instance.current = null;
-    }
-
-    if (referenceElement == null || popperElement == null) {
-      return;
-    }
-
-    var refEl = // @ts-ignore
-    'current' in referenceElement ? referenceElement.current : referenceElement; // @ts-ignore
-
-    var pEl = 'current' in popperElement ? popperElement.current : popperElement;
-    if (refEl === null || pEl === null) return;
-    instance.current = createPopper(refEl, pEl, popperOptions); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [popperOptions]);
-  var close = useCallback(function () {
-    if (instance.current) {
-      instance.current.destroy();
-      instance.current = null;
-    }
-  }, []);
-  return [open, close];
-}
-
 function wrapEvent(child, handlerName, ourHandler) {
   return function (event) {
     if (typeof child !== 'string' && child.props[handlerName]) {
@@ -1268,34 +1208,36 @@ function Tooltip(_ref) {
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
       _ref$offset = _ref.offset,
-      offset = _ref$offset === void 0 ? {
+      offset$1 = _ref$offset === void 0 ? {
     x: 0,
     y: 6
   } : _ref$offset;
-  var parent = useRef(null);
-  var tooltip = useRef(null);
+
+  var _useFloating = useFloating({
+    placement: position,
+    middleware: [shift(), flip(), offset({
+      mainAxis: offset$1.y,
+      crossAxis: offset$1.x
+    })],
+    whileElementsMounted: autoUpdate
+  }),
+      reference = _useFloating.reference,
+      floating = _useFloating.floating,
+      strategy = _useFloating.strategy,
+      x = _useFloating.x,
+      y = _useFloating.y;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
       setOpen = _useState2[1];
 
-  var _usePopper = usePopper(parent, tooltip, {
-    placement: position,
-    offset: offset
-  }),
-      _usePopper2 = _slicedToArray(_usePopper, 2),
-      openPopper = _usePopper2[0],
-      closePopper = _usePopper2[1];
-
   var handleOpen = function handleOpen() {
     setOpen(true);
-    requestAnimationFrame(openPopper);
   };
 
   var handleClose = function handleClose() {
     setOpen(false);
-    closePopper();
   };
 
   var child = typeof children === 'string' ?
@@ -1306,7 +1248,7 @@ function Tooltip(_ref) {
     React.createElement(React.Fragment, null,
     /*#__PURE__*/
     cloneElement(Children.only(child), {
-      ref: parent,
+      ref: reference,
       onMouseEnter: wrapEvent(child, 'onMouseEnter', handleOpen),
       onMouseLeave: wrapEvent(child, 'onMouseLeave', handleClose),
       onFocus: wrapEvent(child, 'onFocus', handleOpen),
@@ -1317,9 +1259,14 @@ function Tooltip(_ref) {
     /*#__PURE__*/
     React.createElement(TooltipWrapper, {
       className: className,
-      ref: tooltip,
+      ref: floating,
       role: "tooltip",
-      color: color
+      color: color,
+      style: {
+        position: strategy,
+        top: y || 0,
+        left: x || 0
+      }
     }, label)))
   );
 }
@@ -1472,48 +1419,48 @@ forwardRef(function (_ref, ref) {
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
       _ref$offset = _ref.offset,
-      offset = _ref$offset === void 0 ? {
+      offset$1 = _ref$offset === void 0 ? {
     x: 0,
     y: 6
   } : _ref$offset,
       rest = _objectWithoutProperties(_ref, _excluded$a);
 
-  var parent = useRef(null);
-  var popover = useRef(null);
-
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
       setOpen = _useState2[1];
 
-  var _usePopper = usePopper(parent, popover, {
+  var _useFloating = useFloating({
     placement: position,
-    offset: offset
+    middleware: [shift(), flip(), offset({
+      mainAxis: offset$1.y,
+      crossAxis: offset$1.x
+    })],
+    whileElementsMounted: autoUpdate
   }),
-      _usePopper2 = _slicedToArray(_usePopper, 2),
-      openPopper = _usePopper2[0],
-      closePopper = _usePopper2[1];
+      reference = _useFloating.reference,
+      floating = _useFloating.floating,
+      strategy = _useFloating.strategy,
+      x = _useFloating.x,
+      y = _useFloating.y;
 
   var handleFocus = function handleFocus(e) {
     stopPropagation(e);
     setOpen(true);
-    requestAnimationFrame(openPopper);
     if (onOpen) onOpen();
   };
 
   var handleBlur = function handleBlur(e) {
     stopPropagation(e);
-    closePopper();
     setOpen(false);
     if (onClose) onClose();
   };
 
   useEffect(function () {
     if (disabled && open) {
-      closePopper();
       setOpen(false);
     }
-  }, [disabled, open, closePopper]);
+  }, [disabled, open]);
   useImperativeHandle(ref, function () {
     return {
       open: handleFocus,
@@ -1525,7 +1472,7 @@ forwardRef(function (_ref, ref) {
     React.createElement(React.Fragment, null,
     /*#__PURE__*/
     cloneElement(Children.only(label), {
-      ref: parent,
+      ref: reference,
       tabIndex: 0,
       role: 'button',
       onClick: wrapEvent(label, 'onClick', handleFocus),
@@ -1537,9 +1484,14 @@ forwardRef(function (_ref, ref) {
     React.createElement(Tooltip$1, Object.assign({
       role: "tooltip",
       className: className,
-      ref: popover,
+      ref: floating,
       color: color,
-      onClick: stopPropagation
+      onClick: stopPropagation,
+      style: {
+        position: strategy,
+        top: y || 0,
+        left: x || 0
+      }
     }, rest), children),
     /*#__PURE__*/
     React.createElement(Shadow, {