@rio-cloud/rio-uikit 0.15.1 → 0.16.0-beta-1

package/lib/components/listMenu/ListMenu.js

@@ -9,8 +9,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -29,6 +33,8 @@ var _ClearableInput = _interopRequireDefault(require("../clearableInput/Clearabl
 
 var _ExpanderPanel = _interopRequireDefault(require("../expander/ExpanderPanel"));
 
+var _excluded = ["menuItems", "focusFilter", "enableFilter", "filterPlaceholder", "notFoundMessage", "className", "groupClassName", "responsive", "autoClose", "filterKey"];
+
 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; }
@@ -42,11 +48,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var RESIZE_THROTTELING = 10;
 var MOBILE_MAX_WIDTH = 580;
 
-var filterMenuItems = function filterMenuItems(items, value) {
+var filterMenuItems = function filterMenuItems(items, value, filterKey) {
   return items.map(function (menuGroupItem) {
     var groupItems = menuGroupItem.navItems;
     var navItems = groupItems.filter(function (item) {
-      return item.key.toLowerCase().includes(value.toLowerCase());
+      var _item$filterKey;
+
+      return (_item$filterKey = item[filterKey]) === null || _item$filterKey === void 0 ? void 0 : _item$filterKey.toLowerCase().includes(value.toLowerCase());
     });
     return _objectSpread(_objectSpread({}, menuGroupItem), {}, {
       navItems: navItems
@@ -65,7 +73,7 @@ var ListMenuHeader = function ListMenuHeader(_ref) {
   }
 
   return /*#__PURE__*/_react.default.createElement("li", {
-    className: 'ListMenuHeader'
+    className: "ListMenuHeader"
   }, groupNavItem ? groupNavItem : /*#__PURE__*/_react.default.createElement("span", {
     className: className
   }, group));
@@ -73,9 +81,12 @@ var ListMenuHeader = function ListMenuHeader(_ref) {
 
 var ListMenuItem = function ListMenuItem(_ref2) {
   var disabled = _ref2.disabled,
+      _ref2$isSubItem = _ref2.isSubItem,
+      isSubItem = _ref2$isSubItem === void 0 ? false : _ref2$isSubItem,
       children = _ref2.children;
+  var classes = (0, _classnames.default)(disabled && 'disabled', isSubItem && 'subitem');
   return /*#__PURE__*/_react.default.createElement("li", {
-    className: disabled ? 'disabled' : ''
+    className: classes
   }, children);
 };
 
@@ -92,7 +103,8 @@ var ListMenuGroup = function ListMenuGroup(_ref3) {
   }, /*#__PURE__*/_react.default.createElement(ListMenuHeader, menuGroup), menuGroup.navItems.map(function (item) {
     return /*#__PURE__*/_react.default.createElement(ListMenuItem, {
       key: item.key,
-      disabled: item.disabled
+      disabled: item.disabled,
+      isSubItem: item.isSubItem
     }, item.item);
   }));
 };
@@ -100,7 +112,7 @@ var ListMenuGroup = function ListMenuGroup(_ref3) {
 var NotFoundMessage = function NotFoundMessage(_ref4) {
   var notFoundMessage = _ref4.notFoundMessage;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: 'padding-top-25 text-center text-color-gray'
+    className: "padding-top-25 text-center text-color-gray"
   }, notFoundMessage);
 };
 
@@ -113,7 +125,9 @@ var ListMenu = function ListMenu(props) {
       className = props.className,
       groupClassName = props.groupClassName,
       responsive = props.responsive,
-      autoClose = props.autoClose;
+      autoClose = props.autoClose,
+      filterKey = props.filterKey,
+      remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
 
   var _useState = (0, _react.useState)(''),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -145,9 +159,9 @@ var ListMenu = function ListMenu(props) {
           activeElement = _listRef$current$getE2[0];
 
       setMobileHeader( /*#__PURE__*/_react.default.createElement("div", {
-        className: 'display-flex align-items-center'
+        className: "display-flex align-items-center"
       }, /*#__PURE__*/_react.default.createElement("span", {
-        className: 'rioglyph rioglyph-menu-hamburger margin-right-10'
+        className: "rioglyph rioglyph-menu-hamburger margin-right-10"
       }), /*#__PURE__*/_react.default.createElement("span", null, activeElement && activeElement.innerText)));
     }
   };
@@ -201,27 +215,27 @@ var ListMenu = function ListMenu(props) {
     });
   };
 
-  var filteredMenuItems = filterMenuItems(menuItems, filterValue);
+  var filteredMenuItems = filterMenuItems(menuItems, filterValue, filterKey);
 
   var handleExpanderBodyClick = function handleExpanderBodyClick(event) {
     var isListItem = event.target.parentElement.tagName.toLowerCase() === 'li';
     autoClose && isListItem && setIsExpanderOpen(false);
   };
 
-  var formClassNames = (0, _classnames.default)('from-group', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0');
+  var formClassNames = (0, _classnames.default)('form-group margin-bottom-5', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0');
 
-  var listMenu = /*#__PURE__*/_react.default.createElement("div", {
+  var listMenu = /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, remainingProps, {
     className: "ListMenu ".concat(className),
     ref: listRef
-  }, enableFilter && /*#__PURE__*/_react.default.createElement("div", {
+  }), enableFilter && /*#__PURE__*/_react.default.createElement("div", {
     className: formClassNames
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'input-group width-100pct'
+    className: "input-group width-100pct"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: 'input-group-addon'
+    className: "input-group-addon"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: 'rioglyph rioglyph-search',
-    "aria-hidden": 'true'
+    className: "rioglyph rioglyph-search",
+    "aria-hidden": "true"
   })), /*#__PURE__*/_react.default.createElement(_ClearableInput.default, {
     value: filterValue,
     inputRef: inputRef,
@@ -232,23 +246,23 @@ var ListMenu = function ListMenu(props) {
     notFoundMessage: notFoundMessage
   }), filteredMenuItems.map(function (menuGroup, index) {
     return /*#__PURE__*/_react.default.createElement(ListMenuGroup, {
+      key: index,
       className: groupClassName,
-      menuGroup: menuGroup,
-      key: index
+      menuGroup: menuGroup
     });
   }));
 
   if (responsive && isMobileMode) {
     return /*#__PURE__*/_react.default.createElement(_ExpanderPanel.default, {
       title: mobileHeader,
-      bsStyle: 'default',
+      bsStyle: "default",
       open: isExpanderOpen,
       onToggle: function onToggle() {
         return setIsExpanderOpen(!isExpanderOpen);
       },
       mountOnEnter: false,
       unmountOnExit: false,
-      className: 'shadow-default'
+      className: "shadow-default"
     }, /*#__PURE__*/_react.default.createElement("div", {
       onClick: handleExpanderBodyClick
     }, listMenu));
@@ -264,7 +278,8 @@ ListMenu.defaultProps = {
   className: '',
   groupClassName: '',
   responsive: true,
-  autoClose: true
+  autoClose: true,
+  filterKey: 'key'
 };
 ListMenu.propTypes = {
   menuItems: _propTypes.default.arrayOf(_propTypes.default.shape({
@@ -274,10 +289,12 @@ ListMenu.propTypes = {
       key: _propTypes.default.string.isRequired,
       item: _propTypes.default.node.isRequired,
       disabled: _propTypes.default.bool
-    })).isRequired
+    })).isRequired,
+    isSubItem: _propTypes.default.bool
   })).isRequired,
   enableFilter: _propTypes.default.bool,
   focusFilter: _propTypes.default.bool,
+  filterKey: _propTypes.default.string,
   filterPlaceholder: _propTypes.default.string,
   notFoundMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   groupClassName: _propTypes.default.string,

package/lib/components/numberInput/NumberInput.js

@@ -45,18 +45,18 @@ var getValueFromProps = function getValueFromProps(val, min, max, fallback) {
   return clampNumber(Number(val), min, max) || fallback;
 };
 
-var clampNumber = function clampNumber(number, min, max) {
-  if (number < min) {
+var clampNumber = function clampNumber(value, min, max) {
+  if (value < min) {
     return min;
-  } else if (number > max) {
+  } else if (value > max) {
     return max;
   }
 
-  return number;
+  return value;
 };
 
-var isFormatted = function isFormatted(number) {
-  return /^(-)?([1-9]\d*)?$/.test(number) || number === '0';
+var isFormatted = function isFormatted(value) {
+  return /^(-)?([1-9]\d*)?$/.test(value) || value === '0';
 };
 
 var convertNonIntegerToDefault = function convertNonIntegerToDefault(value, min) {

package/lib/components/onboarding/OnboardingTip.js

@@ -37,7 +37,7 @@ function OnboardingTip(props) {
       width = props.width,
       preventOverflow = props.preventOverflow,
       popperConfig = props.popperConfig;
-  var tooltipWrapperClasses = (0, _classnames.default)(useInDialog && 'z-index-max', className && className, clickflow && 'onboarding-clickflow' //clickflowBackdrop && 'onboarding-clickflow-backdrop'
+  var tooltipWrapperClasses = (0, _classnames.default)(useInDialog && 'z-index-max', className && className, clickflow && 'onboarding-clickflow' // clickflowBackdrop && 'onboarding-clickflow-backdrop'
   );
 
   var overlay = /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
@@ -49,20 +49,20 @@ function OnboardingTip(props) {
     textAlignment: textAlignment,
     allowOnTouch: true
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'display-flex'
+    className: "display-flex"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'display-flex flex-column flex-1-1'
+    className: "display-flex flex-column flex-1-1"
   }, title && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'tooltip-title'
+    className: "tooltip-title"
   }, title), content && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'tooltip-content'
+    className: "tooltip-content"
   }, content)), showCloseIcon && /*#__PURE__*/_react.default.createElement("span", {
-    className: 'tooltip-close rioglyph rioglyph-remove'
+    className: "tooltip-close rioglyph rioglyph-remove"
   })));
 
   var trigger = /*#__PURE__*/_react.default.createElement(_OverlayTrigger.default, {
     placement: placement,
-    trigger: 'click',
+    trigger: "click",
     overlay: overlay,
     delayShow: DELAY_SHOW,
     delayHide: DELAY_HIDE,
@@ -113,7 +113,7 @@ OnboardingTip.defaultProps = {
   useInDialog: false,
   className: '',
   clickflow: false,
-  //clickflowBackdrop: false,
+  // clickflowBackdrop: false,
   placement: OnboardingTip.BOTTOM,
   width: null,
   preventOverflow: true
@@ -129,7 +129,7 @@ OnboardingTip.propTypes = {
   content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   className: _propTypes.default.string,
   clickflow: _propTypes.default.bool,
-  //clickflowBackdrop: PropTypes.bool,
+  // clickflowBackdrop: PropTypes.bool,
   placement: OnboardingTipPlacementType,
   width: _propTypes.default.oneOf(['auto', 100, 150, 200, 250, 300, 350, 400, 450, 500]),
   preventOverflow: _propTypes.default.bool,

package/lib/components/states/NotBookedState.js

@@ -29,9 +29,9 @@ var NotBookedState = function NotBookedState(props) {
       remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
 
   var combinedMessages = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'text-medium margin-bottom-20'
+    className: "text-medium margin-bottom-20"
   }, message), features && (0, _isArray.default)(features) && !(0, _isEmpty.default)(features) && /*#__PURE__*/_react.default.createElement("ul", {
-    className: 'feature-list'
+    className: "feature-list"
   }, features.map(function (feature, index) {
     return /*#__PURE__*/_react.default.createElement("li", {
       key: index

package/lib/components/table/TableSettingsDialogFooter.js

@@ -34,7 +34,7 @@ var TableSettingsDialogFooter = function TableSettingsDialogFooter(props) {
     className: restButtonClassNames,
     onClick: onResetColumnChanges
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: 'rioglyph rioglyph-revert text-size-small margin-right-10'
+    className: 'rioglyph rioglyph-revert text-size-xs margin-right-10'
   }), resetButtonText), isResetAll && /*#__PURE__*/_react.default.createElement("div", {
     className: 'btn-group'
   }, /*#__PURE__*/_react.default.createElement("div", {

package/lib/components/teaser/Teaser.js

@@ -146,7 +146,7 @@ var Teaser = /*#__PURE__*/function (_Component) {
     key: "renderFooter",
     value: function renderFooter(footer) {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: 'teaser-footer-wrapper'
+        className: "teaser-footer-wrapper"
       }, footer);
     }
   }, {

package/lib/components/teaser/TeaserContainer.js

@@ -16,30 +16,30 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var getCridClasses = function getCridClasses(amount) {
   switch (amount) {
     case 1:
-      return 'col-xs-12';
+      return 'col-12';
 
     case 2:
-      return 'col-xs-12 col-sm-6';
+      return 'col-12 col-sm-6';
 
     case 3:
-      return 'col-xs-12 col-md-4';
+      return 'col-12 col-md-4';
 
     case 4:
-      return 'col-xs-12 col-md-6 col-lg-3';
+      return 'col-12 col-md-6 col-lg-3';
 
     case 6:
-      return 'col-xs-12 col-sm-4 col-lg-2';
+      return 'col-12 col-sm-4 col-lg-2';
 
     case 12:
-      return 'col-xs-12 col-sm-1';
+      return 'col-12 col-sm-1';
 
     default:
-      return 'col-xs-12';
+      return 'col-12';
   }
 };
 
 var TeaserContainer = function TeaserContainer(props) {
-  var rowClassNames = (0, _classnames.default)('teaser-container', 'row', 'flex-sm flex-wrap-sm', props.className && props.className);
+  var rowClassNames = (0, _classnames.default)('teaser-container', 'row', 'display-flex-sm flex-wrap-sm', props.className && props.className);
   var columnClassNames;
 
   if (props.teaserPerRow) {

package/lib/components/tooltip/Tooltip.js

@@ -49,7 +49,7 @@ var Tooltip = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     // react-transition library would throw an error on mobile
     // when triggering a browser reflow and accessing the node directly.
     return /*#__PURE__*/_react.default.createElement("span", {
-      className: 'display-none'
+      className: "display-none"
     });
   }
 
@@ -59,7 +59,7 @@ var Tooltip = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var innerClasses = (0, _classnames.default)('tooltip-inner', textAlignment && "text-".concat(textAlignment), width && "width-".concat(width));
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, remainingProps, {
-    role: 'tooltip' // x-placement is used by the css to define how to position the arrow.
+    role: "tooltip" // x-placement is used by the css to define how to position the arrow.
     ,
     "x-placement": placement,
     ref: ref,
@@ -67,7 +67,7 @@ var Tooltip = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     style: outerStyle,
     "data-offset": 40
   }), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    className: 'tooltip-arrow'
+    className: "tooltip-arrow"
   }, arrowProps)), /*#__PURE__*/_react.default.createElement("div", {
     className: innerClasses
   }, children));
@@ -80,7 +80,7 @@ Tooltip.defaultProps = {
   className: '',
   textAlignment: 'center',
   tooltipStyle: Tooltip.STYLE_DEFAULT,
-  width: null,
+  width: 'auto',
   allowOnTouch: false
 };
 Tooltip.AUTO_START = _OverlayTrigger.default.AUTO_START;

package/lib/es/DeviceUtils.d.ts

@@ -1,5 +1,7 @@
 declare module '@rio-cloud/rio-uikit/lib/es/DeviceUtils' {
     export function hasTouch(): boolean;
-    export function hasTouch(): boolean;
-    export function hasTouch(): boolean;
+    export function isDesktop(): boolean;
+    export function isMobile(): boolean;
+    export function inIframe(): boolean;
+    export function toggleZoomOnMobile(): boolean;
 }

package/lib/es/deviceUtils.js

@@ -21,5 +21,17 @@ Object.defineProperty(exports, "isDesktop", {
     return _deviceUtils.isDesktop;
   }
 });
+Object.defineProperty(exports, "isMobile", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.isMobile;
+  }
+});
+Object.defineProperty(exports, "toggleZoomOnMobile", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.toggleZoomOnMobile;
+  }
+});
 
 var _deviceUtils = require("../utils/deviceUtils");

package/lib/hooks/useClipboard.js

@@ -46,8 +46,8 @@ function useClipboard() {
     if (!(0, _isNil.default)(navigator.clipboard)) {
       navigator.clipboard.writeText(valueToCopy).then(function () {
         return handleCopyResult(true);
-      }).catch(function (err) {
-        return setError(err);
+      }).catch(function (error) {
+        return setError(error);
       });
     } else {
       setError(new Error('useClipboard: navigator.clipboard is not supported'));

package/lib/style/css/_exports/man-uikit.less

@@ -1,8 +1,9 @@
-// RIO Theme // Core
+// Core
 @import (less) 'rio-uikit-core.less';
 
-// RIO Theme // Utility Classes
-.import-utilities(
+// Utility Classes
+@import (less) '../design/responsive/_imports.less';
+.import-reponsive(
   @default: true;
   @xs: true;
   @ls: true;
@@ -13,13 +14,14 @@
   @print: false;
 );
 
-// RIO Theme // Fonts
+// Fonts
 @font-man: true;
 
 // MAN font
 @font-family-base: MANEuropeLight, 'serif';
 @headings-font-family: MANEuropeCondensed, 'serif';
 
+// Colors
 @brand-primary: #303c49;
 @brand-info: #4b96d2;
 @brand-danger: #d90000;
@@ -41,4 +43,4 @@
 
 @color-map-marker-poi: @brand-info;
 
-@border-radius-base: 2px;
+@border-radius-default: 2px;

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

@@ -1,63 +1,52 @@
-// Bootstrap // Variables
-@import (less) '../rio-theme/variables.less';
+// Variables
+@import (less) '../variables.less';
 
-// Bootstrap // Utilities Mixins
-@import (less) '../rio-theme/mixins/labels.less';
-@import (less) '../rio-theme/mixins/opacity.less';
-@import (less) '../rio-theme/mixins/responsive-visibility.less';
-@import (less) '../rio-theme/mixins/tab-focus.less';
+// Mapping
+@import (less) '../mapping/breakpoint-map.less';
+@import (less) '../mapping/color-map.less';
 
-// // Bootstrap // Components Mixins
-@import (less) '../rio-theme/mixins/buttons.less';
+// Mixins
+@import (less) '../mixins/_mixins.less';
 
-// Bootstrap // Reset and dependencies
-@import (less) '../rio-theme/normalize.less';
+// Normalize
+@import (less) '../design/normalize.less';
 
-// Bootstrap // Core CSS
-@import (less) '../rio-theme/buttons.less';
-@import (less) '../rio-theme/scaffolding.less';
+// Styles
+@import (less) '../design/buttons.less';
+@import (less) '../design/labels.less';
+@import (less) '../design/visibilty.less';
 
-// Bootstrap // Components
-@import (less) '../rio-theme/labels.less';
-
-// START RIO Theme without BS dependencies
-
-// RIO Theme // Mixins
-@import (less) '../rio-theme/mixins/spacings.less';
-@import (less) '../rio-theme/mixins/sizings.less';
-@import (less) '../rio-theme/mixins/spinner.less';
-
-// RIO Theme // Variables
-@import (less) '../rio-theme/colors.less';
-@import (less) '../rio-theme/screens.less';
-@import (less) '../shared/text.less';
-
-// RIO Theme // Fonts
+// Fonts
 @font-source-sans: true;
-@import (less) '../rio-theme/fonts.less';
+@import (less) '../design/fonts.less';
 
 // RIOglyph Iconfont
-@import (less) '../../fonts/rioglyph/rioglyph.less';
+@import (less) '../design/rioglyph.less';
 
-// RIO Theme // Components
-@import (less) '../rio-theme/theme.less';
+// Components
+@import (less) '../design/theme.less';
 
-// RIO Theme // Utils
-@import (less) '../utils/colors.less';
-@import (less) '../utils/text.less';
+// Utilities
+@import (less) '../design/colors.less';
+@import (less) '../design/text.less';
 
 // Screens - Breakpoints
 @screen-xs: 300px;
 @screen-ls: 300px;
 
 @suffix: ~'';
-@import (multiple) "../utils/responsive/display.less";
-@import (multiple) "../utils/responsive/flexbox.less";
-@import (multiple) "../utils/responsive/text.less";
-@import (less) '../rio-theme/responsive-utilities.less';
+@import (multiple) "../design/responsive/display.less";
+@import (multiple) "../design/responsive/flexgrid.less";
+@import (multiple) "../design/responsive/text.less";
 
 // Custom Styles
 
+.hidden-xs {
+  @media (max-width: @screen-xs) {
+    display: none !important;
+  }
+}
+
 .label {
   padding: 6px 10px;
 }