@rio-cloud/rio-uikit 0.16.3-beta.2 → 0.16.3-beta.5

package/styles/components/Dialog.less

@@ -4,10 +4,12 @@
 @modal-title-x-padding: 20px;
 @modal-content-bg: var(--color-white);
 @modal-content-border-color: var(--gray-light);
-@modal-backdrop-bg: var(--always-color-black);
 @modal-header-border-color: var(--gray-lighter);
 @modal-footer-border-color: var(--gray-lighter);
 
+// Animation variables
+@modal-animation-transition: all 200ms ease-out;
+
 // Custom variables
 @modal-sm: @screen-xs;
 @modal-md: @screen-sm;
@@ -283,6 +285,23 @@ body {
             }
           }
         }
+
+        // .modal-footer {
+        //   &:before {
+        //     content: '';
+        //     height: 20px;
+        //     left: 0;
+        //     pointer-events: none;
+        //     position: absolute;
+        //     top: -21px;
+        //     width: 100%;
+        //     background: linear-gradient(
+        //       0deg,
+        //       .hsla(@color-white-hsl, 1.0)[@result],
+        //       .hsla(@color-white-hsl, 0)[@result],
+        //     );
+        //   }
+        // }
       }
     }
 
@@ -327,24 +346,16 @@ body {
   }
 
   .modal-backdrop {
-    background-color: @modal-backdrop-bg;
     bottom: 0;
     display: block;
     left: 0;
-    opacity: 0.5;
     position: fixed;
     right: 0;
     top: 0;
+    transition: @modal-animation-transition;
     z-index: @zindex-modal-background;
 
-    // Fade for backdrop
-    &.fade { opacity: 0 }
-    &.in { opacity: 0.5 }
-
-    // Bluring
     @supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {
-      opacity: 0.99;
-      background-color: .hsla(@always-color-black-hsl, 0.5)[@result];
       backdrop-filter: blur(1px);
     }
   }
@@ -460,11 +471,17 @@ body {
   .modal-content {
     display: block;
     opacity: 0;
-    transform: translate(0, -25%);
+    transform: translateY(-25%);
   }
+}
 
+[class*="modal-enter"] {
   .modal-backdrop {
-    opacity: 0;
+    background-color: .hsla(@color-black-hsl, 0.5)[@result];
+
+    [data-theme*="dark"] & {
+      background-color: .hsla(@gray-darkest-hsl, 0.3)[@result];
+    }
   }
 }
 
@@ -472,13 +489,8 @@ body {
   .modal-content {
     display: block;
     opacity: 1;
-    transform: translate(0, 0);
-    transition: all 200ms ease-out;
-  }
-
-  .modal-backdrop {
-    opacity: 0.5;
-    transition: all 200ms ease-out;
+    transform: translateY(0);
+    transition: @modal-animation-transition;
   }
 }
 
@@ -486,32 +498,14 @@ body {
   .modal-content {
     opacity: 0;
     transform: translateY(-50%);
-    transition: all 200ms ease-out;
+    transition: @modal-animation-transition;
   }
 
   .modal-backdrop {
-    opacity: 0;
-  }
-}
+    background-color: .hsla(@color-black-hsl, 0.0)[@result];
 
-// modal-body atomic vh classes for iframes with unknown height
-// .modal-body {
-//   &.height-100vh {
-//     height: calc(~"var(--vh, 1vh) * 100 - 190px") !important;
-
-//     @media (max-width: @modal-sm) {
-//       height: calc(~"var(--vh, 1vh) * 100 - 170px") !important;
-//     }
-//   }
-
-//   // no modal-footer version
-//   &:last-child {
-//     &.height-100vh {
-//       height: calc(~"var(--vh, 1vh) * 100 - 120px") !important;
-
-//       @media (max-width: @modal-sm) {
-//         height: calc(~"var(--vh, 1vh) * 100 - 90px") !important;
-//       }
-//     }
-//   }
-// }
+    [data-theme*="dark"] & {
+      background-color: .hsla(@gray-darkest-hsl, 0.0)[@result];
+    }
+  }
+}

package/styles/components/Sidebar.less

@@ -160,6 +160,15 @@
 
 .SidebarBackdrop {
   &.sidebar-backdrop-bg {
-    background: .hsla(@always-color-black-hsl, 0.6)[@result];
+    background-color: .hsla(@color-black-hsl, 0.5)[@result];
+
+    [data-theme*="dark"] & {
+      background-color: .hsla(@gray-darkest-hsl, 0.3)[@result];
+    }
+
+    @supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {
+      opacity: 0.99;
+      backdrop-filter: blur(1px);
+    }
   }
 }

package/styles/design/popovers.less

@@ -16,7 +16,7 @@
   z-index: @zindex-popover;
 
   .popover-title {
-    border-bottom: 1px solid var(--gray-light);
+    border-bottom: 1px solid var(--gray-lighter);
     padding: 13px 14px;
     font-weight: normal;
   }

package/styles/design/utilities.less

@@ -12,12 +12,20 @@
   &-margin-top-0:first-child {
     margin-top: 0 !important;
   }
+
+  &-border-top-none:first-child {
+    border-top: none !important;
+  }
 }
 
 .last-child {
   &-margin-bottom-0:last-child {
     margin-bottom: 0 !important;
   }
+
+  &-border-bottom-none:last-child {
+    border-bottom: none !important;
+  }
 }
 
 .clearance {

package/styles/variables/colors.json

@@ -1,73 +1,73 @@
 {
-	"always-color-white": "#ffffff",
-	"always-color-black": "#000000",
-	"color-white": "#ffffff",
-	"color-black": "#000000",
-	"gray-darkest": "#2a3740",
-	"gray-darker": "#4C5667",
-	"gray-dark": "#697A8B",
-	"gray": "#A7AFBB",
-	"gray-light": "#D0D8DE",
-	"gray-lighter": "#E5EBF0",
-	"gray-lightest": "#f6f8f9",
-	"brand-primary": "#30b4c0",
-	"brand-secondary": "#b23672",
-	"brand-primary-decent": "#f4fbfc",
-	"brand-secondary-decent": "#fbf5f8",
-	"brand-info": "#4B80A6",
-	"brand-success": "#5cb85c",
-	"brand-warning": "#ff8e3c",
-	"brand-danger": "#d90000",
-	"brand-info-decent": "#f5f8fb",
-	"brand-success-decent": "#f6fbf5",
-	"brand-warning-decent": "#fdf5f0",
-	"brand-danger-decent": "#fdf3f3",
-	"color-code": "#f3f3f4",
-	"color-status-available": "#239b7d",
-	"color-status-driving": "#3690ae",
-	"color-status-resting": "#626b72",
-	"color-status-working": "#94488b",
-	"color-map-marker-active": "#ffffff",
-	"color-map-marker-asset": "#2a3740",
-	"color-map-marker-poi": "#b23672",
-	"color-map-marker-geofence": "#5a4876",
-	"color-map-marker-route": "#3690ae",
-	"color-map-marker-text": "#ffffff",
-	"color-map-marker-active-night": "#ededed",
-	"color-map-marker-asset-night": "#6e757a",
-	"color-map-marker-poi-night": "#b23672",
-	"color-map-marker-geofence-night": "#79619f",
-	"color-map-marker-route-night": "#3b9fc1",
-	"color-map-marker-text-night": "#ededed",
-	"color-rating-1": "#d90000",
-	"color-rating-2": "#ff8e3c",
-	"color-rating-3": "#f8c575",
-	"color-rating-4": "#5cb85c",
-	"color-rating-5": "#4b924c",
-	"color-highlight-darkest": "#114146",
-	"color-highlight-darker": "#1c686e",
-	"color-highlight-dark": "#268e97",
-	"color-highlight": "#30b4c0",
-	"color-highlight-light": "#8ddbe3",
-	"color-highlight-lighter": "#cef0f3",
-	"color-highlight-lightest": "#ebf9fa",
-	"color-highlight-decent": "#f3fbfc",
-	"color-coldplay-wine": "#520D4E",
-	"color-coldplay-aubergine": "#5a4876",
-	"color-coldplay-kashmir": "#536E8B",
-	"color-coldplay-fountain": "#67abc5",
-	"color-coldplay-turquoise": "#4ECCC1",
-	"color-coldplay-bermuda": "#79D4B3",
-	"color-coldplay-moos": "#A1DAA3",
-	"color-coldplay-primrose": "#C7E291",
-	"color-coldplay-khaki": "#F0EB83",
-	"color-warmup-crimson": "#31144F",
-	"color-warmup-victoria": "#493D6D",
-	"color-warmup-cadillac": "#7E3E72",
-	"color-warmup-raspberry": "#B23672",
-	"color-warmup-cerise": "#E72472",
-	"color-warmup-charm": "#C9778D",
-	"color-warmup-salmon": "#F19588",
-	"color-warmup-cherokee": "#F5BB89",
-	"color-warmup-corn": "#FDE082"
-}
+    "always-color-white": "#ffffff",
+    "always-color-black": "#000000",
+    "color-white": "#ffffff",
+    "color-black": "#000000",
+    "gray-darkest": "#2a3740",
+    "gray-darker": "#4C5667",
+    "gray-dark": "#697A8B",
+    "gray": "#A7AFBB",
+    "gray-light": "#D0D8DE",
+    "gray-lighter": "#E5EBF0",
+    "gray-lightest": "#f6f8f9",
+    "brand-primary": "#30b4c0",
+    "brand-secondary": "#b23672",
+    "brand-primary-decent": "#f4fbfc",
+    "brand-secondary-decent": "#fbf5f8",
+    "brand-info": "#4B80A6",
+    "brand-success": "#5cb85c",
+    "brand-warning": "#ff8e3c",
+    "brand-danger": "#d90000",
+    "brand-info-decent": "#f5f8fb",
+    "brand-success-decent": "#f6fbf5",
+    "brand-warning-decent": "#fdf5f0",
+    "brand-danger-decent": "#fdf3f3",
+    "color-code": "#f3f3f4",
+    "color-status-available": "#239b7d",
+    "color-status-driving": "#3690ae",
+    "color-status-resting": "#626b72",
+    "color-status-working": "#94488b",
+    "color-map-marker-active": "#ffffff",
+    "color-map-marker-asset": "#2a3740",
+    "color-map-marker-poi": "#b23672",
+    "color-map-marker-geofence": "#5a4876",
+    "color-map-marker-route": "#3690ae",
+    "color-map-marker-text": "#ffffff",
+    "color-map-marker-active-night": "#ededed",
+    "color-map-marker-asset-night": "#6e757a",
+    "color-map-marker-poi-night": "#b23672",
+    "color-map-marker-geofence-night": "#79619f",
+    "color-map-marker-route-night": "#3b9fc1",
+    "color-map-marker-text-night": "#ededed",
+    "color-rating-1": "#d90000",
+    "color-rating-2": "#ff8e3c",
+    "color-rating-3": "#f8c575",
+    "color-rating-4": "#5cb85c",
+    "color-rating-5": "#4b924c",
+    "color-highlight-darkest": "#114146",
+    "color-highlight-darker": "#1c686e",
+    "color-highlight-dark": "#268e97",
+    "color-highlight": "#30b4c0",
+    "color-highlight-light": "#8ddbe3",
+    "color-highlight-lighter": "#cef0f3",
+    "color-highlight-lightest": "#ebf9fa",
+    "color-highlight-decent": "#f3fbfc",
+    "color-coldplay-wine": "#520D4E",
+    "color-coldplay-aubergine": "#5a4876",
+    "color-coldplay-kashmir": "#536E8B",
+    "color-coldplay-fountain": "#67abc5",
+    "color-coldplay-turquoise": "#4ECCC1",
+    "color-coldplay-bermuda": "#79D4B3",
+    "color-coldplay-moos": "#A1DAA3",
+    "color-coldplay-primrose": "#C7E291",
+    "color-coldplay-khaki": "#F0EB83",
+    "color-warmup-crimson": "#31144F",
+    "color-warmup-victoria": "#493D6D",
+    "color-warmup-cadillac": "#7E3E72",
+    "color-warmup-raspberry": "#B23672",
+    "color-warmup-cerise": "#E72472",
+    "color-warmup-charm": "#C9778D",
+    "color-warmup-salmon": "#F19588",
+    "color-warmup-cherokee": "#F5BB89",
+    "color-warmup-corn": "#FDE082"
+}

package/themes/Website/styles/rio-website.less

@@ -369,8 +369,9 @@ body .module-content {
         display: none;
         left: 0;
         position: absolute;
-        top: 100%;
+        top: calc(100% - 1px);
         width: auto;
+        z-index: 1;
 
         li {
           float: none;

package/types.ts

@@ -16,8 +16,11 @@ export interface ActionBarItemPopoverProps {
 
 export interface ActionBarItemProps {
     id?: string;
-    className?: string;
     title?: string | React.ReactNode;
+    className?: string;
+    hidePopoverOnClick?: boolean;
+    popoverWidth?: 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500;
+    mobileDialogBodyClassName?: string;
 }
 
 export interface ActionBarItemListProps {
@@ -297,7 +300,7 @@ export interface BottomSheetProps {
     showCloseButton?: boolean;
     showMaximizeButton?: boolean;
     onHeightChange?: Function;
-    detatch?: boolean;
+    detach?: boolean;
     useBackdrop?: boolean;
     onBackdropClick?: Function;
     bodyRef?: React.MutableRefObject<object>;
@@ -2236,6 +2239,8 @@ export type UseWindowResize = (callback: () => void, timeout?: number) => void;
 
 export type UseDarkMode = () => boolean;
 
+export type UsePrevious = <T>(state: T | undefined | null) => T | undefined | null;
+
 export type UseMutationObserver = (
     targetElement: HTMLElement | React.MutableRefObject<object> | null | undefined,
     callback: MutationCallback | undefined,

package/usePrevious.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/usePrevious' {
+    import { UsePrevious } from './types';
+    export default UsePrevious;
+}

package/usePrevious.js

@@ -0,0 +1,2 @@
+import { default as _usePrevious } from './hooks/usePrevious';
+export { _usePrevious as default };

package/utils/cssuseragent.js

@@ -1,87 +1,87 @@
-/**
- * CssUserAgent (cssua.js) v2.1.31
- * http://cssuseragent.org
- *
- * Copyright (c)2006-2015 Stephen M. McKamey.
- * Licensed under The MIT License.
+/**
+ * CssUserAgent (cssua.js) v2.1.31
+ * http://cssuseragent.org
+ *
+ * Copyright (c)2006-2015 Stephen M. McKamey.
+ * Licensed under The MIT License.
  */
 /*jshint smarttabs:true, regexp:false, browser:true */
 
-/**
- * @param html {Object} root DOM element
- * @param userAgent {string} browser userAgent string
- * @return {Object}
+/**
+ * @param html {Object} root DOM element
+ * @param userAgent {string} browser userAgent string
+ * @return {Object}
  */
 export var cssua = function cssua(html, userAgent, sa) {
   'use strict';
 
-  /**
-   * @const
-   * @type {string}
+  /**
+   * @const
+   * @type {string}
    */
   var PREFIX = ' ua-';
 
-  /**
-   * @const
-   * @type {RegExp}
+  /**
+   * @const
+   * @type {RegExp}
    */
   var R_Platform = /\s*([\-\w ]+)[\s\/\:]([\d_]+\b(?:[\-\._\/]\w+)*)/;
 
-  /**
-   * @const
-   * @type {RegExp}
+  /**
+   * @const
+   * @type {RegExp}
    */
   var R_Version = /([\w\-\.]+[\s\/][v]?[\d_]+\b(?:[\-\._\/]\w+)*)/g;
 
-  /**
-   * @const
-   * @type {RegExp}
+  /**
+   * @const
+   * @type {RegExp}
    */
   var R_BlackBerry = /\b(?:(blackberry\w*|bb10)|(rim tablet os))(?:\/(\d+\.\d+(?:\.\w+)*))?/;
 
-  /**
-   * @const
-   * @type {RegExp}
+  /**
+   * @const
+   * @type {RegExp}
    */
   var R_Silk = /\bsilk-accelerated=true\b/;
 
-  /**
-   * @const
-   * @type {RegExp}
+  /**
+   * @const
+   * @type {RegExp}
    */
   var R_FluidApp = /\bfluidapp\b/;
 
-  /**
-   * @const
-   * @type {RegExp}
+  /**
+   * @const
+   * @type {RegExp}
    */
   var R_desktop = /(\bwindows\b|\bmacintosh\b|\blinux\b|\bunix\b)/;
 
-  /**
-   * @const
-   * @type {RegExp}
+  /**
+   * @const
+   * @type {RegExp}
    */
   var R_mobile = /(\bandroid\b|\bipad\b|\bipod\b|\bwindows phone\b|\bwpdesktop\b|\bxblwp7\b|\bzunewp7\b|\bwindows ce\b|\bblackberry\w*|\bbb10\b|\brim tablet os\b|\bmeego|\bwebos\b|\bpalm|\bsymbian|\bj2me\b|\bdocomo\b|\bpda\b|\bchtml\b|\bmidp\b|\bcldc\b|\w*?mobile\w*?|\w*?phone\w*?)/;
 
-  /**
-   * @const
-   * @type {RegExp}
+  /**
+   * @const
+   * @type {RegExp}
    */
   var R_game = /(\bxbox\b|\bplaystation\b|\bnintendo\s+\w+)/;
 
-  /**
-   * The root CssUserAgent
-   * @type {Object}
+  /**
+   * The root CssUserAgent
+   * @type {Object}
    */
   var cssua = {
     parse:
-    /**
-     * @param uaStr {string}
-     * @return {Object}
+    /**
+     * @param uaStr {string}
+     * @return {Object}
      */
     function parse(uaStr, sa) {
-      /**
-       * @type {Object}
+      /**
+       * @type {Object}
        */
       var ua = {};
       if (sa) {
@@ -234,21 +234,21 @@ export var cssua = function cssua(html, userAgent, sa) {
       return ua;
     },
     format:
-    /**
-     * @param ua {Object}
-     * @return {string}
+    /**
+     * @param ua {Object}
+     * @return {string}
      */
     function format(ua) {
-      /**
-       * @param b {string} browser key
-       * @param v {string} browser value
-       * @return {string} formatted CSS classes
+      /**
+       * @param b {string} browser key
+       * @param v {string} browser value
+       * @return {string} formatted CSS classes
        */
       function format(b, v) {
         b = b.split('.').join('-');
 
-        /**
-         * @type {string}
+        /**
+         * @type {string}
          */
         var css = PREFIX + b;
         if (typeof v === 'string') {
@@ -265,8 +265,8 @@ export var cssua = function cssua(html, userAgent, sa) {
         return css;
       }
 
-      /**
-       * @type {string}
+      /**
+       * @type {string}
        */
       var uaCss = '';
       for (var b in ua) {
@@ -279,10 +279,10 @@ export var cssua = function cssua(html, userAgent, sa) {
       return uaCss;
     },
     encode:
-    /**
-     * Encodes parsed userAgent object as a compact URI-Encoded key-value collection
-     * @param ua {Object}
-     * @return {string}
+    /**
+     * Encodes parsed userAgent object as a compact URI-Encoded key-value collection
+     * @param ua {Object}
+     * @return {string}
      */
     function encode(ua) {
       var query = '';
@@ -298,15 +298,15 @@ export var cssua = function cssua(html, userAgent, sa) {
     }
   };
 
-  /**
-   * @const
-   * @type {Object}
+  /**
+   * @const
+   * @type {Object}
    */
   cssua.userAgent = cssua.ua = cssua.parse(userAgent, sa);
 
-  /**
-   * @const
-   * @type {string}
+  /**
+   * @const
+   * @type {string}
    */
   var ua = cssua.format(cssua.ua) + ' js';
 

package/utils/searchNormalized.js

@@ -0,0 +1,6 @@
+export var normalizeForSearch = function normalizeForSearch(input) {
+  return input.replaceAll(/\s+/g, ' ').toLowerCase();
+};
+export var searchNormalized = function searchNormalized(input, search) {
+  return normalizeForSearch(input).includes(normalizeForSearch(search));
+};

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.3-beta.2"
-}
+    "version": "0.16.3-beta.5"
+}