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

package/components/numberInput/NumberInput.js

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

package/components/responsiveColumnStripe/ResponsiveColumnStripe.js

@@ -0,0 +1,255 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+var _excluded = ["minColumnWith", "minColumns", "maxColumns", "className", "buttonClassName", "columnsWrapperClassName", "onNextClick", "onPreviousClick", "stretchLastItems", "asType", "activePage", "disableAnimation", "children"];
+import React, { useState, useRef, useEffect, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import findIndex from 'lodash/fp/findIndex';
+import chunk from 'lodash/fp/chunk';
+import { AnimatePresence, motion } from 'framer-motion';
+import useAfterMount from '../../hooks/useAfterMount';
+import useElementSize from '../../hooks/useElementSize';
+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 (_toConsumableArray(node.classList).includes(COLUMN_ITEM_CLASSNAME)) {
+    return node;
+  }
+  return getFirstColumnItem(node.children[0]);
+};
+var ResponsiveColumnStripe = /*#__PURE__*/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 = _objectWithoutProperties(props, _excluded);
+  var ComponentType = asType;
+  var _useState = useState(activePage),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentPage = _useState2[0],
+    setCurrentPage = _useState2[1];
+  var _useState3 = useState(maxColumns),
+    _useState4 = _slicedToArray(_useState3, 2),
+    columnsPerPage = _useState4[0],
+    setColumnsPerPage = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    enableInitialAnimation = _useState6[0],
+    setEnableInitialAnimation = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isResizePage = _useState8[0],
+    setIsResizePage = _useState8[1];
+  var _useState9 = useState(ANIMATION_NEXT),
+    _useState10 = _slicedToArray(_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 = useRef();
+  var _useElementSize = useElementSize(columnWrapperRef),
+    _useElementSize2 = _slicedToArray(_useElementSize, 1),
+    columnWrapperWidth = _useElementSize2[0];
+  useAfterMount(function () {
+    setEnableInitialAnimation(true);
+  });
+
+  // Update active page from outside to be used as controlled component
+  useEffect(function () {
+    if (Number.isFinite(activePage)) {
+      setCurrentPage(activePage);
+    }
+  }, [activePage]);
+  var updatePageOnColumnsSizeChange = function updatePageOnColumnsSizeChange(firstItem, columnsPerPage, children) {
+    // Split children in page chunks
+    var itemChunks = chunk(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 = findIndex(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.
+  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 = chunk(columnsPerPage)(children)[currentPage];
+  var showPageButtons = minColumns < children.length;
+  var disablePreviousPage = currentPage === 0;
+  var disableNextPage = currentPage === Math.ceil(children.length / columnsPerPage) - 1;
+  var wrapperClassName = classNames('ResponsiveColumnStripe', 'display-flex align-items-center', 'overflow-hidden', className);
+  var baseButtonClassName = classNames('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 = classNames('PreviousButton', baseButtonClassName, disablePreviousPage && disabledButtonClassName);
+  var nextButtonClassName = classNames('NextButton', baseButtonClassName, disableNextPage && disabledButtonClassName);
+  var mergedColumnsWrapperClassName = classNames('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.createElement(ComponentType, {
+    className: mergedColumnsWrapperClassName
+  }, React.Children.map(columnsToDisplay, function (column) {
+    var _column$props;
+    return /*#__PURE__*/React.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.createElement("div", _extends({}, remainingProps, {
+    ref: ref,
+    className: wrapperClassName
+  }), showPageButtons && /*#__PURE__*/React.createElement("div", {
+    className: previousButtonClassName,
+    onClick: handlePrevClick
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "rioglyph rioglyph-chevron-left"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "ColumnsArea flex-1-1 overflow-hidden",
+    ref: columnWrapperRef
+  }, disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && /*#__PURE__*/React.createElement(AnimatePresence, {
+    exitBeforeEnter: true
+  }, /*#__PURE__*/React.createElement(motion.div, {
+    key: currentPage,
+    variants: pageTransitionVariants(animationDirection),
+    initial: enableInitialAnimation ? 'pageEnter' : false,
+    animate: "pageCenter",
+    transition: {
+      duration: ANIMATION_DURATION
+    }
+  }, columns))), showPageButtons && /*#__PURE__*/React.createElement("div", {
+    className: nextButtonClassName,
+    onClick: handleNextClick
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "rioglyph rioglyph-chevron-right"
+  })));
+});
+export default ResponsiveColumnStripe;
+ResponsiveColumnStripe.propTypes = {
+  minColumnWith: PropTypes.number,
+  minColumns: PropTypes.number,
+  maxColumns: PropTypes.number,
+  className: PropTypes.string,
+  buttonClassName: PropTypes.string,
+  columnsWrapperClassName: PropTypes.string,
+  onNextClick: PropTypes.func,
+  onPreviousClick: PropTypes.func,
+  stretchLastItems: PropTypes.bool,
+  asType: PropTypes.string,
+  activePage: PropTypes.number,
+  disableAnimation: PropTypes.bool
+};

package/components/rules/RuleContainer.js

@@ -29,6 +29,10 @@ var RuleContainer = function RuleContainer(props) {
     exitBeforeEnter: true
   }, React.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.createElement(motion.div, {

package/components/rules/RulesWrapper.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["children"];
 import React from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-var RuleWrapper = function RuleWrapper(_ref) {
+var RulesWrapper = function RulesWrapper(_ref) {
   var children = _ref.children,
     remainigProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(motion.div, _extends({
@@ -13,5 +13,5 @@ var RuleWrapper = function RuleWrapper(_ref) {
     layout: "position"
   }, children)));
 };
-RuleWrapper.defaultProps = {};
-export default RuleWrapper;
+RulesWrapper.defaultProps = {};
+export default RulesWrapper;

package/hooks/useDarkMode.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useCallback, useEffect, useState } from 'react';
 import { THEME_DARK, THEME_DATA_ATTRIBUTE } from './../utils/colorScheme';
 import useMutationObserver from './useMutationObserver';
-export var useDarkMode = function useDarkMode(widgetName) {
+var useDarkMode = function useDarkMode() {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isDarkMode = _useState2[0],
@@ -26,4 +26,5 @@ export var useDarkMode = function useDarkMode(widgetName) {
     subtree: false
   });
   return isDarkMode;
-};
+};
+export default useDarkMode;

package/hooks/useMutationObserver.js

@@ -1,12 +1,20 @@
+import _typeof from "@babel/runtime/helpers/typeof";
 import { useRef, useLayoutEffect, useCallback } from 'react';
+var isRef = function isRef(obj) {
+  return obj !== null && _typeof(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 = useRef(null);
   var disconnect = useCallback(function () {
@@ -14,11 +22,12 @@ var useMutationObserver = function useMutationObserver(targetElement, callback)
     return (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.disconnect();
   }, []);
   var observe = useCallback(function () {
+    var targetElement = unRef(target);
     observer.current = new MutationObserver(callback);
     if (targetElement) {
       observer.current.observe(targetElement, options);
     }
-  }, [targetElement]);
+  }, [target]);
   useLayoutEffect(function () {
     observe();
     return function () {

package/hooks/useScrollPosition.js

@@ -19,8 +19,8 @@ var useScrollPosition = function useScrollPosition(target) {
   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();
@@ -29,7 +29,6 @@ var useScrollPosition = function useScrollPosition(target) {
         }
       }, 300);
     } else if (target && checkForModuleContent) {
-      console.log('clearInterval');
       clearInterval(checkForModuleContent);
     }
 
@@ -38,13 +37,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/index.d.ts

@@ -1,36 +1,36 @@
 declare module '@rio-cloud/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/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/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/rio-uikit' {
         TableSettingsDialogProps,
         TableViewTogglesProps,
         TableViewTogglesValues,
-        TagProps,
         TagListProps,
         TagManagerProps,
-        TeaserProps,
+        TagProps,
         TeaserContainerProps,
+        TeaserProps,
         TimePickerProps,
         ToggleButtonProps,
         ToolTipProps,
@@ -158,6 +158,8 @@ declare module '@rio-cloud/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/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> {}

package/index.js

@@ -135,6 +135,8 @@ import { default as _CustomState } from './components/states/CustomState';
 export { _CustomState as CustomState };
 import { default as _TimePicker } from './components/timepicker/TimePicker';
 export { _TimePicker as TimePicker };
+import { default as _ResponsiveColumnStripe } from './components/responsiveColumnStripe/ResponsiveColumnStripe';
+export { _ResponsiveColumnStripe as ResponsiveColumnStripe };
 import { SortArrowUp as _SortArrowUp, SortArrowDown as _SortArrowDown, SortArrows as _SortArrows } from './components/table/SortArrows';
 export { _SortArrowUp as SortArrowUp, _SortArrowDown as SortArrowDown, _SortArrows as SortArrows };
 import { SortDirection as _SortDirection, sortByProperty as _sortByProperty, naturalSortByProperty as _naturalSortByProperty } from './utils/SortUtils';
@@ -154,6 +156,8 @@ export { default as useClickOutside } from './hooks/useClickOutside';
 export { default as useClipboard } from './hooks/useClipboard';
 export { default as useElementSize } from './hooks/useElementSize';
 export { default as useScrollPosition } from './hooks/useScrollPosition';
+export { default as useDarkMode } from './hooks/useDarkMode';
+export { default as useMutationObserver } from './hooks/useMutationObserver';
 import { hasTouch as _hasTouch, inIframe as _inIframe, isDesktop as _isDesktop } from './utils/deviceUtils';
 export { _hasTouch as hasTouch, _inIframe as inIframe, _isDesktop as isDesktop };
 import { getColorScheme as _getColorScheme, setColorScheme as _setColorScheme } from './utils/colorScheme';

package/lib/es/AspectRatioPlaceholder.d.ts

@@ -0,0 +1,5 @@
+declare module '@rio-cloud/rio-uikit/lib/es/AspectRatioPlaceholder' {
+    import React from 'react';
+    import { AspectRatioPlaceholderProps } from './types';
+    export default class AspectRatioPlaceholder extends React.Component<AspectRatioPlaceholderProps> {}
+}

package/lib/es/AspectRatioPlaceholder.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _AspectRatioPlaceholder2["default"];
+  }
+});
+var _AspectRatioPlaceholder2 = _interopRequireDefault(require("./components/aspectRatioPlaceholder/AspectRatioPlaceholder"));