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

package/lib/components/filepicker/FilePicker.js

@@ -9,124 +9,90 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-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"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactDropzone = _interopRequireDefault(require("react-dropzone"));
+var _reactDropzone = _interopRequireWildcard(require("react-dropzone"));
 
 var _Button = _interopRequireDefault(require("../button/Button"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _excluded = ["label", "accept", "multiple", "maxSize", "displayMode", "onPick", "className", "children"];
+
 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 _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; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-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 _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; } }
-
-var FilePicker = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(FilePicker, _Component);
-
-  var _super = _createSuper(FilePicker);
-
-  function FilePicker() {
-    (0, _classCallCheck2.default)(this, FilePicker);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(FilePicker, [{
-    key: "render",
-    value: function render() {
-      var _this = this;
-
-      var dropzoneProps = {
-        accept: this.props.accept,
-        multiple: this.props.multiple,
-        ref: function ref(thisDropzone) {
-          _this.thisDropzone = thisDropzone;
-        },
-        onDrop: this.onPick.bind(this),
-        maxSize: this.props.maxSize
-      }; //let content;
-      // TODO Reactivate once the dropzone is available
-      // if (this.props.displayMode === 'dropzone') {
-      //     //Dropzone
-      //     // TODO className and activeClassName/rejectClassName are deprecated.
-      //     // TODO They will have to be replaced respectively with parent div styling and
-      //     // TODO child div styling with function.
-      //     // TODO This is not possible yet because this Dropzone version still contains a default styling.
-      //     dropzoneProps = {
-      //         className: classNames('react-dropzone', this.props.className),
-      //         activeClassName: 'react-dropzone-active',
-      //         rejectClassName: 'react-dropzone-rejected',
-      //         ...dropzoneProps,
-      //     };
-      //     content = <Dropzone {...dropzoneProps} />;
-      // } else {
-      // Button
-      // TODO className will be deprecated in the following major release.
-      // TODO It will have to be replaced with parent div styling,
-      // TODO This is not possible yet because this Dropzone version still contains a default styling.
-
-      dropzoneProps = _objectSpread({
-        className: (0, _classnames.default)('invisible')
-      }, dropzoneProps);
-
-      var content = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactDropzone.default, dropzoneProps), /*#__PURE__*/_react.default.createElement(_Button.default, {
-        onClick: this.onOpenClick.bind(this),
-        className: this.props.className
-      }, this.props.label)); // }
-
-
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "FilePicker"
-      }, content);
-    }
-  }, {
-    key: "onPick",
-    value: function onPick(acceptedFiles, rejectedFiles) {
-      this.props.onPick(acceptedFiles, rejectedFiles);
-    }
-  }, {
-    key: "onOpenClick",
-    value: function onOpenClick() {
-      this.thisDropzone.open();
-    }
-  }]);
-  return FilePicker;
-}(_react.Component);
-
-exports.default = FilePicker;
+var FilePicker = function FilePicker(props) {
+  var label = props.label,
+      accept = props.accept,
+      multiple = props.multiple,
+      maxSize = props.maxSize,
+      displayMode = props.displayMode,
+      onPick = props.onPick,
+      className = props.className,
+      children = props.children,
+      remainigProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var dropzoneRef = (0, _react.useRef)();
+  var isButton = displayMode === 'button';
+  var isDropzone = displayMode === 'dropzone';
+  var isFull = displayMode === 'full';
+  var showButton = isButton || isFull;
+  var showDropzone = isDropzone || isFull;
+  var handleDrop = (0, _react.useCallback)(function (acceptedFiles, rejectedFiles) {
+    var files = accept.includes('image') ? acceptedFiles.map(function (file) {
+      return Object.assign(file, {
+        preview: URL.createObjectURL(file)
+      });
+    }) : acceptedFiles;
+    onPick(files, rejectedFiles);
+  }, [onPick, accept]);
+
+  var onOpenClick = function onOpenClick() {
+    return dropzoneRef.current.open();
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "FilePicker"
+  }, showButton && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: onOpenClick,
+    className: className
+  }, label), /*#__PURE__*/_react.default.createElement(_reactDropzone.default, (0, _extends2.default)({}, remainigProps, {
+    onDrop: handleDrop,
+    accept: accept,
+    multiple: multiple,
+    maxSize: maxSize,
+    ref: dropzoneRef
+  }), function (_ref) {
+    var getRootProps = _ref.getRootProps,
+        getInputProps = _ref.getInputProps,
+        isDragActive = _ref.isDragActive;
+    return /*#__PURE__*/_react.default.createElement("div", getRootProps(), /*#__PURE__*/_react.default.createElement("input", getInputProps()), showDropzone && children && children({
+      isDragActive: isDragActive
+    }));
+  }));
+};
+
+FilePicker.DISPLAY_MODE_BUTTON = 'button';
+FilePicker.DISPLAY_MODE_DROPZONE = 'dropzone';
+FilePicker.DISPLAY_MODE_FULL = 'full';
 FilePicker.defaultProps = {
   displayMode: 'button',
   multiple: true,
-  label: 'Select file(s)',
+  label: 'Select Files',
   accept: '',
   onPick: function onPick() {},
   className: ''
 };
 FilePicker.propTypes = {
   displayMode: _propTypes.default.string
-  /* Display mode: 'dropzone' / 'button' */
+  /* Display mode: 'dropzone' / 'button' / 'full' */
   ,
   multiple: _propTypes.default.bool
   /* Allow multiple file selections or not */
@@ -145,5 +111,8 @@ FilePicker.propTypes = {
   ,
   className: _propTypes.default.string
   /* Custom className for the displayed component (dropzone/button) */
-
-};
+  ,
+  children: _propTypes.default.any
+};
+var _default = FilePicker;
+exports.default = _default;

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/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/hooks/useFullscreen.js

@@ -52,10 +52,8 @@ var defaultValue = {
   requestFullscreen: _noop.default,
   exitFullscreen: _noop.default,
   toggleFullscreen: _noop.default,
-  isEnabled: false,
   isFullscreen: false,
-  onChange: _noop.default,
-  onError: _noop.default
+  isEnabled: false
 }; // type RequestFullscreenOptions = {
 //   // string will help to ease type casting
 //   navigationUI?: string | 'auto' | 'hide' | 'show';

package/lib/style/css/_exports/rio-buyButton.less

@@ -14,7 +14,7 @@
 // Styles
 @import (less) '../design/buttons.less';
 @import (less) '../design/labels.less';
-@import (less) '../design/visibilty.less';
+@import (less) '../design/visibility.less';
 
 // Fonts
 @font-source-sans: true;

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

@@ -33,7 +33,6 @@
 @import (less) '../design/type.less';
 @import (less) '../design/popovers.less';
 @import (less) '../design/utilities.less';
-@import (less) '../design/visibilty.less';
 @import (less) '../design/blockquote.less';
 @import (less) '../design/callouts.less';
 @import (less) '../design/container.less';
@@ -50,8 +49,10 @@
 @import (less) '../design/overflow.less';
 @import (less) '../design/position.less';
 @import (less) '../design/rounded.less';
+@import (less) '../design/sizing.less';
 @import (less) '../design/shadows.less';
 @import (less) '../design/text.less';
+@import (less) '../design/visibility.less';
 @import (less) '../design/z-index.less';
 
 // Theme
@@ -64,6 +65,9 @@
 // Animations
 @import (less) '../animations/_imports.less';
 
+// Filter
+@import (less) '../filter/_imports.less';
+
 // Print
 @import (less) '../print/print.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
@@ -2080,7 +2084,7 @@ form[id*="contactForm"] {
 // Safari image fix
 @media not all and (min-resolution:.001dpcm) {
   @supports (-webkit-appearance:none) {
-    img[src*="placeholder_transparent"] {
+    img[src*="placeholder_transparent"]:not([style*="background-image"]) {
       opacity: 0;
     }
 
@@ -2093,7 +2097,6 @@ form[id*="contactForm"] {
 }
 
 // section clippig
-
 .section-wrapper {
   &[class*="clip-"]:after {
     content: "";

package/lib/style/css/_exports/vw-uikit.less

@@ -221,7 +221,7 @@
 
     > .navigationItem {
       height: 50px;
-      width: 50px;
+      width: auto;
 
       > .ActionBarItem {
         height: 50px;

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

@@ -266,7 +266,7 @@
       max-height: ~'calc(100vh - @{navbar-height} - 20px)'; // --vh fallback
       max-height: ~'calc(var(--vh, 1vh) * 100 - @{navbar-height} - 20px)';
       max-width: calc(~'100% - 3px');
-      min-width: 100%;
+      width: 100%;
       overflow-x: hidden;
       overflow-y: auto;
 

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;

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

@@ -53,7 +53,7 @@
       }
 
       .table-toolbar-column,
-      .form-group {
+      .form-group:not(.DatePicker) {
         .form-group;
         display: flex;
         flex-direction: column;

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

@@ -219,43 +219,4 @@
       margin-right: 10px;
     }
   }
-}
-
-// Tippy
-.tippy-touch {
-  cursor: pointer !important
-}
-
-.tippy-popper {
-  -webkit-perspective: 800px;
-  max-width: 400px;
-  outline: 0;
-  perspective: 800px;
-  pointer-events: none;
-  transition-timing-function: cubic-bezier(.165, .84, .44, 1);
-  z-index: 9999;
-}
-
-.tippy-popper.html-template {
-  max-width: 96%;
-  max-width: calc(100% - 20px)
-}
-
-.tippy-tooltip {
-  position: relative;
-  color: #fff;
-  border-radius: 4px;
-  font-size: .95rem;
-  padding: .4rem .8rem;
-  text-align: center;
-  will-change: transform;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: #333
-}
-
-.tippy-tooltip [x-arrow] {
-  position: absolute;
-  width: 0;
-  height: 0
 }

package/lib/style/css/design/responsive/_imports.less

@@ -12,7 +12,6 @@
   @import (multiple) "position.less";
   @import (multiple) "sizing.less";
   @import (multiple) "text.less";
-  @import (multiple) "visibility.less";
 }
 
 // RIO Theme // Utility Classes