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

package/lib/components/table/TableViewToggles.js

@@ -9,17 +9,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -27,106 +21,103 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _OverlayTrigger = _interopRequireDefault(require("../overlay/OverlayTrigger"));
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _Tooltip = _interopRequireDefault(require("../tooltip/Tooltip"));
+
+var _excluded = ["viewType", "initialViewType", "onViewTypeChange", "className", "disabledViewTypes", "disabled", "tableViewTooltipContent", "singleCardViewTooltipContent", "multiCardsViewTooltipContent"];
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 // TODO: add responsive behaviour and trigger a change from table to list for small screen -> see DriverAdministration
-var TableViewToggles = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(TableViewToggles, _Component);
-
-  var _super = _createSuper(TableViewToggles);
-
-  function TableViewToggles(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, TableViewToggles);
-    _this = _super.call(this, props);
-    _this.state = {
-      viewType: _this.props.initialViewType
-    };
-    _this.handleSetTableView = _this.handleSetTableView.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleSetSingleCardsView = _this.handleSetSingleCardsView.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleSetMultiCardsView = _this.handleSetMultiCardsView.bind((0, _assertThisInitialized2.default)(_this));
-    return _this;
-  } // eslint-disable-next-line camelcase
-
-
-  (0, _createClass2.default)(TableViewToggles, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (this.props.viewType !== nextProps.viewType) {
-        this.setState({
-          viewType: nextProps.viewType
-        });
-      }
-    }
-  }, {
-    key: "handleSetTableView",
-    value: function handleSetTableView() {
-      this.setState({
-        viewType: TableViewToggles.VIEW_TYPE_TABLE
-      });
-      this.props.onViewTypeChange(TableViewToggles.VIEW_TYPE_TABLE);
-    }
-  }, {
-    key: "handleSetSingleCardsView",
-    value: function handleSetSingleCardsView() {
-      this.setState({
-        viewType: TableViewToggles.VIEW_TYPE_SINGLE_CARD
-      });
-      this.props.onViewTypeChange(TableViewToggles.VIEW_TYPE_SINGLE_CARD);
-    }
-  }, {
-    key: "handleSetMultiCardsView",
-    value: function handleSetMultiCardsView() {
-      this.setState({
-        viewType: TableViewToggles.VIEW_TYPE_MULTI_CARDS
-      });
-      this.props.onViewTypeChange(TableViewToggles.VIEW_TYPE_MULTI_CARDS);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var viewType = this.state.viewType;
-      var _this$props = this.props,
-          className = _this$props.className,
-          disabledViewTypes = _this$props.disabledViewTypes,
-          disabled = _this$props.disabled;
-      var wrapperClassNames = (0, _classnames.default)('TableViewToggles', 'btn-group', 'display-flex', 'flex-row', className && className);
-      var buttonClassNames = (0, _classnames.default)('btn btn-default btn-icon-only', disabled && 'disabled pointer-events-none');
-      var tableViewActiveClasses = (0, _classnames.default)(buttonClassNames, viewType === TableViewToggles.VIEW_TYPE_TABLE && 'active');
-      var cardViewActiveClasses = (0, _classnames.default)(buttonClassNames, viewType === TableViewToggles.VIEW_TYPE_SINGLE_CARD && 'active');
-      var multiCardsViewActiveClasses = (0, _classnames.default)(buttonClassNames, viewType === TableViewToggles.VIEW_TYPE_MULTI_CARDS && 'active');
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: wrapperClassNames
-      }, !disabledViewTypes.includes(TableViewToggles.VIEW_TYPE_TABLE) && /*#__PURE__*/_react.default.createElement("button", {
-        className: tableViewActiveClasses,
-        type: "button",
-        onClick: this.handleSetTableView
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "rioglyph rioglyph-table-view"
-      })), !disabledViewTypes.includes(TableViewToggles.VIEW_TYPE_SINGLE_CARD) && /*#__PURE__*/_react.default.createElement("button", {
-        className: cardViewActiveClasses,
-        type: "button",
-        onClick: this.handleSetSingleCardsView
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "rioglyph rioglyph-th-list"
-      })), !disabledViewTypes.includes(TableViewToggles.VIEW_TYPE_MULTI_CARDS) && /*#__PURE__*/_react.default.createElement("button", {
-        className: multiCardsViewActiveClasses,
-        type: "button",
-        onClick: this.handleSetMultiCardsView
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "rioglyph rioglyph-split-view"
-      })));
+var wrapWithTooltip = function wrapWithTooltip(tooltipContent, element) {
+  return /*#__PURE__*/_react.default.createElement(_OverlayTrigger.default, {
+    placement: "bottom",
+    overlay: /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+      id: "tooltip",
+      allowOnTouch: true
+    }, tooltipContent)
+  }, element);
+};
+
+var TableViewToggles = function TableViewToggles(props) {
+  var viewType = props.viewType,
+      initialViewType = props.initialViewType,
+      onViewTypeChange = props.onViewTypeChange,
+      className = props.className,
+      disabledViewTypes = props.disabledViewTypes,
+      disabled = props.disabled,
+      tableViewTooltipContent = props.tableViewTooltipContent,
+      singleCardViewTooltipContent = props.singleCardViewTooltipContent,
+      multiCardsViewTooltipContent = props.multiCardsViewTooltipContent,
+      remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+
+  var _useState = (0, _react.useState)(initialViewType),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      internaViewType = _useState2[0],
+      setInternalViewType = _useState2[1]; // update internal state when external state changes - controlled component case
+
+
+  (0, _react.useEffect)(function () {
+    if (viewType) {
+      setInternalViewType(viewType);
     }
-  }]);
-  return TableViewToggles;
-}(_react.Component);
+  }, [viewType]);
+
+  var handleSetTableView = function handleSetTableView() {
+    setInternalViewType(TableViewToggles.VIEW_TYPE_TABLE);
+    onViewTypeChange(TableViewToggles.VIEW_TYPE_TABLE);
+  };
+
+  var handleSetSingleCardsView = function handleSetSingleCardsView() {
+    setInternalViewType(TableViewToggles.VIEW_TYPE_SINGLE_CARD);
+    onViewTypeChange(TableViewToggles.VIEW_TYPE_SINGLE_CARD);
+  };
+
+  var handleSetMultiCardsView = function handleSetMultiCardsView() {
+    setInternalViewType(TableViewToggles.VIEW_TYPE_MULTI_CARDS);
+    onViewTypeChange(TableViewToggles.VIEW_TYPE_MULTI_CARDS);
+  };
+
+  var wrapperClassNames = (0, _classnames.default)('TableViewToggles', 'btn-group', 'display-flex', 'flex-row', className && className);
+  var buttonClassNames = (0, _classnames.default)('btn btn-default btn-icon-only', disabled && 'disabled pointer-events-none');
+  var tableViewActiveClasses = (0, _classnames.default)(buttonClassNames, internaViewType === TableViewToggles.VIEW_TYPE_TABLE && 'active');
+  var cardViewActiveClasses = (0, _classnames.default)(buttonClassNames, internaViewType === TableViewToggles.VIEW_TYPE_SINGLE_CARD && 'active');
+  var multiCardsViewActiveClasses = (0, _classnames.default)(buttonClassNames, internaViewType === TableViewToggles.VIEW_TYPE_MULTI_CARDS && 'active');
+
+  var tableViewButton = /*#__PURE__*/_react.default.createElement("button", {
+    className: tableViewActiveClasses,
+    type: "button",
+    onClick: handleSetTableView
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "rioglyph rioglyph-table-view"
+  }));
+
+  var singleCardViewButton = /*#__PURE__*/_react.default.createElement("button", {
+    className: cardViewActiveClasses,
+    type: "button",
+    onClick: handleSetSingleCardsView
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "rioglyph rioglyph-th-list"
+  }));
+
+  var multiCardViewButton = /*#__PURE__*/_react.default.createElement("button", {
+    className: multiCardsViewActiveClasses,
+    type: "button",
+    onClick: handleSetMultiCardsView
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "rioglyph rioglyph-split-view"
+  }));
+
+  var showTableViewButton = !disabledViewTypes.includes(TableViewToggles.VIEW_TYPE_TABLE);
+  var showSingleCardViewButton = !disabledViewTypes.includes(TableViewToggles.VIEW_TYPE_SINGLE_CARD);
+  var showMultiCardViewButton = !disabledViewTypes.includes(TableViewToggles.VIEW_TYPE_MULTI_CARDS);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, remainingProps, {
+    className: wrapperClassNames
+  }), showTableViewButton && (tableViewTooltipContent ? wrapWithTooltip(tableViewTooltipContent, tableViewButton) : tableViewButton), showSingleCardViewButton && (singleCardViewTooltipContent ? wrapWithTooltip(singleCardViewTooltipContent, singleCardViewButton) : singleCardViewButton), showMultiCardViewButton && (multiCardsViewTooltipContent ? wrapWithTooltip(multiCardsViewTooltipContent, multiCardViewButton) : multiCardViewButton));
+};
 
 TableViewToggles.VIEW_TYPE_TABLE = 'TABLE';
 TableViewToggles.VIEW_TYPE_SINGLE_CARD = 'SINGLE_CARD';
@@ -143,7 +134,10 @@ TableViewToggles.propTypes = {
   disabledViewTypes: _propTypes.default.arrayOf(_propTypes.default.oneOf([TableViewToggles.VIEW_TYPE_TABLE, TableViewToggles.VIEW_TYPE_SINGLE_CARD, TableViewToggles.VIEW_TYPE_MULTI_CARDS])),
   onViewTypeChange: _propTypes.default.func,
   disabled: _propTypes.default.bool,
-  className: _propTypes.default.string
+  className: _propTypes.default.string,
+  tableViewTooltipContent: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  singleCardViewTooltipContent: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  multiCardsViewTooltipContent: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
 };
 var _default = TableViewToggles;
 exports.default = _default;

package/lib/components/tooltip/Tooltip.js

@@ -65,7 +65,7 @@ var Tooltip = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     ref: ref,
     className: wrapperClasses,
     style: outerStyle,
-    "data-offset": 40
+    "data-offset": 20
   }), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     className: "tooltip-arrow"
   }, arrowProps)), /*#__PURE__*/_react.default.createElement("div", {

package/lib/es/useFullscreen.d.ts

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

package/lib/es/useFullscreen.js

@@ -0,0 +1,15 @@
+"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 _useFullscreen2.default;
+  }
+});
+
+var _useFullscreen2 = _interopRequireDefault(require("../hooks/useFullscreen"));

package/lib/hooks/useFullscreen.js

@@ -0,0 +1,242 @@
+"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,
+  isFullscreen: false,
+  isEnabled: false
+}; // 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/_exports/rio-website.less

@@ -1604,12 +1604,12 @@ body .module-content {
     @media (max-width: @screen-md) {
       .marketplace-search-header {
         &:before {
-          background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+          background: linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.50));
           bottom: 0;
           content: "";
           left: 0;
           position: absolute;
-          height: 75%;
+          height: 100%;
           width: 100%;
         }
       }
@@ -1789,6 +1789,10 @@ blockquote {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+
+    .marketplace-details-panel & {
+      max-width: calc(~"100vw - 110px");
+    }
   }
 
   // no scale animations on mobile

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

@@ -188,6 +188,20 @@
     }
   }
 
+  &.dropup.open .dropdown-menu {
+    bottom: 0;
+    left: 0;
+    transform: translateY(~"-@{btn-size-default}");
+
+    .input-sm & {
+      transform: translateY(~"-@{btn-size-sm}");
+    }
+
+    .input-lg & {
+      transform: translateY(~"-@{btn-size-lg}");
+    }
+  }
+
   .inactiveIcon {
     .rioglyph, span {
       color: @gray-light!important;
@@ -247,9 +261,7 @@ select {
 }
 
 .multiselect {
-
   .dropdown-toggle {
-
     > .selected-option-list {
       width: auto;
     }