@nivo/stream - npm Package Compare versions

Comparing version 0.62.0 to 0.63.0

dist/nivo-stream.cjs.js

@@ -9,24 +9,51 @@ 'use strict';
 var React__default = _interopDefault(React);
-var range = _interopDefault(require('lodash/range'));
-var sortBy = _interopDefault(require('lodash/sortBy'));
 var core = require('@nivo/core');
 var axes = require('@nivo/axes');
 var legends = require('@nivo/legends');
+var reactSpring = require('react-spring');
+var tooltip = require('@nivo/tooltip');
 var PropTypes = _interopDefault(require('prop-types'));
-var tooltip = require('@nivo/tooltip');
-var compose = _interopDefault(require('recompose/compose'));
-var pure = _interopDefault(require('recompose/pure'));
-var reactMotion = require('react-motion');
-var withState = _interopDefault(require('recompose/withState'));
-var withHandlers = _interopDefault(require('recompose/withHandlers'));
-var withPropsOnChange = _interopDefault(require('recompose/withPropsOnChange'));
 var colors = require('@nivo/colors');
 var d3Shape = require('d3-shape');
 var d3Scale = require('d3-scale');
-var d3Format = require('d3-format');
-var defaultProps = _interopDefault(require('recompose/defaultProps'));
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(Object(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(target, key, source[key]); }); } return target; }
-function _defineProperty(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 _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); }
+var StreamLayer = function StreamLayer(_ref) {
+  var layer = _ref.layer,
+      fillOpacity = _ref.fillOpacity,
+      borderWidth = _ref.borderWidth,
+      getBorderColor = _ref.getBorderColor,
+      getTooltipLabel = _ref.getTooltipLabel,
+      isInteractive = _ref.isInteractive;
+  var _useTooltip = tooltip.useTooltip(),
+      showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
+      hideTooltip = _useTooltip.hideTooltip;
+  var handleMouseHover = React.useCallback(function (event) {
+    showTooltipFromEvent( React__default.createElement(tooltip.BasicTooltip, {
+      id: getTooltipLabel(layer),
+      enableChip: true,
+      color: layer.color
+    }), event, 'left');
+  }, [showTooltipFromEvent, getTooltipLabel, layer]);
+  var _useMotionConfig = core.useMotionConfig(),
+      animate = _useMotionConfig.animate,
+      springConfig = _useMotionConfig.config;
+  var animatedProps = reactSpring.useSpring({
+    path: layer.path,
+    color: layer.color,
+    config: springConfig,
+    immediate: !animate
+  });
+  return React__default.createElement(reactSpring.animated.path, {
+    d: animatedProps.path,
+    fill: layer.fill ? layer.fill : animatedProps.color,
+    fillOpacity: fillOpacity,
+    stroke: getBorderColor(layer),
+    strokeWidth: borderWidth,
+    onMouseMove: isInteractive ? handleMouseHover : undefined,
+    onMouseEnter: isInteractive ? handleMouseHover : undefined,
+    onMouseLeave: isInteractive ? hideTooltip : undefined
+  });
+};
+var StreamLayer$1 = React.memo(StreamLayer);
+
 var StreamLayers = function StreamLayers(_ref) {
@@ -37,83 +64,60 @@ var layers = _ref.layers,
       getBorderColor = _ref.getBorderColor,
-      theme = _ref.theme,
-      showTooltip = _ref.showTooltip,
-      hideTooltip = _ref.hideTooltip,
       getTooltipLabel = _ref.getTooltipLabel,
-      animate = _ref.animate,
-      motionStiffness = _ref.motionStiffness,
-      motionDamping = _ref.motionDamping;
-  if (animate !== true) {
-    return React__default.createElement("g", null, layers.map(function (layer, i) {
-      var path = layer.path,
-          color = layer.color;
-      var handleTooltip = function handleTooltip(e) {
-        return showTooltip(React__default.createElement(tooltip.BasicTooltip, {
-          id: getTooltipLabel(layer),
-          enableChip: true,
-          color: color,
-          theme: theme
-        }), e);
-      };
-      return React__default.createElement("path", {
-        key: i,
-        onMouseMove: handleTooltip,
-        onMouseEnter: handleTooltip,
-        onMouseLeave: hideTooltip,
-        d: path,
-        fill: layer.fill ? layer.fill : layer.color,
-        fillOpacity: fillOpacity,
-        stroke: getBorderColor(layer),
-        strokeWidth: borderWidth
-      });
-    }));
-  }
-  var springConfig = {
-    stiffness: motionStiffness,
-    damping: motionDamping
-  };
+      isInteractive = _ref.isInteractive;
   return React__default.createElement("g", null, layers.map(function (layer, i) {
-    var path = layer.path,
-        color = layer.color;
-    var handleTooltip = function handleTooltip(e) {
-      return showTooltip(React__default.createElement(tooltip.BasicTooltip, {
-        id: getTooltipLabel(layer),
-        enableChip: true,
-        color: color,
-        theme: theme
-      }), e);
-    };
-    return React__default.createElement(core.SmartMotion, {
+    return React__default.createElement(StreamLayer$1, {
       key: i,
-      style: function style(spring) {
-        return {
-          d: spring(path, springConfig),
-          fill: spring(color, springConfig),
-          fillOpacity: spring(fillOpacity, springConfig)
-        };
-      }
-    }, function (style) {
-      return React__default.createElement("path", _extends({
-        onMouseMove: handleTooltip,
-        onMouseEnter: handleTooltip,
-        onMouseLeave: hideTooltip
-      }, style, {
-        fill: layer.fill ? layer.fill : style.fill,
-        stroke: getBorderColor(layer),
-        strokeWidth: borderWidth
-      }));
+      layer: layer,
+      getBorderColor: getBorderColor,
+      borderWidth: borderWidth,
+      fillOpacity: fillOpacity,
+      getTooltipLabel: getTooltipLabel,
+      isInteractive: isInteractive
     });
   }));
 };
-StreamLayers.propTypes = _objectSpread({
-  fillOpacity: PropTypes.number.isRequired,
-  borderWidth: PropTypes.number.isRequired,
-  getBorderColor: PropTypes.func.isRequired,
-  theme: PropTypes.object.isRequired,
-  showTooltip: PropTypes.func.isRequired,
-  hideTooltip: PropTypes.func.isRequired,
-  getTooltipLabel: PropTypes.func.isRequired
-}, core.motionPropTypes);
 
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(Object(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$1(target, key, source[key]); }); } return target; }
-function _defineProperty$1(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 _defineProperty(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 ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+  return target;
+}
+
 var getDotY = function getDotY(datum, position) {
@@ -132,3 +136,3 @@ var y = datum.y2;
       data = _ref.data,
-      renderDot = _ref.renderDot,
+      dotComponent = _ref.dotComponent,
       position = _ref.position,
@@ -138,88 +142,105 @@ getSize = _ref.getSize,
       getBorderWidth = _ref.getBorderWidth,
-      getBorderColor = _ref.getBorderColor,
-      animate = _ref.animate,
-      motionStiffness = _ref.motionStiffness,
-      motionDamping = _ref.motionDamping;
-  if (animate !== true) {
-    return data.map(function (d, i) {
-      var datum = _objectSpread$1({}, d, {
-        key: id,
-        color: color
-      });
-      return React__default.createElement(React.Fragment, {
-        key: i
-      }, renderDot({
-        data: datum,
-        x: datum.x,
-        y: getDotY(datum, position),
-        size: getSize(datum),
-        color: getColor(datum),
-        borderWidth: getBorderWidth(datum)
-      }));
+      getBorderColor = _ref.getBorderColor;
+  return data.map(function (d, i) {
+    var datum = _objectSpread2(_objectSpread2({}, d), {}, {
+      key: id,
+      color: color
     });
-  }
-  var springConfig = {
-    stiffness: motionStiffness,
-    damping: motionDamping
-  };
-  return React__default.createElement(reactMotion.TransitionMotion, {
-    styles: data.map(function (d, i) {
-      var datum = _objectSpread$1({}, d, {
-        key: id,
-        color: color
-      });
-      return {
-        key: "".concat(i),
-        data: datum,
-        style: {
-          x: reactMotion.spring(datum.x, springConfig),
-          y: reactMotion.spring(getDotY(datum, position), springConfig),
-          size: reactMotion.spring(getSize(datum), springConfig),
-          borderWidth: reactMotion.spring(getBorderWidth(datum), springConfig)
-        }
-      };
-    })
-  }, function (interpolatedStyles) {
-    return React__default.createElement(React.Fragment, null, interpolatedStyles.map(function (_ref2) {
-      var key = _ref2.key,
-          style = _ref2.style,
-          datum = _ref2.data;
-      return React__default.createElement(React.Fragment, {
-        key: key
-      }, renderDot({
-        data: datum,
-        x: style.x,
-        y: style.y,
-        size: style.size,
-        color: getColor(datum),
-        borderWidth: style.borderWidth,
-        borderColor: getBorderColor(datum)
-      }));
-    }));
+    return React__default.createElement(dotComponent, {
+      key: i,
+      datum: datum,
+      x: datum.x,
+      y: getDotY(datum, position),
+      size: getSize(datum),
+      color: getColor(datum),
+      borderWidth: getBorderWidth(datum),
+      borderColor: getBorderColor(datum)
+    });
   });
 };
-StreamDots.propTypes = _objectSpread$1({
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  color: PropTypes.string.isRequired,
-  data: PropTypes.arrayOf(PropTypes.shape({
-    x: PropTypes.number.isRequired,
-    y1: PropTypes.number.isRequired,
-    y2: PropTypes.number.isRequired
-  })).isRequired,
-  renderDot: PropTypes.func.isRequired,
-  position: PropTypes.oneOf(['start', 'center', 'end']).isRequired,
-  getSize: PropTypes.func.isRequired,
-  getColor: PropTypes.func.isRequired,
-  getBorderWidth: PropTypes.func.isRequired,
-  getBorderColor: PropTypes.func.isRequired
-}, core.motionPropTypes);
-var enhance = compose(pure);
-var StreamDots$1 = enhance(StreamDots);
+var StreamDots$1 = React.memo(StreamDots);
 
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  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 _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
 var StreamSlicesItem = function StreamSlicesItem(_ref) {
   var slice = _ref.slice,
       height = _ref.height,
-      showTooltip = _ref.showTooltip,
-      hideTooltip = _ref.hideTooltip,
-      isHover = _ref.isHover;
+      getTooltipLabel = _ref.getTooltipLabel,
+      getTooltipValue = _ref.getTooltipValue;
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isHover = _useState2[0],
+      setIsHover = _useState2[1];
+  var _useTooltip = tooltip.useTooltip(),
+      showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
+      hideTooltip = _useTooltip.hideTooltip;
+  var rows = React.useMemo(function () {
+    return slice.stack.map(function (p) {
+      return [React__default.createElement(tooltip.Chip, {
+        key: p.id,
+        color: p.color
+      }), getTooltipLabel(p), getTooltipValue(p.value)];
+    });
+  }, [slice, getTooltipLabel, getTooltipValue]);
+  var handleMouseHover = React.useCallback(function (event) {
+    setIsHover(true);
+    showTooltipFromEvent( React__default.createElement(tooltip.TableTooltip, {
+      rows: rows
+    }), event, 'left');
+  }, [setIsHover, showTooltipFromEvent, rows]);
+  var handleMouseLeave = React.useCallback(function () {
+    setIsHover(false);
+    hideTooltip();
+  }, [setIsHover, hideTooltip]);
   return React__default.createElement("g", {
@@ -241,53 +262,8 @@ transform: "translate(".concat(slice.x, ", 0)")
     fillOpacity: 0,
-    onMouseEnter: showTooltip,
-    onMouseMove: showTooltip,
-    onMouseLeave: hideTooltip
+    onMouseEnter: handleMouseHover,
+    onMouseMove: handleMouseHover,
+    onMouseLeave: handleMouseLeave
   }));
 };
-StreamSlicesItem.propTypes = {
-  slice: PropTypes.object.isRequired,
-  height: PropTypes.number.isRequired,
-  showTooltip: PropTypes.func.isRequired,
-  hideTooltip: PropTypes.func.isRequired,
-  getTooltipLabel: PropTypes.func.isRequired,
-  getTooltipValue: PropTypes.func.isRequired,
-  isHover: PropTypes.bool.isRequired,
-  theme: PropTypes.object.isRequired
-};
-var enhance$1 = compose(withState('isHover', 'setIsHover', false), withPropsOnChange(['slice', 'theme', 'getTooltipLabel', 'getTooltipValue'], function (_ref2) {
-  var slice = _ref2.slice,
-      theme = _ref2.theme,
-      getTooltipLabel = _ref2.getTooltipLabel,
-      getTooltipValue = _ref2.getTooltipValue;
-  return {
-    tooltip: React__default.createElement(tooltip.TableTooltip, {
-      theme: theme,
-      rows: slice.stack.map(function (p) {
-        return [React__default.createElement(tooltip.Chip, {
-          key: p.id,
-          color: p.color
-        }), getTooltipLabel(p), getTooltipValue(p)];
-      })
-    })
-  };
-}), withHandlers({
-  showTooltip: function showTooltip(_ref3) {
-    var _showTooltip = _ref3.showTooltip,
-        setIsHover = _ref3.setIsHover,
-        tooltip = _ref3.tooltip;
-    return function (e) {
-      setIsHover(true);
-      _showTooltip(tooltip, e);
-    };
-  },
-  hideTooltip: function hideTooltip(_ref4) {
-    var _hideTooltip = _ref4.hideTooltip,
-        setIsHover = _ref4.setIsHover;
-    return function () {
-      setIsHover(false);
-      _hideTooltip();
-    };
-  }
-}), pure);
-var StreamSlicesItem$1 = enhance$1(StreamSlicesItem);
+var StreamSlicesItem$1 = React.memo(StreamSlicesItem);
 
@@ -297,5 +273,2 @@ var StreamSlices = function StreamSlices(_ref) {
       height = _ref.height,
-      showTooltip = _ref.showTooltip,
-      hideTooltip = _ref.hideTooltip,
-      theme = _ref.theme,
       getTooltipLabel = _ref.getTooltipLabel,
@@ -308,5 +281,2 @@ getTooltipValue = _ref.getTooltipValue;
       height: height,
-      showTooltip: showTooltip,
-      hideTooltip: hideTooltip,
-      theme: theme,
       getTooltipLabel: getTooltipLabel,
@@ -317,20 +287,3 @@ getTooltipValue: getTooltipValue
 };
-StreamSlices.propTypes = {
-  slices: PropTypes.arrayOf(PropTypes.shape({
-    index: PropTypes.number.isRequired,
-    x: PropTypes.number.isRequired,
-    stack: PropTypes.arrayOf(PropTypes.shape({
-      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-      value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-      color: PropTypes.string.isRequired
-    })).isRequired
-  })).isRequired,
-  height: PropTypes.number.isRequired,
-  showTooltip: PropTypes.func.isRequired,
-  hideTooltip: PropTypes.func.isRequired,
-  getTooltipLabel: PropTypes.func.isRequired,
-  getTooltipValue: PropTypes.func.isRequired,
-  theme: PropTypes.object.isRequired
-};
-var StreamSlices$1 = pure(StreamSlices);
+var StreamSlices$1 = React.memo(StreamSlices);
 
@@ -344,7 +297,18 @@ var StreamDotsItem = function StreamDotsItem(_ref) {
       borderColor = _ref.borderColor;
-  return React__default.createElement("circle", {
-    cx: x,
-    cy: y,
-    r: size * 0.5,
-    fill: color,
+  var _useMotionConfig = core.useMotionConfig(),
+      animate = _useMotionConfig.animate,
+      springConfig = _useMotionConfig.config;
+  var animatedProps = reactSpring.useSpring({
+    x: x,
+    y: y,
+    radius: size * 0.5,
+    color: color,
+    config: springConfig,
+    immediate: !animate
+  });
+  return React__default.createElement(reactSpring.animated.circle, {
+    cx: animatedProps.x,
+    cy: animatedProps.y,
+    r: animatedProps.radius,
+    fill: animatedProps.color,
     strokeWidth: borderWidth,
@@ -354,10 +318,3 @@ stroke: borderColor
 };
-StreamDotsItem.propTypes = {
-  x: PropTypes.number.isRequired,
-  y: PropTypes.number.isRequired,
-  size: PropTypes.number.isRequired,
-  color: PropTypes.string.isRequired,
-  borderWidth: PropTypes.number.isRequired,
-  borderColor: PropTypes.string.isRequired
-};
+var StreamDotsItem$1 = React.memo(StreamDotsItem);
 
@@ -367,9 +324,5 @@ var StreamPropTypes = {
   keys: PropTypes.array.isRequired,
-  stack: PropTypes.func.isRequired,
-  xScale: PropTypes.func.isRequired,
-  yScale: PropTypes.func.isRequired,
   order: core.stackOrderPropType.isRequired,
   offsetType: core.stackOffsetPropType.isRequired,
   curve: core.areaCurvePropType.isRequired,
-  areaGenerator: PropTypes.func.isRequired,
   axisTop: PropTypes.object,
@@ -383,3 +336,2 @@ axisRight: PropTypes.object,
   fillOpacity: PropTypes.number.isRequired,
-  getColor: PropTypes.func.isRequired,
   defs: PropTypes.arrayOf(PropTypes.shape({
@@ -394,19 +346,15 @@ id: PropTypes.string.isRequired
   borderColor: colors.inheritedColorPropType.isRequired,
-  getBorderColor: PropTypes.func.isRequired,
   enableDots: PropTypes.bool.isRequired,
-  renderDot: PropTypes.func.isRequired,
+  dotComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
   dotPosition: PropTypes.oneOf(['start', 'center', 'end']).isRequired,
   dotSize: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
-  getDotSize: PropTypes.func.isRequired,
   dotColor: colors.inheritedColorPropType.isRequired,
   dotBorderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
-  getDotBorderWidth: PropTypes.func.isRequired,
   dotBorderColor: colors.inheritedColorPropType.isRequired,
   isInteractive: PropTypes.bool,
   tooltipLabel: PropTypes.func,
-  getTooltipLabel: PropTypes.func.isRequired,
   tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  getTooltipValue: PropTypes.func.isRequired,
   enableStackTooltip: PropTypes.bool.isRequired,
-  legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired
+  legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired,
+  role: PropTypes.string.isRequired
 };
@@ -433,3 +381,3 @@ var StreamDefaultProps = {
   dotPosition: 'center',
-  renderDot: StreamDotsItem,
+  dotComponent: StreamDotsItem$1,
   dotSize: 6,
@@ -445,9 +393,24 @@ dotColor: {
   enableStackTooltip: true,
-  legends: []
+  legends: [],
+  role: 'img',
+  animate: true,
+  motionConfig: 'gentle'
 };
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
-function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
 var stackMin = function stackMin(layers) {
@@ -467,40 +430,34 @@ return Math.min.apply(Math, _toConsumableArray(layers.reduce(function (acc, layer) {
 };
-var enhance$2 = (function (Component) {
-  return compose(defaultProps(StreamDefaultProps), core.withTheme(), core.withCurve(), core.withDimensions(), core.withMotion(), withPropsOnChange(['curveInterpolator'], function (_ref) {
-    var curveInterpolator = _ref.curveInterpolator;
-    return {
-      areaGenerator: d3Shape.area().x(function (_ref2) {
-        var x = _ref2.x;
-        return x;
-      }).y0(function (_ref3) {
-        var y1 = _ref3.y1;
-        return y1;
-      }).y1(function (_ref4) {
-        var y2 = _ref4.y2;
-        return y2;
-      }).curve(curveInterpolator)
-    };
-  }), withPropsOnChange(['colors'], function (_ref5) {
-    var colors$1 = _ref5.colors;
-    return {
-      getColor: colors.getOrdinalColorScale(colors$1, 'index')
-    };
-  }), withPropsOnChange(['borderColor', 'theme'], function (_ref6) {
-    var borderColor = _ref6.borderColor,
-        theme = _ref6.theme;
-    return {
-      getBorderColor: colors.getInheritedColorGenerator(borderColor, theme)
-    };
-  }), withPropsOnChange(['keys', 'offsetType', 'order'], function (_ref7) {
-    var keys = _ref7.keys,
-        offsetType = _ref7.offsetType,
-        order = _ref7.order;
-    return {
-      stack: d3Shape.stack().keys(keys).offset(core.stackOffsetFromProp(offsetType)).order(core.stackOrderFromProp(order))
-    };
-  }), withPropsOnChange(['stack', 'data', 'width', 'height'], function (_ref8) {
-    var stack = _ref8.stack,
-        data = _ref8.data,
-        width = _ref8.width,
-        height = _ref8.height;
+var useStream = function useStream(_ref) {
+  var width = _ref.width,
+      height = _ref.height,
+      data = _ref.data,
+      keys = _ref.keys,
+      offsetType = _ref.offsetType,
+      order = _ref.order,
+      curve = _ref.curve,
+      colors$1 = _ref.colors,
+      borderColor = _ref.borderColor,
+      dotSize = _ref.dotSize,
+      dotColor = _ref.dotColor,
+      dotBorderWidth = _ref.dotBorderWidth,
+      dotBorderColor = _ref.dotBorderColor,
+      tooltipLabel = _ref.tooltipLabel,
+      tooltipFormat = _ref.tooltipFormat;
+  var areaGenerator = React.useMemo(function () {
+    return d3Shape.area().x(function (_ref2) {
+      var x = _ref2.x;
+      return x;
+    }).y0(function (_ref3) {
+      var y1 = _ref3.y1;
+      return y1;
+    }).y1(function (_ref4) {
+      var y2 = _ref4.y2;
+      return y2;
+    }).curve(core.curveFromProp(curve));
+  }, [curve]);
+  var stack = React.useMemo(function () {
+    return d3Shape.stack().keys(keys).offset(core.stackOffsetFromProp(offsetType)).order(core.stackOrderFromProp(order));
+  }, [keys, offsetType, order]);
+  var _useMemo = React.useMemo(function () {
     var layers = stack(data);
@@ -514,75 +471,98 @@ layers.forEach(function (layer) {
     var maxValue = stackMax(layers);
-    return {
-      layers: layers,
-      xScale: d3Scale.scalePoint().domain(range(data.length)).range([0, width]),
-      yScale: d3Scale.scaleLinear().domain([minValue, maxValue]).range([height, 0])
+    return [layers, d3Scale.scalePoint().domain(Array.from({
+      length: data.length
+    }, function (_, i) {
+      return i;
+    })).range([0, width]), d3Scale.scaleLinear().domain([minValue, maxValue]).range([height, 0])];
+  }, [stack, data, width, height]),
+      _useMemo2 = _slicedToArray(_useMemo, 3),
+      layers = _useMemo2[0],
+      xScale = _useMemo2[1],
+      yScale = _useMemo2[2];
+  var theme = core.useTheme();
+  var getColor = colors.useOrdinalColorScale(colors$1, 'index');
+  var getBorderColor = colors.useInheritedColor(borderColor, theme);
+  var getDotSize = React.useMemo(function () {
+    return typeof dotSize === 'function' ? dotSize : function () {
+      return dotSize;
     };
-  }), withPropsOnChange(['dotSize'], function (_ref9) {
-    var dotSize = _ref9.dotSize;
-    return {
-      getDotSize: typeof dotSize === 'function' ? dotSize : function () {
-        return dotSize;
-      }
+  }, [dotSize]);
+  var getDotColor = colors.useInheritedColor(dotColor, theme);
+  var getDotBorderWidth = React.useMemo(function () {
+    return typeof dotBorderWidth === 'function' ? dotBorderWidth : function () {
+      return dotBorderWidth;
     };
-  }), withPropsOnChange(['dotColor', 'theme'], function (_ref10) {
-    var dotColor = _ref10.dotColor,
-        theme = _ref10.theme;
-    return {
-      getDotColor: colors.getInheritedColorGenerator(dotColor, theme)
-    };
-  }), withPropsOnChange(['dotBorderWidth'], function (_ref11) {
-    var dotBorderWidth = _ref11.dotBorderWidth;
-    return {
-      getDotBorderWidth: typeof dotBorderWidth === 'function' ? dotBorderWidth : function () {
-        return dotBorderWidth;
-      }
-    };
-  }), withPropsOnChange(['dotBorderColor', 'theme'], function (_ref12) {
-    var dotBorderColor = _ref12.dotBorderColor,
-        theme = _ref12.theme;
-    return {
-      getDotBorderColor: colors.getInheritedColorGenerator(dotBorderColor, theme)
-    };
-  }), withPropsOnChange(['tooltipLabel', 'tooltipFormat'], function (_ref13) {
-    var tooltipLabel = _ref13.tooltipLabel,
-        tooltipFormat = _ref13.tooltipFormat;
-    var getTooltipLabel = function getTooltipLabel(d) {
+  }, [dotBorderWidth]);
+  var getDotBorderColor = colors.useInheritedColor(dotBorderColor, theme);
+  var enhancedLayers = React.useMemo(function () {
+    return layers.map(function (points, layerIndex) {
+      var layer = points.map(function (point, i) {
+        return {
+          index: i,
+          x: xScale(i),
+          value: point.value,
+          y1: yScale(point[0]),
+          y2: yScale(point[1])
+        };
+      });
+      return {
+        id: keys[layerIndex],
+        layer: layer,
+        path: areaGenerator(layer),
+        color: getColor({
+          index: layerIndex
+        })
+      };
+    });
+  }, [layers, keys, areaGenerator, getColor]);
+  var slices = React.useMemo(function () {
+    return Array.from({
+      length: data.length
+    }, function (_, i) {
+      var sliceStack = enhancedLayers.map(function (layer) {
+        return _objectSpread2({
+          id: layer.id,
+          color: layer.color
+        }, layer.layer[i]);
+      }).sort(function (a, b) {
+        return a.y2 - b.y2;
+      });
+      return {
+        index: i,
+        x: enhancedLayers[0].layer[i].x,
+        stack: sliceStack
+      };
+    });
+  }, [data.length, enhancedLayers]);
+  var getTooltipLabel = React.useMemo(function () {
+    if (typeof tooltipLabel === 'function') return tooltipLabel;
+    return function (d) {
       return d.id;
     };
-    if (typeof tooltipLabel === 'function') {
-      getTooltipLabel = tooltipLabel;
-    }
-    var getTooltipValue = function getTooltipValue(d) {
-      return d.value;
-    };
-    if (typeof tooltipFormat === 'function') {
-      getTooltipValue = tooltipFormat;
-    } else if (typeof tooltipFormat === 'string' || tooltipFormat instanceof String) {
-      var formatter = d3Format.format(tooltipFormat);
-      getTooltipValue = function getTooltipValue(d) {
-        return formatter(d.value);
-      };
-    }
-    return {
-      getTooltipValue: getTooltipValue,
-      getTooltipLabel: getTooltipLabel
-    };
-  }), pure)(Component);
-});
+  }, [tooltipLabel]);
+  var getTooltipValue = core.useValueFormatter(tooltipFormat);
+  return {
+    xScale: xScale,
+    yScale: yScale,
+    layers: enhancedLayers,
+    slices: slices,
+    getBorderColor: getBorderColor,
+    getDotSize: getDotSize,
+    getDotColor: getDotColor,
+    getDotBorderWidth: getDotBorderWidth,
+    getDotBorderColor: getDotBorderColor,
+    getTooltipLabel: getTooltipLabel,
+    getTooltipValue: getTooltipValue
+  };
+};
 
-function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(Object(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$2(target, key, source[key]); }); } return target; }
-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; }
 var Stream = function Stream(_ref) {
   var data = _ref.data,
       keys = _ref.keys,
-      xScale = _ref.xScale,
-      yScale = _ref.yScale,
-      layers = _ref.layers,
-      areaGenerator = _ref.areaGenerator,
-      margin = _ref.margin,
+      offsetType = _ref.offsetType,
+      order = _ref.order,
+      curve = _ref.curve,
       width = _ref.width,
       height = _ref.height,
-      outerWidth = _ref.outerWidth,
-      outerHeight = _ref.outerHeight,
+      partialMargin = _ref.margin,
       axisTop = _ref.axisTop,
@@ -594,7 +574,6 @@ axisRight = _ref.axisRight,
       enableGridY = _ref.enableGridY,
-      theme = _ref.theme,
-      getColor = _ref.getColor,
+      colors = _ref.colors,
       fillOpacity = _ref.fillOpacity,
       borderWidth = _ref.borderWidth,
-      getBorderColor = _ref.getBorderColor,
+      borderColor = _ref.borderColor,
       defs = _ref.defs,
@@ -604,137 +583,114 @@ fill = _ref.fill,
       dotPosition = _ref.dotPosition,
-      renderDot = _ref.renderDot,
-      getDotSize = _ref.getDotSize,
-      getDotColor = _ref.getDotColor,
-      getDotBorderWidth = _ref.getDotBorderWidth,
-      getDotBorderColor = _ref.getDotBorderColor,
-      animate = _ref.animate,
-      motionStiffness = _ref.motionStiffness,
-      motionDamping = _ref.motionDamping,
+      dotComponent = _ref.dotComponent,
+      dotSize = _ref.dotSize,
+      dotColor = _ref.dotColor,
+      dotBorderWidth = _ref.dotBorderWidth,
+      dotBorderColor = _ref.dotBorderColor,
       isInteractive = _ref.isInteractive,
-      getTooltipValue = _ref.getTooltipValue,
-      getTooltipLabel = _ref.getTooltipLabel,
+      tooltipLabel = _ref.tooltipLabel,
+      tooltipFormat = _ref.tooltipFormat,
       enableStackTooltip = _ref.enableStackTooltip,
-      legends$1 = _ref.legends;
-  var enhancedLayers = layers.map(function (points, layerIndex) {
-    var layer = points.map(function (point, i) {
+      legends$1 = _ref.legends,
+      role = _ref.role;
+  var _useDimensions = core.useDimensions(width, height, partialMargin),
+      margin = _useDimensions.margin,
+      innerWidth = _useDimensions.innerWidth,
+      innerHeight = _useDimensions.innerHeight,
+      outerWidth = _useDimensions.outerWidth,
+      outerHeight = _useDimensions.outerHeight;
+  var _useStream = useStream({
+    width: innerWidth,
+    height: innerHeight,
+    data: data,
+    keys: keys,
+    offsetType: offsetType,
+    order: order,
+    curve: curve,
+    colors: colors,
+    borderColor: borderColor,
+    dotSize: dotSize,
+    dotColor: dotColor,
+    dotBorderWidth: dotBorderWidth,
+    dotBorderColor: dotBorderColor,
+    tooltipLabel: tooltipLabel,
+    tooltipFormat: tooltipFormat
+  }),
+      xScale = _useStream.xScale,
+      yScale = _useStream.yScale,
+      layers = _useStream.layers,
+      slices = _useStream.slices,
+      getBorderColor = _useStream.getBorderColor,
+      getDotSize = _useStream.getDotSize,
+      getDotColor = _useStream.getDotColor,
+      getDotBorderWidth = _useStream.getDotBorderWidth,
+      getDotBorderColor = _useStream.getDotBorderColor,
+      getTooltipLabel = _useStream.getTooltipLabel,
+      getTooltipValue = _useStream.getTooltipValue;
+  var boundDefs = core.bindDefs(defs, layers, fill);
+  return React__default.createElement(core.SvgWrapper, {
+    width: outerWidth,
+    height: outerHeight,
+    margin: margin,
+    defs: boundDefs,
+    role: role
+  }, React__default.createElement(axes.Grid, {
+    width: innerWidth,
+    height: innerHeight,
+    xScale: enableGridX ? xScale : null,
+    yScale: enableGridY ? yScale : null
+  }), React__default.createElement(StreamLayers, {
+    layers: layers,
+    fillOpacity: fillOpacity,
+    borderWidth: borderWidth,
+    getBorderColor: getBorderColor,
+    getTooltipLabel: getTooltipLabel,
+    isInteractive: isInteractive
+  }), React__default.createElement(axes.Axes, {
+    xScale: xScale,
+    yScale: yScale,
+    width: innerWidth,
+    height: innerHeight,
+    top: axisTop,
+    right: axisRight,
+    bottom: axisBottom,
+    left: axisLeft
+  }), enableDots && layers.map(function (layer) {
+    return React__default.createElement(StreamDots$1, {
+      key: layer.id,
+      id: layer.id,
+      color: layer.color,
+      data: layer.layer,
+      dotComponent: dotComponent,
+      position: dotPosition,
+      getSize: getDotSize,
+      getColor: getDotColor,
+      getBorderWidth: getDotBorderWidth,
+      getBorderColor: getDotBorderColor
+    });
+  }), isInteractive && enableStackTooltip && React__default.createElement(StreamSlices$1, {
+    slices: slices,
+    height: innerHeight,
+    getTooltipValue: getTooltipValue,
+    getTooltipLabel: getTooltipLabel
+  }), legends$1.map(function (legend, i) {
+    var legendData = layers.map(function (l) {
       return {
-        index: i,
-        x: xScale(i),
-        value: point.value,
-        y1: yScale(point[0]),
-        y2: yScale(point[1])
+        id: l.id,
+        label: l.id,
+        color: l.color,
+        fill: l.fill
       };
-    });
-    return {
-      id: keys[layerIndex],
-      layer: layer,
-      path: areaGenerator(layer),
-      color: getColor({
-        index: layerIndex
-      })
-    };
-  });
-  var slices = range(data.length).map(function (i) {
-    return {
-      index: i,
-      x: enhancedLayers[0].layer[i].x,
-      stack: sortBy(enhancedLayers.map(function (layer) {
-        return _objectSpread$2({
-          id: layer.id,
-          color: layer.color
-        }, layer.layer[i]);
-      }), 'y2')
-    };
-  });
-  var boundDefs = core.bindDefs(defs, enhancedLayers, fill);
-  return React__default.createElement(core.Container, {
-    isInteractive: isInteractive,
-    theme: theme,
-    animate: animate,
-    motionDamping: motionDamping,
-    motionStiffness: motionStiffness
-  }, function (_ref2) {
-    var showTooltip = _ref2.showTooltip,
-        hideTooltip = _ref2.hideTooltip;
-    return React__default.createElement(core.SvgWrapper, {
-      width: outerWidth,
-      height: outerHeight,
-      margin: margin,
-      defs: boundDefs,
-      theme: theme
-    }, React__default.createElement(axes.Grid, {
-      width: width,
-      height: height,
-      xScale: enableGridX ? xScale : null,
-      yScale: enableGridY ? yScale : null
-    }), React__default.createElement(StreamLayers, {
-      layers: enhancedLayers,
-      fillOpacity: fillOpacity,
-      borderWidth: borderWidth,
-      getBorderColor: getBorderColor,
-      showTooltip: showTooltip,
-      hideTooltip: hideTooltip,
-      getTooltipLabel: getTooltipLabel,
-      theme: theme,
-      animate: animate,
-      motionDamping: motionDamping,
-      motionStiffness: motionStiffness
-    }), React__default.createElement(axes.Axes, {
-      xScale: xScale,
-      yScale: yScale,
-      width: width,
-      height: height,
-      top: axisTop,
-      right: axisRight,
-      bottom: axisBottom,
-      left: axisLeft
-    }), enableDots && enhancedLayers.map(function (layer) {
-      return React__default.createElement(StreamDots$1, {
-        key: layer.id,
-        id: layer.id,
-        color: layer.color,
-        data: layer.layer,
-        renderDot: renderDot,
-        position: dotPosition,
-        getSize: getDotSize,
-        getColor: getDotColor,
-        getBorderWidth: getDotBorderWidth,
-        getBorderColor: getDotBorderColor,
-        animate: animate,
-        motionDamping: motionDamping,
-        motionStiffness: motionStiffness
-      });
-    }), isInteractive && enableStackTooltip && React__default.createElement(StreamSlices$1, {
-      slices: slices,
-      height: height,
-      showTooltip: showTooltip,
-      hideTooltip: hideTooltip,
-      theme: theme,
-      getTooltipValue: getTooltipValue,
-      getTooltipLabel: getTooltipLabel
-    }), legends$1.map(function (legend, i) {
-      var legendData = enhancedLayers.map(function (l) {
-        return {
-          id: l.id,
-          label: l.id,
-          color: l.color,
-          fill: l.fill
-        };
-      }).reverse();
-      return React__default.createElement(legends.BoxLegendSvg, _extends$1({
-        key: i
-      }, legend, {
-        containerWidth: width,
-        containerHeight: height,
-        data: legendData,
-        theme: theme
-      }));
+    }).reverse();
+    return React__default.createElement(legends.BoxLegendSvg, Object.assign({
+      key: i
+    }, legend, {
+      containerWidth: innerWidth,
+      containerHeight: innerHeight,
+      data: legendData
     }));
-  });
+  }));
 };
-Stream.propTypes = StreamPropTypes;
-var enhancedStream = enhance$2(Stream);
-enhancedStream.displayName = 'Stream';
+var WrappedStream = core.withContainer(Stream);
+WrappedStream.defaultProps = StreamDefaultProps;
 
-function _extends$2() { _extends$2 = 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$2.apply(this, arguments); }
 var ResponsiveStream = function ResponsiveStream(props) {
@@ -744,3 +700,3 @@ return React__default.createElement(core.ResponsiveWrapper, null, function (_ref) {
         height = _ref.height;
-    return React__default.createElement(enhancedStream, _extends$2({
+    return React__default.createElement(WrappedStream, Object.assign({
       width: width,
@@ -753,4 +709,5 @@ height: height
 exports.ResponsiveStream = ResponsiveStream;
-exports.Stream = enhancedStream;
+exports.Stream = WrappedStream;
 exports.StreamDefaultProps = StreamDefaultProps;
 exports.StreamPropTypes = StreamPropTypes;
+//# sourceMappingURL=nivo-stream.cjs.js.map

dist/nivo-stream.umd.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('lodash/range'), require('lodash/sortBy'), require('@nivo/core'), require('@nivo/axes'), require('@nivo/legends'), require('prop-types'), require('@nivo/tooltip'), require('recompose/compose'), require('recompose/pure'), require('react-motion'), require('recompose/withState'), require('recompose/withHandlers'), require('recompose/withPropsOnChange'), require('@nivo/colors'), require('d3-shape'), require('d3-scale'), require('d3-format'), require('recompose/defaultProps')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', 'lodash/range', 'lodash/sortBy', '@nivo/core', '@nivo/axes', '@nivo/legends', 'prop-types', '@nivo/tooltip', 'recompose/compose', 'recompose/pure', 'react-motion', 'recompose/withState', 'recompose/withHandlers', 'recompose/withPropsOnChange', '@nivo/colors', 'd3-shape', 'd3-scale', 'd3-format', 'recompose/defaultProps'], factory) :
-    (global = global || self, factory(global.nivo = global.nivo || {}, global.React, global['lodash/range'], global['lodash/sortBy'], global.nivo, global.nivo, global.nivo, global.PropTypes, global.nivo, global.RecomposeCompose, global.RecomposePure, global.ReactMotion, global.RecomposeWithState, global.RecomposeWithHandlers, global.RecomposeWithPropsOnChange, global.nivo, global.d3, global.d3, global.d3, global.RecomposeDefaultProps));
-}(this, (function (exports, React, range, sortBy, core, axes, legends, PropTypes, tooltip, compose, pure, reactMotion, withState, withHandlers, withPropsOnChange, colors, d3Shape, d3Scale, d3Format, defaultProps) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@nivo/core'), require('@nivo/axes'), require('@nivo/legends'), require('react-spring'), require('@nivo/tooltip'), require('prop-types'), require('@nivo/colors'), require('d3-shape'), require('d3-scale')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@nivo/core', '@nivo/axes', '@nivo/legends', 'react-spring', '@nivo/tooltip', 'prop-types', '@nivo/colors', 'd3-shape', 'd3-scale'], factory) :
+    (global = global || self, factory(global.nivo = global.nivo || {}, global.React, global.nivo, global.nivo, global.nivo, global['react-spring'], global.nivo, global.PropTypes, global.nivo, global.d3, global.d3));
+}(this, (function (exports, React, core, axes, legends, reactSpring, tooltip, PropTypes, colors, d3Shape, d3Scale) { 'use strict';
 
     var React__default = 'default' in React ? React['default'] : React;
-    range = range && range.hasOwnProperty('default') ? range['default'] : range;
-    sortBy = sortBy && sortBy.hasOwnProperty('default') ? sortBy['default'] : sortBy;
-    PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes;
-    compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose;
-    pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure;
-    withState = withState && withState.hasOwnProperty('default') ? withState['default'] : withState;
-    withHandlers = withHandlers && withHandlers.hasOwnProperty('default') ? withHandlers['default'] : withHandlers;
-    withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange;
-    defaultProps = defaultProps && defaultProps.hasOwnProperty('default') ? defaultProps['default'] : defaultProps;
+    PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
 
-    function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(Object(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(target, key, source[key]); }); } return target; }
-    function _defineProperty(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 _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); }
+    var StreamLayer = function StreamLayer(_ref) {
+      var layer = _ref.layer,
+          fillOpacity = _ref.fillOpacity,
+          borderWidth = _ref.borderWidth,
+          getBorderColor = _ref.getBorderColor,
+          getTooltipLabel = _ref.getTooltipLabel,
+          isInteractive = _ref.isInteractive;
+      var _useTooltip = tooltip.useTooltip(),
+          showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
+          hideTooltip = _useTooltip.hideTooltip;
+      var handleMouseHover = React.useCallback(function (event) {
+        showTooltipFromEvent( React__default.createElement(tooltip.BasicTooltip, {
+          id: getTooltipLabel(layer),
+          enableChip: true,
+          color: layer.color
+        }), event, 'left');
+      }, [showTooltipFromEvent, getTooltipLabel, layer]);
+      var _useMotionConfig = core.useMotionConfig(),
+          animate = _useMotionConfig.animate,
+          springConfig = _useMotionConfig.config;
+      var animatedProps = reactSpring.useSpring({
+        path: layer.path,
+        color: layer.color,
+        config: springConfig,
+        immediate: !animate
+      });
+      return React__default.createElement(reactSpring.animated.path, {
+        d: animatedProps.path,
+        fill: layer.fill ? layer.fill : animatedProps.color,
+        fillOpacity: fillOpacity,
+        stroke: getBorderColor(layer),
+        strokeWidth: borderWidth,
+        onMouseMove: isInteractive ? handleMouseHover : undefined,
+        onMouseEnter: isInteractive ? handleMouseHover : undefined,
+        onMouseLeave: isInteractive ? hideTooltip : undefined
+      });
+    };
+    var StreamLayer$1 = React.memo(StreamLayer);
+
     var StreamLayers = function StreamLayers(_ref) {
@@ -26,83 +54,60 @@ var layers = _ref.layers,
           getBorderColor = _ref.getBorderColor,
-          theme = _ref.theme,
-          showTooltip = _ref.showTooltip,
-          hideTooltip = _ref.hideTooltip,
           getTooltipLabel = _ref.getTooltipLabel,
-          animate = _ref.animate,
-          motionStiffness = _ref.motionStiffness,
-          motionDamping = _ref.motionDamping;
-      if (animate !== true) {
-        return React__default.createElement("g", null, layers.map(function (layer, i) {
-          var path = layer.path,
-              color = layer.color;
-          var handleTooltip = function handleTooltip(e) {
-            return showTooltip(React__default.createElement(tooltip.BasicTooltip, {
-              id: getTooltipLabel(layer),
-              enableChip: true,
-              color: color,
-              theme: theme
-            }), e);
-          };
-          return React__default.createElement("path", {
-            key: i,
-            onMouseMove: handleTooltip,
-            onMouseEnter: handleTooltip,
-            onMouseLeave: hideTooltip,
-            d: path,
-            fill: layer.fill ? layer.fill : layer.color,
-            fillOpacity: fillOpacity,
-            stroke: getBorderColor(layer),
-            strokeWidth: borderWidth
-          });
-        }));
-      }
-      var springConfig = {
-        stiffness: motionStiffness,
-        damping: motionDamping
-      };
+          isInteractive = _ref.isInteractive;
       return React__default.createElement("g", null, layers.map(function (layer, i) {
-        var path = layer.path,
-            color = layer.color;
-        var handleTooltip = function handleTooltip(e) {
-          return showTooltip(React__default.createElement(tooltip.BasicTooltip, {
-            id: getTooltipLabel(layer),
-            enableChip: true,
-            color: color,
-            theme: theme
-          }), e);
-        };
-        return React__default.createElement(core.SmartMotion, {
+        return React__default.createElement(StreamLayer$1, {
           key: i,
-          style: function style(spring) {
-            return {
-              d: spring(path, springConfig),
-              fill: spring(color, springConfig),
-              fillOpacity: spring(fillOpacity, springConfig)
-            };
-          }
-        }, function (style) {
-          return React__default.createElement("path", _extends({
-            onMouseMove: handleTooltip,
-            onMouseEnter: handleTooltip,
-            onMouseLeave: hideTooltip
-          }, style, {
-            fill: layer.fill ? layer.fill : style.fill,
-            stroke: getBorderColor(layer),
-            strokeWidth: borderWidth
-          }));
+          layer: layer,
+          getBorderColor: getBorderColor,
+          borderWidth: borderWidth,
+          fillOpacity: fillOpacity,
+          getTooltipLabel: getTooltipLabel,
+          isInteractive: isInteractive
         });
       }));
     };
-    StreamLayers.propTypes = _objectSpread({
-      fillOpacity: PropTypes.number.isRequired,
-      borderWidth: PropTypes.number.isRequired,
-      getBorderColor: PropTypes.func.isRequired,
-      theme: PropTypes.object.isRequired,
-      showTooltip: PropTypes.func.isRequired,
-      hideTooltip: PropTypes.func.isRequired,
-      getTooltipLabel: PropTypes.func.isRequired
-    }, core.motionPropTypes);
 
-    function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(Object(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$1(target, key, source[key]); }); } return target; }
-    function _defineProperty$1(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 _defineProperty(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 ownKeys(object, enumerableOnly) {
+      var keys = Object.keys(object);
+      if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function (sym) {
+          return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+      }
+      return keys;
+    }
+    function _objectSpread2(target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i] != null ? arguments[i] : {};
+        if (i % 2) {
+          ownKeys(Object(source), true).forEach(function (key) {
+            _defineProperty(target, key, source[key]);
+          });
+        } else if (Object.getOwnPropertyDescriptors) {
+          Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+        } else {
+          ownKeys(Object(source)).forEach(function (key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+          });
+        }
+      }
+      return target;
+    }
+
     var getDotY = function getDotY(datum, position) {
@@ -121,3 +126,3 @@ var y = datum.y2;
           data = _ref.data,
-          renderDot = _ref.renderDot,
+          dotComponent = _ref.dotComponent,
           position = _ref.position,
@@ -127,88 +132,105 @@ getSize = _ref.getSize,
           getBorderWidth = _ref.getBorderWidth,
-          getBorderColor = _ref.getBorderColor,
-          animate = _ref.animate,
-          motionStiffness = _ref.motionStiffness,
-          motionDamping = _ref.motionDamping;
-      if (animate !== true) {
-        return data.map(function (d, i) {
-          var datum = _objectSpread$1({}, d, {
-            key: id,
-            color: color
-          });
-          return React__default.createElement(React.Fragment, {
-            key: i
-          }, renderDot({
-            data: datum,
-            x: datum.x,
-            y: getDotY(datum, position),
-            size: getSize(datum),
-            color: getColor(datum),
-            borderWidth: getBorderWidth(datum)
-          }));
+          getBorderColor = _ref.getBorderColor;
+      return data.map(function (d, i) {
+        var datum = _objectSpread2(_objectSpread2({}, d), {}, {
+          key: id,
+          color: color
         });
-      }
-      var springConfig = {
-        stiffness: motionStiffness,
-        damping: motionDamping
-      };
-      return React__default.createElement(reactMotion.TransitionMotion, {
-        styles: data.map(function (d, i) {
-          var datum = _objectSpread$1({}, d, {
-            key: id,
-            color: color
-          });
-          return {
-            key: "".concat(i),
-            data: datum,
-            style: {
-              x: reactMotion.spring(datum.x, springConfig),
-              y: reactMotion.spring(getDotY(datum, position), springConfig),
-              size: reactMotion.spring(getSize(datum), springConfig),
-              borderWidth: reactMotion.spring(getBorderWidth(datum), springConfig)
-            }
-          };
-        })
-      }, function (interpolatedStyles) {
-        return React__default.createElement(React.Fragment, null, interpolatedStyles.map(function (_ref2) {
-          var key = _ref2.key,
-              style = _ref2.style,
-              datum = _ref2.data;
-          return React__default.createElement(React.Fragment, {
-            key: key
-          }, renderDot({
-            data: datum,
-            x: style.x,
-            y: style.y,
-            size: style.size,
-            color: getColor(datum),
-            borderWidth: style.borderWidth,
-            borderColor: getBorderColor(datum)
-          }));
-        }));
+        return React__default.createElement(dotComponent, {
+          key: i,
+          datum: datum,
+          x: datum.x,
+          y: getDotY(datum, position),
+          size: getSize(datum),
+          color: getColor(datum),
+          borderWidth: getBorderWidth(datum),
+          borderColor: getBorderColor(datum)
+        });
       });
     };
-    StreamDots.propTypes = _objectSpread$1({
-      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-      color: PropTypes.string.isRequired,
-      data: PropTypes.arrayOf(PropTypes.shape({
-        x: PropTypes.number.isRequired,
-        y1: PropTypes.number.isRequired,
-        y2: PropTypes.number.isRequired
-      })).isRequired,
-      renderDot: PropTypes.func.isRequired,
-      position: PropTypes.oneOf(['start', 'center', 'end']).isRequired,
-      getSize: PropTypes.func.isRequired,
-      getColor: PropTypes.func.isRequired,
-      getBorderWidth: PropTypes.func.isRequired,
-      getBorderColor: PropTypes.func.isRequired
-    }, core.motionPropTypes);
-    var enhance = compose(pure);
-    var StreamDots$1 = enhance(StreamDots);
+    var StreamDots$1 = React.memo(StreamDots);
 
+    function _arrayWithHoles(arr) {
+      if (Array.isArray(arr)) return arr;
+    }
+
+    function _iterableToArrayLimit(arr, i) {
+      if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+      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 _arrayLikeToArray(arr, len) {
+      if (len == null || len > arr.length) len = arr.length;
+      for (var i = 0, arr2 = new Array(len); i < len; i++) {
+        arr2[i] = arr[i];
+      }
+      return arr2;
+    }
+
+    function _unsupportedIterableToArray(o, minLen) {
+      if (!o) return;
+      if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+      var n = Object.prototype.toString.call(o).slice(8, -1);
+      if (n === "Object" && o.constructor) n = o.constructor.name;
+      if (n === "Map" || n === "Set") return Array.from(n);
+      if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+    }
+
+    function _nonIterableRest() {
+      throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+    }
+
+    function _slicedToArray(arr, i) {
+      return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+    }
+
     var StreamSlicesItem = function StreamSlicesItem(_ref) {
       var slice = _ref.slice,
           height = _ref.height,
-          showTooltip = _ref.showTooltip,
-          hideTooltip = _ref.hideTooltip,
-          isHover = _ref.isHover;
+          getTooltipLabel = _ref.getTooltipLabel,
+          getTooltipValue = _ref.getTooltipValue;
+      var _useState = React.useState(false),
+          _useState2 = _slicedToArray(_useState, 2),
+          isHover = _useState2[0],
+          setIsHover = _useState2[1];
+      var _useTooltip = tooltip.useTooltip(),
+          showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
+          hideTooltip = _useTooltip.hideTooltip;
+      var rows = React.useMemo(function () {
+        return slice.stack.map(function (p) {
+          return [React__default.createElement(tooltip.Chip, {
+            key: p.id,
+            color: p.color
+          }), getTooltipLabel(p), getTooltipValue(p.value)];
+        });
+      }, [slice, getTooltipLabel, getTooltipValue]);
+      var handleMouseHover = React.useCallback(function (event) {
+        setIsHover(true);
+        showTooltipFromEvent( React__default.createElement(tooltip.TableTooltip, {
+          rows: rows
+        }), event, 'left');
+      }, [setIsHover, showTooltipFromEvent, rows]);
+      var handleMouseLeave = React.useCallback(function () {
+        setIsHover(false);
+        hideTooltip();
+      }, [setIsHover, hideTooltip]);
       return React__default.createElement("g", {
@@ -230,53 +252,8 @@ transform: "translate(".concat(slice.x, ", 0)")
         fillOpacity: 0,
-        onMouseEnter: showTooltip,
-        onMouseMove: showTooltip,
-        onMouseLeave: hideTooltip
+        onMouseEnter: handleMouseHover,
+        onMouseMove: handleMouseHover,
+        onMouseLeave: handleMouseLeave
       }));
     };
-    StreamSlicesItem.propTypes = {
-      slice: PropTypes.object.isRequired,
-      height: PropTypes.number.isRequired,
-      showTooltip: PropTypes.func.isRequired,
-      hideTooltip: PropTypes.func.isRequired,
-      getTooltipLabel: PropTypes.func.isRequired,
-      getTooltipValue: PropTypes.func.isRequired,
-      isHover: PropTypes.bool.isRequired,
-      theme: PropTypes.object.isRequired
-    };
-    var enhance$1 = compose(withState('isHover', 'setIsHover', false), withPropsOnChange(['slice', 'theme', 'getTooltipLabel', 'getTooltipValue'], function (_ref2) {
-      var slice = _ref2.slice,
-          theme = _ref2.theme,
-          getTooltipLabel = _ref2.getTooltipLabel,
-          getTooltipValue = _ref2.getTooltipValue;
-      return {
-        tooltip: React__default.createElement(tooltip.TableTooltip, {
-          theme: theme,
-          rows: slice.stack.map(function (p) {
-            return [React__default.createElement(tooltip.Chip, {
-              key: p.id,
-              color: p.color
-            }), getTooltipLabel(p), getTooltipValue(p)];
-          })
-        })
-      };
-    }), withHandlers({
-      showTooltip: function showTooltip(_ref3) {
-        var _showTooltip = _ref3.showTooltip,
-            setIsHover = _ref3.setIsHover,
-            tooltip = _ref3.tooltip;
-        return function (e) {
-          setIsHover(true);
-          _showTooltip(tooltip, e);
-        };
-      },
-      hideTooltip: function hideTooltip(_ref4) {
-        var _hideTooltip = _ref4.hideTooltip,
-            setIsHover = _ref4.setIsHover;
-        return function () {
-          setIsHover(false);
-          _hideTooltip();
-        };
-      }
-    }), pure);
-    var StreamSlicesItem$1 = enhance$1(StreamSlicesItem);
+    var StreamSlicesItem$1 = React.memo(StreamSlicesItem);
 
@@ -286,5 +263,2 @@ var StreamSlices = function StreamSlices(_ref) {
           height = _ref.height,
-          showTooltip = _ref.showTooltip,
-          hideTooltip = _ref.hideTooltip,
-          theme = _ref.theme,
           getTooltipLabel = _ref.getTooltipLabel,
@@ -297,5 +271,2 @@ getTooltipValue = _ref.getTooltipValue;
           height: height,
-          showTooltip: showTooltip,
-          hideTooltip: hideTooltip,
-          theme: theme,
           getTooltipLabel: getTooltipLabel,
@@ -306,20 +277,3 @@ getTooltipValue: getTooltipValue
     };
-    StreamSlices.propTypes = {
-      slices: PropTypes.arrayOf(PropTypes.shape({
-        index: PropTypes.number.isRequired,
-        x: PropTypes.number.isRequired,
-        stack: PropTypes.arrayOf(PropTypes.shape({
-          id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-          value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-          color: PropTypes.string.isRequired
-        })).isRequired
-      })).isRequired,
-      height: PropTypes.number.isRequired,
-      showTooltip: PropTypes.func.isRequired,
-      hideTooltip: PropTypes.func.isRequired,
-      getTooltipLabel: PropTypes.func.isRequired,
-      getTooltipValue: PropTypes.func.isRequired,
-      theme: PropTypes.object.isRequired
-    };
-    var StreamSlices$1 = pure(StreamSlices);
+    var StreamSlices$1 = React.memo(StreamSlices);
 
@@ -333,7 +287,18 @@ var StreamDotsItem = function StreamDotsItem(_ref) {
           borderColor = _ref.borderColor;
-      return React__default.createElement("circle", {
-        cx: x,
-        cy: y,
-        r: size * 0.5,
-        fill: color,
+      var _useMotionConfig = core.useMotionConfig(),
+          animate = _useMotionConfig.animate,
+          springConfig = _useMotionConfig.config;
+      var animatedProps = reactSpring.useSpring({
+        x: x,
+        y: y,
+        radius: size * 0.5,
+        color: color,
+        config: springConfig,
+        immediate: !animate
+      });
+      return React__default.createElement(reactSpring.animated.circle, {
+        cx: animatedProps.x,
+        cy: animatedProps.y,
+        r: animatedProps.radius,
+        fill: animatedProps.color,
         strokeWidth: borderWidth,
@@ -343,10 +308,3 @@ stroke: borderColor
     };
-    StreamDotsItem.propTypes = {
-      x: PropTypes.number.isRequired,
-      y: PropTypes.number.isRequired,
-      size: PropTypes.number.isRequired,
-      color: PropTypes.string.isRequired,
-      borderWidth: PropTypes.number.isRequired,
-      borderColor: PropTypes.string.isRequired
-    };
+    var StreamDotsItem$1 = React.memo(StreamDotsItem);
 
@@ -356,9 +314,5 @@ var StreamPropTypes = {
       keys: PropTypes.array.isRequired,
-      stack: PropTypes.func.isRequired,
-      xScale: PropTypes.func.isRequired,
-      yScale: PropTypes.func.isRequired,
       order: core.stackOrderPropType.isRequired,
       offsetType: core.stackOffsetPropType.isRequired,
       curve: core.areaCurvePropType.isRequired,
-      areaGenerator: PropTypes.func.isRequired,
       axisTop: PropTypes.object,
@@ -372,3 +326,2 @@ axisRight: PropTypes.object,
       fillOpacity: PropTypes.number.isRequired,
-      getColor: PropTypes.func.isRequired,
       defs: PropTypes.arrayOf(PropTypes.shape({
@@ -383,19 +336,15 @@ id: PropTypes.string.isRequired
       borderColor: colors.inheritedColorPropType.isRequired,
-      getBorderColor: PropTypes.func.isRequired,
       enableDots: PropTypes.bool.isRequired,
-      renderDot: PropTypes.func.isRequired,
+      dotComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
       dotPosition: PropTypes.oneOf(['start', 'center', 'end']).isRequired,
       dotSize: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
-      getDotSize: PropTypes.func.isRequired,
       dotColor: colors.inheritedColorPropType.isRequired,
       dotBorderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
-      getDotBorderWidth: PropTypes.func.isRequired,
       dotBorderColor: colors.inheritedColorPropType.isRequired,
       isInteractive: PropTypes.bool,
       tooltipLabel: PropTypes.func,
-      getTooltipLabel: PropTypes.func.isRequired,
       tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-      getTooltipValue: PropTypes.func.isRequired,
       enableStackTooltip: PropTypes.bool.isRequired,
-      legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired
+      legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired,
+      role: PropTypes.string.isRequired
     };
@@ -422,3 +371,3 @@ var StreamDefaultProps = {
       dotPosition: 'center',
-      renderDot: StreamDotsItem,
+      dotComponent: StreamDotsItem$1,
       dotSize: 6,
@@ -434,9 +383,24 @@ dotColor: {
       enableStackTooltip: true,
-      legends: []
+      legends: [],
+      role: 'img',
+      animate: true,
+      motionConfig: 'gentle'
     };
 
-    function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
-    function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
-    function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
-    function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+    function _arrayWithoutHoles(arr) {
+      if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+    }
+
+    function _iterableToArray(iter) {
+      if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+    }
+
+    function _nonIterableSpread() {
+      throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+    }
+
+    function _toConsumableArray(arr) {
+      return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+    }
+
     var stackMin = function stackMin(layers) {
@@ -456,40 +420,34 @@ return Math.min.apply(Math, _toConsumableArray(layers.reduce(function (acc, layer) {
     };
-    var enhance$2 = (function (Component) {
-      return compose(defaultProps(StreamDefaultProps), core.withTheme(), core.withCurve(), core.withDimensions(), core.withMotion(), withPropsOnChange(['curveInterpolator'], function (_ref) {
-        var curveInterpolator = _ref.curveInterpolator;
-        return {
-          areaGenerator: d3Shape.area().x(function (_ref2) {
-            var x = _ref2.x;
-            return x;
-          }).y0(function (_ref3) {
-            var y1 = _ref3.y1;
-            return y1;
-          }).y1(function (_ref4) {
-            var y2 = _ref4.y2;
-            return y2;
-          }).curve(curveInterpolator)
-        };
-      }), withPropsOnChange(['colors'], function (_ref5) {
-        var colors$1 = _ref5.colors;
-        return {
-          getColor: colors.getOrdinalColorScale(colors$1, 'index')
-        };
-      }), withPropsOnChange(['borderColor', 'theme'], function (_ref6) {
-        var borderColor = _ref6.borderColor,
-            theme = _ref6.theme;
-        return {
-          getBorderColor: colors.getInheritedColorGenerator(borderColor, theme)
-        };
-      }), withPropsOnChange(['keys', 'offsetType', 'order'], function (_ref7) {
-        var keys = _ref7.keys,
-            offsetType = _ref7.offsetType,
-            order = _ref7.order;
-        return {
-          stack: d3Shape.stack().keys(keys).offset(core.stackOffsetFromProp(offsetType)).order(core.stackOrderFromProp(order))
-        };
-      }), withPropsOnChange(['stack', 'data', 'width', 'height'], function (_ref8) {
-        var stack = _ref8.stack,
-            data = _ref8.data,
-            width = _ref8.width,
-            height = _ref8.height;
+    var useStream = function useStream(_ref) {
+      var width = _ref.width,
+          height = _ref.height,
+          data = _ref.data,
+          keys = _ref.keys,
+          offsetType = _ref.offsetType,
+          order = _ref.order,
+          curve = _ref.curve,
+          colors$1 = _ref.colors,
+          borderColor = _ref.borderColor,
+          dotSize = _ref.dotSize,
+          dotColor = _ref.dotColor,
+          dotBorderWidth = _ref.dotBorderWidth,
+          dotBorderColor = _ref.dotBorderColor,
+          tooltipLabel = _ref.tooltipLabel,
+          tooltipFormat = _ref.tooltipFormat;
+      var areaGenerator = React.useMemo(function () {
+        return d3Shape.area().x(function (_ref2) {
+          var x = _ref2.x;
+          return x;
+        }).y0(function (_ref3) {
+          var y1 = _ref3.y1;
+          return y1;
+        }).y1(function (_ref4) {
+          var y2 = _ref4.y2;
+          return y2;
+        }).curve(core.curveFromProp(curve));
+      }, [curve]);
+      var stack = React.useMemo(function () {
+        return d3Shape.stack().keys(keys).offset(core.stackOffsetFromProp(offsetType)).order(core.stackOrderFromProp(order));
+      }, [keys, offsetType, order]);
+      var _useMemo = React.useMemo(function () {
         var layers = stack(data);
@@ -503,75 +461,98 @@ layers.forEach(function (layer) {
         var maxValue = stackMax(layers);
-        return {
-          layers: layers,
-          xScale: d3Scale.scalePoint().domain(range(data.length)).range([0, width]),
-          yScale: d3Scale.scaleLinear().domain([minValue, maxValue]).range([height, 0])
+        return [layers, d3Scale.scalePoint().domain(Array.from({
+          length: data.length
+        }, function (_, i) {
+          return i;
+        })).range([0, width]), d3Scale.scaleLinear().domain([minValue, maxValue]).range([height, 0])];
+      }, [stack, data, width, height]),
+          _useMemo2 = _slicedToArray(_useMemo, 3),
+          layers = _useMemo2[0],
+          xScale = _useMemo2[1],
+          yScale = _useMemo2[2];
+      var theme = core.useTheme();
+      var getColor = colors.useOrdinalColorScale(colors$1, 'index');
+      var getBorderColor = colors.useInheritedColor(borderColor, theme);
+      var getDotSize = React.useMemo(function () {
+        return typeof dotSize === 'function' ? dotSize : function () {
+          return dotSize;
         };
-      }), withPropsOnChange(['dotSize'], function (_ref9) {
-        var dotSize = _ref9.dotSize;
-        return {
-          getDotSize: typeof dotSize === 'function' ? dotSize : function () {
-            return dotSize;
-          }
+      }, [dotSize]);
+      var getDotColor = colors.useInheritedColor(dotColor, theme);
+      var getDotBorderWidth = React.useMemo(function () {
+        return typeof dotBorderWidth === 'function' ? dotBorderWidth : function () {
+          return dotBorderWidth;
         };
-      }), withPropsOnChange(['dotColor', 'theme'], function (_ref10) {
-        var dotColor = _ref10.dotColor,
-            theme = _ref10.theme;
-        return {
-          getDotColor: colors.getInheritedColorGenerator(dotColor, theme)
-        };
-      }), withPropsOnChange(['dotBorderWidth'], function (_ref11) {
-        var dotBorderWidth = _ref11.dotBorderWidth;
-        return {
-          getDotBorderWidth: typeof dotBorderWidth === 'function' ? dotBorderWidth : function () {
-            return dotBorderWidth;
-          }
-        };
-      }), withPropsOnChange(['dotBorderColor', 'theme'], function (_ref12) {
-        var dotBorderColor = _ref12.dotBorderColor,
-            theme = _ref12.theme;
-        return {
-          getDotBorderColor: colors.getInheritedColorGenerator(dotBorderColor, theme)
-        };
-      }), withPropsOnChange(['tooltipLabel', 'tooltipFormat'], function (_ref13) {
-        var tooltipLabel = _ref13.tooltipLabel,
-            tooltipFormat = _ref13.tooltipFormat;
-        var getTooltipLabel = function getTooltipLabel(d) {
+      }, [dotBorderWidth]);
+      var getDotBorderColor = colors.useInheritedColor(dotBorderColor, theme);
+      var enhancedLayers = React.useMemo(function () {
+        return layers.map(function (points, layerIndex) {
+          var layer = points.map(function (point, i) {
+            return {
+              index: i,
+              x: xScale(i),
+              value: point.value,
+              y1: yScale(point[0]),
+              y2: yScale(point[1])
+            };
+          });
+          return {
+            id: keys[layerIndex],
+            layer: layer,
+            path: areaGenerator(layer),
+            color: getColor({
+              index: layerIndex
+            })
+          };
+        });
+      }, [layers, keys, areaGenerator, getColor]);
+      var slices = React.useMemo(function () {
+        return Array.from({
+          length: data.length
+        }, function (_, i) {
+          var sliceStack = enhancedLayers.map(function (layer) {
+            return _objectSpread2({
+              id: layer.id,
+              color: layer.color
+            }, layer.layer[i]);
+          }).sort(function (a, b) {
+            return a.y2 - b.y2;
+          });
+          return {
+            index: i,
+            x: enhancedLayers[0].layer[i].x,
+            stack: sliceStack
+          };
+        });
+      }, [data.length, enhancedLayers]);
+      var getTooltipLabel = React.useMemo(function () {
+        if (typeof tooltipLabel === 'function') return tooltipLabel;
+        return function (d) {
           return d.id;
         };
-        if (typeof tooltipLabel === 'function') {
-          getTooltipLabel = tooltipLabel;
-        }
-        var getTooltipValue = function getTooltipValue(d) {
-          return d.value;
-        };
-        if (typeof tooltipFormat === 'function') {
-          getTooltipValue = tooltipFormat;
-        } else if (typeof tooltipFormat === 'string' || tooltipFormat instanceof String) {
-          var formatter = d3Format.format(tooltipFormat);
-          getTooltipValue = function getTooltipValue(d) {
-            return formatter(d.value);
-          };
-        }
-        return {
-          getTooltipValue: getTooltipValue,
-          getTooltipLabel: getTooltipLabel
-        };
-      }), pure)(Component);
-    });
+      }, [tooltipLabel]);
+      var getTooltipValue = core.useValueFormatter(tooltipFormat);
+      return {
+        xScale: xScale,
+        yScale: yScale,
+        layers: enhancedLayers,
+        slices: slices,
+        getBorderColor: getBorderColor,
+        getDotSize: getDotSize,
+        getDotColor: getDotColor,
+        getDotBorderWidth: getDotBorderWidth,
+        getDotBorderColor: getDotBorderColor,
+        getTooltipLabel: getTooltipLabel,
+        getTooltipValue: getTooltipValue
+      };
+    };
 
-    function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
-    function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(Object(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$2(target, key, source[key]); }); } return target; }
-    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; }
     var Stream = function Stream(_ref) {
       var data = _ref.data,
           keys = _ref.keys,
-          xScale = _ref.xScale,
-          yScale = _ref.yScale,
-          layers = _ref.layers,
-          areaGenerator = _ref.areaGenerator,
-          margin = _ref.margin,
+          offsetType = _ref.offsetType,
+          order = _ref.order,
+          curve = _ref.curve,
           width = _ref.width,
           height = _ref.height,
-          outerWidth = _ref.outerWidth,
-          outerHeight = _ref.outerHeight,
+          partialMargin = _ref.margin,
           axisTop = _ref.axisTop,
@@ -583,7 +564,6 @@ axisRight = _ref.axisRight,
           enableGridY = _ref.enableGridY,
-          theme = _ref.theme,
-          getColor = _ref.getColor,
+          colors = _ref.colors,
           fillOpacity = _ref.fillOpacity,
           borderWidth = _ref.borderWidth,
-          getBorderColor = _ref.getBorderColor,
+          borderColor = _ref.borderColor,
           defs = _ref.defs,
@@ -593,137 +573,114 @@ fill = _ref.fill,
           dotPosition = _ref.dotPosition,
-          renderDot = _ref.renderDot,
-          getDotSize = _ref.getDotSize,
-          getDotColor = _ref.getDotColor,
-          getDotBorderWidth = _ref.getDotBorderWidth,
-          getDotBorderColor = _ref.getDotBorderColor,
-          animate = _ref.animate,
-          motionStiffness = _ref.motionStiffness,
-          motionDamping = _ref.motionDamping,
+          dotComponent = _ref.dotComponent,
+          dotSize = _ref.dotSize,
+          dotColor = _ref.dotColor,
+          dotBorderWidth = _ref.dotBorderWidth,
+          dotBorderColor = _ref.dotBorderColor,
           isInteractive = _ref.isInteractive,
-          getTooltipValue = _ref.getTooltipValue,
-          getTooltipLabel = _ref.getTooltipLabel,
+          tooltipLabel = _ref.tooltipLabel,
+          tooltipFormat = _ref.tooltipFormat,
           enableStackTooltip = _ref.enableStackTooltip,
-          legends$1 = _ref.legends;
-      var enhancedLayers = layers.map(function (points, layerIndex) {
-        var layer = points.map(function (point, i) {
+          legends$1 = _ref.legends,
+          role = _ref.role;
+      var _useDimensions = core.useDimensions(width, height, partialMargin),
+          margin = _useDimensions.margin,
+          innerWidth = _useDimensions.innerWidth,
+          innerHeight = _useDimensions.innerHeight,
+          outerWidth = _useDimensions.outerWidth,
+          outerHeight = _useDimensions.outerHeight;
+      var _useStream = useStream({
+        width: innerWidth,
+        height: innerHeight,
+        data: data,
+        keys: keys,
+        offsetType: offsetType,
+        order: order,
+        curve: curve,
+        colors: colors,
+        borderColor: borderColor,
+        dotSize: dotSize,
+        dotColor: dotColor,
+        dotBorderWidth: dotBorderWidth,
+        dotBorderColor: dotBorderColor,
+        tooltipLabel: tooltipLabel,
+        tooltipFormat: tooltipFormat
+      }),
+          xScale = _useStream.xScale,
+          yScale = _useStream.yScale,
+          layers = _useStream.layers,
+          slices = _useStream.slices,
+          getBorderColor = _useStream.getBorderColor,
+          getDotSize = _useStream.getDotSize,
+          getDotColor = _useStream.getDotColor,
+          getDotBorderWidth = _useStream.getDotBorderWidth,
+          getDotBorderColor = _useStream.getDotBorderColor,
+          getTooltipLabel = _useStream.getTooltipLabel,
+          getTooltipValue = _useStream.getTooltipValue;
+      var boundDefs = core.bindDefs(defs, layers, fill);
+      return React__default.createElement(core.SvgWrapper, {
+        width: outerWidth,
+        height: outerHeight,
+        margin: margin,
+        defs: boundDefs,
+        role: role
+      }, React__default.createElement(axes.Grid, {
+        width: innerWidth,
+        height: innerHeight,
+        xScale: enableGridX ? xScale : null,
+        yScale: enableGridY ? yScale : null
+      }), React__default.createElement(StreamLayers, {
+        layers: layers,
+        fillOpacity: fillOpacity,
+        borderWidth: borderWidth,
+        getBorderColor: getBorderColor,
+        getTooltipLabel: getTooltipLabel,
+        isInteractive: isInteractive
+      }), React__default.createElement(axes.Axes, {
+        xScale: xScale,
+        yScale: yScale,
+        width: innerWidth,
+        height: innerHeight,
+        top: axisTop,
+        right: axisRight,
+        bottom: axisBottom,
+        left: axisLeft
+      }), enableDots && layers.map(function (layer) {
+        return React__default.createElement(StreamDots$1, {
+          key: layer.id,
+          id: layer.id,
+          color: layer.color,
+          data: layer.layer,
+          dotComponent: dotComponent,
+          position: dotPosition,
+          getSize: getDotSize,
+          getColor: getDotColor,
+          getBorderWidth: getDotBorderWidth,
+          getBorderColor: getDotBorderColor
+        });
+      }), isInteractive && enableStackTooltip && React__default.createElement(StreamSlices$1, {
+        slices: slices,
+        height: innerHeight,
+        getTooltipValue: getTooltipValue,
+        getTooltipLabel: getTooltipLabel
+      }), legends$1.map(function (legend, i) {
+        var legendData = layers.map(function (l) {
           return {
-            index: i,
-            x: xScale(i),
-            value: point.value,
-            y1: yScale(point[0]),
-            y2: yScale(point[1])
+            id: l.id,
+            label: l.id,
+            color: l.color,
+            fill: l.fill
           };
-        });
-        return {
-          id: keys[layerIndex],
-          layer: layer,
-          path: areaGenerator(layer),
-          color: getColor({
-            index: layerIndex
-          })
-        };
-      });
-      var slices = range(data.length).map(function (i) {
-        return {
-          index: i,
-          x: enhancedLayers[0].layer[i].x,
-          stack: sortBy(enhancedLayers.map(function (layer) {
-            return _objectSpread$2({
-              id: layer.id,
-              color: layer.color
-            }, layer.layer[i]);
-          }), 'y2')
-        };
-      });
-      var boundDefs = core.bindDefs(defs, enhancedLayers, fill);
-      return React__default.createElement(core.Container, {
-        isInteractive: isInteractive,
-        theme: theme,
-        animate: animate,
-        motionDamping: motionDamping,
-        motionStiffness: motionStiffness
-      }, function (_ref2) {
-        var showTooltip = _ref2.showTooltip,
-            hideTooltip = _ref2.hideTooltip;
-        return React__default.createElement(core.SvgWrapper, {
-          width: outerWidth,
-          height: outerHeight,
-          margin: margin,
-          defs: boundDefs,
-          theme: theme
-        }, React__default.createElement(axes.Grid, {
-          width: width,
-          height: height,
-          xScale: enableGridX ? xScale : null,
-          yScale: enableGridY ? yScale : null
-        }), React__default.createElement(StreamLayers, {
-          layers: enhancedLayers,
-          fillOpacity: fillOpacity,
-          borderWidth: borderWidth,
-          getBorderColor: getBorderColor,
-          showTooltip: showTooltip,
-          hideTooltip: hideTooltip,
-          getTooltipLabel: getTooltipLabel,
-          theme: theme,
-          animate: animate,
-          motionDamping: motionDamping,
-          motionStiffness: motionStiffness
-        }), React__default.createElement(axes.Axes, {
-          xScale: xScale,
-          yScale: yScale,
-          width: width,
-          height: height,
-          top: axisTop,
-          right: axisRight,
-          bottom: axisBottom,
-          left: axisLeft
-        }), enableDots && enhancedLayers.map(function (layer) {
-          return React__default.createElement(StreamDots$1, {
-            key: layer.id,
-            id: layer.id,
-            color: layer.color,
-            data: layer.layer,
-            renderDot: renderDot,
-            position: dotPosition,
-            getSize: getDotSize,
-            getColor: getDotColor,
-            getBorderWidth: getDotBorderWidth,
-            getBorderColor: getDotBorderColor,
-            animate: animate,
-            motionDamping: motionDamping,
-            motionStiffness: motionStiffness
-          });
-        }), isInteractive && enableStackTooltip && React__default.createElement(StreamSlices$1, {
-          slices: slices,
-          height: height,
-          showTooltip: showTooltip,
-          hideTooltip: hideTooltip,
-          theme: theme,
-          getTooltipValue: getTooltipValue,
-          getTooltipLabel: getTooltipLabel
-        }), legends$1.map(function (legend, i) {
-          var legendData = enhancedLayers.map(function (l) {
-            return {
-              id: l.id,
-              label: l.id,
-              color: l.color,
-              fill: l.fill
-            };
-          }).reverse();
-          return React__default.createElement(legends.BoxLegendSvg, _extends$1({
-            key: i
-          }, legend, {
-            containerWidth: width,
-            containerHeight: height,
-            data: legendData,
-            theme: theme
-          }));
+        }).reverse();
+        return React__default.createElement(legends.BoxLegendSvg, Object.assign({
+          key: i
+        }, legend, {
+          containerWidth: innerWidth,
+          containerHeight: innerHeight,
+          data: legendData
         }));
-      });
+      }));
     };
-    Stream.propTypes = StreamPropTypes;
-    var enhancedStream = enhance$2(Stream);
-    enhancedStream.displayName = 'Stream';
+    var WrappedStream = core.withContainer(Stream);
+    WrappedStream.defaultProps = StreamDefaultProps;
 
-    function _extends$2() { _extends$2 = 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$2.apply(this, arguments); }
     var ResponsiveStream = function ResponsiveStream(props) {
@@ -733,3 +690,3 @@ return React__default.createElement(core.ResponsiveWrapper, null, function (_ref) {
             height = _ref.height;
-        return React__default.createElement(enhancedStream, _extends$2({
+        return React__default.createElement(WrappedStream, Object.assign({
           width: width,
@@ -742,3 +699,3 @@ height: height
     exports.ResponsiveStream = ResponsiveStream;
-    exports.Stream = enhancedStream;
+    exports.Stream = WrappedStream;
     exports.StreamDefaultProps = StreamDefaultProps;
@@ -750,1 +707,2 @@ exports.StreamPropTypes = StreamPropTypes;
 })));
+//# sourceMappingURL=nivo-stream.umd.js.map

index.d.ts

@@ -31,9 +31,7 @@ /*
         data: T[]
-    ) => Array<
-        Array<{
-            0: number
-            1: number
-            data: T
-        }>
-    >
+    ) => {
+        0: number
+        1: number
+        data: T
+    }[][]
 
@@ -90,2 +88,3 @@ export interface Datum {
         theme: Theme
+        role: string
 
@@ -92,0 +91,0 @@ legends: LegendProps[]

package.json

 {
   "name": "@nivo/stream",
-  "version": "0.62.0",
+  "version": "0.63.0",
   "license": "MIT",
@@ -18,3 +18,3 @@ "author": {
   "main": "./dist/nivo-stream.cjs.js",
-  "module": "./dist/nivo-stream.esm.js",
+  "module": "./dist/nivo-stream.es.js",
   "files": [
@@ -27,15 +27,13 @@ "README.md",
   "dependencies": {
-    "@nivo/axes": "0.62.0",
-    "@nivo/colors": "0.62.0",
-    "@nivo/core": "0.62.0",
-    "@nivo/legends": "0.62.0",
-    "@nivo/scales": "0.62.0",
-    "@nivo/tooltip": "0.62.0",
-    "d3-format": "^1.3.2",
+    "@nivo/axes": "0.63.0",
+    "@nivo/colors": "0.63.0",
+    "@nivo/legends": "0.63.0",
+    "@nivo/scales": "0.63.0",
+    "@nivo/tooltip": "0.63.0",
     "d3-scale": "^3.0.0",
     "d3-shape": "^1.3.5",
-    "lodash": "^4.17.11",
-    "recompose": "^0.30.0"
+    "react-spring": "^8.0.27"
   },
   "peerDependencies": {
+    "@nivo/core": "0.62.0",
     "prop-types": ">= 15.5.10 < 16.0.0",
@@ -47,3 +45,3 @@ "react": ">= 16.8.4 < 17.0.0"
   },
-  "gitHead": "a98a072c4fe5339457d26f396d032dfc302187bc"
+  "gitHead": "defc453433d8e6767ba3d612cce0d05c119ec5ed"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

239315

162.34%

Dependency count

11

-15.38%

Number of package files

10

42.86%

Worsened metrics

Lines of code

2080

-8.33%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  react-spring@^8.0.27

• + Added

  @nivo/axes@0.63.0
  (transitive)

• + Added

  @nivo/colors@0.63.0
  (transitive)

• + Added

  @nivo/scales@0.63.0
  (transitive)

• + Added

  @nivo/tooltip@0.63.0
  (transitive)

• + Added

  react-spring@8.0.27
  (transitive)

• - Removed

  @nivo/core@0.62.0

• - Removed

  d3-format@^1.3.2

• - Removed

  lodash@^4.17.11

• - Removed

  recompose@^0.30.0

• - Removed

  @nivo/axes@0.62.0
  (transitive)

• - Removed

  @nivo/colors@0.62.0
  (transitive)

• - Removed

  @nivo/scales@0.62.0
  (transitive)

• Updated

  @nivo/axes@0.63.0

• Updated

  @nivo/colors@0.63.0

• Updated

  @nivo/legends@0.63.0

• Updated

  @nivo/scales@0.63.0

• Updated

  @nivo/tooltip@0.63.0