react-simple-maps 2.1.2 → 3.0.0-beta.1

package/dist/index.es.js

@@ -2,9 +2,9 @@ import React, { createContext, useMemo, useCallback, useContext, useState, useEf
 import PropTypes from 'prop-types';
 import * as d3Geo from 'd3-geo';
 import { geoPath as geoPath$1, geoGraticule } from 'd3-geo';
-import { feature } from 'topojson-client';
+import { feature, mesh } from 'topojson-client';
 import { zoom, zoomIdentity } from 'd3-zoom';
-import { select, event } from 'd3-selection';
+import { select } from 'd3-selection';
 
 var _extends = Object.assign || function (target) {
   for (var i = 1; i < arguments.length; i++) {
@@ -216,11 +216,33 @@ function fetchGeographies(url) {
 }
 
 function getFeatures(geographies, parseGeographies) {
-  if (Array.isArray(geographies)) return parseGeographies ? parseGeographies(geographies) : geographies;
+  var isTopojson = geographies.type === "Topology";
+  if (!isTopojson) {
+    return parseGeographies ? parseGeographies(geographies.features || geographies) : geographies.features || geographies;
+  }
   var feats = feature(geographies, geographies.objects[Object.keys(geographies.objects)[0]]).features;
   return parseGeographies ? parseGeographies(feats) : feats;
 }
 
+function getMesh(geographies) {
+  var isTopojson = geographies.type === "Topology";
+  if (!isTopojson) return null;
+  var outline = mesh(geographies, geographies.objects[Object.keys(geographies.objects)[0]], function (a, b) {
+    return a === b;
+  });
+  var borders = mesh(geographies, geographies.objects[Object.keys(geographies.objects)[0]], function (a, b) {
+    return a !== b;
+  });
+  return { outline: outline, borders: borders };
+}
+
+function prepareMesh(outline, borders, path) {
+  return outline && borders ? {
+    outline: _extends({}, outline, { rsmKey: "outline", svgPath: path(outline) }),
+    borders: _extends({}, borders, { rsmKey: "borders", svgPath: path(borders) })
+  } : {};
+}
+
 function prepareFeatures(geographies, path) {
   return geographies ? geographies.map(function (d, i) {
     return _extends({}, d, {
@@ -252,28 +274,47 @@ function useGeographies(_ref) {
   var _useContext = useContext(MapContext),
       path = _useContext.path;
 
-  var _useState = useState(),
+  var _useState = useState({}),
       _useState2 = slicedToArray(_useState, 2),
-      geographies = _useState2[0],
-      setGeographies = _useState2[1];
+      output = _useState2[0],
+      setOutput = _useState2[1];
 
   useEffect(function () {
     if (typeof window === "undefined") return;
 
+    if (!geography) return;
+
     if (isString(geography)) {
       fetchGeographies(geography).then(function (geos) {
-        if (geos) setGeographies(getFeatures(geos, parseGeographies));
+        if (geos) {
+          setOutput({
+            geographies: getFeatures(geos, parseGeographies),
+            mesh: getMesh(geos)
+          });
+        }
       });
     } else {
-      setGeographies(getFeatures(geography, parseGeographies));
+      setOutput({
+        geographies: getFeatures(geography, parseGeographies),
+        mesh: getMesh(geography)
+      });
     }
   }, [geography, parseGeographies]);
 
-  var output = useMemo(function () {
-    return prepareFeatures(geographies, path);
-  }, [geographies, path]);
+  var _useMemo = useMemo(function () {
+    var mesh = output.mesh || {};
+    var preparedMesh = prepareMesh(mesh.outline, mesh.borders, path);
+    return {
+      geographies: prepareFeatures(output.geographies, path),
+      outline: preparedMesh.outline,
+      borders: preparedMesh.borders
+    };
+  }, [output, path]),
+      geographies = _useMemo.geographies,
+      outline = _useMemo.outline,
+      borders = _useMemo.borders;
 
-  return { geographies: output };
+  return { geographies: geographies, outline: outline, borders: borders };
 }
 
 var Geographies = function Geographies(_ref) {
@@ -289,12 +330,14 @@ var Geographies = function Geographies(_ref) {
       projection = _useContext.projection;
 
   var _useGeographies = useGeographies({ geography: geography, parseGeographies: parseGeographies }),
-      geographies = _useGeographies.geographies;
+      geographies = _useGeographies.geographies,
+      outline = _useGeographies.outline,
+      borders = _useGeographies.borders;
 
   return React.createElement(
     "g",
     _extends({ className: "rsm-geographies " + className }, restProps),
-    geographies && geographies.length > 0 && children({ geographies: geographies, path: path, projection: projection })
+    geographies && geographies.length > 0 && children({ geographies: geographies, outline: outline, borders: borders, path: path, projection: projection })
   );
 };
 
@@ -471,45 +514,45 @@ function useZoomPan(_ref) {
   useEffect(function () {
     var svg = select(mapRef.current);
 
-    function handleZoomStart() {
+    function handleZoomStart(d3Event) {
       if (!onMoveStart || bypassEvents.current) return;
-      onMoveStart({ coordinates: projection.invert(getCoords(width, height, event.transform)), zoom: event.transform.k }, event);
+      onMoveStart({ coordinates: projection.invert(getCoords(width, height, d3Event.transform)), zoom: d3Event.transform.k }, d3Event);
     }
 
-    function handleZoom() {
+    function handleZoom(d3Event) {
       if (bypassEvents.current) return;
-      var transform = event.transform,
-          sourceEvent = event.sourceEvent;
+      var transform = d3Event.transform,
+          sourceEvent = d3Event.sourceEvent;
 
       setPosition({ x: transform.x, y: transform.y, k: transform.k, dragging: sourceEvent });
       if (!onMove) return;
-      onMove({ x: transform.x, y: transform.y, k: transform.k, dragging: sourceEvent }, event);
+      onMove({ x: transform.x, y: transform.y, zoom: transform.k, dragging: sourceEvent }, d3Event);
     }
 
-    function handleZoomEnd() {
+    function handleZoomEnd(d3Event) {
       if (bypassEvents.current) {
         bypassEvents.current = false;
         return;
       }
 
-      var _projection$invert = projection.invert(getCoords(width, height, event.transform)),
+      var _projection$invert = projection.invert(getCoords(width, height, d3Event.transform)),
           _projection$invert2 = slicedToArray(_projection$invert, 2),
           x = _projection$invert2[0],
           y = _projection$invert2[1];
 
-      lastPosition.current = { x: x, y: y, k: event.transform.k };
+      lastPosition.current = { x: x, y: y, k: d3Event.transform.k };
       if (!onMoveEnd) return;
-      onMoveEnd({ coordinates: [x, y], zoom: event.transform.k }, event);
+      onMoveEnd({ coordinates: [x, y], zoom: d3Event.transform.k }, d3Event);
     }
 
-    function filterFunc() {
+    function filterFunc(d3Event) {
       if (filterZoomEvent) {
-        return filterZoomEvent(event);
+        return filterZoomEvent(d3Event);
       }
-      return event ? !event.ctrlKey && !event.button : false;
+      return d3Event ? !d3Event.ctrlKey && !d3Event.button : false;
     }
 
-    var zoom$1 = zoom().filter(filterFunc).scaleExtent([minZoom, maxZoom]).translateExtent([[a1, a1], [b1, b2]]).on("start", handleZoomStart).on("zoom", handleZoom).on("end", handleZoomEnd);
+    var zoom$1 = zoom().filter(filterFunc).scaleExtent([minZoom, maxZoom]).translateExtent([[a1, a2], [b1, b2]]).on("start", handleZoomStart).on("zoom", handleZoom).on("end", handleZoomEnd);
 
     zoomRef.current = zoom$1;
     svg.call(zoom$1);
@@ -827,4 +870,4 @@ Annotation.propTypes = {
   className: PropTypes.string
 };
 
-export { Annotation, ComposableMap, Geographies, Geography$1 as Geography, Graticule$1 as Graticule, Line, Marker, Sphere$1 as Sphere, ZoomableGroup, useGeographies, useZoomPan };
+export { Annotation, ComposableMap, Geographies, Geography$1 as Geography, Graticule$1 as Graticule, Line, MapContext, MapProvider, Marker, Sphere$1 as Sphere, ZoomableGroup, useGeographies, useZoomPan };

package/dist/index.js

@@ -222,11 +222,33 @@ function fetchGeographies(url) {
 }
 
 function getFeatures(geographies, parseGeographies) {
-  if (Array.isArray(geographies)) return parseGeographies ? parseGeographies(geographies) : geographies;
+  var isTopojson = geographies.type === "Topology";
+  if (!isTopojson) {
+    return parseGeographies ? parseGeographies(geographies.features || geographies) : geographies.features || geographies;
+  }
   var feats = topojsonClient.feature(geographies, geographies.objects[Object.keys(geographies.objects)[0]]).features;
   return parseGeographies ? parseGeographies(feats) : feats;
 }
 
+function getMesh(geographies) {
+  var isTopojson = geographies.type === "Topology";
+  if (!isTopojson) return null;
+  var outline = topojsonClient.mesh(geographies, geographies.objects[Object.keys(geographies.objects)[0]], function (a, b) {
+    return a === b;
+  });
+  var borders = topojsonClient.mesh(geographies, geographies.objects[Object.keys(geographies.objects)[0]], function (a, b) {
+    return a !== b;
+  });
+  return { outline: outline, borders: borders };
+}
+
+function prepareMesh(outline, borders, path) {
+  return outline && borders ? {
+    outline: _extends({}, outline, { rsmKey: "outline", svgPath: path(outline) }),
+    borders: _extends({}, borders, { rsmKey: "borders", svgPath: path(borders) })
+  } : {};
+}
+
 function prepareFeatures(geographies, path) {
   return geographies ? geographies.map(function (d, i) {
     return _extends({}, d, {
@@ -258,28 +280,47 @@ function useGeographies(_ref) {
   var _useContext = React.useContext(MapContext),
       path = _useContext.path;
 
-  var _useState = React.useState(),
+  var _useState = React.useState({}),
       _useState2 = slicedToArray(_useState, 2),
-      geographies = _useState2[0],
-      setGeographies = _useState2[1];
+      output = _useState2[0],
+      setOutput = _useState2[1];
 
   React.useEffect(function () {
     if (typeof window === "undefined") return;
 
+    if (!geography) return;
+
     if (isString(geography)) {
       fetchGeographies(geography).then(function (geos) {
-        if (geos) setGeographies(getFeatures(geos, parseGeographies));
+        if (geos) {
+          setOutput({
+            geographies: getFeatures(geos, parseGeographies),
+            mesh: getMesh(geos)
+          });
+        }
       });
     } else {
-      setGeographies(getFeatures(geography, parseGeographies));
+      setOutput({
+        geographies: getFeatures(geography, parseGeographies),
+        mesh: getMesh(geography)
+      });
     }
   }, [geography, parseGeographies]);
 
-  var output = React.useMemo(function () {
-    return prepareFeatures(geographies, path);
-  }, [geographies, path]);
+  var _useMemo = React.useMemo(function () {
+    var mesh = output.mesh || {};
+    var preparedMesh = prepareMesh(mesh.outline, mesh.borders, path);
+    return {
+      geographies: prepareFeatures(output.geographies, path),
+      outline: preparedMesh.outline,
+      borders: preparedMesh.borders
+    };
+  }, [output, path]),
+      geographies = _useMemo.geographies,
+      outline = _useMemo.outline,
+      borders = _useMemo.borders;
 
-  return { geographies: output };
+  return { geographies: geographies, outline: outline, borders: borders };
 }
 
 var Geographies = function Geographies(_ref) {
@@ -295,12 +336,14 @@ var Geographies = function Geographies(_ref) {
       projection = _useContext.projection;
 
   var _useGeographies = useGeographies({ geography: geography, parseGeographies: parseGeographies }),
-      geographies = _useGeographies.geographies;
+      geographies = _useGeographies.geographies,
+      outline = _useGeographies.outline,
+      borders = _useGeographies.borders;
 
   return React__default.createElement(
     "g",
     _extends({ className: "rsm-geographies " + className }, restProps),
-    geographies && geographies.length > 0 && children({ geographies: geographies, path: path, projection: projection })
+    geographies && geographies.length > 0 && children({ geographies: geographies, outline: outline, borders: borders, path: path, projection: projection })
   );
 };
 
@@ -477,45 +520,45 @@ function useZoomPan(_ref) {
   React.useEffect(function () {
     var svg = d3Selection.select(mapRef.current);
 
-    function handleZoomStart() {
+    function handleZoomStart(d3Event) {
       if (!onMoveStart || bypassEvents.current) return;
-      onMoveStart({ coordinates: projection.invert(getCoords(width, height, d3Selection.event.transform)), zoom: d3Selection.event.transform.k }, d3Selection.event);
+      onMoveStart({ coordinates: projection.invert(getCoords(width, height, d3Event.transform)), zoom: d3Event.transform.k }, d3Event);
     }
 
-    function handleZoom() {
+    function handleZoom(d3Event) {
       if (bypassEvents.current) return;
-      var transform = d3Selection.event.transform,
-          sourceEvent = d3Selection.event.sourceEvent;
+      var transform = d3Event.transform,
+          sourceEvent = d3Event.sourceEvent;
 
       setPosition({ x: transform.x, y: transform.y, k: transform.k, dragging: sourceEvent });
       if (!onMove) return;
-      onMove({ x: transform.x, y: transform.y, k: transform.k, dragging: sourceEvent }, d3Selection.event);
+      onMove({ x: transform.x, y: transform.y, zoom: transform.k, dragging: sourceEvent }, d3Event);
     }
 
-    function handleZoomEnd() {
+    function handleZoomEnd(d3Event) {
       if (bypassEvents.current) {
         bypassEvents.current = false;
         return;
       }
 
-      var _projection$invert = projection.invert(getCoords(width, height, d3Selection.event.transform)),
+      var _projection$invert = projection.invert(getCoords(width, height, d3Event.transform)),
           _projection$invert2 = slicedToArray(_projection$invert, 2),
           x = _projection$invert2[0],
           y = _projection$invert2[1];
 
-      lastPosition.current = { x: x, y: y, k: d3Selection.event.transform.k };
+      lastPosition.current = { x: x, y: y, k: d3Event.transform.k };
       if (!onMoveEnd) return;
-      onMoveEnd({ coordinates: [x, y], zoom: d3Selection.event.transform.k }, d3Selection.event);
+      onMoveEnd({ coordinates: [x, y], zoom: d3Event.transform.k }, d3Event);
     }
 
-    function filterFunc() {
+    function filterFunc(d3Event) {
       if (filterZoomEvent) {
-        return filterZoomEvent(d3Selection.event);
+        return filterZoomEvent(d3Event);
       }
-      return d3Selection.event ? !d3Selection.event.ctrlKey && !d3Selection.event.button : false;
+      return d3Event ? !d3Event.ctrlKey && !d3Event.button : false;
     }
 
-    var zoom = d3Zoom.zoom().filter(filterFunc).scaleExtent([minZoom, maxZoom]).translateExtent([[a1, a1], [b1, b2]]).on("start", handleZoomStart).on("zoom", handleZoom).on("end", handleZoomEnd);
+    var zoom = d3Zoom.zoom().filter(filterFunc).scaleExtent([minZoom, maxZoom]).translateExtent([[a1, a2], [b1, b2]]).on("start", handleZoomStart).on("zoom", handleZoom).on("end", handleZoomEnd);
 
     zoomRef.current = zoom;
     svg.call(zoom);
@@ -839,6 +882,8 @@ exports.Geographies = Geographies;
 exports.Geography = Geography$1;
 exports.Graticule = Graticule$1;
 exports.Line = Line;
+exports.MapContext = MapContext;
+exports.MapProvider = MapProvider;
 exports.Marker = Marker;
 exports.Sphere = Sphere$1;
 exports.ZoomableGroup = ZoomableGroup;

package/dist/index.umd.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("d3-geo"),require("topojson-client"),require("d3-zoom"),require("d3-selection")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","d3-geo","topojson-client","d3-zoom","d3-selection"],t):t((e=e||self).reactSimpleMaps=e.reactSimpleMaps||{},e.React,e.PropTypes,e.d3,e.topojson,e.d3,e.d3)}(this,function(e,t,o,n,r,a,s){"use strict";var i="default"in t?t.default:t;o=o&&o.hasOwnProperty("default")?o.default:o;var c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},u=function(e,t){var o={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(o[n]=e[n]);return o},l=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var o=[],n=!0,r=!1,a=void 0;try{for(var s,i=e[Symbol.iterator]();!(n=(s=i.next()).done)&&(o.push(s.value),!t||o.length!==t);n=!0);}catch(e){r=!0,a=e}finally{try{!n&&i.return&&i.return()}finally{if(r)throw a}}return o}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")},f=n.geoPath,p=u(n,["geoPath"]),d=t.createContext(),m=function(e){var o=e.width,n=e.height,r=e.projection,a=e.projectionConfig,s=u(e,["width","height","projection","projectionConfig"]),m=a.center||[],v=l(m,2),h=v[0],g=v[1],y=a.rotate||[],M=l(y,3),E=M[0],j=M[1],x=M[2],k=a.parallels||[],b=l(k,2),N=b[0],w=b[1],C=a.scale||null,S=t.useMemo(function(){return function(e){var t=e.projectionConfig,o=void 0===t?{}:t,n=e.projection,r=void 0===n?"geoEqualEarth":n,a=e.width,s=void 0===a?800:a,i=e.height,c=void 0===i?600:i;if("function"==typeof r)return r;var u=p[r]().translate([s/2,c/2]);return[u.center?"center":null,u.rotate?"rotate":null,u.scale?"scale":null,u.parallels?"parallels":null].forEach(function(e){e&&(u=u[e](o[e]||u[e]()))}),u}({projectionConfig:{center:h||0===h||g||0===g?[h,g]:null,rotate:E||0===E||j||0===j?[E,j,x]:null,parallels:N||0===N||w||0===w?[N,w]:null,scale:C},projection:r,width:o,height:n})},[o,n,r,h,g,E,j,x,N,w,C]),T=t.useCallback(S,[S]),O=t.useMemo(function(){return{width:o,height:n,projection:T,path:f().projection(T)}},[o,n,T]);return i.createElement(d.Provider,c({value:O},s))};m.propTypes={width:o.number,height:o.number,projection:o.oneOfType([o.string,o.func]),projectionConfig:o.object};var v=function(e){var t=e.width,o=void 0===t?800:t,n=e.height,r=void 0===n?600:n,a=e.projection,s=void 0===a?"geoEqualEarth":a,l=e.projectionConfig,f=void 0===l?{}:l,p=e.className,d=void 0===p?"":p,v=u(e,["width","height","projection","projectionConfig","className"]);return i.createElement(m,{width:o,height:r,projection:s,projectionConfig:f},i.createElement("svg",c({viewBox:"0 0 "+o+" "+r,className:"rsm-svg "+d},v)))};function h(e,t,o){var n=(e*o.k-e)/2,r=(t*o.k-t)/2;return[e/2-(n+o.x)/o.k,t/2-(r+o.y)/o.k]}function g(e,t){if(Array.isArray(e))return t?t(e):e;var o=r.feature(e,e.objects[Object.keys(e.objects)[0]]).features;return t?t(o):o}function y(e){var o=e.geography,n=e.parseGeographies,r=t.useContext(d).path,a=t.useState(),s=l(a,2),i=s[0],u=s[1];return t.useEffect(function(){var e;"undefined"!=typeof window&&("string"==typeof o?(e=o,fetch(e).then(function(e){if(!e.ok)throw Error(e.statusText);return e.json()}).catch(function(e){console.log("There was a problem when fetching the data: ",e)})).then(function(e){e&&u(g(e,n))}):u(g(o,n)))},[o,n]),{geographies:t.useMemo(function(){return function(e,t){return e?e.map(function(e,o){return c({},e,{rsmKey:"geo-"+o,svgPath:t(e)})}):[]}(i,r)},[i,r])}}v.propTypes={width:o.number,height:o.number,projection:o.oneOfType([o.string,o.func]),projectionConfig:o.object,className:o.string};var M=function(e){var o=e.geography,n=e.children,r=e.parseGeographies,a=e.className,s=void 0===a?"":a,l=u(e,["geography","children","parseGeographies","className"]),f=t.useContext(d),p=f.path,m=f.projection,v=y({geography:o,parseGeographies:r}).geographies;return i.createElement("g",c({className:"rsm-geographies "+s},l),v&&v.length>0&&n({geographies:v,path:p,projection:m}))};M.propTypes={geography:o.oneOfType([o.string,o.object,o.array]),children:o.func,parseGeographies:o.func,className:o.string};var E=function(e){var o=e.geography,n=e.onMouseEnter,r=e.onMouseLeave,a=e.onMouseDown,s=e.onMouseUp,f=e.onFocus,p=e.onBlur,d=e.style,m=void 0===d?{}:d,v=e.className,h=void 0===v?"":v,g=u(e,["geography","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","onFocus","onBlur","style","className"]),y=t.useState(!1),M=l(y,2),E=M[0],j=M[1],x=t.useState(!1),k=l(x,2),b=k[0],N=k[1];return i.createElement("path",c({tabIndex:"0",className:"rsm-geography "+h,d:o.svgPath,onMouseEnter:function(e){N(!0),n&&n(e)},onMouseLeave:function(e){N(!1),E&&j(!1),r&&r(e)},onFocus:function(e){N(!0),f&&f(e)},onBlur:function(e){N(!1),E&&j(!1),p&&p(e)},onMouseDown:function(e){j(!0),a&&a(e)},onMouseUp:function(e){j(!1),s&&s(e)},style:m[E||b?E?"pressed":"hover":"default"]},g))};E.propTypes={geography:o.object,onMouseEnter:o.func,onMouseLeave:o.func,onMouseDown:o.func,onMouseUp:o.func,onFocus:o.func,onBlur:o.func,style:o.object,className:o.string};var j=t.memo(E),x=function(e){var o=e.fill,r=void 0===o?"transparent":o,a=e.stroke,s=void 0===a?"currentcolor":a,l=e.step,f=void 0===l?[10,10]:l,p=e.className,m=void 0===p?"":p,v=u(e,["fill","stroke","step","className"]),h=t.useContext(d).path;return i.createElement("path",c({d:h(n.geoGraticule().step(f)()),fill:r,stroke:s,className:"rsm-graticule "+m},v))};x.propTypes={fill:o.string,stroke:o.string,step:o.array,className:o.string};var k=t.memo(x);function b(e){var o=e.center,n=e.filterZoomEvent,r=e.onMoveStart,i=e.onMoveEnd,c=e.onMove,u=e.translateExtent,f=void 0===u?[[-1/0,-1/0],[1/0,1/0]]:u,p=e.scaleExtent,m=void 0===p?[1,8]:p,v=e.zoom,g=void 0===v?1:v,y=t.useContext(d),M=y.width,E=y.height,j=y.projection,x=l(o,2),k=x[0],b=x[1],N=t.useState({x:0,y:0,k:1}),w=l(N,2),C=w[0],S=w[1],T=t.useRef({x:0,y:0,k:1}),O=t.useRef(),P=t.useRef(),z=t.useRef(!1),Z=l(f,2),G=Z[0],L=Z[1],B=l(G,2),F=B[0],q=B[1],D=l(L,2),U=D[0],W=D[1],A=l(m,2),R=A[0],I=A[1];return t.useEffect(function(){var e=s.select(O.current);var t=a.zoom().filter(function(){return n?n(s.event):!!s.event&&!s.event.ctrlKey&&!s.event.button}).scaleExtent([R,I]).translateExtent([[F,F],[U,W]]).on("start",function(){r&&!z.current&&r({coordinates:j.invert(h(M,E,s.event.transform)),zoom:s.event.transform.k},s.event)}).on("zoom",function(){if(!z.current){var e=s.event.transform,t=s.event.sourceEvent;S({x:e.x,y:e.y,k:e.k,dragging:t}),c&&c({x:e.x,y:e.y,k:e.k,dragging:t},s.event)}}).on("end",function(){if(z.current)z.current=!1;else{var e=j.invert(h(M,E,s.event.transform)),t=l(e,2),o=t[0],n=t[1];T.current={x:o,y:n,k:s.event.transform.k},i&&i({coordinates:[o,n],zoom:s.event.transform.k},s.event)}});P.current=t,e.call(t)},[M,E,F,q,U,W,R,I,j,r,c,i,n]),t.useEffect(function(){if(k!==T.current.x||b!==T.current.y||g!==T.current.k){var e=j([k,b]),t=e[0]*g,o=e[1]*g,n=s.select(O.current);z.current=!0,n.call(P.current.transform,a.zoomIdentity.translate(M/2-t,E/2-o).scale(g)),S({x:M/2-t,y:E/2-o,k:g}),T.current={x:k,y:b,k:g}}},[k,b,g,M,E,j]),{mapRef:O,position:C,transformString:"translate("+C.x+" "+C.y+") scale("+C.k+")"}}var N=function(e){var o=e.center,n=void 0===o?[0,0]:o,r=e.zoom,a=void 0===r?1:r,s=e.minZoom,l=void 0===s?1:s,f=e.maxZoom,p=void 0===f?8:f,m=e.translateExtent,v=e.filterZoomEvent,h=e.onMoveStart,g=e.onMove,y=e.onMoveEnd,M=e.className,E=u(e,["center","zoom","minZoom","maxZoom","translateExtent","filterZoomEvent","onMoveStart","onMove","onMoveEnd","className"]),j=t.useContext(d),x=j.width,k=j.height,N=b({center:n,filterZoomEvent:v,onMoveStart:h,onMove:g,onMoveEnd:y,scaleExtent:[l,p],translateExtent:m,zoom:a}),w=N.mapRef,C=N.transformString;return i.createElement("g",{ref:w},i.createElement("rect",{width:x,height:k,fill:"transparent"}),i.createElement("g",c({transform:C,className:"rsm-zoomable-group "+M},E)))};N.propTypes={center:o.array,zoom:o.number,minZoom:o.number,maxZoom:o.number,translateExtent:o.arrayOf(o.array),onMoveStart:o.func,onMove:o.func,onMoveEnd:o.func,className:o.string};var w=function(e){var o=e.id,n=void 0===o?"rsm-sphere":o,r=e.fill,a=void 0===r?"transparent":r,s=e.stroke,l=void 0===s?"currentcolor":s,f=e.strokeWidth,p=void 0===f?.5:f,m=e.className,v=void 0===m?"":m,h=u(e,["id","fill","stroke","strokeWidth","className"]),g=t.useContext(d).path,y=t.useMemo(function(){return g({type:"Sphere"})},[g]);return i.createElement(t.Fragment,null,i.createElement("defs",null,i.createElement("clipPath",{id:n},i.createElement("path",{d:y}))),i.createElement("path",c({d:y,fill:a,stroke:l,strokeWidth:p,style:{pointerEvents:"none"},className:"rsm-sphere "+v},h)))};w.propTypes={id:o.string,fill:o.string,stroke:o.string,strokeWidth:o.number,className:o.string};var C=t.memo(w),S=function(e){var o=e.coordinates,n=e.children,r=e.onMouseEnter,a=e.onMouseLeave,s=e.onMouseDown,f=e.onMouseUp,p=e.onFocus,m=e.onBlur,v=e.style,h=void 0===v?{}:v,g=e.className,y=void 0===g?"":g,M=u(e,["coordinates","children","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","onFocus","onBlur","style","className"]),E=t.useContext(d).projection,j=t.useState(!1),x=l(j,2),k=x[0],b=x[1],N=t.useState(!1),w=l(N,2),C=w[0],S=w[1],T=E(o),O=l(T,2),P=O[0],z=O[1];return i.createElement("g",c({transform:"translate("+P+", "+z+")",className:"rsm-marker "+y,onMouseEnter:function(e){S(!0),r&&r(e)},onMouseLeave:function(e){S(!1),k&&b(!1),a&&a(e)},onFocus:function(e){S(!0),p&&p(e)},onBlur:function(e){S(!1),k&&b(!1),m&&m(e)},onMouseDown:function(e){b(!0),s&&s(e)},onMouseUp:function(e){b(!1),f&&f(e)},style:h[k||C?k?"pressed":"hover":"default"]},M),n)};S.propTypes={coordinates:o.array,children:o.oneOfType([o.node,o.arrayOf(o.node)]),onMouseEnter:o.func,onMouseLeave:o.func,onMouseDown:o.func,onMouseUp:o.func,onFocus:o.func,onBlur:o.func,style:o.object,className:o.string};var T=function(e){var o=e.from,n=void 0===o?[0,0]:o,r=e.to,a=void 0===r?[0,0]:r,s=e.coordinates,l=e.stroke,f=void 0===l?"currentcolor":l,p=e.strokeWidth,m=void 0===p?3:p,v=e.fill,h=void 0===v?"transparent":v,g=e.className,y=void 0===g?"":g,M=u(e,["from","to","coordinates","stroke","strokeWidth","fill","className"]),E=t.useContext(d).path,j={type:"LineString",coordinates:s||[n,a]};return i.createElement("path",c({d:E(j),className:"rsm-line "+y,stroke:f,strokeWidth:m,fill:h},M))};T.propTypes={from:o.array,to:o.array,coordinates:o.array,stroke:o.string,strokeWidth:o.number,fill:o.string,className:o.string};var O=function(e){var o=e.subject,n=e.children,r=e.connectorProps,a=e.dx,s=void 0===a?30:a,f=e.dy,p=void 0===f?30:f,m=e.curve,v=void 0===m?0:m,h=e.className,g=void 0===h?"":h,y=u(e,["subject","children","connectorProps","dx","dy","curve","className"]),M=(0,t.useContext(d).projection)(o),E=l(M,2),j=E[0],x=E[1],k=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:30,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:30,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.5,n=Array.isArray(o)?o:[o,o];return"M0,0 Q"+(-e/2-e/2*n[0])+","+(-t/2+t/2*n[1])+" "+-e+","+-t}(s,p,v);return i.createElement("g",c({transform:"translate("+(j+s)+", "+(x+p)+")",className:"rsm-annotation "+g},y),i.createElement("path",c({d:k,fill:"transparent",stroke:"#000"},r)),n)};O.propTypes={subject:o.array,children:o.oneOfType([o.node,o.arrayOf(o.node)]),dx:o.number,dy:o.number,curve:o.number,connectorProps:o.object,className:o.string},e.Annotation=O,e.ComposableMap=v,e.Geographies=M,e.Geography=j,e.Graticule=k,e.Line=T,e.Marker=S,e.Sphere=C,e.ZoomableGroup=N,e.useGeographies=y,e.useZoomPan=b,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("react"),require("prop-types"),require("d3-geo"),require("topojson-client"),require("d3-zoom"),require("d3-selection")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","d3-geo","topojson-client","d3-zoom","d3-selection"],o):o((e=e||self).reactSimpleMaps=e.reactSimpleMaps||{},e.React,e.PropTypes,e.d3,e.topojson,e.d3,e.d3)}(this,(function(e,o,t,r,n,a,s){"use strict";var i="default"in o?o.default:o;t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var c=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},u=function(e,o){var t={};for(var r in e)o.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t},l=function(e,o){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,o){var t=[],r=!0,n=!1,a=void 0;try{for(var s,i=e[Symbol.iterator]();!(r=(s=i.next()).done)&&(t.push(s.value),!o||t.length!==o);r=!0);}catch(e){n=!0,a=e}finally{try{!r&&i.return&&i.return()}finally{if(n)throw a}}return t}(e,o);throw new TypeError("Invalid attempt to destructure non-iterable instance")},p=r.geoPath,f=u(r,["geoPath"]),d=o.createContext(),m=function(e){var t=e.width,r=e.height,n=e.projection,a=e.projectionConfig,s=u(e,["width","height","projection","projectionConfig"]),m=a.center||[],h=l(m,2),v=h[0],g=h[1],y=a.rotate||[],M=l(y,3),b=M[0],E=M[1],j=M[2],x=a.parallels||[],k=l(x,2),N=k[0],w=k[1],C=a.scale||null,O=o.useMemo((function(){return function(e){var o=e.projectionConfig,t=void 0===o?{}:o,r=e.projection,n=void 0===r?"geoEqualEarth":r,a=e.width,s=void 0===a?800:a,i=e.height,c=void 0===i?600:i;if("function"==typeof n)return n;var u=f[n]().translate([s/2,c/2]);return[u.center?"center":null,u.rotate?"rotate":null,u.scale?"scale":null,u.parallels?"parallels":null].forEach((function(e){e&&(u=u[e](t[e]||u[e]()))})),u}({projectionConfig:{center:v||0===v||g||0===g?[v,g]:null,rotate:b||0===b||E||0===E?[b,E,j]:null,parallels:N||0===N||w||0===w?[N,w]:null,scale:C},projection:n,width:t,height:r})}),[t,r,n,v,g,b,E,j,N,w,C]),T=o.useCallback(O,[O]),S=o.useMemo((function(){return{width:t,height:r,projection:T,path:p().projection(T)}}),[t,r,T]);return i.createElement(d.Provider,c({value:S},s))};m.propTypes={width:t.number,height:t.number,projection:t.oneOfType([t.string,t.func]),projectionConfig:t.object};var h=function(e){var o=e.width,t=void 0===o?800:o,r=e.height,n=void 0===r?600:r,a=e.projection,s=void 0===a?"geoEqualEarth":a,l=e.projectionConfig,p=void 0===l?{}:l,f=e.className,d=void 0===f?"":f,h=u(e,["width","height","projection","projectionConfig","className"]);return i.createElement(m,{width:t,height:n,projection:s,projectionConfig:p},i.createElement("svg",c({viewBox:"0 0 "+t+" "+n,className:"rsm-svg "+d},h)))};function v(e,o,t){var r=(e*t.k-e)/2,n=(o*t.k-o)/2;return[e/2-(r+t.x)/t.k,o/2-(n+t.y)/t.k]}function g(e,o){if(!("Topology"===e.type))return o?o(e.features||e):e.features||e;var t=n.feature(e,e.objects[Object.keys(e.objects)[0]]).features;return o?o(t):t}function y(e){return"Topology"===e.type?{outline:n.mesh(e,e.objects[Object.keys(e.objects)[0]],(function(e,o){return e===o})),borders:n.mesh(e,e.objects[Object.keys(e.objects)[0]],(function(e,o){return e!==o}))}:null}function M(e,o){return e?e.map((function(e,t){return c({},e,{rsmKey:"geo-"+t,svgPath:o(e)})})):[]}function b(e){var t=e.geography,r=e.parseGeographies,n=o.useContext(d).path,a=o.useState({}),s=l(a,2),i=s[0],u=s[1];o.useEffect((function(){var e;"undefined"!=typeof window&&(t&&("string"==typeof t?(e=t,fetch(e).then((function(e){if(!e.ok)throw Error(e.statusText);return e.json()})).catch((function(e){console.log("There was a problem when fetching the data: ",e)}))).then((function(e){e&&u({geographies:g(e,r),mesh:y(e)})})):u({geographies:g(t,r),mesh:y(t)})))}),[t,r]);var p=o.useMemo((function(){var e=i.mesh||{},o=function(e,o,t){return e&&o?{outline:c({},e,{rsmKey:"outline",svgPath:t(e)}),borders:c({},o,{rsmKey:"borders",svgPath:t(o)})}:{}}(e.outline,e.borders,n);return{geographies:M(i.geographies,n),outline:o.outline,borders:o.borders}}),[i,n]);return{geographies:p.geographies,outline:p.outline,borders:p.borders}}h.propTypes={width:t.number,height:t.number,projection:t.oneOfType([t.string,t.func]),projectionConfig:t.object,className:t.string};var E=function(e){var t=e.geography,r=e.children,n=e.parseGeographies,a=e.className,s=void 0===a?"":a,l=u(e,["geography","children","parseGeographies","className"]),p=o.useContext(d),f=p.path,m=p.projection,h=b({geography:t,parseGeographies:n}),v=h.geographies,g=h.outline,y=h.borders;return i.createElement("g",c({className:"rsm-geographies "+s},l),v&&v.length>0&&r({geographies:v,outline:g,borders:y,path:f,projection:m}))};E.propTypes={geography:t.oneOfType([t.string,t.object,t.array]),children:t.func,parseGeographies:t.func,className:t.string};var j=function(e){var t=e.geography,r=e.onMouseEnter,n=e.onMouseLeave,a=e.onMouseDown,s=e.onMouseUp,p=e.onFocus,f=e.onBlur,d=e.style,m=void 0===d?{}:d,h=e.className,v=void 0===h?"":h,g=u(e,["geography","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","onFocus","onBlur","style","className"]),y=o.useState(!1),M=l(y,2),b=M[0],E=M[1],j=o.useState(!1),x=l(j,2),k=x[0],N=x[1];return i.createElement("path",c({tabIndex:"0",className:"rsm-geography "+v,d:t.svgPath,onMouseEnter:function(e){N(!0),r&&r(e)},onMouseLeave:function(e){N(!1),b&&E(!1),n&&n(e)},onFocus:function(e){N(!0),p&&p(e)},onBlur:function(e){N(!1),b&&E(!1),f&&f(e)},onMouseDown:function(e){E(!0),a&&a(e)},onMouseUp:function(e){E(!1),s&&s(e)},style:m[b||k?b?"pressed":"hover":"default"]},g))};j.propTypes={geography:t.object,onMouseEnter:t.func,onMouseLeave:t.func,onMouseDown:t.func,onMouseUp:t.func,onFocus:t.func,onBlur:t.func,style:t.object,className:t.string};var x=o.memo(j),k=function(e){var t=e.fill,n=void 0===t?"transparent":t,a=e.stroke,s=void 0===a?"currentcolor":a,l=e.step,p=void 0===l?[10,10]:l,f=e.className,m=void 0===f?"":f,h=u(e,["fill","stroke","step","className"]),v=o.useContext(d).path;return i.createElement("path",c({d:v(r.geoGraticule().step(p)()),fill:n,stroke:s,className:"rsm-graticule "+m},h))};k.propTypes={fill:t.string,stroke:t.string,step:t.array,className:t.string};var N=o.memo(k);function w(e){var t=e.center,r=e.filterZoomEvent,n=e.onMoveStart,i=e.onMoveEnd,c=e.onMove,u=e.translateExtent,p=void 0===u?[[-1/0,-1/0],[1/0,1/0]]:u,f=e.scaleExtent,m=void 0===f?[1,8]:f,h=e.zoom,g=void 0===h?1:h,y=o.useContext(d),M=y.width,b=y.height,E=y.projection,j=l(t,2),x=j[0],k=j[1],N=o.useState({x:0,y:0,k:1}),w=l(N,2),C=w[0],O=w[1],T=o.useRef({x:0,y:0,k:1}),S=o.useRef(),P=o.useRef(),z=o.useRef(!1),Z=l(p,2),G=Z[0],L=Z[1],B=l(G,2),F=B[0],q=B[1],D=l(L,2),U=D[0],W=D[1],R=l(m,2),A=R[0],K=R[1];return o.useEffect((function(){var e=s.select(S.current);var o=a.zoom().filter((function(e){return r?r(e):!!e&&(!e.ctrlKey&&!e.button)})).scaleExtent([A,K]).translateExtent([[F,q],[U,W]]).on("start",(function(e){n&&!z.current&&n({coordinates:E.invert(v(M,b,e.transform)),zoom:e.transform.k},e)})).on("zoom",(function(e){if(!z.current){var o=e.transform,t=e.sourceEvent;O({x:o.x,y:o.y,k:o.k,dragging:t}),c&&c({x:o.x,y:o.y,zoom:o.k,dragging:t},e)}})).on("end",(function(e){if(z.current)z.current=!1;else{var o=E.invert(v(M,b,e.transform)),t=l(o,2),r=t[0],n=t[1];T.current={x:r,y:n,k:e.transform.k},i&&i({coordinates:[r,n],zoom:e.transform.k},e)}}));P.current=o,e.call(o)}),[M,b,F,q,U,W,A,K,E,n,c,i,r]),o.useEffect((function(){if(x!==T.current.x||k!==T.current.y||g!==T.current.k){var e=E([x,k]),o=e[0]*g,t=e[1]*g,r=s.select(S.current);z.current=!0,r.call(P.current.transform,a.zoomIdentity.translate(M/2-o,b/2-t).scale(g)),O({x:M/2-o,y:b/2-t,k:g}),T.current={x:x,y:k,k:g}}}),[x,k,g,M,b,E]),{mapRef:S,position:C,transformString:"translate("+C.x+" "+C.y+") scale("+C.k+")"}}var C=function(e){var t=e.center,r=void 0===t?[0,0]:t,n=e.zoom,a=void 0===n?1:n,s=e.minZoom,l=void 0===s?1:s,p=e.maxZoom,f=void 0===p?8:p,m=e.translateExtent,h=e.filterZoomEvent,v=e.onMoveStart,g=e.onMove,y=e.onMoveEnd,M=e.className,b=u(e,["center","zoom","minZoom","maxZoom","translateExtent","filterZoomEvent","onMoveStart","onMove","onMoveEnd","className"]),E=o.useContext(d),j=E.width,x=E.height,k=w({center:r,filterZoomEvent:h,onMoveStart:v,onMove:g,onMoveEnd:y,scaleExtent:[l,f],translateExtent:m,zoom:a}),N=k.mapRef,C=k.transformString;return i.createElement("g",{ref:N},i.createElement("rect",{width:j,height:x,fill:"transparent"}),i.createElement("g",c({transform:C,className:"rsm-zoomable-group "+M},b)))};C.propTypes={center:t.array,zoom:t.number,minZoom:t.number,maxZoom:t.number,translateExtent:t.arrayOf(t.array),onMoveStart:t.func,onMove:t.func,onMoveEnd:t.func,className:t.string};var O=function(e){var t=e.id,r=void 0===t?"rsm-sphere":t,n=e.fill,a=void 0===n?"transparent":n,s=e.stroke,l=void 0===s?"currentcolor":s,p=e.strokeWidth,f=void 0===p?.5:p,m=e.className,h=void 0===m?"":m,v=u(e,["id","fill","stroke","strokeWidth","className"]),g=o.useContext(d).path,y=o.useMemo((function(){return g({type:"Sphere"})}),[g]);return i.createElement(o.Fragment,null,i.createElement("defs",null,i.createElement("clipPath",{id:r},i.createElement("path",{d:y}))),i.createElement("path",c({d:y,fill:a,stroke:l,strokeWidth:f,style:{pointerEvents:"none"},className:"rsm-sphere "+h},v)))};O.propTypes={id:t.string,fill:t.string,stroke:t.string,strokeWidth:t.number,className:t.string};var T=o.memo(O),S=function(e){var t=e.coordinates,r=e.children,n=e.onMouseEnter,a=e.onMouseLeave,s=e.onMouseDown,p=e.onMouseUp,f=e.onFocus,m=e.onBlur,h=e.style,v=void 0===h?{}:h,g=e.className,y=void 0===g?"":g,M=u(e,["coordinates","children","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","onFocus","onBlur","style","className"]),b=o.useContext(d).projection,E=o.useState(!1),j=l(E,2),x=j[0],k=j[1],N=o.useState(!1),w=l(N,2),C=w[0],O=w[1],T=b(t),S=l(T,2),P=S[0],z=S[1];return i.createElement("g",c({transform:"translate("+P+", "+z+")",className:"rsm-marker "+y,onMouseEnter:function(e){O(!0),n&&n(e)},onMouseLeave:function(e){O(!1),x&&k(!1),a&&a(e)},onFocus:function(e){O(!0),f&&f(e)},onBlur:function(e){O(!1),x&&k(!1),m&&m(e)},onMouseDown:function(e){k(!0),s&&s(e)},onMouseUp:function(e){k(!1),p&&p(e)},style:v[x||C?x?"pressed":"hover":"default"]},M),r)};S.propTypes={coordinates:t.array,children:t.oneOfType([t.node,t.arrayOf(t.node)]),onMouseEnter:t.func,onMouseLeave:t.func,onMouseDown:t.func,onMouseUp:t.func,onFocus:t.func,onBlur:t.func,style:t.object,className:t.string};var P=function(e){var t=e.from,r=void 0===t?[0,0]:t,n=e.to,a=void 0===n?[0,0]:n,s=e.coordinates,l=e.stroke,p=void 0===l?"currentcolor":l,f=e.strokeWidth,m=void 0===f?3:f,h=e.fill,v=void 0===h?"transparent":h,g=e.className,y=void 0===g?"":g,M=u(e,["from","to","coordinates","stroke","strokeWidth","fill","className"]),b=o.useContext(d).path,E={type:"LineString",coordinates:s||[r,a]};return i.createElement("path",c({d:b(E),className:"rsm-line "+y,stroke:p,strokeWidth:m,fill:v},M))};P.propTypes={from:t.array,to:t.array,coordinates:t.array,stroke:t.string,strokeWidth:t.number,fill:t.string,className:t.string};var z=function(e){var t=e.subject,r=e.children,n=e.connectorProps,a=e.dx,s=void 0===a?30:a,p=e.dy,f=void 0===p?30:p,m=e.curve,h=void 0===m?0:m,v=e.className,g=void 0===v?"":v,y=u(e,["subject","children","connectorProps","dx","dy","curve","className"]),M=(0,o.useContext(d).projection)(t),b=l(M,2),E=b[0],j=b[1],x=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:30,o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:30,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.5,r=Array.isArray(t)?t:[t,t],n=e/2*r[0],a=o/2*r[1];return"M0,0 Q"+(-e/2-n)+","+(-o/2+a)+" "+-e+","+-o}(s,f,h);return i.createElement("g",c({transform:"translate("+(E+s)+", "+(j+f)+")",className:"rsm-annotation "+g},y),i.createElement("path",c({d:x,fill:"transparent",stroke:"#000"},n)),r)};z.propTypes={subject:t.array,children:t.oneOfType([t.node,t.arrayOf(t.node)]),dx:t.number,dy:t.number,curve:t.number,connectorProps:t.object,className:t.string},e.Annotation=z,e.ComposableMap=h,e.Geographies=E,e.Geography=x,e.Graticule=N,e.Line=P,e.MapContext=d,e.MapProvider=m,e.Marker=S,e.Sphere=T,e.ZoomableGroup=C,e.useGeographies=b,e.useZoomPan=w,Object.defineProperty(e,"__esModule",{value:!0})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-maps",
-  "version": "2.1.2",
+  "version": "3.0.0-beta.1",
   "description": "An svg map chart component built with and for React",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -46,20 +46,20 @@
     "rollup-plugin-terser": "^5.1.1",
     "expect": "^23.5.0",
     "mocha": "^5.2.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "prop-types": "^15.7.2",
     "react-test-utils": "^0.0.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
+    "react": "^16.8.0 || 17.x || 18.x",
+    "react-dom": "^16.8.0 || 17.x || 18.x",
     "prop-types": "^15.7.2"
   },
   "dependencies": {
-    "d3-geo": "^1.11.9",
-    "d3-selection": "^1.4.1",
-    "d3-zoom": "^1.8.3",
-    "topojson-client": "^3.0.0"
+    "d3-geo": "^3.0.1",
+    "d3-selection": "^3.0.0",
+    "d3-zoom": "^3.0.0",
+    "topojson-client": "^3.1.0"
   }
 }