@rio-cloud/rio-uikit 0.16.1 → 0.16.2-beta.11

package/components/map/components/features/layers/baselayers/NightLayer.js

@@ -0,0 +1,17 @@
+import { useBaseLayer } from './useBaseLayer';
+import { MAP_TYPE_NIGHT } from '../../../constants';
+
+// https://developer.here.com/documentation/map-tile/dev_guide/topics/resource-info.html
+
+var NightLayer = function NightLayer(props) {
+  var api = props.api,
+    language = props.language;
+  useBaseLayer({
+    api: api,
+    language: language,
+    mapType: MAP_TYPE_NIGHT,
+    additionalParameters: {}
+  });
+  return null;
+};
+export default NightLayer;

package/components/map/components/features/layers/baselayers/SatelliteLayer.js

@@ -1,20 +1,16 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { FORMAT, TILE_SIZE } from '../../../constants';
-import BaseLayer from './BaseLayer';
-var createSatelliteLayer = function createSatelliteLayer(api, language, showTraffic) {
-  var type = showTraffic ? 'traffic' : 'aerial';
-  var tileType = showTraffic ? 'traffictile' : 'maptile';
-  return api.platform.getMapTileService({
-    type: type
-  }).createTileLayer(tileType, 'hybrid.day', TILE_SIZE, FORMAT, {
-    style: 'default',
-    lg: language
-  });
-};
+import { useBaseLayer } from './useBaseLayer';
+import { MAP_TYPE_SATELLITE } from '../../../constants';
 var SatelliteLayer = function SatelliteLayer(props) {
-  return /*#__PURE__*/React.createElement(BaseLayer, _extends({}, props, {
-    createBaseLayer: createSatelliteLayer
-  }));
+  var api = props.api,
+    language = props.language;
+  useBaseLayer({
+    api: api,
+    language: language,
+    mapType: MAP_TYPE_SATELLITE,
+    additionalParameters: {
+      style: 'default'
+    }
+  });
+  return null;
 };
 export default SatelliteLayer;

package/components/map/components/features/layers/baselayers/TerrainLayer.js

@@ -1,20 +1,16 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { FORMAT, TILE_SIZE } from '../../../constants';
-import BaseLayer from './BaseLayer';
-var createTerrainLayer = function createTerrainLayer(api, language, showTraffic) {
-  var type = showTraffic ? 'traffic' : 'aerial';
-  var tileType = showTraffic ? 'traffictile' : 'maptile';
-  return api.platform.getMapTileService({
-    type: type
-  }).createTileLayer(tileType, 'terrain.day', TILE_SIZE, FORMAT, {
-    style: 'default',
-    lg: language
-  });
-};
+import { useBaseLayer } from './useBaseLayer';
+import { MAP_TYPE_TERRAIN } from '../../../constants';
 var TerrainLayer = function TerrainLayer(props) {
-  return /*#__PURE__*/React.createElement(BaseLayer, _extends({}, props, {
-    createBaseLayer: createTerrainLayer
-  }));
+  var api = props.api,
+    language = props.language;
+  useBaseLayer({
+    api: api,
+    language: language,
+    mapType: MAP_TYPE_TERRAIN,
+    additionalParameter: {
+      style: 'default'
+    }
+  });
+  return null;
 };
 export default TerrainLayer;

package/components/map/components/features/layers/baselayers/useBaseLayer.js

@@ -0,0 +1,53 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { useState, useEffect } from 'react';
+import { mapToLongLocale } from '../../../../utils/localization';
+import { getPPI } from '../../../mapUtils';
+import { MAP_TYPE_FLEET_STYLE, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN, MAP_TYPE_NIGHT } from '../../../constants';
+
+// Obtain the default map types from the platform object:
+export var getDefaultBaseLayer = function getDefaultBaseLayer(defaultLayers, mapType, useWebGL) {
+  if (mapType === MAP_TYPE_SATELLITE) {
+    return defaultLayers.raster.satellite.map;
+  }
+  if (mapType === MAP_TYPE_TERRAIN) {
+    return defaultLayers.raster.terrain.map;
+  }
+  if (mapType === MAP_TYPE_FLEET_STYLE) {
+    return defaultLayers.raster.normal.map;
+  }
+  if (mapType === MAP_TYPE_NIGHT) {
+    return defaultLayers.raster.normal.mapnight;
+  }
+  if (useWebGL) {
+    return defaultLayers.vector.normal.map;
+  }
+  return defaultLayers.raster.normal.map;
+};
+export var useBaseLayer = function useBaseLayer(props) {
+  var api = props.api,
+    _props$additionalPara = props.additionalParameters,
+    additionalParameters = _props$additionalPara === void 0 ? {} : _props$additionalPara,
+    language = props.language,
+    _props$isWebGL = props.isWebGL,
+    isWebGL = _props$isWebGL === void 0 ? false : _props$isWebGL,
+    mapType = props.mapType;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    baseLayer = _useState2[0],
+    setBaseLayer = _useState2[1];
+  useEffect(function () {
+    if (!baseLayer) {
+      var additionalParametersWithLocale = _objectSpread(_objectSpread({}, additionalParameters), {}, {
+        lg: mapToLongLocale(language),
+        ppi: getPPI()
+      });
+      var defaultLayers = api.platform.createDefaultLayers(additionalParametersWithLocale);
+      var newBaseLayer = getDefaultBaseLayer(defaultLayers, mapType, isWebGL);
+      api.map.setBaseLayer(newBaseLayer);
+      setBaseLayer(newBaseLayer);
+    }
+  });
+};

package/components/map/components/features/settings/builtinSettings/MapClusterSettings.js

@@ -44,7 +44,7 @@ var MapClusterSettings = function MapClusterSettings(props) {
       },
       isActive: !showCluster,
       activeIcon: /*#__PURE__*/React.createElement(MapIcon, {
-        name: CLUSTER_ACTIVE,
+        name: NO_CLUSTER_ACTIVE,
         className: "MapNoClusterIcon"
       }),
       inactiveIcon: /*#__PURE__*/React.createElement(MapIcon, {

package/components/map/components/features/settings/builtinSettings/MapTypeSettings.js

@@ -3,11 +3,11 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["mapType", "onMapTypeChange"];
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { MAP_TYPE_DEFAULT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN } from '../../../constants';
+import { MAP_TYPE_DEFAULT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_NIGHT, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN } from '../../../constants';
 import MapSettingsPanel from '../MapSettingsPanel';
 import MapSettingsItem from '../MapSettingsItem';
 import MapSettingsTile from '../MapSettingsTile';
-import { MapIcon, MAP_TYPE_FLAT_ACTIVE, MAP_TYPE_FLAT_INACTIVE, MAP_TYPE_FLAT_TRUCK_ACTIVE, MAP_TYPE_FLAT_TRUCK_INACTIVE, MAP_TYPE_SATELITE_ACTIVE, MAP_TYPE_SATELITE_INACTIVE, MAP_TYPE_TERRAIN_ACTIVE, MAP_TYPE_TERRAIN_INACTIVE } from '../../../../icons/MapIcon';
+import { MapIcon, MAP_TYPE_FLAT_ACTIVE, MAP_TYPE_FLAT_INACTIVE, MAP_TYPE_FLAT_TRUCK_ACTIVE, MAP_TYPE_FLAT_TRUCK_INACTIVE, MAP_TYPE_SATELITE_ACTIVE, MAP_TYPE_SATELITE_INACTIVE, MAP_TYPE_TERRAIN_ACTIVE, MAP_TYPE_TERRAIN_INACTIVE, MAP_TYPE_NIGHT_ACTIVE, MAP_TYPE_NIGHT_INACTIVE } from '../../../../icons/MapIcon';
 var MapTypeSettings = function MapTypeSettings(props) {
   var mapType = props.mapType,
     onMapTypeChange = props.onMapTypeChange,
@@ -17,7 +17,8 @@ var MapTypeSettings = function MapTypeSettings(props) {
       isDefault: mapType === MAP_TYPE_DEFAULT,
       isFleetStyle: mapType === MAP_TYPE_FLEET_STYLE,
       isTerrain: mapType === MAP_TYPE_TERRAIN,
-      isSatellite: mapType === MAP_TYPE_SATELLITE
+      isSatellite: mapType === MAP_TYPE_SATELLITE,
+      isNight: mapType === MAP_TYPE_NIGHT
     };
   }, [mapType]);
   var getIcon = function getIcon(currentType) {
@@ -41,6 +42,11 @@ var MapTypeSettings = function MapTypeSettings(props) {
         name: MAP_TYPE_SATELITE_INACTIVE
       });
     }
+    if (currentType.isNight) {
+      return /*#__PURE__*/React.createElement(MapIcon, {
+        name: MAP_TYPE_NIGHT_INACTIVE
+      });
+    }
   };
   return /*#__PURE__*/React.createElement(MapSettingsTile, _extends({
     className: "MapTypeSettings",

package/components/map/components/mapUtils.js

@@ -1,9 +1,15 @@
-/* eslint-disable no-undef */
+import { HIGH_RES_PPI } from './constants';
 import map from 'lodash/fp/map';
 import flatMap from 'lodash/fp/flatMap';
 import filter from 'lodash/fp/filter';
 import flow from 'lodash/fp/flow';
 import first from 'lodash/fp/first';
+
+// Note: higher PPI image tiles result in larger label size and show more label on the map
+export var getPPI = function getPPI() {
+  return undefined;
+}; //window.devicePixelRatio > 1 ? HIGH_RES_PPI : undefined;
+
 var latLngFilterFunction = function latLngFilterFunction(lat, lng) {
   return function (obj) {
     return obj.getGeometry && obj.getGeometry().lat === lat && obj.getGeometry().lng === lng;
@@ -85,8 +91,21 @@ export var createUtils = function createUtils(mapApi) {
         lng: center.lng
       };
     },
+    setCenter: function setCenter(position, animate) {
+      mapApi.getViewModel().setLookAtData({
+        position: position
+      }, animate);
+    },
     getZoom: function getZoom() {
-      return mapApi.getZoom();
+      var _mapApi$getViewModel$ = mapApi.getViewModel().getLookAtData(),
+        zoom = _mapApi$getViewModel$.zoom;
+      return Math.round(zoom);
+    },
+    setZoom: function setZoom(zoom) {
+      var zoomAnimation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      mapApi.getViewModel().setLookAtData({
+        zoom: zoom
+      }, zoomAnimation);
     },
     getViewPort: function getViewPort() {
       var viewPort = mapApi.getViewPort();
@@ -107,16 +126,33 @@ export var createUtils = function createUtils(mapApi) {
       };
     },
     getBounds: function getBounds() {
-      var _mapApi$getViewModel$ = mapApi.getViewModel().getLookAtData(),
-        bounds = _mapApi$getViewModel$.bounds;
+      var _mapApi$getViewModel$2 = mapApi.getViewModel().getLookAtData(),
+        bounds = _mapApi$getViewModel$2.bounds;
+
+      // TODO: remove old 3.0 version after all Services use the latest Map
+      if (bounds.getTopLeft) {
+        return {
+          topLeft: {
+            lng: bounds.getTopLeft().lng,
+            lat: bounds.getTopLeft().lat
+          },
+          bottomRight: {
+            lng: bounds.getBottomRight().lng,
+            lat: bounds.getBottomRight().lat
+          }
+        };
+      }
+
+      // HERE Maps API for JavaScript 3.1
+      var boundingBox = bounds.getBoundingBox();
       return {
         topLeft: {
-          lng: bounds.getTopLeft().lng,
-          lat: bounds.getTopLeft().lat
+          lng: boundingBox.getTopLeft().lng,
+          lat: boundingBox.getTopLeft().lat
         },
         bottomRight: {
-          lng: bounds.getBottomRight().lng,
-          lat: bounds.getBottomRight().lat
+          lng: boundingBox.getBottomRight().lng,
+          lat: boundingBox.getBottomRight().lat
         }
       };
     },

package/components/map/icons/MapIcon.js

@@ -40,6 +40,8 @@ export var MAP_TYPE_SATELITE_ACTIVE = 'mapTypeSateliteActive';
 export var MAP_TYPE_SATELITE_INACTIVE = 'mapTypeSateliteInactive';
 export var MAP_TYPE_TERRAIN_ACTIVE = 'mapTypeTerrainActive';
 export var MAP_TYPE_TERRAIN_INACTIVE = 'mapTypeTerrainInactive';
+export var MAP_TYPE_NIGHT_ACTIVE = 'mapTypeNightActive';
+export var MAP_TYPE_NIGHT_INACTIVE = 'mapTypeNightInactive';
 export var NO_CLUSTER_ACTIVE = 'noClusterActive';
 export var NO_CLUSTER_INACTIVE = 'noClusterInactive';
 export var ROAD_RESTRICTIONS_ACTIVE = 'roadRestrictionsActive';
@@ -317,6 +319,68 @@ var icons = {
     fillRule: "evenodd",
     d: "M0 20.2l20 11.333L40 20.2 20 8.867 0 20.2zm26.737-6.121c-.891.5-1.763.96-2.756 1.25-.073.02-.146.039-.22.057-.397-.188-.793-.374-1.186-.557a81.547 81.547 0 0 1-1.507-.71c-.245-.119-.487-.245-.733-.37a98.714 98.714 0 0 0 2.957-1.623l3.445 1.953zm3.755 2.129c-.924.518-1.918 1.035-2.961 1.298a35.637 35.637 0 0 0-1.605-.996 27.1 27.1 0 0 0-1.752-.925c1.037-.318 1.973-.82 2.873-1.33l3.445 1.953zm3.753 2.126a91.698 91.698 0 0 1-2.974 1.625c-.273-.168-.547-.336-.814-.51-.536-.344-1.065-.7-1.592-1.055-.332-.224-.669-.449-1.007-.672 1.063-.309 2.06-.84 2.943-1.34l3.444 1.952zm3.293 1.866l-2.984 1.69a108.786 108.786 0 0 1-2.983-1.743c1.003-.53 1.997-1.076 2.982-1.639l2.985 1.692zm-32.09-1.692a98.34 98.34 0 0 0 2.982 1.639c-1.01.616-2.027 1.199-2.984 1.743L2.463 20.2l2.985-1.692zM9.2 16.383c.882.497 1.88 1.03 2.942 1.34-.339.224-.674.449-1.004.67-.529.356-1.058.713-1.593 1.058-.268.173-.542.342-.815.51-1.008-.523-2-1.075-2.974-1.626L9.2 16.383zm7.508-4.255c.966.547 1.954 1.1 2.956 1.624-.244.124-.487.25-.733.37-.5.242-1.003.476-1.508.71-.391.18-.787.366-1.183.555-.073-.02-.143-.035-.22-.059-.993-.29-1.866-.747-2.758-1.25l3.446-1.95zm9.061 4.642c.454.262.9.543 1.342.827a5.05 5.05 0 0 1-1.106.085c-.444-.014-.832-.047-1.21-.078a15.38 15.38 0 0 0-.956-.062 16.057 16.057 0 0 0-.505-.54c-.488-.494-.956-.893-1.491-1.169.207.018.412.03.623.03a5.37 5.37 0 0 0 1.26-.155c.69.33 1.38.676 2.043 1.062zm-9.494-1.064c.477.113.883.156 1.26.156.218 0 .428-.014.64-.032-.544.279-1.019.677-1.493 1.158-.178.18-.35.365-.52.554-.319.01-.637.03-.955.062-.377.031-.766.066-1.21.078a5.32 5.32 0 0 1-1.105-.085c.44-.284.887-.563 1.34-.826.66-.387 1.352-.733 2.043-1.065zm3.734-.003c1.358.012 2.193.587 3.1 1.509.108.108.212.223.316.335-.888.046-1.728.345-2.806 1.386-.214.208-.42.424-.62.642-.2-.218-.406-.434-.62-.642-1.078-1.041-1.918-1.339-2.808-1.384.11-.117.217-.236.329-.35.907-.919 1.743-1.488 3.109-1.496zm-6.004 2.28c.41-.015.82-.042 1.228-.08.23-.02.447-.038.655-.05-.342.4-.678.806-1.006 1.217-.194.24-.387.479-.582.716-.669.81-1.254 1.432-1.84 1.964-.383-.182-.766-.36-1.144-.536a87.688 87.688 0 0 1-1.509-.71c-.255-.124-.506-.255-.76-.382.223-.139.448-.276.666-.418.537-.347 1.07-.7 1.598-1.06.402-.27.811-.545 1.225-.815.48.108.972.17 1.468.154h.001zm.532 1.992c.197-.237.391-.478.585-.719.382-.472.773-.954 1.185-1.418.952-.003 1.742.232 2.857 1.308.218.21.426.431.631.656-.416.472-.812.957-1.197 1.435-.526.653-1.07 1.33-1.663 1.945-.229.238-.468.46-.712.675-.511-.333-1.03-.66-1.56-.967-.622-.36-1.266-.69-1.91-1a18.968 18.968 0 0 0 1.784-1.915zm2.621 3.415c.603-.625 1.151-1.306 1.68-1.966.374-.464.757-.934 1.161-1.392.402.458.787.928 1.16 1.392.531.66 1.08 1.341 1.68 1.966.217.225.443.436.673.64-.374.246-.744.495-1.108.738-.53.358-1.061.715-1.6 1.063-.265.171-.536.336-.805.503-.27-.167-.54-.332-.805-.503a82.344 82.344 0 0 1-1.6-1.063c-.364-.243-.734-.492-1.108-.738.23-.203.456-.413.672-.64zm5.906-.206c-.593-.615-1.136-1.29-1.662-1.945a39.25 39.25 0 0 0-1.198-1.435c.204-.225.414-.446.632-.657 1.114-1.076 1.905-1.31 2.857-1.307.41.462.802.944 1.182 1.414.197.244.394.488.594.73a19.38 19.38 0 0 0 1.777 1.906c-.645.312-1.29.64-1.911 1.001a35.08 35.08 0 0 0-1.56.968c-.245-.216-.482-.44-.71-.675h-.001zm2.643-3.39c-.2-.24-.396-.484-.594-.728a46.52 46.52 0 0 0-1.005-1.214c.209.013.425.03.658.05.363.032.774.067 1.226.081a5.73 5.73 0 0 0 1.467-.159c.415.272.826.546 1.228.818.53.358 1.06.715 1.598 1.06.22.143.445.28.666.418-.252.129-.505.26-.76.382-.502.244-1.007.477-1.512.712-.377.174-.757.352-1.138.533-.587-.532-1.172-1.153-1.834-1.953zm-4.262-4.304a15.1 15.1 0 0 0-1.268-.09h-.003c-.013 0-.024.005-.035.007-.044-.002-.082-.008-.127-.008h-.003c-.045 0-.087.006-.132.008a.171.171 0 0 0-.057-.007c-.49.01-.903.052-1.269.09-.622.063-1.146.117-1.83.002.278-.13.556-.26.832-.387.505-.235 1.011-.47 1.513-.713.313-.151.622-.31.931-.47a45.06 45.06 0 0 0 2.444 1.181c.276.128.555.257.833.389-.683.113-1.205.061-1.829-.002zm-8.492-1.235c.901.51 1.836 1.012 2.873 1.33-.592.29-1.182.593-1.754.925a37.06 37.06 0 0 0-1.603.996c-1.045-.263-2.04-.779-2.963-1.298l3.447-1.953zm-4.208 6.052c.306.157.614.315.923.466.502.244 1.008.478 1.513.712.342.16.687.318 1.031.482-.878.758-1.787 1.34-3.015 2.05l-3.444-1.95c.965-.55 1.982-1.139 2.992-1.76zm3.766 1.802c.674.324 1.35.664 1.997 1.041.5.29.993.598 1.478.915-.982.83-2.04 1.502-3.035 2.078L9.506 24.19c1.192-.694 2.11-1.294 3.006-2.08l-.001-.001zm3.738 2.129c.395.26.786.522 1.17.78.533.36 1.065.716 1.605 1.066.227.144.457.288.688.43-1.02.622-2.042 1.21-3.006 1.757l-3.452-1.956c.986-.576 2.027-1.246 2.995-2.077zM20 26.693c1.01.62 2.025 1.207 2.985 1.753L20 30.139l-2.985-1.692c.962-.547 1.975-1.134 2.985-1.754zm.286-.178c.229-.143.46-.283.687-.43.54-.347 1.073-.706 1.605-1.065.385-.26.776-.52 1.172-.78.97.83 2.009 1.5 2.995 2.077l-3.452 1.956a112.097 112.097 0 0 1-3.007-1.758zm3.727-2.45c.486-.315.98-.625 1.478-.915.652-.373 1.319-.72 1.998-1.04.894.787 1.812 1.385 3.007 2.08l-3.446 1.954c-.994-.578-2.053-1.247-3.037-2.08v.001zm3.777-2.1c.343-.162.685-.322 1.023-.478.508-.233 1.014-.47 1.517-.713.31-.15.617-.308.923-.465 1.01.621 2.027 1.208 2.992 1.757L30.8 24.02c-1.205-.7-2.122-1.289-3.01-2.053v-.002zM20 13.584a94.01 94.01 0 0 1-2.983-1.63L20 10.26l2.984 1.69A89.36 89.36 0 0 1 20 13.583v.001z"
   })),
+  mapTypeNightActive: /*#__PURE__*/React.createElement("svg", {
+    width: "40",
+    height: "40",
+    viewBox: "0 0 40 40",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 20.322L19.98 31.644L39.96 20.322L19.98 9L0 20.322ZM5.363 22.178C5.363 22.178 2.01 20.254 2.01 20.256L5.363 18.354L8.717 20.254L5.363 22.178V22.178ZM8.98 24.24L5.626 22.317L8.98 20.417L12.333 22.316L8.98 24.24ZM12.614 26.277C12.614 26.277 9.261 24.352 9.261 24.354L12.614 22.454L15.967 24.352L12.614 26.277V26.277ZM16.25 28.317L12.897 26.394L16.25 24.494L19.603 26.393L16.25 28.317V28.317ZM19.887 30.392L16.534 28.469L19.887 26.569L23.241 28.468L19.887 30.392ZM9.11 20.128C9.11 20.128 5.757 18.204 5.757 18.206L9.11 16.304L12.464 18.204L9.11 20.128V20.128ZM12.727 22.19L9.373 20.267L12.727 18.367L16.08 20.266L12.727 22.19V22.19ZM16.361 24.227L13.008 22.304L16.361 20.404L19.714 22.303L16.361 24.227V24.227ZM19.997 26.267C19.997 26.267 16.644 24.343 16.644 24.345L19.997 22.443L23.35 24.343L19.997 26.267V26.267ZM23.634 28.342L20.28 26.419L23.633 24.519L26.987 26.418L23.633 28.342H23.634V28.342ZM12.76 18.038C12.76 18.038 9.407 16.114 9.407 16.116L12.76 14.214L16.113 16.114L12.76 18.038ZM16.376 20.1L13.023 18.177L16.376 16.277L19.729 18.176L16.376 20.1ZM20.011 22.137C20.011 22.137 16.658 20.212 16.658 20.214L20.011 18.313L23.364 20.213L20.011 22.137V22.137ZM23.647 24.177L20.294 22.254L23.647 20.354L27 22.253L23.647 24.177ZM27.284 26.252L23.931 24.329L27.284 22.429L30.637 24.328L27.284 26.252V26.252ZM16.367 15.964L13.014 14.041L16.367 12.141L19.721 14.04L16.367 15.964V15.964ZM19.983 18.026L16.63 16.102L19.983 14.202L23.337 16.101L19.983 18.025V18.026ZM23.618 20.063C23.618 20.063 20.265 18.138 20.265 18.14L23.618 16.239L26.971 18.139L23.618 20.063ZM27.254 22.103L23.901 20.18L27.254 18.28L30.607 20.179L27.254 22.103V22.103ZM30.891 24.178C30.891 24.178 27.538 22.253 27.538 22.255L30.891 20.355L34.244 22.253L30.891 24.178V24.178ZM20.061 13.835C20.061 13.835 16.707 11.91 16.707 11.912L20.06 10.011L23.413 11.911L20.06 13.835H20.061V13.835ZM23.676 15.896C23.676 15.896 20.323 13.972 20.323 13.974L23.676 12.073L27.03 13.972L23.676 15.896ZM27.311 17.933C27.311 17.933 23.958 16.009 23.958 16.011L27.311 14.109L30.664 16.009L27.311 17.933ZM30.947 19.973C30.947 19.973 27.594 18.049 27.594 18.051L30.947 16.15L34.3 18.05L30.947 19.973V19.973ZM34.584 22.048C34.584 22.048 31.231 20.124 31.231 20.126L34.584 18.225L37.937 20.124L34.584 22.048Z",
+    fill: "#30B4C0"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12.352 3.14533C12.4221 3.2154 12.4698 3.3047 12.489 3.40192C12.5082 3.49913 12.4981 3.59987 12.46 3.69133C12.1552 4.42281 11.9989 5.20757 12 6C12 7.5913 12.6321 9.11742 13.7574 10.2426C14.8826 11.3679 16.4087 12 18 12C18.7924 12.0011 19.5772 11.8448 20.3087 11.54C20.4001 11.5019 20.5007 11.4919 20.5978 11.5111C20.695 11.5303 20.7842 11.5779 20.8543 11.6478C20.9243 11.7178 20.972 11.807 20.9913 11.9041C21.0106 12.0012 21.0006 12.1019 20.9627 12.1933C20.4307 13.4688 19.5332 14.5584 18.3831 15.3248C17.2331 16.0911 15.882 16.5 14.5 16.5C10.634 16.5 7.5 13.366 7.5 9.5C7.5 6.588 9.278 4.092 11.8067 3.03733C11.898 2.99935 11.9986 2.98933 12.0957 3.00856C12.1928 3.02778 12.282 3.07538 12.352 3.14533V3.14533Z",
+    fill: "#30B4C0"
+  }), /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clip0_1_2)"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M25.5 4.25C25.5815 4.25002 25.6607 4.27657 25.7258 4.32565C25.7908 4.37473 25.8381 4.44365 25.8605 4.522L26.267 5.945C26.3545 6.25146 26.5187 6.53055 26.7441 6.75591C26.9695 6.98128 27.2485 7.14548 27.555 7.233L28.978 7.6395C29.0563 7.66193 29.1252 7.70924 29.1742 7.77428C29.2232 7.83932 29.2497 7.91855 29.2497 8C29.2497 8.08145 29.2232 8.16068 29.1742 8.22572C29.1252 8.29076 29.0563 8.33807 28.978 8.3605L27.555 8.767C27.2485 8.85452 26.9695 9.01872 26.7441 9.24409C26.5187 9.46945 26.3545 9.74854 26.267 10.055L25.8605 11.478C25.8381 11.5563 25.7908 11.6252 25.7257 11.6742C25.6607 11.7232 25.5815 11.7497 25.5 11.7497C25.4186 11.7497 25.3393 11.7232 25.2743 11.6742C25.2092 11.6252 25.1619 11.5563 25.1395 11.478L24.733 10.055C24.6455 9.74854 24.4813 9.46945 24.2559 9.24409C24.0306 9.01872 23.7515 8.85452 23.445 8.767L22.022 8.3605C21.9437 8.33807 21.8748 8.29076 21.8258 8.22572C21.7768 8.16068 21.7503 8.08145 21.7503 8C21.7503 7.91855 21.7768 7.83932 21.8258 7.77428C21.8748 7.70924 21.9437 7.66193 22.022 7.6395L23.445 7.233C23.7515 7.14548 24.0306 6.98128 24.2559 6.75591C24.4813 6.53055 24.6455 6.25146 24.733 5.945L25.1395 4.522C25.1619 4.44365 25.2092 4.37473 25.2742 4.32565C25.3393 4.27657 25.4185 4.25002 25.5 4.25ZM30 2.75C30.0837 2.74995 30.1649 2.77788 30.2309 2.82934C30.2968 2.8808 30.3437 2.95284 30.364 3.034L30.493 3.552C30.611 4.022 30.978 4.389 31.448 4.507L31.966 4.636C32.0473 4.65614 32.1195 4.70293 32.1712 4.7689C32.2228 4.83487 32.2508 4.91623 32.2508 5C32.2508 5.08377 32.2228 5.16513 32.1712 5.2311C32.1195 5.29707 32.0473 5.34386 31.966 5.364L31.448 5.493C30.978 5.611 30.611 5.978 30.493 6.448L30.364 6.966C30.3439 7.04731 30.2971 7.11954 30.2311 7.17117C30.1651 7.22279 30.0838 7.25084 30 7.25084C29.9162 7.25084 29.8349 7.22279 29.7689 7.17117C29.7029 7.11954 29.6561 7.04731 29.636 6.966L29.507 6.448C29.4493 6.21721 29.33 6.00645 29.1618 5.83824C28.9936 5.67003 28.7828 5.55069 28.552 5.493L28.034 5.364C27.9527 5.34386 27.8805 5.29707 27.8288 5.2311C27.7772 5.16513 27.7492 5.08377 27.7492 5C27.7492 4.91623 27.7772 4.83487 27.8288 4.7689C27.8805 4.70293 27.9527 4.65614 28.034 4.636L28.552 4.507C28.7828 4.44931 28.9936 4.32997 29.1618 4.16176C29.33 3.99355 29.4493 3.78279 29.507 3.552L29.636 3.034C29.6563 2.95284 29.7032 2.8808 29.7691 2.82934C29.8351 2.77788 29.9163 2.74995 30 2.75V2.75ZM29.25 9.5C29.3288 9.49995 29.4055 9.52471 29.4694 9.57075C29.5333 9.61679 29.5811 9.68178 29.606 9.7565L29.803 10.348C29.878 10.5715 30.053 10.7475 30.277 10.822L30.8685 11.0195C30.943 11.0445 31.0077 11.0923 31.0536 11.1561C31.0995 11.2198 31.1242 11.2964 31.1242 11.375C31.1242 11.4536 31.0995 11.5302 31.0536 11.5939C31.0077 11.6577 30.943 11.7055 30.8685 11.7305L30.277 11.928C30.0535 12.003 29.8775 12.178 29.803 12.402L29.6055 12.9935C29.5805 13.068 29.5327 13.1327 29.4689 13.1786C29.4052 13.2245 29.3286 13.2491 29.25 13.2491C29.1714 13.2491 29.0949 13.2245 29.0311 13.1786C28.9673 13.1327 28.9195 13.068 28.8945 12.9935L28.697 12.402C28.6602 12.2916 28.5982 12.1914 28.5159 12.1091C28.4336 12.0268 28.3334 11.9648 28.223 11.928L27.6315 11.7305C27.557 11.7055 27.4923 11.6577 27.4464 11.5939C27.4005 11.5302 27.3759 11.4536 27.3759 11.375C27.3759 11.2964 27.4005 11.2198 27.4464 11.1561C27.4923 11.0923 27.557 11.0445 27.6315 11.0195L28.223 10.822C28.4465 10.747 28.6225 10.572 28.697 10.348L28.8945 9.7565C28.9194 9.68186 28.9671 9.61693 29.0309 9.57089C29.0947 9.52486 29.1713 9.50006 29.25 9.5V9.5Z",
+    fill: "#30B4C0"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip0_1_2"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "12",
+    height: "12",
+    fill: "white",
+    transform: "translate(21 2)"
+  })))),
+  mapTypeNightInactive: /*#__PURE__*/React.createElement("svg", {
+    width: "40",
+    height: "40",
+    viewBox: "0 0 40 40",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0.0199966 20.2L20 31.522L39.98 20.2L20 8.878L0.0199966 20.2ZM5.383 22.056C5.383 22.056 2.03 20.132 2.03 20.134L5.383 18.232L8.737 20.132L5.383 22.056V22.056ZM9 24.118L5.646 22.195L9 20.295L12.353 22.194L9 24.118ZM12.634 26.155C12.634 26.155 9.281 24.23 9.281 24.232L12.634 22.332L15.987 24.23L12.634 26.155V26.155ZM16.27 28.195L12.917 26.272L16.27 24.372L19.623 26.271L16.27 28.195V28.195ZM19.907 30.27L16.554 28.347L19.907 26.447L23.261 28.346L19.907 30.27ZM9.13 20.006C9.13 20.006 5.777 18.082 5.777 18.084L9.13 16.182L12.484 18.082L9.13 20.006V20.006ZM12.747 22.068L9.393 20.145L12.747 18.245L16.1 20.144L12.747 22.068V22.068ZM16.381 24.105L13.028 22.182L16.381 20.282L19.734 22.181L16.381 24.105V24.105ZM20.017 26.145C20.017 26.145 16.664 24.221 16.664 24.223L20.017 22.321L23.37 24.221L20.017 26.145V26.145ZM23.654 28.22L20.3 26.297L23.653 24.397L27.007 26.296L23.653 28.22H23.654V28.22ZM12.78 17.916C12.78 17.916 9.427 15.992 9.427 15.994L12.78 14.092L16.133 15.992L12.78 17.916ZM16.396 19.978L13.043 18.055L16.396 16.155L19.749 18.054L16.396 19.978ZM20.031 22.015C20.031 22.015 16.678 20.09 16.678 20.092L20.031 18.191L23.384 20.091L20.031 22.015V22.015ZM23.667 24.055L20.314 22.132L23.667 20.232L27.02 22.131L23.667 24.055ZM27.304 26.13L23.951 24.207L27.304 22.307L30.657 24.206L27.304 26.13V26.13ZM16.387 15.842L13.034 13.919L16.387 12.019L19.741 13.918L16.387 15.842V15.842ZM20.003 17.904L16.65 15.98L20.003 14.08L23.357 15.979L20.003 17.903V17.904ZM23.638 19.941C23.638 19.941 20.285 18.016 20.285 18.018L23.638 16.117L26.991 18.017L23.638 19.941ZM27.274 21.981L23.921 20.058L27.274 18.158L30.627 20.057L27.274 21.981V21.981ZM30.911 24.056C30.911 24.056 27.558 22.131 27.558 22.133L30.911 20.233L34.264 22.131L30.911 24.056V24.056ZM20.081 13.713C20.081 13.713 16.727 11.788 16.727 11.79L20.08 9.889L23.433 11.789L20.08 13.713H20.081V13.713ZM23.696 15.774C23.696 15.774 20.343 13.85 20.343 13.852L23.696 11.951L27.05 13.85L23.696 15.774ZM27.331 17.811C27.331 17.811 23.978 15.887 23.978 15.889L27.331 13.987L30.684 15.887L27.331 17.811ZM30.967 19.851C30.967 19.851 27.614 17.927 27.614 17.929L30.967 16.028L34.32 17.928L30.967 19.851V19.851ZM34.604 21.926C34.604 21.926 31.251 20.002 31.251 20.004L34.604 18.103L37.957 20.002L34.604 21.926Z",
+    fill: "#939BA8"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12.352 3.14533C12.4221 3.2154 12.4698 3.3047 12.489 3.40192C12.5082 3.49913 12.4981 3.59987 12.46 3.69133C12.1552 4.42281 11.9989 5.20757 12 6C12 7.5913 12.6321 9.11742 13.7574 10.2426C14.8826 11.3679 16.4087 12 18 12C18.7924 12.0011 19.5772 11.8448 20.3087 11.54C20.4001 11.5019 20.5007 11.4919 20.5978 11.5111C20.695 11.5303 20.7842 11.5779 20.8543 11.6478C20.9243 11.7178 20.972 11.807 20.9913 11.9041C21.0106 12.0012 21.0006 12.1019 20.9627 12.1933C20.4307 13.4688 19.5332 14.5584 18.3831 15.3248C17.2331 16.0911 15.882 16.5 14.5 16.5C10.634 16.5 7.5 13.366 7.5 9.5C7.5 6.588 9.278 4.092 11.8067 3.03733C11.898 2.99935 11.9986 2.98933 12.0957 3.00856C12.1928 3.02778 12.282 3.07538 12.352 3.14533V3.14533Z",
+    fill: "#939BA8"
+  }), /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clip0_1_4)"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M25.5 4.25C25.5815 4.25002 25.6607 4.27657 25.7258 4.32565C25.7908 4.37473 25.8381 4.44365 25.8605 4.522L26.267 5.945C26.3545 6.25146 26.5187 6.53055 26.7441 6.75591C26.9694 6.98128 27.2485 7.14548 27.555 7.233L28.978 7.6395C29.0563 7.66193 29.1252 7.70924 29.1742 7.77428C29.2232 7.83932 29.2497 7.91855 29.2497 8C29.2497 8.08145 29.2232 8.16068 29.1742 8.22572C29.1252 8.29076 29.0563 8.33807 28.978 8.3605L27.555 8.767C27.2485 8.85452 26.9694 9.01872 26.7441 9.24409C26.5187 9.46945 26.3545 9.74854 26.267 10.055L25.8605 11.478C25.8381 11.5563 25.7908 11.6252 25.7257 11.6742C25.6607 11.7232 25.5814 11.7497 25.5 11.7497C25.4185 11.7497 25.3393 11.7232 25.2743 11.6742C25.2092 11.6252 25.1619 11.5563 25.1395 11.478L24.733 10.055C24.6455 9.74854 24.4813 9.46945 24.2559 9.24409C24.0305 9.01872 23.7515 8.85452 23.445 8.767L22.022 8.3605C21.9437 8.33807 21.8748 8.29076 21.8258 8.22572C21.7768 8.16068 21.7503 8.08145 21.7503 8C21.7503 7.91855 21.7768 7.83932 21.8258 7.77428C21.8748 7.70924 21.9437 7.66193 22.022 7.6395L23.445 7.233C23.7515 7.14548 24.0305 6.98128 24.2559 6.75591C24.4813 6.53055 24.6455 6.25146 24.733 5.945L25.1395 4.522C25.1619 4.44365 25.2092 4.37473 25.2742 4.32565C25.3393 4.27657 25.4185 4.25002 25.5 4.25ZM30 2.75C30.0837 2.74995 30.1649 2.77788 30.2309 2.82934C30.2968 2.8808 30.3437 2.95284 30.364 3.034L30.493 3.552C30.611 4.022 30.978 4.389 31.448 4.507L31.966 4.636C32.0473 4.65614 32.1195 4.70293 32.1712 4.7689C32.2228 4.83487 32.2508 4.91623 32.2508 5C32.2508 5.08377 32.2228 5.16513 32.1712 5.2311C32.1195 5.29707 32.0473 5.34386 31.966 5.364L31.448 5.493C30.978 5.611 30.611 5.978 30.493 6.448L30.364 6.966C30.3439 7.04731 30.2971 7.11954 30.2311 7.17117C30.1651 7.22279 30.0838 7.25084 30 7.25084C29.9162 7.25084 29.8349 7.22279 29.7689 7.17117C29.7029 7.11954 29.6561 7.04731 29.636 6.966L29.507 6.448C29.4493 6.21721 29.33 6.00645 29.1618 5.83824C28.9935 5.67003 28.7828 5.55069 28.552 5.493L28.034 5.364C27.9527 5.34386 27.8805 5.29707 27.8288 5.2311C27.7772 5.16513 27.7492 5.08377 27.7492 5C27.7492 4.91623 27.7772 4.83487 27.8288 4.7689C27.8805 4.70293 27.9527 4.65614 28.034 4.636L28.552 4.507C28.7828 4.44931 28.9935 4.32997 29.1618 4.16176C29.33 3.99355 29.4493 3.78279 29.507 3.552L29.636 3.034C29.6563 2.95284 29.7032 2.8808 29.7691 2.82934C29.8351 2.77788 29.9163 2.74995 30 2.75V2.75ZM29.25 9.5C29.3288 9.49995 29.4055 9.52471 29.4694 9.57075C29.5333 9.61679 29.5811 9.68178 29.606 9.7565L29.803 10.348C29.878 10.5715 30.053 10.7475 30.277 10.822L30.8685 11.0195C30.943 11.0445 31.0077 11.0923 31.0536 11.1561C31.0995 11.2198 31.1241 11.2964 31.1241 11.375C31.1241 11.4536 31.0995 11.5302 31.0536 11.5939C31.0077 11.6577 30.943 11.7055 30.8685 11.7305L30.277 11.928C30.0535 12.003 29.8775 12.178 29.803 12.402L29.6055 12.9935C29.5805 13.068 29.5327 13.1327 29.4689 13.1786C29.4051 13.2245 29.3286 13.2491 29.25 13.2491C29.1714 13.2491 29.0948 13.2245 29.0311 13.1786C28.9673 13.1327 28.9195 13.068 28.8945 12.9935L28.697 12.402C28.6602 12.2916 28.5982 12.1914 28.5159 12.1091C28.4336 12.0268 28.3334 11.9648 28.223 11.928L27.6315 11.7305C27.557 11.7055 27.4923 11.6577 27.4464 11.5939C27.4005 11.5302 27.3758 11.4536 27.3758 11.375C27.3758 11.2964 27.4005 11.2198 27.4464 11.1561C27.4923 11.0923 27.557 11.0445 27.6315 11.0195L28.223 10.822C28.4465 10.747 28.6225 10.572 28.697 10.348L28.8945 9.7565C28.9194 9.68186 28.9671 9.61693 29.0309 9.57089C29.0947 9.52486 29.1713 9.50006 29.25 9.5V9.5Z",
+    fill: "#939BA8"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip0_1_4"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "12",
+    height: "12",
+    fill: "white",
+    transform: "translate(21 2)"
+  })))),
   noClusterActive: /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "40",

package/components/mapMarker/ClusterMapMarker.js

@@ -26,9 +26,9 @@ var ClusterMapMarker = function ClusterMapMarker(props) {
   var classes = classNames(active && 'active', 'rio-map-marker', 'rio-map-marker-center-center', !clickable && 'pointer-events-none');
   var clusterClasses = classNames('rio-map-cluster-cirlce', colorClass);
   var baseColor = getColorMapping(colorClass) || markerColor;
-  var markerBackgroundColor = active ? 'bg-white' : baseColor;
+  var markerBackgroundColor = active ? 'bg-map-marker-active' : baseColor;
   var markerBorderColor = baseColor.replace('bg-', 'border-color-');
-  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-white';
+  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'color-map-marker-text';
   return /*#__PURE__*/React.createElement("div", {
     className: classes
   }, /*#__PURE__*/React.createElement("div", {

package/components/mapMarker/SingleMapMarker.js

@@ -42,6 +42,9 @@ var SingleMapMarker = function SingleMapMarker(props) {
     textColor = props.textColor,
     warningCount = props.warningCount,
     fixed = props.fixed;
+
+  // TODO: check if we still need "colorClass"
+
   if (colorClass) {
     // warnung
   }
@@ -52,9 +55,12 @@ var SingleMapMarker = function SingleMapMarker(props) {
   };
   var mapDirection = getMapDirection(moving, bearing, rotationStyle);
   var baseColor = getColorMapping(colorClass, markerColor);
-  var markerBackgroundColor = active ? 'bg-white' : baseColor;
+
+  // const baseColorWithMode = isDarkMode ?
+
+  var markerBackgroundColor = active ? 'bg-map-marker-active' : baseColor;
   var markerBorderColor = baseColor.replace('bg-', 'border-color-');
-  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-white';
+  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'color-map-marker-text';
   return /*#__PURE__*/React.createElement("div", {
     className: classes
   }, /*#__PURE__*/React.createElement("div", {

package/components/numberControl/NumberControl.js

@@ -1,22 +1,23 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["min", "max", "step", "value", "onValueChanged", "disabled", "bsSize", "className", "unit", "inputAddon"];
-import React, { useState, useRef, useEffect } from 'react';
+var _excluded = ["min", "max", "step", "value", "onChange", "onValueChanged", "disabled", "bsSize", "className", "unit", "inputAddon", "digitPrecision", "placeholder"];
+import React, { useState, useRef, useEffect, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import NumberInput, { defaultProps, convertNonIntegerToDefault } from '../numberInput/NumberInput';
 var INITIAL_TICK = 700;
 var TICK_TIME = 50;
-var NumberControl = function NumberControl(props) {
+var DEFAULT_DIGIT_PRECISION = 3;
+var NumberControl = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$min = props.min,
     min = _props$min === void 0 ? defaultProps.min : _props$min,
     _props$max = props.max,
     max = _props$max === void 0 ? defaultProps.max : _props$max,
     _props$step = props.step,
     step = _props$step === void 0 ? defaultProps.step : _props$step,
-    _props$value = props.value,
-    value = _props$value === void 0 ? defaultProps.value : _props$value,
+    value = props.value,
+    onChange = props.onChange,
     _props$onValueChanged = props.onValueChanged,
     onValueChanged = _props$onValueChanged === void 0 ? function () {} : _props$onValueChanged,
     disabled = props.disabled,
@@ -24,7 +25,13 @@ var NumberControl = function NumberControl(props) {
     className = props.className,
     unit = props.unit,
     inputAddon = props.inputAddon,
+    _props$digitPrecision = props.digitPrecision,
+    digitPrecision = _props$digitPrecision === void 0 ? DEFAULT_DIGIT_PRECISION : _props$digitPrecision,
+    placeholder = props.placeholder,
     remainingProps = _objectWithoutProperties(props, _excluded);
+
+  // Note, "onChange" should replace "onValueChanged" in the future but it's widely used
+  var callback = onChange || onValueChanged;
   var timeout = useRef();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -49,6 +56,20 @@ var NumberControl = function NumberControl(props) {
       callback();
     }, TICK_TIME);
   };
+
+  // Update internal state if external value has changed
+  useEffect(function () {
+    if (internalValue !== value) {
+      setInternalValue(value);
+    }
+  }, [value]);
+
+  // Notify external component if internal value has changed
+  useEffect(function () {
+    if (internalValue !== value) {
+      callback(internalValue);
+    }
+  }, [internalValue]);
   useEffect(function () {
     // Call increment function for a loop when button is holding down
     if (isHoldingDownInc && !disabled) {
@@ -63,15 +84,17 @@ var NumberControl = function NumberControl(props) {
   var incrementInternalValue = function incrementInternalValue() {
     setInternalValue(function (val) {
       var currentValue = convertNonIntegerToDefault(val);
-      var newValue = currentValue + step;
-      return newValue <= max ? newValue : val;
+      var newValue = Number((currentValue + step).toFixed(digitPrecision));
+      var newValueLimited = newValue <= max ? newValue : val;
+      return newValueLimited;
     });
   };
   var decrementInternalValue = function decrementInternalValue() {
     setInternalValue(function (val) {
       var currentValue = convertNonIntegerToDefault(val);
-      var newValue = currentValue - step;
-      return newValue >= min ? newValue : val;
+      var newValue = Number((currentValue - step).toFixed(digitPrecision));
+      var newValueLimited = newValue >= min ? newValue : val;
+      return newValueLimited;
     });
   };
   var incrementRecusively = function incrementRecusively() {
@@ -110,10 +133,10 @@ var NumberControl = function NumberControl(props) {
     // for instance the user has typed in a number manually and to
     // use this number as base to increase or decrease from.
     // Ignore empty value in case the user has removed it
-    if (value && (!isHoldingDownDec || !isHoldingDownInc)) {
+    if (value !== undefined && !(isHoldingDownDec && isHoldingDownInc)) {
       setInternalValue(Number(value));
     }
-    onValueChanged(value);
+    callback(value);
   };
   var classes = classNames('NumberControl', 'form-group', className);
   var inputGroupClassNames = classNames('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
@@ -126,12 +149,15 @@ var NumberControl = function NumberControl(props) {
   }, /*#__PURE__*/React.createElement("span", {
     className: inputAddon
   })), /*#__PURE__*/React.createElement(NumberInput, {
+    ref: ref,
     min: min,
     max: max,
     value: internalValue,
     step: step,
     disabled: disabled,
-    onValueChanged: handleUpdatedNumberInputValue
+    onChange: handleUpdatedNumberInputValue,
+    digitPrecision: digitPrecision,
+    placeholder: placeholder
   }), /*#__PURE__*/React.createElement("div", {
     className: 'input-group-addon'
   }, unit && /*#__PURE__*/React.createElement("div", {
@@ -153,17 +179,20 @@ var NumberControl = function NumberControl(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: 'rioglyph rioglyph-plus scale-90'
   })))));
-};
+});
 NumberControl.propTypes = {
   min: PropTypes.number,
   max: PropTypes.number,
   value: PropTypes.number,
   step: PropTypes.number,
   disabled: PropTypes.bool,
+  onChange: PropTypes.func,
   onValueChanged: PropTypes.func,
   bsSize: PropTypes.string,
   className: PropTypes.string,
   unit: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  inputAddon: PropTypes.string
+  inputAddon: PropTypes.string,
+  digitPrecision: PropTypes.number,
+  placeholder: PropTypes.string
 };
 export default NumberControl;