@rio-cloud/rio-uikit 0.16.2-beta.10 → 0.16.2-beta.12

package/components/filepicker/FilePicker.js

@@ -22,7 +22,7 @@ var FilePicker = function FilePicker(props) {
   var showButton = isButton || isFull;
   var showDropzone = isDropzone || isFull;
   var handleDrop = useCallback(function (acceptedFiles, rejectedFiles) {
-    var hasImagesType = Object.keys(accept).some(function (mimeType) {
+    var hasImagesType = accept && Object.keys(accept).some(function (mimeType) {
       return mimeType.startsWith('image');
     });
     var files = hasImagesType ? acceptedFiles.map(function (file) {

package/components/map/components/Map.js

@@ -417,7 +417,7 @@ Map.defaultProps = {
   onShowClusterChange: function onShowClusterChange() {},
   onZoomIn: function onZoomIn() {},
   onZoomOut: function onZoomOut() {},
-  useWebGL: false,
+  useWebGL: true,
   darkMode: false
 };
 Map.propTypes = {

package/components/map/components/features/layers/MarkerLayer.js

@@ -33,6 +33,8 @@ var MarkerLayer = function MarkerLayer(props) {
 MarkerLayer.propTypes = {
   // api: mapProps.api,
   simpleTheme: mapProps.clusterTheme,
-  clusterDissolvable: PropTypes.bool
+  clusterDissolvable: PropTypes.bool,
+  clusterStrategy: PropTypes.oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
+  eps: PropTypes.number
 };
 export default MarkerLayer;

package/components/map/components/features/layers/clustering/ClusterLayer.js

@@ -12,6 +12,16 @@ var convertData = function convertData(data, converterFunc) {
   return data.map(converterFunc ? converterFunc : DEFAULT_DATA_CONVERTER);
 };
 var DEFAULT_CLUSTER_THEME = new H.clustering.Provider([]).getTheme();
+var getClusterStrategy = function getClusterStrategy(strategy) {
+  switch (strategy) {
+    case 'GRID':
+      return H.clustering.Provider.Strategy.GRID;
+    case 'DYNAMICGRID':
+      return H.clustering.Provider.Strategy.DYNAMICGRID;
+    default:
+      return H.clustering.Provider.Strategy.FASTGRID;
+  }
+};
 var ClusterLayer = function ClusterLayer(_ref) {
   var data = _ref.data,
     dataConverter = _ref.dataConverter,
@@ -20,7 +30,10 @@ var ClusterLayer = function ClusterLayer(_ref) {
     maxZoom = _ref.maxZoom,
     _ref$clusterTheme = _ref.clusterTheme,
     clusterTheme = _ref$clusterTheme === void 0 ? DEFAULT_CLUSTER_THEME : _ref$clusterTheme,
-    eventListenerMap = _ref.eventListenerMap;
+    eventListenerMap = _ref.eventListenerMap,
+    clusterStrategy = _ref.clusterStrategy,
+    _ref$eps = _ref.eps,
+    eps = _ref$eps === void 0 ? 100 : _ref$eps;
   var context = useContext(MapContext);
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -29,8 +42,8 @@ var ClusterLayer = function ClusterLayer(_ref) {
   useEffect(function () {
     var newProviderOptions = {
       clusteringOptions: {
-        strategy: H.clustering.Provider.Strategy.DYNAMICGRID,
-        eps: 100,
+        strategy: getClusterStrategy(clusterStrategy),
+        eps: eps,
         minWeight: minWeight ? parseInt(minWeight, 10) : 2
       },
       min: minZoom ? parseInt(minZoom, 10) : 0,
@@ -67,6 +80,8 @@ ClusterLayer.propTpyes = {
   minZoom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   maxZoom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   clusterTheme: mapProps.clusterTheme,
-  eventListenerMap: PropTypes.object
+  eventListenerMap: PropTypes.object,
+  clusterStrategy: PropTypes.oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
+  eps: PropTypes.number
 };
 export default ClusterLayer;

package/components/mapMarker/ClusterMapMarker.js

@@ -28,7 +28,7 @@ var ClusterMapMarker = function ClusterMapMarker(props) {
   var baseColor = getColorMapping(colorClass) || markerColor;
   var markerBackgroundColor = active ? 'bg-map-marker-active' : baseColor;
   var markerBorderColor = baseColor.replace('bg-', 'border-color-');
-  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'color-map-marker-text';
+  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-map-marker-text';
   return /*#__PURE__*/React.createElement("div", {
     className: classes
   }, /*#__PURE__*/React.createElement("div", {

package/components/mapMarker/SingleMapMarker.js

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

package/components/numberControl/NumberControl.js

@@ -1,13 +1,14 @@
 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", "digitPrecision", "placeholder"];
+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 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,
@@ -15,8 +16,8 @@ var NumberControl = /*#__PURE__*/forwardRef(function (props, ref) {
     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,
@@ -25,9 +26,12 @@ var NumberControl = /*#__PURE__*/forwardRef(function (props, ref) {
     unit = props.unit,
     inputAddon = props.inputAddon,
     _props$digitPrecision = props.digitPrecision,
-    digitPrecision = _props$digitPrecision === void 0 ? 3 : _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),
@@ -63,7 +67,7 @@ var NumberControl = /*#__PURE__*/forwardRef(function (props, ref) {
   // Notify external component if internal value has changed
   useEffect(function () {
     if (internalValue !== value) {
-      onValueChanged(internalValue);
+      callback(internalValue);
     }
   }, [internalValue]);
   useEffect(function () {
@@ -132,7 +136,7 @@ var NumberControl = /*#__PURE__*/forwardRef(function (props, ref) {
     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');
@@ -151,7 +155,8 @@ var NumberControl = /*#__PURE__*/forwardRef(function (props, ref) {
     value: internalValue,
     step: step,
     disabled: disabled,
-    onValueChanged: handleUpdatedNumberInputValue,
+    onChange: handleUpdatedNumberInputValue,
+    digitPrecision: digitPrecision,
     placeholder: placeholder
   }), /*#__PURE__*/React.createElement("div", {
     className: 'input-group-addon'
@@ -181,6 +186,7 @@ NumberControl.propTypes = {
   value: PropTypes.number,
   step: PropTypes.number,
   disabled: PropTypes.bool,
+  onChange: PropTypes.func,
   onValueChanged: PropTypes.func,
   bsSize: PropTypes.string,
   className: PropTypes.string,

package/components/numberInput/NumberInput.js

@@ -1,11 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["unit", "inputAddon", "className", "bsSize", "disabled", "onValueChanged", "min", "max", "value", "step", "placeholder"];
+var _excluded = ["unit", "inputAddon", "className", "bsSize", "disabled", "onChange", "onValueChanged", "min", "max", "value", "step", "digitPrecision", "placeholder"];
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import useAfterMount from '../../hooks/useAfterMount';
+var DEFAULT_DIGIT_PRECISION = 3;
+var DEFAULT_VALUE = 0;
+var DEFAULT_STEP = 1;
 
 // Note: even if limits are set and input type is number, many browsers allow to enter invalid data
 // like entering characters or values outside the boundaries, hence we have to check the input here
@@ -14,9 +17,8 @@ import useAfterMount from '../../hooks/useAfterMount';
 export var defaultProps = {
   min: 0,
   max: Number.MAX_VALUE,
-  step: 1
+  step: DEFAULT_STEP
 };
-var DEFAULT_VALUE = 0;
 var getValueFromProps = function getValueFromProps(val, min, max, placeholder) {
   // Show placeholders if given instead of 0
   if (val === undefined && placeholder) {
@@ -45,15 +47,21 @@ var NumberInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className = props.className,
     bsSize = props.bsSize,
     disabled = props.disabled,
+    onChange = props.onChange,
     _props$onValueChanged = props.onValueChanged,
     onValueChanged = _props$onValueChanged === void 0 ? function () {} : _props$onValueChanged,
     propMin = props.min,
     propMax = props.max,
     propValue = props.value,
     _props$step = props.step,
-    step = _props$step === void 0 ? 1 : _props$step,
+    step = _props$step === void 0 ? DEFAULT_STEP : _props$step,
+    _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 min = Number.isFinite(propMin) ? propMin : defaultProps.min;
   var max = Number.isFinite(propMax) ? propMax : defaultProps.max;
   var value = getValueFromProps(propValue, min, max, placeholder);
@@ -95,25 +103,32 @@ var NumberInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
 
     // Only call back the caller for valid values
-    isValid && onValueChanged(newValidValue);
+    isValid && callback(newValidValue);
   };
   var handleOnChange = function handleOnChange(event) {
-    return applyValue(event.target.value);
+    applyValue(event.target.value);
   };
-  var handleBlur = function handleBlur(event) {
-    // console.log({enteredValue: state.enteredValue, event: Number(event.target.value)});
 
-    // When the value is removed, keep the input empty but trigger the onValueChanged callback
+  // Prevent entering exponent to avoide side effects
+  // See https://bugzilla.mozilla.org/show_bug.cgi?id=1398528
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === 'e' || event.key === 'E') {
+      event.preventDefault();
+    }
+  };
+  var handleBlur = function handleBlur(event) {
+    // When the value is removed, keep the input empty but trigger the outside callback
     // since the user has finished his input
     var lastEnteredValue = state.enteredValue;
     if (lastEnteredValue === '') {
-      onValueChanged(lastEnteredValue);
+      callback(lastEnteredValue);
       return;
     }
 
-    // Otherwise, validate the input and clamp it if the entered value exeeds the limitations
+    // Otherwise, validate the input, round it according to digitPrecision,
+    // and clamp the value if the entered value exeeds the limitations
     var convertedEnteredValue = convertNonIntegerToDefault(Number(lastEnteredValue));
-    var validNumber = clampNumber(convertedEnteredValue, min, max);
+    var validNumber = clampNumber(Number(convertedEnteredValue).toFixed(digitPrecision), min, max);
     applyValue(validNumber);
   };
   var inputGroupClassNames = classNames('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
@@ -128,6 +143,7 @@ var NumberInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     disabled: disabled,
     onBlur: handleBlur,
     onChange: handleOnChange,
+    onKeyDown: handleKeyDown,
     ref: ref,
     "aria-label": "number-input",
     placeholder: placeholder,
@@ -151,11 +167,13 @@ NumberInput.propTypes = {
   value: PropTypes.number,
   step: PropTypes.number,
   disabled: PropTypes.bool,
+  onChange: PropTypes.func,
   onValueChanged: PropTypes.func,
   bsSize: PropTypes.oneOf(['sm', 'lg', 'small', 'large']),
   className: PropTypes.string,
   unit: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   inputAddon: PropTypes.string,
+  digitPrecision: PropTypes.number,
   placeholder: PropTypes.string
 };
 export default NumberInput;

package/hooks/useScrollPosition.js

@@ -42,8 +42,8 @@ var useScrollPosition = function useScrollPosition(target) {
     else {
       setTargetElement(target);
     }
-    return {
-      "if": function _if(checkForModuleContent) {
+    return function () {
+      if (checkForModuleContent) {
         clearInterval(check);
       }
     };

package/lib/es/components/filepicker/FilePicker.js

@@ -32,7 +32,7 @@ var FilePicker = function FilePicker(props) {
   var showButton = isButton || isFull;
   var showDropzone = isDropzone || isFull;
   var handleDrop = (0, _react.useCallback)(function (acceptedFiles, rejectedFiles) {
-    var hasImagesType = Object.keys(accept).some(function (mimeType) {
+    var hasImagesType = accept && Object.keys(accept).some(function (mimeType) {
       return mimeType.startsWith('image');
     });
     var files = hasImagesType ? acceptedFiles.map(function (file) {

package/lib/es/components/map/components/Map.js

@@ -428,7 +428,7 @@ Map.defaultProps = {
   onShowClusterChange: function onShowClusterChange() {},
   onZoomIn: function onZoomIn() {},
   onZoomOut: function onZoomOut() {},
-  useWebGL: false,
+  useWebGL: true,
   darkMode: false
 };
 Map.propTypes = {

package/lib/es/components/map/components/features/layers/MarkerLayer.js

@@ -42,7 +42,9 @@ var MarkerLayer = function MarkerLayer(props) {
 MarkerLayer.propTypes = {
   // api: mapProps.api,
   simpleTheme: _proptypes["default"].clusterTheme,
-  clusterDissolvable: _propTypes["default"].bool
+  clusterDissolvable: _propTypes["default"].bool,
+  clusterStrategy: _propTypes["default"].oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
+  eps: _propTypes["default"].number
 };
 var _default = MarkerLayer;
 exports["default"] = _default;

package/lib/es/components/map/components/features/layers/clustering/ClusterLayer.js

@@ -20,6 +20,16 @@ var convertData = function convertData(data, converterFunc) {
   return data.map(converterFunc ? converterFunc : DEFAULT_DATA_CONVERTER);
 };
 var DEFAULT_CLUSTER_THEME = new H.clustering.Provider([]).getTheme();
+var getClusterStrategy = function getClusterStrategy(strategy) {
+  switch (strategy) {
+    case 'GRID':
+      return H.clustering.Provider.Strategy.GRID;
+    case 'DYNAMICGRID':
+      return H.clustering.Provider.Strategy.DYNAMICGRID;
+    default:
+      return H.clustering.Provider.Strategy.FASTGRID;
+  }
+};
 var ClusterLayer = function ClusterLayer(_ref) {
   var data = _ref.data,
     dataConverter = _ref.dataConverter,
@@ -28,7 +38,10 @@ var ClusterLayer = function ClusterLayer(_ref) {
     maxZoom = _ref.maxZoom,
     _ref$clusterTheme = _ref.clusterTheme,
     clusterTheme = _ref$clusterTheme === void 0 ? DEFAULT_CLUSTER_THEME : _ref$clusterTheme,
-    eventListenerMap = _ref.eventListenerMap;
+    eventListenerMap = _ref.eventListenerMap,
+    clusterStrategy = _ref.clusterStrategy,
+    _ref$eps = _ref.eps,
+    eps = _ref$eps === void 0 ? 100 : _ref$eps;
   var context = (0, _react.useContext)(_context.MapContext);
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -37,8 +50,8 @@ var ClusterLayer = function ClusterLayer(_ref) {
   (0, _react.useEffect)(function () {
     var newProviderOptions = {
       clusteringOptions: {
-        strategy: H.clustering.Provider.Strategy.DYNAMICGRID,
-        eps: 100,
+        strategy: getClusterStrategy(clusterStrategy),
+        eps: eps,
         minWeight: minWeight ? parseInt(minWeight, 10) : 2
       },
       min: minZoom ? parseInt(minZoom, 10) : 0,
@@ -75,7 +88,9 @@ ClusterLayer.propTpyes = {
   minZoom: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   maxZoom: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   clusterTheme: _proptypes["default"].clusterTheme,
-  eventListenerMap: _propTypes["default"].object
+  eventListenerMap: _propTypes["default"].object,
+  clusterStrategy: _propTypes["default"].oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
+  eps: _propTypes["default"].number
 };
 var _default = ClusterLayer;
 exports["default"] = _default;

package/lib/es/components/mapMarker/ClusterMapMarker.js

@@ -35,7 +35,7 @@ var ClusterMapMarker = function ClusterMapMarker(props) {
   var baseColor = getColorMapping(colorClass) || markerColor;
   var markerBackgroundColor = active ? 'bg-map-marker-active' : baseColor;
   var markerBorderColor = baseColor.replace('bg-', 'border-color-');
-  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'color-map-marker-text';
+  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-map-marker-text';
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes
   }, /*#__PURE__*/_react["default"].createElement("div", {

package/lib/es/components/mapMarker/SingleMapMarker.js

@@ -49,9 +49,6 @@ var SingleMapMarker = function SingleMapMarker(props) {
     textColor = props.textColor,
     warningCount = props.warningCount,
     fixed = props.fixed;
-
-  // TODO: check if we still need "colorClass"
-
   if (colorClass) {
     // warnung
   }
@@ -62,12 +59,9 @@ var SingleMapMarker = function SingleMapMarker(props) {
   };
   var mapDirection = getMapDirection(moving, bearing, rotationStyle);
   var baseColor = getColorMapping(colorClass, markerColor);
-
-  // 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-') : 'color-map-marker-text';
+  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-map-marker-text';
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes
   }, /*#__PURE__*/_react["default"].createElement("div", {

package/lib/es/components/numberControl/NumberControl.js

@@ -13,11 +13,12 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _NumberInput = _interopRequireWildcard(require("../numberInput/NumberInput"));
-var _excluded = ["min", "max", "step", "value", "onValueChanged", "disabled", "bsSize", "className", "unit", "inputAddon", "digitPrecision", "placeholder"];
+var _excluded = ["min", "max", "step", "value", "onChange", "onValueChanged", "disabled", "bsSize", "className", "unit", "inputAddon", "digitPrecision", "placeholder"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var INITIAL_TICK = 700;
 var TICK_TIME = 50;
+var DEFAULT_DIGIT_PRECISION = 3;
 var NumberControl = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$min = props.min,
     min = _props$min === void 0 ? _NumberInput.defaultProps.min : _props$min,
@@ -25,8 +26,8 @@ var NumberControl = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     max = _props$max === void 0 ? _NumberInput.defaultProps.max : _props$max,
     _props$step = props.step,
     step = _props$step === void 0 ? _NumberInput.defaultProps.step : _props$step,
-    _props$value = props.value,
-    value = _props$value === void 0 ? _NumberInput.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,
@@ -35,9 +36,12 @@ var NumberControl = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     unit = props.unit,
     inputAddon = props.inputAddon,
     _props$digitPrecision = props.digitPrecision,
-    digitPrecision = _props$digitPrecision === void 0 ? 3 : _props$digitPrecision,
+    digitPrecision = _props$digitPrecision === void 0 ? DEFAULT_DIGIT_PRECISION : _props$digitPrecision,
     placeholder = props.placeholder,
     remainingProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+
+  // Note, "onChange" should replace "onValueChanged" in the future but it's widely used
+  var callback = onChange || onValueChanged;
   var timeout = (0, _react.useRef)();
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -73,7 +77,7 @@ var NumberControl = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   // Notify external component if internal value has changed
   (0, _react.useEffect)(function () {
     if (internalValue !== value) {
-      onValueChanged(internalValue);
+      callback(internalValue);
     }
   }, [internalValue]);
   (0, _react.useEffect)(function () {
@@ -142,7 +146,7 @@ var NumberControl = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     if (value !== undefined && !(isHoldingDownDec && isHoldingDownInc)) {
       setInternalValue(Number(value));
     }
-    onValueChanged(value);
+    callback(value);
   };
   var classes = (0, _classnames["default"])('NumberControl', 'form-group', className);
   var inputGroupClassNames = (0, _classnames["default"])('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
@@ -161,7 +165,8 @@ var NumberControl = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     value: internalValue,
     step: step,
     disabled: disabled,
-    onValueChanged: handleUpdatedNumberInputValue,
+    onChange: handleUpdatedNumberInputValue,
+    digitPrecision: digitPrecision,
     placeholder: placeholder
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: 'input-group-addon'
@@ -191,6 +196,7 @@ NumberControl.propTypes = {
   value: _propTypes["default"].number,
   step: _propTypes["default"].number,
   disabled: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func,
   onValueChanged: _propTypes["default"].func,
   bsSize: _propTypes["default"].string,
   className: _propTypes["default"].string,

package/lib/es/components/numberInput/NumberInput.js

@@ -13,9 +13,13 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _useAfterMount = _interopRequireDefault(require("../../hooks/useAfterMount"));
-var _excluded = ["unit", "inputAddon", "className", "bsSize", "disabled", "onValueChanged", "min", "max", "value", "step", "placeholder"];
+var _excluded = ["unit", "inputAddon", "className", "bsSize", "disabled", "onChange", "onValueChanged", "min", "max", "value", "step", "digitPrecision", "placeholder"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var DEFAULT_DIGIT_PRECISION = 3;
+var DEFAULT_VALUE = 0;
+var DEFAULT_STEP = 1;
+
 // Note: even if limits are set and input type is number, many browsers allow to enter invalid data
 // like entering characters or values outside the boundaries, hence we have to check the input here
 // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
@@ -23,10 +27,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var defaultProps = {
   min: 0,
   max: Number.MAX_VALUE,
-  step: 1
+  step: DEFAULT_STEP
 };
 exports.defaultProps = defaultProps;
-var DEFAULT_VALUE = 0;
 var getValueFromProps = function getValueFromProps(val, min, max, placeholder) {
   // Show placeholders if given instead of 0
   if (val === undefined && placeholder) {
@@ -56,15 +59,21 @@ var NumberInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref
     className = props.className,
     bsSize = props.bsSize,
     disabled = props.disabled,
+    onChange = props.onChange,
     _props$onValueChanged = props.onValueChanged,
     onValueChanged = _props$onValueChanged === void 0 ? function () {} : _props$onValueChanged,
     propMin = props.min,
     propMax = props.max,
     propValue = props.value,
     _props$step = props.step,
-    step = _props$step === void 0 ? 1 : _props$step,
+    step = _props$step === void 0 ? DEFAULT_STEP : _props$step,
+    _props$digitPrecision = props.digitPrecision,
+    digitPrecision = _props$digitPrecision === void 0 ? DEFAULT_DIGIT_PRECISION : _props$digitPrecision,
     placeholder = props.placeholder,
     remainingProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+
+  // Note, "onChange" should replace "onValueChanged" in the future but it's widely used
+  var callback = onChange || onValueChanged;
   var min = Number.isFinite(propMin) ? propMin : defaultProps.min;
   var max = Number.isFinite(propMax) ? propMax : defaultProps.max;
   var value = getValueFromProps(propValue, min, max, placeholder);
@@ -106,25 +115,32 @@ var NumberInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref
     });
 
     // Only call back the caller for valid values
-    isValid && onValueChanged(newValidValue);
+    isValid && callback(newValidValue);
   };
   var handleOnChange = function handleOnChange(event) {
-    return applyValue(event.target.value);
+    applyValue(event.target.value);
   };
-  var handleBlur = function handleBlur(event) {
-    // console.log({enteredValue: state.enteredValue, event: Number(event.target.value)});
 
-    // When the value is removed, keep the input empty but trigger the onValueChanged callback
+  // Prevent entering exponent to avoide side effects
+  // See https://bugzilla.mozilla.org/show_bug.cgi?id=1398528
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === 'e' || event.key === 'E') {
+      event.preventDefault();
+    }
+  };
+  var handleBlur = function handleBlur(event) {
+    // When the value is removed, keep the input empty but trigger the outside callback
     // since the user has finished his input
     var lastEnteredValue = state.enteredValue;
     if (lastEnteredValue === '') {
-      onValueChanged(lastEnteredValue);
+      callback(lastEnteredValue);
       return;
     }
 
-    // Otherwise, validate the input and clamp it if the entered value exeeds the limitations
+    // Otherwise, validate the input, round it according to digitPrecision,
+    // and clamp the value if the entered value exeeds the limitations
     var convertedEnteredValue = convertNonIntegerToDefault(Number(lastEnteredValue));
-    var validNumber = clampNumber(convertedEnteredValue, min, max);
+    var validNumber = clampNumber(Number(convertedEnteredValue).toFixed(digitPrecision), min, max);
     applyValue(validNumber);
   };
   var inputGroupClassNames = (0, _classnames["default"])('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
@@ -139,6 +155,7 @@ var NumberInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref
     disabled: disabled,
     onBlur: handleBlur,
     onChange: handleOnChange,
+    onKeyDown: handleKeyDown,
     ref: ref,
     "aria-label": "number-input",
     placeholder: placeholder,
@@ -162,11 +179,13 @@ NumberInput.propTypes = {
   value: _propTypes["default"].number,
   step: _propTypes["default"].number,
   disabled: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func,
   onValueChanged: _propTypes["default"].func,
   bsSize: _propTypes["default"].oneOf(['sm', 'lg', 'small', 'large']),
   className: _propTypes["default"].string,
   unit: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
   inputAddon: _propTypes["default"].string,
+  digitPrecision: _propTypes["default"].number,
   placeholder: _propTypes["default"].string
 };
 var _default = NumberInput;

package/lib/es/hooks/useScrollPosition.js

@@ -49,8 +49,8 @@ var useScrollPosition = function useScrollPosition(target) {
     else {
       setTargetElement(target);
     }
-    return {
-      "if": function _if(checkForModuleContent) {
+    return function () {
+      if (checkForModuleContent) {
         clearInterval(check);
       }
     };

package/lib/es/styles/design/border.less

@@ -122,6 +122,12 @@ each(@colors-map-marker-map, {
   }
 })
 
+each(@colors-map-marker-night-map, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
+
 // rating-1
 // rating-2
 // rating-3

package/lib/es/styles/design/colors.less

@@ -72,7 +72,6 @@ each(@colors-gray-map, {
 // map-marker-route
 each(@colors-map-marker-map, {
   .bg-@{key} {
-    color: var(--color-white) !important;
     background-color: @value !important;
   }
   .hover-bg-@{key}:hover {
@@ -83,6 +82,15 @@ each(@colors-map-marker-map, {
   }
 })
 
+each(@colors-map-marker-night-map, {
+  .bg-@{key} {
+    background-color: @value !important;
+  }
+  .hover-bg-@{key}:hover {
+    background-color: @value !important;
+  }
+})
+
 // rating-1
 // rating-2
 // rating-3

package/lib/es/styles/design/text.less

@@ -55,7 +55,6 @@ each(@colors-gray-map, {
 // map-marker-poi
 // map-marker-geofence
 // map-marker-route
-.color-map-marker-text { color: var(--color-map-marker-text) !important }
 each(@colors-map-marker-map, {
   .text-color-@{key},
   .hover-text-color-@{key}:hover {
@@ -63,6 +62,16 @@ each(@colors-map-marker-map, {
   }
 })
 
+each(@colors-map-marker-night-map, {
+  .text-color-@{key},
+  .hover-text-color-@{key}:hover {
+    color: @value !important;
+  }
+})
+
+// .text-color-map-marker-text { color: var(--color-map-marker-text) !important }
+// .text-color-map-marker-text-night { color: var(--color-map-marker-text-night) !important }
+
 // rating-1
 // rating-2
 // rating-3

package/lib/es/styles/mapping/color-map.less

@@ -115,6 +115,7 @@
 // map-marker-geofence
 // map-marker-route
 @colors-map-marker-map: {
+  map-marker-text: var(--color-map-marker-text);
   map-marker-active: var(--color-map-marker-active);
   map-marker-asset: var(--color-map-marker-asset);
   map-marker-poi: var(--color-map-marker-poi);
@@ -122,6 +123,15 @@
   map-marker-route: var(--color-map-marker-route);
 }
 
+@colors-map-marker-night-map: {
+  map-marker-text-night: var(--color-map-marker-text-night);
+  map-marker-active-night: var(--color-map-marker-active-night);
+  map-marker-asset-night: var(--color-map-marker-asset-night);
+  map-marker-poi-night: var(--color-map-marker-poi-night);
+  map-marker-geofence-night: var(--color-map-marker-geofence-night);
+  map-marker-route-night: var(--color-map-marker-route-night);
+}
+
 // Color Map - Rating
 // rating-1
 // rating-2

package/lib/es/styles/variables/concated_css_variables.less

@@ -33,6 +33,12 @@
 @color-map-marker-geofence-hsl: var(--color-map-marker-geofence-h), var(--color-map-marker-geofence-s), var(--color-map-marker-geofence-l);
 @color-map-marker-route-hsl: var(--color-map-marker-route-h), var(--color-map-marker-route-s), var(--color-map-marker-route-l);
 @color-map-marker-text-hsl: var(--color-map-marker-text-h), var(--color-map-marker-text-s), var(--color-map-marker-text-l);
+@color-map-marker-active-night-hsl: var(--color-map-marker-active-night-h), var(--color-map-marker-active-night-s), var(--color-map-marker-active-night-l);
+@color-map-marker-asset-night-hsl: var(--color-map-marker-asset-night-h), var(--color-map-marker-asset-night-s), var(--color-map-marker-asset-night-l);
+@color-map-marker-poi-night-hsl: var(--color-map-marker-poi-night-h), var(--color-map-marker-poi-night-s), var(--color-map-marker-poi-night-l);
+@color-map-marker-geofence-night-hsl: var(--color-map-marker-geofence-night-h), var(--color-map-marker-geofence-night-s), var(--color-map-marker-geofence-night-l);
+@color-map-marker-route-night-hsl: var(--color-map-marker-route-night-h), var(--color-map-marker-route-night-s), var(--color-map-marker-route-night-l);
+@color-map-marker-text-night-hsl: var(--color-map-marker-text-night-h), var(--color-map-marker-text-night-s), var(--color-map-marker-text-night-l);
 @color-highlight-darkest-hsl: var(--color-highlight-darkest-h), var(--color-highlight-darkest-s), var(--color-highlight-darkest-l);
 @color-highlight-darker-hsl: var(--color-highlight-darker-h), var(--color-highlight-darker-s), var(--color-highlight-darker-l);
 @color-highlight-dark-hsl: var(--color-highlight-dark-h), var(--color-highlight-dark-s), var(--color-highlight-dark-l);

package/lib/es/styles/variables/dark_colors.less

@@ -48,6 +48,13 @@
 @dark-color-map-marker-route: @color-map-marker-route;
 @dark-color-map-marker-text: @color-map-marker-text;
 
+@dark-color-map-marker-active-night: @color-map-marker-active-night;
+@dark-color-map-marker-asset-night: @color-map-marker-asset-night;
+@dark-color-map-marker-poi-night: @color-map-marker-poi-night;
+@dark-color-map-marker-geofence-night: @color-map-marker-geofence-night;
+@dark-color-map-marker-route-night: @color-map-marker-route-night;
+@dark-color-map-marker-text-night: @color-map-marker-text-night;
+
 // Color - Rating // CURRENTLY NO DIFFERENCES TO THE LIGHT THEME
 @dark-color-rating-1: @color-rating-1;
 @dark-color-rating-2: @color-rating-2;

package/lib/es/styles/variables/dark_css_variables_map.less

@@ -49,6 +49,13 @@
   // color-map-marker-route: @dark-color-map-marker-route;
   // color-map-marker-text: @dark-color-map-marker-text;
 
+  // color-map-marker-active-night: @dark-color-map-marker-active-night;
+  // color-map-marker-asset-night: @dark-color-map-marker-asset-night;
+  // color-map-marker-poi-night: @dark-color-map-marker-poi-night;
+  // color-map-marker-geofence-night: @dark-color-map-marker-geofence-night;
+  // color-map-marker-route-night: @dark-color-map-marker-route-night;
+  // color-map-marker-text-night: @dark-color-map-marker-text-night;
+
   // Color - Highlight
   color-highlight-darkest: @dark-color-highlight-darkest;
   color-highlight-darker: @dark-color-highlight-darker;

package/lib/es/styles/variables/light_colors.less

@@ -52,6 +52,13 @@
 @color-map-marker-route: #3690ae;
 @color-map-marker-text: #ffffff;
 
+@color-map-marker-active-night: #79e703;
+@color-map-marker-asset-night: #0e8a14;
+@color-map-marker-poi-night: #d212be;
+@color-map-marker-geofence-night: #d7b269;
+@color-map-marker-route-night: #750666;
+@color-map-marker-text-night: #f7ff13;
+
 // Color - Rating
 @color-rating-1: #d90000;
 @color-rating-2: #ff8e3c;

package/lib/es/styles/variables/light_css_variables_map.less

@@ -53,6 +53,13 @@
   color-map-marker-route: @color-map-marker-route;
   color-map-marker-text: @color-map-marker-text;
 
+  color-map-marker-active-night: @color-map-marker-active-night;
+  color-map-marker-asset-night: @color-map-marker-asset-night;
+  color-map-marker-poi-night: @color-map-marker-poi-night;
+  color-map-marker-geofence-night: @color-map-marker-geofence-night;
+  color-map-marker-route-night: @color-map-marker-route-night;
+  color-map-marker-text-night: @color-map-marker-text-night;
+
   // Color - Highlight
   color-highlight-darkest: @color-highlight-darkest;
   color-highlight-darker: @color-highlight-darker;

package/lib/es/types.ts

@@ -411,6 +411,8 @@ export interface ClusterLayerProps {
     maxZoom?: string | number;
     clusterTheme?: ClusterTheme;
     eventListenerMap: EventListenerMap;
+    clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
+    eps?: number;
 }
 
 export interface ClusterMapMarkerProps {
@@ -871,6 +873,8 @@ export interface MapProps {
     getApi?: Function;
     mapSettingsTooltip?: string | React.ReactNode;
     mapSettings?: React.ReactNode;
+    useWebGl?: boolean;
+    children?: any;
 }
 
 export interface MapBoundingBoxButtonProps {
@@ -983,6 +987,8 @@ export interface MarkerProps {
 export interface MarkerLayerProps {
     simpleTheme?: ClusterTheme;
     clusterDissolvable?: boolean;
+    clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
+    eps?: number;
 }
 
 export interface MenuItem {
@@ -1083,6 +1089,7 @@ export interface NumberControlProps {
     value?: number;
     step?: number;
     disabled?: boolean;
+    onChange?: (value: number) => void;
     onValueChanged?: (value: number) => void;
     bsSize?: 'sm' | 'lg';
     className?: string;
@@ -1099,12 +1106,14 @@ export interface NumberInputProps {
     value?: number;
     step?: number;
     disabled?: boolean;
+    onChange?: (value: number) => void;
     onValueChanged?: (value: number) => void;
     bsSize?: 'sm' | 'lg';
     className?: string;
     unit?: string | React.ReactNode;
     inputAddon?: string;
     placeholder?: string;
+    digitPrecision?: number;
     ref?: React.MutableRefObject<object>;
 }
 

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.2-beta.10"
+    "version": "0.16.2-beta.12"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.2-beta.10",
+    "version": "0.16.2-beta.12",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {

package/styles/design/border.less

@@ -122,6 +122,12 @@ each(@colors-map-marker-map, {
   }
 })
 
+each(@colors-map-marker-night-map, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
+
 // rating-1
 // rating-2
 // rating-3

package/styles/design/colors.less

@@ -72,7 +72,6 @@ each(@colors-gray-map, {
 // map-marker-route
 each(@colors-map-marker-map, {
   .bg-@{key} {
-    color: var(--color-white) !important;
     background-color: @value !important;
   }
   .hover-bg-@{key}:hover {
@@ -83,6 +82,15 @@ each(@colors-map-marker-map, {
   }
 })
 
+each(@colors-map-marker-night-map, {
+  .bg-@{key} {
+    background-color: @value !important;
+  }
+  .hover-bg-@{key}:hover {
+    background-color: @value !important;
+  }
+})
+
 // rating-1
 // rating-2
 // rating-3

package/styles/design/text.less

@@ -55,7 +55,6 @@ each(@colors-gray-map, {
 // map-marker-poi
 // map-marker-geofence
 // map-marker-route
-.color-map-marker-text { color: var(--color-map-marker-text) !important }
 each(@colors-map-marker-map, {
   .text-color-@{key},
   .hover-text-color-@{key}:hover {
@@ -63,6 +62,16 @@ each(@colors-map-marker-map, {
   }
 })
 
+each(@colors-map-marker-night-map, {
+  .text-color-@{key},
+  .hover-text-color-@{key}:hover {
+    color: @value !important;
+  }
+})
+
+// .text-color-map-marker-text { color: var(--color-map-marker-text) !important }
+// .text-color-map-marker-text-night { color: var(--color-map-marker-text-night) !important }
+
 // rating-1
 // rating-2
 // rating-3

package/styles/mapping/color-map.less

@@ -115,6 +115,7 @@
 // map-marker-geofence
 // map-marker-route
 @colors-map-marker-map: {
+  map-marker-text: var(--color-map-marker-text);
   map-marker-active: var(--color-map-marker-active);
   map-marker-asset: var(--color-map-marker-asset);
   map-marker-poi: var(--color-map-marker-poi);
@@ -122,6 +123,15 @@
   map-marker-route: var(--color-map-marker-route);
 }
 
+@colors-map-marker-night-map: {
+  map-marker-text-night: var(--color-map-marker-text-night);
+  map-marker-active-night: var(--color-map-marker-active-night);
+  map-marker-asset-night: var(--color-map-marker-asset-night);
+  map-marker-poi-night: var(--color-map-marker-poi-night);
+  map-marker-geofence-night: var(--color-map-marker-geofence-night);
+  map-marker-route-night: var(--color-map-marker-route-night);
+}
+
 // Color Map - Rating
 // rating-1
 // rating-2

package/styles/variables/concated_css_variables.less

@@ -33,6 +33,12 @@
 @color-map-marker-geofence-hsl: var(--color-map-marker-geofence-h), var(--color-map-marker-geofence-s), var(--color-map-marker-geofence-l);
 @color-map-marker-route-hsl: var(--color-map-marker-route-h), var(--color-map-marker-route-s), var(--color-map-marker-route-l);
 @color-map-marker-text-hsl: var(--color-map-marker-text-h), var(--color-map-marker-text-s), var(--color-map-marker-text-l);
+@color-map-marker-active-night-hsl: var(--color-map-marker-active-night-h), var(--color-map-marker-active-night-s), var(--color-map-marker-active-night-l);
+@color-map-marker-asset-night-hsl: var(--color-map-marker-asset-night-h), var(--color-map-marker-asset-night-s), var(--color-map-marker-asset-night-l);
+@color-map-marker-poi-night-hsl: var(--color-map-marker-poi-night-h), var(--color-map-marker-poi-night-s), var(--color-map-marker-poi-night-l);
+@color-map-marker-geofence-night-hsl: var(--color-map-marker-geofence-night-h), var(--color-map-marker-geofence-night-s), var(--color-map-marker-geofence-night-l);
+@color-map-marker-route-night-hsl: var(--color-map-marker-route-night-h), var(--color-map-marker-route-night-s), var(--color-map-marker-route-night-l);
+@color-map-marker-text-night-hsl: var(--color-map-marker-text-night-h), var(--color-map-marker-text-night-s), var(--color-map-marker-text-night-l);
 @color-highlight-darkest-hsl: var(--color-highlight-darkest-h), var(--color-highlight-darkest-s), var(--color-highlight-darkest-l);
 @color-highlight-darker-hsl: var(--color-highlight-darker-h), var(--color-highlight-darker-s), var(--color-highlight-darker-l);
 @color-highlight-dark-hsl: var(--color-highlight-dark-h), var(--color-highlight-dark-s), var(--color-highlight-dark-l);

package/styles/variables/dark_colors.less

@@ -48,6 +48,13 @@
 @dark-color-map-marker-route: @color-map-marker-route;
 @dark-color-map-marker-text: @color-map-marker-text;
 
+@dark-color-map-marker-active-night: @color-map-marker-active-night;
+@dark-color-map-marker-asset-night: @color-map-marker-asset-night;
+@dark-color-map-marker-poi-night: @color-map-marker-poi-night;
+@dark-color-map-marker-geofence-night: @color-map-marker-geofence-night;
+@dark-color-map-marker-route-night: @color-map-marker-route-night;
+@dark-color-map-marker-text-night: @color-map-marker-text-night;
+
 // Color - Rating // CURRENTLY NO DIFFERENCES TO THE LIGHT THEME
 @dark-color-rating-1: @color-rating-1;
 @dark-color-rating-2: @color-rating-2;

package/styles/variables/dark_css_variables_map.less

@@ -49,6 +49,13 @@
   // color-map-marker-route: @dark-color-map-marker-route;
   // color-map-marker-text: @dark-color-map-marker-text;
 
+  // color-map-marker-active-night: @dark-color-map-marker-active-night;
+  // color-map-marker-asset-night: @dark-color-map-marker-asset-night;
+  // color-map-marker-poi-night: @dark-color-map-marker-poi-night;
+  // color-map-marker-geofence-night: @dark-color-map-marker-geofence-night;
+  // color-map-marker-route-night: @dark-color-map-marker-route-night;
+  // color-map-marker-text-night: @dark-color-map-marker-text-night;
+
   // Color - Highlight
   color-highlight-darkest: @dark-color-highlight-darkest;
   color-highlight-darker: @dark-color-highlight-darker;

package/styles/variables/light_colors.less

@@ -52,6 +52,13 @@
 @color-map-marker-route: #3690ae;
 @color-map-marker-text: #ffffff;
 
+@color-map-marker-active-night: #79e703;
+@color-map-marker-asset-night: #0e8a14;
+@color-map-marker-poi-night: #d212be;
+@color-map-marker-geofence-night: #d7b269;
+@color-map-marker-route-night: #750666;
+@color-map-marker-text-night: #f7ff13;
+
 // Color - Rating
 @color-rating-1: #d90000;
 @color-rating-2: #ff8e3c;

package/styles/variables/light_css_variables_map.less

@@ -53,6 +53,13 @@
   color-map-marker-route: @color-map-marker-route;
   color-map-marker-text: @color-map-marker-text;
 
+  color-map-marker-active-night: @color-map-marker-active-night;
+  color-map-marker-asset-night: @color-map-marker-asset-night;
+  color-map-marker-poi-night: @color-map-marker-poi-night;
+  color-map-marker-geofence-night: @color-map-marker-geofence-night;
+  color-map-marker-route-night: @color-map-marker-route-night;
+  color-map-marker-text-night: @color-map-marker-text-night;
+
   // Color - Highlight
   color-highlight-darkest: @color-highlight-darkest;
   color-highlight-darker: @color-highlight-darker;

package/types.ts

@@ -411,6 +411,8 @@ export interface ClusterLayerProps {
     maxZoom?: string | number;
     clusterTheme?: ClusterTheme;
     eventListenerMap: EventListenerMap;
+    clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
+    eps?: number;
 }
 
 export interface ClusterMapMarkerProps {
@@ -871,6 +873,8 @@ export interface MapProps {
     getApi?: Function;
     mapSettingsTooltip?: string | React.ReactNode;
     mapSettings?: React.ReactNode;
+    useWebGl?: boolean;
+    children?: any;
 }
 
 export interface MapBoundingBoxButtonProps {
@@ -983,6 +987,8 @@ export interface MarkerProps {
 export interface MarkerLayerProps {
     simpleTheme?: ClusterTheme;
     clusterDissolvable?: boolean;
+    clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
+    eps?: number;
 }
 
 export interface MenuItem {
@@ -1083,6 +1089,7 @@ export interface NumberControlProps {
     value?: number;
     step?: number;
     disabled?: boolean;
+    onChange?: (value: number) => void;
     onValueChanged?: (value: number) => void;
     bsSize?: 'sm' | 'lg';
     className?: string;
@@ -1099,12 +1106,14 @@ export interface NumberInputProps {
     value?: number;
     step?: number;
     disabled?: boolean;
+    onChange?: (value: number) => void;
     onValueChanged?: (value: number) => void;
     bsSize?: 'sm' | 'lg';
     className?: string;
     unit?: string | React.ReactNode;
     inputAddon?: string;
     placeholder?: string;
+    digitPrecision?: number;
     ref?: React.MutableRefObject<object>;
 }
 

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.2-beta.10"
+    "version": "0.16.2-beta.12"
 }