@rio-cloud/rio-uikit 0.16.1-beta-3 → 0.16.1-beta-7

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/selects/BaseDropdownMenu.js

@@ -79,7 +79,7 @@ var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
       pullRight: props.pullRight,
       focusedItemIndex: _this.props.focusedItemIndex,
       keyboardUsed: _this.props.keyboardUsed,
-      itemDOMValues: null
+      itemDOMValues: []
     };
     _this.handleOptionChange = _this.handleOptionChange.bind((0, _assertThisInitialized2.default)(_this));
     _this.handleKeydown = _this.handleKeydown.bind((0, _assertThisInitialized2.default)(_this));
@@ -113,24 +113,29 @@ var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
         }
 
         if (!(0, _isEqual.default)(nextProps.options, this.props.options)) {
-          // Only update the DOM values if it is explicitly requested
-          // otherwise it will reduce the dom values to the filtered options
-          var updatedItemDOMValues;
-
-          if (nextProps.requestItemDOMValues) {
-            updatedItemDOMValues = this.setItemDOMValues();
-          }
-
           this.setState(function () {
             return {
-              options: nextProps.options,
-              itemDOMValues: updatedItemDOMValues ? updatedItemDOMValues : _this2.state.itemDOMValues
+              options: nextProps.options
             };
-          });
-
-          if (nextProps.requestItemDOMValues) {
-            this.props.updateDOMValues(updatedItemDOMValues);
-          }
+          }); // Workaround to put the update of DOM values into a setTimeout to have the component
+          // re-rendered to fetch the DOM items.
+          // This should be refactored when reworking the component as functional component
+
+          setTimeout(function () {
+            // Only update the DOM values if it is explicitly requested
+            // otherwise it will reduce the dom values to the filtered options
+            if (nextProps.requestItemDOMValues) {
+              var items = _this2.setItemDOMValues();
+
+              _this2.props.updateDOMValues(items);
+
+              _this2.setState(function () {
+                return {
+                  itemDOMValues: items ? items : _this2.state.itemDOMValues
+                };
+              });
+            }
+          }, 0);
         }
       }
     }
@@ -273,10 +278,10 @@ var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
           return /*#__PURE__*/_react.default.createElement("ul", {
             className: dropdownMenuClasses
           }, /*#__PURE__*/_react.default.createElement("li", {
-            className: 'no-item-message disabled',
+            className: "no-item-message disabled",
             disabled: true
           }, /*#__PURE__*/_react.default.createElement("a", {
-            role: 'button'
+            role: "button"
           }, /*#__PURE__*/_react.default.createElement("i", null, noItemMessage))));
         }
 
@@ -301,7 +306,7 @@ var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
           id: option.id,
           icon: option.icon,
           label: option.label,
-          type: 'dropdown'
+          type: "dropdown"
         });
       } // Show focused style only when keyboard is in use
 
@@ -312,15 +317,15 @@ var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
         key: option.id,
         className: classNames
       }, /*#__PURE__*/_react.default.createElement("a", {
-        role: 'button',
+        role: "button",
         className: anchorClassNames,
         "data-item-id": option.id,
         "data-item-index": index,
         onClick: !option.disabled ? this.handleOptionChange : undefined
       }, /*#__PURE__*/_react.default.createElement("span", null, option.icon && /*#__PURE__*/_react.default.createElement("span", {
-        className: 'margin-right-5'
+        className: "margin-right-5"
       }, option.icon), option.label), /*#__PURE__*/_react.default.createElement("input", {
-        type: 'hidden',
+        type: "hidden",
         value: option.id
       })));
     }
@@ -416,5 +421,6 @@ BaseDropdownMenu.propTypes = {
   autoDropDirection: _propTypes.default.bool,
   noItemMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   focusedItemIndex: _propTypes.default.number.isRequired,
-  dropdownClassName: _propTypes.default.string
+  dropdownClassName: _propTypes.default.string,
+  requestItemDOMValues: _propTypes.default.bool
 };

package/lib/components/selects/Select.js

@@ -71,7 +71,8 @@ var Select = /*#__PURE__*/function (_Component) {
       filteredOptions: props.options,
       itemDOMValues: [],
       focusedItemIndex: DEFAULT_FOCUSED_ITEM_INDEX,
-      keyboardUsed: false
+      keyboardUsed: false,
+      requestItemDOMValues: false
     };
     _this.onToggle = _this.onToggle.bind((0, _assertThisInitialized2.default)(_this));
     _this.handleClickOutside = _this.handleClickOutside.bind((0, _assertThisInitialized2.default)(_this));
@@ -125,7 +126,8 @@ var Select = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "updateDOMValues",
-    value: function updateDOMValues(itemDOMValues) {
+    value: function updateDOMValues() {
+      var itemDOMValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       this.setState(function () {
         return {
           itemDOMValues: itemDOMValues,
@@ -294,7 +296,8 @@ var Select = /*#__PURE__*/function (_Component) {
         noItemMessage: noItemMessage,
         autoDropDirection: autoDropDirection,
         pullRight: pullRight,
-        dropdownClassName: dropdownClassName
+        dropdownClassName: dropdownClassName,
+        requestItemDOMValues: this.state.requestItemDOMValues
       });
     }
   }, {
@@ -311,10 +314,13 @@ var Select = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "filterOptions",
-    value: function filterOptions(itemDOMValues, filterValue, options) {
+    value: function filterOptions() {
+      var itemDOMValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      var filterValue = arguments.length > 1 ? arguments[1] : undefined;
+      var options = arguments.length > 2 ? arguments[2] : undefined;
       var filteredDOMValues = itemDOMValues.filter(function (item) {
         return item.text.toLowerCase().includes(filterValue.toLowerCase());
-      }); // Filter the options accodring to the filtered DOM values and map the IDs since the filter cannot be done
+      }); // Filter the options according to the filtered DOM values and map the IDs since the filter cannot be done
       // on the options itself as they might contain arbitrary components
 
       return options.filter(function (option) {

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/DeviceUtils.d.ts

@@ -2,6 +2,8 @@ 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; 
 }

package/lib/es/deviceUtils.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "MOBILE_SCREEN", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.MOBILE_SCREEN;
+  }
+});
 Object.defineProperty(exports, "hasTouch", {
   enumerable: true,
   get: function get() {
@@ -27,6 +33,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/useResizeObserver.js

@@ -0,0 +1,54 @@
+"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");
+
+// inspired from https://tobbelindstrom.com/blog/resize-observer-hook/
+var useResizeObserver = function useResizeObserver() {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      observerEntry = _useState2[0],
+      setObserverEntry = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      node = _useState4[0],
+      setNode = _useState4[1];
+
+  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 () {
+    observer.current = new ResizeObserver(function (_ref) {
+      var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+          entry = _ref2[0];
+
+      return setObserverEntry(entry);
+    });
+
+    if (node) {
+      observer.current.observe(node);
+    }
+  }, [node]);
+  (0, _react.useLayoutEffect)(function () {
+    observe();
+    return function () {
+      return disconnect();
+    };
+  }, [disconnect, observe]);
+  return [setNode, observerEntry];
+};
+
+var _default = useResizeObserver;
+exports.default = _default;

package/lib/hooks/useWindowResize.js

@@ -5,19 +5,22 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = useWindowResize;
+exports.default = void 0;
 
 var _react = require("react");
 
 var _throttle = _interopRequireDefault(require("lodash/fp/throttle"));
 
-function useWindowResize(onResizeCallback) {
+var useWindowResize = function useWindowResize(onResizeCallback) {
   var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
   (0, _react.useEffect)(function () {
     var throttledCallback = (0, _throttle.default)(timeout, onResizeCallback);
-    window.addEventListener('resize', throttledCallback, false);
+    window.addEventListener('resize', throttledCallback);
     return function () {
-      return window.removeEventListener('resize', throttledCallback, true);
+      window.removeEventListener('resize', throttledCallback);
     };
   }, [onResizeCallback, timeout]);
-}
+};
+
+var _default = useWindowResize;
+exports.default = _default;

package/lib/style/css/_exports/rio-website.less

@@ -191,7 +191,7 @@ body .module-content {
 
 .ApplicationHeader {
   .navbar-brand {
-    background-image: url('@{cdnBase}/svg/common/ico_rio.svg') !important;
+    //background-image: url('@{cdnBase}/svg/common/ico_rio.svg') !important;
     background-size: cover;
   }
 
@@ -554,6 +554,29 @@ body .module-content {
             }
           }
 
+          &.btn-default {
+            .btn {
+              .button-variant(
+                ~'!important';
+                @btn-default-bg;
+                @btn-default-border;
+                @btn-default-color;
+                @btn-default-color;
+                @btn-default-color;
+                @btn-default-color;
+                darken(@btn-default-color, 17%);
+                darken(@btn-default-border, 12%);
+                darken(@btn-default-border, 12%);
+                darken(@btn-default-border, 25%);
+                darken(@btn-default-border, 25%);
+                @btn-default-bg;
+                @btn-default-bg;
+                @btn-default-bg;
+                @btn-default-bg;
+              );
+            }
+          }
+
           &.btn-white {
             .btn {
               .button-variant(
@@ -671,6 +694,24 @@ body .module-content {
             }
           }
 
+          &.list-style-position-inside {
+            ul, ol {
+              list-style-position: inside !important;
+            }
+          }
+
+          &.large-panel-border {
+            > .section-content-container.panel {
+              border-width: 3px;
+            }
+
+            &.panel-border-color-lighter {
+              > .section-content-container.panel {
+                border-color: @gray-lighter;
+              }
+            }
+          }
+
           // Section Wrapper Inner Container
           .section-content-container {
             height: 100%;
@@ -1526,6 +1567,26 @@ body .module-content {
           }
         }
       }
+
+      &-always {
+        .section-layout {
+          padding-left: 0;
+          padding-right: 0;
+
+          .section-layout-container {
+            max-width: none;
+            padding-left: 0;
+            padding-right: 0;
+
+            .section-layout-container-row {
+              .section-content-container-col {
+                padding-left: 0;
+                padding-right: 0;
+              }
+            }
+          }
+        }
+      }
     }
 
     &-marketplace-details-panel {
@@ -1594,6 +1655,14 @@ body .module-content {
       }
     }
 
+    &-hide-background-on-mobile {
+      @media (max-width: @screen-ls) {
+        .section-wrapper-background-image {
+          display: none;
+        }
+      }
+    }
+
     &-overlay-light {
       .section-wrapper-background-image,
       .section-content-container-background-image {
@@ -1834,12 +1903,6 @@ blockquote {
     .anchor {
       margin-top: -50px;
     }
-
-    // .preset-rimless {
-    //   > .anchor {
-    //     margin-top: -50px;
-    //   }
-    // }
   }
 
   .ApplicationLayoutBody {

package/lib/style/css/animations/_imports.less

@@ -1,6 +1,7 @@
 @import (less) "collapse.less";
 @import (less) "fade.less";
 @import (less) "pinging.less";
+@import (less) "pulsing.less";
 @import (less) "rotate.less";
 @import (less) "scale.less";
 @import (less) "slide.less";

package/lib/style/css/animations/pulsing.less

@@ -0,0 +1,5 @@
+@keyframes pulsing {
+  50% {
+   opacity:.5
+  }
+ }

package/lib/style/css/components/ApplicationLayout.less

@@ -59,7 +59,7 @@
         border-bottom: 1px solid @gray-light;
         display: flex;
         justify-content: space-between;
-        padding: 0 @ApplicationLayoutBodyPadding*0.25 0 @ApplicationLayoutBodyPadding*0.5;
+        // padding: 0 @ApplicationLayoutBodyPadding*0.25 0 @ApplicationLayoutBodyPadding*0.5;
       }
 
       &:not(.header-has-no-application-menu) {
@@ -69,6 +69,8 @@
       }
 
       .nav-pills {
+        padding-left: @ApplicationLayoutBodyPadding*0.5;
+
         &:not(.nav-stacked) {
           box-shadow: none;
 

package/lib/style/css/components/AssetTree.less

@@ -42,7 +42,7 @@
 
   &.closed {
     box-shadow: none !important;
-    width: 50px !important;
+    width: 50px;
 
     .TreeSidebarToggle {
       transform: rotate(180deg);
@@ -237,10 +237,6 @@
 
   .TreeHead {
     min-height: 50px;
-
-    .TreeSelectAll {
-      margin-right: 5px;
-    }
   }
 
   &Options {

package/lib/style/css/design/buttons.less

@@ -318,9 +318,12 @@
 
     &:before {
       .rioglyph;
+      animation-name: spinning;
+      animation-duration: 1s;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
       content: "\e9c7";
       color: @brand-primary;
-      animation: spinning 1s linear infinite;
       font-size: 20px;
     }
 

package/lib/style/css/design/rioglyph.less

@@ -1,16 +1,5 @@
 @import (less) '../../fonts/rioglyph/rioglyph.less';
 
-@keyframes spinning {
-  from { transform: rotate(0deg) }
-  to   { transform: rotate(359deg) }
-}
-
-@keyframes pulse {
-  50% {
-   opacity:.5
-  }
- }
-
 .rioglyph {
   &.spinning:before {
     display: inline-block;
@@ -19,6 +8,6 @@
 
   &.pulsing:before {
     display: inline-block;
-    animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
+    animation: pulsing 2s cubic-bezier(.4,0,.6,1) infinite;
   }
 }

package/lib/types.ts

@@ -57,6 +57,14 @@ export interface AnimatedNumberProps {
     className?: string;
 }
 
+export interface AppNavigationBarProps {
+    ref?: React.MutableRefObject<object>;
+    title?: string | React.ReactNode;
+    right?: React.ReactNode;
+    onNavigateBack?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+}
+
 export interface ApplicationHeaderProps {
     label?: React.ReactNode;
     homeRoute?: React.ReactNode;
@@ -73,6 +81,7 @@ export interface ApplicationHeaderProps {
 
 export interface ApplicationLayoutProps {
     className?: string;
+    layoutRef: React.MutableRefObject<object>;
 }
 
 export interface ApplicationLayoutHeaderProps {
@@ -498,6 +507,7 @@ export interface DatePickerProps extends DatetimepickerProps {
     alignRight?: boolean;
     locale?: string;
     closeOnSelect?: boolean;
+    initialValue?: Date | Moment;
     value?: Date | string | Moment;
     dateFormat?: string | boolean;
     timeFormat?: string | boolean;
@@ -2028,7 +2038,12 @@ export interface TreeSummaryProps {
 }
 
 export interface TypeCounterProps {
+    type?: string;
     icon?: string;
+    isActive?: boolean;
+    enableActivity?: boolean;
+    hideOnZero?: boolean;
+    onClick?: (type: string) => void;
     value?: string | React.ReactNode | number;
 }
 
@@ -2116,6 +2131,8 @@ export type UseOnScreen = (
 
 export type UseRenderCount = () => number;
 
+export type UseResizeObserver = () => [React.MutableRefObject<object>, ResizeObserverEntry];
+
 export type UseStateWithValidation = (validationFn: Function, initialValue: any) => [any, Function, boolean];
 
 export type UseLocalStorage = (key: string, defaultValue: any) => [any, Function, Function];

package/lib/utils/deviceUtils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toggleZoomOnMobile = exports.isMobile = exports.isDesktop = exports.inIframe = exports.hasTouch = void 0;
+exports.toggleZoomOnMobile = exports.isMobileScreen = exports.isMobile = exports.isDesktop = exports.inIframe = exports.hasTouch = exports.MOBILE_SCREEN = void 0;
 
 // As "cssuseragent" is accessing the html dom object directly without checking whether it exists or not, we need to
 // use old shool require() to have a conditional import only when html really exists. This avoids issues when
@@ -34,9 +34,18 @@ var hasTouch = function hasTouch() {
   }
 
   return false;
-};
+}; // Screen sizes
+
 
 exports.hasTouch = hasTouch;
+var MOBILE_SCREEN = 480;
+exports.MOBILE_SCREEN = MOBILE_SCREEN;
+
+var isMobileScreen = function isMobileScreen() {
+  return window.matchMedia("(max-width: ".concat(MOBILE_SCREEN, "px)")).matches;
+};
+
+exports.isMobileScreen = isMobileScreen;
 
 var isMobile = function isMobile() {
   return document && document.documentElement.classList.contains('ua-mobile');

package/lib/version.json

@@ -1,3 +1,3 @@
 {
-"version": "0.16.1-beta-3"
+"version": "0.16.1-beta-7"
 }