@rio-cloud/rio-uikit 0.16.3-beta.9 → 0.16.4-beta.1

package/Init.d.ts

@@ -0,0 +1,3 @@
+declare module '@rio-cloud/rio-uikit/Init' {
+    export function init(): () => void;
+}

package/Init.js

@@ -0,0 +1,2 @@
+import { autoInitDocumentBootstrapping as _init } from './utils/init';
+export { _init as init };

package/README.md

@@ -8,7 +8,7 @@ The documentation and how to integrate the UIKIT in your project can be found he
 
 Starting with version `0.12.8`, all versions of the uikit will be available under https://uikit.developers.rio.cloud/${VERSION}/.
 
-Starting with verion `0.14.6`, even the corresponding uikit-demo will be published under https://uikit.developers.rio.cloud/${VERSION}/.
+Starting with version `0.14.6`, even the corresponding uikit-demo will be published under https://uikit.developers.rio.cloud/${VERSION}/.
 
 All changes made on `master` will be deployed to https://uikit.developers.rio.cloud/latest/.
 
@@ -19,9 +19,9 @@ When releasing a new version:
 
 Create a new development beta version:
 
-1. Update the `package.json`. Example `0.16.3-beta.1`
-2. Update the `src/version.json`. Example `0.16.3-beta.1`
-3. run `npm i` or update `package-lock.json`. Example `0.16.3-beta.1`
+1. Update the `package.json`. Example `0.16.4-beta.1`
+2. Update the `src/version.json`. Example `0.16.4-beta.1`
+3. run `npm i` or update `package-lock.json`. Example `0.16.4-beta.1`
 
 ## Development
 
@@ -31,7 +31,7 @@ To run the UIKIT and the UIKIT Demo locally for development, use:
 $ npm install && cd uikit-demo/ && npm i && npm start
 ```
 
-The UIKIT demo is accessable at http://localhost:8090.
+The UIKIT demo is accessible at http://localhost:8090.
 
 ## Versions List
 
@@ -82,7 +82,7 @@ Run `npm run build:npm` to compile the components via babel to the `package` fol
 
 ### Publishing to UIKIT CDN
 
-Run `npm run build` to build the production bundle and compile the styles to inspect locally. When comitting to the main development branch the build outcome from `dist` is published via our internal CICD pipeline.
+Run `npm run build` to build the production bundle and compile the styles to inspect locally. When committing to the main development branch the build outcome from `dist` is published via our internal CICD pipeline.
 
 ### Beta Versions
 

package/components/applicationHeader/AppMenu.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["label", "appMenuItems", "appNavigatorClassName", "appNavigator", "onToggleAppMenu"];
 import React from 'react';
 import PropTypes from 'prop-types';
-import classname from 'classnames';
+import classNames from 'classnames';
 import AppMenuDropdown from './AppMenuDropdown';
 import modulePropTypes from './modulePropTypes';
 var MenuContent = function MenuContent(props) {
@@ -34,13 +34,13 @@ export var AppMenu = function AppMenu(props) {
     appNavigatorClassName = props.appNavigatorClassName,
     appNavigator = props.appNavigator,
     onToggleAppMenu = props.onToggleAppMenu,
-    remainigProps = _objectWithoutProperties(props, _excluded);
-  var hasItems = !!(appMenuItems && appMenuItems.length || appNavigator);
-  var classNames = classname('ModuleNavigation AppMenu', 'user-select-none', {
+    remainingProps = _objectWithoutProperties(props, _excluded);
+  var hasItems = !!(appMenuItems !== null && appMenuItems !== void 0 && appMenuItems.length || appNavigator);
+  var wrapperClassNames = classNames('ModuleNavigation AppMenu', 'user-select-none', {
     hasModules: hasItems
   }, appNavigatorClassName && appNavigatorClassName);
-  return /*#__PURE__*/React.createElement("ul", _extends({}, remainigProps, {
-    className: classNames
+  return /*#__PURE__*/React.createElement("ul", _extends({}, remainingProps, {
+    className: wrapperClassNames
   }), /*#__PURE__*/React.createElement(AppMenuDropdown, {
     title: label,
     caret: hasItems,

package/components/applicationHeader/ApplicationHeader.js

@@ -2,11 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["homeRoute", "showHomeIcon", "label", "className", "appNavigator", "appNavigatorClassName", "appMenuItems", "navItems", "actionBarItems", "onToggleAppMenu"];
-import React, { useState, useRef, forwardRef, useCallback, useImperativeHandle } from 'react';
+import React, { useRef, forwardRef, useCallback, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
-import debounce from 'lodash/fp/debounce';
 import isEmpty from 'lodash/fp/isEmpty';
-import classname from 'classnames';
+import classNames from 'classnames';
 import { AppMenu } from './AppMenu';
 import { ApplicationActionBar } from './ApplicationActionBar';
 import { MobileSubmoduleNavigation } from './MobileSubmoduleNavigation';
@@ -27,7 +26,7 @@ export var ApplicationHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     navItems = props.navItems,
     actionBarItems = props.actionBarItems,
     onToggleAppMenu = props.onToggleAppMenu,
-    remainigProps = _objectWithoutProperties(props, _excluded);
+    remainingProps = _objectWithoutProperties(props, _excluded);
   var actionBarRef = useRef();
   var _useResizeObserver = useResizeObserver(),
     _useResizeObserver2 = _slicedToArray(_useResizeObserver, 2),
@@ -42,9 +41,9 @@ export var ApplicationHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   var containerWidth = getContentRect('width') || 0;
   var isMobileWidth = containerWidth <= SCREEN_SM;
   var hasActionBarItems = !isEmpty(actionBarItems);
-  var classNames = classname('ApplicationHeader', 'user-select-none', isMobileWidth && 'mobile', className && className);
-  return /*#__PURE__*/React.createElement("nav", _extends({}, remainigProps, {
-    className: classNames,
+  var wrapperClassNames = classNames('ApplicationHeader', 'user-select-none', isMobileWidth && 'mobile', className && className);
+  return /*#__PURE__*/React.createElement("nav", _extends({}, remainingProps, {
+    className: wrapperClassNames,
     ref: navRef
   }), isMobileWidth && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MobileAppMenu, {
     showHomeIcon: showHomeIcon,

package/components/applicationHeader/NavItems.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState, useEffect, useLayoutEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import classname from 'classnames';
+import classNames from 'classnames';
 import head from 'lodash/fp/head';
 import isEmpty from 'lodash/fp/isEmpty';
 import useClickOutside from '../../hooks/useClickOutside';
@@ -174,10 +174,10 @@ export var NavItems = function NavItems(props) {
   };
 
   // As all navItems need to be added to the DOM first in order to get their real size
-  // the computation wheather a navItem need to be shown under the collapsed dropdown or not
+  // the computation whether a navItem need to be shown under the collapsed dropdown or not
   // needs to be done after the component did mount to the DOM.
 
-  var classes = classname('SubmoduleNavigation', 'nav');
+  var classes = classNames('SubmoduleNavigation', 'nav');
   return /*#__PURE__*/React.createElement("ul", {
     className: classes,
     ref: navigationRef

package/components/checkbox/Checkbox.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["checked", "children", "className", "custom", "defaultChecked", "disabled", "error", "icon", "iconLabelPosition", "iconSize", "id", "indeterminate", "inline", "inputRef", "label", "name", "onChange", "onClick", "required", "right", "size", "tabIndex"];
 import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import classname from 'classnames';
+import classNames from 'classnames';
 var CheckboxIcon = function CheckboxIcon(props) {
   var icon = props.icon,
     iconSize = props.iconSize,
@@ -85,8 +85,8 @@ var Checkbox = function Checkbox(props) {
     onChange(event);
   };
   var text = label || children;
-  var labelClassnames = classname('checkbox', inline && 'checkbox-inline', size === 'large' && 'checkbox-large', right && 'checkbox-right', className);
-  var inputClassnames = classname(error && 'error', size === 'large' && 'large', indeterminate && 'indeterminate', className);
+  var labelClassnames = classNames('checkbox', inline && 'checkbox-inline', size === 'large' && 'checkbox-large', right && 'checkbox-right', className);
+  var inputClassnames = classNames(error && 'error', size === 'large' && 'large', indeterminate && 'indeterminate', className);
   var renderCustomIcon = !!icon;
   var renderCustomContent = custom && children;
   var renderDefault = !icon && !custom;

package/components/expander/ExpanderList.js

@@ -9,7 +9,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/fp/isEqual';
 import Collapse from '../collapse/Collapse';
-import classname from 'classnames';
+import classNames from 'classnames';
 var getRandomString = function getRandomString() {
   return (Math.random() + 1).toString(36).toUpperCase().substring(2);
 };
@@ -84,8 +84,8 @@ var ExpanderList = /*#__PURE__*/function (_Component) {
     key: "getHeaderElement",
     value: function getHeaderElement(item) {
       var _this3 = this;
-      var headerClassNames = classname('expander-list-header', item.headerClassName && item.headerClassName);
-      var iconClassNames = item.body && classname('expander-icon', 'rioglyph', 'rioglyph-chevron-down');
+      var headerClassNames = classNames('expander-list-header', item.headerClassName && item.headerClassName);
+      var iconClassNames = item.body && classNames('expander-icon', 'rioglyph', 'rioglyph-chevron-down');
       return /*#__PURE__*/React.createElement("div", {
         className: headerClassNames,
         onClick: function onClick() {
@@ -105,7 +105,7 @@ var ExpanderList = /*#__PURE__*/function (_Component) {
       if (!item.body) {
         return;
       }
-      var bodyClassNames = classname('expander-list-body', item.bodyClassName && item.bodyClassName);
+      var bodyClassNames = classNames('expander-list-body', item.bodyClassName && item.bodyClassName);
       return /*#__PURE__*/React.createElement(Collapse, {
         "in": isOpen,
         mountOnEnter: mountOnEnter,
@@ -120,12 +120,12 @@ var ExpanderList = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this4 = this;
-      var listClassNames = classname('expander-list list-group', this.props.className);
+      var listClassNames = classNames('expander-list list-group', this.props.className);
       return /*#__PURE__*/React.createElement("ul", {
         className: listClassNames
       }, this.state.items.map(function (item) {
         var isOpen = item.open;
-        var itemClassNames = classname('list-group-item', item.className && "".concat(item.className), item.body && 'expandable', isOpen && 'open');
+        var itemClassNames = classNames('list-group-item', item.className && "".concat(item.className), item.body && 'expandable', isOpen && 'open');
         return /*#__PURE__*/React.createElement("li", {
           className: itemClassNames,
           key: item.id

package/components/expander/ExpanderPanel.js

@@ -5,7 +5,7 @@ var _excluded = ["bsStyle", "className", "iconLeft", "title", "headerClassName",
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Collapse from '../collapse/Collapse';
-import classname from 'classnames';
+import classNames from 'classnames';
 var ExpanderPanel = function ExpanderPanel(props) {
   var bsStyle = props.bsStyle,
     className = props.className,
@@ -40,11 +40,11 @@ var ExpanderPanel = function ExpanderPanel(props) {
     setIsOpen(newState);
     onToggle(newState);
   };
-  var wrapperClassNames = classname('expander-panel panel', "panel-".concat(bsStyle), className);
-  var iconClassNames = classname('expander-icon', 'rioglyph', 'rioglyph-chevron-down');
-  var headerClassNames = classname('panel-heading', isOpen && 'open', iconLeft && 'icon-left', headerClassName && headerClassName);
-  var titleClassNames = classname('title', titleClassName && titleClassName);
-  var bodyClassNames = classname('panel-body', bodyClassName && bodyClassName);
+  var wrapperClassNames = classNames('expander-panel panel', "panel-".concat(bsStyle), className);
+  var iconClassNames = classNames('expander-icon', 'rioglyph', 'rioglyph-chevron-down');
+  var headerClassNames = classNames('panel-heading', isOpen && 'open', iconLeft && 'icon-left', headerClassName && headerClassName);
+  var titleClassNames = classNames('title', titleClassName && titleClassName);
+  var bodyClassNames = classNames('panel-body', bodyClassName && bodyClassName);
   var isRenderCallback = children && typeof children === 'function';
   return /*#__PURE__*/React.createElement("div", _extends({}, remainingProps, {
     className: wrapperClassNames

package/components/radiobutton/RadioButton.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["checked", "children", "className", "custom", "defaultChecked", "disabled", "icon", "iconLabelPosition", "iconSize", "inline", "inputRef", "label", "name", "onChange", "onClick", "right", "tabIndex", "value"];
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import classname from 'classnames';
+import classNames from 'classnames';
 var RadioButtonIcon = function RadioButtonIcon(props) {
   var icon = props.icon,
     iconSize = props.iconSize,
@@ -21,7 +21,7 @@ var RadioButtonIcon = function RadioButtonIcon(props) {
     className: "rioglyph ".concat(icon),
     style: iconStyles
   }), /*#__PURE__*/React.createElement("span", {
-    className: 'radio-label'
+    className: "radio-label"
   }, text));
 };
 var RadioButton = function RadioButton(props) {
@@ -76,8 +76,8 @@ var RadioButton = function RadioButton(props) {
     onClick(event);
   };
   var text = label || children;
-  var labelClassnames = classname('radio', inline && 'radio-inline', className);
-  var inputClassnames = classname(right && 'icon-right', className);
+  var labelClassnames = classNames('radio', inline && 'radio-inline', className);
+  var inputClassnames = classNames(right && 'icon-right', className);
   var renderCustomIcon = !!icon;
   var renderCustomContent = custom && children;
   var renderDefault = !icon && !custom;
@@ -87,7 +87,7 @@ var RadioButton = function RadioButton(props) {
     onKeyDown: handleToggleKeyDown,
     ref: labelRef
   }), /*#__PURE__*/React.createElement("input", {
-    type: 'radio',
+    type: "radio",
     defaultChecked: defaultChecked,
     checked: checked,
     disabled: disabled,
@@ -103,7 +103,7 @@ var RadioButton = function RadioButton(props) {
     iconLabelPosition: iconLabelPosition,
     text: text
   }), renderDefault && /*#__PURE__*/React.createElement("span", {
-    className: 'radio-text'
+    className: "radio-text"
   }, /*#__PURE__*/React.createElement("span", null, text)), renderCustomContent && children);
 };
 RadioButton.ICON_LABEL_VERTICAL = 'vertical';

package/components/releaseNotes/ReleaseNotes.js

@@ -6,13 +6,11 @@ import map from 'lodash/fp/map';
 import toPairs from 'lodash/fp/toPairs';
 var renderList = function renderList(notes) {
   return /*#__PURE__*/React.createElement("ul", {
-    className: 'margin-bottom-0 margin-left-5 padding-left-25'
+    className: "margin-bottom-0 margin-left-5 padding-left-25"
   }, notes);
 };
 var renderNode = function renderNode(content) {
-  return /*#__PURE__*/React.createElement("div", {
-    className: 'padding-left-10'
-  }, content);
+  return /*#__PURE__*/React.createElement("div", null, content);
 };
 var getNotes = function getNotes(content, version) {
   return map(function (point) {
@@ -25,18 +23,18 @@ var renderNotes = function renderNotes(note, version) {
   var date = note.date,
     content = note.content;
   return /*#__PURE__*/React.createElement("div", {
-    className: 'panel panel-default',
+    className: "panel panel-default",
     key: "".concat(version, "-note")
   }, /*#__PURE__*/React.createElement("div", {
-    className: 'panel-heading'
+    className: "panel-heading"
   }, /*#__PURE__*/React.createElement("div", {
-    className: 'display-flex justify-content-between'
+    className: "display-flex justify-content-between"
   }, /*#__PURE__*/React.createElement("span", {
-    className: 'text-size-16 text-medium'
+    className: "text-size-16 text-medium"
   }, "".concat(version)), /*#__PURE__*/React.createElement("span", {
-    className: 'text-muted text-thin'
+    className: "text-muted text-thin"
   }, date))), /*#__PURE__*/React.createElement("div", {
-    className: 'panel-body white-space-pre-line'
+    className: "panel-body white-space-pre-line"
   }, isArray(content) ? renderList(getNotes(content, version)) : renderNode(content)));
 };
 var getReleases = function getReleases(_ref) {

package/components/selects/BaseDropdownMenu.js

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import classname from 'classnames';
+import classNames from 'classnames';
 import isEqual from 'lodash/fp/isEqual';
 import ownerDocument from '../../utils/ownerDocument';
 import addEventListener from '../../utils/addEventListener';
@@ -230,7 +230,7 @@ export var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
         noItemMessage = _this$props.noItemMessage,
         dropdownClassName = _this$props.dropdownClassName;
       var isPullRight = this.isAutoDropActive() ? this.state.pullRight : pullRight;
-      var dropdownMenuClasses = classname('dropdown-menu', isPullRight && 'pull-right', dropdownClassName);
+      var dropdownMenuClasses = classNames('dropdown-menu', isPullRight && 'pull-right', dropdownClassName);
 
       // Dont show dropdown, when no match are found when filtering unless there is a not found message
       if (!this.props.options.length) {
@@ -271,10 +271,10 @@ export var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
 
       // Show focused style only when keyboard is in use
       var anchorClassNames = this.state.keyboardUsed && this.state.focusedItemIndex === index ? HIGHLIGHT_CLASS : '';
-      var classNames = classname(option.disabled && 'disabled', this.props.useActiveClass && option.selected && 'active');
+      var wrapperClassNames = classNames(option.disabled && 'disabled', this.props.useActiveClass && option.selected && 'active');
       return /*#__PURE__*/React.createElement("li", {
         key: option.id,
-        className: classNames
+        className: wrapperClassNames
       }, /*#__PURE__*/React.createElement("a", {
         role: "button",
         className: anchorClassNames,

package/components/selects/Multiselect.js

@@ -10,7 +10,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import onClickOutside from 'react-onclickoutside';
-import classname from 'classnames';
+import classNames from 'classnames';
 import isEqual from 'lodash/fp/isEqual';
 import logDeprecatedWarnings from '../../utils/logDeprecatedWarnings';
 import { BaseDropdownMenu } from './BaseDropdownMenu';
@@ -102,9 +102,9 @@ export var Multiselect = /*#__PURE__*/function (_Component) {
         className = _this$props.className,
         hasError = _this$props.hasError;
       var dropup = this.isAutoDropActive() ? this.state.dropup : this.props.dropup;
-      var classes = classname('select', 'multiselect', dropup && 'dropup', 'dropdown', hasError && 'has-error', this.state.isOpen && 'open', className && className);
+      var wrapperClasses = classNames('select', 'multiselect', dropup && 'dropup', 'dropdown', hasError && 'has-error', this.state.isOpen && 'open', className && className);
       return /*#__PURE__*/React.createElement("div", {
-        className: classes,
+        className: wrapperClasses,
         ref: function ref(multiselectWrapper) {
           return _this2.multiselectWrapper = multiselectWrapper;
         }
@@ -125,7 +125,7 @@ export var Multiselect = /*#__PURE__*/function (_Component) {
       }).map(function (option, index) {
         return _this3.renderSelectionItem(option, index);
       });
-      var optionListClassNames = classname(!showSelectedItemIcon && !showUnselectedItemIcons && 'selected-option-list');
+      var optionListClassNames = classNames(!showSelectedItemIcon && !showUnselectedItemIcons && 'selected-option-list');
       return /*#__PURE__*/React.createElement("span", {
         className: optionListClassNames
       }, selectionTags);
@@ -154,7 +154,7 @@ export var Multiselect = /*#__PURE__*/function (_Component) {
     value: function renderSelectionItem(item, index) {
       var _this4 = this;
       if (this.props.showSelectedItemIcon) {
-        var inactiveClassNames = classname('margin-right-5', !this.isItemSelected(item) && 'inactiveIcon');
+        var inactiveClassNames = classNames('margin-right-5', !this.isItemSelected(item) && 'inactiveIcon');
         return /*#__PURE__*/React.createElement("span", {
           key: item.id,
           className: inactiveClassNames
@@ -166,7 +166,7 @@ export var Multiselect = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement("span", {
         className: "selected-label"
       }, item.icon && /*#__PURE__*/React.createElement("span", {
-        className: 'margin-right-5'
+        className: "margin-right-5"
       }, item.icon), item.label), /*#__PURE__*/React.createElement("span", {
         className: "removeIcon",
         onClick: function onClick(event) {
@@ -212,10 +212,10 @@ export var Multiselect = /*#__PURE__*/function (_Component) {
         counterMessage = _this$props4.counterMessage,
         renderCounterMessage = _this$props4.renderCounterMessage;
       logDeprecatedWarnings(warningProps, this.props, 'Multiselect');
-      var classnames = classname('dropdown-toggle', 'form-control', 'text-left', bsSize === 'large' && 'input-lg',
-      // TODO: deprecte since it's not consistent
+      var wrapperClassNames = classNames('dropdown-toggle', 'form-control', 'text-left', bsSize === 'large' && 'input-lg',
+      // TODO: deprecate since it's not consistent
       bsSize === 'small' && 'input-sm',
-      // TODO: deprecte since it's not consistent
+      // TODO: deprecate since it's not consistent
       bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', disabled && 'disabled');
       var showPlaceholder = !selectedItems.length && !this.props.showUnselectedItemIcons;
 
@@ -225,7 +225,7 @@ export var Multiselect = /*#__PURE__*/function (_Component) {
         type: "button",
         id: id,
         name: name,
-        className: classnames,
+        className: wrapperClassNames,
         "data-toggle": "dropdown",
         tabIndex: tabIndex,
         "aria-haspopup": "true",
@@ -266,7 +266,7 @@ export var Multiselect = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderFilterInput",
     value: function renderFilterInput() {
-      var inputClasses = classname('multiselect-filter-input', !this.state.selectedItems.length && 'multiselect-filter-input-placeholder', (this.state.isFilterActive || this.state.filterValue) && 'multiselect-filter-input-active');
+      var inputClasses = classNames('multiselect-filter-input', !this.state.selectedItems.length && 'multiselect-filter-input-placeholder', (this.state.isFilterActive || this.state.filterValue) && 'multiselect-filter-input-active');
       return /*#__PURE__*/React.createElement("input", {
         type: "text",
         className: inputClasses,
@@ -316,7 +316,7 @@ export var Multiselect = /*#__PURE__*/function (_Component) {
       event.preventDefault();
 
       // prevent selecting disabled Items
-      if (selectedItem && selectedItem.disabled) {
+      if (selectedItem !== null && selectedItem !== void 0 && selectedItem.disabled) {
         return;
       }
       var newSelectedItems = this.updateSelection(selectedItem.id);

package/components/selects/Select.js

@@ -132,8 +132,8 @@ export var Select = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/React.createElement("span", null, optionSpans);
     }
   }, {
-    key: "getSeletedItemLabel",
-    value: function getSeletedItemLabel(selectedItem, placeholder) {
+    key: "getSelectedItemLabel",
+    value: function getSelectedItemLabel(selectedItem, placeholder) {
       if (this.props.showUnselectedItemIcons) {
         return this.renderUnselectedItemIcons(this.props.options, selectedItem);
       }
@@ -193,7 +193,7 @@ export var Select = /*#__PURE__*/function (_Component) {
       var _this$state = this.state,
         isOpen = _this$state.isOpen,
         selectedItem = _this$state.selectedItem;
-      var classnames = classNames('dropdown-toggle', 'form-control', 'text-left', btnClassName && btnClassName, bsSize === 'large' && 'input-lg',
+      var classes = classNames('dropdown-toggle', 'form-control', 'text-left', btnClassName && btnClassName, bsSize === 'large' && 'input-lg',
       // TODO: deprecte since it's not consistent
       bsSize === 'small' && 'input-sm',
       // TODO: deprecte since it's not consistent
@@ -202,12 +202,12 @@ export var Select = /*#__PURE__*/function (_Component) {
         className: "selected-option-text"
       }, label && /*#__PURE__*/React.createElement("span", {
         className: "selected-option-text-label"
-      }, label, ":"), /*#__PURE__*/React.createElement("span", null, this.getSeletedItemLabel(selectedItem, placeholder)));
+      }, label, ":"), /*#__PURE__*/React.createElement("span", null, this.getSelectedItemLabel(selectedItem, placeholder)));
       return /*#__PURE__*/React.createElement("button", {
         type: "button",
         id: id,
         name: name,
-        className: classnames,
+        className: classes,
         "data-toggle": "dropdown",
         tabIndex: tabIndex,
         "aria-haspopup": "true",
@@ -232,7 +232,7 @@ export var Select = /*#__PURE__*/function (_Component) {
         dropdownClassName = _this$props4.dropdownClassName;
 
       // When an option was already selected, highlight this option by setting the focusedItemIndex accordingly.
-      // In case there was nothing preselected, set the focusedItemIndex to the first item if keayboard was used.
+      // In case there was nothing preselected, set the focusedItemIndex to the first item if keyboard was used.
       var focusedItemIndex = this.state.focusedItemIndex;
       if (this.state.selectedItem) {
         focusedItemIndex = this.props.options.findIndex(function (option) {

package/components/slider/RangeSlider.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["minValue", "maxValue", "valueLabels", "step", "leftValue", "rightValue", "className", "disabled", "onChange", "onDragEnd"];
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import classname from 'classnames';
+import classNames from 'classnames';
 var getRangeValues = function getRangeValues(valueLeft, valueRight) {
   var finalLeftValue = valueRight <= valueLeft ? valueRight : valueLeft;
   var finalRightValue = valueLeft >= valueRight ? valueLeft : valueRight;
@@ -145,9 +145,9 @@ var RangeSlider = function RangeSlider(props) {
     finalRightValue = _getRangeValues8[1];
   var trackWidth = 100 * (finalRightValue - finalLeftValue) / (maxValue - minValue);
   var trackLeft = 100 * (finalLeftValue - minValue) / (maxValue - minValue);
-  var classNames = classname('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', className && className);
+  var wrapperClassNames = classNames('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', className && className);
   return /*#__PURE__*/React.createElement("div", _extends({}, remainingProps, {
-    className: classNames
+    className: wrapperClassNames
   }), /*#__PURE__*/React.createElement("div", {
     className: "range-whole-track"
   }), /*#__PURE__*/React.createElement("div", {

package/components/slider/Slider.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["value", "minValue", "maxValue", "valueLabels", "largeValueLabels", "hideValueBar", "step", "onChange", "onDragEnd", "className", "disabled"];
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import classname from 'classnames';
+import classNames from 'classnames';
 var Slider = function Slider(props) {
   var value = props.value,
     minValue = props.minValue,
@@ -44,10 +44,10 @@ var Slider = function Slider(props) {
   var onMouseDown = function onMouseDown() {
     setIsChanging(true);
   };
-  var classNames = classname('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', hideValueBar && 'hide-value-bar', largeValueLabels && 'large-value-labels', className && className);
+  var wrapperClassNames = classNames('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', hideValueBar && 'hide-value-bar', largeValueLabels && 'large-value-labels', className && className);
   var trackWidth = 100 * (currentValue - minValue) / (maxValue - minValue);
   return /*#__PURE__*/React.createElement("div", _extends({}, remainingProps, {
-    className: classNames
+    className: wrapperClassNames
   }), /*#__PURE__*/React.createElement("div", {
     className: "range-whole-track"
   }), /*#__PURE__*/React.createElement("div", {

package/components/statusBar/StatusBar.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["percentage", "tooltip", "tooltipPosition", "tooltipDelay", "color", "className"];
 import React from 'react';
 import PropTypes from 'prop-types';
-import classname from 'classnames';
+import classNames from 'classnames';
 import Tooltip from '../tooltip/Tooltip';
 import OverlayTrigger from '../overlay/OverlayTrigger';
 var LEFT = OverlayTrigger.LEFT;
@@ -25,10 +25,10 @@ var renderProgressBar = function renderProgressBar(_ref, index, useProgressDivid
     color = _ref.color,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
-  var classNames = classname('progress-bar', color ? color : 'progress-bar-info', useProgressDivider && 'progress-divider', className && className);
+  var progressBarClassNames = classNames('progress-bar', color ? color : 'progress-bar-info', useProgressDivider && 'progress-divider', className && className);
   var progressBar = /*#__PURE__*/React.createElement("div", _extends({
     key: index,
-    className: classNames,
+    className: progressBarClassNames,
     style: {
       width: "".concat(percentage, "%")
     }
@@ -36,7 +36,7 @@ var renderProgressBar = function renderProgressBar(_ref, index, useProgressDivid
   if (tooltip) {
     var tooltipElement = /*#__PURE__*/React.createElement(Tooltip, {
       id: "tooltip-".concat(index),
-      width: 'auto'
+      width: "auto"
     }, tooltip);
     return /*#__PURE__*/React.createElement(OverlayTrigger, {
       key: index,
@@ -109,8 +109,8 @@ var renderIcon = function renderIcon(icon, size) {
   }
   var iconColor = getIconColorClassName(icon);
   var iconAlignment = getIconAlignment(icon);
-  var iconWrapperClasses = classname(iconAlignment === LEFT && 'flex-order-1 margin-right-5', iconAlignment === RIGHT && 'flex-order-2 margin-left-5');
-  var iconClasses = classname('rioglyph', icon.name && icon.name, iconColor, size === SMALL && 'text-size-h3', size === LARGE && 'text-size-h2', icon.className && icon.className);
+  var iconWrapperClasses = classNames(iconAlignment === LEFT && 'flex-order-1 margin-right-5', iconAlignment === RIGHT && 'flex-order-2 margin-left-5');
+  var iconClasses = classNames('rioglyph', icon.name && icon.name, iconColor, size === SMALL && 'text-size-h3', size === LARGE && 'text-size-h2', icon.className && icon.className);
   return /*#__PURE__*/React.createElement("div", {
     className: iconWrapperClasses
   }, /*#__PURE__*/React.createElement("span", {
@@ -123,7 +123,7 @@ var renderLabel = function renderLabel(label, size, labelWrapperClasses) {
   }
   var labelColor = getLabelColorClassName(label);
   var labelAlignment = getLabelAlignment(label);
-  var labelClasses = classname('display-flex', 'ellipsis-1', 'flex-1-0', 'justify-content-center', labelAlignment === TOP && 'width-0', labelColor, size === SMALL && 'text-size-16', size === LARGE && 'text-size-h3', label.weight !== LIGHT && 'text-bold', label.className && label.className);
+  var labelClasses = classNames('display-flex', 'ellipsis-1', 'flex-1-0', 'justify-content-center', labelAlignment === TOP && 'width-0', labelColor, size === SMALL && 'text-size-16', size === LARGE && 'text-size-h3', label.weight !== LIGHT && 'text-bold', label.className && label.className);
   return /*#__PURE__*/React.createElement("div", {
     className: labelWrapperClasses
   }, /*#__PURE__*/React.createElement("span", {
@@ -154,11 +154,11 @@ var StatusBar = function StatusBar(props) {
   var isLabelOnly = getIsLabelOnly(label, icon);
   var isLabelOnlyLeft = getIsLabelOnlyLeft(isLabelOnly, labelAlignment);
   var isLabelOnlyRight = getIsLabelOnlyRight(isLabelOnly, labelAlignment);
-  var wrapperClasses = classname('StatusBar', 'width-100pct', 'display-flex', getLabelAlignmentClassName(label), className);
-  var progressLabelWrapperClasses = classname('display-flex', 'flex-1-0', labelAlignment === TOP && 'flex-order-1 flex-column margin-bottom-10', isIconAndLabelRight && 'flex-order-1 align-items-center', isIconAndLabelLeft && 'flex-order-2 align-items-center', isIconLeftAndLabelRight && 'flex-order-2 align-items-center', isIconRightAndLabelLeft && 'flex-order-1 align-items-center', isLabelOnlyLeft && 'align-items-center', isLabelOnlyRight && 'align-items-center', isIconOnlyLeft && 'flex-order-2 align-items-center', isIconOnlyRight && 'flex-order-1 align-items-center');
-  var labelWrapperClasses = classname(labelAlignment === TOP && 'display-flex justify-content-center', isIconAndLabelLeft && 'flex-order-1 margin-right-10', isIconAndLabelRight && 'flex-order-2 margin-left-10', isIconLeftAndLabelRight && 'flex-order-2 margin-left-10', isIconRightAndLabelLeft && 'flex-order-1 margin-right-10', isLabelOnlyLeft && 'flex-order-1 margin-right-10', isLabelOnlyRight && 'flex-order-2 margin-left-10');
-  var progressOuterWrapperClasses = classname('display-flex', 'flex-1-0', isIconAndLabelLeft && 'flex-order-2', isIconAndLabelRight && 'flex-order-1', isIconLeftAndLabelRight && 'flex-order-1', isIconRightAndLabelLeft && 'flex-order-2', isLabelOnlyLeft && 'flex-order-2', isLabelOnlyRight && 'flex-order-1');
-  var progressWrapperClasses = classname('progress', 'margin-0', 'flex-1-0', getProgressBarHightClassName(size));
+  var wrapperClasses = classNames('StatusBar', 'width-100pct', 'display-flex', getLabelAlignmentClassName(label), className);
+  var progressLabelWrapperClasses = classNames('display-flex', 'flex-1-0', labelAlignment === TOP && 'flex-order-1 flex-column margin-bottom-10', isIconAndLabelRight && 'flex-order-1 align-items-center', isIconAndLabelLeft && 'flex-order-2 align-items-center', isIconLeftAndLabelRight && 'flex-order-2 align-items-center', isIconRightAndLabelLeft && 'flex-order-1 align-items-center', isLabelOnlyLeft && 'align-items-center', isLabelOnlyRight && 'align-items-center', isIconOnlyLeft && 'flex-order-2 align-items-center', isIconOnlyRight && 'flex-order-1 align-items-center');
+  var labelWrapperClasses = classNames(labelAlignment === TOP && 'display-flex justify-content-center', isIconAndLabelLeft && 'flex-order-1 margin-right-10', isIconAndLabelRight && 'flex-order-2 margin-left-10', isIconLeftAndLabelRight && 'flex-order-2 margin-left-10', isIconRightAndLabelLeft && 'flex-order-1 margin-right-10', isLabelOnlyLeft && 'flex-order-1 margin-right-10', isLabelOnlyRight && 'flex-order-2 margin-left-10');
+  var progressOuterWrapperClasses = classNames('display-flex', 'flex-1-0', isIconAndLabelLeft && 'flex-order-2', isIconAndLabelRight && 'flex-order-1', isIconLeftAndLabelRight && 'flex-order-1', isIconRightAndLabelLeft && 'flex-order-2', isLabelOnlyLeft && 'flex-order-2', isLabelOnlyRight && 'flex-order-1');
+  var progressWrapperClasses = classNames('progress', 'margin-0', 'flex-1-0', getProgressBarHightClassName(size));
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperClasses
   }, renderIcon(icon, size), /*#__PURE__*/React.createElement("div", {