@rio-cloud/rio-uikit 0.16.1-beta.21 → 0.16.1-beta.22

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

@@ -1,56 +1,33 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Multiselect = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 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 _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 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 _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 Multiselect = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(Multiselect, _Component);
-
   var _super = _createSuper(Multiselect);
-
   function Multiselect(props) {
     var _this;
-
     (0, _classCallCheck2["default"])(this, Multiselect);
     _this = _super.call(this, props);
     _this.state = {
@@ -61,8 +38,9 @@ var Multiselect = /*#__PURE__*/function (_Component) {
       filteredOptions: props.options,
       itemDOMValues: [],
       keyboardUsed: false
-    }; // necessary for using the uikit as submodule
+    };
 
+    // necessary for using the uikit as submodule
     _this.onToggle = _this.onToggle.bind((0, _assertThisInitialized2["default"])(_this));
     _this.handleClickOutside = _this.handleClickOutside.bind((0, _assertThisInitialized2["default"])(_this));
     _this.handleFilterChange = _this.handleFilterChange.bind((0, _assertThisInitialized2["default"])(_this));
@@ -73,18 +51,17 @@ var Multiselect = /*#__PURE__*/function (_Component) {
     _this.handleToggleKeyDown = _this.handleToggleKeyDown.bind((0, _assertThisInitialized2["default"])(_this));
     return _this;
   }
-
   (0, _createClass2["default"])(Multiselect, [{
     key: "UNSAFE_componentWillMount",
     value: function UNSAFE_componentWillMount() {
       this.updateSelectedItems(this.props.options, this.props.value);
-    } // eslint-disable-next-line camelcase
+    }
 
+    // eslint-disable-next-line camelcase
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
       this.updateSelectedItems(nextProps.options, nextProps.value);
-
       if (!(0, _isEqual["default"])(nextProps.options, this.props.options)) {
         this.setState({
           filteredOptions: nextProps.options,
@@ -127,10 +104,9 @@ var Multiselect = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props = this.props,
-          className = _this$props.className,
-          hasError = _this$props.hasError;
+        className = _this$props.className,
+        hasError = _this$props.hasError;
       var dropup = this.isAutoDropActive() ? this.state.dropup : this.props.dropup;
       var classes = (0, _classnames["default"])('select', 'multiselect', dropup && 'dropup', 'dropdown', hasError && 'has-error', this.state.isOpen && 'open', className && className);
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -144,15 +120,12 @@ var Multiselect = /*#__PURE__*/function (_Component) {
     key: "buildSelectionRepresentation",
     value: function buildSelectionRepresentation(options) {
       var _this3 = this;
-
       var _this$props2 = this.props,
-          showSelectedItemIcon = _this$props2.showSelectedItemIcon,
-          showUnselectedItemIcons = _this$props2.showUnselectedItemIcons;
-
+        showSelectedItemIcon = _this$props2.showSelectedItemIcon,
+        showUnselectedItemIcons = _this$props2.showUnselectedItemIcons;
       if (!options || !options.length) {
         return '';
       }
-
       var selectionTags = options.filter(function (option) {
         return showUnselectedItemIcons ? !option.header : _this3.isItemSelected(option);
       }).map(function (option, index) {
@@ -186,7 +159,6 @@ var Multiselect = /*#__PURE__*/function (_Component) {
     key: "renderSelectionItem",
     value: function renderSelectionItem(item, index) {
       var _this4 = this;
-
       if (this.props.showSelectedItemIcon) {
         var inactiveClassNames = (0, _classnames["default"])('margin-right-5', !this.isItemSelected(item) && 'inactiveIcon');
         return /*#__PURE__*/_react["default"].createElement("span", {
@@ -194,7 +166,6 @@ var Multiselect = /*#__PURE__*/function (_Component) {
           className: inactiveClassNames
         }, item.icon);
       }
-
       return /*#__PURE__*/_react["default"].createElement("span", {
         key: index,
         className: "selected-option"
@@ -215,9 +186,9 @@ var Multiselect = /*#__PURE__*/function (_Component) {
     key: "renderSelection",
     value: function renderSelection() {
       var _this$props3 = this.props,
-          options = _this$props3.options,
-          counterMessage = _this$props3.counterMessage,
-          renderCounterMessage = _this$props3.renderCounterMessage;
+        options = _this$props3.options,
+        counterMessage = _this$props3.counterMessage,
+        renderCounterMessage = _this$props3.renderCounterMessage;
       var selectedItems = this.state.selectedItems;
       return counterMessage || renderCounterMessage ? this.renderCounterMessage(selectedItems, counterMessage, renderCounterMessage) : this.buildSelectionRepresentation(options);
     }
@@ -232,27 +203,29 @@ var Multiselect = /*#__PURE__*/function (_Component) {
     key: "renderToggle",
     value: function renderToggle() {
       var _this5 = this;
-
       var _this$state = this.state,
-          isOpen = _this$state.isOpen,
-          selectedItems = _this$state.selectedItems;
+        isOpen = _this$state.isOpen,
+        selectedItems = _this$state.selectedItems;
       var _this$props4 = this.props,
-          name = _this$props4.name,
-          _this$props4$id = _this$props4.id,
-          id = _this$props4$id === void 0 ? name : _this$props4$id,
-          tabIndex = _this$props4.tabIndex,
-          disabled = _this$props4.disabled,
-          useFilter = _this$props4.useFilter,
-          bsSize = _this$props4.bsSize,
-          placeholder = _this$props4.placeholder,
-          counterMessage = _this$props4.counterMessage,
-          renderCounterMessage = _this$props4.renderCounterMessage;
-      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', // TODO: deprecte since it's not consistent
+        name = _this$props4.name,
+        _this$props4$id = _this$props4.id,
+        id = _this$props4$id === void 0 ? name : _this$props4$id,
+        tabIndex = _this$props4.tabIndex,
+        disabled = _this$props4.disabled,
+        useFilter = _this$props4.useFilter,
+        bsSize = _this$props4.bsSize,
+        placeholder = _this$props4.placeholder,
+        counterMessage = _this$props4.counterMessage,
+        renderCounterMessage = _this$props4.renderCounterMessage;
+      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',
+      // TODO: deprecte since it's not consistent
       bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', disabled && 'disabled');
-      var showPlaceholder = !selectedItems.length && !this.props.showUnselectedItemIcons; // Note: due to issues with nested events in Firefox (for toggle and inside the remove)
-      // the toggle element must not be a <button> but a div.
+      var showPlaceholder = !selectedItems.length && !this.props.showUnselectedItemIcons;
 
+      // Note: due to issues with nested events in Firefox (for toggle and inside the remove)
+      // the toggle element must not be a <button> but a div.
       return /*#__PURE__*/_react["default"].createElement("div", {
         type: "button",
         id: id,
@@ -275,11 +248,10 @@ var Multiselect = /*#__PURE__*/function (_Component) {
     key: "renderDropdownMenu",
     value: function renderDropdownMenu() {
       var _this6 = this;
-
       var _this$props5 = this.props,
-          pullRight = _this$props5.pullRight,
-          autoDropDirection = _this$props5.autoDropDirection,
-          noItemMessage = _this$props5.noItemMessage;
+        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;
         return option;
@@ -315,9 +287,10 @@ var Multiselect = /*#__PURE__*/function (_Component) {
     value: function filterOptions(itemDOMValues, filterValue, options) {
       var filteredDOMValues = itemDOMValues.filter(function (item) {
         return item.text.toLowerCase().includes(filterValue.toLowerCase());
-      }); // Filter the options accodring to the filtered DOM values and map the IDs since the filter cannot be done
-      // on the options itself as they might contain arbitrary components
+      });
 
+      // Filter the options accodring to the filtered DOM values and map the IDs since the filter cannot be done
+      // on the options itself as they might contain arbitrary components
       return options.filter(function (option) {
         return filteredDOMValues.find(function (value) {
           return value.id === option.id;
@@ -329,8 +302,9 @@ var Multiselect = /*#__PURE__*/function (_Component) {
     value: function handleFilterChange(event) {
       event.preventDefault();
       var filterValue = event.currentTarget.value;
-      var filteredOptions = this.filterOptions(this.state.itemDOMValues, filterValue, this.props.options); // highlight the first item of the search result if at least one item was found
+      var filteredOptions = this.filterOptions(this.state.itemDOMValues, filterValue, this.props.options);
 
+      // highlight the first item of the search result if at least one item was found
       var newFocusedItemIndex = filteredOptions.length > 0 ? 0 : -1;
       this.setState(function () {
         return {
@@ -346,13 +320,12 @@ var Multiselect = /*#__PURE__*/function (_Component) {
     key: "onOptionChange",
     value: function onOptionChange(event, selectedItem) {
       var _this7 = this;
+      event.preventDefault();
 
-      event.preventDefault(); // prevent selecting disabled Items
-
+      // prevent selecting disabled Items
       if (selectedItem && selectedItem.disabled) {
         return;
       }
-
       var newSelectedItems = this.updateSelection(selectedItem.id);
       this.setState(function () {
         return {
@@ -369,13 +342,11 @@ var Multiselect = /*#__PURE__*/function (_Component) {
     value: function updateSelection(selectedItemId) {
       var newSelectedItems = this.state.selectedItems;
       var itemIndex = this.state.selectedItems.indexOf(selectedItemId);
-
       if (itemIndex !== -1) {
         newSelectedItems.splice(itemIndex, 1);
       } else {
         newSelectedItems.push(selectedItemId);
       }
-
       return newSelectedItems;
     }
   }, {
@@ -388,7 +359,6 @@ var Multiselect = /*#__PURE__*/function (_Component) {
           selectedItems: newSelectedItems
         };
       });
-
       if (this.props.onChange) {
         this.props.onChange(this.state.selectedItems);
       }
@@ -408,18 +378,14 @@ var Multiselect = /*#__PURE__*/function (_Component) {
             event.preventDefault();
             this.onToggle(event);
           }
-
           break;
-
         case 13:
           if (!this.state.isOpen) {
             // open on enter
             event.preventDefault();
             this.onToggle(event);
           }
-
           break;
-
         default:
           break;
       }
@@ -432,11 +398,11 @@ var Multiselect = /*#__PURE__*/function (_Component) {
       // in order to avoid closing menu on space but allow to use it for filtering
       if (this.props.disabled || this.state.isFilterActive) {
         return;
-      } // using the enter key on the toggle button will trigger a synthetic click event as all buttons are of
+      }
+
+      // using the enter key on the toggle button will trigger a synthetic click event as all buttons are of
       // type submit by default in HTML. In order to differentiate between real click and a synthetic event
       // caused by they keyboard, use the event details. A synthetic event is always 0.
-
-
       var keyboardUsed = event.detail === 0;
       this.setState({
         isOpen: !this.state.isOpen,
@@ -447,7 +413,6 @@ var Multiselect = /*#__PURE__*/function (_Component) {
     key: "onOpenMenu",
     value: function onOpenMenu(dropup) {
       var node = _reactDom["default"].findDOMNode(this);
-
       if (dropup) {
         node.classList.add('dropup');
       } else {
@@ -476,7 +441,6 @@ var Multiselect = /*#__PURE__*/function (_Component) {
   }]);
   return Multiselect;
 }(_react.Component);
-
 exports.Multiselect = Multiselect;
 Multiselect.defaultProps = {
   onChange: function onChange() {},
@@ -537,7 +501,5 @@ Multiselect.propTypes = {
   // shows icons always with active or inactive state
   showUnselectedItemIcons: _propTypes["default"].bool
 };
-
 var _default = (0, _reactOnclickoutside["default"])(Multiselect);
-
 exports["default"] = _default;

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

@@ -1,66 +1,40 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Select = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 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 _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 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 _logPropError = _interopRequireDefault(require("../../utils/logPropError"));
-
 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); }
-
 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 errorProps = [{
   prop: 'toggleButtonLabel',
   replacement: 'selectedOptionText'
 }];
 var DEFAULT_FOCUSED_ITEM_INDEX = -1;
-
 var Select = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(Select, _Component);
-
   var _super = _createSuper(Select);
-
   function Select(props) {
     var _this;
-
     (0, _classCallCheck2["default"])(this, Select);
     _this = _super.call(this, props);
     _this.state = {
@@ -84,18 +58,17 @@ var Select = /*#__PURE__*/function (_Component) {
     _this.onOpenMenu = _this.onOpenMenu.bind((0, _assertThisInitialized2["default"])(_this));
     return _this;
   }
-
   (0, _createClass2["default"])(Select, [{
     key: "UNSAFE_componentWillMount",
     value: function UNSAFE_componentWillMount() {
       this.updateSelectedItem(this.props.options, this.props.value);
-    } // eslint-disable-next-line camelcase
+    }
 
+    // eslint-disable-next-line camelcase
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
       this.updateSelectedItem(nextProps.options, nextProps.value);
-
       if (!(0, _isEqual["default"])(nextProps.options, this.props.options)) {
         this.setState({
           filteredOptions: nextProps.options,
@@ -139,10 +112,9 @@ var Select = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props = this.props,
-          className = _this$props.className,
-          hasError = _this$props.hasError;
+        className = _this$props.className,
+        hasError = _this$props.hasError;
       var dropup = this.isAutoDropActive() ? this.state.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", {
@@ -171,14 +143,12 @@ var Select = /*#__PURE__*/function (_Component) {
       if (this.props.showUnselectedItemIcons) {
         return this.renderUnselectedItemIcons(this.props.options, selectedItem);
       }
-
       if (!selectedItem) {
         // render a placeholder or if there is none render a non-breaking space " "
         return placeholder ? /*#__PURE__*/_react["default"].createElement("span", {
           className: "placeholder"
         }, placeholder) : "\xA0";
       }
-
       return /*#__PURE__*/_react["default"].createElement("span", null, selectedItem.icon && /*#__PURE__*/_react["default"].createElement("span", {
         className: "margin-right-5"
       }, selectedItem.icon), !this.props.showSelectedItemIcon && selectedItem.label);
@@ -187,11 +157,9 @@ var Select = /*#__PURE__*/function (_Component) {
     key: "renderClearButton",
     value: function renderClearButton() {
       var _this3 = this;
-
       var _this$props2 = this.props,
-          onChange = _this$props2.onChange,
-          useClear = _this$props2.useClear;
-
+        onChange = _this$props2.onChange,
+        useClear = _this$props2.useClear;
       var clearSelectedItem = function clearSelectedItem() {
         _this3.setState(function () {
           return {
@@ -200,10 +168,8 @@ var Select = /*#__PURE__*/function (_Component) {
             filterValue: ''
           };
         });
-
         onChange();
       };
-
       var clearButtonClassNames = (0, _classnames["default"])('clearButton', (!useClear || (0, _isNil["default"])(this.state.selectedItem)) && 'hide pointer-events-none');
       return /*#__PURE__*/_react["default"].createElement("span", {
         className: clearButtonClassNames,
@@ -216,33 +182,32 @@ var Select = /*#__PURE__*/function (_Component) {
     key: "renderToggle",
     value: function renderToggle() {
       var _this4 = this;
-
       var _this$props3 = this.props,
-          bsSize = _this$props3.bsSize,
-          btnClassName = _this$props3.btnClassName,
-          tabIndex = _this$props3.tabIndex,
-          useFilter = _this$props3.useFilter,
-          placeholder = _this$props3.placeholder,
-          disabled = _this$props3.disabled,
-          name = _this$props3.name,
-          label = _this$props3.label,
-          _this$props3$id = _this$props3.id,
-          id = _this$props3$id === void 0 ? name : _this$props3$id,
-          selectedOptionText = _this$props3.selectedOptionText;
+        bsSize = _this$props3.bsSize,
+        btnClassName = _this$props3.btnClassName,
+        tabIndex = _this$props3.tabIndex,
+        useFilter = _this$props3.useFilter,
+        placeholder = _this$props3.placeholder,
+        disabled = _this$props3.disabled,
+        name = _this$props3.name,
+        label = _this$props3.label,
+        _this$props3$id = _this$props3.id,
+        id = _this$props3$id === void 0 ? name : _this$props3$id,
+        selectedOptionText = _this$props3.selectedOptionText;
       (0, _logPropError["default"])(errorProps, this.props, 'Select');
       var _this$state = this.state,
-          isOpen = _this$state.isOpen,
-          selectedItem = _this$state.selectedItem;
-      var classnames = (0, _classnames["default"])('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
+        isOpen = _this$state.isOpen,
+        selectedItem = _this$state.selectedItem;
+      var classnames = (0, _classnames["default"])('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
       bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', disabled && 'disabled');
-
       var selectedOption = /*#__PURE__*/_react["default"].createElement("span", {
         className: "width-100pct display-flex"
       }, label && /*#__PURE__*/_react["default"].createElement("span", {
         className: "text-color-dark margin-right-5"
       }, label, ":"), this.getSeletedItemLabel(selectedItem, placeholder));
-
       return /*#__PURE__*/_react["default"].createElement("button", {
         type: "button",
         id: id,
@@ -264,25 +229,26 @@ var Select = /*#__PURE__*/function (_Component) {
     key: "renderDropdownMenu",
     value: function renderDropdownMenu() {
       var _this5 = this;
-
       // console.log('keyboardUsed=' + this.state.keyboardUsed)
+
       var _this$props4 = this.props,
-          pullRight = _this$props4.pullRight,
-          autoDropDirection = _this$props4.autoDropDirection,
-          noItemMessage = _this$props4.noItemMessage,
-          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.
+        pullRight = _this$props4.pullRight,
+        autoDropDirection = _this$props4.autoDropDirection,
+        noItemMessage = _this$props4.noItemMessage,
+        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.
       var focusedItemIndex = this.state.focusedItemIndex;
-
       if (this.state.selectedItem) {
         focusedItemIndex = this.props.options.findIndex(function (option) {
           return option.id === _this5.state.selectedItem.id;
         });
       } else if (this.state.keyboardUsed) {
         focusedItemIndex = 0;
-      } // console.log('focusedItemIndex=' + focusedItemIndex);
+      }
 
+      // console.log('focusedItemIndex=' + focusedItemIndex);
 
       return /*#__PURE__*/_react["default"].createElement(_BaseDropdownMenu.BaseDropdownMenu, {
         isOpen: this.state.isOpen,
@@ -320,9 +286,10 @@ var Select = /*#__PURE__*/function (_Component) {
       var options = arguments.length > 2 ? arguments[2] : undefined;
       var filteredDOMValues = itemDOMValues.filter(function (item) {
         return item.text.toLowerCase().includes(filterValue.toLowerCase());
-      }); // Filter the options according to the filtered DOM values and map the IDs since the filter cannot be done
-      // on the options itself as they might contain arbitrary components
+      });
 
+      // Filter the options according to the filtered DOM values and map the IDs since the filter cannot be done
+      // on the options itself as they might contain arbitrary components
       return options.filter(function (option) {
         return filteredDOMValues.find(function (value) {
           return value.id === option.id;
@@ -334,8 +301,9 @@ var Select = /*#__PURE__*/function (_Component) {
     value: function handleFilterChange(event) {
       event.preventDefault();
       var filterValue = event.currentTarget.value;
-      var filteredOptions = this.filterOptions(this.state.itemDOMValues, filterValue, this.props.options); // highlight the first item of the search result if at least one item was found
+      var filteredOptions = this.filterOptions(this.state.itemDOMValues, filterValue, this.props.options);
 
+      // highlight the first item of the search result if at least one item was found
       var newFocusedItemIndex = filteredOptions.length > 0 ? 0 : DEFAULT_FOCUSED_ITEM_INDEX;
       this.setState(function () {
         return {
@@ -351,7 +319,6 @@ var Select = /*#__PURE__*/function (_Component) {
     key: "onOptionChange",
     value: function onOptionChange(event, selectedItem) {
       var _this6 = this;
-
       this.setState(function () {
         return {
           selectedItem: selectedItem,
@@ -359,12 +326,12 @@ var Select = /*#__PURE__*/function (_Component) {
           filterValue: '',
           filteredOptions: _this6.props.options
         };
-      }); // Needed? - was once added by a Service Team (guess it was Chat)
+      });
 
+      // Needed? - was once added by a Service Team (guess it was Chat)
       if (event.target) {
         event.target.value = this.state.selectedItem;
       }
-
       this.props.onChange(selectedItem);
       this.closeMenu();
     }
@@ -381,11 +348,11 @@ var Select = /*#__PURE__*/function (_Component) {
       // in order to avoid closing menu on space but allow to use it for filtering
       if (this.props.disabled || this.state.isFilterActive) {
         return;
-      } // using the enter key on the toggle button will trigger a synthetic click event as all buttons are of
+      }
+
+      // using the enter key on the toggle button will trigger a synthetic click event as all buttons are of
       // type submit by default in HTML. In order to differentiate between real click and a synthetic event
       // caused by they keyboard, use the event details. A synthetic event is always 0.
-
-
       var keyboardUsed = event.detail === 0;
       this.setState({
         isOpen: !this.state.isOpen,
@@ -396,7 +363,6 @@ var Select = /*#__PURE__*/function (_Component) {
     key: "onOpenMenu",
     value: function onOpenMenu(dropup) {
       var node = _reactDom["default"].findDOMNode(this);
-
       if (dropup) {
         node.classList.add('dropup');
       } else {
@@ -407,7 +373,6 @@ var Select = /*#__PURE__*/function (_Component) {
     key: "closeMenu",
     value: function closeMenu() {
       var _this7 = this;
-
       if (this.state.isOpen) {
         this.setState(function () {
           return {
@@ -430,7 +395,6 @@ var Select = /*#__PURE__*/function (_Component) {
   }]);
   return Select;
 }(_react.Component);
-
 exports.Select = Select;
 Select.defaultProps = {
   onChange: function onChange() {},
@@ -488,7 +452,5 @@ Select.propTypes = {
   // Adds a clear button
   useClear: _propTypes["default"].bool
 };
-
 var _default = (0, _reactOnclickoutside["default"])(Select);
-
 exports["default"] = _default;