@nivo/chord - npm Package Compare versions

Comparing version 0.56.2 to 0.57.0

dist/nivo-chord.cjs.js

@@ -13,2 +13,3 @@ 'use strict';
 var PropTypes = _interopDefault(require('prop-types'));
+var tooltip = require('@nivo/tooltip');
 var d3Shape = require('d3-shape');
@@ -21,3 +22,3 @@ var d3Chord = require('d3-chord');
   var arc = _ref.arc;
-  return React__default.createElement(core.BasicTooltip, {
+  return React__default.createElement(tooltip.BasicTooltip, {
     id: arc.label,
@@ -37,5 +38,5 @@ value: arc.formattedValue,
   var theme = core.useTheme();
-  return React__default.createElement(core.TableTooltip, {
+  return React__default.createElement(tooltip.TableTooltip, {
     theme: theme,
-    rows: [[React__default.createElement(core.Chip, {
+    rows: [[React__default.createElement(tooltip.Chip, {
       key: "chip",
@@ -45,3 +46,3 @@ color: ribbon.source.color
       key: "id"
-    }, ribbon.source.label), ribbon.source.formattedValue], [React__default.createElement(core.Chip, {
+    }, ribbon.source.label), ribbon.source.formattedValue], [React__default.createElement(tooltip.Chip, {
       key: "chip",
@@ -386,6 +387,2 @@ color: ribbon.target.color
 function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _slicedToArray$1(arr, i) { return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1(); }
-function _nonIterableRest$1() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-function _iterableToArrayLimit$1(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-function _arrayWithHoles$1(arr) { if (Array.isArray(arr)) return arr; }
 var ChordRibbon = React.memo(function (_ref) {
@@ -409,7 +406,6 @@ var ribbon = _ref.ribbon,
       onClick = _ref.onClick,
-      tooltip = _ref.tooltip;
-  var _useTooltip = core.useTooltip(),
-      _useTooltip2 = _slicedToArray$1(_useTooltip, 2),
-      showTooltip = _useTooltip2[0],
-      hideTooltip = _useTooltip2[1];
+      tooltip$1 = _ref.tooltip;
+  var _useTooltip = tooltip.useTooltip(),
+      showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
+      hideTooltip = _useTooltip.hideTooltip;
   var handleMouseEnter = React.useMemo(function () {
@@ -419,3 +415,3 @@ if (!isInteractive) return undefined;
       setCurrent(ribbon);
-      showTooltip(React__default.createElement(tooltip, {
+      showTooltipFromEvent(React__default.createElement(tooltip$1, {
         ribbon: ribbon
@@ -425,7 +421,7 @@ }), event);
     };
-  }, [isInteractive, ribbon, onMouseEnter]);
+  }, [isInteractive, showTooltipFromEvent, tooltip$1, ribbon, onMouseEnter]);
   var handleMouseMove = React.useMemo(function () {
     if (!isInteractive) return undefined;
     return function (event) {
-      showTooltip(React__default.createElement(tooltip, {
+      showTooltipFromEvent(React__default.createElement(tooltip$1, {
         ribbon: ribbon
@@ -435,3 +431,3 @@ }), event);
     };
-  }, [isInteractive, ribbon, onMouseMove]);
+  }, [isInteractive, showTooltipFromEvent, tooltip$1, ribbon, onMouseMove]);
   var handleMouseLeave = React.useMemo(function () {
@@ -444,3 +440,3 @@ if (!isInteractive) return undefined;
     };
-  }, [isInteractive, ribbon, onMouseLeave]);
+  }, [isInteractive, hideTooltip, ribbon, onMouseLeave]);
   var handleClick = React.useMemo(function () {
@@ -565,6 +561,6 @@ if (!isInteractive || !onClick) return undefined;
       onClick = _ref4.onClick,
-      tooltip = _ref4.tooltip,
-      animate = _ref4.animate,
-      motionDamping = _ref4.motionDamping,
-      motionStiffness = _ref4.motionStiffness;
+      tooltip = _ref4.tooltip;
+  var _useMotionConfig = core.useMotionConfig(),
+      animate = _useMotionConfig.animate,
+      _springConfig = _useMotionConfig.springConfig;
   if (animate !== true) {
@@ -595,7 +591,5 @@ return React__default.createElement("g", null, ribbons.map(function (ribbon) {
   }
-  var springConfig = {
-    damping: motionDamping,
-    stiffness: motionStiffness,
+  var springConfig = _objectSpread$3({}, _springConfig, {
     precision: 0.001
-  };
+  });
   return React__default.createElement(reactMotion.TransitionMotion, {
@@ -644,3 +638,3 @@ willEnter: ribbonWillEnter,
 ChordRibbons.displayName = 'ChordRibbons';
-ChordRibbons.propTypes = _objectSpread$3({
+ChordRibbons.propTypes = {
   ribbons: PropTypes.array.isRequired,
@@ -659,8 +653,4 @@ ribbonGenerator: PropTypes.func.isRequired,
   onClick: PropTypes.func
-}, core.motionPropTypes);
+};
 
-function _slicedToArray$2(arr, i) { return _arrayWithHoles$2(arr) || _iterableToArrayLimit$2(arr, i) || _nonIterableRest$2(); }
-function _nonIterableRest$2() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-function _iterableToArrayLimit$2(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-function _arrayWithHoles$2(arr) { if (Array.isArray(arr)) return arr; }
 var ChordArc = React.memo(function (_ref) {
@@ -680,7 +670,6 @@ var arc = _ref.arc,
       onClick = _ref.onClick,
-      tooltip = _ref.tooltip;
-  var _useTooltip = core.useTooltip(),
-      _useTooltip2 = _slicedToArray$2(_useTooltip, 2),
-      showTooltip = _useTooltip2[0],
-      hideTooltip = _useTooltip2[1];
+      tooltip$1 = _ref.tooltip;
+  var _useTooltip = tooltip.useTooltip(),
+      showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
+      hideTooltip = _useTooltip.hideTooltip;
   var handleMouseEnter = React.useMemo(function () {
@@ -690,3 +679,3 @@ if (!isInteractive) return undefined;
       setCurrent(arc);
-      showTooltip(React__default.createElement(tooltip, {
+      showTooltipFromEvent(React__default.createElement(tooltip$1, {
         arc: arc
@@ -696,7 +685,7 @@ }), event);
     };
-  }, [isInteractive, arc, onMouseEnter]);
+  }, [isInteractive, showTooltipFromEvent, tooltip$1, arc, onMouseEnter]);
   var handleMouseMove = React.useMemo(function () {
     if (!isInteractive) return undefined;
     return function (event) {
-      showTooltip(React__default.createElement(tooltip, {
+      showTooltipFromEvent(React__default.createElement(tooltip$1, {
         arc: arc
@@ -706,3 +695,3 @@ }), event);
     };
-  }, [isInteractive, arc, onMouseMove]);
+  }, [isInteractive, showTooltipFromEvent, tooltip$1, arc, onMouseMove]);
   var handleMouseLeave = React.useMemo(function () {
@@ -715,3 +704,3 @@ if (!isInteractive) return undefined;
     };
-  }, [isInteractive, arc, onMouseLeave]);
+  }, [isInteractive, hideTooltip, arc, onMouseLeave]);
   var handleClick = React.useMemo(function () {
@@ -771,6 +760,6 @@ if (!isInteractive || !onClick) return undefined;
       onClick = _ref.onClick,
-      tooltip = _ref.tooltip,
-      animate = _ref.animate,
-      motionDamping = _ref.motionDamping,
-      motionStiffness = _ref.motionStiffness;
+      tooltip = _ref.tooltip;
+  var _useMotionConfig = core.useMotionConfig(),
+      animate = _useMotionConfig.animate,
+      _springConfig = _useMotionConfig.springConfig;
   if (animate !== true) {
@@ -799,7 +788,5 @@ return arcs.map(function (arc) {
   }
-  var springConfig = {
-    damping: motionDamping,
-    stiffness: motionStiffness,
+  var springConfig = _objectSpread$4({}, _springConfig, {
     precision: 0.001
-  };
+  });
   return React__default.createElement(reactMotion.TransitionMotion, {
@@ -846,3 +833,3 @@ styles: arcs.map(function (arc) {
 ChordArcs.displayName = 'ChordArcs';
-ChordArcs.propTypes = _objectSpread$4({
+ChordArcs.propTypes = {
   arcs: PropTypes.array.isRequired,
@@ -860,3 +847,3 @@ arcGenerator: PropTypes.func.isRequired,
   tooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired
-}, core.motionPropTypes);
+};
 
@@ -869,9 +856,9 @@ function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$5(target, key, source[key]); }); } return target; }
       rotation = _ref.rotation,
-      getColor = _ref.getColor,
-      animate = _ref.animate,
-      motionDamping = _ref.motionDamping,
-      motionStiffness = _ref.motionStiffness;
+      getColor = _ref.getColor;
   var theme = core.useTheme();
+  var _useMotionConfig = core.useMotionConfig(),
+      animate = _useMotionConfig.animate,
+      springConfig = _useMotionConfig.springConfig;
   if (animate !== true) {
-    return React__default.createElement("g", null, arcs.map(function (arc) {
+    return React__default.createElement(React__default.Fragment, null, arcs.map(function (arc) {
       var color = getColor(arc, theme);
@@ -888,10 +875,6 @@ var angle = core.midAngle(arc);
         textAnchor: textProps.align,
-        alignmentBaseline: textProps.baseline
+        dominantBaseline: textProps.baseline
       }, arc.label);
     }));
   }
-  var springConfig = {
-    damping: motionDamping,
-    stiffness: motionStiffness
-  };
   return React__default.createElement(reactMotion.TransitionMotion, {
@@ -909,3 +892,3 @@ styles: arcs.map(function (arc) {
   }, function (interpolatedStyles) {
-    return React__default.createElement("g", null, interpolatedStyles.map(function (_ref2) {
+    return React__default.createElement(React__default.Fragment, null, interpolatedStyles.map(function (_ref2) {
       var key = _ref2.key,
@@ -924,3 +907,3 @@ style = _ref2.style,
         textAnchor: textProps.align,
-        alignmentBaseline: textProps.baseline
+        dominantBaseline: textProps.baseline
       }, arc.label);
@@ -930,3 +913,3 @@ }));
 };
-ChordLabels.propTypes = _objectSpread$5({
+ChordLabels.propTypes = {
   arcs: PropTypes.array.isRequired,
@@ -936,3 +919,3 @@ radius: PropTypes.number.isRequired,
   getColor: PropTypes.func.isRequired
-}, core.motionPropTypes);
+};
 
@@ -979,6 +962,3 @@ 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); }
       onRibbonClick = _ref.onRibbonClick,
-      legends$1 = _ref.legends,
-      animate = _ref.animate,
-      motionDamping = _ref.motionDamping,
-      motionStiffness = _ref.motionStiffness;
+      legends$1 = _ref.legends;
   var _useDimensions = core.useDimensions(width, height, partialMargin),
@@ -1059,6 +1039,3 @@ margin = _useDimensions.margin,
       onClick: onRibbonClick,
-      tooltip: ribbonTooltip,
-      animate: animate,
-      motionDamping: motionDamping,
-      motionStiffness: motionStiffness
+      tooltip: ribbonTooltip
     })),
@@ -1080,6 +1057,3 @@ arcs: React__default.createElement("g", {
       onClick: onArcClick,
-      tooltip: arcTooltip,
-      animate: animate,
-      motionDamping: motionDamping,
-      motionStiffness: motionStiffness
+      tooltip: arcTooltip
     })),
@@ -1108,6 +1082,3 @@ labels: null,
       rotation: labelRotation,
-      getColor: getLabelTextColor,
-      animate: animate,
-      motionDamping: motionDamping,
-      motionStiffness: motionStiffness
+      getColor: getLabelTextColor
     }));
@@ -1138,6 +1109,6 @@ }
 function _defineProperty$6(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _slicedToArray$3(arr, i) { return _arrayWithHoles$3(arr) || _iterableToArrayLimit$3(arr, i) || _nonIterableRest$3(); }
-function _nonIterableRest$3() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-function _iterableToArrayLimit$3(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-function _arrayWithHoles$3(arr) { if (Array.isArray(arr)) return arr; }
+function _slicedToArray$1(arr, i) { return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1(); }
+function _nonIterableRest$1() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+function _iterableToArrayLimit$1(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayWithHoles$1(arr) { if (Array.isArray(arr)) return arr; }
 var getArcFromMouseEvent = function getArcFromMouseEvent(_ref) {
@@ -1152,3 +1123,3 @@ var event = _ref.event,
   var _getRelativeCursor = core.getRelativeCursor(canvasEl, event),
-      _getRelativeCursor2 = _slicedToArray$3(_getRelativeCursor, 2),
+      _getRelativeCursor2 = _slicedToArray$1(_getRelativeCursor, 2),
       x = _getRelativeCursor2[0],
@@ -1341,6 +1312,5 @@ y = _getRelativeCursor2[1];
   }, [canvasEl, innerWidth, innerHeight, outerWidth, outerHeight, margin, pixelRatio, theme, layers, arcs, arcGenerator, getArcOpacity, arcBorderWidth, getArcBorderColor, ribbons, ribbonGenerator, getRibbonOpacity, ribbonBorderWidth, getRibbonBorderColor, enableLabel, labelOffset, labelRotation, getLabelTextColor, legends$1, layerContext]);
-  var _useTooltip = core.useTooltip(),
-      _useTooltip2 = _slicedToArray$3(_useTooltip, 2),
-      showTooltip = _useTooltip2[0],
-      hideTooltip = _useTooltip2[1];
+  var _useTooltip = tooltip.useTooltip(),
+      showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
+      hideTooltip = _useTooltip.hideTooltip;
   var handleMouseHover = React.useCallback(function (event) {
@@ -1358,3 +1328,3 @@ var arc = getArcFromMouseEvent({
       setCurrentArc(arc);
-      showTooltip(React__default.createElement(arcTooltip, {
+      showTooltipFromEvent(React__default.createElement(arcTooltip, {
         arc: arc
@@ -1370,3 +1340,3 @@ }), event);
     }
-  }, [canvasEl, center, margin, radius, innerRadius, arcs, setCurrentArc, showTooltip, hideTooltip, onArcMouseEnter, onArcMouseMove, onArcMouseLeave]);
+  }, [canvasEl, center, margin, radius, innerRadius, arcs, setCurrentArc, showTooltipFromEvent, hideTooltip, onArcMouseEnter, onArcMouseMove, onArcMouseLeave]);
   var handleMouseLeave = React.useCallback(function () {
@@ -1373,0 +1343,0 @@ setCurrentArc(null);

dist/nivo-chord.esm.js

 import React, { memo, useMemo, useState, Fragment, useRef, useEffect, useCallback } from 'react';
-import { BasicTooltip, useTheme, TableTooltip, Chip, blendModePropType, motionPropTypes, getLabelGenerator, useValueFormatter, useTooltip, midAngle, getPolarLabelProps, withContainer, useDimensions, SvgWrapper, degreesToRadians, getHoveredArc, getRelativeCursor, ResponsiveWrapper } from '@nivo/core';
+import { useTheme, blendModePropType, motionPropTypes, getLabelGenerator, useValueFormatter, useMotionConfig, midAngle, getPolarLabelProps, withContainer, useDimensions, SvgWrapper, degreesToRadians, getHoveredArc, getRelativeCursor, ResponsiveWrapper } from '@nivo/core';
 import { inheritedColorPropType, ordinalColorsPropType, useOrdinalColorScale, interpolateColor, getInterpolatedColor, useInheritedColor } from '@nivo/colors';
 import { LegendPropShape, BoxLegendSvg, renderLegendToCanvas } from '@nivo/legends';
 import PropTypes from 'prop-types';
+import { BasicTooltip, TableTooltip, Chip, useTooltip } from '@nivo/tooltip';
 import { arc } from 'd3-shape';
@@ -375,6 +376,2 @@ import { chord, ribbon } from 'd3-chord';
 function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _slicedToArray$1(arr, i) { return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1(); }
-function _nonIterableRest$1() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-function _iterableToArrayLimit$1(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-function _arrayWithHoles$1(arr) { if (Array.isArray(arr)) return arr; }
 var ChordRibbon = memo(function (_ref) {
@@ -400,5 +397,4 @@ var ribbon = _ref.ribbon,
   var _useTooltip = useTooltip(),
-      _useTooltip2 = _slicedToArray$1(_useTooltip, 2),
-      showTooltip = _useTooltip2[0],
-      hideTooltip = _useTooltip2[1];
+      showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
+      hideTooltip = _useTooltip.hideTooltip;
   var handleMouseEnter = useMemo(function () {
@@ -408,3 +404,3 @@ if (!isInteractive) return undefined;
       setCurrent(ribbon);
-      showTooltip(React.createElement(tooltip, {
+      showTooltipFromEvent(React.createElement(tooltip, {
         ribbon: ribbon
@@ -414,7 +410,7 @@ }), event);
     };
-  }, [isInteractive, ribbon, onMouseEnter]);
+  }, [isInteractive, showTooltipFromEvent, tooltip, ribbon, onMouseEnter]);
   var handleMouseMove = useMemo(function () {
     if (!isInteractive) return undefined;
     return function (event) {
-      showTooltip(React.createElement(tooltip, {
+      showTooltipFromEvent(React.createElement(tooltip, {
         ribbon: ribbon
@@ -424,3 +420,3 @@ }), event);
     };
-  }, [isInteractive, ribbon, onMouseMove]);
+  }, [isInteractive, showTooltipFromEvent, tooltip, ribbon, onMouseMove]);
   var handleMouseLeave = useMemo(function () {
@@ -433,3 +429,3 @@ if (!isInteractive) return undefined;
     };
-  }, [isInteractive, ribbon, onMouseLeave]);
+  }, [isInteractive, hideTooltip, ribbon, onMouseLeave]);
   var handleClick = useMemo(function () {
@@ -554,6 +550,6 @@ if (!isInteractive || !onClick) return undefined;
       onClick = _ref4.onClick,
-      tooltip = _ref4.tooltip,
-      animate = _ref4.animate,
-      motionDamping = _ref4.motionDamping,
-      motionStiffness = _ref4.motionStiffness;
+      tooltip = _ref4.tooltip;
+  var _useMotionConfig = useMotionConfig(),
+      animate = _useMotionConfig.animate,
+      _springConfig = _useMotionConfig.springConfig;
   if (animate !== true) {
@@ -584,7 +580,5 @@ return React.createElement("g", null, ribbons.map(function (ribbon) {
   }
-  var springConfig = {
-    damping: motionDamping,
-    stiffness: motionStiffness,
+  var springConfig = _objectSpread$3({}, _springConfig, {
     precision: 0.001
-  };
+  });
   return React.createElement(TransitionMotion, {
@@ -633,3 +627,3 @@ willEnter: ribbonWillEnter,
 ChordRibbons.displayName = 'ChordRibbons';
-ChordRibbons.propTypes = _objectSpread$3({
+ChordRibbons.propTypes = {
   ribbons: PropTypes.array.isRequired,
@@ -648,8 +642,4 @@ ribbonGenerator: PropTypes.func.isRequired,
   onClick: PropTypes.func
-}, motionPropTypes);
+};
 
-function _slicedToArray$2(arr, i) { return _arrayWithHoles$2(arr) || _iterableToArrayLimit$2(arr, i) || _nonIterableRest$2(); }
-function _nonIterableRest$2() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-function _iterableToArrayLimit$2(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-function _arrayWithHoles$2(arr) { if (Array.isArray(arr)) return arr; }
 var ChordArc = memo(function (_ref) {
@@ -671,5 +661,4 @@ var arc = _ref.arc,
   var _useTooltip = useTooltip(),
-      _useTooltip2 = _slicedToArray$2(_useTooltip, 2),
-      showTooltip = _useTooltip2[0],
-      hideTooltip = _useTooltip2[1];
+      showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
+      hideTooltip = _useTooltip.hideTooltip;
   var handleMouseEnter = useMemo(function () {
@@ -679,3 +668,3 @@ if (!isInteractive) return undefined;
       setCurrent(arc);
-      showTooltip(React.createElement(tooltip, {
+      showTooltipFromEvent(React.createElement(tooltip, {
         arc: arc
@@ -685,7 +674,7 @@ }), event);
     };
-  }, [isInteractive, arc, onMouseEnter]);
+  }, [isInteractive, showTooltipFromEvent, tooltip, arc, onMouseEnter]);
   var handleMouseMove = useMemo(function () {
     if (!isInteractive) return undefined;
     return function (event) {
-      showTooltip(React.createElement(tooltip, {
+      showTooltipFromEvent(React.createElement(tooltip, {
         arc: arc
@@ -695,3 +684,3 @@ }), event);
     };
-  }, [isInteractive, arc, onMouseMove]);
+  }, [isInteractive, showTooltipFromEvent, tooltip, arc, onMouseMove]);
   var handleMouseLeave = useMemo(function () {
@@ -704,3 +693,3 @@ if (!isInteractive) return undefined;
     };
-  }, [isInteractive, arc, onMouseLeave]);
+  }, [isInteractive, hideTooltip, arc, onMouseLeave]);
   var handleClick = useMemo(function () {
@@ -760,6 +749,6 @@ if (!isInteractive || !onClick) return undefined;
       onClick = _ref.onClick,
-      tooltip = _ref.tooltip,
-      animate = _ref.animate,
-      motionDamping = _ref.motionDamping,
-      motionStiffness = _ref.motionStiffness;
+      tooltip = _ref.tooltip;
+  var _useMotionConfig = useMotionConfig(),
+      animate = _useMotionConfig.animate,
+      _springConfig = _useMotionConfig.springConfig;
   if (animate !== true) {
@@ -788,7 +777,5 @@ return arcs.map(function (arc) {
   }
-  var springConfig = {
-    damping: motionDamping,
-    stiffness: motionStiffness,
+  var springConfig = _objectSpread$4({}, _springConfig, {
     precision: 0.001
-  };
+  });
   return React.createElement(TransitionMotion, {
@@ -835,3 +822,3 @@ styles: arcs.map(function (arc) {
 ChordArcs.displayName = 'ChordArcs';
-ChordArcs.propTypes = _objectSpread$4({
+ChordArcs.propTypes = {
   arcs: PropTypes.array.isRequired,
@@ -849,3 +836,3 @@ arcGenerator: PropTypes.func.isRequired,
   tooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired
-}, motionPropTypes);
+};
 
@@ -858,9 +845,9 @@ function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$5(target, key, source[key]); }); } return target; }
       rotation = _ref.rotation,
-      getColor = _ref.getColor,
-      animate = _ref.animate,
-      motionDamping = _ref.motionDamping,
-      motionStiffness = _ref.motionStiffness;
+      getColor = _ref.getColor;
   var theme = useTheme();
+  var _useMotionConfig = useMotionConfig(),
+      animate = _useMotionConfig.animate,
+      springConfig = _useMotionConfig.springConfig;
   if (animate !== true) {
-    return React.createElement("g", null, arcs.map(function (arc) {
+    return React.createElement(React.Fragment, null, arcs.map(function (arc) {
       var color = getColor(arc, theme);
@@ -877,10 +864,6 @@ var angle = midAngle(arc);
         textAnchor: textProps.align,
-        alignmentBaseline: textProps.baseline
+        dominantBaseline: textProps.baseline
       }, arc.label);
     }));
   }
-  var springConfig = {
-    damping: motionDamping,
-    stiffness: motionStiffness
-  };
   return React.createElement(TransitionMotion, {
@@ -898,3 +881,3 @@ styles: arcs.map(function (arc) {
   }, function (interpolatedStyles) {
-    return React.createElement("g", null, interpolatedStyles.map(function (_ref2) {
+    return React.createElement(React.Fragment, null, interpolatedStyles.map(function (_ref2) {
       var key = _ref2.key,
@@ -913,3 +896,3 @@ style = _ref2.style,
         textAnchor: textProps.align,
-        alignmentBaseline: textProps.baseline
+        dominantBaseline: textProps.baseline
       }, arc.label);
@@ -919,3 +902,3 @@ }));
 };
-ChordLabels.propTypes = _objectSpread$5({
+ChordLabels.propTypes = {
   arcs: PropTypes.array.isRequired,
@@ -925,3 +908,3 @@ radius: PropTypes.number.isRequired,
   getColor: PropTypes.func.isRequired
-}, motionPropTypes);
+};
 
@@ -968,6 +951,3 @@ 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); }
       onRibbonClick = _ref.onRibbonClick,
-      legends = _ref.legends,
-      animate = _ref.animate,
-      motionDamping = _ref.motionDamping,
-      motionStiffness = _ref.motionStiffness;
+      legends = _ref.legends;
   var _useDimensions = useDimensions(width, height, partialMargin),
@@ -1048,6 +1028,3 @@ margin = _useDimensions.margin,
       onClick: onRibbonClick,
-      tooltip: ribbonTooltip,
-      animate: animate,
-      motionDamping: motionDamping,
-      motionStiffness: motionStiffness
+      tooltip: ribbonTooltip
     })),
@@ -1069,6 +1046,3 @@ arcs: React.createElement("g", {
       onClick: onArcClick,
-      tooltip: arcTooltip,
-      animate: animate,
-      motionDamping: motionDamping,
-      motionStiffness: motionStiffness
+      tooltip: arcTooltip
     })),
@@ -1097,6 +1071,3 @@ labels: null,
       rotation: labelRotation,
-      getColor: getLabelTextColor,
-      animate: animate,
-      motionDamping: motionDamping,
-      motionStiffness: motionStiffness
+      getColor: getLabelTextColor
     }));
@@ -1127,6 +1098,6 @@ }
 function _defineProperty$6(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _slicedToArray$3(arr, i) { return _arrayWithHoles$3(arr) || _iterableToArrayLimit$3(arr, i) || _nonIterableRest$3(); }
-function _nonIterableRest$3() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-function _iterableToArrayLimit$3(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-function _arrayWithHoles$3(arr) { if (Array.isArray(arr)) return arr; }
+function _slicedToArray$1(arr, i) { return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1(); }
+function _nonIterableRest$1() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+function _iterableToArrayLimit$1(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayWithHoles$1(arr) { if (Array.isArray(arr)) return arr; }
 var getArcFromMouseEvent = function getArcFromMouseEvent(_ref) {
@@ -1141,3 +1112,3 @@ var event = _ref.event,
   var _getRelativeCursor = getRelativeCursor(canvasEl, event),
-      _getRelativeCursor2 = _slicedToArray$3(_getRelativeCursor, 2),
+      _getRelativeCursor2 = _slicedToArray$1(_getRelativeCursor, 2),
       x = _getRelativeCursor2[0],
@@ -1331,5 +1302,4 @@ y = _getRelativeCursor2[1];
   var _useTooltip = useTooltip(),
-      _useTooltip2 = _slicedToArray$3(_useTooltip, 2),
-      showTooltip = _useTooltip2[0],
-      hideTooltip = _useTooltip2[1];
+      showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
+      hideTooltip = _useTooltip.hideTooltip;
   var handleMouseHover = useCallback(function (event) {
@@ -1347,3 +1317,3 @@ var arc = getArcFromMouseEvent({
       setCurrentArc(arc);
-      showTooltip(React.createElement(arcTooltip, {
+      showTooltipFromEvent(React.createElement(arcTooltip, {
         arc: arc
@@ -1359,3 +1329,3 @@ }), event);
     }
-  }, [canvasEl, center, margin, radius, innerRadius, arcs, setCurrentArc, showTooltip, hideTooltip, onArcMouseEnter, onArcMouseMove, onArcMouseLeave]);
+  }, [canvasEl, center, margin, radius, innerRadius, arcs, setCurrentArc, showTooltipFromEvent, hideTooltip, onArcMouseEnter, onArcMouseMove, onArcMouseLeave]);
   var handleMouseLeave = useCallback(function () {
@@ -1362,0 +1332,0 @@ setCurrentArc(null);

dist/nivo-chord.umd.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@nivo/core'), require('@nivo/colors'), require('@nivo/legends'), require('prop-types'), require('d3-shape'), require('d3-chord'), require('lodash/mapValues'), require('react-motion')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@nivo/core', '@nivo/colors', '@nivo/legends', 'prop-types', 'd3-shape', 'd3-chord', 'lodash/mapValues', 'react-motion'], factory) :
-    (global = global || self, factory(global.nivo = global.nivo || {}, global.React, global.nivo, global.nivo, global.nivo, global.PropTypes, global.d3, global.d3, global['lodash/mapValues'], global.ReactMotion));
-}(this, function (exports, React, core, colors, legends, PropTypes, d3Shape, d3Chord, mapValues, reactMotion) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@nivo/core'), require('@nivo/colors'), require('@nivo/legends'), require('prop-types'), require('@nivo/tooltip'), require('d3-shape'), require('d3-chord'), require('lodash/mapValues'), require('react-motion')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@nivo/core', '@nivo/colors', '@nivo/legends', 'prop-types', '@nivo/tooltip', 'd3-shape', 'd3-chord', 'lodash/mapValues', 'react-motion'], factory) :
+    (global = global || self, factory(global.nivo = global.nivo || {}, global.React, global.nivo, global.nivo, global.nivo, global.PropTypes, global.nivo, global.d3, global.d3, global['lodash/mapValues'], global.ReactMotion));
+}(this, function (exports, React, core, colors, legends, PropTypes, tooltip, d3Shape, d3Chord, mapValues, reactMotion) { 'use strict';
 
@@ -13,3 +13,3 @@ var React__default = 'default' in React ? React['default'] : React;
       var arc = _ref.arc;
-      return React__default.createElement(core.BasicTooltip, {
+      return React__default.createElement(tooltip.BasicTooltip, {
         id: arc.label,
@@ -29,5 +29,5 @@ value: arc.formattedValue,
       var theme = core.useTheme();
-      return React__default.createElement(core.TableTooltip, {
+      return React__default.createElement(tooltip.TableTooltip, {
         theme: theme,
-        rows: [[React__default.createElement(core.Chip, {
+        rows: [[React__default.createElement(tooltip.Chip, {
           key: "chip",
@@ -37,3 +37,3 @@ color: ribbon.source.color
           key: "id"
-        }, ribbon.source.label), ribbon.source.formattedValue], [React__default.createElement(core.Chip, {
+        }, ribbon.source.label), ribbon.source.formattedValue], [React__default.createElement(tooltip.Chip, {
           key: "chip",
@@ -378,6 +378,2 @@ color: ribbon.target.color
     function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-    function _slicedToArray$1(arr, i) { return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1(); }
-    function _nonIterableRest$1() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-    function _iterableToArrayLimit$1(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-    function _arrayWithHoles$1(arr) { if (Array.isArray(arr)) return arr; }
     var ChordRibbon = React.memo(function (_ref) {
@@ -401,7 +397,6 @@ var ribbon = _ref.ribbon,
           onClick = _ref.onClick,
-          tooltip = _ref.tooltip;
-      var _useTooltip = core.useTooltip(),
-          _useTooltip2 = _slicedToArray$1(_useTooltip, 2),
-          showTooltip = _useTooltip2[0],
-          hideTooltip = _useTooltip2[1];
+          tooltip$1 = _ref.tooltip;
+      var _useTooltip = tooltip.useTooltip(),
+          showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
+          hideTooltip = _useTooltip.hideTooltip;
       var handleMouseEnter = React.useMemo(function () {
@@ -411,3 +406,3 @@ if (!isInteractive) return undefined;
           setCurrent(ribbon);
-          showTooltip(React__default.createElement(tooltip, {
+          showTooltipFromEvent(React__default.createElement(tooltip$1, {
             ribbon: ribbon
@@ -417,7 +412,7 @@ }), event);
         };
-      }, [isInteractive, ribbon, onMouseEnter]);
+      }, [isInteractive, showTooltipFromEvent, tooltip$1, ribbon, onMouseEnter]);
       var handleMouseMove = React.useMemo(function () {
         if (!isInteractive) return undefined;
         return function (event) {
-          showTooltip(React__default.createElement(tooltip, {
+          showTooltipFromEvent(React__default.createElement(tooltip$1, {
             ribbon: ribbon
@@ -427,3 +422,3 @@ }), event);
         };
-      }, [isInteractive, ribbon, onMouseMove]);
+      }, [isInteractive, showTooltipFromEvent, tooltip$1, ribbon, onMouseMove]);
       var handleMouseLeave = React.useMemo(function () {
@@ -436,3 +431,3 @@ if (!isInteractive) return undefined;
         };
-      }, [isInteractive, ribbon, onMouseLeave]);
+      }, [isInteractive, hideTooltip, ribbon, onMouseLeave]);
       var handleClick = React.useMemo(function () {
@@ -557,6 +552,6 @@ if (!isInteractive || !onClick) return undefined;
           onClick = _ref4.onClick,
-          tooltip = _ref4.tooltip,
-          animate = _ref4.animate,
-          motionDamping = _ref4.motionDamping,
-          motionStiffness = _ref4.motionStiffness;
+          tooltip = _ref4.tooltip;
+      var _useMotionConfig = core.useMotionConfig(),
+          animate = _useMotionConfig.animate,
+          _springConfig = _useMotionConfig.springConfig;
       if (animate !== true) {
@@ -587,7 +582,5 @@ return React__default.createElement("g", null, ribbons.map(function (ribbon) {
       }
-      var springConfig = {
-        damping: motionDamping,
-        stiffness: motionStiffness,
+      var springConfig = _objectSpread$3({}, _springConfig, {
         precision: 0.001
-      };
+      });
       return React__default.createElement(reactMotion.TransitionMotion, {
@@ -636,3 +629,3 @@ willEnter: ribbonWillEnter,
     ChordRibbons.displayName = 'ChordRibbons';
-    ChordRibbons.propTypes = _objectSpread$3({
+    ChordRibbons.propTypes = {
       ribbons: PropTypes.array.isRequired,
@@ -651,8 +644,4 @@ ribbonGenerator: PropTypes.func.isRequired,
       onClick: PropTypes.func
-    }, core.motionPropTypes);
+    };
 
-    function _slicedToArray$2(arr, i) { return _arrayWithHoles$2(arr) || _iterableToArrayLimit$2(arr, i) || _nonIterableRest$2(); }
-    function _nonIterableRest$2() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-    function _iterableToArrayLimit$2(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-    function _arrayWithHoles$2(arr) { if (Array.isArray(arr)) return arr; }
     var ChordArc = React.memo(function (_ref) {
@@ -672,7 +661,6 @@ var arc = _ref.arc,
           onClick = _ref.onClick,
-          tooltip = _ref.tooltip;
-      var _useTooltip = core.useTooltip(),
-          _useTooltip2 = _slicedToArray$2(_useTooltip, 2),
-          showTooltip = _useTooltip2[0],
-          hideTooltip = _useTooltip2[1];
+          tooltip$1 = _ref.tooltip;
+      var _useTooltip = tooltip.useTooltip(),
+          showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
+          hideTooltip = _useTooltip.hideTooltip;
       var handleMouseEnter = React.useMemo(function () {
@@ -682,3 +670,3 @@ if (!isInteractive) return undefined;
           setCurrent(arc);
-          showTooltip(React__default.createElement(tooltip, {
+          showTooltipFromEvent(React__default.createElement(tooltip$1, {
             arc: arc
@@ -688,7 +676,7 @@ }), event);
         };
-      }, [isInteractive, arc, onMouseEnter]);
+      }, [isInteractive, showTooltipFromEvent, tooltip$1, arc, onMouseEnter]);
       var handleMouseMove = React.useMemo(function () {
         if (!isInteractive) return undefined;
         return function (event) {
-          showTooltip(React__default.createElement(tooltip, {
+          showTooltipFromEvent(React__default.createElement(tooltip$1, {
             arc: arc
@@ -698,3 +686,3 @@ }), event);
         };
-      }, [isInteractive, arc, onMouseMove]);
+      }, [isInteractive, showTooltipFromEvent, tooltip$1, arc, onMouseMove]);
       var handleMouseLeave = React.useMemo(function () {
@@ -707,3 +695,3 @@ if (!isInteractive) return undefined;
         };
-      }, [isInteractive, arc, onMouseLeave]);
+      }, [isInteractive, hideTooltip, arc, onMouseLeave]);
       var handleClick = React.useMemo(function () {
@@ -763,6 +751,6 @@ if (!isInteractive || !onClick) return undefined;
           onClick = _ref.onClick,
-          tooltip = _ref.tooltip,
-          animate = _ref.animate,
-          motionDamping = _ref.motionDamping,
-          motionStiffness = _ref.motionStiffness;
+          tooltip = _ref.tooltip;
+      var _useMotionConfig = core.useMotionConfig(),
+          animate = _useMotionConfig.animate,
+          _springConfig = _useMotionConfig.springConfig;
       if (animate !== true) {
@@ -791,7 +779,5 @@ return arcs.map(function (arc) {
       }
-      var springConfig = {
-        damping: motionDamping,
-        stiffness: motionStiffness,
+      var springConfig = _objectSpread$4({}, _springConfig, {
         precision: 0.001
-      };
+      });
       return React__default.createElement(reactMotion.TransitionMotion, {
@@ -838,3 +824,3 @@ styles: arcs.map(function (arc) {
     ChordArcs.displayName = 'ChordArcs';
-    ChordArcs.propTypes = _objectSpread$4({
+    ChordArcs.propTypes = {
       arcs: PropTypes.array.isRequired,
@@ -852,3 +838,3 @@ arcGenerator: PropTypes.func.isRequired,
       tooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired
-    }, core.motionPropTypes);
+    };
 
@@ -861,9 +847,9 @@ function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$5(target, key, source[key]); }); } return target; }
           rotation = _ref.rotation,
-          getColor = _ref.getColor,
-          animate = _ref.animate,
-          motionDamping = _ref.motionDamping,
-          motionStiffness = _ref.motionStiffness;
+          getColor = _ref.getColor;
       var theme = core.useTheme();
+      var _useMotionConfig = core.useMotionConfig(),
+          animate = _useMotionConfig.animate,
+          springConfig = _useMotionConfig.springConfig;
       if (animate !== true) {
-        return React__default.createElement("g", null, arcs.map(function (arc) {
+        return React__default.createElement(React__default.Fragment, null, arcs.map(function (arc) {
           var color = getColor(arc, theme);
@@ -880,10 +866,6 @@ var angle = core.midAngle(arc);
             textAnchor: textProps.align,
-            alignmentBaseline: textProps.baseline
+            dominantBaseline: textProps.baseline
           }, arc.label);
         }));
       }
-      var springConfig = {
-        damping: motionDamping,
-        stiffness: motionStiffness
-      };
       return React__default.createElement(reactMotion.TransitionMotion, {
@@ -901,3 +883,3 @@ styles: arcs.map(function (arc) {
       }, function (interpolatedStyles) {
-        return React__default.createElement("g", null, interpolatedStyles.map(function (_ref2) {
+        return React__default.createElement(React__default.Fragment, null, interpolatedStyles.map(function (_ref2) {
           var key = _ref2.key,
@@ -916,3 +898,3 @@ style = _ref2.style,
             textAnchor: textProps.align,
-            alignmentBaseline: textProps.baseline
+            dominantBaseline: textProps.baseline
           }, arc.label);
@@ -922,3 +904,3 @@ }));
     };
-    ChordLabels.propTypes = _objectSpread$5({
+    ChordLabels.propTypes = {
       arcs: PropTypes.array.isRequired,
@@ -928,3 +910,3 @@ radius: PropTypes.number.isRequired,
       getColor: PropTypes.func.isRequired
-    }, core.motionPropTypes);
+    };
 
@@ -971,6 +953,3 @@ 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); }
           onRibbonClick = _ref.onRibbonClick,
-          legends$1 = _ref.legends,
-          animate = _ref.animate,
-          motionDamping = _ref.motionDamping,
-          motionStiffness = _ref.motionStiffness;
+          legends$1 = _ref.legends;
       var _useDimensions = core.useDimensions(width, height, partialMargin),
@@ -1051,6 +1030,3 @@ margin = _useDimensions.margin,
           onClick: onRibbonClick,
-          tooltip: ribbonTooltip,
-          animate: animate,
-          motionDamping: motionDamping,
-          motionStiffness: motionStiffness
+          tooltip: ribbonTooltip
         })),
@@ -1072,6 +1048,3 @@ arcs: React__default.createElement("g", {
           onClick: onArcClick,
-          tooltip: arcTooltip,
-          animate: animate,
-          motionDamping: motionDamping,
-          motionStiffness: motionStiffness
+          tooltip: arcTooltip
         })),
@@ -1100,6 +1073,3 @@ labels: null,
           rotation: labelRotation,
-          getColor: getLabelTextColor,
-          animate: animate,
-          motionDamping: motionDamping,
-          motionStiffness: motionStiffness
+          getColor: getLabelTextColor
         }));
@@ -1130,6 +1100,6 @@ }
     function _defineProperty$6(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-    function _slicedToArray$3(arr, i) { return _arrayWithHoles$3(arr) || _iterableToArrayLimit$3(arr, i) || _nonIterableRest$3(); }
-    function _nonIterableRest$3() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-    function _iterableToArrayLimit$3(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-    function _arrayWithHoles$3(arr) { if (Array.isArray(arr)) return arr; }
+    function _slicedToArray$1(arr, i) { return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1(); }
+    function _nonIterableRest$1() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+    function _iterableToArrayLimit$1(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+    function _arrayWithHoles$1(arr) { if (Array.isArray(arr)) return arr; }
     var getArcFromMouseEvent = function getArcFromMouseEvent(_ref) {
@@ -1144,3 +1114,3 @@ var event = _ref.event,
       var _getRelativeCursor = core.getRelativeCursor(canvasEl, event),
-          _getRelativeCursor2 = _slicedToArray$3(_getRelativeCursor, 2),
+          _getRelativeCursor2 = _slicedToArray$1(_getRelativeCursor, 2),
           x = _getRelativeCursor2[0],
@@ -1333,6 +1303,5 @@ y = _getRelativeCursor2[1];
       }, [canvasEl, innerWidth, innerHeight, outerWidth, outerHeight, margin, pixelRatio, theme, layers, arcs, arcGenerator, getArcOpacity, arcBorderWidth, getArcBorderColor, ribbons, ribbonGenerator, getRibbonOpacity, ribbonBorderWidth, getRibbonBorderColor, enableLabel, labelOffset, labelRotation, getLabelTextColor, legends$1, layerContext]);
-      var _useTooltip = core.useTooltip(),
-          _useTooltip2 = _slicedToArray$3(_useTooltip, 2),
-          showTooltip = _useTooltip2[0],
-          hideTooltip = _useTooltip2[1];
+      var _useTooltip = tooltip.useTooltip(),
+          showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
+          hideTooltip = _useTooltip.hideTooltip;
       var handleMouseHover = React.useCallback(function (event) {
@@ -1350,3 +1319,3 @@ var arc = getArcFromMouseEvent({
           setCurrentArc(arc);
-          showTooltip(React__default.createElement(arcTooltip, {
+          showTooltipFromEvent(React__default.createElement(arcTooltip, {
             arc: arc
@@ -1362,3 +1331,3 @@ }), event);
         }
-      }, [canvasEl, center, margin, radius, innerRadius, arcs, setCurrentArc, showTooltip, hideTooltip, onArcMouseEnter, onArcMouseMove, onArcMouseLeave]);
+      }, [canvasEl, center, margin, radius, innerRadius, arcs, setCurrentArc, showTooltipFromEvent, hideTooltip, onArcMouseEnter, onArcMouseMove, onArcMouseLeave]);
       var handleMouseLeave = React.useCallback(function () {
@@ -1365,0 +1334,0 @@ setCurrentArc(null);

package.json

 {
   "name": "@nivo/chord",
-  "version": "0.56.2",
+  "version": "0.57.0",
   "license": "MIT",
@@ -26,5 +26,6 @@ "author": {
   "dependencies": {
-    "@nivo/colors": "0.56.2",
-    "@nivo/core": "0.56.2",
-    "@nivo/legends": "0.56.2",
+    "@nivo/colors": "0.57.0",
+    "@nivo/core": "0.57.0",
+    "@nivo/legends": "0.57.0",
+    "@nivo/tooltip": "0.57.0",
     "d3-chord": "^1.0.6",
@@ -42,3 +43,3 @@ "d3-shape": "^1.3.5",
   },
-  "gitHead": "97dc958b0a3390a4c8d85125dc080a1cc4c6fc85"
+  "gitHead": "747b36908447afad4d4c4fe570bf9e189e163b15"
 }

No alert changes

Worsened metrics

Total package byte prevSize

177131

decreased by-2.99%

Dependency count

10

increased by11.11%

Lines of code

4187

decreased by-2.29%

Dependency changes

• + Added@nivo/tooltip@0.57.0

• + Added@nivo/colors@0.57.0(transitive)

• + Added@nivo/core@0.57.0(transitive)

• + Added@nivo/tooltip@0.57.0(transitive)

• - Removed@nivo/colors@0.56.2(transitive)

• - Removed@nivo/core@0.56.2(transitive)

• Updated@nivo/colors@0.57.0

• Updated@nivo/core@0.57.0

• Updated@nivo/legends@0.57.0