@rio-cloud/rio-uikit 0.15.0-beta-47 → 0.15.0-beta-48

package/lib/es/useDebugInfo.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 _useDebugInfo2.default;
+  }
+});
+
+var _useDebugInfo2 = _interopRequireDefault(require("../hooks/useDebugInfo"));

package/lib/es/useEffectOnce.d.ts

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

package/lib/es/useElementSize.d.ts

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

package/lib/es/useEsc.d.ts

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

package/lib/es/useEvent.d.ts

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

package/lib/es/useInterval.d.ts

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

package/lib/es/useKey.d.ts

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

package/lib/es/useLocalStorage.d.ts

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

package/lib/es/useLocalStorage.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useStorage.useLocalStorage;
+  }
+});
+
+var _useStorage = require("../hooks/useStorage");

package/lib/es/useOnScreen.d.ts

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

package/lib/es/useOnScreen.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 _useOnScreen2.default;
+  }
+});
+
+var _useOnScreen2 = _interopRequireDefault(require("../hooks/useOnScreen"));

package/lib/es/useOnlineStatus.d.ts

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

package/lib/es/useOnlineStatus.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 _useOnlineStatus2.default;
+  }
+});
+
+var _useOnlineStatus2 = _interopRequireDefault(require("../hooks/useOnlineStatus"));

package/lib/es/useRenderCount.d.ts

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

package/lib/es/useRenderCount.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 _useRenderCount2.default;
+  }
+});
+
+var _useRenderCount2 = _interopRequireDefault(require("../hooks/useRenderCount"));

package/lib/es/useSessionStorage.d.ts

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

package/lib/es/useSessionStorage.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useStorage.useSessionStorage;
+  }
+});
+
+var _useStorage = require("../hooks/useStorage");

package/lib/es/useStateWithValidation.d.ts

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

package/lib/es/useTimeout.d.ts

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

package/lib/es/useWindowResize.d.ts

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

package/lib/hooks/useDebugInfo.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useDebugInfo;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("react");
+
+var _useRenderCount = _interopRequireDefault(require("./useRenderCount"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var logStyle = ["color: #4c5667", "background-color: #e5ebf0", "padding: 2px 4px", "border-radius: 2px"].join(";");
+
+function useDebugInfo(componentName, props) {
+  var renderCount = (0, _useRenderCount.default)();
+  var changedProps = (0, _react.useRef)({});
+  var previousProps = (0, _react.useRef)(props);
+  var lastRenderTimestamp = (0, _react.useRef)(Date.now());
+  var propKeys = Object.keys(_objectSpread(_objectSpread({}, props), previousProps));
+  changedProps.current = propKeys.reduce(function (obj, key) {
+    if (props[key] === previousProps.current[key]) {
+      return obj;
+    }
+
+    return _objectSpread(_objectSpread({}, obj), {}, (0, _defineProperty2.default)({}, key, {
+      previous: previousProps.current[key],
+      current: props[key]
+    }));
+  }, {});
+  var info = {
+    renderCount: renderCount,
+    changedProps: changedProps.current,
+    timeSinceLastRender: Date.now() - lastRenderTimestamp.current,
+    lastRenderTimestamp: lastRenderTimestamp.current
+  };
+  (0, _react.useEffect)(function () {
+    previousProps.current = props;
+    lastRenderTimestamp.current = Date.now();
+
+    if (console) {
+      console.groupCollapsed("%c[debug-info] ".concat(componentName), logStyle);
+      console.log(info);
+      console.groupEnd();
+    }
+  });
+  return info;
+}

package/lib/hooks/useOnScreen.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useOnScreen;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/14-useOnScreen/useOnScreen.js
+function useOnScreen(ref) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    rootMargin: '0px'
+  };
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isVisible = _useState2[0],
+      setIsVisible = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (!ref.current) {
+      return;
+    }
+
+    var observer = new IntersectionObserver(function (_ref) {
+      var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+          entry = _ref2[0];
+
+      return setIsVisible(entry.isIntersecting);
+    }, options);
+    observer.observe(ref.current);
+    return function () {
+      if (!ref.current) {
+        return;
+      }
+
+      observer.unobserve(ref.current);
+    };
+  }, [ref.current, options]);
+  return isVisible;
+}

package/lib/hooks/useOnlineStatus.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useOnlineStatus;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _useEvent = _interopRequireDefault(require("./useEvent"));
+
+// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/26-useOnlineStatus/useOnlineStatus.js
+function useOnlineStatus() {
+  var _useState = (0, _react.useState)(navigator.onLine),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      online = _useState2[0],
+      setOnline = _useState2[1];
+
+  (0, _useEvent.default)('online', function () {
+    return setOnline(navigator.onLine);
+  }, false, window);
+  (0, _useEvent.default)('offline', function () {
+    return setOnline(navigator.onLine);
+  }, false, window);
+  return online;
+}

package/lib/hooks/useRenderCount.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useRenderCount;
+
+var _react = require("react");
+
+// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/27-useRenderCount/useRenderCount.js
+function useRenderCount() {
+  var count = (0, _react.useRef)(1);
+  (0, _react.useEffect)(function () {
+    count.current++;
+  });
+  return count.current;
+}

package/lib/hooks/useStorage.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLocalStorage = useLocalStorage;
+exports.useSessionStorage = useSessionStorage;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/8-useStorage/useStorage.js
+function useLocalStorage(key, defaultValue) {
+  return useStorage(key, defaultValue, window.localStorage);
+}
+
+function useSessionStorage(key, defaultValue) {
+  return useStorage(key, defaultValue, window.sessionStorage);
+}
+
+function useStorage(key, defaultValue, storageObject) {
+  var _useState = (0, _react.useState)(function () {
+    var jsonValue = storageObject.getItem(key);
+
+    if (jsonValue) {
+      return JSON.parse(jsonValue);
+    }
+
+    if (typeof defaultValue === 'function') {
+      return defaultValue();
+    }
+
+    return defaultValue;
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (!value) {
+      return storageObject.removeItem(key);
+    }
+
+    storageObject.setItem(key, JSON.stringify(value));
+  }, [key, value, storageObject]);
+  var remove = (0, _react.useCallback)(function () {
+    setValue(undefined);
+  }, []);
+  return [value, setValue, remove];
+}

package/lib/style/css/_exports/rio-uikit-core.less

@@ -98,7 +98,6 @@
 @import (less) '../../../components/applicationLayout/ApplicationLayout.less';
 @import (less) '../../../components/assetTree/AssetTree.less';
 @import (less) '../../../components/autosuggest/AutoSuggest.less';
-@import (less) '../../../components/button/ToggleButton.less';
 @import (less) '../../../components/checkbox/Checkbox.less';
 @import (less) '../../../components/clearableInput/ClearableInput.less';
 @import (less) '../../../components/counter/Counter.less';

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

@@ -631,6 +631,35 @@ html.show-handheld-navigation {
             }
           }
 
+          &.headline-block {
+            .section-content-container-row {
+              display: flex;
+              flex-direction: column;
+
+              .section-content-container-headline {
+                padding: 10px 20px;
+                background: @color-black;
+                text-transform: uppercase;
+                width: fit-content;
+
+                &:before {
+                  display: block;
+                  content: "+";
+                  width: 20px;
+                  height: 20px;
+                  position: absolute;
+                  top: 0px;
+                  left: 0px;
+                  transform: translate(-100%, -100%);
+                  text-align: center;
+                  line-height: 20px;
+                  color: @color-black;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+
           // Section Wrapper Inner Container
           .section-content-container {
             height: 100%;
@@ -1502,6 +1531,18 @@ html.show-handheld-navigation {
       }
     }
 
+    &-double-col-padding {
+      .section-layout > .section-layout-container {
+        padding-left: 0;
+        padding-right: 0;
+
+        [class*="col-"] {
+          padding-left: 20px;
+          padding-right: 20px;
+        }
+      }
+    }
+
     &-man {
       .section-layout {
         .section-layout-container {

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

@@ -20,7 +20,7 @@
 
 @logo-height: 42px;
 @logo-width: 204px;
-@navbar-height: 50px + @logo-height * 3;
+@navbar-height: 178px;
 
 @color-white: #ffffff;
 @color-black: #000000;

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

@@ -79,6 +79,10 @@
     padding: 0;
   }
 
+  &.btn-toggle.active {
+    box-shadow: inset 0 0 4px 1px rgb(90 101 102 / 60%);
+  }
+
   &-toolbar {
     display: flex;
     flex-wrap: wrap;
@@ -397,7 +401,7 @@
     &:before {
       .rioglyph;
       content: "\e9c7";
-      color: @color-highlight-dark;
+      color: @brand-primary;
       animation: spinning 1s linear infinite;
       font-size: 20px;
     }

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

@@ -32,8 +32,10 @@
       cursor: pointer;
       line-height: 1.25;
       padding: 7px 13px;
+      margin: 2px 6px;
       position: relative;
       user-select: none;
+      border-radius: 4px;
 
       &:active:focus {
         outline: 0;
@@ -47,17 +49,11 @@
     &:last-child:not(:first-child) {
       margin-bottom: 5px;
     }
-
-    .TagManager & {
-      &:first-child:not(:last-child) {
-        margin-top: 0;
-      }
-    }
   }
 
   > .active > a {
     color: inherit;
-    background-color: inherit;
+    background-color: inherit; 
   }
 
   .menuitem:focus {
@@ -66,47 +62,32 @@
 
   > .dropdown-header {
     display: flex;
-    padding: 2px 0;
+    padding: 5px 10px;
     pointer-events: none;
     align-items: center;
 
-    .dropdown-header-line {
-      flex: 1 1 auto;
-
-      hr {
-        border-width: 2px;
-        margin: 0;
-      }
-    }
-
     &:not(.center) {
       margin-top: 15px;
 
       ~ li:not(.dropdown-header) a {
         padding-left: 20px;
       }
-
-      .dropdown-header-line:first-child {
-        flex: 0 0 auto;
-        width: 8px;
-      }
     }
 
     .dropdown-header-text {
       background: @color-white;
-      color: @gray-darker;
+      color: lighten(@gray, 5%);
       font-size: 12px;
       font-weight: @text-medium;
       line-height: 1.25;
       max-width: calc(~"100% - 30px");
-      padding: 1px 5px 2px 5px;
       text-align: center;
       text-transform: uppercase;
     }
   }
 
   > .divider {
-    margin: 0;
+    margin: 3px 6px;
   }
 }
 

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

@@ -1,8 +1,8 @@
 @import '../bootstrap/navbar.less';
 
 @navbar-height: 50px;
-@navbar-application-dropdown-width: 300px;
 @navbar-height-without-border: @navbar-height - 1;
+@navbar-application-dropdown-width: 300px;
 @navbar-padding-horizontal: @grid-gutter-width;
 @navbar-padding-vertical: 15px;
 @navbar-margin-bottom: @navbar-padding-vertical;

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

@@ -164,6 +164,25 @@
     }
   }
 
+  &-filled {
+    background: @gray-lightest;
+    border-radius: 5px;
+    box-shadow: none !important;
+    padding: 5px;
+    
+    > li.active,
+    > li:hover {
+      .shadow-default;
+      background: @color-white;
+      border-radius: 5px;
+      font-weight: 600;
+
+      > a, > span, > div {
+        box-shadow: none !important;
+      }
+    }
+  }
+
   &.nav-justified {
     @media (min-width: 0) {
       display: flex;

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

@@ -7,6 +7,7 @@
   @import (multiple) "responsive/display.less";
   @import (multiple) "responsive/flexbox.less";
   @import (multiple) "responsive/floating.less";
+  @import (multiple) "responsive/grid.less";
   @import (multiple) "responsive/hyphens.less";
   @import (multiple) "responsive/overflow.less";
   @import (multiple) "responsive/position.less";

package/lib/style/css/utils/responsive/display.less

@@ -2,6 +2,8 @@
 .display-inline-block@{suffix} { display: inline-block !important }
 .display-flex@{suffix} { display: flex !important }
 .display-inline-flex@{suffix} { display: inline-flex !important }
+.display-grid@{suffix} { display: grid !important }
+.display-inline-grid@{suffix} { display: inline-grid !important }
 .display-inline@{suffix} { display: inline !important }
 .display-contents@{suffix} { display: contents !important}
 .display-none@{suffix} { display: none !important }

package/lib/style/css/utils/responsive/grid.less

@@ -0,0 +1,6 @@
+/* Grid - Basics */
+.grid-template-columns-2@{suffix} { grid-template-columns: repeat(2, auto) !important }
+.grid-template-columns-3@{suffix} { grid-template-columns: repeat(3, auto) !important }
+.grid-template-columns-4@{suffix} { grid-template-columns: repeat(4, auto) !important }
+.grid-template-columns-5@{suffix} { grid-template-columns: repeat(5, auto) !important }
+.grid-template-columns-6@{suffix} { grid-template-columns: repeat(6, auto) !important }