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

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

@@ -13,20 +13,21 @@ 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"];
+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 NumberControl = function NumberControl(props) {
+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,
     _props$max = props.max,
     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,
@@ -34,7 +35,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 = (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),
@@ -59,6 +66,20 @@ var NumberControl = function NumberControl(props) {
       callback();
     }, TICK_TIME);
   };
+
+  // Update internal state if external value has changed
+  (0, _react.useEffect)(function () {
+    if (internalValue !== value) {
+      setInternalValue(value);
+    }
+  }, [value]);
+
+  // Notify external component if internal value has changed
+  (0, _react.useEffect)(function () {
+    if (internalValue !== value) {
+      callback(internalValue);
+    }
+  }, [internalValue]);
   (0, _react.useEffect)(function () {
     // Call increment function for a loop when button is holding down
     if (isHoldingDownInc && !disabled) {
@@ -73,15 +94,17 @@ var NumberControl = function NumberControl(props) {
   var incrementInternalValue = function incrementInternalValue() {
     setInternalValue(function (val) {
       var currentValue = (0, _NumberInput.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 = (0, _NumberInput.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() {
@@ -120,10 +143,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 = (0, _classnames["default"])('NumberControl', 'form-group', className);
   var inputGroupClassNames = (0, _classnames["default"])('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
@@ -136,12 +159,15 @@ var NumberControl = function NumberControl(props) {
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: inputAddon
   })), /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+    ref: ref,
     min: min,
     max: max,
     value: internalValue,
     step: step,
     disabled: disabled,
-    onValueChanged: handleUpdatedNumberInputValue
+    onChange: handleUpdatedNumberInputValue,
+    digitPrecision: digitPrecision,
+    placeholder: placeholder
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: 'input-group-addon'
   }, unit && /*#__PURE__*/_react["default"].createElement("div", {
@@ -163,18 +189,21 @@ var NumberControl = function NumberControl(props) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: 'rioglyph rioglyph-plus scale-90'
   })))));
-};
+});
 NumberControl.propTypes = {
   min: _propTypes["default"].number,
   max: _propTypes["default"].number,
   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,
   unit: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  inputAddon: _propTypes["default"].string
+  inputAddon: _propTypes["default"].string,
+  digitPrecision: _propTypes["default"].number,
+  placeholder: _propTypes["default"].string
 };
 var _default = NumberControl;
 exports["default"] = _default;

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

@@ -13,21 +13,29 @@ 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", "type"];
+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
+
 var defaultProps = {
   min: 0,
   max: Number.MAX_VALUE,
-  value: 0,
-  step: 1
+  step: DEFAULT_STEP
 };
 exports.defaultProps = defaultProps;
-var getStepFromProps = function getStepFromProps(propStep, defaultStep, max, min) {
-  return Number.isInteger(propStep) && propStep < Math.abs(max - min) ? propStep : defaultStep;
-};
-var getValueFromProps = function getValueFromProps(val, min, max, fallback) {
-  return clampNumber(Number(val), min, max) || fallback;
+var getValueFromProps = function getValueFromProps(val, min, max, placeholder) {
+  // Show placeholders if given instead of 0
+  if (val === undefined && placeholder) {
+    return '';
+  }
+  return clampNumber(Number(val), min, max) || DEFAULT_VALUE;
 };
 var clampNumber = function clampNumber(value, min, max) {
   if (value < min) {
@@ -37,13 +45,10 @@ var clampNumber = function clampNumber(value, min, max) {
   }
   return value;
 };
-var isFormatted = function isFormatted(value) {
-  return /^(-)?([1-9]\d*)?$/.test(value) || value === '0';
-};
-var convertNonIntegerToDefault = function convertNonIntegerToDefault(value, min) {
+var convertNonIntegerToDefault = function convertNonIntegerToDefault(value) {
   var currentValue = value;
-  if (!Number.isInteger(currentValue)) {
-    currentValue = min;
+  if (!Number.isFinite(currentValue)) {
+    currentValue = DEFAULT_VALUE;
   }
   return currentValue;
 };
@@ -54,21 +59,24 @@ 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,
-    propStep = props.step,
-    propType = props.type,
+    _props$step = 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);
 
-  // Breaking change - default is now "number"
-  var type = propType === 'text' ? 'text' : 'number';
-  var min = Number.isInteger(propMin) ? propMin : defaultProps.min;
-  var max = Number.isInteger(propMax) ? propMax : defaultProps.max;
-  var value = getValueFromProps(propValue, min, max, defaultProps.value);
-  var step = getStepFromProps(propStep, defaultProps.step, max, min);
+  // 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);
 
   // Define local state and define initial values
   var _useState = (0, _react.useState)({
@@ -83,57 +91,62 @@ var NumberInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref
   // Update internal value whenever the value prop from outside changes
   (0, _useAfterMount["default"])(function () {
     setState({
-      value: getValueFromProps(propValue, min, max, defaultProps.value),
+      value: getValueFromProps(propValue, min, max, placeholder),
       enteredValue: value,
       isValid: true
     });
   }, [propValue, clampNumber]);
   var applyValue = function applyValue(newValue) {
-    if (isFormatted(newValue)) {
-      if (newValue === '-' || newValue === '') {
-        setState({
-          value: newValue,
-          enteredValue: newValue,
-          isValid: true
-        });
-      } else {
-        var enteredValue = Number(newValue);
-        var isValid = enteredValue >= min && enteredValue <= max;
-        var newValidValue = clampNumber(enteredValue, min, max);
-        setState({
-          value: newValidValue,
-          enteredValue: enteredValue,
-          isValid: isValid
-        });
-
-        // Only call back the caller for valid values
-        isValid && onValueChanged(newValidValue);
-      }
+    if (newValue === '-' || newValue === '') {
+      setState({
+        value: newValue,
+        enteredValue: newValue,
+        isValid: true
+      });
+      return;
     }
+    var enteredValue = Number(newValue);
+    var isValid = !isNaN(enteredValue) && enteredValue >= min && enteredValue <= max;
+    var newValidValue = clampNumber(enteredValue, min, max);
+    setState({
+      value: newValidValue,
+      enteredValue: enteredValue,
+      isValid: isValid
+    });
+
+    // Only call back the caller for valid values
+    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 vales 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 calmp it if the entered value exeeds the limitations
-    var convertedEnteredValue = convertNonIntegerToDefault(Number(lastEnteredValue), min);
-    var validNumber = clampNumber(convertedEnteredValue, min, max);
+    // 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(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');
   var inputClassNames = (0, _classnames["default"])('form-control', 'no-controls', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', className);
   var input = /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, remainingProps, {
-    type: type,
+    type: "number",
     step: step,
     min: min,
     max: max,
@@ -142,8 +155,13 @@ var NumberInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref
     disabled: disabled,
     onBlur: handleBlur,
     onChange: handleOnChange,
+    onKeyDown: handleKeyDown,
     ref: ref,
-    "aria-label": 'number-input'
+    "aria-label": "number-input",
+    placeholder: placeholder,
+    onWheel: function onWheel(event) {
+      return event.target.blur();
+    }
   }));
   return unit || inputAddon ? /*#__PURE__*/_react["default"].createElement("div", {
     className: inputGroupClassNames
@@ -160,13 +178,15 @@ NumberInput.propTypes = {
   max: _propTypes["default"].number,
   value: _propTypes["default"].number,
   step: _propTypes["default"].number,
-  type: _propTypes["default"].string,
   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
+  inputAddon: _propTypes["default"].string,
+  digitPrecision: _propTypes["default"].number,
+  placeholder: _propTypes["default"].string
 };
 var _default = NumberInput;
 exports["default"] = _default;

package/lib/es/components/sidebars/Sidebar.js

@@ -243,7 +243,7 @@ var Sidebar = /*#__PURE__*/function (_Component) {
       var headerClassNames = (0, _classnames["default"])('SidebarHeader', headerClassName && headerClassName, showHeaderBorder && 'show-border');
       var titleClassNames = (0, _classnames["default"])('SidebarTitle', titleClassName && titleClassName);
       var bodyClassNames = (0, _classnames["default"])('SidebarBody', bodyClassName && bodyClassName);
-      var backdropClassNames = (0, _classnames["default"])('SidebarBackdrop', makeBackdropVisible && 'bg-black opacity-50', backdropClassName && backdropClassName);
+      var backdropClassNames = (0, _classnames["default"])('SidebarBackdrop', makeBackdropVisible && 'sidebar-backdrop-bg', backdropClassName && backdropClassName);
       var fullscreenIconClasses = (0, _classnames["default"])('rioglyph', isFullscreen ? 'rioglyph-resize-small' : 'rioglyph-resize-full');
       var resizeLimitClasses = (0, _classnames["default"])('SidebarResizeLimit', isResize && 'display-block');
       var isRight = position === Sidebar.RIGHT;
@@ -368,7 +368,7 @@ Sidebar.propTypes = {
   makeBackdropVisible: _propTypes["default"].bool,
   onBackdropClick: _propTypes["default"].func,
   backdropClassName: _propTypes["default"].string,
-  bodyRef: _propTypes["default"].elementType,
+  bodyRef: _propTypes["default"].object,
   headerButtons: _propTypes["default"].node
 };
 var _default = Sidebar;

package/lib/es/hooks/useDarkMode.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _colorScheme = require("./../utils/colorScheme");
+var _useMutationObserver = _interopRequireDefault(require("./useMutationObserver"));
+var useDarkMode = function useDarkMode() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isDarkMode = _useState2[0],
+    setIsDarkMode = _useState2[1];
+  var handleMutation = (0, _react.useCallback)(function (mutationList) {
+    mutationList.map(function (mutation) {
+      if (mutation.type === 'attributes' && mutation.attributeName === _colorScheme.THEME_DATA_ATTRIBUTE) {
+        var _mutation$target$attr;
+        var scheme = (_mutation$target$attr = mutation.target.attributes[_colorScheme.THEME_DATA_ATTRIBUTE]) === null || _mutation$target$attr === void 0 ? void 0 : _mutation$target$attr.value;
+        setIsDarkMode(scheme === _colorScheme.THEME_DARK);
+      }
+
+      // if (mutation.type === 'classList') {
+      //     console.log({ classList: mutation });
+      // }
+    });
+  }, []);
+  (0, _useMutationObserver["default"])(document.documentElement, handleMutation, {
+    attributes: true,
+    childList: false,
+    subtree: false
+  });
+  return isDarkMode;
+};
+var _default = useDarkMode;
+exports["default"] = _default;

package/lib/es/hooks/useElementSize.js

@@ -9,7 +9,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function useElementSize(elementRef) {
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),

package/lib/es/hooks/useFullscreen.js

@@ -120,25 +120,23 @@ var useFullscreen = function useFullscreen() {
     var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(newTargetElement) {
       var isHtmlElement, target;
       return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              // check whether the new target element is a real DOm node or just a function
-              isHtmlElement = newTargetElement instanceof HTMLElement;
-              _context.prev = 1;
-              target = newTargetElement && isHtmlElement ? newTargetElement : defaultFullscreenElement;
-              _context.next = 5;
-              return target[getRequestFunctionName(target)](requestFullscreenOptions);
-            case 5:
-              return _context.abrupt("return", _context.sent);
-            case 8:
-              _context.prev = 8;
-              _context.t0 = _context["catch"](1);
-              console.log(_context.t0);
-            case 11:
-            case "end":
-              return _context.stop();
-          }
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            // check whether the new target element is a real DOm node or just a function
+            isHtmlElement = newTargetElement instanceof HTMLElement;
+            _context.prev = 1;
+            target = newTargetElement && isHtmlElement ? newTargetElement : defaultFullscreenElement;
+            _context.next = 5;
+            return target[getRequestFunctionName(target)](requestFullscreenOptions);
+          case 5:
+            return _context.abrupt("return", _context.sent);
+          case 8:
+            _context.prev = 8;
+            _context.t0 = _context["catch"](1);
+            console.log(_context.t0);
+          case 11:
+          case "end":
+            return _context.stop();
         }
       }, _callee, null, [[1, 8]]);
     }));
@@ -148,29 +146,27 @@ var useFullscreen = function useFullscreen() {
   }(), []);
   var exitFullscreen = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
     return _regenerator["default"].wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            _context2.prev = 0;
-            if (!fullscreenElement) {
-              _context2.next = 5;
-              break;
-            }
-            _context2.next = 4;
-            return document[getExitFunctionName()]();
-          case 4:
-            return _context2.abrupt("return", _context2.sent);
-          case 5:
-            _context2.next = 10;
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.prev = 0;
+          if (!fullscreenElement) {
+            _context2.next = 5;
             break;
-          case 7:
-            _context2.prev = 7;
-            _context2.t0 = _context2["catch"](0);
-            console.warn(_context2.t0);
-          case 10:
-          case "end":
-            return _context2.stop();
-        }
+          }
+          _context2.next = 4;
+          return document[getExitFunctionName()]();
+        case 4:
+          return _context2.abrupt("return", _context2.sent);
+        case 5:
+          _context2.next = 10;
+          break;
+        case 7:
+          _context2.prev = 7;
+          _context2.t0 = _context2["catch"](0);
+          console.warn(_context2.t0);
+        case 10:
+        case "end":
+          return _context2.stop();
       }
     }, _callee2, null, [[0, 7]]);
   })), [fullscreenElement]);

package/lib/es/hooks/useHereMap.ts

@@ -0,0 +1,23 @@
+import { useScripts } from './useScripts';
+
+const DEFAULT_BASE_URL = 'https://js.api.here.com/v3/3.1.20.0/';
+
+const HERE_EXTERNALS = [
+    'mapsjs-core.js',
+    'mapsjs-core-legacy.js',
+    'mapsjs-service.js',
+    'mapsjs-service-legacy.js',
+    'mapsjs-mapevents.js',
+    'mapsjs-ui.js',
+    'mapsjs-clustering.js',
+];
+
+const getExternals = (scriptList: string[], baseUrl: string): string[] =>
+    scriptList.map((script) => `${baseUrl}${script}`);
+
+const sanitizeBaseUrl = (url: string) => (url.endsWith('/') ? url : `${url}/`);
+
+export const useHereMap = (baseUrl?: string) => {
+    const hereScripts = getExternals(HERE_EXTERNALS, sanitizeBaseUrl(baseUrl || DEFAULT_BASE_URL));
+    return useScripts(hereScripts, false);
+};

package/lib/es/hooks/useMutationObserver.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = require("react");
+var isRef = function isRef(obj) {
+  return obj !== null && (0, _typeof2["default"])(obj) === 'object' && Object.prototype.hasOwnProperty.call(obj, 'current');
+};
+var unRef = function unRef(target) {
+  return isRef(target) ? target.current : target;
+};
+
+// Options for the observer (which mutations to observe)
+var DEFAULT_OPTIONS = {
+  attributes: true,
+  childList: false,
+  subtree: false
+};
+var useMutationObserver = function useMutationObserver(target) {
+  var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_OPTIONS;
+  var observer = (0, _react.useRef)(null);
+  var disconnect = (0, _react.useCallback)(function () {
+    var _observer$current;
+    return (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.disconnect();
+  }, []);
+  var observe = (0, _react.useCallback)(function () {
+    var targetElement = unRef(target);
+    observer.current = new MutationObserver(callback);
+    if (targetElement) {
+      observer.current.observe(targetElement, options);
+    }
+  }, [target]);
+  (0, _react.useLayoutEffect)(function () {
+    observe();
+    return function () {
+      return disconnect();
+    };
+  }, [disconnect, observe]);
+};
+var _default = useMutationObserver;
+exports["default"] = _default;

package/lib/es/hooks/useScripts.ts

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+
+const hasScriptsInHead = (src: string) => document.head.querySelectorAll(`script[src*="${src}"]`).length > 0;
+
+export const useScripts = (scripts: string[], loadAsync: boolean = false) => {
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [hasLoaded, setHasLoaded] = useState<boolean>(false);
+    const [error, setError] = useState<Error | undefined>();
+
+    const promises = new Set();
+
+    useEffect(() => {
+        const [firstScript] = scripts;
+
+        if (hasScriptsInHead(firstScript)) {
+            setHasLoaded(true);
+            return;
+        }
+
+        setIsLoading(true);
+
+        scripts.map((external) => {
+            promises.add(
+                new Promise<void>((resolve, reject) => {
+                    const script = document.createElement('script');
+                    script.async = loadAsync;
+                    script.src = external;
+
+                    script.onload = () => {
+                        console.debug(`loaded ${external}`);
+                        resolve();
+                    };
+
+                    script.onerror = () => {
+                        console.debug(`failed to load ${external}`);
+                        setError(new Error(`failed to load ${external}`));
+                        reject();
+                    };
+
+                    document.head.appendChild(script);
+                })
+            );
+        });
+
+        Promise.all([...promises]).then(() => {
+            setIsLoading(false);
+            setHasLoaded(true);
+        });
+    }, []);
+
+    return { isLoading, error, hasLoaded };
+};