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

package/lib/es/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/lib/es/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/lib/es/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/lib/es/usePrevious.d.ts

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

package/lib/es/usePrevious.js

@@ -0,0 +1,13 @@
+"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 _usePrevious2["default"];
+  }
+});
+var _usePrevious2 = _interopRequireDefault(require("./hooks/usePrevious"));

package/lib/es/utils/cssuseragent.js

@@ -4,90 +4,90 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.cssua = void 0;
-/**
- * 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}
  */
 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) {
@@ -240,21 +240,21 @@ 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') {
@@ -271,8 +271,8 @@ var cssua = function cssua(html, userAgent, sa) {
         return css;
       }
 
-      /**
-       * @type {string}
+      /**
+       * @type {string}
        */
       var uaCss = '';
       for (var b in ua) {
@@ -285,10 +285,10 @@ 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 = '';
@@ -304,15 +304,15 @@ 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/lib/es/utils/searchNormalized.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.searchNormalized = exports.normalizeForSearch = void 0;
+var normalizeForSearch = function normalizeForSearch(input) {
+  return input.replaceAll(/\s+/g, ' ').toLowerCase();
+};
+exports.normalizeForSearch = normalizeForSearch;
+var searchNormalized = function searchNormalized(input, search) {
+  return normalizeForSearch(input).includes(normalizeForSearch(search));
+};
+exports.searchNormalized = searchNormalized;

package/lib/es/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.3-beta.2",
+    "version": "0.16.3-beta.5",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {
@@ -22,6 +22,9 @@
         "build:style-xmas": "vite build --mode style-xmas",
         "fixEsmImports": "node tools/fixEsmImportsInDeclarations.mjs",
         "fixCssMinified": "node tools/fixCssMinified.mjs",
+        "format-code": "npm run format-code:uikit && npm run format-code:demo",
+        "format-code:uikit": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"",
+        "format-code:demo": "prettier --write \"uikit-demo/src/**/*.{js,jsx,ts,tsx,json,md}\"",
         "copy-to-package": "copyfiles package.json README.md LICENSE package",
         "test": "vitest run",
         "test:ci": "vitest run --reporter=junit --outputFile.junit=./results/jest/junit.xml",
@@ -42,62 +45,64 @@
         "**/*.*"
     ],
     "devDependencies": {
-        "@babel/cli": "7.20.7",
-        "@babel/core": "7.20.12",
+        "@babel/cli": "7.21.0",
+        "@babel/core": "7.21.0",
         "@babel/eslint-parser": "7.19.1",
         "@babel/plugin-proposal-class-properties": "7.18.6",
         "@babel/plugin-proposal-object-rest-spread": "7.20.7",
         "@babel/plugin-syntax-dynamic-import": "7.8.3",
-        "@babel/plugin-transform-modules-commonjs": "7.20.11",
+        "@babel/plugin-transform-modules-commonjs": "7.21.2",
         "@babel/plugin-transform-react-display-name": "7.18.6",
-        "@babel/plugin-transform-react-jsx": "7.20.7",
-        "@babel/plugin-transform-runtime": "7.19.6",
+        "@babel/plugin-transform-react-jsx": "7.21.0",
+        "@babel/plugin-transform-runtime": "7.21.0",
         "@babel/preset-env": "7.20.2",
         "@babel/preset-react": "7.18.6",
-        "@babel/runtime": "7.20.7",
+        "@babel/runtime": "7.21.0",
         "@testing-library/jest-dom": "5.16.5",
         "@testing-library/react": "12.1.5",
         "@testing-library/user-event": "13.5.0",
         "@types/lodash": "4.14.191",
-        "@types/react": "18.0.26",
+        "@types/react": "18.0.28",
         "@types/react-redux": "7.1.25",
         "@types/resize-observer-browser": "0.1.7",
-        "@typescript-eslint/eslint-plugin": "5.48.1",
-        "@typescript-eslint/parser": "5.48.1",
-        "@vitejs/plugin-react": "3.0.1",
-        "@vitest/coverage-c8": "0.27.1",
+        "@typescript-eslint/eslint-plugin": "5.54.0",
+        "@typescript-eslint/parser": "5.54.0",
+        "@vitejs/plugin-react": "3.1.0",
+        "@vitest/coverage-c8": "0.29.2",
         "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
         "autoprefixer": "10.4.13",
         "copyfiles": "2.4.1",
         "dotenv": "16.0.3",
         "enzyme": "3.11.0",
         "enzyme-adapter-react-16": "1.15.7",
-        "eslint": "8.31.0",
-        "eslint-config-prettier": "8.6.0",
-        "eslint-plugin-compat": "4.0.2",
+        "eslint": "8.35.0",
+        "eslint-config-prettier": "8.7.0",
+        "eslint-plugin-compat": "4.1.2",
         "eslint-plugin-getsentry": "2.0.0",
-        "eslint-plugin-import": "2.26.0",
+        "eslint-plugin-import": "2.27.5",
         "eslint-plugin-prefer-arrow": "1.2.3",
         "eslint-plugin-prettier": "4.2.1",
-        "eslint-plugin-react": "7.32.0",
+        "eslint-plugin-react": "7.32.2",
         "eslint-plugin-react-hooks": "4.6.0",
-        "jsdom": "20.0.1",
+        "jsdom": "21.1.0",
         "jsdom-global": "3.0.2",
         "less": "4.1.3",
         "license-checker": "25.0.1",
         "postcss": "^8.4.21",
-        "postcss-preset-env": "7.8.3",
+        "postcss-preset-env": "8.0.1",
         "postcss-short": "5.0.0",
         "postcss-variable-compress": "^2.0.1",
-        "prettier": "2.8.2",
+        "pre-commit": "^1.2.2",
+        "prettier": "2.8.4",
         "react": "17.0.2",
         "react-dom": "17.0.2",
-        "react-intl": "6.2.5",
+        "react-intl": "6.2.10",
         "rollup-plugin-copy": "^3.4.0",
         "strip-ansi": "7.0.1",
         "ttf2woff2": "5.0.0",
-        "vite": "4.0.4",
-        "vitest": "^0.24.3",
+        "typescript": "4.9.5",
+        "vite": "4.1.4",
+        "vitest": "0.29.2",
         "webfont": "11.2.26",
         "webfonts-generator": "github:rio-cloud/webfonts-generator"
     },
@@ -106,11 +111,12 @@
         "react-dom": ">=17.0.0"
     },
     "dependencies": {
-        "@dnd-kit/core": "6.0.7",
+        "@dnd-kit/core": "6.0.8",
         "@dnd-kit/modifiers": "6.0.1",
         "@dnd-kit/sortable": "7.0.2",
         "@popperjs/core": "2.11.6",
         "classnames": "2.3.2",
+        "dom-helpers": "5.2.1",
         "events": "3.3.0",
         "framer-motion": "4.1.17",
         "lodash": "4.17.21",
@@ -128,6 +134,9 @@
         "react-popper": "2.3.0",
         "react-responsive": "9.0.2",
         "react-transition-group": "4.4.5",
-        "recharts": "2.3.1"
-    }
+        "recharts": "2.4.3"
+    },
+    "pre-commit": [
+        "format-code"
+    ]
 }

package/styles/components/ApplicationHeader.less

@@ -313,24 +313,39 @@
 
   .dropdown-menu {
     -webkit-overflow-scrolling: touch;
-    border: none;
     border-radius: 0 0 @border-radius-default @border-radius-default;
+    border: none;
+    margin-right: 3px; // to be in line with the top element
     max-height: ~'calc(100vh - @{ApplicationLayoutHeaderHeight} - 20px)'; // --vh fallback
     max-height: ~'calc(var(--vh, 1vh) * 100 - @{ApplicationLayoutHeaderHeight} - 20px)';
-    max-width: calc(~'100% - 3px');
-    width: 100%;
     overflow-x: hidden;
     overflow-y: auto;
+    // max-width: calc(~'100% - 3px');
+    // width: 100%;
 
-    > li > a {
-      color: var(--color-black);
-      font-size: 14px;
-      font-weight: @font-medium;
-      padding: 5px @ApplicationLayoutHeaderHeightpadding-horizontal;
-      text-transform: uppercase;
+    > li {
+      > a {
+        color: var(--color-black);
+        font-size: 14px;
+        font-weight: @font-medium;
+        padding: 5px @ApplicationLayoutHeaderHeightpadding-horizontal;
+        text-transform: uppercase;
 
-      &.inactive {
-        pointer-events: none;
+        &.inactive {
+          pointer-events: none;
+        }
+      }
+
+      iframe {
+        &.iFrameResizer,
+        &[id*="iFrameResizer"] {
+          &[style*="height: 1px"],
+          &[style*="width: 1337px"] {
+            width: calc(~"100vw - 100px") !important;
+            max-width: 1550px !important;
+            min-width: 300px !important;
+          }
+        }
       }
     }
   }
@@ -457,7 +472,7 @@
 
   .CollapsedDropdown {
     display: block;
-    
+
     > .dropdown-menu {
       left: auto;
       right: 0;

package/styles/components/BottomSheet.less

@@ -9,5 +9,14 @@
     position: absolute;
     inset: 0;
     z-index: @z-index-bottom-sheet - 1;
-    background: .hsla(@always-color-black-hsl, 0.5)[@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);
+    }
 }