@rio-cloud/rio-uikit 0.15.0 → 0.15.1

package/lib/components/applicationLayout/ApplicationLayout.js

@@ -21,21 +21,17 @@ var _ApplicationLayoutSidebar = _interopRequireDefault(require("./ApplicationLay
 
 var _ApplicationLayoutBody = _interopRequireDefault(require("./ApplicationLayoutBody"));
 
-var _useEffectOnce = _interopRequireDefault(require("../../hooks/useEffectOnce"));
-
-var _deviceUtils = require("../../utils/deviceUtils");
+var _init = require("../../utils/init");
 
 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 ApplicationLayout = function ApplicationLayout(props) {
-  var className = props.className,
-      children = props.children;
+// initializes document bootstrapping - keep the import to avoid being tree-shaked
+var ApplicationLayout = function ApplicationLayout(_ref) {
+  var className = _ref.className,
+      children = _ref.children;
   var classes = (0, _classnames.default)('ApplicationLayout', className);
-  (0, _useEffectOnce.default)(function () {
-    return (0, _deviceUtils.initdocumentBootstrapping)(document);
-  });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes
   }, children);

package/lib/components/dropdown/ButtonDropdown.js

@@ -7,33 +7,31 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Container;
+exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _reactPopper = require("react-popper");
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _isNil = _interopRequireDefault(require("lodash/fp/isNil"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _noop = _interopRequireDefault(require("lodash/fp/noop"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _logDeprecatedWarnings = _interopRequireDefault(require("../../utils/logDeprecatedWarnings"));
 
-var _reactOnclickoutside = _interopRequireDefault(require("react-onclickoutside"));
+var _portalRoot = require("../../utils/portalRoot");
 
-var _isNil = _interopRequireDefault(require("lodash/fp/isNil"));
+var _useClickOutside = _interopRequireDefault(require("../../hooks/useClickOutside"));
 
 var _getMenuItems = _interopRequireDefault(require("../menuItems/getMenuItems"));
 
@@ -41,8 +39,6 @@ var _MenuItems = _interopRequireDefault(require("../menuItems/MenuItems"));
 
 var _menuItemsPropTypes = _interopRequireDefault(require("./menuItemsPropTypes"));
 
-var _getDropDirection = _interopRequireDefault(require("../../utils/getDropDirection"));
-
 var _DropdownToggleButton = _interopRequireDefault(require("./DropdownToggleButton"));
 
 var _SplitCaretButton = _interopRequireDefault(require("./SplitCaretButton"));
@@ -53,170 +49,149 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var ButtonDropdown = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(ButtonDropdown, _PureComponent);
-
-  var _super = _createSuper(ButtonDropdown);
+var getPlacement = function getPlacement(pullRight, dropup) {
+  if (pullRight && dropup) {
+    return 'top-end';
+  }
 
-  function ButtonDropdown(props) {
-    var _this;
+  if (!pullRight && dropup) {
+    return 'top-start';
+  }
 
-    (0, _classCallCheck2.default)(this, ButtonDropdown);
-    _this = _super.call(this, props);
-    _this.isUncontrolled = (0, _isNil.default)(props.open);
-    _this.state = {
-      open: _this.isUncontrolled && props.open,
-      dropup: props.dropup,
-      pullRight: props.pullRight
-    };
-    _this.toggleOpen = _this.toggleOpen.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleSplitLabelButtonClick = _this.handleSplitLabelButtonClick.bind((0, _assertThisInitialized2.default)(_this));
-    _this.refDropdownMenu = /*#__PURE__*/_react.default.createRef();
-    _this.refDropdownToggle = /*#__PURE__*/_react.default.createRef();
-    return _this;
+  if (pullRight && !dropup) {
+    return 'bottom-end';
   }
 
-  (0, _createClass2.default)(ButtonDropdown, [{
-    key: "isAutoDropActive",
-    value: function isAutoDropActive() {
-      return !(!this.props.autoDropDirection || this.props.dropup || this.props.pullRight);
-    }
-  }, {
-    key: "toggleOpen",
-    value: function toggleOpen(event) {
-      var _ref = this.isUncontrolled ? this.state : this.props,
-          open = _ref.open;
-
-      if (open) {
-        this.closeMenu();
-      } else {
-        this.openMenu(event);
-      }
-    }
-  }, {
-    key: "openMenu",
-    value: function openMenu(event) {
-      var toggleNode = this.refDropdownToggle.current;
-      var menuNode = this.refDropdownMenu.current;
-      var dropDirection = this.isAutoDropActive() ? (0, _getDropDirection.default)(toggleNode, menuNode) : {};
-
-      if (this.isUncontrolled) {
-        this.setState(_objectSpread({
-          open: true
-        }, dropDirection));
-      } else {
-        this.setState(_objectSpread({}, dropDirection));
-      }
-
-      this.props.enableOnClickOutside();
-      this.props.onOpen(event);
-    }
-  }, {
-    key: "closeMenu",
-    value: function closeMenu() {
-      if (this.isUncontrolled) {
-        this.setState({
-          open: false
-        });
-      }
-
-      this.props.disableOnClickOutside();
-      this.props.onClose();
-    }
-  }, {
-    key: "handleClickOutside",
-    value: function handleClickOutside() {
-      this.closeMenu();
-    }
-  }, {
-    key: "handleSplitLabelButtonClick",
-    value: function handleSplitLabelButtonClick() {
-      this.closeMenu();
-
-      if (this.props.onLabelButtonClick) {
-        this.props.onLabelButtonClick();
-      }
-    }
-  }, {
-    key: "isDropUp",
-    value: function isDropUp() {
-      return this.isAutoDropActive() ? this.state.dropup : this.props.dropup;
+  return 'bottom-start';
+};
+
+var ButtonDropdown = function ButtonDropdown(props) {
+  var id = props.id,
+      items = props.items,
+      bsSize = props.bsSize,
+      bsStyle = props.bsStyle,
+      disabled = props.disabled,
+      iconOnly = props.iconOnly,
+      title = props.title,
+      splitButton = props.splitButton,
+      customDropdown = props.customDropdown,
+      toggleClassName = props.toggleClassName,
+      dropdownClassName = props.dropdownClassName,
+      className = props.className,
+      open = props.open,
+      dropup = props.dropup,
+      pullRight = props.pullRight,
+      noCaret = props.noCaret,
+      onOpen = props.onOpen,
+      onClose = props.onClose,
+      onLabelButtonClick = props.onLabelButtonClick,
+      usePortal = props.usePortal;
+
+  var _useState = (0, _react.useState)(open),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      internalOpen = _useState2[0],
+      setInternalOpen = _useState2[1];
+
+  var _React$useState = _react.default.useState(null),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      refDropdownToggle = _React$useState2[0],
+      setRefDropdownToggle = _React$useState2[1];
+
+  var _React$useState3 = _react.default.useState(null),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      refDropdownMenu = _React$useState4[0],
+      setRefDropdownMenu = _React$useState4[1];
+
+  var modifiers = [{
+    name: 'flip',
+    options: {
+      fallbackPlacements: ['top-start', 'top-end']
     }
-  }, {
-    key: "isPullRight",
-    value: function isPullRight() {
-      return this.isAutoDropActive() ? this.state.pullRight : this.props.pullRight;
+  }];
+
+  var _usePopper = (0, _reactPopper.usePopper)(refDropdownToggle, refDropdownMenu, {
+    placement: getPlacement(pullRight, dropup),
+    modifiers: modifiers
+  }),
+      styles = _usePopper.styles,
+      attributes = _usePopper.attributes;
+
+  var wrapperRef = (0, _useClickOutside.default)(function () {
+    return closeMenu();
+  });
+  var dropdownRoot = (0, _portalRoot.getOrCreatePortalRoot)();
+  var isUncontrolled = (0, _isNil.default)(open);
+  var shouldShowCaret = !noCaret && !splitButton && !iconOnly;
+  (0, _react.useEffect)(function () {
+    if (!isUncontrolled) {
+      // console.log('update open from outside: ' + open);
+      setInternalOpen(open);
     }
-  }, {
-    key: "shouldShowCaret",
-    value: function shouldShowCaret() {
-      var _this$props = this.props,
-          iconOnly = _this$props.iconOnly,
-          noCaret = _this$props.noCaret,
-          splitButton = _this$props.splitButton;
-      return !noCaret && !splitButton && !iconOnly;
+  }, [isUncontrolled, open]);
+
+  var toggleOpen = function toggleOpen(event) {
+    var isOpen = isUncontrolled ? internalOpen : open;
+
+    if (isOpen) {
+      closeMenu();
+    } else {
+      openMenu(event);
     }
-  }, {
-    key: "isOpen",
-    value: function isOpen() {
-      var _ref2 = this.isUncontrolled ? this.state : this.props,
-          open = _ref2.open;
+  };
 
-      return open;
+  var openMenu = function openMenu(event) {
+    if (isUncontrolled) {
+      setInternalOpen(true);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          id = _this$props2.id,
-          items = _this$props2.items,
-          bsSize = _this$props2.bsSize,
-          bsStyle = _this$props2.bsStyle,
-          disabled = _this$props2.disabled,
-          iconOnly = _this$props2.iconOnly,
-          title = _this$props2.title,
-          splitButton = _this$props2.splitButton,
-          customDropdown = _this$props2.customDropdown,
-          toggleClassName = _this$props2.toggleClassName,
-          dropdownClassName = _this$props2.dropdownClassName,
-          className = _this$props2.className;
-      var wrapperClasses = (0, _classnames.default)('dropdown', 'btn-group', this.isOpen() && 'open', this.isDropUp() && 'dropup', className);
-      var handleDropdownButtonClick = splitButton ? this.handleSplitLabelButtonClick : this.toggleOpen;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: wrapperClasses
-      }, /*#__PURE__*/_react.default.createElement(_DropdownToggleButton.default, {
-        id: id,
-        splitButton: splitButton,
-        bsStyle: bsStyle,
-        bsSize: bsSize,
-        iconOnly: iconOnly,
-        disabled: disabled,
-        ref: this.refDropdownToggle,
-        onClick: handleDropdownButtonClick,
-        className: toggleClassName
-      }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, title, this.shouldShowCaret() && /*#__PURE__*/_react.default.createElement(_Caret.default, null))), splitButton && /*#__PURE__*/_react.default.createElement(_SplitCaretButton.default, {
-        id: id,
-        bsStyle: bsStyle,
-        disabled: disabled,
-        className: toggleClassName,
-        onClick: this.toggleOpen
-      }), /*#__PURE__*/_react.default.createElement(_MenuItems.default, {
-        className: dropdownClassName,
-        pullRight: this.isPullRight(),
-        ref: this.refDropdownMenu
-      }, customDropdown ? customDropdown : (0, _getMenuItems.default)(items, this.toggleOpen)));
+
+    onOpen(event);
+  };
+
+  var closeMenu = function closeMenu() {
+    if (isUncontrolled) {
+      setInternalOpen(false);
     }
-  }]);
-  return ButtonDropdown;
-}(_react.PureComponent);
+
+    onClose();
+  };
+
+  var handleSplitLabelButtonClick = function handleSplitLabelButtonClick() {
+    closeMenu();
+    onLabelButtonClick();
+  };
+
+  var handleDropdownButtonClick = splitButton ? handleSplitLabelButtonClick : toggleOpen;
+  var isOpen = isUncontrolled ? internalOpen : open;
+  var wrapperClasses = (0, _classnames.default)('dropdown', 'btn-group', isOpen && 'open', className);
+  var dropdownClasses = (0, _classnames.default)(usePortal && 'dropdown-portal', dropdownClassName);
+
+  var dropdownMenu = /*#__PURE__*/_react.default.createElement(_MenuItems.default, (0, _extends2.default)({
+    className: dropdownClasses,
+    ref: setRefDropdownMenu,
+    style: styles.popper
+  }, attributes.popper), customDropdown ? customDropdown : (0, _getMenuItems.default)(items, toggleOpen));
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: wrapperClasses,
+    ref: wrapperRef
+  }, /*#__PURE__*/_react.default.createElement(_DropdownToggleButton.default, {
+    id: id,
+    splitButton: splitButton,
+    bsStyle: bsStyle,
+    bsSize: bsSize,
+    iconOnly: iconOnly,
+    disabled: disabled,
+    ref: setRefDropdownToggle,
+    onClick: handleDropdownButtonClick,
+    className: toggleClassName
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, title, shouldShowCaret && /*#__PURE__*/_react.default.createElement(_Caret.default, null))), splitButton && /*#__PURE__*/_react.default.createElement(_SplitCaretButton.default, {
+    id: id,
+    bsStyle: bsStyle,
+    disabled: disabled,
+    className: toggleClassName,
+    onClick: toggleOpen
+  }), isOpen && usePortal && /*#__PURE__*/_reactDom.default.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu);
+};
 
 ButtonDropdown.defaultProps = {
   id: Math.random().toString(36).substr(2, 16),
@@ -226,12 +201,13 @@ ButtonDropdown.defaultProps = {
   pullRight: false,
   splitButton: false,
   dropup: false,
-  autoDropDirection: true,
   bsStyle: 'default',
   disabled: false,
-  onOpen: function onOpen() {},
-  onClose: function onClose() {},
+  onOpen: _noop.default,
+  onClose: _noop.default,
+  onLabelButtonClick: _noop.default,
   toggleClassName: '',
+  usePortal: false,
   className: ''
 };
 ButtonDropdown.propTypes = {
@@ -245,7 +221,7 @@ ButtonDropdown.propTypes = {
   iconOnly: _propTypes.default.bool,
   noCaret: _propTypes.default.bool,
   splitButton: _propTypes.default.bool,
-  autoDropDirection: _propTypes.default.bool,
+  usePortal: _propTypes.default.bool,
   items: _menuItemsPropTypes.default.isRequired,
   disabled: _propTypes.default.bool,
   className: _propTypes.default.string,
@@ -258,10 +234,5 @@ ButtonDropdown.propTypes = {
   onOpen: _propTypes.default.func,
   onClose: _propTypes.default.func
 };
-var EnhancedComponent = (0, _reactOnclickoutside.default)(ButtonDropdown);
-
-function Container(props) {
-  return /*#__PURE__*/_react.default.createElement(EnhancedComponent, (0, _extends2.default)({}, props, {
-    disableOnClickOutside: true
-  }));
-}
+var _default = ButtonDropdown;
+exports.default = _default;

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/style/css/_exports/rio-website.less

@@ -1521,6 +1521,20 @@ body .module-content {
       }
     }
 
+    &-marketplace-details-panel {
+      &-rimless-bottom {
+        .section-layout-container-row {
+          padding-bottom: 0 !important;
+        }
+      }
+
+      &-rimless-top {
+        .section-layout-container-row {
+          padding-top: 0 !important;
+        }
+      }
+    }
+
     &-marketplace-col-4-as-col-6 {
       .section-layout {
         .section-layout-container {

package/lib/style/css/bootstrap/dropdowns.less

@@ -34,20 +34,27 @@
   border-radius: @border-radius-base;
   border: 1px solid @dropdown-border;
   box-shadow:0 6px 12px rgba(0,0,0,.175);
-  display: none; // none by default, but block on "open" of the menu
   float: left;
   font-size: @font-size-base;
   left: 0;
   list-style: none;
-  margin: 2px 0 0; // override default ul
+  margin-bottom: 0;
   min-width: 160px;
   padding: 5px 0;
   position: absolute;
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   top: 100%;
-  width: 100%;
   z-index: @zindex-dropdown;
 
+  // display: none by default
+  display: none;
+
+  // but display: block when portaled
+  #uikit-root & {
+    display: block;
+    width: auto;
+  }
+
   // Aligns the dropdown menu to right
   //
   // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`

package/lib/style/css/bootstrap/forms.less

@@ -391,32 +391,35 @@ input[type="checkbox"] {
   }
 }
 // Feedback icon (requires .glyphicon classes)
-.form-control-feedback {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 2; // Ensure icon is above input groups
-  display: block;
-  width: @input-height-base;
-  height: @input-height-base;
-  line-height: @input-height-base;
-  text-align: center;
-  pointer-events: none;
-}
-.input-lg + .form-control-feedback,
-.input-group-lg + .form-control-feedback,
-.form-group-lg .form-control + .form-control-feedback {
-  width: @input-height-large;
-  height: @input-height-large;
-  line-height: @input-height-large;
-}
-.input-sm + .form-control-feedback,
-.input-group-sm + .form-control-feedback,
-.form-group-sm .form-control + .form-control-feedback {
-  width: @input-height-small;
-  height: @input-height-small;
-  line-height: @input-height-small;
-}
+// .form-control-feedback {
+//   background-color: #ffcc00;
+//   border-bottom-right-radius: @border-radius-base;
+//   border-top-right-radius: @border-radius-base;
+//   display: block;
+//   height: @input-height-base - 2;
+//   line-height: @input-height-base - 2;
+//   pointer-events: none;
+//   position: absolute;
+//   right: 2px;
+//   text-align: center;
+//   top: 2px;
+//   width: @input-height-base - 2;
+//   z-index: 2; // Ensure icon is above input groups
+// }
+// .input-lg + .form-control-feedback,
+// .input-group-lg + .form-control-feedback,
+// .form-group-lg .form-control-feedback {
+//   width: @input-height-large - 2;
+//   height: @input-height-large - 2;
+//   line-height: @input-height-large - 2;
+// }
+// .input-sm + .form-control-feedback,
+// .input-group-sm + .form-control-feedback,
+// .form-group-sm .form-control-feedback {
+//   width: @input-height-small - 2;
+//   height: @input-height-small - 2;
+//   line-height: @input-height-small - 2;
+// }
 
 // Feedback states
 .has-success {
@@ -429,16 +432,15 @@ input[type="checkbox"] {
   .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
 }
 
-// Reposition feedback icon if input has visible label above
-.has-feedback label {
-
-  & ~ .form-control-feedback {
-    top: (@line-height-computed + 5); // Height of the `label` and its margin
-  }
-  &.sr-only ~ .form-control-feedback {
-    top: 0;
-  }
-}
+// // Reposition feedback icon if input has visible label above
+// .has-feedback label {
+//   & ~ .form-control-feedback {
+//     top: (@line-height-computed + 5); // Height of the `label` and its margin
+//   }
+//   &.sr-only ~ .form-control-feedback {
+//     top: 0;
+//   }
+// }
 
 
 // Help text

package/lib/style/css/bootstrap/input-groups.less

@@ -130,7 +130,9 @@
 .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
 .input-group-btn:last-child > .btn-group:not(:last-child) > .btn,
 .input-group-addon + .form-control:not(:last-child),
+.input-group-addon + .form-control-feedback-wrapper:not(:last-child) .form-control,
 .input-group:not(.ClearableInput) > .form-control:nth-child(1):not(:last-child),
+.input-group:not(.ClearableInput) > .form-control-feedback-wrapper:first-child:not(:last-child) .form-control,
 .input-group > .ClearableInput:not(:last-child) > .form-control,
 .input-group .input-group-addon + .AutoSuggest .ClearableInput > .form-control,
 .input-group .AutoSuggest:not(:last-child) .ClearableInput > .form-control,
@@ -142,6 +144,8 @@
 .input-group-addon:last-child { border-left: 0 }
 
 .input-group .input-group-btn + .form-control:last-child,
+.input-group-addon-label + .form-control,
+.input-group-addon-label + .form-control-feedback-wrapper .form-control,
 .input-group-addon:last-child,
 .input-group-btn:last-child > .btn,
 .input-group-btn:last-child > .btn-group > .btn,

package/lib/style/css/bootstrap/mixins/forms.less

@@ -27,7 +27,7 @@
     }
   }
   // Set validation states also for addons
-  .input-group-addon {
+  .input-group-addon:not(.input-group-addon-label) {
     color: @text-color;
     border-color: @border-color;
     background-color: @background-color;

package/lib/style/css/rio-theme/dropdowns.less

@@ -19,12 +19,12 @@
 @dropdown-max-height: 211px; // Used for Select and AutoSuggest components
 
 .btn-group.open .dropdown-toggle {
-  box-shadow: none;
+  box-shadow: none !important;
 }
 
 .dropdown-menu {
   .shadow-hard-to-bottom();
-  margin: -1px 0 0 0;
+  // margin: -1px 0 0 0;
   padding: 0;
 
   > li {

package/lib/style/css/rio-theme/forms.less

@@ -53,6 +53,10 @@ label .checkbox-text {
 }
 
 .form-group {
+  &:first-child:last-child {
+    margin-bottom: 0;
+  }
+
   label:not(.checkbox),
   label:not(.radio) {
     .default-label(@font-size-12);
@@ -96,11 +100,33 @@ label .checkbox-text {
     }
   }
 
+  .form-control-feedback {
+    border-radius: 1000px;
+    display: block;
+    pointer-events: none;
+    position: absolute;
+    right:3px;
+    text-align: center;
+    top: 3px;
+    width: @input-height-base - 3;
+  }
+
   // feedback
   &.has-feedback {
+
+    // Reposition feedback icon if input has visible label above
+    label {
+      & ~ .form-control-feedback {
+        top: 27px;
+      }
+
+      &.sr-only ~ .form-control-feedback {
+        top: 0;
+      }
+    }
+
     .form-control {
       padding-right: @input-height-base;
-      //border-bottom-right-radius: 0;
     }
 
     .form-control-feedback-wrapper {
@@ -113,45 +139,48 @@ label .checkbox-text {
 
     .form-control-feedback {
       font-size: 16px;
-      line-height: @input-height-base;
+      line-height: @input-height-base - 6;
     }
 
     // small
     &.form-group-sm .form-control,
     .input-sm {
       padding-right: @input-height-small;
-
-      ~ .form-control-feedback {
-        font-size: 16px;
-        line-height: @input-height-small;
-      }
     }
 
-    &.form-group-sm label ~ .form-control-feedback,
-    label ~ .input-sm ~ .form-control-feedback {
-      top: 24px;
+    &.form-group-sm .form-control-feedback,
+    .input-sm + .form-control-feedback {
+      font-size: 16px;
+      line-height: @input-height-small - 6;
     }
 
+    // &.form-group-sm label ~ .form-control-feedback,
+    // label ~ .input-sm ~ .form-control-feedback {
+    //   top: 26px;
+    // }
+
     // large
     &.form-group-lg .form-control,
     .input-lg {
       padding-right: @input-height-large;
-
-      ~ .form-control-feedback {
-        font-size: 22px;
-        line-height: @input-height-large;
-      }
     }
 
-    &.form-group-lg label ~ .form-control-feedback,
-    label ~ .input-lg ~ .form-control-feedback {
-      top: 25px;
+    &.form-group-lg .form-control-feedback,
+    .input-lg + .form-control-feedback {
+      font-size: 22px;
+      line-height: @input-height-large - 6;
     }
 
+    // &.form-group-lg label ~ .form-control-feedback,
+    // label ~ .input-lg ~ .form-control-feedback {
+    //   top: 26px;
+    // }
+
     .help-block {
+      border-radius: @border-radius-small;
       font-size: @font-size-small;
-      margin: 0;
-      padding: 5px 10px;
+      margin: 1px 0 0 0;
+      padding: 2px 5px;
       position: absolute;
       right: 0;
       transition: color 0.2s ease ~"," background 0.2s ease;

package/lib/style/css/rio-theme/input-groups.less

@@ -9,13 +9,18 @@
   position: relative;
   align-items: center;
 
-  .form-control {
+
+  .form-control, .form-control-feedback-wrapper {
     z-index: 0;
     width: 0;
     display: block;
     flex: 1 1 auto;
   }
 
+  .form-control-feedback-wrapper .form-control {
+    width: 100%;
+  }
+
   .input-group-addon {
     .input-size(
       @input-height-base;
@@ -39,16 +44,23 @@
       }
     }
 
+    &.input-group-addon-label {
+      text-transform: uppercase;
+      background-color: @gray-lightest;
+    }
+
     &:first-child {
-      background-color: transparent;
-      border: none;
-      top: 0;
-      left: 0;
-      padding: 0;
-      position: absolute;
-      text-align: center;
-      width: 32px;
-      z-index: 4;
+      &:not(.input-group-addon-label) {
+        background-color: transparent;
+        border: none;
+        left: 0;
+        padding: 0;
+        position: absolute;
+        text-align: center;
+        top: 0;
+        width: 32px;
+        z-index: 4;
+      }
     }
 
     &:last-child {
@@ -62,30 +74,37 @@
       );
       border-right: none;
       box-shadow: 1px 0 0 0 @input-border;
-      padding-left: 0 !important;
       position: relative;
-      transform: translateX(-1px);
       transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
 
-      .form-group.has-error & {
-        box-shadow: 1px 0 0 0 @brand-danger;
-      }
+      &:not(.input-group-addon-label) {
+        padding-left: 0 !important;
+        transform: translateX(-1px);
 
-      .form-group.has-warning & {
-        box-shadow: 1px 0 0 0 @brand-warning;
-      }
+        .form-group.has-error & {
+          box-shadow: 1px 0 0 0 @brand-danger;
+        }
 
-      .form-group.has-success & {
-        box-shadow: 1px 0 0 0 @brand-success;
-      }
+        .form-group.has-warning & {
+          box-shadow: 1px 0 0 0 @brand-warning;
+        }
+
+        .form-group.has-success & {
+          box-shadow: 1px 0 0 0 @brand-success;
+        }
 
-      .form-group.has-feedback & {
-        background: @input-bg;
+        .form-group.has-feedback & {
+          background: @input-bg;
+        }
       }
+
+
     }
 
-    + .form-control {
-      padding-left: 30px;
+    &:not(.input-group-addon-label) {
+      + .form-control, + .form-control-feedback-wrapper .form-control {
+        padding-left: 30px;
+      }
     }
 
     > .rioglyph {

package/lib/style/css/rio-theme/variables.less

@@ -29,6 +29,7 @@
 @border-radius-small: 2px;
 @border-radius-base: 4px;
 @border-radius-large: 6px;
+@border-radius-extra-large: 8px;
 
 // Colors
 @component-active-bg: @brand-primary;

package/lib/style/css/utils/rounded.less

@@ -3,6 +3,7 @@
 
     &-small { border-radius: @border-radius-small !important }
     &-large { border-radius: @border-radius-large !important }
+    &-extra-large { border-radius: @border-radius-extra-large !important }
     &-none { border-radius: 0 !important }
 }
 

package/lib/style/fonts/rioglyph/rioglyph.less

@@ -2,7 +2,7 @@
 
 @font-face {
 	font-family: "rioglyph";
-	src: url("rioglyph.woff?42f54bea5465197e01760c2a6ef8fc1d") format("woff");
+	src: url("rioglyph.woff?ba8bd07543018852f7e4656713b8ca72") format("woff");
     font-weight: normal;
     font-style: normal;
 }

package/lib/types.ts

@@ -1465,7 +1465,7 @@ export interface SimpleButtonDropdownProps {
     iconOnly?: boolean;
     noCaret?: boolean;
     splitButton?: boolean;
-    autoDropDirection?: boolean;
+    usePortal?: boolean;
     items: MenuItemProps[];
     className?: string;
     dropdownClassName?: string;
@@ -1568,8 +1568,10 @@ export interface SimpleTooltipProps {
         | OverlayTriggerPlacement.LEFT_START
         | OverlayTriggerPlacement.LEFT
         | OverlayTriggerPlacement.LEFT_END;
-    overlay: React.ReactNode;
+    content: string | React.ReactNode;
     trigger?: 'click' | 'hover' | 'focus';
+    targetRef?: React.MutableRefObject<object>;
+    children: React.ReactNode;
 }
 
 export interface SaveDialogProps {

package/lib/utils/buttonEffect.js

@@ -37,10 +37,15 @@ var isTargetEligibleForEffect = function isTargetEligibleForEffect(target) {
   }
 
   var className = target.className;
-  var isButton = className.includes('btn ');
-  var isNotButtonComponent = !className.includes('btn-component');
-  var isNotDisabled = !className.includes('disabled');
-  return isButton && isNotButtonComponent && isNotDisabled;
+
+  if (typeof className === 'string' || typeof className === 'array') {
+    var isButton = className.includes('btn ');
+    var isNotButtonComponent = !className.includes('btn-component');
+    var isNotDisabled = !className.includes('disabled');
+    return isButton && isNotButtonComponent && isNotDisabled;
+  }
+
+  return false;
 };
 
 var enableButtonRipple = function enableButtonRipple(event) {

package/lib/utils/deviceUtils.js

@@ -1,13 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isDesktop = exports.initdocumentBootstrapping = exports.inIframe = exports.hasTouch = exports.autoInitDocumentBootstrapping = void 0;
-
-var _throttle = _interopRequireDefault(require("lodash/fp/throttle"));
+exports.isDesktop = exports.inIframe = exports.hasTouch = 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
@@ -54,44 +50,6 @@ var inIframe = function inIframe() {
   } catch (e) {
     return true;
   }
-}; // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-
-
-exports.inIframe = inIframe;
-
-var calcViewportUnits = function calcViewportUnits() {
-  var vh = window.innerHeight * 0.01;
-  return "--vh: ".concat(vh, "px");
 };
 
-var initdocumentBootstrapping = function initdocumentBootstrapping(document) {
-  if (!document || !document.documentElement) {
-    return;
-  }
-
-  var html = document.documentElement;
-
-  var setViewportUnits = function setViewportUnits() {
-    html.setAttribute('style', calcViewportUnits());
-  };
-
-  window.addEventListener('orientationchange', (0, _throttle.default)(1000, setViewportUnits));
-  window.addEventListener('resize', (0, _throttle.default)(1000, setViewportUnits));
-  setViewportUnits();
-
-  if (!window.CSS || !window.CSS.supports || !window.CSS.supports('gap: 1px')) {
-    html.classList.add('css-no-gap');
-  }
-
-  if (html && inIframe()) {
-    html.classList.add('window-iframe');
-  }
-};
-
-exports.initdocumentBootstrapping = initdocumentBootstrapping;
-
-var autoInitDocumentBootstrapping = function (document) {
-  initdocumentBootstrapping(document);
-}(document);
-
-exports.autoInitDocumentBootstrapping = autoInitDocumentBootstrapping;
+exports.inIframe = inIframe;

package/lib/utils/init.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.initDocumentBootstrapping = exports.autoInitDocumentBootstrapping = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _throttle = _interopRequireDefault(require("lodash/fp/throttle"));
+
+var _deviceUtils = require("./deviceUtils");
+
+var _version = _interopRequireDefault(require("../version.json"));
+
+var uikitVersion = _version.default.version;
+
+var isProdEnv = function isProdEnv() {
+  return process.env.NODE_ENV === 'production';
+}; // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+
+
+var calcViewportUnits = function calcViewportUnits() {
+  var vh = window.innerHeight * 0.01;
+  return "--vh: ".concat(vh, "px");
+};
+
+var logStyled = function logStyled(log) {
+  return console.log('%c%s', 'color: #697a8b;', log);
+};
+
+var printPoweredByRIO = function printPoweredByRIO() {
+  logStyled('- - - - - - - - - - - - - - - - - - - - - - -');
+  logStyled("  ____  ___ ___    _   _ ___ _  _____ _____\n |  _ \\|_ _/ _ \\  | | | |_ _| |/ /_ _|_   _|\n | |_) || | | | | | | | || || ' / | |  | |\n |  _ < | | |_| | | |_| || || . \\ | |  | |\n |_| \\_\\___\\___/   \\___/|___|_|\\_\\___| |_|\n");
+  var message = [" Version ".concat(uikitVersion, " | https://uikit.developers.rio.cloud")];
+  isProdEnv() && message.push('\n\n You are a Developer? RIO is hiring! | https://rio.cloud/en/career');
+  logStyled(message.join(''));
+  logStyled('- - - - - - - - - - - - - - - - - - - - - -');
+};
+
+var checkForReleaseVersion = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var remoteVersionsListUrl, response, data;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            if (isProdEnv()) {
+              _context.next = 2;
+              break;
+            }
+
+            return _context.abrupt("return");
+
+          case 2:
+            remoteVersionsListUrl = 'https://uikit.developers.rio.cloud/versionsList.json';
+            _context.prev = 3;
+            _context.next = 6;
+            return fetch(remoteVersionsListUrl, {
+              method: 'get',
+              mode: 'no-cors'
+            });
+
+          case 6:
+            response = _context.sent;
+            _context.next = 9;
+            return response.json();
+
+          case 9:
+            data = _context.sent;
+
+            if (data.latest_release !== uikitVersion) {
+              console.log("\uD83C\uDD95 UIKIT version ".concat(data.latest_release, " is the latest released version! Your are using ").concat(uikitVersion));
+            }
+
+            _context.next = 16;
+            break;
+
+          case 13:
+            _context.prev = 13;
+            _context.t0 = _context["catch"](3);
+            // console.warn(error);
+            console.warn("Faild to fetch versionsList from ".concat(remoteVersionsListUrl));
+
+          case 16:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[3, 13]]);
+  }));
+
+  return function checkForReleaseVersion() {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+var checkMatchingUkitVersions = function checkMatchingUkitVersions() {
+  Array.from(document.querySelectorAll('link[rel="stylesheet"]')).forEach(function (cssLink) {
+    var href = cssLink.href;
+
+    if (href.includes('uikit.developers.rio.cloud')) {
+      var _URL$pathname$split = new URL(href).pathname.split('/'),
+          _URL$pathname$split2 = (0, _slicedToArray2.default)(_URL$pathname$split, 2),
+          uikitVersionCSS = _URL$pathname$split2[1];
+
+      if (!href.includes(uikitVersion)) {
+        console.warn(['You are using different UIKIT JS and CSS versions.\n', "Your current JS version is ".concat(uikitVersion, " and "), "your current CSS version is ".concat(uikitVersionCSS, ".\n"), 'If this is not on purpose, please fix it. Otherwise, this may lead to UI bugs.'].join(''));
+      }
+    } else if (href.includes('cdn.rio.cloud/libs/rio-uikit')) {
+      console.error('You are still using an old "cdn.rio.cloud" css import. This will lead to mayor UI bugs!');
+    }
+  });
+};
+
+var initDocumentBootstrapping = function initDocumentBootstrapping(document) {
+  if (!document || !document.documentElement) {
+    return;
+  }
+
+  console.group('UIKIT');
+  console.log('Init document bootstrapping');
+  var html = document.documentElement;
+
+  var setViewportUnits = function setViewportUnits() {
+    return html.setAttribute('style', calcViewportUnits());
+  };
+
+  window.addEventListener('orientationchange', (0, _throttle.default)(1000, setViewportUnits));
+  window.addEventListener('resize', (0, _throttle.default)(1000, setViewportUnits));
+  setViewportUnits();
+
+  if (!window.CSS || !window.CSS.supports || !window.CSS.supports('gap: 1px')) {
+    html.classList.add('css-no-gap');
+  }
+
+  if (html && (0, _deviceUtils.inIframe)()) {
+    html.classList.add('window-iframe');
+  }
+
+  printPoweredByRIO();
+  checkForReleaseVersion();
+  checkMatchingUkitVersions();
+  console.groupEnd('UIKIT');
+};
+
+exports.initDocumentBootstrapping = initDocumentBootstrapping;
+
+var autoInitDocumentBootstrapping = function (document) {
+  initDocumentBootstrapping(document);
+}(document);
+
+exports.autoInitDocumentBootstrapping = autoInitDocumentBootstrapping;

package/lib/version.json

@@ -1,3 +1,3 @@
 {
-"version": "0.15.0"
+"version": "0.15.1"
 }

package/package.json

@@ -1,21 +1,23 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.15.0",
+    "version": "0.15.1",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {
-        "build": "NODE_ENV=production babel src --out-dir lib --copy-files && NODE_ENV=production webpack --progress --stats-children && echo '👉 Dont forget to perform npm update before release!'",
+        "build": "NODE_ENV=production babel src --out-dir lib --copy-files && NODE_ENV=production webpack --progress --stats-children && echo '👉 For a npm release use update-build 👈'",
+        "update-build": "npm update && npm run build",
         "check-licenses": "node tools/check-licenses.js .",
         "check-updates": "node tools/checkUpdates.js",
         "license-check": "license-checker --production --json --onlyAllow \"`cat whitelist.txt`\" --excludePackages \"rio-livemonitor@0.1.3\" --out licenses.txt",
         "git-tasks": "node tools/gitTasks.js",
         "lint": "$(npm bin)/eslint --ignore-pattern 'src/vendor/*' 'src/**/*.js' 'test/**/*.js'",
         "lint-tasks": "node tools/lintTasks.js",
-        "analyze": "source-map-explorer 'dist/0.15.0/*.js'",
+        "analyze": "source-map-explorer 'dist/0.15.1/*.js'",
+        "analyze-bundle": "BUILD_OPTION=BundleAnalyzer npm run build",
         "prepare": "ls -la .",
         "prepack": "NODE_ENV=production babel src --out-dir lib --copy-files && NODE_ENV=production webpack --progress",
-        "test": "NODE_ENV=test jest",
-        "test-dev": "NODE_ENV=test jest --watch"
+        "test": "NODE_ENV=test TZ=UTC jest",
+        "test-dev": "NODE_ENV=test TZ=UTC jest --watch"
     },
     "author": "TB Digital Services GmbH",
     "license": "Apache-2.0",
@@ -64,6 +66,7 @@
         "git-tools": "^0.3.0",
         "html-loader": "^3.1.0",
         "jest": "^27.4.7",
+        "jest-junit": "^12.0.0",
         "jsdom": "^19.0.0",
         "jsdom-global": "^3.0.2",
         "less": "^4.1.1",
@@ -122,6 +125,7 @@
         "react-motion": "^0.5.2",
         "react-notifications": "^1.7.3",
         "react-onclickoutside": "^6.10.0",
+        "react-popper": "^2.2.5",
         "react-sortable-hoc": "^2.0.0",
         "react-transition-group": "^4.4.1",
         "recharts": "^2.1.8",
@@ -151,6 +155,13 @@
         "testEnvironment": "jsdom",
         "moduleNameMapper": {
             "\\.svg": "<rootDir>/__mocks__/svg.js"
-        }
+        },
+        "reporters": [
+            "default",
+            "jest-junit"
+        ]
+    },
+    "jest-junit": {
+        "outputDirectory": "./results/jest"
     }
 }