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

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

@@ -13,21 +13,26 @@ 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", "onValueChanged", "min", "max", "value", "step", "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; }
+// 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
 };
 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 DEFAULT_VALUE = 0;
+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 +42,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;
 };
@@ -59,16 +61,13 @@ var NumberInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref
     propMin = props.min,
     propMax = props.max,
     propValue = props.value,
-    propStep = props.step,
-    propType = props.type,
+    _props$step = props.step,
+    step = _props$step === void 0 ? 1 : _props$step,
+    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);
+  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,33 +82,31 @@ 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 && onValueChanged(newValidValue);
   };
   var handleOnChange = function handleOnChange(event) {
     return applyValue(event.target.value);
@@ -117,7 +114,7 @@ var NumberInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref
   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
+    // When the value is removed, keep the input empty but trigger the onValueChanged callback
     // since the user has finished his input
     var lastEnteredValue = state.enteredValue;
     if (lastEnteredValue === '') {
@@ -125,15 +122,15 @@ var NumberInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref
       return;
     }
 
-    // Otherwise, validate the input and calmp it if the entered value exeeds the limitations
-    var convertedEnteredValue = convertNonIntegerToDefault(Number(lastEnteredValue), min);
+    // Otherwise, validate the input and clamp it if the entered value exeeds the limitations
+    var convertedEnteredValue = convertNonIntegerToDefault(Number(lastEnteredValue));
     var validNumber = clampNumber(convertedEnteredValue, 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,
@@ -143,7 +140,11 @@ var NumberInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref
     onBlur: handleBlur,
     onChange: handleOnChange,
     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 +161,13 @@ NumberInput.propTypes = {
   max: _propTypes["default"].number,
   value: _propTypes["default"].number,
   step: _propTypes["default"].number,
-  type: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
   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,
+  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 };
+};

package/lib/es/hooks/useScrollPosition.js

@@ -0,0 +1,80 @@
+"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 getModuleContent = function getModuleContent() {
+  return document.getElementsByClassName('module-content')[0];
+};
+
+// "target" can be "window", "document.body", a "ref" or undefiend
+// where in later case the module-content is taken as default
+
+var useScrollPosition = function useScrollPosition(target) {
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    targetElement = _useState2[0],
+    setTargetElement = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    scrollPosition = _useState4[0],
+    setScrollPosition = _useState4[1];
+  (0, _react.useEffect)(function () {
+    var checkForModuleContent = null;
+
+    // In cae the target is undefined it might be that the module-content is not rendered yet,
+    // hence check periodically for the existence
+    if (!target) {
+      checkForModuleContent = setInterval(function () {
+        var element = getModuleContent();
+        if (element) {
+          setTargetElement(element);
+        }
+      }, 300);
+    } else if (target && checkForModuleContent) {
+      console.log('clearInterval');
+      clearInterval(checkForModuleContent);
+    }
+
+    // In case the target is a "ref" - set the targetElement when current is defined
+    else if (target !== null && target !== void 0 && target.current && !checkForModuleContent) {
+      setTargetElement(target.current);
+    }
+
+    // In case it's "wondow" or "document.body"
+    else {
+      setTargetElement(target);
+    }
+    return {
+      "if": function _if(checkForModuleContent) {
+        clearInterval(check);
+      }
+    };
+  }, [target]);
+  var handleScroll = function handleScroll() {
+    requestAnimationFrame(function () {
+      if (targetElement === window) {
+        setScrollPosition(targetElement.scrollY);
+      } else {
+        setScrollPosition(targetElement.scrollTop);
+      }
+    });
+  };
+  (0, _react.useEffect)(function () {
+    if (targetElement) {
+      targetElement.addEventListener('scroll', handleScroll);
+    }
+    return function () {
+      if (targetElement) {
+        targetElement.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, [targetElement]);
+  return scrollPosition;
+};
+var _default = useScrollPosition;
+exports["default"] = _default;

package/lib/es/index.js

@@ -94,9 +94,14 @@ var _exportNames = {
   useClickOutside: true,
   useClipboard: true,
   useElementSize: true,
+  useScrollPosition: true,
+  useDarkMode: true,
+  useMutationObserver: true,
   hasTouch: true,
   inIframe: true,
   isDesktop: true,
+  getColorScheme: true,
+  setColorScheme: true,
   getNewGroupedSelected: true,
   ExpanderPanel: true,
   ExpanderList: true,
@@ -829,6 +834,12 @@ Object.defineProperty(exports, "enableSupportMarker", {
     return _toggleSupportMarker2.enableSupportMarker;
   }
 });
+Object.defineProperty(exports, "getColorScheme", {
+  enumerable: true,
+  get: function get() {
+    return _colorScheme.getColorScheme;
+  }
+});
 Object.defineProperty(exports, "getNewGroupedSelected", {
   enumerable: true,
   get: function get() {
@@ -883,6 +894,12 @@ Object.defineProperty(exports, "parseSorting", {
     return _routeUtils.parseSorting;
   }
 });
+Object.defineProperty(exports, "setColorScheme", {
+  enumerable: true,
+  get: function get() {
+    return _colorScheme.setColorScheme;
+  }
+});
 Object.defineProperty(exports, "sortByProperty", {
   enumerable: true,
   get: function get() {
@@ -913,6 +930,12 @@ Object.defineProperty(exports, "useClipboard", {
     return _useClipboard["default"];
   }
 });
+Object.defineProperty(exports, "useDarkMode", {
+  enumerable: true,
+  get: function get() {
+    return _useDarkMode["default"];
+  }
+});
 Object.defineProperty(exports, "useEffectOnce", {
   enumerable: true,
   get: function get() {
@@ -949,12 +972,24 @@ Object.defineProperty(exports, "useKey", {
     return _useKey["default"];
   }
 });
+Object.defineProperty(exports, "useMutationObserver", {
+  enumerable: true,
+  get: function get() {
+    return _useMutationObserver["default"];
+  }
+});
 Object.defineProperty(exports, "useOnMount", {
   enumerable: true,
   get: function get() {
     return _useOnMount["default"];
   }
 });
+Object.defineProperty(exports, "useScrollPosition", {
+  enumerable: true,
+  get: function get() {
+    return _useScrollPosition["default"];
+  }
+});
 Object.defineProperty(exports, "useTimeout", {
   enumerable: true,
   get: function get() {
@@ -980,7 +1015,7 @@ Object.keys(_framerMotion).forEach(function (key) {
     }
   });
 });
-var _colors2 = _interopRequireDefault(require("./styles/shared/colors.json"));
+var _colors2 = _interopRequireDefault(require("./styles/variables/colors.json"));
 var _Button2 = _interopRequireDefault(require("./components/button/Button"));
 var _AutoSuggest2 = _interopRequireDefault(require("./components/autosuggest/AutoSuggest"));
 var _ToggleButton2 = _interopRequireDefault(require("./components/button/ToggleButton"));
@@ -1061,7 +1096,11 @@ var _useInterval = _interopRequireDefault(require("./hooks/useInterval"));
 var _useClickOutside = _interopRequireDefault(require("./hooks/useClickOutside"));
 var _useClipboard = _interopRequireDefault(require("./hooks/useClipboard"));
 var _useElementSize = _interopRequireDefault(require("./hooks/useElementSize"));
+var _useScrollPosition = _interopRequireDefault(require("./hooks/useScrollPosition"));
+var _useDarkMode = _interopRequireDefault(require("./hooks/useDarkMode"));
+var _useMutationObserver = _interopRequireDefault(require("./hooks/useMutationObserver"));
 var _deviceUtils = require("./utils/deviceUtils");
+var _colorScheme = require("./utils/colorScheme");
 var _GroupSelectionUtil = require("./utils/GroupSelectionUtil");
 var _ExpanderPanel2 = _interopRequireDefault(require("./components/expander/ExpanderPanel"));
 var _ExpanderList2 = _interopRequireDefault(require("./components/expander/ExpanderList"));