visits-style 1.2.0 → 1.3.0

package/dist/components/Modal/index.d.ts

@@ -23,6 +23,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     timeout?: number;
     /** モーダル外に表示するElements */
     external?: React.ReactNode;
+    /** モーダルのtransition exitが完了した時に発火されるcallback */
+    onExited?: () => void;
 }
-export default function Modal({ show, children, timeout, color, closeModal, external, className, closeOnOverlay, closeOnEsc, ...rest }: Props): JSX.Element;
+export default function Modal({ show, children, timeout, color, closeModal, external, className, closeOnOverlay, closeOnEsc, onExited, ...rest }: Props): JSX.Element;
 export {};

package/dist/components/Popover/index.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react';
-import { Placement } from '@popperjs/core';
+import { Placement } from '@floating-ui/core';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     /** ボタンの内容 */
     label: React.ReactElement;

package/dist/components/Tooltip/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Placement } from '@popperjs/core';
+import { Placement } from '@floating-ui/core';
 import { ColorType } from '../../types';
 interface TooltipProps {
     /** 吹き出しとして表示したい内容 */

package/dist/visits-style.cjs.development.js

@@ -9,8 +9,8 @@ var React__default = _interopDefault(React);
 var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
 var polished = require('polished');
-var reactDom = require('react-dom');
-var core = require('@popperjs/core');
+var reactDom = require('@floating-ui/react-dom');
+var reactDom$1 = require('react-dom');
 var reactTransitionGroup = require('react-transition-group');
 
 function _defineProperty(obj, key, value) {
@@ -1190,70 +1190,10 @@ React__default.forwardRef(function (_ref, ref) {
   }, [container, disabled]);
   return mountNode ?
   /*#__PURE__*/
-  reactDom.createPortal(children, mountNode) : mountNode;
+  reactDom$1.createPortal(children, mountNode) : mountNode;
 });
 Portal.displayName = 'Portal';
 
-function usePopper(referenceElement, popperElement, options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  var instance = React.useRef(null);
-  var popperOptions = React.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 = React.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 = core.createPopper(refEl, pEl, popperOptions); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [popperOptions]);
-  var close = React.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]) {
@@ -1280,30 +1220,32 @@ function Tooltip(_ref) {
     x: 0,
     y: 6
   } : _ref$offset;
-  var parent = React.useRef(null);
-  var tooltip = React.useRef(null);
+
+  var _useFloating = reactDom.useFloating({
+    placement: position,
+    middleware: [reactDom.shift(), reactDom.flip(), reactDom.offset({
+      mainAxis: offset.y,
+      crossAxis: offset.x
+    })],
+    whileElementsMounted: reactDom.autoUpdate
+  }),
+      reference = _useFloating.reference,
+      floating = _useFloating.floating,
+      strategy = _useFloating.strategy,
+      x = _useFloating.x,
+      y = _useFloating.y;
 
   var _useState = React.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' ?
@@ -1314,7 +1256,7 @@ function Tooltip(_ref) {
     React__default.createElement(React__default.Fragment, null,
     /*#__PURE__*/
     React.cloneElement(React.Children.only(child), {
-      ref: parent,
+      ref: reference,
       onMouseEnter: wrapEvent(child, 'onMouseEnter', handleOpen),
       onMouseLeave: wrapEvent(child, 'onMouseLeave', handleClose),
       onFocus: wrapEvent(child, 'onFocus', handleOpen),
@@ -1325,9 +1267,14 @@ function Tooltip(_ref) {
     /*#__PURE__*/
     React__default.createElement(TooltipWrapper, {
       className: className,
-      ref: tooltip,
+      ref: floating,
       role: "tooltip",
-      color: color
+      color: color,
+      style: {
+        position: strategy,
+        top: y || 0,
+        left: x || 0
+      }
     }, label)))
   );
 }
@@ -1486,42 +1433,42 @@ React.forwardRef(function (_ref, ref) {
   } : _ref$offset,
       rest = _objectWithoutProperties(_ref, _excluded$a);
 
-  var parent = React.useRef(null);
-  var popover = React.useRef(null);
-
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
       setOpen = _useState2[1];
 
-  var _usePopper = usePopper(parent, popover, {
+  var _useFloating = reactDom.useFloating({
     placement: position,
-    offset: offset
+    middleware: [reactDom.shift(), reactDom.flip(), reactDom.offset({
+      mainAxis: offset.y,
+      crossAxis: offset.x
+    })],
+    whileElementsMounted: reactDom.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();
   };
 
   React.useEffect(function () {
     if (disabled && open) {
-      closePopper();
       setOpen(false);
     }
-  }, [disabled, open, closePopper]);
+  }, [disabled, open]);
   React.useImperativeHandle(ref, function () {
     return {
       open: handleFocus,
@@ -1533,7 +1480,7 @@ React.forwardRef(function (_ref, ref) {
     React__default.createElement(React__default.Fragment, null,
     /*#__PURE__*/
     React.cloneElement(React.Children.only(label), {
-      ref: parent,
+      ref: reference,
       tabIndex: 0,
       role: 'button',
       onClick: wrapEvent(label, 'onClick', handleFocus),
@@ -1545,9 +1492,14 @@ React.forwardRef(function (_ref, ref) {
     React__default.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__default.createElement(Shadow, {
@@ -1588,7 +1540,7 @@ function useScrollFix(show) {
   }, [show]);
 }
 
-var _excluded$b = ["show", "children", "timeout", "color", "closeModal", "external", "className", "closeOnOverlay", "closeOnEsc"];
+var _excluded$b = ["show", "children", "timeout", "color", "closeModal", "external", "className", "closeOnOverlay", "closeOnEsc", "onExited"];
 
 var _templateObject$i, _templateObject2$a, _templateObject3$5;
 
@@ -1621,6 +1573,7 @@ function Modal(_ref2) {
       external = _ref2.external,
       className = _ref2.className,
       closeOnOverlay = _ref2.closeOnOverlay,
+      onExited = _ref2.onExited,
       rest = _objectWithoutProperties(_ref2, _excluded$b);
 
   useScrollFix(show);
@@ -1631,6 +1584,7 @@ function Modal(_ref2) {
     React__default.createElement(reactTransitionGroup.Transition, {
       "in": show,
       timeout: timeout,
+      onExited: onExited,
       unmountOnExit: true,
       mountOnEnter: true
     }, function (state) {