@desynova-digital/components 9.0.26 → 9.1.0

package/atoms/customSelect/customSelect.js

@@ -1,51 +1,33 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _templateObject = _taggedTemplateLiteral(['\n\n.form-input input{ \n  width: 100%;\n  box-sizing: border-box;\n\n  background: ', ';\n\n  border:none;\n  border-radius:0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid ', ';\n\n\n  font-family: inherit;\n  color: ', ';\n\n\n  cursor: ', ';\n\n  font-size:14px;\n  padding:7px 15px 2px 0px;\n  margin-top:15px;\n  \n  display:block;\n\n  &:hover {\n    border-color: ', ';\n  }\n  &:disabled:hover {\n    border-color: ', ';\n  }\n  &:disabled {\n    border-color: ', ';\n    color: ', ';\n  }\n  &:focus { \n    outline: none;\n  }\n  &::placeholder {\n\n    color: ', ';\n\n    opacity: ', '; /* Firefox */\n    transition:0.2s ease all; \n  }\n\n  &:focus::placeholder {\n\n  color: ', ';\n\n  opacity: ', ';\n  }\n\n\n}\n\n\n\n\n\n\n\n\n\n\n\n\n.dropdownbox{\n  display: block;\n  position: relative;\n  min-height: 21px;\n font-family: SFUIText-Regular;\n}\n.dropdown-options{\n  margin-left: auto;\n  margin-right: auto;\n  display: none;\n  background:', ';\n  color:', '; \n}\n.dropdownbox.open .dropdown-options{\n  display: block;\n  position: absolute;\n  left:0px;\n  z-index:1;\n  width:100%;\n  top:', ';  \n}\n.dropdownbox.open .selected-chips{\n  display: none;\n}\n\n.dropdownbox.open .form-input input{\n  //display: none;\n  visibility: hidden;\n}\n\n.dropdownbox .form-input input{\n  display: block;\n}\n\n.dropdownbox .form-input label{\n  display: block;\n}\n\n.form-input {\n  background: transparent;\n  font-family: \'SFUIText-Medium\';\n  position: relative;\n  width: 100%;\n}\n\n\n.form-input label,\n.open .form-input label,\n.open .form-input label.floaton{\n  color: ', '; \n  font-size:14px;\n\n  font-family: inherit;\n  position:absolute;\n  pointer-events:none;\n  text-transform: none;\n  left: 0px;\n  top: 5px;\n  transition:0.2s ease all; \n  -moz-transition:0.2s ease all; \n  -webkit-transition:0.2s ease all;\n}\n\n\n.form-input label.floaton{\n  top:-5px;\n  left: 0px;\n  font-size:10px;\n  color:', ';\n  text-transform: uppercase;\n}\n.open .chip-selection-box{\n  display:none;\n}\n\n\n\n.dropdown-options-box{\n  max-height: 200px;\n  overflow: auto;\n  border: 1px solid #ddd;\n  border-left: 0px;\n  border-right: 0px;\n}\n\n.dropdown-options .search-input{\n  position:absolute;\n  width:100%;\n  & .loading{\n    position: absolute;\n    top: 7px;\n    right: 5px;\n  }\n}\n\n.dropdown-options  .search-input input{\n width:100%;\n}\n\n\n\n.chip-selection-box{\n  overflow-y: auto;\n  padding-top:10px;\n\n}\n.selected-chips{\n    text-align: left;\n    border: 1px solid ', ';;\n    padding: 10px 10px 5px;\n}\n.selected-chips:hover{\n    border: 1px solid ', ';;\n}\n\n'], ['\n\n.form-input input{ \n  width: 100%;\n  box-sizing: border-box;\n\n  background: ', ';\n\n  border:none;\n  border-radius:0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid ', ';\n\n\n  font-family: inherit;\n  color: ', ';\n\n\n  cursor: ', ';\n\n  font-size:14px;\n  padding:7px 15px 2px 0px;\n  margin-top:15px;\n  \n  display:block;\n\n  &:hover {\n    border-color: ', ';\n  }\n  &:disabled:hover {\n    border-color: ', ';\n  }\n  &:disabled {\n    border-color: ', ';\n    color: ', ';\n  }\n  &:focus { \n    outline: none;\n  }\n  &::placeholder {\n\n    color: ', ';\n\n    opacity: ', '; /* Firefox */\n    transition:0.2s ease all; \n  }\n\n  &:focus::placeholder {\n\n  color: ', ';\n\n  opacity: ', ';\n  }\n\n\n}\n\n\n\n\n\n\n\n\n\n\n\n\n.dropdownbox{\n  display: block;\n  position: relative;\n  min-height: 21px;\n font-family: SFUIText-Regular;\n}\n.dropdown-options{\n  margin-left: auto;\n  margin-right: auto;\n  display: none;\n  background:', ';\n  color:', '; \n}\n.dropdownbox.open .dropdown-options{\n  display: block;\n  position: absolute;\n  left:0px;\n  z-index:1;\n  width:100%;\n  top:', ';  \n}\n.dropdownbox.open .selected-chips{\n  display: none;\n}\n\n.dropdownbox.open .form-input input{\n  //display: none;\n  visibility: hidden;\n}\n\n.dropdownbox .form-input input{\n  display: block;\n}\n\n.dropdownbox .form-input label{\n  display: block;\n}\n\n.form-input {\n  background: transparent;\n  font-family: \'SFUIText-Medium\';\n  position: relative;\n  width: 100%;\n}\n\n\n.form-input label,\n.open .form-input label,\n.open .form-input label.floaton{\n  color: ', '; \n  font-size:14px;\n\n  font-family: inherit;\n  position:absolute;\n  pointer-events:none;\n  text-transform: none;\n  left: 0px;\n  top: 5px;\n  transition:0.2s ease all; \n  -moz-transition:0.2s ease all; \n  -webkit-transition:0.2s ease all;\n}\n\n\n.form-input label.floaton{\n  top:-5px;\n  left: 0px;\n  font-size:10px;\n  color:', ';\n  text-transform: uppercase;\n}\n.open .chip-selection-box{\n  display:none;\n}\n\n\n\n.dropdown-options-box{\n  max-height: 200px;\n  overflow: auto;\n  border: 1px solid #ddd;\n  border-left: 0px;\n  border-right: 0px;\n}\n\n.dropdown-options .search-input{\n  position:absolute;\n  width:100%;\n  & .loading{\n    position: absolute;\n    top: 7px;\n    right: 5px;\n  }\n}\n\n.dropdown-options  .search-input input{\n width:100%;\n}\n\n\n\n.chip-selection-box{\n  overflow-y: auto;\n  padding-top:10px;\n\n}\n.selected-chips{\n    text-align: left;\n    border: 1px solid ', ';;\n    padding: 10px 10px 5px;\n}\n.selected-chips:hover{\n    border: 1px solid ', ';;\n}\n\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n    color: ', ';\n    padding-top: 5px;\n    display: inline-block;\n    font-size: 13px;\n    font-family: inherit;\n    width: 100%;\n    text-align: left;\n'], ['\n    color: ', ';\n    padding-top: 5px;\n    display: inline-block;\n    font-size: 13px;\n    font-family: inherit;\n    width: 100%;\n    text-align: left;\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _tokens = require('@desynova-digital/tokens');
-
-var _tag = require('../tag');
-
-var _tag2 = _interopRequireDefault(_tag);
-
-var _dropdownList = require('../dropdownList');
-
-var _dropdownList2 = _interopRequireDefault(_dropdownList);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var CustomSelectContorl = _styledComponents2.default.div(_templateObject, function (props) {
+exports["default"] = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _tokens = require("@desynova-digital/tokens");
+var _tag = _interopRequireDefault(require("../tag"));
+var _dropdownList = _interopRequireDefault(require("../dropdownList"));
+var _templateObject, _templateObject2;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var CustomSelectContorl = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n\n.form-input input{ \n  width: 100%;\n  box-sizing: border-box;\n\n  background: ", ";\n\n  border:none;\n  border-radius:0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid ", ";\n\n\n  font-family: inherit;\n  color: ", ";\n\n\n  cursor: ", ";\n\n  font-size:14px;\n  padding:7px 15px 2px 0px;\n  margin-top:15px;\n  \n  display:block;\n\n  &:hover {\n    border-color: ", ";\n  }\n  &:disabled:hover {\n    border-color: ", ";\n  }\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n  }\n  &:focus { \n    outline: none;\n  }\n  &::placeholder {\n\n    color: ", ";\n\n    opacity: ", "; /* Firefox */\n    transition:0.2s ease all; \n  }\n\n  &:focus::placeholder {\n\n  color: ", ";\n\n  opacity: ", ";\n  }\n\n\n}\n\n\n\n\n\n\n\n\n\n\n\n\n.dropdownbox{\n  display: block;\n  position: relative;\n  min-height: 21px;\n font-family: SFUIText-Regular;\n}\n.dropdown-options{\n  margin-left: auto;\n  margin-right: auto;\n  display: none;\n  background:", ";\n  color:", "; \n}\n.dropdownbox.open .dropdown-options{\n  display: block;\n  position: absolute;\n  left:0px;\n  z-index:1;\n  width:100%;\n  top:", ";  \n}\n.dropdownbox.open .selected-chips{\n  display: none;\n}\n\n.dropdownbox.open .form-input input{\n  //display: none;\n  visibility: hidden;\n}\n\n.dropdownbox .form-input input{\n  display: block;\n}\n\n.dropdownbox .form-input label{\n  display: block;\n}\n\n.form-input {\n  background: transparent;\n  font-family: 'SFUIText-Medium';\n  position: relative;\n  width: 100%;\n}\n\n\n.form-input label,\n.open .form-input label,\n.open .form-input label.floaton{\n  color: ", "; \n  font-size:14px;\n\n  font-family: inherit;\n  position:absolute;\n  pointer-events:none;\n  text-transform: none;\n  left: 0px;\n  top: 5px;\n  transition:0.2s ease all; \n  -moz-transition:0.2s ease all; \n  -webkit-transition:0.2s ease all;\n}\n\n\n.form-input label.floaton{\n  top:-5px;\n  left: 0px;\n  font-size:10px;\n  color:", ";\n  text-transform: uppercase;\n}\n.open .chip-selection-box{\n  display:none;\n}\n\n\n\n.dropdown-options-box{\n  max-height: 200px;\n  overflow: auto;\n  border: 1px solid #ddd;\n  border-left: 0px;\n  border-right: 0px;\n}\n\n.dropdown-options .search-input{\n  position:absolute;\n  width:100%;\n  & .loading{\n    position: absolute;\n    top: 7px;\n    right: 5px;\n  }\n}\n\n.dropdown-options  .search-input input{\n width:100%;\n}\n\n\n\n.chip-selection-box{\n  overflow-y: auto;\n  padding-top:10px;\n\n}\n.selected-chips{\n    text-align: left;\n    border: 1px solid ", ";;\n    padding: 10px 10px 5px;\n}\n.selected-chips:hover{\n    border: 1px solid ", ";;\n}\n\n"])), function (props) {
   return _tokens.colors[props.theme].inputCommon.background;
 }, function (props) {
   if (props.error) {
@@ -98,32 +80,24 @@ var CustomSelectContorl = _styledComponents2.default.div(_templateObject, functi
 }, function (props) {
   return _tokens.colors[props.theme].customSelect.chipSelectionBox.borderHover;
 });
-
-var InputError = _styledComponents2.default.span(_templateObject2, function (props) {
+var InputError = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    color: ", ";\n    padding-top: 5px;\n    display: inline-block;\n    font-size: 13px;\n    font-family: inherit;\n    width: 100%;\n    text-align: left;\n"])), function (props) {
   return _tokens.colors[props.theme].inputError.color;
 });
-
-var CustomSelect = function (_Component) {
-  _inherits(CustomSelect, _Component);
-
+var CustomSelect = /*#__PURE__*/function (_Component) {
   function CustomSelect(props) {
-    _classCallCheck(this, CustomSelect);
-
-    var _this = _possibleConstructorReturn(this, (CustomSelect.__proto__ || Object.getPrototypeOf(CustomSelect)).call(this, props));
-
-    _this.setSelection = function (selectedObj, selectedElement, groupLabel) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, CustomSelect);
+    _this = _callSuper(this, CustomSelect, [props]);
+    (0, _defineProperty2["default"])(_this, "setSelection", function (selectedObj, selectedElement, groupLabel) {
       if (_this.checkIfSelectable(selectedElement.className)) {
         if (_this.props.type === "multiselect") {
-
           if (selectedElement.className.split("selected").length > 1) {
             var filterItems = _this.state.selected.filter(function (selectedItem) {
               return JSON.stringify(selectedObj) !== JSON.stringify(selectedItem);
             });
-
             _this.setState({
               selected: filterItems
             }, function () {
-
               if (_this.searchInput && _this.searchInput.current) {
                 _this.searchInput.current.value = '';
               }
@@ -138,7 +112,6 @@ var CustomSelect = function (_Component) {
                 selected: prevState.selected.concat(selectedObj)
               };
             }, function () {
-
               if (_this.searchInput && _this.searchInput.current) {
                 _this.searchInput.current.value = '';
               }
@@ -153,7 +126,7 @@ var CustomSelect = function (_Component) {
           } else {
             _this.setState(function (prevState) {
               return {
-                selected: [_extends({}, selectedObj)]
+                selected: [_objectSpread({}, selectedObj)]
               };
             }, function () {
               if (_this.searchInput && _this.searchInput.current) {
@@ -166,9 +139,8 @@ var CustomSelect = function (_Component) {
           }
         }
       }
-    };
-
-    _this.handleKeyPress = function (event) {
+    });
+    (0, _defineProperty2["default"])(_this, "handleKeyPress", function (event) {
       var noOfSelectable = document.querySelectorAll('.open .dropdown-options .selectable').length;
       if (event.key === 'ArrowDown') {
         if (_this.focusItem < noOfSelectable - 1) {
@@ -184,26 +156,24 @@ var CustomSelect = function (_Component) {
         document.querySelectorAll('.open .dropdown-options .selectable:focus')[0].click();
         _this.handleClick();
       }
-    };
-
+    });
     _this.state = {
       options: props.options,
-      selected: _this.props.defaultSelected ? [].concat(_toConsumableArray(_this.props.defaultSelected)) : [],
+      selected: _this.props.defaultSelected ? (0, _toConsumableArray2["default"])(_this.props.defaultSelected) : [],
       selectedLabel: '',
       popupVisible: false
     };
     _this.focusItem = -1;
-    _this.searchInput = _react2.default.createRef();
+    _this.searchInput = /*#__PURE__*/_react["default"].createRef();
     _this.handleClick = _this.handleClick.bind(_this);
     _this.handleOutsideClick = _this.handleOutsideClick.bind(_this);
     _this.searchTextChange = _this.searchTextChange.bind(_this);
     _this.setSelection = _this.setSelection.bind(_this);
-
     return _this;
   }
-
-  _createClass(CustomSelect, [{
-    key: 'handleClick',
+  (0, _inherits2["default"])(CustomSelect, _Component);
+  return (0, _createClass2["default"])(CustomSelect, [{
+    key: "handleClick",
     value: function handleClick() {
       if (!this.state.popupVisible) {
         // attach/remove event handler
@@ -214,7 +184,6 @@ var CustomSelect = function (_Component) {
         document.removeEventListener('click', this.handleOutsideClick, false);
         document.removeEventListener('keydown', this.handleKeyPress, false);
       }
-
       this.setState(function (prevState) {
         return {
           popupVisible: !prevState.popupVisible
@@ -222,7 +191,7 @@ var CustomSelect = function (_Component) {
       });
     }
   }, {
-    key: 'handleOutsideClick',
+    key: "handleOutsideClick",
     value: function handleOutsideClick(e) {
       // ignore clicks on the component itself
       if (this.state.node) {
@@ -230,11 +199,10 @@ var CustomSelect = function (_Component) {
           return;
         }
       }
-
       this.handleClick();
     }
   }, {
-    key: 'checkIfSelectable',
+    key: "checkIfSelectable",
     value: function checkIfSelectable(classes) {
       if (classes.split("selectable").length > 1) {
         return true;
@@ -243,7 +211,7 @@ var CustomSelect = function (_Component) {
       }
     }
   }, {
-    key: 'searchTextChange',
+    key: "searchTextChange",
     value: function searchTextChange(newText) {
       var minchar = this.props.minchar ? this.props.minchar : 0;
       if (this.searchInput && this.searchInput.current) {
@@ -253,10 +221,9 @@ var CustomSelect = function (_Component) {
       }
     }
   }, {
-    key: 'deleteSelection',
+    key: "deleteSelection",
     value: function deleteSelection(delSelection) {
       var _this2 = this;
-
       var filterItems = this.state.selected.filter(function (selectedItem) {
         return JSON.stringify(delSelection) !== JSON.stringify(selectedItem);
       });
@@ -264,157 +231,111 @@ var CustomSelect = function (_Component) {
         selected: filterItems
       }, function () {
         if (_this2.searchInput && _this2.searchInput.current) _this2.searchInput.current.value = '';
-
         _this2.props.selectionChangeCallback(_this2.state.selected, _this2.state.selected.map(function (item) {
           return item.data;
         }));
       });
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var _this3 = this;
-
-      return _react2.default.createElement(
-        CustomSelectContorl,
-        { theme: this.props.theme,
-          type: this.props.type,
-          error: this.props.error,
-          label: this.props.label && this.props.label.length ? this.props.label : false },
-        _react2.default.createElement(
-          'div',
-          { className: this.state.popupVisible ? "dropdownbox open" : "dropdownbox" },
-          _react2.default.createElement(
-            'div',
-            { className: 'dropdown-action' },
-            this.props.type === "multiselect" ? this.state.selected.length < 1 ? _react2.default.createElement(
-              'div',
-              { className: 'form-input' },
-              _react2.default.createElement(
-                'label',
-                { className: this.state.selected.length > 0 ? 'floaton' : '' },
-                this.props.label
-              ),
-              _react2.default.createElement('input', {
-                name: this.props.name,
-                type: 'text',
-                placeholder: this.props.placeholder,
-                onClick: this.handleClick,
-                theme: this.props.theme,
-                label: this.props.label && this.props.label.length ? this.props.label : false
-              })
-            ) : _react2.default.createElement(
-              'div',
-              { className: 'form-input' },
-              _react2.default.createElement(
-                'label',
-                { className: this.state.selected.length > 0 ? 'floaton' : '' },
-                this.props.label
-              ),
-              _react2.default.createElement(
-                'div',
-                { className: 'chip-selection-box', onClick: this.handleClick },
-                _react2.default.createElement(
-                  'div',
-                  { className: 'selected-chips' },
-                  _react2.default.createElement(
-                    _tag2.default.Group,
-                    { theme: this.props.theme },
-                    this.state.selected.map(function (selectedoption, index) {
-                      return _react2.default.createElement(
-                        _tag2.default,
-                        { theme: _this3.props.theme, key: selectedoption.value, onRemove: function onRemove(evt) {
-                            _this3.deleteSelection(selectedoption);
-                          } },
-                        (selectedoption.groupLabel.length > 0 ? selectedoption.groupLabel + ": " : '') + selectedoption.label
-                      );
-                    })
-                  )
-                )
-              )
-            ) : this.props.type === "select" ? _react2.default.createElement(
-              'div',
-              { className: 'form-input' },
-              _react2.default.createElement(
-                'label',
-                { className: this.state.selected.length > 0 ? 'floaton' : '' },
-                this.props.label
-              ),
-              _react2.default.createElement('input', { ref: this.searchInput,
-                type: 'text',
-                placeholder: this.props.placeholder,
-                onClick: this.handleClick,
-                name: this.props.name,
-                required: this.props.required
-                // value={(this.state.selected[0])?((groupLabel.length > 0)? groupLabel+' - ':'') +this.state.selected[0].label:''}
-                , value: this.searchInput.current ? this.searchInput.current.value : '',
-                theme: this.props.theme,
-                label: this.props.label && this.props.label.length ? this.props.label : false
-              }),
-              !this.state.popupVisible && this.props.error && this.props.error.length > 0 ? _react2.default.createElement(
-                InputError,
-                { theme: this.props.theme },
-                this.props.error
-              ) : ''
-            ) : _react2.default.createElement(
-              'div',
-              {
-                onClick: this.handleClick },
-              this.props.children
-            )
-          ),
-          _react2.default.createElement(
-            'div',
-            { className: "dropdown-options", ref: function ref(node) {
-                _this3.state.node = node;
-              } },
-            this.props.searchable ? _react2.default.createElement(
-              'div',
-              { className: 'search-input' },
-              _react2.default.createElement('input', {
-                type: 'text',
-                placeholder: 'search...',
-                ref: this.searchInput,
-                onChange: function onChange(e) {
-                  return _this3.searchTextChange(e.target.value);
-                } }),
-              this.props.loadingOption ? _react2.default.createElement(
-                'div',
-                { className: "loading" },
-                '*'
-              ) : null
-            ) : '',
-            _react2.default.createElement(
-              'div',
-              { className: "dropdown-options-box" },
-              _react2.default.createElement(_dropdownList2.default, {
-                theme: this.props.theme,
-                options: this.props.loadingOption ? [{
-                  type: 'disabled',
-                  value: '',
-                  label: 'Working...',
-                  display: 'item'
-                }] : this.props.options,
-                selectedOptions: this.state.selected,
-                itemOnClick: this.setSelection,
-                keyboardAction: this.props.keyboardAction
-              })
-            )
-          )
-        )
-      );
+      return /*#__PURE__*/_react["default"].createElement(CustomSelectContorl, {
+        theme: this.props.theme,
+        type: this.props.type,
+        error: this.props.error,
+        label: this.props.label && this.props.label.length ? this.props.label : false
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.state.popupVisible ? "dropdownbox open" : "dropdownbox"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "dropdown-action"
+      }, this.props.type === "multiselect" ? this.state.selected.length < 1 ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "form-input"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: this.state.selected.length > 0 ? 'floaton' : ''
+      }, this.props.label), /*#__PURE__*/_react["default"].createElement("input", {
+        name: this.props.name,
+        type: "text",
+        placeholder: this.props.placeholder,
+        onClick: this.handleClick,
+        theme: this.props.theme,
+        label: this.props.label && this.props.label.length ? this.props.label : false
+      })) : /*#__PURE__*/_react["default"].createElement("div", {
+        className: "form-input"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: this.state.selected.length > 0 ? 'floaton' : ''
+      }, this.props.label), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "chip-selection-box",
+        onClick: this.handleClick
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "selected-chips"
+      }, /*#__PURE__*/_react["default"].createElement(_tag["default"].Group, {
+        theme: this.props.theme
+      }, this.state.selected.map(function (selectedoption, index) {
+        return /*#__PURE__*/_react["default"].createElement(_tag["default"], {
+          theme: _this3.props.theme,
+          key: selectedoption.value,
+          onRemove: function onRemove(evt) {
+            _this3.deleteSelection(selectedoption);
+          }
+        }, (selectedoption.groupLabel.length > 0 ? selectedoption.groupLabel + ": " : '') + selectedoption.label);
+      }))))) : this.props.type === "select" ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "form-input"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: this.state.selected.length > 0 ? 'floaton' : ''
+      }, this.props.label), /*#__PURE__*/_react["default"].createElement("input", {
+        ref: this.searchInput,
+        type: "text",
+        placeholder: this.props.placeholder,
+        onClick: this.handleClick,
+        name: this.props.name,
+        required: this.props.required
+        // value={(this.state.selected[0])?((groupLabel.length > 0)? groupLabel+' - ':'') +this.state.selected[0].label:''}
+        ,
+        value: this.searchInput.current ? this.searchInput.current.value : '',
+        theme: this.props.theme,
+        label: this.props.label && this.props.label.length ? this.props.label : false
+      }), !this.state.popupVisible && this.props.error && this.props.error.length > 0 ? /*#__PURE__*/_react["default"].createElement(InputError, {
+        theme: this.props.theme
+      }, this.props.error) : '') : /*#__PURE__*/_react["default"].createElement("div", {
+        onClick: this.handleClick
+      }, this.props.children)), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "dropdown-options",
+        ref: function ref(node) {
+          _this3.state.node = node;
+        }
+      }, this.props.searchable ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "search-input"
+      }, /*#__PURE__*/_react["default"].createElement("input", {
+        type: "text",
+        placeholder: "search...",
+        ref: this.searchInput,
+        onChange: function onChange(e) {
+          return _this3.searchTextChange(e.target.value);
+        }
+      }), this.props.loadingOption ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "loading"
+      }, "*") : null) : '', /*#__PURE__*/_react["default"].createElement("div", {
+        className: "dropdown-options-box"
+      }, /*#__PURE__*/_react["default"].createElement(_dropdownList["default"], {
+        theme: this.props.theme,
+        options: this.props.loadingOption ? [{
+          type: 'disabled',
+          value: '',
+          label: 'Working...',
+          display: 'item'
+        }] : this.props.options,
+        selectedOptions: this.state.selected,
+        itemOnClick: this.setSelection,
+        keyboardAction: this.props.keyboardAction
+      })))));
     }
   }]);
-
-  return CustomSelect;
 }(_react.Component);
-
 ;
-
 CustomSelect.defaultProps = {
   theme: 'light',
   keyboardAction: true,
   loadingOption: false
 };
-
-exports.default = CustomSelect;
+var _default = exports["default"] = CustomSelect;