@rio-cloud/rio-uikit 0.16.1-beta.24 → 0.16.2-beta.2

package/lib/es/RuleConnector.d.ts

@@ -1,5 +1,9 @@
 declare module '@rio-cloud/rio-uikit/lib/es/RuleConnector' {
     import React from 'react';
     import { RuleConnectorProps } from './types';
-    export default class RuleConnector extends React.Component<RuleConnectorProps> {}
+    export default class RuleConnector extends React.Component<RuleConnectorProps> {
+        static START = 'start';
+        static CENTER = 'center';
+        static END = 'end';
+    }
 }

package/lib/es/SaveDialog.d.ts

@@ -1,5 +1,12 @@
 declare module '@rio-cloud/rio-uikit/lib/es/SaveDialog' {
     import React from 'react';
     import { SaveDialogProps } from './types';
-    export default class SaveDialog extends React.Component<SaveDialogProps> {}
+    export default class SaveDialog extends React.Component<SaveDialogProps> {
+        static SIZE_SM = 'sm';
+        static SIZE_MD = 'md';
+        static SIZE_LG = 'lg';
+        static SIZE_XL = 'xl';
+        static SIZE_FULL = 'full';
+        static SIZE_FULL_SCREEN = 'fullscreen';
+    }
 }

package/lib/es/Select.d.ts

@@ -1,5 +1,5 @@
-declare module '@rio-cloud/rio-uikit/lib/es/Select' {
-    import React from 'react';
-    import { SelectProps } from './types';
-    export default class Select extends React.Component<SelectProps> {}
-}
+import React from 'react';
+import { SelectProps } from './types';
+
+export { SelectOption } from './types';
+export default class Select extends React.Component<SelectProps> {}

package/lib/es/Sidebar.d.ts

@@ -1,5 +1,11 @@
 declare module '@rio-cloud/rio-uikit/lib/es/Sidebar' {
     import React from 'react';
     import { SidebarProps } from './types';
-    export default class Sidebar extends React.Component<SidebarProps> {}
+    export default class Sidebar extends React.Component<SidebarProps> {
+        static LEFT = 'left';
+        static RIGHT = 'right';
+
+        static MODE_FLY = 'fly';
+        static MODE_FLUID = 'fluid';
+    }
 }

package/lib/es/SimpleDialog.d.ts

@@ -1,5 +1,12 @@
 declare module '@rio-cloud/rio-uikit/lib/es/SimpleDialog' {
     import React from 'react';
     import { SimpleDialogProps } from './types';
-    export default class SimpleDialog extends React.Component<SimpleDialogProps> {}
+    export default class SimpleDialog extends React.Component<SimpleDialogProps> {
+        static SIZE_SM = 'sm';
+        static SIZE_MD = 'md';
+        static SIZE_LG = 'lg';
+        static SIZE_XL = 'xl';
+        static SIZE_FULL = 'full';
+        static SIZE_FULL_SCREEN = 'fullscreen';
+    }
 }

package/lib/es/SimpleTooltip.d.ts

@@ -1,5 +1,29 @@
 declare module '@rio-cloud/rio-uikit/lib/es/SimpleTooltip' {
     import React from 'react';
     import { SimpleTooltipProps } from './types';
-    export default class SimpleTooltip extends React.Component<SimpleTooltipProps> {}
+    export default class SimpleTooltip extends React.Component<SimpleTooltipProps> {
+        static TRIGGER_CLICK = 'click';
+        static TRIGGER_HOVER = 'hover';
+        static TRIGGER_FOCUS = 'focus';
+
+        static AUTO_START = 'auto-start';
+        static AUTO = 'auto';
+        static AUTO_END = 'auto-end';
+
+        static TOP_START = 'top-start';
+        static TOP = 'top';
+        static TOP_END = 'top-end';
+
+        static BOTTOM_START = 'bottom-start';
+        static BOTTOM = 'bottom';
+        static BOTTOM_END = 'bottom-end';
+
+        static RIGHT_START = 'right-start';
+        static RIGHT = 'right';
+        static RIGHT_END = 'right-end';
+
+        static LEFT_START = 'left-start';
+        static LEFT = 'left';
+        static LEFT_END = 'left-end';
+    }
 }

package/lib/es/SplitDialog.d.ts

@@ -1,5 +1,12 @@
 declare module '@rio-cloud/rio-uikit/lib/es/SplitDialog' {
     import React from 'react';
     import { SplitDialogProps } from './types';
-    export default class SplitDialog extends React.Component<SplitDialogProps> {}
+    export default class SplitDialog extends React.Component<SplitDialogProps> {
+        static SIZE_SM = 'sm';
+        static SIZE_MD = 'md';
+        static SIZE_LG = 'lg';
+        static SIZE_XL = 'xl';
+        static SIZE_FULL = 'full';
+        static SIZE_FULL_SCREEN = 'fullscreen';
+    }
 }

package/lib/es/SteppedProgressBar.d.ts

@@ -1,5 +1,9 @@
 declare module '@rio-cloud/rio-uikit/lib/es/SteppedProgressBar' {
     import React from 'react';
     import { SteppedProgressBarProps } from './types';
-    export default class SteppedProgressBar extends React.Component<SteppedProgressBarProps> {}
+    export default class SteppedProgressBar extends React.Component<SteppedProgressBarProps> {
+        static VARIANT_CIRCLE = 'circle';
+        static VARIANT_RECTANGLE = 'rectangle';
+        static VARIANT_ROADSIGN = 'roadsign';
+    }
 }

package/lib/es/Switch.d.ts

@@ -1,5 +1,8 @@
 declare module '@rio-cloud/rio-uikit/lib/es/Switch' {
     import React from 'react';
     import { SwitchProps } from './types';
-    export default class Switch extends React.Component<SwitchProps> {}
+    export default class Switch extends React.Component<SwitchProps> {
+        static LABEL_POSITION_LEFT = 'left';
+        static LABEL_POSITION_RIGHT = 'right';
+    }
 }

package/lib/es/TagManager.d.ts

@@ -1,5 +1,5 @@
-declare module '@rio-cloud/rio-uikit/lib/es/TagManager' {
-    import React from 'react';
-    import { TagManagerProps } from './types';
-    export default class TagManager extends React.Component<TagManagerProps> {}
-}
+import React from 'react';
+import { TagManagerProps } from './types';
+
+export { TagManagerTag } from './types';
+export default class TagManager extends React.Component<TagManagerProps> {}

package/lib/es/Tooltip.d.ts

@@ -1,5 +1,32 @@
 declare module '@rio-cloud/rio-uikit/lib/es/Tooltip' {
     import React from 'react';
     import { TooltipProps } from './types';
-    export default class Tooltip extends React.Component<TooltipProps> {}
+    export default class Tooltip extends React.Component<TooltipProps> {
+        static STYLE_DEFAULT = 'default';
+        static STYLE_ONBOARDING = 'onboarding';
+
+        static AUTO_START = 'auto-start';
+        static AUTO = 'auto';
+        static AUTO_END = 'auto-end';
+
+        static TOP_START = 'top-start';
+        static TOP = 'top';
+        static TOP_END = 'top-end';
+
+        static BOTTOM_START = 'bottom-start';
+        static BOTTOM = 'bottom';
+        static BOTTOM_END = 'bottom-end';
+
+        static RIGHT_START = 'right-start';
+        static RIGHT = 'right';
+        static RIGHT_END = 'right-end';
+
+        static LEFT_START = 'left-start';
+        static LEFT = 'left';
+        static LEFT_END = 'left-end';
+
+        static TEXT_ALIGNMENT_LEFT = 'left';
+        static TEXT_ALIGNMENT_CENTER = 'center';
+        static TEXT_ALIGNMENT_RIGHT = 'right';
+    }
 }

package/lib/es/components/charts/chartHelper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mapGridOptions = exports.getFromDefaultColors = exports.getColor = exports.defaultChartColors = exports.CURSOR_BACKGROUND_COLOR = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _colors = _interopRequireDefault(require("../../styles/shared/colors.json"));
+var _colors = _interopRequireDefault(require("../../styles/variables/colors.json"));
 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; }
 var brightColors = ['color-warmup-corn', 'color-coldplay-khaki'];

package/lib/es/components/dropdown/ButtonDropdown.js

@@ -75,11 +75,16 @@ var ButtonDropdown = function ButtonDropdown(props) {
     _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
     refDropdownMenu = _React$useState4[0],
     setRefDropdownMenu = _React$useState4[1];
+  var _React$useState5 = _react["default"].useState(null),
+    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
+    refSplitButtonToggle = _React$useState6[0],
+    setRefSplitButtonToggle = _React$useState6[1];
   var defaultPopperConfig = {
     placement: getPlacement(pullRight, dropup),
     modifiers: []
   };
-  var _usePopper = (0, _reactPopper.usePopper)(refDropdownToggle, refDropdownMenu, popperConfig || defaultPopperConfig),
+  var popperParentRef = splitButton && pullRight ? refSplitButtonToggle : refDropdownToggle;
+  var _usePopper = (0, _reactPopper.usePopper)(popperParentRef, refDropdownMenu, popperConfig || defaultPopperConfig),
     styles = _usePopper.styles,
     attributes = _usePopper.attributes;
   var wrapperRef = (0, _useClickOutside["default"])(function () {
@@ -121,7 +126,7 @@ var ButtonDropdown = function ButtonDropdown(props) {
   var handleDropdownButtonClick = splitButton ? handleSplitLabelButtonClick : toggleOpen;
   var isOpen = isUncontrolled ? internalOpen : open;
   var wrapperClasses = (0, _classnames["default"])('dropdown', 'btn-group', isOpen && 'open', className);
-  var dropdownClasses = (0, _classnames["default"])(usePortal && 'dropdown-portal', dropdownClassName);
+  var dropdownClasses = (0, _classnames["default"])(usePortal && 'dropdown-portal', splitButton && pullRight && 'pull-right', dropdownClassName);
   var dropdownMenu = /*#__PURE__*/_react["default"].createElement(_MenuItems["default"], (0, _extends2["default"])({
     className: dropdownClasses,
     ref: setRefDropdownMenu,
@@ -145,7 +150,8 @@ var ButtonDropdown = function ButtonDropdown(props) {
     bsStyle: bsStyle,
     disabled: disabled,
     className: toggleClassName,
-    onClick: toggleOpen
+    onClick: toggleOpen,
+    ref: setRefSplitButtonToggle
   }), isOpen && usePortal && /*#__PURE__*/_reactDom["default"].createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu);
 };
 ButtonDropdown.defaultProps = {

package/lib/es/components/mapMarker/ClusterMapMarker.js

@@ -33,9 +33,9 @@ var ClusterMapMarker = function ClusterMapMarker(props) {
   var classes = (0, _classnames["default"])(active && 'active', 'rio-map-marker', 'rio-map-marker-center-center', !clickable && 'pointer-events-none');
   var clusterClasses = (0, _classnames["default"])('rio-map-cluster-cirlce', colorClass);
   var baseColor = getColorMapping(colorClass) || markerColor;
-  var markerBackgroundColor = active ? 'bg-white' : baseColor;
+  var markerBackgroundColor = active ? 'bg-map-marker-active' : baseColor;
   var markerBorderColor = baseColor.replace('bg-', 'border-color-');
-  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-white';
+  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'color-map-marker-text';
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes
   }, /*#__PURE__*/_react["default"].createElement("div", {

package/lib/es/components/mapMarker/SingleMapMarker.js

@@ -59,9 +59,9 @@ var SingleMapMarker = function SingleMapMarker(props) {
   };
   var mapDirection = getMapDirection(moving, bearing, rotationStyle);
   var baseColor = getColorMapping(colorClass, markerColor);
-  var markerBackgroundColor = active ? 'bg-white' : baseColor;
+  var markerBackgroundColor = active ? 'bg-map-marker-active' : baseColor;
   var markerBorderColor = baseColor.replace('bg-', 'border-color-');
-  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-white';
+  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'color-map-marker-text';
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes
   }, /*#__PURE__*/_react["default"].createElement("div", {

package/lib/es/components/rules/RuleConnector.js

@@ -55,6 +55,9 @@ var RuleConnector = function RuleConnector(props) {
     className: rightRoundedBoxBorderClipping
   })));
 };
+RuleConnector.START = 'start';
+RuleConnector.CENTER = 'center';
+RuleConnector.END = 'end';
 RuleConnector.defaultProps = {
   placement: 'center',
   icon: 'rioglyph-plus',
@@ -67,7 +70,7 @@ RuleConnector.defaultProps = {
   className: ''
 };
 RuleConnector.propTypes = {
-  placement: _propTypes["default"].oneOf(['start', 'center', 'end']),
+  placement: _propTypes["default"].oneOf([RuleConnector.START, RuleConnector.CENTER, RuleConnector.END]),
   icon: _propTypes["default"].string,
   hidden: _propTypes["default"].bool,
   background: _propTypes["default"].string,

package/lib/es/components/selects/BaseDropdownMenu.js

@@ -110,33 +110,43 @@ var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
     value: function handleKeydown(event) {
       switch (event.keyCode) {
         case 27:
-          // close on esc key or on tab
-          this.closeMenu();
-          break;
+          {
+            // close on esc key or on tab
+            this.closeMenu();
+            break;
+          }
         case 9:
-          // close on tab
-          this.closeMenu();
-          break;
+          {
+            // close on tab
+            this.closeMenu();
+            break;
+          }
         case 13:
-          // select on enter
-          this.selectOptionOnEnter(event);
-          break;
+          {
+            // select on enter
+            this.selectOptionOnEnter(event);
+            break;
+          }
         case 38:
-          // prevent scrolling the page when dropdown menu is open
-          event.preventDefault();
+          {
+            // prevent scrolling the page when dropdown menu is open
+            event.preventDefault();
 
-          // select above on arrow up key
-          this.focusOption(_scrollItemIntoView.UP);
-          (0, _scrollItemIntoView["default"])(_scrollItemIntoView.UP, this.getDropdownDOMNode(), this.getFocusedOptionNode());
-          break;
+            // select above on arrow up key
+            this.focusOption(_scrollItemIntoView.UP);
+            (0, _scrollItemIntoView["default"])(_scrollItemIntoView.UP, this.getDropdownDOMNode(), this.getFocusedOptionNode());
+            break;
+          }
         case 40:
-          // prevent scrolling the page when dropdown menu is open
-          event.preventDefault();
+          {
+            // prevent scrolling the page when dropdown menu is open
+            event.preventDefault();
 
-          // select below on arrow down key
-          this.focusOption(_scrollItemIntoView.DOWN);
-          (0, _scrollItemIntoView["default"])(_scrollItemIntoView.DOWN, this.getDropdownDOMNode(), this.getFocusedOptionNode());
-          break;
+            // select below on arrow down key
+            this.focusOption(_scrollItemIntoView.DOWN);
+            (0, _scrollItemIntoView["default"])(_scrollItemIntoView.DOWN, this.getDropdownDOMNode(), this.getFocusedOptionNode());
+            break;
+          }
         default:
           break;
       }
@@ -148,11 +158,15 @@ var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
       var focusedItemIndex = this.state.focusedItemIndex;
       switch (direction) {
         case _scrollItemIntoView.UP:
-          nextFocusedItem = focusedItemIndex === 0 ? focusedItemIndex : focusedItemIndex - 1;
-          break;
+          {
+            nextFocusedItem = focusedItemIndex === 0 ? focusedItemIndex : focusedItemIndex - 1;
+            break;
+          }
         case _scrollItemIntoView.DOWN:
-          nextFocusedItem = focusedItemIndex === this.props.options.length - 1 ? focusedItemIndex : focusedItemIndex + 1;
-          break;
+          {
+            nextFocusedItem = focusedItemIndex === this.props.options.length - 1 ? focusedItemIndex : focusedItemIndex + 1;
+            break;
+          }
         default:
           break;
       }
@@ -342,7 +356,7 @@ BaseDropdownMenu.defaultProps = {
   onSelect: function onSelect() {},
   onClose: function onClose() {},
   options: [],
-  autoDropDirection: true,
+  autoDropDirection: false,
   pullRight: false,
   useActiveClass: false,
   keyboardUsed: false,

package/lib/es/components/selects/Multiselect.js

@@ -18,11 +18,15 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactOnclickoutside = _interopRequireDefault(require("react-onclickoutside"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _isEqual = _interopRequireDefault(require("lodash/fp/isEqual"));
+var _logDeprecatedWarnings = _interopRequireDefault(require("../../utils/logDeprecatedWarnings"));
 var _BaseDropdownMenu = require("./BaseDropdownMenu");
 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 _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 warningProps = [{
+  prop: 'autoDropDirection'
+}];
 var Multiselect = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(Multiselect, _Component);
   var _super = _createSuper(Multiselect);
@@ -217,6 +221,7 @@ var Multiselect = /*#__PURE__*/function (_Component) {
         placeholder = _this$props4.placeholder,
         counterMessage = _this$props4.counterMessage,
         renderCounterMessage = _this$props4.renderCounterMessage;
+      (0, _logDeprecatedWarnings["default"])(warningProps, this.props, 'Multiselect');
       var classnames = (0, _classnames["default"])('dropdown-toggle', 'form-control', 'text-left', bsSize === 'large' && 'input-lg',
       // TODO: deprecte since it's not consistent
       bsSize === 'small' && 'input-sm',
@@ -250,7 +255,6 @@ var Multiselect = /*#__PURE__*/function (_Component) {
       var _this6 = this;
       var _this$props5 = this.props,
         pullRight = _this$props5.pullRight,
-        autoDropDirection = _this$props5.autoDropDirection,
         noItemMessage = _this$props5.noItemMessage;
       var options = this.state.filteredOptions.map(function (option) {
         option.selected = _this6.state.selectedItems.indexOf(option.id) !== -1;
@@ -265,7 +269,6 @@ var Multiselect = /*#__PURE__*/function (_Component) {
         onSelect: this.onOptionChange,
         onClose: this.closeMenu,
         noItemMessage: noItemMessage,
-        autoDropDirection: autoDropDirection,
         pullRight: pullRight,
         useActiveClass: true
       });
@@ -447,7 +450,6 @@ Multiselect.defaultProps = {
   options: [],
   selectedItems: [],
   disabled: false,
-  autoDropDirection: true,
   pullRight: false,
   hasError: false,
   useFilter: false,

package/lib/es/components/selects/Select.js

@@ -19,6 +19,7 @@ var _reactOnclickoutside = _interopRequireDefault(require("react-onclickoutside"
 var _classnames = _interopRequireDefault(require("classnames"));
 var _isEqual = _interopRequireDefault(require("lodash/fp/isEqual"));
 var _logPropError = _interopRequireDefault(require("../../utils/logPropError"));
+var _logDeprecatedWarnings = _interopRequireDefault(require("../../utils/logDeprecatedWarnings"));
 var _isNil = _interopRequireDefault(require("lodash/fp/isNil"));
 var _BaseDropdownMenu = require("./BaseDropdownMenu");
 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); }
@@ -29,6 +30,9 @@ var errorProps = [{
   prop: 'toggleButtonLabel',
   replacement: 'selectedOptionText'
 }];
+var warningProps = [{
+  prop: 'autoDropDirection'
+}];
 var DEFAULT_FOCUSED_ITEM_INDEX = -1;
 var Select = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(Select, _Component);
@@ -114,8 +118,8 @@ var Select = /*#__PURE__*/function (_Component) {
       var _this2 = this;
       var _this$props = this.props,
         className = _this$props.className,
-        hasError = _this$props.hasError;
-      var dropup = this.isAutoDropActive() ? this.state.dropup : this.props.dropup;
+        hasError = _this$props.hasError,
+        dropup = _this$props.dropup;
       var classes = (0, _classnames["default"])('select', dropup && 'dropup', 'dropdown', hasError && 'has-error', this.state.isOpen && 'open', className && className);
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes,
@@ -195,6 +199,7 @@ var Select = /*#__PURE__*/function (_Component) {
         id = _this$props3$id === void 0 ? name : _this$props3$id,
         selectedOptionText = _this$props3.selectedOptionText;
       (0, _logPropError["default"])(errorProps, this.props, 'Select');
+      (0, _logDeprecatedWarnings["default"])(warningProps, this.props, 'Select');
       var _this$state = this.state,
         isOpen = _this$state.isOpen,
         selectedItem = _this$state.selectedItem;
@@ -233,7 +238,6 @@ var Select = /*#__PURE__*/function (_Component) {
 
       var _this$props4 = this.props,
         pullRight = _this$props4.pullRight,
-        autoDropDirection = _this$props4.autoDropDirection,
         noItemMessage = _this$props4.noItemMessage,
         dropdownClassName = _this$props4.dropdownClassName;
 
@@ -260,7 +264,6 @@ var Select = /*#__PURE__*/function (_Component) {
         onSelect: this.onOptionChange,
         onClose: this.closeMenu,
         noItemMessage: noItemMessage,
-        autoDropDirection: autoDropDirection,
         pullRight: pullRight,
         dropdownClassName: dropdownClassName,
         requestItemDOMValues: this.state.requestItemDOMValues
@@ -400,7 +403,6 @@ Select.defaultProps = {
   onChange: function onChange() {},
   options: [],
   disabled: false,
-  autoDropDirection: true,
   pullRight: false,
   dropup: false,
   hasError: false,

package/lib/es/components/sidebars/Sidebar.js

@@ -243,7 +243,7 @@ var Sidebar = /*#__PURE__*/function (_Component) {
       var headerClassNames = (0, _classnames["default"])('SidebarHeader', headerClassName && headerClassName, showHeaderBorder && 'show-border');
       var titleClassNames = (0, _classnames["default"])('SidebarTitle', titleClassName && titleClassName);
       var bodyClassNames = (0, _classnames["default"])('SidebarBody', bodyClassName && bodyClassName);
-      var backdropClassNames = (0, _classnames["default"])('SidebarBackdrop', makeBackdropVisible && 'bg-black opacity-50', backdropClassName && backdropClassName);
+      var backdropClassNames = (0, _classnames["default"])('SidebarBackdrop', makeBackdropVisible && 'sidebar-backdrop-bg', backdropClassName && backdropClassName);
       var fullscreenIconClasses = (0, _classnames["default"])('rioglyph', isFullscreen ? 'rioglyph-resize-small' : 'rioglyph-resize-full');
       var resizeLimitClasses = (0, _classnames["default"])('SidebarResizeLimit', isResize && 'display-block');
       var isRight = position === Sidebar.RIGHT;

package/lib/es/framer-motion.d.ts

@@ -0,0 +1 @@
+export * from 'framer-motion';

package/lib/es/hooks/useScrollPosition.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var getModuleContent = function getModuleContent() {
+  return document.getElementsByClassName('module-content')[0];
+};
+
+// "target" can be "window", "document.body", a "ref" or undefiend
+// where in later case the module-content is taken as default
+
+var useScrollPosition = function useScrollPosition(target) {
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    targetElement = _useState2[0],
+    setTargetElement = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    scrollPosition = _useState4[0],
+    setScrollPosition = _useState4[1];
+  (0, _react.useEffect)(function () {
+    var checkForModuleContent = null;
+
+    // In cae the target is undefined it might be that the module-content is not rendered yet,
+    // hence check periodically for the existence
+    if (!target) {
+      checkForModuleContent = setInterval(function () {
+        var element = getModuleContent();
+        if (element) {
+          setTargetElement(element);
+        }
+      }, 300);
+    } else if (target && checkForModuleContent) {
+      console.log('clearInterval');
+      clearInterval(checkForModuleContent);
+    }
+
+    // In case the target is a "ref" - set the targetElement when current is defined
+    else if (target !== null && target !== void 0 && target.current && !checkForModuleContent) {
+      setTargetElement(target.current);
+    }
+
+    // In case it's "wondow" or "document.body"
+    else {
+      setTargetElement(target);
+    }
+    return {
+      "if": function _if(checkForModuleContent) {
+        clearInterval(check);
+      }
+    };
+  }, [target]);
+  var handleScroll = function handleScroll() {
+    requestAnimationFrame(function () {
+      if (targetElement === window) {
+        setScrollPosition(targetElement.scrollY);
+      } else {
+        setScrollPosition(targetElement.scrollTop);
+      }
+    });
+  };
+  (0, _react.useEffect)(function () {
+    if (targetElement) {
+      targetElement.addEventListener('scroll', handleScroll);
+    }
+    return function () {
+      if (targetElement) {
+        targetElement.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, [targetElement]);
+  return scrollPosition;
+};
+var _default = useScrollPosition;
+exports["default"] = _default;

package/lib/es/index.js

@@ -94,9 +94,12 @@ var _exportNames = {
   useClickOutside: true,
   useClipboard: true,
   useElementSize: true,
+  useScrollPosition: true,
   hasTouch: true,
   inIframe: true,
   isDesktop: true,
+  getColorScheme: true,
+  setColorScheme: true,
   getNewGroupedSelected: true,
   ExpanderPanel: true,
   ExpanderList: true,
@@ -829,6 +832,12 @@ Object.defineProperty(exports, "enableSupportMarker", {
     return _toggleSupportMarker2.enableSupportMarker;
   }
 });
+Object.defineProperty(exports, "getColorScheme", {
+  enumerable: true,
+  get: function get() {
+    return _colorScheme.getColorScheme;
+  }
+});
 Object.defineProperty(exports, "getNewGroupedSelected", {
   enumerable: true,
   get: function get() {
@@ -883,6 +892,12 @@ Object.defineProperty(exports, "parseSorting", {
     return _routeUtils.parseSorting;
   }
 });
+Object.defineProperty(exports, "setColorScheme", {
+  enumerable: true,
+  get: function get() {
+    return _colorScheme.setColorScheme;
+  }
+});
 Object.defineProperty(exports, "sortByProperty", {
   enumerable: true,
   get: function get() {
@@ -955,6 +970,12 @@ Object.defineProperty(exports, "useOnMount", {
     return _useOnMount["default"];
   }
 });
+Object.defineProperty(exports, "useScrollPosition", {
+  enumerable: true,
+  get: function get() {
+    return _useScrollPosition["default"];
+  }
+});
 Object.defineProperty(exports, "useTimeout", {
   enumerable: true,
   get: function get() {
@@ -980,7 +1001,7 @@ Object.keys(_framerMotion).forEach(function (key) {
     }
   });
 });
-var _colors2 = _interopRequireDefault(require("./styles/shared/colors.json"));
+var _colors2 = _interopRequireDefault(require("./styles/variables/colors.json"));
 var _Button2 = _interopRequireDefault(require("./components/button/Button"));
 var _AutoSuggest2 = _interopRequireDefault(require("./components/autosuggest/AutoSuggest"));
 var _ToggleButton2 = _interopRequireDefault(require("./components/button/ToggleButton"));
@@ -1061,7 +1082,9 @@ var _useInterval = _interopRequireDefault(require("./hooks/useInterval"));
 var _useClickOutside = _interopRequireDefault(require("./hooks/useClickOutside"));
 var _useClipboard = _interopRequireDefault(require("./hooks/useClipboard"));
 var _useElementSize = _interopRequireDefault(require("./hooks/useElementSize"));
+var _useScrollPosition = _interopRequireDefault(require("./hooks/useScrollPosition"));
 var _deviceUtils = require("./utils/deviceUtils");
+var _colorScheme = require("./utils/colorScheme");
 var _GroupSelectionUtil = require("./utils/GroupSelectionUtil");
 var _ExpanderPanel2 = _interopRequireDefault(require("./components/expander/ExpanderPanel"));
 var _ExpanderList2 = _interopRequireDefault(require("./components/expander/ExpanderList"));