@nivo/heatmap - npm Package Compare versions

Comparing version 0.71.0 to 0.72.0

dist/nivo-heatmap.cjs.js

@@ -7,4 +7,3 @@ 'use strict';
 
-var React = require('react');
-var React__default = _interopDefault(React);
+var react = require('react');
 var core = require('@nivo/core');
@@ -17,2 +16,3 @@ var axes = require('@nivo/axes');
 var web = require('@react-spring/web');
+var jsxRuntime = require('react/jsx-runtime');
 
@@ -157,3 +157,3 @@ function _defineProperty(obj, key, value) {
   if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Map" || n === "Set") return Array.from(o);
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
@@ -290,3 +290,3 @@ }
       cellHoverOthersOpacity = _ref2.cellHoverOthersOpacity;
-  var _useState = React.useState(null),
+  var _useState = react.useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -296,9 +296,9 @@ currentCellId = _useState2[0],
   var getIndex = core.usePropertyAccessor(indexBy);
-  var indices = React.useMemo(function () {
+  var indices = react.useMemo(function () {
     return data.map(getIndex);
   }, [data, getIndex]);
-  var getLabel = React.useMemo(function () {
+  var getLabel = react.useMemo(function () {
     return core.getLabelGenerator(label);
   }, [label]);
-  var layoutConfig = React.useMemo(function () {
+  var layoutConfig = react.useMemo(function () {
     var columns = keys.length;
@@ -324,3 +324,3 @@ var rows = data.length;
   }, [data, keys, width, height, padding, forceSquare]);
-  var scales = React.useMemo(function () {
+  var scales = react.useMemo(function () {
     return {
@@ -335,3 +335,3 @@ x: d3Scale.scaleOrdinal(keys.map(function (key, i) {
   }, [indices, keys, layoutConfig, padding]);
-  var values = React.useMemo(function () {
+  var values = react.useMemo(function () {
     var minValue = _minValue;
@@ -353,3 +353,3 @@ var maxValue = _maxValue;
   }, [data, keys, _minValue, _maxValue]);
-  var sizeScale = React.useMemo(function () {
+  var sizeScale = react.useMemo(function () {
     if (sizeVariation > 0) {
@@ -359,3 +359,3 @@ return d3Scale.scaleLinear().range([1 - sizeVariation, 1]).domain([values.min, values.max]);
   }, [sizeVariation, values]);
-  var colorScale = React.useMemo(function () {
+  var colorScale = react.useMemo(function () {
     return core.guessQuantizeColorScale(colors$1).domain([values.min, values.max]);
@@ -366,3 +366,3 @@ }, [colors$1, values]);
   var getLabelTextColor = colors.useInheritedColor(labelTextColor, theme);
-  var cells = React.useMemo(function () {
+  var cells = react.useMemo(function () {
     return computeCells({
@@ -384,3 +384,3 @@ data: data,
   }, [data, keys, getIndex, scales, sizeScale, cellOpacity, layoutConfig, colorScale, nanColor, getLabel, getLabelTextColor]);
-  var cellsWithCurrent = React.useMemo(function () {
+  var cellsWithCurrent = react.useMemo(function () {
     if (currentCellId === null) return cells;
@@ -425,3 +425,3 @@ var isHoverTarget = isHoverTargetByType[hoverTarget];
   return cells.map(function (cell) {
-    return React__default.createElement(cellComponent, {
+    return react.createElement(cellComponent, {
       key: cell.id,
@@ -448,2 +448,3 @@ data: cell,
 };
+HeatMapCells.propTypes = {};
 
@@ -484,3 +485,3 @@ var HeatMapCellRect = function HeatMapCellRect(_ref) {
   });
-  return React__default.createElement(web.animated.g, {
+  return jsxRuntime.jsxs(web.animated.g, {
     transform: animatedProps.transform,
@@ -495,23 +496,25 @@ style: {
       return onClick(data, event);
-    } : undefined
-  }, React__default.createElement(web.animated.rect, {
-    x: animatedProps.xOffset,
-    y: animatedProps.yOffset,
-    width: animatedProps.width,
-    height: animatedProps.height,
-    fill: animatedProps.color,
-    fillOpacity: animatedProps.opacity,
-    strokeWidth: animatedProps.borderWidth,
-    stroke: animatedProps.borderColor,
-    strokeOpacity: animatedProps.opacity
-  }), enableLabel && React__default.createElement(web.animated.text, {
-    dominantBaseline: "central",
-    textAnchor: "middle",
-    style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
-      fill: animatedProps.textColor
-    }),
-    fillOpacity: animatedProps.opacity
-  }, label));
+    } : undefined,
+    children: [jsxRuntime.jsx(web.animated.rect, {
+      x: animatedProps.xOffset,
+      y: animatedProps.yOffset,
+      width: animatedProps.width,
+      height: animatedProps.height,
+      fill: animatedProps.color,
+      fillOpacity: animatedProps.opacity,
+      strokeWidth: animatedProps.borderWidth,
+      stroke: animatedProps.borderColor,
+      strokeOpacity: animatedProps.opacity
+    }), enableLabel && jsxRuntime.jsx(web.animated.text, {
+      dominantBaseline: "central",
+      textAnchor: "middle",
+      style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
+        fill: animatedProps.textColor
+      }),
+      fillOpacity: animatedProps.opacity,
+      children: label
+    })]
+  });
 };
-var HeatMapCellRect$1 = React.memo(HeatMapCellRect);
+var HeatMapCellRect$1 = react.memo(HeatMapCellRect);
 
@@ -549,3 +552,3 @@ var HeatMapCellCircle = function HeatMapCellCircle(_ref) {
   });
-  return React__default.createElement(web.animated.g, {
+  return jsxRuntime.jsxs(web.animated.g, {
     transform: animatedProps.transform,
@@ -560,20 +563,22 @@ style: {
       return onClick(data, event);
-    } : undefined
-  }, React__default.createElement(web.animated.circle, {
-    r: animatedProps.radius,
-    fill: animatedProps.color,
-    fillOpacity: animatedProps.opacity,
-    strokeWidth: animatedProps.borderWidth,
-    stroke: animatedProps.borderColor,
-    strokeOpacity: animatedProps.opacity
-  }), enableLabel && React__default.createElement(web.animated.text, {
-    dominantBaseline: "central",
-    textAnchor: "middle",
-    style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
-      fill: animatedProps.textColor
-    }),
-    fillOpacity: animatedProps.opacity
-  }, label));
+    } : undefined,
+    children: [jsxRuntime.jsx(web.animated.circle, {
+      r: animatedProps.radius,
+      fill: animatedProps.color,
+      fillOpacity: animatedProps.opacity,
+      strokeWidth: animatedProps.borderWidth,
+      stroke: animatedProps.borderColor,
+      strokeOpacity: animatedProps.opacity
+    }), enableLabel && jsxRuntime.jsx(web.animated.text, {
+      dominantBaseline: "central",
+      textAnchor: "middle",
+      style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
+        fill: animatedProps.textColor
+      }),
+      fillOpacity: animatedProps.opacity,
+      children: label
+    })]
+  });
 };
-var HeatMapCellCircle$1 = React.memo(HeatMapCellCircle);
+var HeatMapCellCircle$1 = react.memo(HeatMapCellCircle);
 
@@ -584,3 +589,3 @@ var HeatMapCellTooltip = function HeatMapCellTooltip(_ref) {
       tooltip$1 = _ref.tooltip;
-  return React__default.createElement(tooltip.BasicTooltip, {
+  return jsxRuntime.jsx(tooltip.BasicTooltip, {
     id: "".concat(cell.yKey, " - ").concat(cell.xKey),
@@ -594,3 +599,3 @@ value: cell.value,
 };
-var HeatMapCellTooltip$1 = React.memo(HeatMapCellTooltip);
+var HeatMapCellTooltip$1 = react.memo(HeatMapCellTooltip);
 
@@ -670,5 +675,5 @@ var HeatMap = function HeatMap(_ref) {
       hideTooltip = _useTooltip.hideTooltip;
-  var handleCellHover = React.useCallback(function (cell, event) {
+  var handleCellHover = react.useCallback(function (cell, event) {
     setCurrentCellId(cell.id);
-    showTooltipFromEvent(React__default.createElement(HeatMapCellTooltip$1, {
+    showTooltipFromEvent(jsxRuntime.jsx(HeatMapCellTooltip$1, {
       cell: cell,
@@ -679,3 +684,3 @@ format: tooltipFormat,
   }, [setCurrentCellId, showTooltipFromEvent, tooltipFormat, tooltip$1]);
-  var handleCellLeave = React.useCallback(function () {
+  var handleCellLeave = react.useCallback(function () {
     setCurrentCellId(null);
@@ -692,3 +697,3 @@ hideTooltip();
   }
-  return React__default.createElement(core.SvgWrapper, {
+  return jsxRuntime.jsxs(core.SvgWrapper, {
     width: outerWidth,
@@ -700,28 +705,29 @@ height: outerHeight,
     }),
-    role: role
-  }, React__default.createElement(axes.Grid, {
-    width: innerWidth - offsetX * 2,
-    height: innerHeight - offsetY * 2,
-    xScale: enableGridX ? xScale : null,
-    yScale: enableGridY ? yScale : null
-  }), React__default.createElement(axes.Axes, {
-    xScale: xScale,
-    yScale: yScale,
-    width: innerWidth - offsetX * 2,
-    height: innerHeight - offsetY * 2,
-    top: axisTop,
-    right: axisRight,
-    bottom: axisBottom,
-    left: axisLeft
-  }), React__default.createElement(HeatMapCells, {
-    cells: cells,
-    cellComponent: cellComponent,
-    cellBorderWidth: cellBorderWidth,
-    getCellBorderColor: getCellBorderColor,
-    enableLabels: enableLabels,
-    getLabelTextColor: getLabelTextColor,
-    handleCellHover: isInteractive ? handleCellHover : undefined,
-    handleCellLeave: isInteractive ? handleCellLeave : undefined,
-    onClick: isInteractive ? onClick : undefined
-  }));
+    role: role,
+    children: [jsxRuntime.jsx(axes.Grid, {
+      width: innerWidth - offsetX * 2,
+      height: innerHeight - offsetY * 2,
+      xScale: enableGridX ? xScale : null,
+      yScale: enableGridY ? yScale : null
+    }), jsxRuntime.jsx(axes.Axes, {
+      xScale: xScale,
+      yScale: yScale,
+      width: innerWidth - offsetX * 2,
+      height: innerHeight - offsetY * 2,
+      top: axisTop,
+      right: axisRight,
+      bottom: axisBottom,
+      left: axisLeft
+    }), jsxRuntime.jsx(HeatMapCells, {
+      cells: cells,
+      cellComponent: cellComponent,
+      cellBorderWidth: cellBorderWidth,
+      getCellBorderColor: getCellBorderColor,
+      enableLabels: enableLabels,
+      getLabelTextColor: getLabelTextColor,
+      handleCellHover: isInteractive ? handleCellHover : undefined,
+      handleCellLeave: isInteractive ? handleCellLeave : undefined,
+      onClick: isInteractive ? onClick : undefined
+    })]
+  });
 };
@@ -811,3 +817,3 @@ var WrappedHeatMap = core.withContainer(HeatMap);
       pixelRatio = _ref.pixelRatio;
-  var canvasEl = React.useRef(null);
+  var canvasEl = react.useRef(null);
   var _useDimensions = core.useDimensions(width, height, partialMargin),
@@ -848,3 +854,3 @@ margin = _useDimensions.margin,
   var theme = core.useTheme();
-  React.useEffect(function () {
+  react.useEffect(function () {
     canvasEl.current.width = outerWidth * pixelRatio;
@@ -886,3 +892,3 @@ canvasEl.current.height = outerHeight * pixelRatio;
       hideTooltip = _useTooltip.hideTooltip;
-  var handleMouseHover = React.useCallback(function (event) {
+  var handleMouseHover = react.useCallback(function (event) {
     var _getRelativeCursor = core.getRelativeCursor(canvasEl.current, event),
@@ -897,3 +903,3 @@ _getRelativeCursor2 = _slicedToArray(_getRelativeCursor, 2),
       setCurrentCellId(cell.id);
-      showTooltipFromEvent(React__default.createElement(HeatMapCellTooltip$1, {
+      showTooltipFromEvent(jsxRuntime.jsx(HeatMapCellTooltip$1, {
         cell: cell,
@@ -908,7 +914,7 @@ tooltip: tooltip$1,
   }, [canvasEl, cells, margin, offsetX, offsetY, setCurrentCellId, showTooltipFromEvent, hideTooltip, tooltip$1, tooltipFormat]);
-  var handleMouseLeave = React.useCallback(function () {
+  var handleMouseLeave = react.useCallback(function () {
     setCurrentCellId(null);
     hideTooltip();
   }, [setCurrentCellId, hideTooltip]);
-  var handleClick = React.useCallback(function (event) {
+  var handleClick = react.useCallback(function (event) {
     if (currentCellId === null) return;
@@ -920,3 +926,3 @@ var currentCell = cells.find(function (cell) {
   }, [cells, currentCellId, onClick]);
-  return React__default.createElement("canvas", {
+  return jsxRuntime.jsx("canvas", {
     ref: canvasEl,
@@ -939,9 +945,11 @@ width: outerWidth * pixelRatio,
 var ResponsiveHeatMap = function ResponsiveHeatMap(props) {
-  return React__default.createElement(core.ResponsiveWrapper, null, function (_ref) {
-    var width = _ref.width,
-        height = _ref.height;
-    return React__default.createElement(WrappedHeatMap, Object.assign({
-      width: width,
-      height: height
-    }, props));
+  return jsxRuntime.jsx(core.ResponsiveWrapper, {
+    children: function children(_ref) {
+      var width = _ref.width,
+          height = _ref.height;
+      return jsxRuntime.jsx(WrappedHeatMap, _objectSpread2({
+        width: width,
+        height: height
+      }, props));
+    }
   });
@@ -951,9 +959,11 @@ };
 var ResponsiveHeatMapCanvas = function ResponsiveHeatMapCanvas(props) {
-  return React__default.createElement(core.ResponsiveWrapper, null, function (_ref) {
-    var width = _ref.width,
-        height = _ref.height;
-    return React__default.createElement(WrappedHeatMapCanvas, Object.assign({
-      width: width,
-      height: height
-    }, props));
+  return jsxRuntime.jsx(core.ResponsiveWrapper, {
+    children: function children(_ref) {
+      var width = _ref.width,
+          height = _ref.height;
+      return jsxRuntime.jsx(WrappedHeatMapCanvas, _objectSpread2({
+        width: width,
+        height: height
+      }, props));
+    }
   });
@@ -960,0 +970,0 @@ };

dist/nivo-heatmap.es.js

@@ -1,2 +0,2 @@
-import React, { useState, useMemo, memo, useCallback, useRef, useEffect } from 'react';
+import { useState, useMemo, createElement, memo, useCallback, useRef, useEffect } from 'react';
 import { quantizeColorScalePropType, noop, usePropertyAccessor, getLabelGenerator, guessQuantizeColorScale, useTheme, useMotionConfig, withContainer, useDimensions, SvgWrapper, getRelativeCursor, isCursorInRect, ResponsiveWrapper } from '@nivo/core';
@@ -9,2 +9,3 @@ import { axisPropType, Grid, Axes, renderAxesToCanvas } from '@nivo/axes';
 import { useSpring, animated } from '@react-spring/web';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -149,3 +150,3 @@ function _defineProperty(obj, key, value) {
   if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Map" || n === "Set") return Array.from(o);
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
@@ -409,3 +410,3 @@ }
   return cells.map(function (cell) {
-    return React.createElement(cellComponent, {
+    return createElement(cellComponent, {
       key: cell.id,
@@ -432,2 +433,3 @@ data: cell,
 };
+HeatMapCells.propTypes = {};
 
@@ -468,3 +470,3 @@ var HeatMapCellRect = function HeatMapCellRect(_ref) {
   });
-  return React.createElement(animated.g, {
+  return jsxs(animated.g, {
     transform: animatedProps.transform,
@@ -479,21 +481,23 @@ style: {
       return onClick(data, event);
-    } : undefined
-  }, React.createElement(animated.rect, {
-    x: animatedProps.xOffset,
-    y: animatedProps.yOffset,
-    width: animatedProps.width,
-    height: animatedProps.height,
-    fill: animatedProps.color,
-    fillOpacity: animatedProps.opacity,
-    strokeWidth: animatedProps.borderWidth,
-    stroke: animatedProps.borderColor,
-    strokeOpacity: animatedProps.opacity
-  }), enableLabel && React.createElement(animated.text, {
-    dominantBaseline: "central",
-    textAnchor: "middle",
-    style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
-      fill: animatedProps.textColor
-    }),
-    fillOpacity: animatedProps.opacity
-  }, label));
+    } : undefined,
+    children: [jsx(animated.rect, {
+      x: animatedProps.xOffset,
+      y: animatedProps.yOffset,
+      width: animatedProps.width,
+      height: animatedProps.height,
+      fill: animatedProps.color,
+      fillOpacity: animatedProps.opacity,
+      strokeWidth: animatedProps.borderWidth,
+      stroke: animatedProps.borderColor,
+      strokeOpacity: animatedProps.opacity
+    }), enableLabel && jsx(animated.text, {
+      dominantBaseline: "central",
+      textAnchor: "middle",
+      style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
+        fill: animatedProps.textColor
+      }),
+      fillOpacity: animatedProps.opacity,
+      children: label
+    })]
+  });
 };
@@ -533,3 +537,3 @@ var HeatMapCellRect$1 = memo(HeatMapCellRect);
   });
-  return React.createElement(animated.g, {
+  return jsxs(animated.g, {
     transform: animatedProps.transform,
@@ -544,18 +548,20 @@ style: {
       return onClick(data, event);
-    } : undefined
-  }, React.createElement(animated.circle, {
-    r: animatedProps.radius,
-    fill: animatedProps.color,
-    fillOpacity: animatedProps.opacity,
-    strokeWidth: animatedProps.borderWidth,
-    stroke: animatedProps.borderColor,
-    strokeOpacity: animatedProps.opacity
-  }), enableLabel && React.createElement(animated.text, {
-    dominantBaseline: "central",
-    textAnchor: "middle",
-    style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
-      fill: animatedProps.textColor
-    }),
-    fillOpacity: animatedProps.opacity
-  }, label));
+    } : undefined,
+    children: [jsx(animated.circle, {
+      r: animatedProps.radius,
+      fill: animatedProps.color,
+      fillOpacity: animatedProps.opacity,
+      strokeWidth: animatedProps.borderWidth,
+      stroke: animatedProps.borderColor,
+      strokeOpacity: animatedProps.opacity
+    }), enableLabel && jsx(animated.text, {
+      dominantBaseline: "central",
+      textAnchor: "middle",
+      style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
+        fill: animatedProps.textColor
+      }),
+      fillOpacity: animatedProps.opacity,
+      children: label
+    })]
+  });
 };
@@ -568,3 +574,3 @@ var HeatMapCellCircle$1 = memo(HeatMapCellCircle);
       tooltip = _ref.tooltip;
-  return React.createElement(BasicTooltip, {
+  return jsx(BasicTooltip, {
     id: "".concat(cell.yKey, " - ").concat(cell.xKey),
@@ -655,3 +661,3 @@ value: cell.value,
     setCurrentCellId(cell.id);
-    showTooltipFromEvent(React.createElement(HeatMapCellTooltip$1, {
+    showTooltipFromEvent(jsx(HeatMapCellTooltip$1, {
       cell: cell,
@@ -674,3 +680,3 @@ format: tooltipFormat,
   }
-  return React.createElement(SvgWrapper, {
+  return jsxs(SvgWrapper, {
     width: outerWidth,
@@ -682,28 +688,29 @@ height: outerHeight,
     }),
-    role: role
-  }, React.createElement(Grid, {
-    width: innerWidth - offsetX * 2,
-    height: innerHeight - offsetY * 2,
-    xScale: enableGridX ? xScale : null,
-    yScale: enableGridY ? yScale : null
-  }), React.createElement(Axes, {
-    xScale: xScale,
-    yScale: yScale,
-    width: innerWidth - offsetX * 2,
-    height: innerHeight - offsetY * 2,
-    top: axisTop,
-    right: axisRight,
-    bottom: axisBottom,
-    left: axisLeft
-  }), React.createElement(HeatMapCells, {
-    cells: cells,
-    cellComponent: cellComponent,
-    cellBorderWidth: cellBorderWidth,
-    getCellBorderColor: getCellBorderColor,
-    enableLabels: enableLabels,
-    getLabelTextColor: getLabelTextColor,
-    handleCellHover: isInteractive ? handleCellHover : undefined,
-    handleCellLeave: isInteractive ? handleCellLeave : undefined,
-    onClick: isInteractive ? onClick : undefined
-  }));
+    role: role,
+    children: [jsx(Grid, {
+      width: innerWidth - offsetX * 2,
+      height: innerHeight - offsetY * 2,
+      xScale: enableGridX ? xScale : null,
+      yScale: enableGridY ? yScale : null
+    }), jsx(Axes, {
+      xScale: xScale,
+      yScale: yScale,
+      width: innerWidth - offsetX * 2,
+      height: innerHeight - offsetY * 2,
+      top: axisTop,
+      right: axisRight,
+      bottom: axisBottom,
+      left: axisLeft
+    }), jsx(HeatMapCells, {
+      cells: cells,
+      cellComponent: cellComponent,
+      cellBorderWidth: cellBorderWidth,
+      getCellBorderColor: getCellBorderColor,
+      enableLabels: enableLabels,
+      getLabelTextColor: getLabelTextColor,
+      handleCellHover: isInteractive ? handleCellHover : undefined,
+      handleCellLeave: isInteractive ? handleCellLeave : undefined,
+      onClick: isInteractive ? onClick : undefined
+    })]
+  });
 };
@@ -876,3 +883,3 @@ var WrappedHeatMap = withContainer(HeatMap);
       setCurrentCellId(cell.id);
-      showTooltipFromEvent(React.createElement(HeatMapCellTooltip$1, {
+      showTooltipFromEvent(jsx(HeatMapCellTooltip$1, {
         cell: cell,
@@ -898,3 +905,3 @@ tooltip: tooltip,
   }, [cells, currentCellId, onClick]);
-  return React.createElement("canvas", {
+  return jsx("canvas", {
     ref: canvasEl,
@@ -917,9 +924,11 @@ width: outerWidth * pixelRatio,
 var ResponsiveHeatMap = function ResponsiveHeatMap(props) {
-  return React.createElement(ResponsiveWrapper, null, function (_ref) {
-    var width = _ref.width,
-        height = _ref.height;
-    return React.createElement(WrappedHeatMap, Object.assign({
-      width: width,
-      height: height
-    }, props));
+  return jsx(ResponsiveWrapper, {
+    children: function children(_ref) {
+      var width = _ref.width,
+          height = _ref.height;
+      return jsx(WrappedHeatMap, _objectSpread2({
+        width: width,
+        height: height
+      }, props));
+    }
   });
@@ -929,9 +938,11 @@ };
 var ResponsiveHeatMapCanvas = function ResponsiveHeatMapCanvas(props) {
-  return React.createElement(ResponsiveWrapper, null, function (_ref) {
-    var width = _ref.width,
-        height = _ref.height;
-    return React.createElement(WrappedHeatMapCanvas, Object.assign({
-      width: width,
-      height: height
-    }, props));
+  return jsx(ResponsiveWrapper, {
+    children: function children(_ref) {
+      var width = _ref.width,
+          height = _ref.height;
+      return jsx(WrappedHeatMapCanvas, _objectSpread2({
+        width: width,
+        height: height
+      }, props));
+    }
   });
@@ -938,0 +949,0 @@ };

dist/nivo-heatmap.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@nivo/core'), require('@nivo/axes'), require('@nivo/tooltip'), require('prop-types'), require('@nivo/colors'), require('d3-scale'), require('@react-spring/web')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '@nivo/core', '@nivo/axes', '@nivo/tooltip', 'prop-types', '@nivo/colors', 'd3-scale', '@react-spring/web'], factory) :
-  (global = global || self, factory(global.nivo = global.nivo || {}, global.React, global.nivo, global.nivo, global.nivo, global.PropTypes, global.nivo, global.d3, global['@react-spring/web']));
-}(this, (function (exports, React, core, axes, tooltip, PropTypes, colors, d3Scale, web) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@nivo/core'), require('@nivo/axes'), require('@nivo/tooltip'), require('prop-types'), require('@nivo/colors'), require('d3-scale'), require('@react-spring/web'), require('react/jsx-runtime')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@nivo/core', '@nivo/axes', '@nivo/tooltip', 'prop-types', '@nivo/colors', 'd3-scale', '@react-spring/web', 'react/jsx-runtime'], factory) :
+  (global = global || self, factory(global.nivo = global.nivo || {}, global.React, global.nivo, global.nivo, global.nivo, global.PropTypes, global.nivo, global.d3, global['@react-spring/web'], global['react/jsx-runtime']));
+}(this, (function (exports, react, core, axes, tooltip, PropTypes, colors, d3Scale, web, jsxRuntime) { 'use strict';
 
-  var React__default = 'default' in React ? React['default'] : React;
   PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
@@ -148,3 +147,3 @@
     if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Map" || n === "Set") return Array.from(o);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
@@ -281,3 +280,3 @@ }
         cellHoverOthersOpacity = _ref2.cellHoverOthersOpacity;
-    var _useState = React.useState(null),
+    var _useState = react.useState(null),
         _useState2 = _slicedToArray(_useState, 2),
@@ -287,9 +286,9 @@ currentCellId = _useState2[0],
     var getIndex = core.usePropertyAccessor(indexBy);
-    var indices = React.useMemo(function () {
+    var indices = react.useMemo(function () {
       return data.map(getIndex);
     }, [data, getIndex]);
-    var getLabel = React.useMemo(function () {
+    var getLabel = react.useMemo(function () {
       return core.getLabelGenerator(label);
     }, [label]);
-    var layoutConfig = React.useMemo(function () {
+    var layoutConfig = react.useMemo(function () {
       var columns = keys.length;
@@ -315,3 +314,3 @@ var rows = data.length;
     }, [data, keys, width, height, padding, forceSquare]);
-    var scales = React.useMemo(function () {
+    var scales = react.useMemo(function () {
       return {
@@ -326,3 +325,3 @@ x: d3Scale.scaleOrdinal(keys.map(function (key, i) {
     }, [indices, keys, layoutConfig, padding]);
-    var values = React.useMemo(function () {
+    var values = react.useMemo(function () {
       var minValue = _minValue;
@@ -344,3 +343,3 @@ var maxValue = _maxValue;
     }, [data, keys, _minValue, _maxValue]);
-    var sizeScale = React.useMemo(function () {
+    var sizeScale = react.useMemo(function () {
       if (sizeVariation > 0) {
@@ -350,3 +349,3 @@ return d3Scale.scaleLinear().range([1 - sizeVariation, 1]).domain([values.min, values.max]);
     }, [sizeVariation, values]);
-    var colorScale = React.useMemo(function () {
+    var colorScale = react.useMemo(function () {
       return core.guessQuantizeColorScale(colors$1).domain([values.min, values.max]);
@@ -357,3 +356,3 @@ }, [colors$1, values]);
     var getLabelTextColor = colors.useInheritedColor(labelTextColor, theme);
-    var cells = React.useMemo(function () {
+    var cells = react.useMemo(function () {
       return computeCells({
@@ -375,3 +374,3 @@ data: data,
     }, [data, keys, getIndex, scales, sizeScale, cellOpacity, layoutConfig, colorScale, nanColor, getLabel, getLabelTextColor]);
-    var cellsWithCurrent = React.useMemo(function () {
+    var cellsWithCurrent = react.useMemo(function () {
       if (currentCellId === null) return cells;
@@ -416,3 +415,3 @@ var isHoverTarget = isHoverTargetByType[hoverTarget];
     return cells.map(function (cell) {
-      return React__default.createElement(cellComponent, {
+      return react.createElement(cellComponent, {
         key: cell.id,
@@ -439,2 +438,3 @@ data: cell,
   };
+  HeatMapCells.propTypes = {};
 
@@ -475,3 +475,3 @@ var HeatMapCellRect = function HeatMapCellRect(_ref) {
     });
-    return React__default.createElement(web.animated.g, {
+    return jsxRuntime.jsxs(web.animated.g, {
       transform: animatedProps.transform,
@@ -486,23 +486,25 @@ style: {
         return onClick(data, event);
-      } : undefined
-    }, React__default.createElement(web.animated.rect, {
-      x: animatedProps.xOffset,
-      y: animatedProps.yOffset,
-      width: animatedProps.width,
-      height: animatedProps.height,
-      fill: animatedProps.color,
-      fillOpacity: animatedProps.opacity,
-      strokeWidth: animatedProps.borderWidth,
-      stroke: animatedProps.borderColor,
-      strokeOpacity: animatedProps.opacity
-    }), enableLabel && React__default.createElement(web.animated.text, {
-      dominantBaseline: "central",
-      textAnchor: "middle",
-      style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
-        fill: animatedProps.textColor
-      }),
-      fillOpacity: animatedProps.opacity
-    }, label));
+      } : undefined,
+      children: [jsxRuntime.jsx(web.animated.rect, {
+        x: animatedProps.xOffset,
+        y: animatedProps.yOffset,
+        width: animatedProps.width,
+        height: animatedProps.height,
+        fill: animatedProps.color,
+        fillOpacity: animatedProps.opacity,
+        strokeWidth: animatedProps.borderWidth,
+        stroke: animatedProps.borderColor,
+        strokeOpacity: animatedProps.opacity
+      }), enableLabel && jsxRuntime.jsx(web.animated.text, {
+        dominantBaseline: "central",
+        textAnchor: "middle",
+        style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
+          fill: animatedProps.textColor
+        }),
+        fillOpacity: animatedProps.opacity,
+        children: label
+      })]
+    });
   };
-  var HeatMapCellRect$1 = React.memo(HeatMapCellRect);
+  var HeatMapCellRect$1 = react.memo(HeatMapCellRect);
 
@@ -540,3 +542,3 @@ var HeatMapCellCircle = function HeatMapCellCircle(_ref) {
     });
-    return React__default.createElement(web.animated.g, {
+    return jsxRuntime.jsxs(web.animated.g, {
       transform: animatedProps.transform,
@@ -551,20 +553,22 @@ style: {
         return onClick(data, event);
-      } : undefined
-    }, React__default.createElement(web.animated.circle, {
-      r: animatedProps.radius,
-      fill: animatedProps.color,
-      fillOpacity: animatedProps.opacity,
-      strokeWidth: animatedProps.borderWidth,
-      stroke: animatedProps.borderColor,
-      strokeOpacity: animatedProps.opacity
-    }), enableLabel && React__default.createElement(web.animated.text, {
-      dominantBaseline: "central",
-      textAnchor: "middle",
-      style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
-        fill: animatedProps.textColor
-      }),
-      fillOpacity: animatedProps.opacity
-    }, label));
+      } : undefined,
+      children: [jsxRuntime.jsx(web.animated.circle, {
+        r: animatedProps.radius,
+        fill: animatedProps.color,
+        fillOpacity: animatedProps.opacity,
+        strokeWidth: animatedProps.borderWidth,
+        stroke: animatedProps.borderColor,
+        strokeOpacity: animatedProps.opacity
+      }), enableLabel && jsxRuntime.jsx(web.animated.text, {
+        dominantBaseline: "central",
+        textAnchor: "middle",
+        style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
+          fill: animatedProps.textColor
+        }),
+        fillOpacity: animatedProps.opacity,
+        children: label
+      })]
+    });
   };
-  var HeatMapCellCircle$1 = React.memo(HeatMapCellCircle);
+  var HeatMapCellCircle$1 = react.memo(HeatMapCellCircle);
 
@@ -575,3 +579,3 @@ var HeatMapCellTooltip = function HeatMapCellTooltip(_ref) {
         tooltip$1 = _ref.tooltip;
-    return React__default.createElement(tooltip.BasicTooltip, {
+    return jsxRuntime.jsx(tooltip.BasicTooltip, {
       id: "".concat(cell.yKey, " - ").concat(cell.xKey),
@@ -585,3 +589,3 @@ value: cell.value,
   };
-  var HeatMapCellTooltip$1 = React.memo(HeatMapCellTooltip);
+  var HeatMapCellTooltip$1 = react.memo(HeatMapCellTooltip);
 
@@ -661,5 +665,5 @@ var HeatMap = function HeatMap(_ref) {
         hideTooltip = _useTooltip.hideTooltip;
-    var handleCellHover = React.useCallback(function (cell, event) {
+    var handleCellHover = react.useCallback(function (cell, event) {
       setCurrentCellId(cell.id);
-      showTooltipFromEvent(React__default.createElement(HeatMapCellTooltip$1, {
+      showTooltipFromEvent(jsxRuntime.jsx(HeatMapCellTooltip$1, {
         cell: cell,
@@ -670,3 +674,3 @@ format: tooltipFormat,
     }, [setCurrentCellId, showTooltipFromEvent, tooltipFormat, tooltip$1]);
-    var handleCellLeave = React.useCallback(function () {
+    var handleCellLeave = react.useCallback(function () {
       setCurrentCellId(null);
@@ -683,3 +687,3 @@ hideTooltip();
     }
-    return React__default.createElement(core.SvgWrapper, {
+    return jsxRuntime.jsxs(core.SvgWrapper, {
       width: outerWidth,
@@ -691,28 +695,29 @@ height: outerHeight,
       }),
-      role: role
-    }, React__default.createElement(axes.Grid, {
-      width: innerWidth - offsetX * 2,
-      height: innerHeight - offsetY * 2,
-      xScale: enableGridX ? xScale : null,
-      yScale: enableGridY ? yScale : null
-    }), React__default.createElement(axes.Axes, {
-      xScale: xScale,
-      yScale: yScale,
-      width: innerWidth - offsetX * 2,
-      height: innerHeight - offsetY * 2,
-      top: axisTop,
-      right: axisRight,
-      bottom: axisBottom,
-      left: axisLeft
-    }), React__default.createElement(HeatMapCells, {
-      cells: cells,
-      cellComponent: cellComponent,
-      cellBorderWidth: cellBorderWidth,
-      getCellBorderColor: getCellBorderColor,
-      enableLabels: enableLabels,
-      getLabelTextColor: getLabelTextColor,
-      handleCellHover: isInteractive ? handleCellHover : undefined,
-      handleCellLeave: isInteractive ? handleCellLeave : undefined,
-      onClick: isInteractive ? onClick : undefined
-    }));
+      role: role,
+      children: [jsxRuntime.jsx(axes.Grid, {
+        width: innerWidth - offsetX * 2,
+        height: innerHeight - offsetY * 2,
+        xScale: enableGridX ? xScale : null,
+        yScale: enableGridY ? yScale : null
+      }), jsxRuntime.jsx(axes.Axes, {
+        xScale: xScale,
+        yScale: yScale,
+        width: innerWidth - offsetX * 2,
+        height: innerHeight - offsetY * 2,
+        top: axisTop,
+        right: axisRight,
+        bottom: axisBottom,
+        left: axisLeft
+      }), jsxRuntime.jsx(HeatMapCells, {
+        cells: cells,
+        cellComponent: cellComponent,
+        cellBorderWidth: cellBorderWidth,
+        getCellBorderColor: getCellBorderColor,
+        enableLabels: enableLabels,
+        getLabelTextColor: getLabelTextColor,
+        handleCellHover: isInteractive ? handleCellHover : undefined,
+        handleCellLeave: isInteractive ? handleCellLeave : undefined,
+        onClick: isInteractive ? onClick : undefined
+      })]
+    });
   };
@@ -802,3 +807,3 @@ var WrappedHeatMap = core.withContainer(HeatMap);
         pixelRatio = _ref.pixelRatio;
-    var canvasEl = React.useRef(null);
+    var canvasEl = react.useRef(null);
     var _useDimensions = core.useDimensions(width, height, partialMargin),
@@ -839,3 +844,3 @@ margin = _useDimensions.margin,
     var theme = core.useTheme();
-    React.useEffect(function () {
+    react.useEffect(function () {
       canvasEl.current.width = outerWidth * pixelRatio;
@@ -877,3 +882,3 @@ canvasEl.current.height = outerHeight * pixelRatio;
         hideTooltip = _useTooltip.hideTooltip;
-    var handleMouseHover = React.useCallback(function (event) {
+    var handleMouseHover = react.useCallback(function (event) {
       var _getRelativeCursor = core.getRelativeCursor(canvasEl.current, event),
@@ -888,3 +893,3 @@ _getRelativeCursor2 = _slicedToArray(_getRelativeCursor, 2),
         setCurrentCellId(cell.id);
-        showTooltipFromEvent(React__default.createElement(HeatMapCellTooltip$1, {
+        showTooltipFromEvent(jsxRuntime.jsx(HeatMapCellTooltip$1, {
           cell: cell,
@@ -899,7 +904,7 @@ tooltip: tooltip$1,
     }, [canvasEl, cells, margin, offsetX, offsetY, setCurrentCellId, showTooltipFromEvent, hideTooltip, tooltip$1, tooltipFormat]);
-    var handleMouseLeave = React.useCallback(function () {
+    var handleMouseLeave = react.useCallback(function () {
       setCurrentCellId(null);
       hideTooltip();
     }, [setCurrentCellId, hideTooltip]);
-    var handleClick = React.useCallback(function (event) {
+    var handleClick = react.useCallback(function (event) {
       if (currentCellId === null) return;
@@ -911,3 +916,3 @@ var currentCell = cells.find(function (cell) {
     }, [cells, currentCellId, onClick]);
-    return React__default.createElement("canvas", {
+    return jsxRuntime.jsx("canvas", {
       ref: canvasEl,
@@ -930,9 +935,11 @@ width: outerWidth * pixelRatio,
   var ResponsiveHeatMap = function ResponsiveHeatMap(props) {
-    return React__default.createElement(core.ResponsiveWrapper, null, function (_ref) {
-      var width = _ref.width,
-          height = _ref.height;
-      return React__default.createElement(WrappedHeatMap, Object.assign({
-        width: width,
-        height: height
-      }, props));
+    return jsxRuntime.jsx(core.ResponsiveWrapper, {
+      children: function children(_ref) {
+        var width = _ref.width,
+            height = _ref.height;
+        return jsxRuntime.jsx(WrappedHeatMap, _objectSpread2({
+          width: width,
+          height: height
+        }, props));
+      }
     });
@@ -942,9 +949,11 @@ };
   var ResponsiveHeatMapCanvas = function ResponsiveHeatMapCanvas(props) {
-    return React__default.createElement(core.ResponsiveWrapper, null, function (_ref) {
-      var width = _ref.width,
-          height = _ref.height;
-      return React__default.createElement(WrappedHeatMapCanvas, Object.assign({
-        width: width,
-        height: height
-      }, props));
+    return jsxRuntime.jsx(core.ResponsiveWrapper, {
+      children: function children(_ref) {
+        var width = _ref.width,
+            height = _ref.height;
+        return jsxRuntime.jsx(WrappedHeatMapCanvas, _objectSpread2({
+          width: width,
+          height: height
+        }, props));
+      }
     });
@@ -951,0 +960,0 @@ };

package.json

 {
   "name": "@nivo/heatmap",
-  "version": "0.71.0",
+  "version": "0.72.0",
   "license": "MIT",
@@ -31,5 +31,5 @@ "author": {
   "dependencies": {
-    "@nivo/axes": "0.71.0",
-    "@nivo/colors": "0.71.0",
-    "@nivo/tooltip": "0.71.0",
+    "@nivo/axes": "0.72.0",
+    "@nivo/colors": "0.72.0",
+    "@nivo/tooltip": "0.72.0",
     "@react-spring/web": "9.2.0",
@@ -39,6 +39,6 @@ "d3-scale": "^3.2.3"
   "devDependencies": {
-    "@nivo/core": "0.71.0"
+    "@nivo/core": "0.72.0"
   },
   "peerDependencies": {
-    "@nivo/core": "0.71.0",
+    "@nivo/core": "0.72.0",
     "prop-types": ">= 15.5.10 < 16.0.0",
@@ -50,3 +50,3 @@ "react": ">= 16.8.4 < 18.0.0"
   },
-  "gitHead": "232b613bd61d2b8e5c783f4181b2d14580e2fd27"
+  "gitHead": "26098f6437cd8ab2be166bbc52973dcbb5ee7569"
 }

No alert changes

Improved metrics

Total package byte prevSize

329343

increased by0.3%

Lines of code

2833

increased by1.11%

Dependency changes

• + Added@nivo/axes@0.72.0(transitive)

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

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

• + Added@nivo/recompose@0.72.0(transitive)

• + Added@nivo/scales@0.72.0(transitive)

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

• - Removed@nivo/axes@0.71.0(transitive)

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

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

• - Removed@nivo/recompose@0.71.0(transitive)

• - Removed@nivo/scales@0.71.0(transitive)

• - Removed@nivo/tooltip@0.71.0(transitive)

• Updated@nivo/axes@0.72.0

• Updated@nivo/colors@0.72.0

• Updated@nivo/tooltip@0.72.0