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

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

@@ -26,15 +26,16 @@
   .shadow-hard-to-bottom();
   margin: -1px 0 0 0;
   padding: 0;
-  min-width: 100%;
 
   > li {
     > a {
       cursor: pointer;
       line-height: 1.25;
       padding: 7px 13px;
+      margin: 2px 6px;
       position: relative;
       user-select: none;
+      border-radius: 4px;
 
       &:active:focus {
         outline: 0;
@@ -48,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 {
@@ -67,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

@@ -0,0 +1,82 @@
+// RIO Theme // Responsive Utility Classes
+.resonsive-imports(@breakpoint) {
+  @suffix: @breakpoint;
+  @import (multiple) "responsive/alignment.less";
+  @import (multiple) "responsive/backgrounds.less";
+  @import (multiple) "responsive/border.less";
+  @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";
+  @import (multiple) "responsive/spacings.less";
+  @import (multiple) "responsive/sizing.less";
+  @import (multiple) "responsive/text.less";
+}
+
+// RIO Theme // Utility Classes
+.import-utilities(@default, @xs, @ls, @sm, @md, @lg, @xl, @print) {
+
+  // Basic Utility Classes
+  & when (@default = true) {
+    @import (less) 'colors.less';
+    @import (less) 'custom.less';
+    @import (less) 'cursors.less';
+    @import (less) 'ellipsis.less';
+    @import (less) 'grid.less';
+    @import (less) 'misc.less';
+    @import (less) 'opacity.less';
+    @import (less) 'overflow.less';
+    @import (less) 'position.less';
+    @import (less) 'rounded.less';
+    @import (less) 'shadows.less';
+    @import (less) 'text.less';
+    @import (less) 'z-index.less';
+    .resonsive-imports(~'');
+  }
+
+  // Breakpoints
+  & when (@xs = true) {
+    @media (max-width: @screen-xs-max) {
+      .resonsive-imports(-xs);
+    }
+  }
+
+  & when (@ls = true) {
+    @media (min-width: @screen-ls) {
+      .resonsive-imports(-ls);
+    }
+  }
+
+  & when (@sm = true) {
+    @media (min-width: @screen-sm) {
+      .resonsive-imports(-sm);
+    }
+  }
+
+  & when (@md = true) {
+    @media (min-width: @screen-md) {
+      .resonsive-imports(-md);
+    }
+  }
+
+  & when (@lg = true) {
+    @media (min-width: @screen-lg) {
+      .resonsive-imports(-lg);
+    }
+  }
+
+  & when (@xl = true) {
+    @media (min-width: @screen-xl) {
+      .resonsive-imports(-xl);
+    }
+  }
+
+  & when (@print = true) {
+    @media print {
+      .resonsive-imports(-print);
+    }
+  }
+}

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

@@ -1,4 +1,12 @@
 /* Border */
+
+// default values used as shorthand ".border" class
+.border@{suffix} {
+  border-style: solid !important;
+  border-width: 1px !important;
+  border-color: @gray-light !important;
+}
+
 .border {
   &-style-solid@{suffix} { border-style: solid !important}
   &-style-dotted@{suffix} { border-style: dotted !important}
@@ -28,29 +36,29 @@
     &-highlight-light@{suffix} { border-color: @color-highlight-light !important}
     &-highlight-lighter@{suffix} { border-color: @color-highlight-lighter !important}
     &-highlight-lightest@{suffix} { border-color: @color-highlight-lightest !important}
-    &-highlight-decent @{suffix} { border-color: @color-highlight-decent !important}
-    &-success @{suffix} { border-color: @brand-success !important}
-    &-warning @{suffix} { border-color: @brand-warning !important}
-    &-danger @{suffix} { border-color: @brand-danger !important}
+    &-highlight-decent@{suffix} { border-color: @color-highlight-decent !important}
+    &-success@{suffix} { border-color: @brand-success !important}
+    &-warning@{suffix} { border-color: @brand-warning !important}
+    &-danger@{suffix} { border-color: @brand-danger !important}
 
-    &-status-available { border-color: @color-status-available!important }
-    &-status-driving { border-color: @color-status-driving !important }
-    &-status-resting { border-color: @color-status-resting !important }
-    &-status-working { border-color: @color-status-working!important }
+    &-status-available@{suffix} { border-color: @color-status-available!important }
+    &-status-driving@{suffix} { border-color: @color-status-driving !important }
+    &-status-resting@{suffix} { border-color: @color-status-resting !important }
+    &-status-working@{suffix} { border-color: @color-status-working!important }
 
-    &-map-marker-asset { border-color: @color-map-marker-asset !important }
-    &-map-marker-poi { border-color: @color-map-marker-poi !important }
-    &-map-marker-geofence { border-color: @color-map-marker-geofence !important }
-    &-map-marker-route { border-color: @color-map-marker-route !important }
+    &-map-marker-asset@{suffix} { border-color: @color-map-marker-asset !important }
+    &-map-marker-poi@{suffix} { border-color: @color-map-marker-poi !important }
+    &-map-marker-geofence@{suffix} { border-color: @color-map-marker-geofence !important }
+    &-map-marker-route@{suffix} { border-color: @color-map-marker-route !important }
 
-    &-rating-1 { border-color: @color-rating-1 !important }
-    &-rating-2 { border-color: @color-rating-2 !important }
-    &-rating-3 { border-color: @color-rating-3 !important }
-    &-rating-4 { border-color: @color-rating-4 !important }
-    &-rating-5 { border-color: @color-rating-5 !important }
+    &-rating-1@{suffix} { border-color: @color-rating-1 !important }
+    &-rating-2@{suffix} { border-color: @color-rating-2 !important }
+    &-rating-3@{suffix} { border-color: @color-rating-3 !important }
+    &-rating-4@{suffix} { border-color: @color-rating-4 !important }
+    &-rating-5@{suffix} { border-color: @color-rating-5 !important }
   }
 
-  &-none@{suffix}  { border: none !important }
+  &-none@{suffix} { border: none !important }
 
   &-top-none@{suffix}, &-top-0@{suffix} { border-top-style: none !important }
   &-top-only@{suffix} {
@@ -73,7 +81,7 @@
     border-left-style: none !important;
   }
 
-  &-left-none@{suffix}, &-left-0@{suffix}  { border-left-style: none !important}
+  &-left-none@{suffix}, &-left-0@{suffix} { border-left-style: none !important}
   &-left-only@{suffix} {
     border-top-style: none !important;
     border-right-style: none !important;

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 }

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

@@ -31,7 +31,7 @@
 .sizing-vh(min-height; @suffix);
 .sizing-vh(max-height; @suffix);
 
-.ApplicationLayoutHeader {
+.ApplicationLayoutHeader@{suffix} {
   ~ .ApplicationLayoutBody,
   ~ .ApplicationLayoutSidebar {
     .sizing-vh(height; @suffix; @navbar-height);

package/lib/types.ts

@@ -242,6 +242,23 @@ export interface BrowserWarningProps {
     onBrowserSelect?: Function;
 }
 
+export interface BottomSheetProps {
+    show: boolean;
+    onClose?: Function;
+    width?: number | string;
+    height?: number | string;
+    title?: string | React.ReactNode;
+    showCloseButton?: boolean;
+    showMaximizeButton?: boolean;
+    onHeightChange?: Function;
+    detatch?: boolean;
+    useBackdrop?: boolean;
+    onBackdropClick?: Function;
+    bodyRef?: React.MutableRefObject<object>;
+    bodyClassName?: string;
+    className?: string;
+}
+
 export interface BoundingBox {
     top: number;
     bottom: number;
@@ -249,6 +266,20 @@ export interface BoundingBox {
     right: number;
 }
 
+export interface ButtonProps {
+    active?: boolean;
+    disabled?: boolean;
+    asToggle?: boolean;
+    iconOnly?: boolean;
+    multiline?: boolean;
+    block?: boolean;
+    onClick?: Function;
+    bsStyle?: 'default' | 'primary' | 'info' | 'warning' | 'danger' | 'success' | 'muted';
+    bsSize?: 'xs' | 'sm' | 'md' | 'lg';
+    variant?: 'link' | 'link-inline' | 'outline' | 'action';
+    className?: string;
+}
+
 // C --------------------------------------------------------------------------------------------------
 
 export interface CarouselProps {
@@ -269,6 +300,16 @@ export interface CarouselProps {
     nextLabel?: string;
 }
 
+export interface ChartNeedleProps {
+    width?: string;
+    height?: string;
+    x?: string;
+    y?: string;
+    rotation?: number;
+    className?: string;
+    style?: object;
+}
+
 export interface CheckboxProps {
     id?: string;
     name?: string;
@@ -677,6 +718,8 @@ export interface LoadMoreButtonProps {
 
 // M --------------------------------------------------------------------------------------------------
 
+export interface MaintenanceStateProps extends BaseStateProps {}
+
 export type markerColor =
     | 'bg-map-marker-asset'
     | 'bg-map-marker-poi'
@@ -933,7 +976,7 @@ export interface NotificationsContainerProps {
 
 export type notificationTriggerFunction = (
     message: string | JSX.Element | JSX.Element[],
-    title?: string,
+    title?: string | JSX.Element | JSX.Element[],
     timeOut?: number,
     callback?: Function,
     priority?: boolean
@@ -1107,10 +1150,12 @@ export interface PieChartProps {
     nameKey: string;
     color?: Function | string;
     filled?: boolean;
+    labels?: boolean;
     innerLabels?: boolean;
     paddingAngle?: number;
     legend?: Legend | boolean;
     tooltip?: boolean;
+    pieOptions?: object;
 }
 
 export interface Position {
@@ -1925,6 +1970,43 @@ export interface TypeCounterProps {
 
 // U --------------------------------------------------------------------------------------------------
 
+export type UseAfterMount = (
+    callback: () => void,
+    deps?: any[]
+) => void;
+
+export type UseClickOutside<T extends HTMLElement = any> = (
+    callback: () => void,
+    events?: ['mousedown', 'touchstart']
+) => React.MutableRefObject<T>;
+
+export type UseClipboard = (options: { timeout: number }) => {
+    copy: (valueToCopy: any) => void;
+    reset: () => void;
+    error: Error;
+    copied: boolean;
+};
+
+export type UseDebugInfo = (
+    componentName: string,
+    props: object
+) => {
+    count: number,
+    changedProps: any,
+    timeSinceLastRender: number,
+    lastRenderTimestamp: number,
+};
+
+export type UseEffectOnce = (
+    callback: () => void
+) => void;
+
+export type UseElementSize = (
+    elementRef: { current: Element; }
+) => [number, number];
+
+export type UseEsc<T extends keyof WindowEventMap> = (callback: (event: WindowEventMap[T]) => any) => void;
+
 export type UseEvent<T extends keyof WindowEventMap> = (
     eventType: T,
     callback: (event: WindowEventMap[T]) => any,
@@ -1932,22 +2014,50 @@ export type UseEvent<T extends keyof WindowEventMap> = (
     target?: HTMLElement
 ) => void;
 
+export type UseInterval = (
+    callback: () => void,
+    delay?: number
+) => React.MutableRefObject<object>;
+
 export type UseKey<T extends keyof WindowEventMap> = (
     callback: (event: WindowEventMap[T]) => any,
     eventTypes?: [T],
     node?: any
 ) => void;
 
-export type UseEsc<T extends keyof WindowEventMap> = (callback: (event: WindowEventMap[T]) => any) => void;
+export type UseOnlineStatus = () => boolean;
 
-export type UseClickOutside<T extends HTMLElement = any> = (
+export type UseOnScreen = (
+    ref: React.MutableRefObject<object>,
+    options?: {
+        rootMargins?: string,
+        threshold?: number | number[]
+    }
+) => boolean;
+
+export type UseRenderCount = () => number;
+
+export type UseStateWithValidation = (
+    validationFn: Function,
+    initialValue: any
+) => [any, Function, boolean];
+
+export type UseLocalStorage = (
+    key: string,
+    defaultValue: any
+) => [any, Function, Function];
+
+export type UseSessionStorage = (
+    key: string,
+    defaultValue: any
+) => [any, Function, Function];
+
+export type UseTimeout = (
     callback: () => void,
-    events?: ['mousedown', 'touchstart']
-) => React.MutableRefObject<T>;
+    delay?: number
+) => React.MutableRefObject<object>;
 
-export type UseClipboard = (options: { timeout: number }) => {
-    copy: (valueToCopy: any) => void;
-    reset: () => void;
-    error: Error;
-    copied: boolean;
-};
+export type UseWindowResize = (
+    callback: () => void,
+    timeout?: number
+) => void;

package/lib/utils/SortUtils.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sortByProperty = sortByProperty;
+exports.naturalSortByProperty = naturalSortByProperty;
+exports.SortDirection = void 0;
+
+var _orderBy = _interopRequireDefault(require("lodash/fp/orderBy"));
+
+var _naturalOrderby = require("natural-orderby");
+
+var SortDirection = {
+  ASCENDING: 'asc',
+  DESCENDING: 'desc'
+};
+exports.SortDirection = SortDirection;
+
+var toLowerCaseProp = function toLowerCaseProp(element, prop) {
+  if (typeof element[prop] === 'string') {
+    return element[prop].toLowerCase();
+  }
+
+  return element[prop];
+};
+
+function sortByProperty(array, property) {
+  var sortDirection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : SortDirection.ASCENDING;
+  var isCaseSensitiv = arguments.length > 3 ? arguments[3] : undefined;
+
+  if (!isCaseSensitiv) {
+    return (0, _orderBy.default)(function (element) {
+      return toLowerCaseProp(element, property);
+    }, sortDirection, array);
+  }
+
+  return (0, _orderBy.default)(property, sortDirection, array);
+}
+
+function naturalSortByProperty(array, property) {
+  var sortDirection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : SortDirection.ASCENDING;
+  var isCaseSensitiv = arguments.length > 3 ? arguments[3] : undefined;
+
+  if (!isCaseSensitiv) {
+    return (0, _naturalOrderby.orderBy)(array, function (element) {
+      return toLowerCaseProp(element, property);
+    }, sortDirection);
+  }
+
+  return (0, _naturalOrderby.orderBy)(array, property, sortDirection);
+}

package/lib/utils/routeUtils.js

@@ -19,20 +19,20 @@ var _get = _interopRequireDefault(require("lodash/fp/get"));
 
 var _isFinite = _interopRequireDefault(require("lodash/fp/isFinite"));
 
-var _SortUtil = require("./SortUtil");
+var _SortUtils = require("./SortUtils");
 
 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 getSortDirShort = function getSortDirShort(sortDir) {
-  return sortDir === _SortUtil.SortDirection.DESCENDING ? '-' : '+';
+  return sortDir === _SortUtils.SortDirection.DESCENDING ? '-' : '+';
 };
 
 exports.getSortDirShort = getSortDirShort;
 
 var parseSorting = function parseSorting(sortValueShort) {
-  var sortDir = sortValueShort.startsWith('-') ? _SortUtil.SortDirection.DESCENDING : _SortUtil.SortDirection.ASCENDING; // Note: due to a bug in qs 6.7.0 the '+' sorting will be parsed as a space by qs even though decoding is disabled
+  var sortDir = sortValueShort.startsWith('-') ? _SortUtils.SortDirection.DESCENDING : _SortUtils.SortDirection.ASCENDING; // Note: due to a bug in qs 6.7.0 the '+' sorting will be parsed as a space by qs even though decoding is disabled
   // therefore, we need to trim the value
 
   return {

package/lib/version.json

@@ -1,3 +1,3 @@
 {
-"version": "0.15.0-beta-44"
+"version": "0.15.0-beta-48"
 }

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.15.0-beta-44",
+    "version": "0.15.0-beta-48",
     "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",
+        "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!'",
         "check-licenses": "node tools/check-licenses.js .",
         "check-updates": "node tools/checkUpdates.js",
         "git-tasks": "node tools/gitTasks.js",
@@ -136,10 +136,11 @@
         "prop-types": "^15.7.2",
         "react-bootstrap": "1.6.3",
         "react-content-loader": "^6.0.3",
-        "react-datetime": "github:rio-cloud/react-datetime",
+        "react-datetime": "github:rio-cloud/react-datetime#v.3.1.0-merged",
         "react-debounce-input": "^3.2.3",
         "react-dropzone": "^4.3.0",
         "react-input-mask": "^3.0.0-alpha.2",
+        "react-motion": "^0.5.2",
         "react-notifications": "^1.7.2",
         "react-onclickoutside": "^6.10.0",
         "react-sortable-hoc": "^2.0.0",