@rio-cloud/rio-uikit 0.16.1-beta.23 → 0.16.1

package/lib/es/styles/design/responsive/flexgrid.less

@@ -34,6 +34,9 @@
 .align-self-start@{suffix} { align-self: flex-start !important }
 .align-self-stretch@{suffix} { align-self: stretch !important }
 
+.place-items-center@{suffix} { place-items: center !important }
+.place-self-center@{suffix} { place-self: center !important }
+
 /* Flexbox - Helper */
 .flex-0-1@{suffix} { flex: 0 1 auto !important }
 .flex-1-0@{suffix} { flex: 1 0 auto !important }
@@ -70,9 +73,4 @@ each(@gridColumns, {
 .grid-colspan-auto@{suffix} { grid-column: auto !important }
 
 // AutoRows
-.grid-auto-rows@{suffix} { grid-auto-rows: minmax(min-content, max-content)}
-
-// Placement
-.place-items-center@{suffix} {
-  place-items: center !important;
-}
+.grid-auto-rows@{suffix} { grid-auto-rows: minmax(min-content, max-content)}

package/lib/es/styles/design/responsive/sizing.less

@@ -10,6 +10,9 @@
 .max-height-0@{suffix} { max-height: 0 !important }
 .max-width-0@{suffix} { max-width: 0 !important }
 
+.max-width-none@{suffix} { max-width: none !important }
+.max-height-none@{suffix} { max-height: none !important }
+
 // width/height px
 each(@sizes-px, {
   // width

package/lib/es/styles/design/tables.less

@@ -227,8 +227,10 @@
       &.table-checkbox {
         min-width: 40px;
         width: 40px;
+        max-width: 40px;
 
         &:first-child {
+          max-width: 50px;
           min-width: 50px;
           width: 50px;
         }
@@ -281,6 +283,9 @@
 
           &:first-child {
             padding-left: @table-cell-padding;
+            max-width: 50px;
+            min-width: 50px;
+            width: 50px;
           }
 
           // > .dropdown > .dropdown-toggle {

package/lib/es/styles/mixins/panels.less

@@ -12,9 +12,9 @@
       border-top-color: @panel-border-color;
     }
 
-    .badge {
-      color: @text-color;
-      background-color: @panel-color;
+    .badge:not([class*="badge-"]) {
+      color: @gray-darkest;
+      background-color: @color-white;
     }
   }
 

package/lib/es/styles/print/print.less

@@ -1,12 +1,28 @@
 // Print utils classes - WORK IN PROGRESS
+@media screen {
+    .only-printable {
+        display: none !important;
+    }
+}
+
 @media print {
-    @page { margin: 1cm }
+    @page { margin: 0 }
+    body { margin: 1.6cm }
 
     body,
     #root {
         background: transparent !important;
     }
 
+    html,
+    html:not(.window-iframe) {
+        background-color: #ffffff;
+    }
+
+    .scroll-to-top {
+        display: none !important;
+    }
+
     // Bootstrap Stuff
     *,
     *:before,
@@ -60,9 +76,14 @@
             display: none !important;
         }
 
+        .only-printable {
+            display: block !important;
+        }
+
         .ApplicationLayoutHeader,
         .ApplicationLayoutBody,
-        .ApplicationLayoutSidebar {
+        .ApplicationLayoutSidebar,
+        #uikit-root .modal {
             &:not(.print-area) {
                 display: none !important;
             }
@@ -72,7 +93,6 @@
         .ApplicationLayoutSidebar,
         .ApplicationLayoutSidebar .Sidebar {
             float: none !important;
-            //height: auto !important;
             overflow: visible !important;
             width: 100% !important;
         }
@@ -87,17 +107,29 @@
             .SidebarContent {
                 display: block !important;
 
-                .SidebarHeader,
                 .SidebarBody {
                     display: block !important;
                 }
 
+                .SidebarHeader,
                 .SidebarFooter {
                     display: none !important;
                 }
             }
         }
 
+        #uikit-root .modal {
+            width: 100% !important;
+
+            .modal-dialog .modal-content {
+                box-shadow: none !important;
+            }
+
+            .modal-backdrop {
+                display: none !important;
+            }
+        }
+
         // Components
         .table {
             display: table !important;

package/lib/es/styles/rio-uikit-core.less

@@ -8,6 +8,7 @@
 @import (less) './design/normalize.less';
 
 // Styles // right order is important
+@import (less) './design/box-sizing.less';
 @import (less) './design/code.less';
 @import (less) './design/cols.less';
 @import (less) './design/tables.less';
@@ -70,7 +71,7 @@
 @import (less) './filter/_imports.less';
 
 // Print
-@import (less) './print/print.less';
+// @import (less) './print/print.less';
 
 // Component styles
 @import (less) './components/Activity.less';

package/lib/es/styles/rio-uikit-print-utilities.less

@@ -1,6 +1,7 @@
 // Styles
 @import (less) './variables.less';
 @import (less) './mixins/_mixins.less';
+@import (less) './print/print.less';
 
 // Utility Classes
 @import (less) './design/responsive/_imports.less';

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

@@ -2208,11 +2208,11 @@ body:not(.legal-documents) {
   }
 
   &[class*="clip-top"]:after {
-    top: 0;
+    top: -1px;
   }
 
   &[class*="clip-bottom"]::after {
-    bottom: 0;
+    bottom: -1px;
   }
 
   &[class*="clip-white"]:after {

package/lib/es/types.ts

@@ -588,7 +588,7 @@ export interface DomMarkerProps {
 
 export interface DropdownSubmenuProps {
     title?: string | React.ReactNode;
-    items?: MenuItemProps[];
+    items?: MenuItem[];
     disabled?: boolean;
     className?: string;
 }
@@ -769,15 +769,15 @@ export interface LineChartProps {
     tooltip?: ChartTooltip | boolean;
 }
 
-export interface ListMenuItems {
+export interface ListMenuItem {
     group?: string | React.ReactNode;
     groupNavItem?: React.ReactNode;
-    navItems: NavItems[];
+    navItems: NavItem[];
     isSubItem?: boolean;
 }
 
 export interface ListMenuProps {
-    menuItems: ListMenuItems[];
+    menuItems: ListMenuItem[];
     enableFilter?: boolean;
     focusFilter?: boolean;
     filterKey?: string;
@@ -808,7 +808,7 @@ export type markerColor =
     | 'bg-map-marker-geofence'
     | 'bg-map-marker-route';
 
-export interface MediaDialogMediaProps {
+export interface MediaDialogMedia {
     type: 'image' | 'video';
     src: string;
     title: string | React.ReactNode;
@@ -818,7 +818,7 @@ export interface MediaDialogMediaProps {
 }
 
 export interface MediaDialogProps extends BaseDialogProps {
-    media: MediaDialogMediaProps[];
+    media: MediaDialogMedia[];
     previousButtonText: string | React.ReactNode;
     previousButtonCallback?: Function;
     nextButtonText: string | React.ReactNode;
@@ -984,7 +984,7 @@ export interface MarkerLayerProps {
     clusterDissolvable?: boolean;
 }
 
-export interface MenuItemProps {
+export interface MenuItem {
     value?: string | React.ReactNode;
     disabled?: boolean;
     divider?: boolean;
@@ -1005,7 +1005,7 @@ interface MultiselectCounterMessage {
     many: string | React.ReactNode;
 }
 
-interface MultiselectOption {
+export interface MultiselectOption {
     id: string;
     label: string | React.ReactNode;
     selected?: boolean;
@@ -1023,7 +1023,7 @@ export interface MultiselectProps {
     pullRight?: boolean;
     autoDropDirection?: boolean;
     value?: [];
-    bsSize?: 'sm' | 'lg' | 'small' | 'large';
+    bsSize?: 'sm' | 'lg';
     disabled?: boolean;
     className?: string;
     tabIndex?: number;
@@ -1038,7 +1038,7 @@ export interface MultiselectProps {
 
 // N --------------------------------------------------------------------------------------------------
 
-export interface NavItems {
+export interface NavItem {
     key: string;
     item: React.ReactNode;
     disabled?: boolean;
@@ -1083,7 +1083,7 @@ export interface NumberControlProps {
     step?: number;
     disabled?: boolean;
     onValueChanged?: (value: number) => void;
-    bsSize?: 'sm' | 'lg' | 'small' | 'large';
+    bsSize?: 'sm' | 'lg';
     className?: string;
     unit?: string | React.ReactNode;
     inputAddon?: string;
@@ -1097,7 +1097,7 @@ export interface NumberInputProps {
     type?: string;
     disabled?: boolean;
     onValueChanged?: (value: number) => void;
-    bsSize?: 'sm' | 'lg' | 'small' | 'large';
+    bsSize?: 'sm' | 'lg';
     className?: string;
     unit?: string | React.ReactNode;
     inputAddon?: string;
@@ -1450,6 +1450,30 @@ export interface RouteProps {
     markers?: JSX.Element[];
 }
 
+export interface RulesWrapperProps {}
+
+export interface RuleContainerProps {
+    show: boolean;
+    unchecked: boolean;
+    background: string;
+    borderColor: string;
+    hideConnector: boolean;
+    customConnector: string | JSX.Element;
+    className: string;
+}
+
+export interface RuleConnectorProps {
+    placement: 'start' | 'center' | 'end';
+    icon: string;
+    hidden: boolean;
+    background: string;
+    pageBackground: string;
+    contentClassName: string;
+    hasBorder: boolean;
+    borderColor: string;
+    className: string;
+}
+
 // S --------------------------------------------------------------------------------------------------
 
 export interface SelectedSuggestion {
@@ -1533,7 +1557,7 @@ export interface SimpleButtonDropdownProps {
     noCaret?: boolean;
     splitButton?: boolean;
     usePortal?: boolean;
-    items: MenuItemProps[];
+    items: MenuItem[];
     className?: string;
     dropdownClassName?: string;
     disabled?: boolean;
@@ -1867,15 +1891,15 @@ export interface TagListProps {
     className?: string;
 }
 
-export interface TagManagerTagProp {
+export interface TagManagerTag {
     label?: string;
     toAdd?: boolean;
     toRemove?: boolean;
 }
 
 export interface TagManagerProps {
-    tagList: TagManagerTagProp[];
-    tagSuggestions: TagManagerTagProp[];
+    tagList: TagManagerTag[];
+    tagSuggestions: TagManagerTag[];
     onTagListChange?: Function;
     placeholder?: string;
     customTagPlaceholder?: string;

package/lib/es/utils/init.js

@@ -14,7 +14,7 @@ var _deviceUtils = require("./deviceUtils");
 var _version = _interopRequireDefault(require("../version.json"));
 var uikitVersion = _version["default"].version;
 
-// Note: using import.meta.env.DEV does not work here due to backwards compatibility with webpack and jest setups
+// Note: using import.meta.env.DEV does not work here due to backward compatibility with webpack and jest setups
 var isProdEnv = function isProdEnv() {
   return _process["default"].env.NODE_ENV === 'production' || location.protocol.startsWith('https');
 };

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-"version": "0.16.1-beta.23"
+"version": "0.16.1"
 }

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.1-beta.23",
+    "version": "0.16.1",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {
         "build": "npm run build:styles && npm run build:vite && echo '\n👉 For an npm release use build:npm 👈'",
-        "build:npm": "npm run build:cjs && npm run build:esm && npm run copy-to-package && echo '\n📦 Publish to npm only from within 'package' folder 📦'",
+        "build:npm": "npm run build:cjs && npm run build:esm && npm run copy-to-package && npm run fixEsmImports && echo '\n📦 Publish to npm only from within 'package' folder 📦'",
         "build:cjs": "NODE_ENV=production BABEL_ENV=cjs babel src --out-dir package/lib/es --copy-files",
         "build:esm": "NODE_ENV=production BABEL_ENV=esm babel src --out-dir package --copy-files",
         "build:vite": "vite build",
@@ -14,12 +14,14 @@
         "build:style-core": "vite build --mode style-core",
         "build:style-responsive": "vite build --mode style-responsive",
         "build:style-print": "vite build --mode style-print",
-        "build:style-website": "vite build --mode style-website",
+        "build:style-website": "vite build --mode style-website && npm run fixCssMinified",
         "build:style-buyButton": "vite build --mode style-buyButton",
         "build:style-man": "vite build --mode style-man",
         "build:style-vw": "vite build --mode style-vw",
         "build:style-scania": "vite build --mode style-scania",
         "build:style-xmas": "vite build --mode style-xmas",
+        "fixEsmImports": "node tools/fixEsmImportsInDeclarations.mjs",
+        "fixCssMinified": "node tools/fixCssMinified.mjs",
         "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",
@@ -41,15 +43,15 @@
     ],
     "devDependencies": {
         "@babel/cli": "7.19.3",
-        "@babel/core": "7.19.3",
+        "@babel/core": "7.19.6",
         "@babel/eslint-parser": "7.19.1",
         "@babel/plugin-proposal-class-properties": "7.18.6",
         "@babel/plugin-proposal-object-rest-spread": "7.19.4",
         "@babel/plugin-syntax-dynamic-import": "7.8.3",
-        "@babel/plugin-transform-modules-commonjs": "7.18.6",
+        "@babel/plugin-transform-modules-commonjs": "7.19.6",
         "@babel/plugin-transform-react-display-name": "7.18.6",
         "@babel/plugin-transform-react-jsx": "7.19.0",
-        "@babel/plugin-transform-runtime": "7.19.1",
+        "@babel/plugin-transform-runtime": "7.19.6",
         "@babel/preset-env": "7.19.4",
         "@babel/preset-react": "7.18.6",
         "@babel/runtime": "7.19.4",
@@ -60,8 +62,8 @@
         "@types/react": "18.0.21",
         "@types/react-redux": "7.1.24",
         "@types/resize-observer-browser": "0.1.7",
-        "@typescript-eslint/eslint-plugin": "5.40.0",
-        "@typescript-eslint/parser": "5.40.0",
+        "@typescript-eslint/eslint-plugin": "5.40.1",
+        "@typescript-eslint/parser": "5.40.1",
         "@vitejs/plugin-react": "^2.1.0",
         "@vitest/coverage-c8": "0.24.3",
         "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
@@ -71,7 +73,7 @@
         "dotenv": "16.0.3",
         "enzyme": "3.11.0",
         "enzyme-adapter-react-16": "1.15.6",
-        "eslint": "8.25.0",
+        "eslint": "8.26.0",
         "eslint-config-prettier": "8.5.0",
         "eslint-plugin-compat": "4.0.2",
         "eslint-plugin-getsentry": "2.0.0",
@@ -113,7 +115,7 @@
         "lodash": "4.17.21",
         "moment": "2.29.4",
         "natural-orderby": "2.0.3",
-        "process": "^0.11.10",
+        "process": "0.11.10",
         "prop-types": "15.8.1",
         "react-bootstrap": "1.6.4",
         "react-content-loader": "6.2.0",
@@ -125,6 +127,6 @@
         "react-popper": "2.3.0",
         "react-responsive": "9.0.0",
         "react-transition-group": "4.4.5",
-        "recharts": "2.1.14"
+        "recharts": "2.1.15"
     }
 }

package/styles/components/Dialog.less

@@ -212,6 +212,16 @@ body {
       .modal-body {
         position: relative;
         padding: @modal-inner-padding;
+
+        &:first-child {
+          border-top-left-radius: @border-radius-lg;
+          border-top-right-radius: @border-radius-lg;
+        }
+
+        &:last-child {
+          border-bottom-left-radius: @border-radius-lg;
+          border-bottom-right-radius: @border-radius-lg;
+        }
       }
 
       .modal-footer {

package/styles/components/Dropdown.less

@@ -1,7 +1,9 @@
 @dropdown-max-height: 211px; // Used for Select and AutoSuggest components
 
-.btn-group.open .dropdown-toggle {
-  box-shadow: none !important;
+.btn-group {
+  &.open .dropdown-toggle {
+    box-shadow: none !important;
+  }
 }
 
 .dropdown {
@@ -18,6 +20,7 @@
     padding: 0;
     position: absolute;
     text-align: left;
+    //width: 100%;
     z-index: @zindex-dropdown;
 
     // closed by default
@@ -28,6 +31,12 @@
       display: block;
     }
 
+    .AutoSuggest &,
+    .select &,
+    .multiselect & {
+      width: 100%;
+    }
+
     // portal style
     #uikit-root > & {
       display: block;

package/styles/components/Select.less

@@ -162,13 +162,17 @@
   .dropdown-menu {
     max-height: @dropdown-max-height;
     overflow-x: hidden;
-    width: 100%; // not on dropdowns, only on selects
 
     svg {
       margin-right: 0.5em;
       vertical-align: middle;
     }
 
+    &.pull-right {
+      left: auto !important;
+      right: 0 !important;
+    }
+
     > li {
       > a.focus {
         text-decoration: none;
@@ -189,11 +193,6 @@
     }
   }
 
-  &.pull-right {
-    left: auto !important;
-    right: 0 !important;
-  }
-
   &.dropup.open .dropdown-menu {
     bottom: 0;
     left: 0;

package/styles/design/box-sizing.less

@@ -0,0 +1,8 @@
+.box-sizing {
+  &-border-box {
+    box-sizing: border-box !important;
+  }
+  &-content-box {
+    box-sizing: content-box !important;
+  }
+}