@rio-cloud/rio-uikit 0.16.1-beta-6 → 0.16.1-beta-9

package/lib/components/assetTree/TypeCounter.js

@@ -7,24 +7,63 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var TypeCounter = function TypeCounter(_ref) {
-  var icon = _ref.icon,
-      value = _ref.value;
-  return value ? /*#__PURE__*/_react.default.createElement("div", {
-    className: 'user-select-none margin-right-15'
-  }, /*#__PURE__*/_react.default.createElement("span", {
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["icon", "value", "isActive", "hasFilter", "enableActivity", "onClick", "type", "hideOnZero"];
+
+var TypeCounter = function TypeCounter(props) {
+  var icon = props.icon,
+      value = props.value,
+      isActive = props.isActive,
+      hasFilter = props.hasFilter,
+      enableActivity = props.enableActivity,
+      onClick = props.onClick,
+      type = props.type,
+      hideOnZero = props.hideOnZero,
+      remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var wrapperClassName = (0, _classnames.default)('TypeCounter', 'user-select-none margin-right-15', enableActivity ? 'cursor-pointer' : 'pointer-events-none', enableActivity && hasFilter && !isActive && 'opacity-50');
+  var counterClassNames = (0, _classnames.default)('TreeLabelCount', 'margin-left-3', 'label label-condensed', isActive ? 'label-primary' : 'label-muted label-filled');
+
+  var handleClick = function handleClick() {
+    return onClick(type);
+  };
+
+  if (hideOnZero && !value) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, remainingProps, {
+    className: wrapperClassName,
+    onClick: handleClick
+  }), /*#__PURE__*/_react.default.createElement("span", {
     className: "rioglyph rioglyph-".concat(icon, " text-size-16")
   }), /*#__PURE__*/_react.default.createElement("span", {
-    className: 'TreeLabelCount margin-left-3 label label-muted label-filled label-condensed'
-  }, value)) : null;
+    className: counterClassNames
+  }, value || 0));
 };
 
+TypeCounter.defaultProps = {
+  hideOnZero: false
+};
 TypeCounter.propTypes = {
+  type: _propTypes.default.string,
   icon: _propTypes.default.string,
+  // Highlights the current active filter
+  isActive: _propTypes.default.bool,
+  // Defined if there is a filter
+  hasFilter: _propTypes.default.bool,
+  // Allow the counter to be clickable
+  enableActivity: _propTypes.default.bool,
+  hideOnZero: _propTypes.default.bool,
+  onClick: _propTypes.default.func,
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.number])
 };
 var _default = TypeCounter;

package/lib/components/charts/AreaChart.js

@@ -15,9 +15,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _recharts = require("recharts");
 
+var _chartHelper = require("./chartHelper");
+
 var _AreaGradient = _interopRequireDefault(require("./AreaGradient"));
 
-var _chartHelper = require("./chartHelper");
+var _ChartTooltip = _interopRequireDefault(require("./ChartTooltip"));
 
 var _excluded = ["width", "height", "data", "dataUnit", "dataKey", "gradients", "areas", "xAxisOptions", "yAxisOptions", "gridOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"],
     _excluded2 = ["strokeColor"];
@@ -81,7 +83,7 @@ var AreaChart = function AreaChart(props) {
   }, xAxisOptions)), /*#__PURE__*/_react.default.createElement(_recharts.YAxis, (0, _extends2.default)({
     hide: !showYAxis,
     unit: dataUnit
-  }, yAxisOptions)), tooltip && /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null), legend && /*#__PURE__*/_react.default.createElement(_recharts.Legend, (0, _extends2.default)({
+  }, yAxisOptions)), tooltip && /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, tooltip.props), legend && /*#__PURE__*/_react.default.createElement(_recharts.Legend, (0, _extends2.default)({
     wrapperStyle: legend.props.verticalAlign === 'bottom' ? {
       bottom: 0
     } : legend.props.wrapperStyle
@@ -108,7 +110,7 @@ AreaChart.defaultProps = {
   showGrid: false,
   // legend,
   brush: false,
-  tooltip: true
+  tooltip: /*#__PURE__*/_react.default.createElement(_ChartTooltip.default, null)
 };
 var _default = AreaChart;
 exports.default = _default;

package/lib/components/charts/BarChart.js

@@ -19,6 +19,8 @@ var _recharts = require("recharts");
 
 var _chartHelper = require("./chartHelper");
 
+var _ChartTooltip = _interopRequireDefault(require("./ChartTooltip"));
+
 var _excluded = ["width", "height", "data", "dataUnit", "dataKey", "layout", "legend", "bars", "xAxisOptions", "yAxisOptions", "gridOptions", "showGrid", "showXAxis", "showYAxis", "useDataColors", "brush", "tooltip"],
     _excluded2 = ["dataUnit", "color"];
 
@@ -66,11 +68,11 @@ var BarChart = function BarChart(props) {
         color: legendColor
       });
     })
-  }, legend.props)), tooltip && /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
+  }, legend.props)), tooltip && /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, (0, _extends2.default)({
     cursor: {
       fill: _chartHelper.CURSOR_BACKGROUND_COLOR
     }
-  }), bars.map(function (bar) {
+  }, tooltip.props)), bars.map(function (bar) {
     var _bar$props = bar.props,
         dataUnit = _bar$props.dataUnit,
         color = _bar$props.color,
@@ -110,7 +112,7 @@ BarChart.defaultProps = {
   showYAxis: true,
   useDataColors: false,
   brush: false,
-  tooltip: true,
+  tooltip: /*#__PURE__*/_react.default.createElement(_ChartTooltip.default, null),
   legend: false
 };
 var _default = BarChart;

package/lib/components/charts/ChartTooltip.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var ChartTooltip = function ChartTooltip() {
+  return null;
+};
+
+ChartTooltip.defaultProps = {};
+var _default = ChartTooltip;
+exports.default = _default;

package/lib/components/charts/LineChart.js

@@ -17,6 +17,8 @@ var _recharts = require("recharts");
 
 var _chartHelper = require("./chartHelper");
 
+var _ChartTooltip = _interopRequireDefault(require("./ChartTooltip"));
+
 var _excluded = ["width", "height", "data", "dataUnit", "dataKey", "lines", "xAxisOptions", "yAxisOptions", "gridOptions", "showXAxis", "showYAxis", "showGrid", "legend", "tooltip", "brush"],
     _excluded2 = ["strokeColor"];
 
@@ -58,7 +60,7 @@ var LineChart = function LineChart(props) {
   }, xAxisOptions)), /*#__PURE__*/_react.default.createElement(_recharts.YAxis, (0, _extends2.default)({
     hide: !showYAxis,
     unit: dataUnit
-  }, yAxisOptions)), tooltip && /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null), legend && /*#__PURE__*/_react.default.createElement(_recharts.Legend, (0, _extends2.default)({
+  }, yAxisOptions)), tooltip && /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, tooltip.props), legend && /*#__PURE__*/_react.default.createElement(_recharts.Legend, (0, _extends2.default)({
     wrapperStyle: legend.props.verticalAlign === 'bottom' ? {
       bottom: 0
     } : legend.props.wrapperStyle
@@ -89,7 +91,7 @@ LineChart.defaultProps = {
   showYAxis: false,
   showGrid: false,
   brush: false,
-  tooltip: true // legend,
+  tooltip: /*#__PURE__*/_react.default.createElement(_ChartTooltip.default, null) // legend,
 
 };
 var _default = LineChart;

package/lib/components/charts/PieChart.js

@@ -21,6 +21,8 @@ var _chartHelper = require("./chartHelper");
 
 var _Legend = _interopRequireDefault(require("./Legend"));
 
+var _ChartTooltip = _interopRequireDefault(require("./ChartTooltip"));
+
 var _excluded = ["width", "height", "innerRadius", "outerRadius", "data", "dataKey", "dataUnit", "nameKey", "color", "filled", "labels", "innerLabels", "paddingAngle", "legend", "tooltip", "pieOptions"];
 var RADIAN = Math.PI / 180;
 
@@ -96,11 +98,11 @@ var PieChart = function PieChart(props) {
       key: "cell-".concat(index),
       fill: (0, _isFunction.default)(color) ? (0, _chartHelper.getColor)(color(entry, index)) : cellColor
     });
-  })), tooltip && /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
+  })), tooltip && /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, (0, _extends2.default)({
     formatter: function formatter(value) {
       return "".concat(value, " ").concat(dataUnit);
     }
-  })));
+  }, tooltip.props))));
 };
 
 PieChart.defaultProps = {
@@ -119,7 +121,7 @@ PieChart.defaultProps = {
   paddingAngle: 3,
   // pieOptions,
   legend: /*#__PURE__*/_react.default.createElement(_Legend.default, null),
-  tooltip: true
+  tooltip: /*#__PURE__*/_react.default.createElement(_ChartTooltip.default, null)
 };
 var _default = PieChart;
 exports.default = _default;

package/lib/components/charts/RadialBarChart.js

@@ -17,10 +17,10 @@ var _recharts = require("recharts");
 
 var _isFunction = _interopRequireDefault(require("lodash/fp/isFunction"));
 
-var _Legend = _interopRequireDefault(require("./Legend"));
-
 var _chartHelper = require("./chartHelper");
 
+var _Legend = _interopRequireDefault(require("./Legend"));
+
 var _excluded = ["width", "height", "data", "dataKey", "startAngle", "endAngle", "innerRadius", "outerRadius", "clockWise", "legend", "textOptions", "radialBarOptions", "showBarLabel", "cornerRadius", "background", "range", "tooltip"],
     _excluded2 = ["text", "size", "weight", "color"];
 
@@ -103,11 +103,11 @@ var RadialBarChart = function RadialBarChart(props) {
         className: "text-color-darker"
       }, value);
     }
-  }, legend.props)), tooltip && /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
+  }, legend.props)), tooltip && /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, (0, _extends2.default)({
     cursor: {
       fill: _chartHelper.CURSOR_BACKGROUND_COLOR
     }
-  })));
+  }, tooltip.props))));
 };
 
 RadialBarChart.defaultProps = {

package/lib/components/navigation/AppNavigationBar.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AppNavigationBar = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _noop = _interopRequireDefault(require("lodash/fp/noop"));
+
+var _excluded = ["className", "title", "right", "onNavigateBack"];
+
+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 AppNavigationBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var className = props.className,
+      title = props.title,
+      right = props.right,
+      onNavigateBack = props.onNavigateBack,
+      remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var navigationClasses = (0, _classnames.default)('AppNavigationBar', 'width-100pct display-flex align-items-center justify-content-between height-45 user-select-none padding-x-10', className);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: ref
+  }, remainingProps, {
+    className: navigationClasses
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "display-flex align-items-center"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "width-30 text-size-20 text-color-darkest"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "rioglyph rioglyph-arrow-left",
+    onClick: onNavigateBack
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-medium text-color-darker"
+  }, title)), /*#__PURE__*/_react.default.createElement("div", null, right));
+});
+exports.AppNavigationBar = AppNavigationBar;
+AppNavigationBar.defaultProps = {
+  onNavigateBack: _noop.default,
+  right: /*#__PURE__*/_react.default.createElement("span", null)
+};
+AppNavigationBar.propTypes = {
+  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  right: _propTypes.default.node,
+  onNavigateBack: _propTypes.default.func,
+  className: _propTypes.default.string
+};
+var _default = AppNavigationBar;
+exports.default = _default;

package/lib/components/sidebars/Sidebar.js

@@ -25,16 +25,14 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Resizer = _interopRequireDefault(require("../resizer/Resizer"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _throttle = _interopRequireDefault(require("lodash/fp/throttle"));
 
 var _head = _interopRequireDefault(require("lodash/fp/head"));
 
-var _framerMotion = require("framer-motion");
-
-var _Resizer = _interopRequireDefault(require("../resizer/Resizer"));
-
 var _addEventListener = _interopRequireDefault(require("../../utils/addEventListener"));
 
 var _ownerDocument = _interopRequireDefault(require("../../utils/ownerDocument"));
@@ -274,8 +272,7 @@ var Sidebar = /*#__PURE__*/function (_Component) {
           enableNavigationButtons = _this$props5.enableNavigationButtons,
           disableClose = _this$props5.disableClose,
           bodyRef = _this$props5.bodyRef,
-          headerButtons = _this$props5.headerButtons,
-          fly = _this$props5.fly;
+          headerButtons = _this$props5.headerButtons;
       var _this$state2 = this.state,
           width = _this$state2.width,
           isFullscreen = _this$state2.isFullscreen,
@@ -296,57 +293,10 @@ var Sidebar = /*#__PURE__*/function (_Component) {
       } : {
         left: resizeIndicatorPosition
       };
-      var offscreenPos = isRight ? 1000 : -1000;
-      var pos = isRight ? width : width; // const initial = { opacity: 0 };
-      // if (isRight) {
-      //     initial.x = -1000;
-      // } else {
-      //     initial.x = -1000;
-      // }
-      // const contentAnimate = {};
-      // if (closed) {
-      //     if (isRight) {
-      //         // contentAnimate.x = 10000;
-      //         // contentAnimate.left = 0;
-      //     } else {
-      //         // contentAnimate.x = -1000;
-      //         contentAnimate.right = 0;
-      //     }
-      // } else {
-      //     if (isRight) {
-      //         contentAnimate.x = 0;
-      //     } else {
-      //         contentAnimate.x = 0;
-      //     }
-      //     contentAnimate.opacity = 1;
-      // }
-
-      var contentStyle = {
-        width: width,
-        top: 0,
-        position: 'absolute'
-      };
-
-      if (isRight) {
-        contentStyle.left = 0;
-      } else {
-        contentStyle.right = 0;
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
-        initial: {
-          width: closed ? 0 : width
-        },
-        animate: {
-          width: closed ? 0 : width
-        },
-        transition: {
-          duration: 2.2,
-          ease: 'easeInOut'
-        },
+      return /*#__PURE__*/_react.default.createElement("div", {
         className: classes,
         style: {
-          overflow: closed ? 'hidden' : 'auto'
+          width: width
         },
         ref: function ref(node) {
           return _this2.sidebarRef = node;
@@ -354,38 +304,36 @@ var Sidebar = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: resizeLimitClasses,
         style: resizeLimitStyle
-      }), /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
-        // animate={contentAnimate}
-        style: contentStyle,
-        className: "SidebarContent"
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: 'SidebarContent'
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: headerClassNames
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: titleClassNames
       }, title ? title : ''), /*#__PURE__*/_react.default.createElement("div", {
-        className: "SidebarButtons non-printable close"
+        className: 'SidebarButtons non-printable close'
       }, headerButtons, enableNavigationButtons && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
-        className: "btn btn-muted btn-icon-only",
+        className: 'btn btn-muted btn-icon-only',
         onClick: this.handlePrevContent
       }, /*#__PURE__*/_react.default.createElement("span", {
-        className: " rioglyph rioglyph-chevron-left"
+        className: ' rioglyph rioglyph-chevron-left'
       })), /*#__PURE__*/_react.default.createElement("button", {
-        className: "btn btn-muted btn-icon-only",
+        className: 'btn btn-muted btn-icon-only',
         onClick: this.handleNextContent
       }, /*#__PURE__*/_react.default.createElement("span", {
-        className: " rioglyph rioglyph-chevron-right"
+        className: ' rioglyph rioglyph-chevron-right'
       }))), enableFullscreenToggle && /*#__PURE__*/_react.default.createElement("button", {
-        className: "btn btn-muted btn-icon-only",
+        className: 'btn btn-muted btn-icon-only',
         onClick: this.handleFullscreenChange
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: fullscreenIconClasses
       })), !disableClose && (headerButtons || enableNavigationButtons || enableFullscreenToggle) && /*#__PURE__*/_react.default.createElement("div", {
-        className: "SidebarButtons-spacer"
+        className: 'SidebarButtons-spacer'
       }), !disableClose && /*#__PURE__*/_react.default.createElement("button", {
-        className: "btn btn-muted btn-icon-only",
+        className: 'btn btn-muted btn-icon-only',
         onClick: onClose
       }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "rioglyph rioglyph-remove"
+        className: 'rioglyph rioglyph-remove'
       })))), /*#__PURE__*/_react.default.createElement("div", {
         className: bodyClassNames,
         ref: bodyRef

package/lib/es/AppNavigationBar.d.ts

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

package/lib/es/AppNavigationBar.js

@@ -0,0 +1,15 @@
+"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 _AppNavigationBar2.default;
+  }
+});
+
+var _AppNavigationBar2 = _interopRequireDefault(require("../components/navigation/AppNavigationBar"));

package/lib/es/ChartTooltip.d.ts

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

package/lib/es/ChartTooltip.js

@@ -0,0 +1,15 @@
+"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 _ChartTooltip2.default;
+  }
+});
+
+var _ChartTooltip2 = _interopRequireDefault(require("../components/charts/ChartTooltip"));

package/lib/es/DeviceUtils.d.ts

@@ -2,6 +2,12 @@ declare module '@rio-cloud/rio-uikit/lib/es/DeviceUtils' {
     export function hasTouch(): boolean;
     export function isDesktop(): boolean;
     export function isMobile(): boolean;
+    export function isMobileScreen(): boolean;
     export function inIframe(): boolean;
     export function toggleZoomOnMobile(): boolean;
+    export type MOBILE_SCREEN = number;
+    export type SCREEN_SM = number;
+    export type SCREEN_MD = number;
+    export type SCREEN_LG = number;
+    export type SCREEN_XL = number;
 }

package/lib/es/SubNavigation.d.ts

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

package/lib/es/SubNavigation.js

@@ -0,0 +1,15 @@
+"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 _SubNavigation2.default;
+  }
+});
+
+var _SubNavigation2 = _interopRequireDefault(require("../components/applicationLayout/SubNavigation"));

package/lib/es/deviceUtils.js

@@ -3,6 +3,36 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "MOBILE_SCREEN", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.MOBILE_SCREEN;
+  }
+});
+Object.defineProperty(exports, "SCREEN_LG", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.SCREEN_LG;
+  }
+});
+Object.defineProperty(exports, "SCREEN_MD", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.SCREEN_MD;
+  }
+});
+Object.defineProperty(exports, "SCREEN_SM", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.SCREEN_SM;
+  }
+});
+Object.defineProperty(exports, "SCREEN_XL", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.SCREEN_XL;
+  }
+});
 Object.defineProperty(exports, "hasTouch", {
   enumerable: true,
   get: function get() {
@@ -27,6 +57,12 @@ Object.defineProperty(exports, "isMobile", {
     return _deviceUtils.isMobile;
   }
 });
+Object.defineProperty(exports, "isMobileScreen", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.isMobileScreen;
+  }
+});
 Object.defineProperty(exports, "toggleZoomOnMobile", {
   enumerable: true,
   get: function get() {

package/lib/es/useResizeObserver.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/lib/es/useResizeObserver' {
+    import { UseResizeObserver } from '../types';
+    export default UseResizeObserver;
+}

package/lib/es/useResizeObserver.js

@@ -0,0 +1,15 @@
+"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 _useResizeObserver2.default;
+  }
+});
+
+var _useResizeObserver2 = _interopRequireDefault(require("../hooks/useResizeObserver"));

package/lib/hooks/useClickOutside.js

@@ -7,6 +7,7 @@ exports.default = useClickOutside;
 
 var _react = require("react");
 
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
 // eslint-disable-next-line max-len
 // Inspired from https://github.com/mantinedev/mantine/blob/master/src/mantine-hooks/src/use-click-outside/use-click-outside.ts
 function useClickOutside(callback) {
@@ -15,7 +16,7 @@ function useClickOutside(callback) {
   (0, _react.useEffect)(function () {
     var listener = function listener(event) {
       if (targetRef.current && !targetRef.current.contains(event.target)) {
-        callback();
+        callback(event);
       }
     };