@rio-cloud/rio-uikit 0.16.0-beta-1 → 0.16.0-beta-2

package/lib/hooks/useFullscreen.js

@@ -0,0 +1,244 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _noop = _interopRequireDefault(require("lodash/fp/noop"));
+
+var _useEvent = _interopRequireDefault(require("./useEvent"));
+
+// inspired by https://github.com/imbhargav5/rooks/blob/main/src/hooks/useFullscreen.ts
+// Note old Internet Explorer 11 is skipped here as it is not supported anymore
+// New WebKit:
+//     'webkitRequestFullscreen',
+//     'webkitExitFullscreen',
+//     'webkitFullscreenElement',
+//     'webkitFullscreenEnabled',
+//     'webkitfullscreenchange',
+//     'webkitfullscreenerror',
+//
+// // Old WebKit:
+//     'webkitRequestFullScreen',
+//     'webkitCancelFullScreen',
+//     'webkitCurrentFullScreenElement',
+//     'webkitCancelFullScreen',
+//     'webkitfullscreenchange',
+//     'webkitfullscreenerror',
+// type FullscreenApi = {
+//   isEnabled: boolean;
+//   toggle: NoopFunction | ((element?: HTMLElement) => Promise<unknown>); // toggle
+//   /** @deprecated Please use useFullScreen({onChange : function() {}}) instead. */
+//   onChange: NoopFunction | ((callback: OnChangeEventCallback) => void); // onchange
+//   /** @deprecated Please use useFullScreen({onError : function() {}}) instead. */
+//   onError: NoopFunction | ((callback: EventCallback) => void); // onerror
+//   request: NoopFunction | ((element?: HTMLElement) => Promise<unknown>); // request
+//   exit: NoopFunction | (() => Promise<unknown>); // exit
+//   isFullscreen: boolean; // isFullscreen
+//   element: HTMLElement | null | undefined;
+// };
+var defaultValue = {
+  requestFullscreen: _noop.default,
+  exitFullscreen: _noop.default,
+  toggleFullscreen: _noop.default,
+  isEnabled: false,
+  isFullscreen: false,
+  onChange: _noop.default,
+  onError: _noop.default
+}; // type RequestFullscreenOptions = {
+//   // string will help to ease type casting
+//   navigationUI?: string | 'auto' | 'hide' | 'show';
+// };
+// type FullScreenOptions = {
+//   onChange?: OnChangeEventCallback;
+//   onError?: EventCallback;
+//   requestFullscreenOptions?: RequestFullscreenOptions;
+// };
+
+var requestFunctions = ['requestFullscreen', 'webkitRequestFullscreen', 'webkitRequestFullScreen', 'mozRequestFullScreen'];
+var exitFunctions = ['exitFullscreen', 'webkitExitFullscreen', 'webkitCancelFullScreen', 'mozCancelFullScreen'];
+var fullscreenElementFunctions = ['fullscreenElement', 'webkitFullscreenElement', 'webkitCurrentFullScreenElement', 'mozFullScreenElement'];
+var isFullscreenEnabledFunctions = ['fullscreenElement', 'webkitFullscreenEnabled', 'webkitCurrentFullScreenElement', 'mozFullScreenEnabled'];
+
+var getFnName = function getFnName(fnMap, targetElement) {
+  return fnMap.find(function (fnName) {
+    if (fnName in targetElement) {
+      return fnName;
+    }
+  });
+}; // Element centered fullscreen functions
+
+
+var getRequestFunctionName = function getRequestFunctionName() {
+  var targetElement = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
+  return getFnName(requestFunctions, targetElement);
+}; // Document fullscreen functions
+
+
+var getExitFunctionName = function getExitFunctionName() {
+  return getFnName(exitFunctions, document);
+};
+
+var getFullscreenElementFunctionName = function getFullscreenElementFunctionName() {
+  return getFnName(fullscreenElementFunctions, document);
+};
+
+var getIsFullscreenEnabledFunctionName = function getIsFullscreenEnabledFunctionName() {
+  return getFnName(isFullscreenEnabledFunctions, document);
+};
+
+var useFullscreen = function useFullscreen() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  if (typeof window === 'undefined') {
+    console.warn('useFullscreen: window is undefined.');
+    return defaultValue;
+  }
+
+  var element = options.element,
+      onChange = options.onChange,
+      onError = options.onError,
+      _options$requestFulls = options.requestFullscreenOptions,
+      requestFullscreenOptions = _options$requestFulls === void 0 ? {} : _options$requestFulls; // use either a defined target or when document is set, use the html element as in Chrome the
+  // document does not have a request function. It needs to be an element.
+
+  var defaultFullscreenElement = !element || element === document ? document.querySelector('html') : element;
+  var initialFullscreenElement = document[getFullscreenElementFunctionName()];
+
+  var _useState = (0, _react.useState)(Boolean(initialFullscreenElement)),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isFullscreen = _useState2[0],
+      setIsFullscreen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(initialFullscreenElement),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      fullscreenElement = _useState4[0],
+      setFullscreenElement = _useState4[1];
+
+  var requestFullscreen = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(newTargetElement) {
+      var isHtmlElement, target;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              // check whether the new target element is a real DOm node or just a function
+              isHtmlElement = newTargetElement instanceof HTMLElement;
+              _context.prev = 1;
+              target = newTargetElement && isHtmlElement ? newTargetElement : defaultFullscreenElement;
+              _context.next = 5;
+              return target[getRequestFunctionName(target)](requestFullscreenOptions);
+
+            case 5:
+              return _context.abrupt("return", _context.sent);
+
+            case 8:
+              _context.prev = 8;
+              _context.t0 = _context["catch"](1);
+              console.log(_context.t0);
+
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 8]]);
+    }));
+
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), []);
+  var exitFullscreen = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.prev = 0;
+
+            if (!fullscreenElement) {
+              _context2.next = 5;
+              break;
+            }
+
+            _context2.next = 4;
+            return document[getExitFunctionName()]();
+
+          case 4:
+            return _context2.abrupt("return", _context2.sent);
+
+          case 5:
+            _context2.next = 10;
+            break;
+
+          case 7:
+            _context2.prev = 7;
+            _context2.t0 = _context2["catch"](0);
+            console.warn(_context2.t0);
+
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2, null, [[0, 7]]);
+  })), [fullscreenElement]);
+  var toggleFullscreen = (0, _react.useCallback)(function (newTargetElement) {
+    if (fullscreenElement) {
+      exitFullscreen();
+    } else {
+      requestFullscreen(newTargetElement);
+    }
+  }, [fullscreenElement]);
+
+  var handleChangeEvent = function handleChangeEvent() {
+    var currentFullscreenElement = document[getFullscreenElementFunctionName()];
+    var isOpen = Boolean(currentFullscreenElement);
+
+    if (isOpen) {
+      // fullscreen was enabled
+      setIsFullscreen(true);
+      setFullscreenElement(currentFullscreenElement);
+    } else {
+      // fullscreen was disabled
+      setIsFullscreen(false);
+      setFullscreenElement(null);
+    }
+
+    onChange === null || onChange === void 0 ? void 0 : onChange.call(document, event, isOpen);
+  };
+
+  var handleErrorEvent = function handleErrorEvent() {
+    return function (event) {
+      return onError === null || onError === void 0 ? void 0 : onError.call(document, event);
+    };
+  };
+
+  (0, _useEvent.default)('fullscreenchange', handleChangeEvent);
+  (0, _useEvent.default)('webkitfullscreenchange', handleChangeEvent);
+  (0, _useEvent.default)('mozfullscreenchange', handleChangeEvent);
+  (0, _useEvent.default)('fullscreenerror', handleErrorEvent);
+  (0, _useEvent.default)('webkitfullscreenerror', handleErrorEvent);
+  (0, _useEvent.default)('mozfullscreenerror', handleErrorEvent);
+  return {
+    requestFullscreen: requestFullscreen,
+    exitFullscreen: exitFullscreen,
+    toggleFullscreen: toggleFullscreen,
+    isFullscreen: isFullscreen,
+    isEnabled: Boolean(document[getIsFullscreenEnabledFunctionName(document)])
+  };
+};
+
+var _default = useFullscreen;
+exports.default = _default;

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

@@ -102,6 +102,7 @@
 @import (less) '../components/Switch.less';
 @import (less) '../components/TableSortArrows.less';
 @import (less) '../components/TableSettingsDialog.less';
+@import (less) '../components/TableToolbar.less';
 @import (less) '../components/Tag.less';
 @import (less) '../components/TagManager.less';
 @import (less) '../components/Teaser.less';

package/lib/style/css/components/Select.less

@@ -247,9 +247,7 @@ select {
 }
 
 .multiselect {
-
   .dropdown-toggle {
-
     > .selected-option-list {
       width: auto;
     }

package/lib/style/css/components/TableToolbar.less

@@ -0,0 +1,121 @@
+.table-toolbar {
+  margin-bottom: 10px;
+
+  .table-toolbar-container {
+    align-items: flex-end;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+
+    [class*='table-toolbar-group'] {
+      align-self: flex-end;
+      display: flex;
+      flex-wrap: wrap;
+      max-width: 100%;
+
+      @media (max-width: @screen-ls) {
+        width: 100%;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+
+        .table-toolbar-column {
+          width: 100%;
+          margin: 0 !important;
+
+          // horizontal space between elements
+          .btn,
+          .dropdown:not(.btn-group),
+          .form-control,
+          .DatePicker {
+            margin: 0 0 10px 0;
+          }
+
+          // all elemnts with 100% width
+          div:not([class]),
+          .table-toolbar-search,
+          .input-group,
+          .btn,
+          .dropdown,
+          .form-control,
+          .btn-group {
+            width: 100%;
+          }
+
+          // remove double bottom space
+          .DatePicker .form-control {
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      .form-group {
+        margin-bottom: 0;
+      }
+
+      .table-toolbar-column,
+      .form-group {
+        .form-group;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        margin-bottom: 15px;
+        max-width: 100%;
+        position: relative;
+
+        @media (min-width: @screen-ls-max) {
+          &.table-toolbar-column-spacer {
+            padding-right: 18px;
+
+            &:after {
+              background: @gray-light;
+              bottom: 5px;
+              content: '';
+              height: @input-height-base - 10px;
+              position: absolute;
+              right: 0;
+              width: 2px;
+            }
+          }
+        }
+
+        + .table-toolbar-column {
+          margin-left: 15px;
+        }
+      }
+
+      .table-btn-toolbar {
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      > .table-toolbar-label {
+        width: 100%;
+      }
+
+      &[class*='-left'] {
+        flex: 1 1 auto;
+      }
+
+      &[class*='-right'] {
+        justify-content: flex-end;
+        margin-left: 15px;
+      }
+    }
+  }
+
+  .table-toolbar-search {
+    max-width: 100%;
+    width: 300px;
+  }
+}
+
+.table-toolbar-cards-sorting {
+  &:not(.multiselect-table) {
+    margin-bottom: 10px;
+  }
+
+  &.multiselect-table {
+  float: left;
+    margin: 0 0 -(@btn-size-default) 47px !important;
+  }
+}

package/lib/style/css/components/Tooltip.less

@@ -18,9 +18,9 @@
   &.tooltip-onboarding {
     max-width: calc(~'100vw - 30px');
 
-    &:not([class*='margin-']) {
-      margin: 0 !important;
-    }
+    // &:not([class*='margin-']) {
+    //   margin: 0 !important;
+    // }
 
     &[class*='max-width'] {
       .tooltip-inner {
@@ -150,10 +150,8 @@
     padding: @arrow-size;
 
     .tooltip-arrow {
-      bottom: 0;
       border-top-color: @color;
       border-width: @arrow-size @arrow-size 0 @arrow-size;
-      transform: translate(-50%, 100%);
     }
   }
 
@@ -161,10 +159,8 @@
     padding: 0 @arrow-size;
 
     .tooltip-arrow {
-      left: 0;
       border-right-color: @color;
       border-width: @arrow-size @arrow-size @arrow-size 0;
-      transform: translate(-100%, -50%);
     }
   }
 
@@ -172,10 +168,8 @@
     padding: @arrow-size 0;
 
     .tooltip-arrow {
-      top: 0;
       border-bottom-color: @color;
       border-width: 0 @arrow-size @arrow-size @arrow-size;
-      transform: translate(-50%, -100%);
     }
   }
 
@@ -183,13 +177,50 @@
     padding: 0 @arrow-size;
 
     .tooltip-arrow {
-      right: 0;
       border-left-color: @color;
       border-width: @arrow-size 0 @arrow-size @arrow-size;
     }
   }
 }
 
+.tooltip {
+  &[x-placement^="top"] {
+    .tooltip-arrow {
+      bottom: 0;
+    }
+  }
+
+  &[x-placement^="right"] {
+    .tooltip-arrow {
+      left: 0;
+    }
+  }
+
+  &[x-placement^="bottom"] {
+    .tooltip-arrow {
+      top: 0;
+    }
+  }
+
+  &[x-placement^="left"] {
+    .tooltip-arrow {
+      right: 0;
+    }
+  }
+
+  &[x-placement^="top-start"], &[x-placement^="bottom-start"] {
+    .tooltip-inner {
+      margin-left: 10px;
+    }
+  }
+
+  &[x-placement^="top-end"], &[x-placement^="bottom-end"] {
+    .tooltip-inner {
+      margin-right: 10px;
+    }
+  }
+}
+
 // Tippy
 .tippy-touch {
   cursor: pointer !important

package/lib/style/css/design/tables.less

@@ -845,128 +845,6 @@
   }
 }
 
-.table-toolbar {
-  margin-bottom: 10px;
-
-  .table-toolbar-container {
-    align-items: flex-end;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-
-    [class*='table-toolbar-group'] {
-      align-self: flex-end;
-      display: flex;
-      flex-wrap: wrap;
-      max-width: 100%;
-
-      @media (max-width: @screen-ls) {
-        width: 100%;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
-
-        .table-toolbar-column {
-          width: 100%;
-          margin: 0 !important;
-
-          // horizontal space between elements
-          .btn,
-          .dropdown:not(.btn-group),
-          .form-control,
-          .DatePicker {
-            margin: 0 0 10px 0;
-          }
-
-          // all elemnts with 100% width
-          div:not([class]),
-          .table-toolbar-search,
-          .input-group,
-          .btn,
-          .dropdown,
-          .form-control,
-          .btn-group {
-            width: 100%;
-          }
-
-          // remove double bottom space
-          .DatePicker .form-control {
-            margin-bottom: 0;
-          }
-        }
-      }
-
-      .form-group {
-        margin-bottom: 0;
-      }
-
-      .table-toolbar-column,
-      .form-group {
-        .form-group;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-        margin-bottom: 15px;
-        max-width: 100%;
-        position: relative;
-
-        @media (min-width: @screen-ls-max) {
-          &.table-toolbar-column-spacer {
-            padding-right: 18px;
-
-            &:after {
-              background: @gray-light;
-              bottom: 5px;
-              content: '';
-              height: @input-height-base - 10px;
-              position: absolute;
-              right: 0;
-              width: 2px;
-            }
-          }
-        }
-
-        + .table-toolbar-column {
-          margin-left: 15px;
-        }
-      }
-
-      .table-btn-toolbar {
-        display: flex;
-        flex-wrap: wrap;
-      }
-
-      > .table-toolbar-label {
-        width: 100%;
-      }
-
-      &[class*='-left'] {
-        flex: 1 1 auto;
-      }
-
-      &[class*='-right'] {
-        justify-content: flex-end;
-        margin-left: 15px;
-      }
-    }
-  }
-
-  .table-toolbar-search {
-  max-width: 100%;
-  width: 300px;
-  }
-}
-
-.table-toolbar-cards-sorting {
-  &:not(.multiselect-table) {
-  margin-bottom: 10px;
-  }
-
-  &.multiselect-table {
-  float: left;
-  margin: 0 0 -(@btn-size-default) 47px !important;
-  }
-}
-
 // Bootstrap Cols
 table td[class*="col-"],
 table th[class*="col-"] {

package/lib/version.json

@@ -1,3 +1,3 @@
 {
-"version": "0.16.0-beta-1"
+"version": "0.16.0-beta-2"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.0-beta-1",
+    "version": "0.16.0-beta-2",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {
@@ -43,6 +43,7 @@
         "@babel/preset-env": "^7.16.11",
         "@babel/preset-react": "^7.16.7",
         "@babel/runtime": "^7.16.7",
+        "@svgr/webpack": "^6.2.1",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^27.4.1",
@@ -70,8 +71,8 @@
         "eslint-plugin-getsentry": "^2.0.0",
         "eslint-plugin-import": "^2.25.4",
         "eslint-plugin-jest": "^26.1.1",
-        "eslint-plugin-prettier": "^4.0.0",
         "eslint-plugin-prefer-arrow": "^1.2.3",
+        "eslint-plugin-prettier": "^4.0.0",
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-hooks": "^4.3.0",
         "expect": "^27.4.6",
@@ -104,7 +105,6 @@
         "source-map-explorer": "^2.5.2",
         "strip-ansi": "^7.0.1",
         "style-loader": "^3.3.1",
-        "svg-react-loader": "^0.4.6",
         "ts-loader": "^9.2.6",
         "ttf2woff2": "^4.0.2",
         "typescript": "^4.5.5",