@rio-cloud/rio-uikit 0.15.0 → 0.16.0-beta-2

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,15 +59,15 @@ 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,
     className: wrapperClasses,
     style: outerStyle,
-    "data-offset": 40
+    "data-offset": 20
   }), /*#__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/SortDirection.d.ts

@@ -1,4 +1,9 @@
 declare module '@rio-cloud/rio-uikit/lib/es/SortDirection' {
+    export enum SortDirectionEnum {
+        ASCENDING = 'asc',
+        DESCENDING = 'desc',
+    }
+    
     export default {
         ASCENDING: 'asc',
         DESCENDING: 'desc',

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/es/useFullscreen.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 _useFullscreen2.default;
+  }
+});
+
+var _useFullscreen2 = _interopRequireDefault(require("../hooks/useFullscreen"));

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/hooks/useFullscreen.js

@@ -0,0 +1,244 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _noop = _interopRequireDefault(require("lodash/fp/noop"));
+
+var _useEvent = _interopRequireDefault(require("./useEvent"));
+
+// inspired by https://github.com/imbhargav5/rooks/blob/main/src/hooks/useFullscreen.ts
+// Note old Internet Explorer 11 is skipped here as it is not supported anymore
+// New WebKit:
+//     'webkitRequestFullscreen',
+//     'webkitExitFullscreen',
+//     'webkitFullscreenElement',
+//     'webkitFullscreenEnabled',
+//     'webkitfullscreenchange',
+//     'webkitfullscreenerror',
+//
+// // Old WebKit:
+//     'webkitRequestFullScreen',
+//     'webkitCancelFullScreen',
+//     'webkitCurrentFullScreenElement',
+//     'webkitCancelFullScreen',
+//     'webkitfullscreenchange',
+//     'webkitfullscreenerror',
+// type FullscreenApi = {
+//   isEnabled: boolean;
+//   toggle: NoopFunction | ((element?: HTMLElement) => Promise<unknown>); // toggle
+//   /** @deprecated Please use useFullScreen({onChange : function() {}}) instead. */
+//   onChange: NoopFunction | ((callback: OnChangeEventCallback) => void); // onchange
+//   /** @deprecated Please use useFullScreen({onError : function() {}}) instead. */
+//   onError: NoopFunction | ((callback: EventCallback) => void); // onerror
+//   request: NoopFunction | ((element?: HTMLElement) => Promise<unknown>); // request
+//   exit: NoopFunction | (() => Promise<unknown>); // exit
+//   isFullscreen: boolean; // isFullscreen
+//   element: HTMLElement | null | undefined;
+// };
+var defaultValue = {
+  requestFullscreen: _noop.default,
+  exitFullscreen: _noop.default,
+  toggleFullscreen: _noop.default,
+  isEnabled: false,
+  isFullscreen: false,
+  onChange: _noop.default,
+  onError: _noop.default
+}; // type RequestFullscreenOptions = {
+//   // string will help to ease type casting
+//   navigationUI?: string | 'auto' | 'hide' | 'show';
+// };
+// type FullScreenOptions = {
+//   onChange?: OnChangeEventCallback;
+//   onError?: EventCallback;
+//   requestFullscreenOptions?: RequestFullscreenOptions;
+// };
+
+var requestFunctions = ['requestFullscreen', 'webkitRequestFullscreen', 'webkitRequestFullScreen', 'mozRequestFullScreen'];
+var exitFunctions = ['exitFullscreen', 'webkitExitFullscreen', 'webkitCancelFullScreen', 'mozCancelFullScreen'];
+var fullscreenElementFunctions = ['fullscreenElement', 'webkitFullscreenElement', 'webkitCurrentFullScreenElement', 'mozFullScreenElement'];
+var isFullscreenEnabledFunctions = ['fullscreenElement', 'webkitFullscreenEnabled', 'webkitCurrentFullScreenElement', 'mozFullScreenEnabled'];
+
+var getFnName = function getFnName(fnMap, targetElement) {
+  return fnMap.find(function (fnName) {
+    if (fnName in targetElement) {
+      return fnName;
+    }
+  });
+}; // Element centered fullscreen functions
+
+
+var getRequestFunctionName = function getRequestFunctionName() {
+  var targetElement = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
+  return getFnName(requestFunctions, targetElement);
+}; // Document fullscreen functions
+
+
+var getExitFunctionName = function getExitFunctionName() {
+  return getFnName(exitFunctions, document);
+};
+
+var getFullscreenElementFunctionName = function getFullscreenElementFunctionName() {
+  return getFnName(fullscreenElementFunctions, document);
+};
+
+var getIsFullscreenEnabledFunctionName = function getIsFullscreenEnabledFunctionName() {
+  return getFnName(isFullscreenEnabledFunctions, document);
+};
+
+var useFullscreen = function useFullscreen() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  if (typeof window === 'undefined') {
+    console.warn('useFullscreen: window is undefined.');
+    return defaultValue;
+  }
+
+  var element = options.element,
+      onChange = options.onChange,
+      onError = options.onError,
+      _options$requestFulls = options.requestFullscreenOptions,
+      requestFullscreenOptions = _options$requestFulls === void 0 ? {} : _options$requestFulls; // use either a defined target or when document is set, use the html element as in Chrome the
+  // document does not have a request function. It needs to be an element.
+
+  var defaultFullscreenElement = !element || element === document ? document.querySelector('html') : element;
+  var initialFullscreenElement = document[getFullscreenElementFunctionName()];
+
+  var _useState = (0, _react.useState)(Boolean(initialFullscreenElement)),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isFullscreen = _useState2[0],
+      setIsFullscreen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(initialFullscreenElement),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      fullscreenElement = _useState4[0],
+      setFullscreenElement = _useState4[1];
+
+  var requestFullscreen = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(newTargetElement) {
+      var isHtmlElement, target;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              // check whether the new target element is a real DOm node or just a function
+              isHtmlElement = newTargetElement instanceof HTMLElement;
+              _context.prev = 1;
+              target = newTargetElement && isHtmlElement ? newTargetElement : defaultFullscreenElement;
+              _context.next = 5;
+              return target[getRequestFunctionName(target)](requestFullscreenOptions);
+
+            case 5:
+              return _context.abrupt("return", _context.sent);
+
+            case 8:
+              _context.prev = 8;
+              _context.t0 = _context["catch"](1);
+              console.log(_context.t0);
+
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 8]]);
+    }));
+
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), []);
+  var exitFullscreen = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.prev = 0;
+
+            if (!fullscreenElement) {
+              _context2.next = 5;
+              break;
+            }
+
+            _context2.next = 4;
+            return document[getExitFunctionName()]();
+
+          case 4:
+            return _context2.abrupt("return", _context2.sent);
+
+          case 5:
+            _context2.next = 10;
+            break;
+
+          case 7:
+            _context2.prev = 7;
+            _context2.t0 = _context2["catch"](0);
+            console.warn(_context2.t0);
+
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2, null, [[0, 7]]);
+  })), [fullscreenElement]);
+  var toggleFullscreen = (0, _react.useCallback)(function (newTargetElement) {
+    if (fullscreenElement) {
+      exitFullscreen();
+    } else {
+      requestFullscreen(newTargetElement);
+    }
+  }, [fullscreenElement]);
+
+  var handleChangeEvent = function handleChangeEvent() {
+    var currentFullscreenElement = document[getFullscreenElementFunctionName()];
+    var isOpen = Boolean(currentFullscreenElement);
+
+    if (isOpen) {
+      // fullscreen was enabled
+      setIsFullscreen(true);
+      setFullscreenElement(currentFullscreenElement);
+    } else {
+      // fullscreen was disabled
+      setIsFullscreen(false);
+      setFullscreenElement(null);
+    }
+
+    onChange === null || onChange === void 0 ? void 0 : onChange.call(document, event, isOpen);
+  };
+
+  var handleErrorEvent = function handleErrorEvent() {
+    return function (event) {
+      return onError === null || onError === void 0 ? void 0 : onError.call(document, event);
+    };
+  };
+
+  (0, _useEvent.default)('fullscreenchange', handleChangeEvent);
+  (0, _useEvent.default)('webkitfullscreenchange', handleChangeEvent);
+  (0, _useEvent.default)('mozfullscreenchange', handleChangeEvent);
+  (0, _useEvent.default)('fullscreenerror', handleErrorEvent);
+  (0, _useEvent.default)('webkitfullscreenerror', handleErrorEvent);
+  (0, _useEvent.default)('mozfullscreenerror', handleErrorEvent);
+  return {
+    requestFullscreen: requestFullscreen,
+    exitFullscreen: exitFullscreen,
+    toggleFullscreen: toggleFullscreen,
+    isFullscreen: isFullscreen,
+    isEnabled: Boolean(document[getIsFullscreenEnabledFunctionName(document)])
+  };
+};
+
+var _default = useFullscreen;
+exports.default = _default;

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;
 }