@rio-cloud/rio-uikit 0.16.2-beta.9 → 0.16.3-beta.1

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/components/responsiveColumnStripe/ResponsiveColumnStripe.js

@@ -0,0 +1,266 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _findIndex = _interopRequireDefault(require("lodash/fp/findIndex"));
+var _chunk = _interopRequireDefault(require("lodash/fp/chunk"));
+var _framerMotion = require("framer-motion");
+var _useAfterMount = _interopRequireDefault(require("../../hooks/useAfterMount"));
+var _useElementSize3 = _interopRequireDefault(require("../../hooks/useElementSize"));
+var _excluded = ["minColumnWith", "minColumns", "maxColumns", "className", "buttonClassName", "columnsWrapperClassName", "onNextClick", "onPreviousClick", "stretchLastItems", "asType", "activePage", "disableAnimation", "children"];
+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_MIN_COLUMN_WITH = 300;
+var DEFAULT_MIN_COLUMNS = 1;
+var DEFAULT_MAX_COLUMNS = 5;
+var DEFAULT_COLUMN_WRAPPER_TYPE = 'div';
+var DEFAULT_ACTIVE_PAGE = 0;
+var MIN_WITH_THRESHOLD = 10;
+var ANIMATION_DURATION = 0.2;
+var ANIMATION_NEXT = 'page';
+var ANIMATION_BACK = 'pageBack';
+var COLUMN_ITEM_CLASSNAME = 'ColumnItem';
+var pageTransitionVariants = function pageTransitionVariants(pageDirection) {
+  return {
+    pageEnter: function pageEnter() {
+      return {
+        x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
+        opacity: 0
+      };
+    },
+    pageCenter: function pageCenter() {
+      return {
+        x: 0,
+        opacity: 1
+      };
+    }
+  };
+};
+var getFirstColumnItem = function getFirstColumnItem(node) {
+  if ((0, _toConsumableArray2["default"])(node.classList).includes(COLUMN_ITEM_CLASSNAME)) {
+    return node;
+  }
+  return getFirstColumnItem(node.children[0]);
+};
+var ResponsiveColumnStripe = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$minColumnWith = props.minColumnWith,
+    minColumnWith = _props$minColumnWith === void 0 ? DEFAULT_MIN_COLUMN_WITH : _props$minColumnWith,
+    _props$minColumns = props.minColumns,
+    minColumns = _props$minColumns === void 0 ? DEFAULT_MIN_COLUMNS : _props$minColumns,
+    _props$maxColumns = props.maxColumns,
+    maxColumns = _props$maxColumns === void 0 ? DEFAULT_MAX_COLUMNS : _props$maxColumns,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$buttonClassNam = props.buttonClassName,
+    buttonClassName = _props$buttonClassNam === void 0 ? '' : _props$buttonClassNam,
+    _props$columnsWrapper = props.columnsWrapperClassName,
+    columnsWrapperClassName = _props$columnsWrapper === void 0 ? '' : _props$columnsWrapper,
+    _props$onNextClick = props.onNextClick,
+    onNextClick = _props$onNextClick === void 0 ? function () {} : _props$onNextClick,
+    _props$onPreviousClic = props.onPreviousClick,
+    onPreviousClick = _props$onPreviousClic === void 0 ? function () {} : _props$onPreviousClic,
+    _props$stretchLastIte = props.stretchLastItems,
+    stretchLastItems = _props$stretchLastIte === void 0 ? true : _props$stretchLastIte,
+    _props$asType = props.asType,
+    asType = _props$asType === void 0 ? DEFAULT_COLUMN_WRAPPER_TYPE : _props$asType,
+    _props$activePage = props.activePage,
+    activePage = _props$activePage === void 0 ? DEFAULT_ACTIVE_PAGE : _props$activePage,
+    _props$disableAnimati = props.disableAnimation,
+    disableAnimation = _props$disableAnimati === void 0 ? false : _props$disableAnimati,
+    children = props.children,
+    remainingProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var ComponentType = asType;
+  var _useState = (0, _react.useState)(activePage),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    currentPage = _useState2[0],
+    setCurrentPage = _useState2[1];
+  var _useState3 = (0, _react.useState)(maxColumns),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    columnsPerPage = _useState4[0],
+    setColumnsPerPage = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    enableInitialAnimation = _useState6[0],
+    setEnableInitialAnimation = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    isResizePage = _useState8[0],
+    setIsResizePage = _useState8[1];
+  var _useState9 = (0, _react.useState)(ANIMATION_NEXT),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    animationDirection = _useState10[0],
+    setAnimationDirection = _useState10[1];
+
+  // The base for reacting on changing width of the wrapping element.
+  // It uses a ResizeObserver under the hood.
+  var columnWrapperRef = (0, _react.useRef)();
+  var _useElementSize = (0, _useElementSize3["default"])(columnWrapperRef),
+    _useElementSize2 = (0, _slicedToArray2["default"])(_useElementSize, 1),
+    columnWrapperWidth = _useElementSize2[0];
+  (0, _useAfterMount["default"])(function () {
+    setEnableInitialAnimation(true);
+  });
+
+  // Update active page from outside to be used as controlled component
+  (0, _react.useEffect)(function () {
+    if (Number.isFinite(activePage)) {
+      setCurrentPage(activePage);
+    }
+  }, [activePage]);
+  var updatePageOnColumnsSizeChange = function updatePageOnColumnsSizeChange(firstItem, columnsPerPage, children) {
+    // Split children in page chunks
+    var itemChunks = (0, _chunk["default"])(columnsPerPage)(children);
+
+    // find the currently rendered first item inside the chunks.
+    // The found chunk index is the new page to render.
+    // example of chunks => [['a', 'b', 'c'], ['d']]
+    var targetPage = (0, _findIndex["default"])(function (chunk) {
+      return chunk.some(function (chunkItem) {
+        var _firstItem$attributes;
+        return chunkItem.key === ((_firstItem$attributes = firstItem.attributes['data-key']) === null || _firstItem$attributes === void 0 ? void 0 : _firstItem$attributes.value);
+      });
+    })(itemChunks);
+    if (targetPage !== currentPage) {
+      setCurrentPage(targetPage);
+    }
+  };
+
+  // When the container size changes, adapt the amount of columns to be rendered according
+  // to the given min width of a single item. The new amount of columns also has to respect
+  // the lower and upper limit. When updating the amount, the current page hse to be updated as well.
+  (0, _react.useEffect)(function () {
+    if (!columnWrapperRef.current) {
+      return;
+    }
+    var firstItem = getFirstColumnItem(columnWrapperRef.current.children[0]);
+    if (!firstItem) {
+      return;
+    }
+
+    // Get the width of the first column to calculate how many columns fit in one page
+    // according to the given minWidth per column
+    var columnWidth = firstItem.getBoundingClientRect().width;
+
+    // Limit columns per page for given min and max values
+    var allowForLessColumns = columnsPerPage - 1 >= minColumns;
+    var allowForMoreColumns = columnsPerPage + 1 <= maxColumns;
+
+    // The threshold is required to avoid jumping between bigger and smaller after the columns per page
+    // has changed and it continues to resize
+    var goSmaller = allowForLessColumns && columnWidth + MIN_WITH_THRESHOLD <= minColumnWith;
+    var goBigger = allowForMoreColumns && (columnsPerPage + 1) * minColumnWith <= columnWrapperWidth;
+
+    // During resizing, we don't want any animation
+    setIsResizePage(true);
+    if (goBigger) {
+      var newValue = columnsPerPage + 1;
+      setColumnsPerPage(newValue);
+      updatePageOnColumnsSizeChange(firstItem, newValue, children);
+      return;
+    }
+    if (goSmaller) {
+      var _newValue = columnsPerPage - 1;
+      setColumnsPerPage(_newValue);
+      updatePageOnColumnsSizeChange(firstItem, _newValue, children);
+      return;
+    }
+  }, [columnWrapperWidth, columnWrapperRef.current, children]);
+  var handlePrevClick = function handlePrevClick() {
+    setIsResizePage(false);
+    setAnimationDirection(ANIMATION_BACK);
+    var pageNumber = currentPage - 1;
+    setCurrentPage(pageNumber);
+    onPreviousClick(pageNumber, columnsPerPage);
+  };
+  var handleNextClick = function handleNextClick() {
+    setIsResizePage(false);
+    setAnimationDirection(ANIMATION_NEXT);
+    var pageNumber = currentPage + 1;
+    setCurrentPage(pageNumber);
+    onNextClick(pageNumber, columnsPerPage);
+  };
+  if (!children) {
+    return null;
+  }
+
+  // Split the children/columns in chunks according to the current columns per page size
+  // and get the current page chunk for rendering
+  var columnsToDisplay = (0, _chunk["default"])(columnsPerPage)(children)[currentPage];
+  var showPageButtons = minColumns < children.length;
+  var disablePreviousPage = currentPage === 0;
+  var disableNextPage = currentPage === Math.ceil(children.length / columnsPerPage) - 1;
+  var wrapperClassName = (0, _classnames["default"])('ResponsiveColumnStripe', 'display-flex align-items-center', 'overflow-hidden', className);
+  var baseButtonClassName = (0, _classnames["default"])('align-items-center', 'align-self-stretch', 'display-flex', 'hover-scale-105', 'hover-text-color-darkest', 'padding-10', 'cursor-pointer', 'text-color-darker', 'text-size-12');
+  var disabledButtonClassName = 'pointer-events-none opacity-30';
+  var previousButtonClassName = (0, _classnames["default"])('PreviousButton', baseButtonClassName, disablePreviousPage && disabledButtonClassName);
+  var nextButtonClassName = (0, _classnames["default"])('NextButton', baseButtonClassName, disableNextPage && disabledButtonClassName);
+  var mergedColumnsWrapperClassName = (0, _classnames["default"])('ColumnWrapper', 'flex-1-1', 'display-flex', columnsWrapperClassName);
+  var columnClassName = disableNextPage && !stretchLastItems ? 'flex-0-1' : 'flex-1-1';
+
+  // Use the given custom component type "div" or any other. Clone the children to inject certain
+  // properties that are required to stretch the items and deal with their size.
+  var columns = /*#__PURE__*/_react["default"].createElement(ComponentType, {
+    className: mergedColumnsWrapperClassName
+  }, _react["default"].Children.map(columnsToDisplay, function (column) {
+    var _column$props;
+    return /*#__PURE__*/_react["default"].cloneElement(column, {
+      className: "".concat(COLUMN_ITEM_CLASSNAME, " ").concat(columnClassName, " ").concat(((_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.className) || ''),
+      // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },
+      'data-key': column.key
+    });
+  }));
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, remainingProps, {
+    ref: ref,
+    className: wrapperClassName
+  }), showPageButtons && /*#__PURE__*/_react["default"].createElement("div", {
+    className: previousButtonClassName,
+    onClick: handlePrevClick
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "rioglyph rioglyph-chevron-left"
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ColumnsArea flex-1-1 overflow-hidden",
+    ref: columnWrapperRef
+  }, disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, {
+    exitBeforeEnter: true
+  }, /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
+    key: currentPage,
+    variants: pageTransitionVariants(animationDirection),
+    initial: enableInitialAnimation ? 'pageEnter' : false,
+    animate: "pageCenter",
+    transition: {
+      duration: ANIMATION_DURATION
+    }
+  }, columns))), showPageButtons && /*#__PURE__*/_react["default"].createElement("div", {
+    className: nextButtonClassName,
+    onClick: handleNextClick
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "rioglyph rioglyph-chevron-right"
+  })));
+});
+var _default = ResponsiveColumnStripe;
+exports["default"] = _default;
+ResponsiveColumnStripe.propTypes = {
+  minColumnWith: _propTypes["default"].number,
+  minColumns: _propTypes["default"].number,
+  maxColumns: _propTypes["default"].number,
+  className: _propTypes["default"].string,
+  buttonClassName: _propTypes["default"].string,
+  columnsWrapperClassName: _propTypes["default"].string,
+  onNextClick: _propTypes["default"].func,
+  onPreviousClick: _propTypes["default"].func,
+  stretchLastItems: _propTypes["default"].bool,
+  asType: _propTypes["default"].string,
+  activePage: _propTypes["default"].number,
+  disableAnimation: _propTypes["default"].bool
+};

package/lib/es/components/rules/RuleContainer.js

@@ -36,6 +36,10 @@ var RuleContainer = function RuleContainer(props) {
     exitBeforeEnter: true
   }, _react["default"].Children.map(children, function (child) {
     var _child$type;
+    if (!child) {
+      return null;
+    }
+
     // In case there are multiple children of RuleContainer, use the
     // type name or the type itself as a key to animate between the two children
     return /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {

package/lib/es/components/rules/RulesWrapper.js

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _framerMotion = require("framer-motion");
 var _excluded = ["children"];
-var RuleWrapper = function RuleWrapper(_ref) {
+var RulesWrapper = function RulesWrapper(_ref) {
   var children = _ref.children,
     remainigProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, (0, _extends2["default"])({
@@ -20,6 +20,6 @@ var RuleWrapper = function RuleWrapper(_ref) {
     layout: "position"
   }, children)));
 };
-RuleWrapper.defaultProps = {};
-var _default = RuleWrapper;
+RulesWrapper.defaultProps = {};
+var _default = RulesWrapper;
 exports["default"] = _default;

package/lib/es/hooks/useDarkMode.js

@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useDarkMode = void 0;
+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(widgetName) {
+var useDarkMode = function useDarkMode() {
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isDarkMode = _useState2[0],
@@ -34,4 +34,5 @@ var useDarkMode = function useDarkMode(widgetName) {
   });
   return isDarkMode;
 };
-exports.useDarkMode = useDarkMode;
+var _default = useDarkMode;
+exports["default"] = _default;

package/lib/es/hooks/useMutationObserver.js

@@ -1,17 +1,27 @@
 "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: true,
-  subtree: true
+  childList: false,
+  subtree: false
 };
-var useMutationObserver = function useMutationObserver(targetElement, callback) {
+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 () {
@@ -19,11 +29,12 @@ var useMutationObserver = function useMutationObserver(targetElement, callback)
     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);
     }
-  }, [targetElement]);
+  }, [target]);
   (0, _react.useLayoutEffect)(function () {
     observe();
     return function () {

package/lib/es/hooks/useScrollPosition.js

@@ -26,8 +26,8 @@ var useScrollPosition = function useScrollPosition(target) {
   (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
+    // In cae the target is undefined it might be that the module-content is
+    // not rendered yet, hence check periodically for the existence in the DOM
     if (!target) {
       checkForModuleContent = setInterval(function () {
         var element = getModuleContent();
@@ -36,7 +36,6 @@ var useScrollPosition = function useScrollPosition(target) {
         }
       }, 300);
     } else if (target && checkForModuleContent) {
-      console.log('clearInterval');
       clearInterval(checkForModuleContent);
     }
 
@@ -45,13 +44,13 @@ var useScrollPosition = function useScrollPosition(target) {
       setTargetElement(target.current);
     }
 
-    // In case it's "wondow" or "document.body"
+    // In case it's "window" or "document.body"
     else {
       setTargetElement(target);
     }
-    return {
-      "if": function _if(checkForModuleContent) {
-        clearInterval(check);
+    return function () {
+      if (checkForModuleContent) {
+        clearInterval(checkForModuleContent);
       }
     };
   }, [target]);

package/lib/es/index.d.ts

@@ -1,36 +1,36 @@
 declare module '@rio-cloud/lib/es/rio-uikit' {
     import React from 'react';
     import {
-        ActionBarItemProps,
         ActionBarItemIconProps,
         ActionBarItemPopoverProps,
         ActionBarItemPopoverWidth,
+        ActionBarItemProps,
         ActivityProps,
         ApplicationHeaderProps,
-        ApplicationLayoutProps,
-        ApplicationLayoutHeaderProps,
-        ApplicationLayoutBodyProps,
-        ApplicationLayoutSidebarProps,
         ApplicationLayoutBodyBannerProps,
         ApplicationLayoutBodyBottomBarProps,
         ApplicationLayoutBodyNavigationProps,
+        ApplicationLayoutBodyProps,
+        ApplicationLayoutHeaderProps,
+        ApplicationLayoutProps,
+        ApplicationLayoutSidebarProps,
         Area as AreaProps,
         AreaChartProps,
         AreaGradient as AreaGradientProps,
         AssetTreeProps,
-        AutoSuggestProps,
         AutoSuggestInputProps,
+        AutoSuggestProps,
         AutoSuggestSuggestion,
         Bar as BarProps,
         BarChartProps,
-        ButtonDropdownProps,
+        BaseStateProps,
         BrowserWarningProps,
+        ButtonDropdownProps,
         CheckboxProps,
         ClearableInputProps,
-        ConfirmationDialogProps,
         CollapseProps,
+        ConfirmationDialogProps,
         ContentLoaderProps,
-        BaseStateProps,
         DataTabProps,
         DataTabsProps,
         DatePickerProps,
@@ -53,30 +53,30 @@ declare module '@rio-cloud/lib/es/rio-uikit' {
         MenuItemProps,
         MultiselectProps,
         NoDataProps,
+        NotBookedStateProps,
         NotificationsContainerProps,
         notificationTriggerFunction,
-        NotBookedStateProps,
         NumberControlProps,
         NumberInputProps,
+        OnboardingTipAlignment,
         OnboardingTipProps,
-        OverlayTriggerProps,
-        OverlayTriggerPlacement,
         OverlayTriggerEvent,
-        OnboardingTipAlignment,
-        PieChartProps,
+        OverlayTriggerPlacement,
+        OverlayTriggerProps,
         PagerProps,
+        PieChartProps,
         PopoverProps,
-        ResizerDirection,
-        ResizerPosition,
         RadioButtonProps,
         RangeSliderProps,
-        ReleaseNotesProps,
         ReleaseNotesDialogProps,
+        ReleaseNotesProps,
+        ResizerDirection,
+        ResizerPosition,
         ResizerProps,
         ResponsiveVideoProps,
-        RulesWrapperProps,
-        RuleContainerProps,
         RuleConnectorProps,
+        RuleContainerProps,
+        RulesWrapperProps,
         SaveDialogProps,
         SelectProps,
         SidebarProps,
@@ -89,15 +89,15 @@ declare module '@rio-cloud/lib/es/rio-uikit' {
         SortArrowsProps,
         SortDirection,
         SpinnerProps,
-        SplitDialogProps,
         SplitButtonDropdownProps,
-        StatsWidgetProps,
-        StatsWidgetHeaderProps,
+        SplitDialogProps,
         StatsWidgetBodyProps,
         StatsWidgetFooterProps,
-        StatsWidgetsProps,
-        StatsWidgetSpacerProps,
+        StatsWidgetHeaderProps,
         StatsWidgetNumberProps,
+        StatsWidgetProps,
+        StatsWidgetSpacerProps,
+        StatsWidgetsProps,
         StatusBarProps,
         SteppedProgressBarProps,
         SwitchProps,
@@ -106,11 +106,11 @@ declare module '@rio-cloud/lib/es/rio-uikit' {
         TableSettingsDialogProps,
         TableViewTogglesProps,
         TableViewTogglesValues,
-        TagProps,
         TagListProps,
         TagManagerProps,
-        TeaserProps,
+        TagProps,
         TeaserContainerProps,
+        TeaserProps,
         TimePickerProps,
         ToggleButtonProps,
         ToolTipProps,
@@ -158,6 +158,8 @@ declare module '@rio-cloud/lib/es/rio-uikit' {
     export class Dialog extends React.Component<DialogProps> {
         public static SIZE_FULL_SCREEN: 'fullscreen';
         public static SIZE_FULL: 'full';
+        public static SIZE_FULL_WIDTH = 'fullwidth';
+        public static SIZE_FULL_HEIGHT = 'fullheight';
         public static SIZE_XL: 'xl';
         public static SIZE_LG: 'lg';
         public static SIZE_MD: 'md';
@@ -204,9 +206,9 @@ declare module '@rio-cloud/lib/es/rio-uikit' {
     export class ReleaseNotesDialog extends React.Component<ReleaseNotesDialogProps> {}
     export class Resizer extends React.Component<ResizerProps> {}
     export class ResponsiveVideo extends React.Component<ResponsiveVideoProps> {}
-    export class RulesWrapper extends React.Component<RulesWrapperProps> {}
-    export class RuleContainer extends React.Component<RuleContainerProps> {}
-    export class RuleConnector extends React.Component<RuleConnectorProps> {}
+    export class RulesWrapper extends React.Component<React.PropsWithChildren<RulesWrapperProps>> {}
+    export class RuleContainer extends React.Component<React.PropsWithChildren<RuleContainerProps>> {}
+    export class RuleConnector extends React.Component<React.PropsWithChildren<RuleConnectorProps>> {}
     export class SaveDialog extends React.Component<SaveDialogProps> {}
     export class Select extends React.Component<SelectProps> {}
     export class Sidebar extends React.Component<SidebarProps> {}