react-simple-maps 3.0.0-beta.3 → 3.0.0-beta.6

package/README.md

@@ -1,7 +1,7 @@
-
 <img src="https://img.shields.io/bundlephobia/minzip/react-simple-maps?color=%2328cb95&label=gzip" />
 
 # react-simple-maps
+
 Create beautiful SVG maps in react with d3-geo and topojson using a declarative api.
 
 Read the [docs](https://www.react-simple-maps.io/docs/getting-started/), or check out the [examples](https://www.react-simple-maps.io/examples/).
@@ -28,38 +28,36 @@ $ yarn add react-simple-maps
 
 ### Usage
 
-`React-simple-maps` exposes a set of components that can be combined to create svg maps with markers and annotations. In order to render a map you have to provide a reference to a valid topojson file. You can find example topojson files in the [`topojson-maps` folder](https://github.com/zcreativelabs/react-simple-maps/tree/master/topojson-maps) or on [topojson world-atlas](https://github.com/topojson/world-atlas). To learn how to make your own topojson maps from shapefiles, please read ["How to convert and prepare TopoJSON files for interactive mapping with d3"](https://hackernoon.com/how-to-convert-and-prepare-topojson-files-for-interactive-mapping-with-d3-499cf0ced5f) on medium.
+`React-simple-maps` exposes a set of components that can be combined to create svg maps with markers and annotations. In order to render a map you have to provide a reference to a valid topojson file. You can find example topojson files on [here](https://github.com/topojson/world-atlas) or [here](https://github.com/deldersveld/topojson). To learn how to make your own topojson maps from shapefiles, please read ["How to convert and prepare TopoJSON files for interactive mapping with d3"](https://hackernoon.com/how-to-convert-and-prepare-topojson-files-for-interactive-mapping-with-d3-499cf0ced5f) on medium.
 
 ```jsx
-import React from "react"
-import ReactDOM from "react-dom"
-import {
-  ComposableMap,
-  Geographies,
-  Geography,
-} from "react-simple-maps"
+import React from "react";
+import ReactDOM from "react-dom";
+import { ComposableMap, Geographies, Geography } from "react-simple-maps";
 
 // url to a valid topojson file
 const geoUrl =
-  "https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-110m.json"
+  "https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json";
 
 const App = () => {
   return (
     <div>
       <ComposableMap>
         <Geographies geography={geoUrl}>
-          {({geographies}) => geographies.map(geo =>
-            <Geography key={geo.rsmKey} geography={geo} />
-          )}
+          {({ geographies }) =>
+            geographies.map((geo) => (
+              <Geography key={geo.rsmKey} geography={geo} />
+            ))
+          }
         </Geographies>
       </ComposableMap>
     </div>
-  )
-}
+  );
+};
 
 document.addEventListener("DOMContentLoaded", () => {
-  ReactDOM.render(<App />, document.getElementById("app"))
-})
+  ReactDOM.render(<App />, document.getElementById("app"));
+});
 ```
 
 Check out the [live example](https://codesandbox.io/s/basic-map-wvlol)
@@ -68,5 +66,16 @@ The above will render a world map using the [equal earth projection](https://obs
 
 For other examples and components, check out the [documentation](https://www.react-simple-maps.io/docs/getting-started).
 
+### Map files
+
+React-simple-maps does not restrict you to one specific map and relies on custom map files that you can modify in any way necessary for the project. This means that you can visualise countries, regions, and continents in various resolutions, as long as they can be represented using geojson/topojson.
+
+In order for this to work properly, you will however need to provide these valid map files to react-simple-maps yourself. Luckily, there are decent sources for map files on github and elsewhere. Here are some you can check out:
+
+* [Natural Earth](https://github.com/nvkelso/natural-earth-vector)
+* [Topojson maps by @deldersveld](https://github.com/deldersveld/topojson)
+* [Topojson world atlas](https://github.com/topojson/world-atlas)
+
 ### License
+
 MIT licensed. Copyright (c) Richard Zimerman 2017. See [LICENSE.md](https://github.com/zcreativelabs/react-simple-maps/blob/master/LICENSE) for more details.

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { createContext, useMemo, useCallback, useContext, useState, useEffect, memo, useRef, Fragment } from 'react';
+import React, { createContext, useMemo, useCallback, forwardRef, useContext, useState, useEffect, memo, useRef, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import * as d3Geo from 'd3-geo';
 import { geoGraticule } from 'd3-geo';
@@ -255,8 +255,7 @@ MapProvider.propTypes = {
 };
 
 var _excluded$8 = ["width", "height", "projection", "projectionConfig", "className"];
-
-var ComposableMap = function ComposableMap(_ref) {
+var ComposableMap = forwardRef(function (_ref, ref) {
   var _ref$width = _ref.width,
       width = _ref$width === void 0 ? 800 : _ref$width,
       _ref$height = _ref.height,
@@ -275,11 +274,12 @@ var ComposableMap = function ComposableMap(_ref) {
     projection: projection,
     projectionConfig: projectionConfig
   }, /*#__PURE__*/React.createElement("svg", _extends({
+    ref: ref,
     viewBox: "0 0 ".concat(width, " ").concat(height),
     className: "rsm-svg ".concat(className)
   }, restProps)));
-};
-
+});
+ComposableMap.displayName = "ComposableMap";
 ComposableMap.propTypes = {
   width: PropTypes.number,
   height: PropTypes.number,
@@ -415,8 +415,7 @@ function useGeographies(_ref) {
 }
 
 var _excluded$7 = ["geography", "children", "parseGeographies", "className"];
-
-var Geographies = function Geographies(_ref) {
+var Geographies = forwardRef(function (_ref, ref) {
   var geography = _ref.geography,
       children = _ref.children,
       parseGeographies = _ref.parseGeographies,
@@ -437,6 +436,7 @@ var Geographies = function Geographies(_ref) {
       borders = _useGeographies.borders;
 
   return /*#__PURE__*/React.createElement("g", _extends({
+    ref: ref,
     className: "rsm-geographies ".concat(className)
   }, restProps), geographies && geographies.length > 0 && children({
     geographies: geographies,
@@ -445,8 +445,8 @@ var Geographies = function Geographies(_ref) {
     path: path,
     projection: projection
   }));
-};
-
+});
+Geographies.displayName = "Geographies";
 Geographies.propTypes = {
   geography: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array]),
   children: PropTypes.func,
@@ -455,8 +455,7 @@ Geographies.propTypes = {
 };
 
 var _excluded$6 = ["geography", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "style", "className"];
-
-var Geography = function Geography(_ref) {
+var Geography = forwardRef(function (_ref, ref) {
   var geography = _ref.geography,
       onMouseEnter = _ref.onMouseEnter,
       onMouseLeave = _ref.onMouseLeave,
@@ -513,6 +512,7 @@ var Geography = function Geography(_ref) {
   }
 
   return /*#__PURE__*/React.createElement("path", _extends({
+    ref: ref,
     tabIndex: "0",
     className: "rsm-geography ".concat(className),
     d: geography.svgPath,
@@ -524,8 +524,8 @@ var Geography = function Geography(_ref) {
     onMouseUp: handleMouseUp,
     style: style[isPressed || isFocused ? isPressed ? "pressed" : "hover" : "default"]
   }, restProps));
-};
-
+});
+Geography.displayName = "Geography";
 Geography.propTypes = {
   geography: PropTypes.object,
   onMouseEnter: PropTypes.func,
@@ -540,8 +540,7 @@ Geography.propTypes = {
 var Geography$1 = memo(Geography);
 
 var _excluded$5 = ["fill", "stroke", "step", "className"];
-
-var Graticule = function Graticule(_ref) {
+var Graticule = forwardRef(function (_ref, ref) {
   var _ref$fill = _ref.fill,
       fill = _ref$fill === void 0 ? "transparent" : _ref$fill,
       _ref$stroke = _ref.stroke,
@@ -556,13 +555,14 @@ var Graticule = function Graticule(_ref) {
       path = _useContext.path;
 
   return /*#__PURE__*/React.createElement("path", _extends({
+    ref: ref,
     d: path(geoGraticule().step(step)()),
     fill: fill,
     stroke: stroke,
     className: "rsm-graticule ".concat(className)
   }, restProps));
-};
-
+});
+Graticule.displayName = "Graticule";
 Graticule.propTypes = {
   fill: PropTypes.string,
   stroke: PropTypes.string,
@@ -719,8 +719,7 @@ function useZoomPan(_ref) {
 }
 
 var _excluded$4 = ["center", "zoom", "minZoom", "maxZoom", "translateExtent", "filterZoomEvent", "onMoveStart", "onMove", "onMoveEnd", "className"];
-
-var ZoomableGroup = function ZoomableGroup(_ref) {
+var ZoomableGroup = forwardRef(function (_ref, ref) {
   var _ref$center = _ref.center,
       center = _ref$center === void 0 ? [0, 0] : _ref$center,
       _ref$zoom = _ref.zoom,
@@ -761,11 +760,12 @@ var ZoomableGroup = function ZoomableGroup(_ref) {
     height: height,
     fill: "transparent"
   }), /*#__PURE__*/React.createElement("g", _extends({
+    ref: ref,
     transform: transformString,
     className: "rsm-zoomable-group ".concat(className)
   }, restProps)));
-};
-
+});
+ZoomableGroup.displayName = "ZoomableGroup";
 ZoomableGroup.propTypes = {
   center: PropTypes.array,
   zoom: PropTypes.number,
@@ -779,8 +779,7 @@ ZoomableGroup.propTypes = {
 };
 
 var _excluded$3 = ["id", "fill", "stroke", "strokeWidth", "className"];
-
-var Sphere = function Sphere(_ref) {
+var Sphere = forwardRef(function (_ref, ref) {
   var _ref$id = _ref.id,
       id = _ref$id === void 0 ? "rsm-sphere" : _ref$id,
       _ref$fill = _ref.fill,
@@ -806,6 +805,7 @@ var Sphere = function Sphere(_ref) {
   }, /*#__PURE__*/React.createElement("path", {
     d: spherePath
   }))), /*#__PURE__*/React.createElement("path", _extends({
+    ref: ref,
     d: spherePath,
     fill: fill,
     stroke: stroke,
@@ -815,8 +815,8 @@ var Sphere = function Sphere(_ref) {
     },
     className: "rsm-sphere ".concat(className)
   }, restProps)));
-};
-
+});
+Sphere.displayName = "Sphere";
 Sphere.propTypes = {
   id: PropTypes.string,
   fill: PropTypes.string,
@@ -827,8 +827,7 @@ Sphere.propTypes = {
 var Sphere$1 = memo(Sphere);
 
 var _excluded$2 = ["coordinates", "children", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "style", "className"];
-
-var Marker = function Marker(_ref) {
+var Marker = forwardRef(function (_ref, ref) {
   var coordinates = _ref.coordinates,
       children = _ref.children,
       onMouseEnter = _ref.onMouseEnter,
@@ -894,6 +893,7 @@ var Marker = function Marker(_ref) {
   }
 
   return /*#__PURE__*/React.createElement("g", _extends({
+    ref: ref,
     transform: "translate(".concat(x, ", ").concat(y, ")"),
     className: "rsm-marker ".concat(className),
     onMouseEnter: handleMouseEnter,
@@ -904,8 +904,8 @@ var Marker = function Marker(_ref) {
     onMouseUp: handleMouseUp,
     style: style[isPressed || isFocused ? isPressed ? "pressed" : "hover" : "default"]
   }, restProps), children);
-};
-
+});
+Marker.displayName = "Marker";
 Marker.propTypes = {
   coordinates: PropTypes.array,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
@@ -920,8 +920,7 @@ Marker.propTypes = {
 };
 
 var _excluded$1 = ["from", "to", "coordinates", "stroke", "strokeWidth", "fill", "className"];
-
-var Line = function Line(_ref) {
+var Line = forwardRef(function (_ref, ref) {
   var _ref$from = _ref.from,
       from = _ref$from === void 0 ? [0, 0] : _ref$from,
       _ref$to = _ref.to,
@@ -945,14 +944,15 @@ var Line = function Line(_ref) {
     coordinates: coordinates || [from, to]
   };
   return /*#__PURE__*/React.createElement("path", _extends({
+    ref: ref,
     d: path(lineData),
     className: "rsm-line ".concat(className),
     stroke: stroke,
     strokeWidth: strokeWidth,
     fill: fill
   }, restProps));
-};
-
+});
+Line.displayName = "Line";
 Line.propTypes = {
   from: PropTypes.array,
   to: PropTypes.array,
@@ -964,8 +964,7 @@ Line.propTypes = {
 };
 
 var _excluded = ["subject", "children", "connectorProps", "dx", "dy", "curve", "className"];
-
-var Annotation = function Annotation(_ref) {
+var Annotation = forwardRef(function (_ref, ref) {
   var subject = _ref.subject,
       children = _ref.children,
       connectorProps = _ref.connectorProps,
@@ -989,6 +988,7 @@ var Annotation = function Annotation(_ref) {
 
   var connectorPath = createConnectorPath(dx, dy, curve);
   return /*#__PURE__*/React.createElement("g", _extends({
+    ref: ref,
     transform: "translate(".concat(x + dx, ", ").concat(y + dy, ")"),
     className: "rsm-annotation ".concat(className)
   }, restProps), /*#__PURE__*/React.createElement("path", _extends({
@@ -996,8 +996,8 @@ var Annotation = function Annotation(_ref) {
     fill: "transparent",
     stroke: "#000"
   }, connectorProps)), children);
-};
-
+});
+Annotation.displayName = "Annotation";
 Annotation.propTypes = {
   subject: PropTypes.array,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),

package/dist/index.js

@@ -1,10 +1,37 @@
-import React, { createContext, useMemo, useCallback, useContext, useState, useEffect, memo, useRef, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import * as d3Geo from 'd3-geo';
-import { geoGraticule } from 'd3-geo';
-import { feature, mesh } from 'topojson-client';
-import { zoom, zoomIdentity } from 'd3-zoom';
-import { select } from 'd3-selection';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var d3Geo = require('d3-geo');
+var topojsonClient = require('topojson-client');
+var d3Zoom = require('d3-zoom');
+var d3Selection = require('d3-selection');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var d3Geo__namespace = /*#__PURE__*/_interopNamespace(d3Geo);
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -171,10 +198,10 @@ function _nonIterableRest() {
 
 var _excluded$9 = ["width", "height", "projection", "projectionConfig"];
 
-var geoPath = d3Geo.geoPath,
-    projections = _objectWithoutProperties(d3Geo, ["geoPath"]);
+var geoPath = d3Geo__namespace.geoPath,
+    projections = _objectWithoutProperties(d3Geo__namespace, ["geoPath"]);
 
-var MapContext = createContext();
+var MapContext = React.createContext();
 
 var makeProjection = function makeProjection(_ref) {
   var _ref$projectionConfig = _ref.projectionConfig,
@@ -220,7 +247,7 @@ var MapProvider = function MapProvider(_ref2) {
       p2 = _ref8[1];
 
   var s = projectionConfig.scale || null;
-  var projMemo = useMemo(function () {
+  var projMemo = React.useMemo(function () {
     return makeProjection({
       projectionConfig: {
         center: cx || cx === 0 || cy || cy === 0 ? [cx, cy] : null,
@@ -233,8 +260,8 @@ var MapProvider = function MapProvider(_ref2) {
       height: height
     });
   }, [width, height, projection, cx, cy, rx, ry, rz, p1, p2, s]);
-  var proj = useCallback(projMemo, [projMemo]);
-  var value = useMemo(function () {
+  var proj = React.useCallback(projMemo, [projMemo]);
+  var value = React.useMemo(function () {
     return {
       width: width,
       height: height,
@@ -242,21 +269,20 @@ var MapProvider = function MapProvider(_ref2) {
       path: geoPath().projection(proj)
     };
   }, [width, height, proj]);
-  return /*#__PURE__*/React.createElement(MapContext.Provider, _extends({
+  return /*#__PURE__*/React__default["default"].createElement(MapContext.Provider, _extends({
     value: value
   }, restProps));
 };
 
 MapProvider.propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number,
-  projection: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  projectionConfig: PropTypes.object
+  width: PropTypes__default["default"].number,
+  height: PropTypes__default["default"].number,
+  projection: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].func]),
+  projectionConfig: PropTypes__default["default"].object
 };
 
 var _excluded$8 = ["width", "height", "projection", "projectionConfig", "className"];
-
-var ComposableMap = function ComposableMap(_ref) {
+var ComposableMap = React.forwardRef(function (_ref, ref) {
   var _ref$width = _ref.width,
       width = _ref$width === void 0 ? 800 : _ref$width,
       _ref$height = _ref.height,
@@ -269,23 +295,24 @@ var ComposableMap = function ComposableMap(_ref) {
       className = _ref$className === void 0 ? "" : _ref$className,
       restProps = _objectWithoutProperties(_ref, _excluded$8);
 
-  return /*#__PURE__*/React.createElement(MapProvider, {
+  return /*#__PURE__*/React__default["default"].createElement(MapProvider, {
     width: width,
     height: height,
     projection: projection,
     projectionConfig: projectionConfig
-  }, /*#__PURE__*/React.createElement("svg", _extends({
+  }, /*#__PURE__*/React__default["default"].createElement("svg", _extends({
+    ref: ref,
     viewBox: "0 0 ".concat(width, " ").concat(height),
     className: "rsm-svg ".concat(className)
   }, restProps)));
-};
-
+});
+ComposableMap.displayName = "ComposableMap";
 ComposableMap.propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number,
-  projection: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  projectionConfig: PropTypes.object,
-  className: PropTypes.string
+  width: PropTypes__default["default"].number,
+  height: PropTypes__default["default"].number,
+  projection: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].func]),
+  projectionConfig: PropTypes__default["default"].object,
+  className: PropTypes__default["default"].string
 };
 
 function getCoords(w, h, t) {
@@ -311,16 +338,16 @@ function getFeatures(geographies, parseGeographies) {
     return parseGeographies ? parseGeographies(geographies.features || geographies) : geographies.features || geographies;
   }
 
-  var feats = feature(geographies, geographies.objects[Object.keys(geographies.objects)[0]]).features;
+  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 = mesh(geographies, geographies.objects[Object.keys(geographies.objects)[0]], function (a, b) {
+  var outline = topojsonClient.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) {
+  var borders = topojsonClient.mesh(geographies, geographies.objects[Object.keys(geographies.objects)[0]], function (a, b) {
     return a !== b;
   });
   return {
@@ -365,15 +392,15 @@ function useGeographies(_ref) {
   var geography = _ref.geography,
       parseGeographies = _ref.parseGeographies;
 
-  var _useContext = useContext(MapContext),
+  var _useContext = React.useContext(MapContext),
       path = _useContext.path;
 
-  var _useState = useState({}),
+  var _useState = React.useState({}),
       _useState2 = _slicedToArray(_useState, 2),
       output = _useState2[0],
       setOutput = _useState2[1];
 
-  useEffect(function () {
+  React.useEffect(function () {
     if ((typeof window === "undefined" ? "undefined" : _typeof(window)) === "undefined") return;
     if (!geography) return;
 
@@ -394,7 +421,7 @@ function useGeographies(_ref) {
     }
   }, [geography, parseGeographies]);
 
-  var _useMemo = useMemo(function () {
+  var _useMemo = React.useMemo(function () {
     var mesh = output.mesh || {};
     var preparedMesh = prepareMesh(mesh.outline, mesh.borders, path);
     return {
@@ -415,8 +442,7 @@ function useGeographies(_ref) {
 }
 
 var _excluded$7 = ["geography", "children", "parseGeographies", "className"];
-
-var Geographies = function Geographies(_ref) {
+var Geographies = React.forwardRef(function (_ref, ref) {
   var geography = _ref.geography,
       children = _ref.children,
       parseGeographies = _ref.parseGeographies,
@@ -424,7 +450,7 @@ var Geographies = function Geographies(_ref) {
       className = _ref$className === void 0 ? "" : _ref$className,
       restProps = _objectWithoutProperties(_ref, _excluded$7);
 
-  var _useContext = useContext(MapContext),
+  var _useContext = React.useContext(MapContext),
       path = _useContext.path,
       projection = _useContext.projection;
 
@@ -436,7 +462,8 @@ var Geographies = function Geographies(_ref) {
       outline = _useGeographies.outline,
       borders = _useGeographies.borders;
 
-  return /*#__PURE__*/React.createElement("g", _extends({
+  return /*#__PURE__*/React__default["default"].createElement("g", _extends({
+    ref: ref,
     className: "rsm-geographies ".concat(className)
   }, restProps), geographies && geographies.length > 0 && children({
     geographies: geographies,
@@ -445,18 +472,17 @@ var Geographies = function Geographies(_ref) {
     path: path,
     projection: projection
   }));
-};
-
+});
+Geographies.displayName = "Geographies";
 Geographies.propTypes = {
-  geography: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array]),
-  children: PropTypes.func,
-  parseGeographies: PropTypes.func,
-  className: PropTypes.string
+  geography: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].object, PropTypes__default["default"].array]),
+  children: PropTypes__default["default"].func,
+  parseGeographies: PropTypes__default["default"].func,
+  className: PropTypes__default["default"].string
 };
 
 var _excluded$6 = ["geography", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "style", "className"];
-
-var Geography = function Geography(_ref) {
+var Geography = React.forwardRef(function (_ref, ref) {
   var geography = _ref.geography,
       onMouseEnter = _ref.onMouseEnter,
       onMouseLeave = _ref.onMouseLeave,
@@ -470,12 +496,12 @@ var Geography = function Geography(_ref) {
       className = _ref$className === void 0 ? "" : _ref$className,
       restProps = _objectWithoutProperties(_ref, _excluded$6);
 
-  var _useState = useState(false),
+  var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isPressed = _useState2[0],
       setPressed = _useState2[1];
 
-  var _useState3 = useState(false),
+  var _useState3 = React.useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
       isFocused = _useState4[0],
       setFocus = _useState4[1];
@@ -512,7 +538,8 @@ var Geography = function Geography(_ref) {
     if (onMouseUp) onMouseUp(evt);
   }
 
-  return /*#__PURE__*/React.createElement("path", _extends({
+  return /*#__PURE__*/React__default["default"].createElement("path", _extends({
+    ref: ref,
     tabIndex: "0",
     className: "rsm-geography ".concat(className),
     d: geography.svgPath,
@@ -524,24 +551,23 @@ var Geography = function Geography(_ref) {
     onMouseUp: handleMouseUp,
     style: style[isPressed || isFocused ? isPressed ? "pressed" : "hover" : "default"]
   }, restProps));
-};
-
+});
+Geography.displayName = "Geography";
 Geography.propTypes = {
-  geography: PropTypes.object,
-  onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func,
-  onMouseDown: PropTypes.func,
-  onMouseUp: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  style: PropTypes.object,
-  className: PropTypes.string
+  geography: PropTypes__default["default"].object,
+  onMouseEnter: PropTypes__default["default"].func,
+  onMouseLeave: PropTypes__default["default"].func,
+  onMouseDown: PropTypes__default["default"].func,
+  onMouseUp: PropTypes__default["default"].func,
+  onFocus: PropTypes__default["default"].func,
+  onBlur: PropTypes__default["default"].func,
+  style: PropTypes__default["default"].object,
+  className: PropTypes__default["default"].string
 };
-var Geography$1 = memo(Geography);
+var Geography$1 = React.memo(Geography);
 
 var _excluded$5 = ["fill", "stroke", "step", "className"];
-
-var Graticule = function Graticule(_ref) {
+var Graticule = React.forwardRef(function (_ref, ref) {
   var _ref$fill = _ref.fill,
       fill = _ref$fill === void 0 ? "transparent" : _ref$fill,
       _ref$stroke = _ref.stroke,
@@ -552,24 +578,25 @@ var Graticule = function Graticule(_ref) {
       className = _ref$className === void 0 ? "" : _ref$className,
       restProps = _objectWithoutProperties(_ref, _excluded$5);
 
-  var _useContext = useContext(MapContext),
+  var _useContext = React.useContext(MapContext),
       path = _useContext.path;
 
-  return /*#__PURE__*/React.createElement("path", _extends({
-    d: path(geoGraticule().step(step)()),
+  return /*#__PURE__*/React__default["default"].createElement("path", _extends({
+    ref: ref,
+    d: path(d3Geo.geoGraticule().step(step)()),
     fill: fill,
     stroke: stroke,
     className: "rsm-graticule ".concat(className)
   }, restProps));
-};
-
+});
+Graticule.displayName = "Graticule";
 Graticule.propTypes = {
-  fill: PropTypes.string,
-  stroke: PropTypes.string,
-  step: PropTypes.array,
-  className: PropTypes.string
+  fill: PropTypes__default["default"].string,
+  stroke: PropTypes__default["default"].string,
+  step: PropTypes__default["default"].array,
+  className: PropTypes__default["default"].string
 };
-var Graticule$1 = memo(Graticule);
+var Graticule$1 = React.memo(Graticule);
 
 function useZoomPan(_ref) {
   var center = _ref.center,
@@ -582,9 +609,9 @@ function useZoomPan(_ref) {
       _ref$scaleExtent = _ref.scaleExtent,
       scaleExtent = _ref$scaleExtent === void 0 ? [1, 8] : _ref$scaleExtent,
       _ref$zoom = _ref.zoom,
-      zoom$1 = _ref$zoom === void 0 ? 1 : _ref$zoom;
+      zoom = _ref$zoom === void 0 ? 1 : _ref$zoom;
 
-  var _useContext = useContext(MapContext),
+  var _useContext = React.useContext(MapContext),
       width = _useContext.width,
       height = _useContext.height,
       projection = _useContext.projection;
@@ -593,7 +620,7 @@ function useZoomPan(_ref) {
       lon = _center[0],
       lat = _center[1];
 
-  var _useState = useState({
+  var _useState = React.useState({
     x: 0,
     y: 0,
     k: 1
@@ -602,14 +629,14 @@ function useZoomPan(_ref) {
       position = _useState2[0],
       setPosition = _useState2[1];
 
-  var lastPosition = useRef({
+  var lastPosition = React.useRef({
     x: 0,
     y: 0,
     k: 1
   });
-  var mapRef = useRef();
-  var zoomRef = useRef();
-  var bypassEvents = useRef(false);
+  var mapRef = React.useRef();
+  var zoomRef = React.useRef();
+  var bypassEvents = React.useRef(false);
 
   var _translateExtent = _slicedToArray(translateExtent, 2),
       a = _translateExtent[0],
@@ -627,8 +654,8 @@ function useZoomPan(_ref) {
       minZoom = _scaleExtent[0],
       maxZoom = _scaleExtent[1];
 
-  useEffect(function () {
-    var svg = select(mapRef.current);
+  React.useEffect(function () {
+    var svg = d3Selection.select(mapRef.current);
 
     function handleZoomStart(d3Event) {
       if (!onMoveStart || bypassEvents.current) return;
@@ -688,29 +715,29 @@ function useZoomPan(_ref) {
       return d3Event ? !d3Event.ctrlKey && !d3Event.button : false;
     }
 
-    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);
+    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);
   }, [width, height, a1, a2, b1, b2, minZoom, maxZoom, projection, onMoveStart, onMove, onMoveEnd, filterZoomEvent]);
-  useEffect(function () {
-    if (lon === lastPosition.current.x && lat === lastPosition.current.y && zoom$1 === lastPosition.current.k) return;
+  React.useEffect(function () {
+    if (lon === lastPosition.current.x && lat === lastPosition.current.y && zoom === lastPosition.current.k) return;
     var coords = projection([lon, lat]);
-    var x = coords[0] * zoom$1;
-    var y = coords[1] * zoom$1;
-    var svg = select(mapRef.current);
+    var x = coords[0] * zoom;
+    var y = coords[1] * zoom;
+    var svg = d3Selection.select(mapRef.current);
     bypassEvents.current = true;
-    svg.call(zoomRef.current.transform, zoomIdentity.translate(width / 2 - x, height / 2 - y).scale(zoom$1));
+    svg.call(zoomRef.current.transform, d3Zoom.zoomIdentity.translate(width / 2 - x, height / 2 - y).scale(zoom));
     setPosition({
       x: width / 2 - x,
       y: height / 2 - y,
-      k: zoom$1
+      k: zoom
     });
     lastPosition.current = {
       x: lon,
       y: lat,
-      k: zoom$1
+      k: zoom
     };
-  }, [lon, lat, zoom$1, width, height, projection]);
+  }, [lon, lat, zoom, width, height, projection]);
   return {
     mapRef: mapRef,
     position: position,
@@ -719,8 +746,7 @@ function useZoomPan(_ref) {
 }
 
 var _excluded$4 = ["center", "zoom", "minZoom", "maxZoom", "translateExtent", "filterZoomEvent", "onMoveStart", "onMove", "onMoveEnd", "className"];
-
-var ZoomableGroup = function ZoomableGroup(_ref) {
+var ZoomableGroup = React.forwardRef(function (_ref, ref) {
   var _ref$center = _ref.center,
       center = _ref$center === void 0 ? [0, 0] : _ref$center,
       _ref$zoom = _ref.zoom,
@@ -737,7 +763,7 @@ var ZoomableGroup = function ZoomableGroup(_ref) {
       className = _ref.className,
       restProps = _objectWithoutProperties(_ref, _excluded$4);
 
-  var _useContext = useContext(MapContext),
+  var _useContext = React.useContext(MapContext),
       width = _useContext.width,
       height = _useContext.height;
 
@@ -754,33 +780,33 @@ var ZoomableGroup = function ZoomableGroup(_ref) {
       mapRef = _useZoomPan.mapRef,
       transformString = _useZoomPan.transformString;
 
-  return /*#__PURE__*/React.createElement("g", {
+  return /*#__PURE__*/React__default["default"].createElement("g", {
     ref: mapRef
-  }, /*#__PURE__*/React.createElement("rect", {
+  }, /*#__PURE__*/React__default["default"].createElement("rect", {
     width: width,
     height: height,
     fill: "transparent"
-  }), /*#__PURE__*/React.createElement("g", _extends({
+  }), /*#__PURE__*/React__default["default"].createElement("g", _extends({
+    ref: ref,
     transform: transformString,
     className: "rsm-zoomable-group ".concat(className)
   }, restProps)));
-};
-
+});
+ZoomableGroup.displayName = "ZoomableGroup";
 ZoomableGroup.propTypes = {
-  center: PropTypes.array,
-  zoom: PropTypes.number,
-  minZoom: PropTypes.number,
-  maxZoom: PropTypes.number,
-  translateExtent: PropTypes.arrayOf(PropTypes.array),
-  onMoveStart: PropTypes.func,
-  onMove: PropTypes.func,
-  onMoveEnd: PropTypes.func,
-  className: PropTypes.string
+  center: PropTypes__default["default"].array,
+  zoom: PropTypes__default["default"].number,
+  minZoom: PropTypes__default["default"].number,
+  maxZoom: PropTypes__default["default"].number,
+  translateExtent: PropTypes__default["default"].arrayOf(PropTypes__default["default"].array),
+  onMoveStart: PropTypes__default["default"].func,
+  onMove: PropTypes__default["default"].func,
+  onMoveEnd: PropTypes__default["default"].func,
+  className: PropTypes__default["default"].string
 };
 
 var _excluded$3 = ["id", "fill", "stroke", "strokeWidth", "className"];
-
-var Sphere = function Sphere(_ref) {
+var Sphere = React.forwardRef(function (_ref, ref) {
   var _ref$id = _ref.id,
       id = _ref$id === void 0 ? "rsm-sphere" : _ref$id,
       _ref$fill = _ref.fill,
@@ -793,19 +819,20 @@ var Sphere = function Sphere(_ref) {
       className = _ref$className === void 0 ? "" : _ref$className,
       restProps = _objectWithoutProperties(_ref, _excluded$3);
 
-  var _useContext = useContext(MapContext),
+  var _useContext = React.useContext(MapContext),
       path = _useContext.path;
 
-  var spherePath = useMemo(function () {
+  var spherePath = React.useMemo(function () {
     return path({
       type: "Sphere"
     });
   }, [path]);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("clipPath", {
     id: id
-  }, /*#__PURE__*/React.createElement("path", {
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
     d: spherePath
-  }))), /*#__PURE__*/React.createElement("path", _extends({
+  }))), /*#__PURE__*/React__default["default"].createElement("path", _extends({
+    ref: ref,
     d: spherePath,
     fill: fill,
     stroke: stroke,
@@ -815,20 +842,19 @@ var Sphere = function Sphere(_ref) {
     },
     className: "rsm-sphere ".concat(className)
   }, restProps)));
-};
-
+});
+Sphere.displayName = "Sphere";
 Sphere.propTypes = {
-  id: PropTypes.string,
-  fill: PropTypes.string,
-  stroke: PropTypes.string,
-  strokeWidth: PropTypes.number,
-  className: PropTypes.string
+  id: PropTypes__default["default"].string,
+  fill: PropTypes__default["default"].string,
+  stroke: PropTypes__default["default"].string,
+  strokeWidth: PropTypes__default["default"].number,
+  className: PropTypes__default["default"].string
 };
-var Sphere$1 = memo(Sphere);
+var Sphere$1 = React.memo(Sphere);
 
 var _excluded$2 = ["coordinates", "children", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "style", "className"];
-
-var Marker = function Marker(_ref) {
+var Marker = React.forwardRef(function (_ref, ref) {
   var coordinates = _ref.coordinates,
       children = _ref.children,
       onMouseEnter = _ref.onMouseEnter,
@@ -843,15 +869,15 @@ var Marker = function Marker(_ref) {
       className = _ref$className === void 0 ? "" : _ref$className,
       restProps = _objectWithoutProperties(_ref, _excluded$2);
 
-  var _useContext = useContext(MapContext),
+  var _useContext = React.useContext(MapContext),
       projection = _useContext.projection;
 
-  var _useState = useState(false),
+  var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isPressed = _useState2[0],
       setPressed = _useState2[1];
 
-  var _useState3 = useState(false),
+  var _useState3 = React.useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
       isFocused = _useState4[0],
       setFocus = _useState4[1];
@@ -893,7 +919,8 @@ var Marker = function Marker(_ref) {
     if (onMouseUp) onMouseUp(evt);
   }
 
-  return /*#__PURE__*/React.createElement("g", _extends({
+  return /*#__PURE__*/React__default["default"].createElement("g", _extends({
+    ref: ref,
     transform: "translate(".concat(x, ", ").concat(y, ")"),
     className: "rsm-marker ".concat(className),
     onMouseEnter: handleMouseEnter,
@@ -904,24 +931,23 @@ var Marker = function Marker(_ref) {
     onMouseUp: handleMouseUp,
     style: style[isPressed || isFocused ? isPressed ? "pressed" : "hover" : "default"]
   }, restProps), children);
-};
-
+});
+Marker.displayName = "Marker";
 Marker.propTypes = {
-  coordinates: PropTypes.array,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-  onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func,
-  onMouseDown: PropTypes.func,
-  onMouseUp: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  style: PropTypes.object,
-  className: PropTypes.string
+  coordinates: PropTypes__default["default"].array,
+  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].arrayOf(PropTypes__default["default"].node)]),
+  onMouseEnter: PropTypes__default["default"].func,
+  onMouseLeave: PropTypes__default["default"].func,
+  onMouseDown: PropTypes__default["default"].func,
+  onMouseUp: PropTypes__default["default"].func,
+  onFocus: PropTypes__default["default"].func,
+  onBlur: PropTypes__default["default"].func,
+  style: PropTypes__default["default"].object,
+  className: PropTypes__default["default"].string
 };
 
 var _excluded$1 = ["from", "to", "coordinates", "stroke", "strokeWidth", "fill", "className"];
-
-var Line = function Line(_ref) {
+var Line = React.forwardRef(function (_ref, ref) {
   var _ref$from = _ref.from,
       from = _ref$from === void 0 ? [0, 0] : _ref$from,
       _ref$to = _ref.to,
@@ -937,35 +963,35 @@ var Line = function Line(_ref) {
       className = _ref$className === void 0 ? "" : _ref$className,
       restProps = _objectWithoutProperties(_ref, _excluded$1);
 
-  var _useContext = useContext(MapContext),
+  var _useContext = React.useContext(MapContext),
       path = _useContext.path;
 
   var lineData = {
     type: "LineString",
     coordinates: coordinates || [from, to]
   };
-  return /*#__PURE__*/React.createElement("path", _extends({
+  return /*#__PURE__*/React__default["default"].createElement("path", _extends({
+    ref: ref,
     d: path(lineData),
     className: "rsm-line ".concat(className),
     stroke: stroke,
     strokeWidth: strokeWidth,
     fill: fill
   }, restProps));
-};
-
+});
+Line.displayName = "Line";
 Line.propTypes = {
-  from: PropTypes.array,
-  to: PropTypes.array,
-  coordinates: PropTypes.array,
-  stroke: PropTypes.string,
-  strokeWidth: PropTypes.number,
-  fill: PropTypes.string,
-  className: PropTypes.string
+  from: PropTypes__default["default"].array,
+  to: PropTypes__default["default"].array,
+  coordinates: PropTypes__default["default"].array,
+  stroke: PropTypes__default["default"].string,
+  strokeWidth: PropTypes__default["default"].number,
+  fill: PropTypes__default["default"].string,
+  className: PropTypes__default["default"].string
 };
 
 var _excluded = ["subject", "children", "connectorProps", "dx", "dy", "curve", "className"];
-
-var Annotation = function Annotation(_ref) {
+var Annotation = React.forwardRef(function (_ref, ref) {
   var subject = _ref.subject,
       children = _ref.children,
       connectorProps = _ref.connectorProps,
@@ -979,7 +1005,7 @@ var Annotation = function Annotation(_ref) {
       className = _ref$className === void 0 ? "" : _ref$className,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var _useContext = useContext(MapContext),
+  var _useContext = React.useContext(MapContext),
       projection = _useContext.projection;
 
   var _projection = projection(subject),
@@ -988,24 +1014,37 @@ var Annotation = function Annotation(_ref) {
       y = _projection2[1];
 
   var connectorPath = createConnectorPath(dx, dy, curve);
-  return /*#__PURE__*/React.createElement("g", _extends({
+  return /*#__PURE__*/React__default["default"].createElement("g", _extends({
+    ref: ref,
     transform: "translate(".concat(x + dx, ", ").concat(y + dy, ")"),
     className: "rsm-annotation ".concat(className)
-  }, restProps), /*#__PURE__*/React.createElement("path", _extends({
+  }, restProps), /*#__PURE__*/React__default["default"].createElement("path", _extends({
     d: connectorPath,
     fill: "transparent",
     stroke: "#000"
   }, connectorProps)), children);
-};
-
+});
+Annotation.displayName = "Annotation";
 Annotation.propTypes = {
-  subject: PropTypes.array,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-  dx: PropTypes.number,
-  dy: PropTypes.number,
-  curve: PropTypes.number,
-  connectorProps: PropTypes.object,
-  className: PropTypes.string
+  subject: PropTypes__default["default"].array,
+  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].arrayOf(PropTypes__default["default"].node)]),
+  dx: PropTypes__default["default"].number,
+  dy: PropTypes__default["default"].number,
+  curve: PropTypes__default["default"].number,
+  connectorProps: PropTypes__default["default"].object,
+  className: PropTypes__default["default"].string
 };
 
-export { Annotation, ComposableMap, Geographies, Geography$1 as Geography, Graticule$1 as Graticule, Line, MapContext, MapProvider, Marker, Sphere$1 as Sphere, ZoomableGroup, useGeographies, useZoomPan };
+exports.Annotation = Annotation;
+exports.ComposableMap = ComposableMap;
+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;
+exports.useGeographies = useGeographies;
+exports.useZoomPan = useZoomPan;

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="undefined"!=typeof globalThis?globalThis:e||self).reactSimpleMaps=e.reactSimpleMaps||{},e.React,e.PropTypes,e.d3,e.topojson,e.d3,e.d3)}(this,(function(e,t,o,r,n,a,u){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,r.get?r:{enumerable:!0,get:function(){return e[o]}})}})),t.default=e,Object.freeze(t)}var l=s(t),i=s(o),f=c(r);function d(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),o.push.apply(o,r)}return o}function p(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?d(Object(o),!0).forEach((function(t){g(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):d(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}function m(e){return m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},m(e)}function g(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function h(){return h=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},h.apply(this,arguments)}function v(e,t){if(null==e)return{};var o,r,n=function(e,t){if(null==e)return{};var o,r,n={},a=Object.keys(e);for(r=0;r<a.length;r++)o=a[r],t.indexOf(o)>=0||(n[o]=e[o]);return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)o=a[r],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(n[o]=e[o])}return n}function y(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var o=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==o)return;var r,n,a=[],u=!0,s=!1;try{for(o=o.call(e);!(u=(r=o.next()).done)&&(a.push(r.value),!t||a.length!==t);u=!0);}catch(e){s=!0,n=e}finally{try{u||null==o.return||o.return()}finally{if(s)throw n}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return b(e,t);var o=Object.prototype.toString.call(e).slice(8,-1);"Object"===o&&e.constructor&&(o=e.constructor.name);if("Map"===o||"Set"===o)return Array.from(e);if("Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return b(e,t)}(e,t)||function(){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 b(e,t){(null==t||t>e.length)&&(t=e.length);for(var o=0,r=new Array(t);o<t;o++)r[o]=e[o];return r}var j=["width","height","projection","projectionConfig"],M=f.geoPath,E=v(f,["geoPath"]),O=t.createContext(),k=function(e){var o=e.width,r=e.height,n=e.projection,a=e.projectionConfig,u=v(e,j),s=y(a.center||[],2),c=s[0],i=s[1],f=y(a.rotate||[],3),d=f[0],p=f[1],m=f[2],g=y(a.parallels||[],2),b=g[0],k=g[1],x=a.scale||null,w=t.useMemo((function(){return function(e){var t=e.projectionConfig,o=void 0===t?{}:t,r=e.projection,n=void 0===r?"geoEqualEarth":r,a=e.width,u=void 0===a?800:a,s=e.height,c=void 0===s?600:s;if("function"==typeof n)return n;var l=E[n]().translate([u/2,c/2]);return[l.center?"center":null,l.rotate?"rotate":null,l.scale?"scale":null,l.parallels?"parallels":null].forEach((function(e){e&&(l=l[e](o[e]||l[e]()))})),l}({projectionConfig:{center:c||0===c||i||0===i?[c,i]:null,rotate:d||0===d||p||0===p?[d,p,m]:null,parallels:b||0===b||k||0===k?[b,k]:null,scale:x},projection:n,width:o,height:r})}),[o,r,n,c,i,d,p,m,b,k,x]),N=t.useCallback(w,[w]),S=t.useMemo((function(){return{width:o,height:r,projection:N,path:M().projection(N)}}),[o,r,N]);return l.default.createElement(O.Provider,h({value:S},u))};k.propTypes={width:i.default.number,height:i.default.number,projection:i.default.oneOfType([i.default.string,i.default.func]),projectionConfig:i.default.object};var x=["width","height","projection","projectionConfig","className"],w=function(e){var t=e.width,o=void 0===t?800:t,r=e.height,n=void 0===r?600:r,a=e.projection,u=void 0===a?"geoEqualEarth":a,s=e.projectionConfig,c=void 0===s?{}:s,i=e.className,f=void 0===i?"":i,d=v(e,x);return l.default.createElement(k,{width:o,height:n,projection:u,projectionConfig:c},l.default.createElement("svg",h({viewBox:"0 0 ".concat(o," ").concat(n),className:"rsm-svg ".concat(f)},d)))};function N(e,t,o){var r=(e*o.k-e)/2,n=(t*o.k-t)/2;return[e/2-(r+o.x)/o.k,t/2-(n+o.y)/o.k]}function S(e,t){if(!("Topology"===e.type))return t?t(e.features||e):e.features||e;var o=n.feature(e,e.objects[Object.keys(e.objects)[0]]).features;return t?t(o):o}function P(e){return"Topology"===e.type?{outline:n.mesh(e,e.objects[Object.keys(e.objects)[0]],(function(e,t){return e===t})),borders:n.mesh(e,e.objects[Object.keys(e.objects)[0]],(function(e,t){return e!==t}))}:null}function C(e,t){return e?e.map((function(e,o){return p(p({},e),{},{rsmKey:"geo-".concat(o),svgPath:t(e)})})):[]}function T(e){var o=e.geography,r=e.parseGeographies,n=t.useContext(O).path,a=y(t.useState({}),2),u=a[0],s=a[1];t.useEffect((function(){var e;"undefined"!==("undefined"==typeof window?"undefined":m(window))&&(o&&("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&&s({geographies:S(e,r),mesh:P(e)})})):s({geographies:S(o,r),mesh:P(o)})))}),[o,r]);var c=t.useMemo((function(){var e=u.mesh||{},t=function(e,t,o){return e&&t?{outline:p(p({},e),{},{rsmKey:"outline",svgPath:o(e)}),borders:p(p({},t),{},{rsmKey:"borders",svgPath:o(t)})}:{}}(e.outline,e.borders,n);return{geographies:C(u.geographies,n),outline:t.outline,borders:t.borders}}),[u,n]);return{geographies:c.geographies,outline:c.outline,borders:c.borders}}w.propTypes={width:i.default.number,height:i.default.number,projection:i.default.oneOfType([i.default.string,i.default.func]),projectionConfig:i.default.object,className:i.default.string};var z=["geography","children","parseGeographies","className"],D=function(e){var o=e.geography,r=e.children,n=e.parseGeographies,a=e.className,u=void 0===a?"":a,s=v(e,z),c=t.useContext(O),i=c.path,f=c.projection,d=T({geography:o,parseGeographies:n}),p=d.geographies,m=d.outline,g=d.borders;return l.default.createElement("g",h({className:"rsm-geographies ".concat(u)},s),p&&p.length>0&&r({geographies:p,outline:m,borders:g,path:i,projection:f}))};D.propTypes={geography:i.default.oneOfType([i.default.string,i.default.object,i.default.array]),children:i.default.func,parseGeographies:i.default.func,className:i.default.string};var Z=["geography","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","onFocus","onBlur","style","className"],G=function(e){var o=e.geography,r=e.onMouseEnter,n=e.onMouseLeave,a=e.onMouseDown,u=e.onMouseUp,s=e.onFocus,c=e.onBlur,i=e.style,f=void 0===i?{}:i,d=e.className,p=void 0===d?"":d,m=v(e,Z),g=y(t.useState(!1),2),b=g[0],j=g[1],M=y(t.useState(!1),2),E=M[0],O=M[1];return l.default.createElement("path",h({tabIndex:"0",className:"rsm-geography ".concat(p),d:o.svgPath,onMouseEnter:function(e){O(!0),r&&r(e)},onMouseLeave:function(e){O(!1),b&&j(!1),n&&n(e)},onFocus:function(e){O(!0),s&&s(e)},onBlur:function(e){O(!1),b&&j(!1),c&&c(e)},onMouseDown:function(e){j(!0),a&&a(e)},onMouseUp:function(e){j(!1),u&&u(e)},style:f[b||E?b?"pressed":"hover":"default"]},m))};G.propTypes={geography:i.default.object,onMouseEnter:i.default.func,onMouseLeave:i.default.func,onMouseDown:i.default.func,onMouseUp:i.default.func,onFocus:i.default.func,onBlur:i.default.func,style:i.default.object,className:i.default.string};var L=t.memo(G),A=["fill","stroke","step","className"],B=function(e){var o=e.fill,n=void 0===o?"transparent":o,a=e.stroke,u=void 0===a?"currentcolor":a,s=e.step,c=void 0===s?[10,10]:s,i=e.className,f=void 0===i?"":i,d=v(e,A),p=t.useContext(O).path;return l.default.createElement("path",h({d:p(r.geoGraticule().step(c)()),fill:n,stroke:u,className:"rsm-graticule ".concat(f)},d))};B.propTypes={fill:i.default.string,stroke:i.default.string,step:i.default.array,className:i.default.string};var F=t.memo(B);function U(e){var o=e.center,r=e.filterZoomEvent,n=e.onMoveStart,s=e.onMoveEnd,c=e.onMove,l=e.translateExtent,i=void 0===l?[[-1/0,-1/0],[1/0,1/0]]:l,f=e.scaleExtent,d=void 0===f?[1,8]:f,p=e.zoom,m=void 0===p?1:p,g=t.useContext(O),h=g.width,v=g.height,b=g.projection,j=y(o,2),M=j[0],E=j[1],k=y(t.useState({x:0,y:0,k:1}),2),x=k[0],w=k[1],S=t.useRef({x:0,y:0,k:1}),P=t.useRef(),C=t.useRef(),T=t.useRef(!1),z=y(i,2),D=z[0],Z=z[1],G=y(D,2),L=G[0],A=G[1],B=y(Z,2),F=B[0],U=B[1],q=y(d,2),W=q[0],R=q[1];return t.useEffect((function(){var e=u.select(P.current);var t=a.zoom().filter((function(e){return r?r(e):!!e&&(!e.ctrlKey&&!e.button)})).scaleExtent([W,R]).translateExtent([[L,A],[F,U]]).on("start",(function(e){n&&!T.current&&n({coordinates:b.invert(N(h,v,e.transform)),zoom:e.transform.k},e)})).on("zoom",(function(e){if(!T.current){var t=e.transform,o=e.sourceEvent;w({x:t.x,y:t.y,k:t.k,dragging:o}),c&&c({x:t.x,y:t.y,zoom:t.k,dragging:o},e)}})).on("end",(function(e){if(T.current)T.current=!1;else{var t=y(b.invert(N(h,v,e.transform)),2),o=t[0],r=t[1];S.current={x:o,y:r,k:e.transform.k},s&&s({coordinates:[o,r],zoom:e.transform.k},e)}}));C.current=t,e.call(t)}),[h,v,L,A,F,U,W,R,b,n,c,s,r]),t.useEffect((function(){if(M!==S.current.x||E!==S.current.y||m!==S.current.k){var e=b([M,E]),t=e[0]*m,o=e[1]*m,r=u.select(P.current);T.current=!0,r.call(C.current.transform,a.zoomIdentity.translate(h/2-t,v/2-o).scale(m)),w({x:h/2-t,y:v/2-o,k:m}),S.current={x:M,y:E,k:m}}}),[M,E,m,h,v,b]),{mapRef:P,position:x,transformString:"translate(".concat(x.x," ").concat(x.y,") scale(").concat(x.k,")")}}var q=["center","zoom","minZoom","maxZoom","translateExtent","filterZoomEvent","onMoveStart","onMove","onMoveEnd","className"],W=function(e){var o=e.center,r=void 0===o?[0,0]:o,n=e.zoom,a=void 0===n?1:n,u=e.minZoom,s=void 0===u?1:u,c=e.maxZoom,i=void 0===c?8:c,f=e.translateExtent,d=e.filterZoomEvent,p=e.onMoveStart,m=e.onMove,g=e.onMoveEnd,y=e.className,b=v(e,q),j=t.useContext(O),M=j.width,E=j.height,k=U({center:r,filterZoomEvent:d,onMoveStart:p,onMove:m,onMoveEnd:g,scaleExtent:[s,i],translateExtent:f,zoom:a}),x=k.mapRef,w=k.transformString;return l.default.createElement("g",{ref:x},l.default.createElement("rect",{width:M,height:E,fill:"transparent"}),l.default.createElement("g",h({transform:w,className:"rsm-zoomable-group ".concat(y)},b)))};W.propTypes={center:i.default.array,zoom:i.default.number,minZoom:i.default.number,maxZoom:i.default.number,translateExtent:i.default.arrayOf(i.default.array),onMoveStart:i.default.func,onMove:i.default.func,onMoveEnd:i.default.func,className:i.default.string};var R=["id","fill","stroke","strokeWidth","className"],I=function(e){var o=e.id,r=void 0===o?"rsm-sphere":o,n=e.fill,a=void 0===n?"transparent":n,u=e.stroke,s=void 0===u?"currentcolor":u,c=e.strokeWidth,i=void 0===c?.5:c,f=e.className,d=void 0===f?"":f,p=v(e,R),m=t.useContext(O).path,g=t.useMemo((function(){return m({type:"Sphere"})}),[m]);return l.default.createElement(t.Fragment,null,l.default.createElement("defs",null,l.default.createElement("clipPath",{id:r},l.default.createElement("path",{d:g}))),l.default.createElement("path",h({d:g,fill:a,stroke:s,strokeWidth:i,style:{pointerEvents:"none"},className:"rsm-sphere ".concat(d)},p)))};I.propTypes={id:i.default.string,fill:i.default.string,stroke:i.default.string,strokeWidth:i.default.number,className:i.default.string};var K=t.memo(I),_=["coordinates","children","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","onFocus","onBlur","style","className"],Q=function(e){var o=e.coordinates,r=e.children,n=e.onMouseEnter,a=e.onMouseLeave,u=e.onMouseDown,s=e.onMouseUp,c=e.onFocus,i=e.onBlur,f=e.style,d=void 0===f?{}:f,p=e.className,m=void 0===p?"":p,g=v(e,_),b=t.useContext(O).projection,j=y(t.useState(!1),2),M=j[0],E=j[1],k=y(t.useState(!1),2),x=k[0],w=k[1],N=y(b(o),2),S=N[0],P=N[1];return l.default.createElement("g",h({transform:"translate(".concat(S,", ").concat(P,")"),className:"rsm-marker ".concat(m),onMouseEnter:function(e){w(!0),n&&n(e)},onMouseLeave:function(e){w(!1),M&&E(!1),a&&a(e)},onFocus:function(e){w(!0),c&&c(e)},onBlur:function(e){w(!1),M&&E(!1),i&&i(e)},onMouseDown:function(e){E(!0),u&&u(e)},onMouseUp:function(e){E(!1),s&&s(e)},style:d[M||x?M?"pressed":"hover":"default"]},g),r)};Q.propTypes={coordinates:i.default.array,children:i.default.oneOfType([i.default.node,i.default.arrayOf(i.default.node)]),onMouseEnter:i.default.func,onMouseLeave:i.default.func,onMouseDown:i.default.func,onMouseUp:i.default.func,onFocus:i.default.func,onBlur:i.default.func,style:i.default.object,className:i.default.string};var $=["from","to","coordinates","stroke","strokeWidth","fill","className"],H=function(e){var o=e.from,r=void 0===o?[0,0]:o,n=e.to,a=void 0===n?[0,0]:n,u=e.coordinates,s=e.stroke,c=void 0===s?"currentcolor":s,i=e.strokeWidth,f=void 0===i?3:i,d=e.fill,p=void 0===d?"transparent":d,m=e.className,g=void 0===m?"":m,y=v(e,$),b=t.useContext(O).path,j={type:"LineString",coordinates:u||[r,a]};return l.default.createElement("path",h({d:b(j),className:"rsm-line ".concat(g),stroke:c,strokeWidth:f,fill:p},y))};H.propTypes={from:i.default.array,to:i.default.array,coordinates:i.default.array,stroke:i.default.string,strokeWidth:i.default.number,fill:i.default.string,className:i.default.string};var J=["subject","children","connectorProps","dx","dy","curve","className"],V=function(e){var o=e.subject,r=e.children,n=e.connectorProps,a=e.dx,u=void 0===a?30:a,s=e.dy,c=void 0===s?30:s,i=e.curve,f=void 0===i?0:i,d=e.className,p=void 0===d?"":d,m=v(e,J),g=y((0,t.useContext(O).projection)(o),2),b=g[0],j=g[1],M=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,r=Array.isArray(o)?o:[o,o],n=e/2*r[0],a=t/2*r[1];return"M".concat(0,",",0," Q",-e/2-n,",").concat(-t/2+a," ").concat(-e,",").concat(-t)}(u,c,f);return l.default.createElement("g",h({transform:"translate(".concat(b+u,", ").concat(j+c,")"),className:"rsm-annotation ".concat(p)},m),l.default.createElement("path",h({d:M,fill:"transparent",stroke:"#000"},n)),r)};V.propTypes={subject:i.default.array,children:i.default.oneOfType([i.default.node,i.default.arrayOf(i.default.node)]),dx:i.default.number,dy:i.default.number,curve:i.default.number,connectorProps:i.default.object,className:i.default.string},e.Annotation=V,e.ComposableMap=w,e.Geographies=D,e.Geography=L,e.Graticule=F,e.Line=H,e.MapContext=O,e.MapProvider=k,e.Marker=Q,e.Sphere=K,e.ZoomableGroup=W,e.useGeographies=T,e.useZoomPan=U,Object.defineProperty(e,"__esModule",{value:!0})}));
+!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="undefined"!=typeof globalThis?globalThis:e||self).reactSimpleMaps=e.reactSimpleMaps||{},e.React,e.PropTypes,e.d3,e.topojson,e.d3,e.d3)}(this,(function(e,t,r,o,n,a,u){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=s(t),i=s(r),f=l(o);function d(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?d(Object(r),!0).forEach((function(t){h(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):d(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function m(e){return m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},m(e)}function h(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function y(){return y=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},y.apply(this,arguments)}function g(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}function v(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var o,n,a=[],u=!0,s=!1;try{for(r=r.call(e);!(u=(o=r.next()).done)&&(a.push(o.value),!t||a.length!==t);u=!0);}catch(e){s=!0,n=e}finally{try{u||null==r.return||r.return()}finally{if(s)throw n}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return b(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return b(e,t)}(e,t)||function(){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 b(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=new Array(t);r<t;r++)o[r]=e[r];return o}var j=["width","height","projection","projectionConfig"],M=f.geoPath,E=g(f,["geoPath"]),w=t.createContext(),O=function(e){var r=e.width,o=e.height,n=e.projection,a=e.projectionConfig,u=g(e,j),s=v(a.center||[],2),l=s[0],i=s[1],f=v(a.rotate||[],3),d=f[0],p=f[1],m=f[2],h=v(a.parallels||[],2),b=h[0],O=h[1],k=a.scale||null,x=t.useMemo((function(){return function(e){var t=e.projectionConfig,r=void 0===t?{}:t,o=e.projection,n=void 0===o?"geoEqualEarth":o,a=e.width,u=void 0===a?800:a,s=e.height,l=void 0===s?600:s;if("function"==typeof n)return n;var c=E[n]().translate([u/2,l/2]);return[c.center?"center":null,c.rotate?"rotate":null,c.scale?"scale":null,c.parallels?"parallels":null].forEach((function(e){e&&(c=c[e](r[e]||c[e]()))})),c}({projectionConfig:{center:l||0===l||i||0===i?[l,i]:null,rotate:d||0===d||p||0===p?[d,p,m]:null,parallels:b||0===b||O||0===O?[b,O]:null,scale:k},projection:n,width:r,height:o})}),[r,o,n,l,i,d,p,m,b,O,k]),N=t.useCallback(x,[x]),S=t.useMemo((function(){return{width:r,height:o,projection:N,path:M().projection(N)}}),[r,o,N]);return c.default.createElement(w.Provider,y({value:S},u))};O.propTypes={width:i.default.number,height:i.default.number,projection:i.default.oneOfType([i.default.string,i.default.func]),projectionConfig:i.default.object};var k=["width","height","projection","projectionConfig","className"],x=t.forwardRef((function(e,t){var r=e.width,o=void 0===r?800:r,n=e.height,a=void 0===n?600:n,u=e.projection,s=void 0===u?"geoEqualEarth":u,l=e.projectionConfig,i=void 0===l?{}:l,f=e.className,d=void 0===f?"":f,p=g(e,k);return c.default.createElement(O,{width:o,height:a,projection:s,projectionConfig:i},c.default.createElement("svg",y({ref:t,viewBox:"0 0 ".concat(o," ").concat(a),className:"rsm-svg ".concat(d)},p)))}));function N(e,t,r){var o=(e*r.k-e)/2,n=(t*r.k-t)/2;return[e/2-(o+r.x)/r.k,t/2-(n+r.y)/r.k]}function S(e,t){if(!("Topology"===e.type))return t?t(e.features||e):e.features||e;var r=n.feature(e,e.objects[Object.keys(e.objects)[0]]).features;return t?t(r):r}function P(e){return"Topology"===e.type?{outline:n.mesh(e,e.objects[Object.keys(e.objects)[0]],(function(e,t){return e===t})),borders:n.mesh(e,e.objects[Object.keys(e.objects)[0]],(function(e,t){return e!==t}))}:null}function C(e,t){return e?e.map((function(e,r){return p(p({},e),{},{rsmKey:"geo-".concat(r),svgPath:t(e)})})):[]}function T(e){var r=e.geography,o=e.parseGeographies,n=t.useContext(w).path,a=v(t.useState({}),2),u=a[0],s=a[1];t.useEffect((function(){var e;"undefined"!==("undefined"==typeof window?"undefined":m(window))&&(r&&("string"==typeof r?(e=r,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&&s({geographies:S(e,o),mesh:P(e)})})):s({geographies:S(r,o),mesh:P(r)})))}),[r,o]);var l=t.useMemo((function(){var e=u.mesh||{},t=function(e,t,r){return e&&t?{outline:p(p({},e),{},{rsmKey:"outline",svgPath:r(e)}),borders:p(p({},t),{},{rsmKey:"borders",svgPath:r(t)})}:{}}(e.outline,e.borders,n);return{geographies:C(u.geographies,n),outline:t.outline,borders:t.borders}}),[u,n]);return{geographies:l.geographies,outline:l.outline,borders:l.borders}}x.displayName="ComposableMap",x.propTypes={width:i.default.number,height:i.default.number,projection:i.default.oneOfType([i.default.string,i.default.func]),projectionConfig:i.default.object,className:i.default.string};var R=["geography","children","parseGeographies","className"],z=t.forwardRef((function(e,r){var o=e.geography,n=e.children,a=e.parseGeographies,u=e.className,s=void 0===u?"":u,l=g(e,R),i=t.useContext(w),f=i.path,d=i.projection,p=T({geography:o,parseGeographies:a}),m=p.geographies,h=p.outline,v=p.borders;return c.default.createElement("g",y({ref:r,className:"rsm-geographies ".concat(s)},l),m&&m.length>0&&n({geographies:m,outline:h,borders:v,path:f,projection:d}))}));z.displayName="Geographies",z.propTypes={geography:i.default.oneOfType([i.default.string,i.default.object,i.default.array]),children:i.default.func,parseGeographies:i.default.func,className:i.default.string};var G=["geography","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","onFocus","onBlur","style","className"],D=t.forwardRef((function(e,r){var o=e.geography,n=e.onMouseEnter,a=e.onMouseLeave,u=e.onMouseDown,s=e.onMouseUp,l=e.onFocus,i=e.onBlur,f=e.style,d=void 0===f?{}:f,p=e.className,m=void 0===p?"":p,h=g(e,G),b=v(t.useState(!1),2),j=b[0],M=b[1],E=v(t.useState(!1),2),w=E[0],O=E[1];return c.default.createElement("path",y({ref:r,tabIndex:"0",className:"rsm-geography ".concat(m),d:o.svgPath,onMouseEnter:function(e){O(!0),n&&n(e)},onMouseLeave:function(e){O(!1),j&&M(!1),a&&a(e)},onFocus:function(e){O(!0),l&&l(e)},onBlur:function(e){O(!1),j&&M(!1),i&&i(e)},onMouseDown:function(e){M(!0),u&&u(e)},onMouseUp:function(e){M(!1),s&&s(e)},style:d[j||w?j?"pressed":"hover":"default"]},h))}));D.displayName="Geography",D.propTypes={geography:i.default.object,onMouseEnter:i.default.func,onMouseLeave:i.default.func,onMouseDown:i.default.func,onMouseUp:i.default.func,onFocus:i.default.func,onBlur:i.default.func,style:i.default.object,className:i.default.string};var Z=t.memo(D),L=["fill","stroke","step","className"],A=t.forwardRef((function(e,r){var n=e.fill,a=void 0===n?"transparent":n,u=e.stroke,s=void 0===u?"currentcolor":u,l=e.step,i=void 0===l?[10,10]:l,f=e.className,d=void 0===f?"":f,p=g(e,L),m=t.useContext(w).path;return c.default.createElement("path",y({ref:r,d:m(o.geoGraticule().step(i)()),fill:a,stroke:s,className:"rsm-graticule ".concat(d)},p))}));A.displayName="Graticule",A.propTypes={fill:i.default.string,stroke:i.default.string,step:i.default.array,className:i.default.string};var B=t.memo(A);function F(e){var r=e.center,o=e.filterZoomEvent,n=e.onMoveStart,s=e.onMoveEnd,l=e.onMove,c=e.translateExtent,i=void 0===c?[[-1/0,-1/0],[1/0,1/0]]:c,f=e.scaleExtent,d=void 0===f?[1,8]:f,p=e.zoom,m=void 0===p?1:p,h=t.useContext(w),y=h.width,g=h.height,b=h.projection,j=v(r,2),M=j[0],E=j[1],O=v(t.useState({x:0,y:0,k:1}),2),k=O[0],x=O[1],S=t.useRef({x:0,y:0,k:1}),P=t.useRef(),C=t.useRef(),T=t.useRef(!1),R=v(i,2),z=R[0],G=R[1],D=v(z,2),Z=D[0],L=D[1],A=v(G,2),B=A[0],F=A[1],U=v(d,2),q=U[0],W=U[1];return t.useEffect((function(){var e=u.select(P.current);var t=a.zoom().filter((function(e){return o?o(e):!!e&&(!e.ctrlKey&&!e.button)})).scaleExtent([q,W]).translateExtent([[Z,L],[B,F]]).on("start",(function(e){n&&!T.current&&n({coordinates:b.invert(N(y,g,e.transform)),zoom:e.transform.k},e)})).on("zoom",(function(e){if(!T.current){var t=e.transform,r=e.sourceEvent;x({x:t.x,y:t.y,k:t.k,dragging:r}),l&&l({x:t.x,y:t.y,zoom:t.k,dragging:r},e)}})).on("end",(function(e){if(T.current)T.current=!1;else{var t=v(b.invert(N(y,g,e.transform)),2),r=t[0],o=t[1];S.current={x:r,y:o,k:e.transform.k},s&&s({coordinates:[r,o],zoom:e.transform.k},e)}}));C.current=t,e.call(t)}),[y,g,Z,L,B,F,q,W,b,n,l,s,o]),t.useEffect((function(){if(M!==S.current.x||E!==S.current.y||m!==S.current.k){var e=b([M,E]),t=e[0]*m,r=e[1]*m,o=u.select(P.current);T.current=!0,o.call(C.current.transform,a.zoomIdentity.translate(y/2-t,g/2-r).scale(m)),x({x:y/2-t,y:g/2-r,k:m}),S.current={x:M,y:E,k:m}}}),[M,E,m,y,g,b]),{mapRef:P,position:k,transformString:"translate(".concat(k.x," ").concat(k.y,") scale(").concat(k.k,")")}}var U=["center","zoom","minZoom","maxZoom","translateExtent","filterZoomEvent","onMoveStart","onMove","onMoveEnd","className"],q=t.forwardRef((function(e,r){var o=e.center,n=void 0===o?[0,0]:o,a=e.zoom,u=void 0===a?1:a,s=e.minZoom,l=void 0===s?1:s,i=e.maxZoom,f=void 0===i?8:i,d=e.translateExtent,p=e.filterZoomEvent,m=e.onMoveStart,h=e.onMove,v=e.onMoveEnd,b=e.className,j=g(e,U),M=t.useContext(w),E=M.width,O=M.height,k=F({center:n,filterZoomEvent:p,onMoveStart:m,onMove:h,onMoveEnd:v,scaleExtent:[l,f],translateExtent:d,zoom:u}),x=k.mapRef,N=k.transformString;return c.default.createElement("g",{ref:x},c.default.createElement("rect",{width:E,height:O,fill:"transparent"}),c.default.createElement("g",y({ref:r,transform:N,className:"rsm-zoomable-group ".concat(b)},j)))}));q.displayName="ZoomableGroup",q.propTypes={center:i.default.array,zoom:i.default.number,minZoom:i.default.number,maxZoom:i.default.number,translateExtent:i.default.arrayOf(i.default.array),onMoveStart:i.default.func,onMove:i.default.func,onMoveEnd:i.default.func,className:i.default.string};var W=["id","fill","stroke","strokeWidth","className"],I=t.forwardRef((function(e,r){var o=e.id,n=void 0===o?"rsm-sphere":o,a=e.fill,u=void 0===a?"transparent":a,s=e.stroke,l=void 0===s?"currentcolor":s,i=e.strokeWidth,f=void 0===i?.5:i,d=e.className,p=void 0===d?"":d,m=g(e,W),h=t.useContext(w).path,v=t.useMemo((function(){return h({type:"Sphere"})}),[h]);return c.default.createElement(t.Fragment,null,c.default.createElement("defs",null,c.default.createElement("clipPath",{id:n},c.default.createElement("path",{d:v}))),c.default.createElement("path",y({ref:r,d:v,fill:u,stroke:l,strokeWidth:f,style:{pointerEvents:"none"},className:"rsm-sphere ".concat(p)},m)))}));I.displayName="Sphere",I.propTypes={id:i.default.string,fill:i.default.string,stroke:i.default.string,strokeWidth:i.default.number,className:i.default.string};var K=t.memo(I),_=["coordinates","children","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","onFocus","onBlur","style","className"],Q=t.forwardRef((function(e,r){var o=e.coordinates,n=e.children,a=e.onMouseEnter,u=e.onMouseLeave,s=e.onMouseDown,l=e.onMouseUp,i=e.onFocus,f=e.onBlur,d=e.style,p=void 0===d?{}:d,m=e.className,h=void 0===m?"":m,b=g(e,_),j=t.useContext(w).projection,M=v(t.useState(!1),2),E=M[0],O=M[1],k=v(t.useState(!1),2),x=k[0],N=k[1],S=v(j(o),2),P=S[0],C=S[1];return c.default.createElement("g",y({ref:r,transform:"translate(".concat(P,", ").concat(C,")"),className:"rsm-marker ".concat(h),onMouseEnter:function(e){N(!0),a&&a(e)},onMouseLeave:function(e){N(!1),E&&O(!1),u&&u(e)},onFocus:function(e){N(!0),i&&i(e)},onBlur:function(e){N(!1),E&&O(!1),f&&f(e)},onMouseDown:function(e){O(!0),s&&s(e)},onMouseUp:function(e){O(!1),l&&l(e)},style:p[E||x?E?"pressed":"hover":"default"]},b),n)}));Q.displayName="Marker",Q.propTypes={coordinates:i.default.array,children:i.default.oneOfType([i.default.node,i.default.arrayOf(i.default.node)]),onMouseEnter:i.default.func,onMouseLeave:i.default.func,onMouseDown:i.default.func,onMouseUp:i.default.func,onFocus:i.default.func,onBlur:i.default.func,style:i.default.object,className:i.default.string};var $=["from","to","coordinates","stroke","strokeWidth","fill","className"],H=t.forwardRef((function(e,r){var o=e.from,n=void 0===o?[0,0]:o,a=e.to,u=void 0===a?[0,0]:a,s=e.coordinates,l=e.stroke,i=void 0===l?"currentcolor":l,f=e.strokeWidth,d=void 0===f?3:f,p=e.fill,m=void 0===p?"transparent":p,h=e.className,v=void 0===h?"":h,b=g(e,$),j=t.useContext(w).path,M={type:"LineString",coordinates:s||[n,u]};return c.default.createElement("path",y({ref:r,d:j(M),className:"rsm-line ".concat(v),stroke:i,strokeWidth:d,fill:m},b))}));H.displayName="Line",H.propTypes={from:i.default.array,to:i.default.array,coordinates:i.default.array,stroke:i.default.string,strokeWidth:i.default.number,fill:i.default.string,className:i.default.string};var J=["subject","children","connectorProps","dx","dy","curve","className"],V=t.forwardRef((function(e,r){var o=e.subject,n=e.children,a=e.connectorProps,u=e.dx,s=void 0===u?30:u,l=e.dy,i=void 0===l?30:l,f=e.curve,d=void 0===f?0:f,p=e.className,m=void 0===p?"":p,h=g(e,J),b=v((0,t.useContext(w).projection)(o),2),j=b[0],M=b[1],E=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:30,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:30,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.5,o=Array.isArray(r)?r:[r,r],n=e/2*o[0],a=t/2*o[1];return"M".concat(0,",",0," Q",-e/2-n,",").concat(-t/2+a," ").concat(-e,",").concat(-t)}(s,i,d);return c.default.createElement("g",y({ref:r,transform:"translate(".concat(j+s,", ").concat(M+i,")"),className:"rsm-annotation ".concat(m)},h),c.default.createElement("path",y({d:E,fill:"transparent",stroke:"#000"},a)),n)}));V.displayName="Annotation",V.propTypes={subject:i.default.array,children:i.default.oneOfType([i.default.node,i.default.arrayOf(i.default.node)]),dx:i.default.number,dy:i.default.number,curve:i.default.number,connectorProps:i.default.object,className:i.default.string},e.Annotation=V,e.ComposableMap=x,e.Geographies=z,e.Geography=Z,e.Graticule=B,e.Line=H,e.MapContext=w,e.MapProvider=O,e.Marker=Q,e.Sphere=K,e.ZoomableGroup=q,e.useGeographies=T,e.useZoomPan=F,Object.defineProperty(e,"__esModule",{value:!0})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-maps",
-  "version": "3.0.0-beta.3",
+  "version": "3.0.0-beta.6",
   "description": "An svg map chart component built with and for React",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -56,9 +56,9 @@
     "react-dom": "^16.8.0 || 17.x || 18.x"
   },
   "dependencies": {
-    "d3-geo": "^3.0.1",
-    "d3-selection": "^3.0.0",
-    "d3-zoom": "^3.0.0",
+    "d3-geo": "^2.0.2",
+    "d3-selection": "^2.0.0",
+    "d3-zoom": "^2.0.0",
     "topojson-client": "^3.1.0"
   }
 }