@hi-ui/hiui 2.15.11 → 2.15.12

package/es/select/select-legacy/SelectDropdown.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+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 _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _checkbox = _interopRequireDefault(require("../../checkbox"));
+
+var _loading = _interopRequireDefault(require("../../loading"));
+
+/* @flow */
+var SelectDropdown =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(SelectDropdown, _Component);
+
+  function SelectDropdown() {
+    (0, _classCallCheck2["default"])(this, SelectDropdown);
+    return (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(SelectDropdown).apply(this, arguments));
+  }
+
+  (0, _createClass2["default"])(SelectDropdown, [{
+    key: "onClickOption",
+    value: function onClickOption(e, item, index) {
+      e && e.stopPropagation();
+
+      if (item.disabled) {
+        return;
+      }
+
+      this.props.onClickOption(item, index);
+    }
+  }, {
+    key: "onMouseEnter",
+    value: function onMouseEnter(item, index) {
+      !item.disabled && this.props.setFocusedIndex(index);
+    }
+  }, {
+    key: "itemSelected",
+    value: function itemSelected(item) {
+      var selectedItems = this.props.selectedItems;
+      return selectedItems.map(function (item) {
+        return item.id;
+      }).indexOf(item.id) > -1;
+    }
+  }, {
+    key: "renderOption",
+    value: function renderOption(mode, isSelected, item) {
+      if (item.children) {
+        return item.children;
+      }
+
+      if (this.props.dropdownRender) {
+        return this.props.dropdownRender(item, isSelected);
+      }
+
+      return _react["default"].createElement(_react["default"].Fragment, null, mode === 'multiple' && _react["default"].createElement("div", {
+        className: "hi-select__dropdown--item__checkbox"
+      }, _react["default"].createElement(_checkbox["default"], {
+        legacy: true,
+        checked: isSelected,
+        disabled: item.disabled
+      })), _react["default"].createElement("div", {
+        className: "hi-select__dropdown--item__name"
+      }, item.name), mode === 'single' && isSelected && _react["default"].createElement("div", {
+        className: "hi-select__dropdown--item__check-icon"
+      }, _react["default"].createElement("i", {
+        className: "hi-icon icon-check"
+      })));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this = this;
+
+      var _this$props = this.props,
+          mode = _this$props.mode,
+          dropdownItems = _this$props.dropdownItems,
+          focusedIndex = _this$props.focusedIndex,
+          matchFilter = _this$props.matchFilter,
+          noFoundTip = _this$props.noFoundTip,
+          loading = _this$props.loading,
+          optionWidth = _this$props.optionWidth,
+          showCheckAll = _this$props.showCheckAll,
+          checkAll = _this$props.checkAll,
+          dropdownRender = _this$props.dropdownRender;
+      var matched = 0;
+      var style = optionWidth && {
+        width: optionWidth
+      };
+      return _react["default"].createElement("div", {
+        className: "hi-select__dropdown",
+        onClick: this.props.onClick,
+        style: style
+      }, loading && _react["default"].createElement("div", {
+        className: "hi-select__dropdown--loading"
+      }, _react["default"].createElement(_loading["default"], {
+        size: "small"
+      })), !loading && _react["default"].createElement("ul", {
+        className: "hi-select__dropdown--items"
+      }, dropdownItems.map(function (item, index) {
+        if (matchFilter(item)) {
+          matched++; // const isSelected = selectedItems[item.id]
+
+          var isSelected = _this.itemSelected(item);
+
+          var isDisabled = item.disabled;
+          return _react["default"].createElement("li", {
+            className: (0, _classnames["default"])('hi-select__dropdown--item', {
+              'is-active': isSelected,
+              'is-disabled': isDisabled,
+              'hi-select__dropdown--item-default': !item.children && !dropdownRender
+            }),
+            onClick: function onClick(e) {
+              return _this.onClickOption(e, item, index);
+            },
+            key: item.id,
+            "data-focused": focusedIndex === index,
+            onMouseEnter: function onMouseEnter() {
+              return _this.onMouseEnter(item, index);
+            }
+          }, _this.renderOption(mode, isSelected, item));
+        }
+      }), matched === 0 && _react["default"].createElement("li", {
+        className: "hi-select__dropdown--item hi-select__dropdown-item--empty is-disabled",
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        }
+      }, noFoundTip)), mode === 'multiple' && showCheckAll && _react["default"].createElement("div", {
+        className: "hi-select__dropdown-check-all",
+        onClick: checkAll
+      }, "\u5168\u9009"));
+    }
+  }]);
+  return SelectDropdown;
+}(_react.Component);
+
+exports["default"] = SelectDropdown;

package/es/select/select-legacy/SelectInput.js

@@ -0,0 +1,308 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _common = require("./common");
+
+/* @flow */
+var SelectInput =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(SelectInput, _Component);
+
+  function SelectInput(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, SelectInput);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(SelectInput).call(this, props));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "calShowCountFlag", true);
+    _this.state = {
+      showCount: 0,
+      value: '',
+      inputStyle: {
+        width: '2px'
+      }
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(SelectInput, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      if (this.props.multipleMode === 'nowrap' && this.calShowCountFlag && this.itemsRef) {
+        // 多选超过一行时以数字显示
+        var itemsRect = this.itemsRef.getBoundingClientRect();
+        var width = 0;
+        var showCount = 0;
+        var items = this.itemsRef.querySelectorAll('.hi-select__input--item');
+        var _iteratorNormalCompletion = true;
+        var _didIteratorError = false;
+        var _iteratorError = undefined;
+
+        try {
+          for (var _iterator = items[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+            var item = _step.value;
+            var itemRect = item.getBoundingClientRect();
+            width += itemRect.width;
+
+            if (width + 50 < itemsRect.width || width > itemsRect.width && width + 50 <= itemsRect.width && showCount + 1 === items.length) {
+              // 50是留给显示剩余选项的空间
+              ++showCount;
+            } else {
+              break;
+            }
+          }
+        } catch (err) {
+          _didIteratorError = true;
+          _iteratorError = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion && _iterator["return"] != null) {
+              _iterator["return"]();
+            }
+          } finally {
+            if (_didIteratorError) {
+              throw _iteratorError;
+            }
+          }
+        }
+
+        this.setState({
+          showCount: showCount
+        });
+        this.calShowCountFlag = false;
+      } else {
+        this.calShowCountFlag = true;
+      }
+    }
+  }, {
+    key: "focus",
+    value: function focus() {
+      var _this2 = this;
+
+      setTimeout(function () {
+        return _this2.searchInput && _this2.searchInput.focus();
+      }, 0);
+    }
+  }, {
+    key: "handleKeywordChange",
+    value: function handleKeywordChange(evt) {
+      var val = evt.target.value;
+      this.setState({
+        value: val,
+        inputStyle: {
+          width: (0, _common.getTextWidth)(val) + 'px'
+        }
+      });
+      this.props.onSearch(evt.target.value);
+    }
+  }, {
+    key: "clearInput",
+    value: function clearInput() {
+      this.searchInput && (this.searchInput.value = '');
+      this.setState({
+        value: ''
+      });
+    }
+  }, {
+    key: "handleKeyDown",
+    value: function handleKeyDown(evt) {
+      if (evt.keyCode === 13) {
+        this.props.onEnterSelect();
+      }
+
+      if (evt.keyCode === 38) {
+        evt.preventDefault();
+        this.props.moveFocusedIndex('up');
+      }
+
+      if (evt.keyCode === 40) {
+        evt.preventDefault();
+        this.props.moveFocusedIndex('down');
+      }
+    }
+  }, {
+    key: "handleClear",
+    value: function handleClear() {
+      this.props.onClear();
+      this.clearInput();
+    }
+  }, {
+    key: "renderMultiple",
+    value: function renderMultiple() {
+      var _this3 = this;
+
+      var _this$props = this.props,
+          placeholder = _this$props.placeholder,
+          selectedItems = _this$props.selectedItems,
+          dropdownShow = _this$props.dropdownShow,
+          disabled = _this$props.disabled,
+          searchable = _this$props.searchable,
+          clearable = _this$props.clearable,
+          multipleMode = _this$props.multipleMode,
+          onFocus = _this$props.onFocus,
+          onBlur = _this$props.onBlur;
+      var icon = dropdownShow ? 'up' : 'down';
+      var _this$state = this.state,
+          showCount = _this$state.showCount,
+          value = _this$state.value,
+          inputStyle = _this$state.inputStyle;
+      showCount = showCount === 0 || this.calShowCountFlag ? selectedItems.length : showCount;
+
+      if (!selectedItems.length) {
+        inputStyle = {
+          width: '100%'
+        };
+      }
+
+      return _react["default"].createElement("div", {
+        className: (0, _classnames["default"])('hi-select__input', 'multiple-values', {
+          disabled: disabled
+        }),
+        onClick: this.props.onClick
+      }, selectedItems.length === 0 && !value && _react["default"].createElement("div", {
+        className: "hi-select__input--placeholder"
+      }, placeholder), _react["default"].createElement("div", {
+        className: (0, _classnames["default"])('hi-select__input-items', {
+          'hi-select__input-items--all': multipleMode === 'wrap'
+        }),
+        ref: function ref(node) {
+          _this3.itemsRef = node;
+        }
+      }, selectedItems.slice(0, showCount).map(function (item, index) {
+        var _item = _react["default"].createElement("div", {
+          key: index,
+          className: "hi-select__input--item"
+        }, _react["default"].createElement("div", {
+          className: "hi-select__input--item__name"
+        }, item.name), _react["default"].createElement("span", {
+          className: "hi-select__input--item__remove",
+          onClick: function onClick(e) {
+            e.stopPropagation();
+
+            _this3.props.onDelete(item);
+          }
+        }, _react["default"].createElement("i", {
+          className: "hi-icon icon-close"
+        })));
+
+        return _item;
+      }), showCount < selectedItems.length && _react["default"].createElement("div", {
+        className: "hi-select__input-items--left"
+      }, "+", _react["default"].createElement("span", {
+        className: "hi-select__input-items--left-count"
+      }, selectedItems.length - showCount)), searchable && !disabled && _react["default"].createElement("div", {
+        className: "hi-select__input--search"
+      }, _react["default"].createElement("input", {
+        type: "text",
+        style: inputStyle,
+        ref: function ref(input) {
+          _this3.searchInput = input;
+        },
+        onChange: this.handleKeywordChange.bind(this),
+        onKeyDown: this.handleKeyDown.bind(this),
+        onFocus: onFocus.bind(this),
+        onBlur: onBlur.bind(this)
+      }))), _react["default"].createElement("span", {
+        className: "hi-select__input--icon"
+      }, _react["default"].createElement("i", {
+        className: (0, _classnames["default"])("hi-icon icon-".concat(icon, " hi-select__input--icon__expand"), {
+          clearable: clearable && selectedItems.length > 0
+        })
+      }), clearable && selectedItems.length > 0 && _react["default"].createElement("i", {
+        className: "hi-icon icon-close-circle hi-select__input--icon__close",
+        onClick: this.handleClear.bind(this)
+      })));
+    }
+  }, {
+    key: "renderSingle",
+    value: function renderSingle() {
+      var _this4 = this;
+
+      var _this$props2 = this.props,
+          placeholder = _this$props2.placeholder,
+          selectedItems = _this$props2.selectedItems,
+          dropdownShow = _this$props2.dropdownShow,
+          disabled = _this$props2.disabled,
+          searchable = _this$props2.searchable,
+          clearable = _this$props2.clearable,
+          onFocus = _this$props2.onFocus,
+          onBlur = _this$props2.onBlur;
+      placeholder = selectedItems.length > 0 ? selectedItems[0].name : placeholder;
+      var icon = dropdownShow ? 'up' : 'down';
+      return _react["default"].createElement("div", {
+        className: (0, _classnames["default"])('hi-select__input', 'single-value', {
+          disabled: disabled
+        }),
+        onClick: this.props.onClick
+      }, _react["default"].createElement("div", {
+        className: (0, _classnames["default"])('hi-select__input--item', {
+          'hi-select__hide': !(!dropdownShow && selectedItems.length > 0)
+        })
+      }, _react["default"].createElement("div", {
+        className: "hi-select__input--item__name"
+      }, selectedItems[0] && selectedItems[0].name)), (dropdownShow || selectedItems.length === 0) && _react["default"].createElement("div", {
+        className: "hi-select__input--search"
+      }, _react["default"].createElement("input", {
+        type: "text",
+        ref: function ref(input) {
+          _this4.searchInput = input;
+        },
+        placeholder: placeholder,
+        onChange: this.handleKeywordChange.bind(this),
+        onKeyDown: this.handleKeyDown.bind(this),
+        onFocus: onFocus.bind(this),
+        onBlur: onBlur.bind(this),
+        readOnly: disabled || !searchable
+      })), _react["default"].createElement("span", {
+        className: "hi-select__input--icon"
+      }, _react["default"].createElement("i", {
+        className: (0, _classnames["default"])("hi-icon icon-".concat(icon, " hi-select__input--icon__expand"), {
+          clearable: clearable && selectedItems.length > 0
+        })
+      }), clearable && selectedItems.length > 0 && _react["default"].createElement("i", {
+        className: "hi-icon icon-close-circle hi-select__input--icon__close",
+        onClick: this.handleClear.bind(this)
+      })));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var mode = this.props.mode;
+
+      if (mode === 'multiple') {
+        return this.renderMultiple();
+      } else {
+        return this.renderSingle();
+      }
+    }
+  }]);
+  return SelectInput;
+}(_react.Component);
+
+exports["default"] = SelectInput;

package/es/select/select-legacy/common.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTextWidth = getTextWidth;
+
+function getTextWidth(text) {
+  var clientWidth = 0;
+  var span = document.createElement('span');
+  span.innerText = text;
+  span.style.display = 'inline-block';
+  span.style.position = 'fixed';
+  span.style.top = '-100px';
+  document.body.appendChild(span);
+  clientWidth = span.clientWidth + 5;
+  document.body.removeChild(span);
+  return clientWidth;
+}

package/es/select/select-legacy/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _Select = _interopRequireDefault(require("./Select"));
+
+var _Option = _interopRequireDefault(require("./Option"));
+
+_Select["default"].Option = _Option["default"];
+var _default = _Select["default"];
+exports["default"] = _default;

package/es/select/style/select-dropdown.css

@@ -1 +1 @@
-.hi-select__dropdown{width:100%;max-height:300px;font-size:12px;color:#333;overflow-x:hidden;overflow-y:auto;background-color:#fff;-webkit-box-shadow:0 1px 6px rgba(0,0,0,0.2);box-shadow:0 1px 6px rgba(0,0,0,0.2);border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:left}.hi-select__dropdown--loading{height:50px}.hi-select__dropdown--items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;max-height:250px;list-style:none;margin:0;padding:0}.hi-select__dropdown-check-all{padding:8px 12px;font-size:12px;color:#4284f5;cursor:pointer}.hi-select__dropdown--item{-webkit-box-flex:0;-ms-flex:none;flex:none;display:block;height:36px;line-height:36px;padding:0 12px;margin:0;font-weight:400;cursor:pointer;list-style:none;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hi-select__dropdown--item.hi-select__dropdown--item-default{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.hi-select__dropdown--item .hi-select__dropdown--item__name{padding-right:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hi-select__dropdown--item .hi-select__dropdown--item__checkbox{-webkit-box-flex:0;-ms-flex:none;flex:none}.hi-select__dropdown--item .hi-checkbox-label{padding:0;margin-right:10px}.hi-select__dropdown--item.is-active{color:#4284f5}.hi-select__dropdown--item.is-disabled{cursor:not-allowed;opacity:0.4}.hi-select__dropdown--item[data-focused='true']{background-color:rgba(66,132,245,0.08)}.hi-select__dropdown--item.disabled{opacity:0.4;cursor:not-allowed}.hi-select__dropdown--item__name{-webkit-box-flex:1;-ms-flex:auto;flex:auto}.hi-select__dropdown--item__check-icon{-webkit-box-flex:0;-ms-flex:none;flex:none}
+.hi-select__dropdown{width:100%;font-size:12px;color:#333;overflow-x:hidden;overflow-y:auto;background-color:#fff;-webkit-box-shadow:0 1px 6px rgba(0,0,0,0.2);box-shadow:0 1px 6px rgba(0,0,0,0.2);border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:left}.hi-select__dropdown--loading{height:50px}.hi-select__dropdown--items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;max-height:250px;list-style:none;margin:0;padding:0}.hi-select__dropdown-check-all{padding:8px 12px;font-size:12px;color:#4284f5;cursor:pointer;border-top:1px solid #e6e7e8}.hi-select__dropdown--item{-webkit-box-flex:0;-ms-flex:none;flex:none;display:block;height:36px;line-height:36px;padding:0 12px;margin:0;font-weight:400;cursor:pointer;list-style:none;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hi-select__dropdown--item.hi-select__dropdown--item-default{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.hi-select__dropdown--item .hi-select__dropdown--item__name{padding-right:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.hi-select__dropdown--item .hi-select__dropdown--item__name-hightlight{color:#f63}.hi-select__dropdown--item .hi-select__dropdown--item__checkbox{-webkit-box-flex:0;-ms-flex:none;flex:none;position:relative}.hi-select__dropdown--item .hi-checkbox-label{padding:0;margin-right:10px}.hi-select__dropdown--item.is-active{color:#4284f5}.hi-select__dropdown--item.is-disabled{cursor:not-allowed;opacity:0.4}.hi-select__dropdown--item[data-focused='true']{background-color:rgba(66,132,245,0.08)}.hi-select__dropdown--item.disabled{opacity:0.4;cursor:not-allowed}.hi-select__dropdown--item__name{-webkit-box-flex:1;-ms-flex:auto;flex:auto}.hi-select__dropdown--item__check-icon{-webkit-box-flex:0;-ms-flex:none;flex:none}.hi-select__dropdown__searchbar{background-color:#fff;width:100%;padding:0 12px;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-select__dropdown__searchbar--input{width:100%;height:100%;border:none;outline:none;padding:0 10px}.hi-select__dropdown__searchbar .icon-close-circle{color:#999}.hi-select__dropdown__searchbar--content{height:36px;border-bottom:1px solid #e6e7e8;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.hi-select__dropdown__searchbar--content .hi-input__inner{border:none}.theme__orange.hi-select__dropdown-check-all{color:#f63}.theme__orange.hi-select__dropdown--item.is-active{color:#f63}.theme__orange.hi-select__dropdown--item[data-focused='true']{background-color:rgba(255,102,51,0.08)}.theme__cyan.hi-select__dropdown-check-all{color:#46bc99}.theme__cyan.hi-select__dropdown--item.is-active{color:#46bc99}.theme__cyan.hi-select__dropdown--item[data-focused='true']{background-color:rgba(70,188,153,0.08)}.theme__magenta.hi-select__dropdown-check-all{color:#ff5975}.theme__magenta.hi-select__dropdown--item.is-active{color:#ff5975}.theme__magenta.hi-select__dropdown--item[data-focused='true']{background-color:rgba(255,89,117,0.08)}.theme__lavender.hi-select__dropdown-check-all{color:#b450de}.theme__lavender.hi-select__dropdown--item.is-active{color:#b450de}.theme__lavender.hi-select__dropdown--item[data-focused='true']{background-color:rgba(180,80,222,0.08)}.theme__blue.hi-select__dropdown-check-all{color:#3da8f5}.theme__blue.hi-select__dropdown--item.is-active{color:#3da8f5}.theme__blue.hi-select__dropdown--item[data-focused='true']{background-color:rgba(61,168,245,0.08)}.theme__purple.hi-select__dropdown-check-all{color:#8a8acb}.theme__purple.hi-select__dropdown--item.is-active{color:#8a8acb}.theme__purple.hi-select__dropdown--item[data-focused='true']{background-color:rgba(138,138,203,0.08)}

package/es/select/style/select-input.css

@@ -1 +1 @@
-.hi-select__input{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;background-color:#fff;color:#333;line-height:1;border-radius:2px;border:1px solid #d9d9d9;cursor:pointer;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-select__input.disabled{cursor:not-allowed;opacity:0.4}.hi-select__input.disabled .hi-select__input--icon,.hi-select__input.disabled input{cursor:not-allowed}.hi-select__input .hi-icon{margin-left:0 !important}.hi-select__input.active,.hi-select__input:not(.disabled):hover{border-color:#4284f5}.hi-select__input:not(.disabled):hover .hi-select__input--icon__expand.clearable{display:none}.hi-select__input:not(.disabled):hover .hi-select__input--icon__close{display:block;color:#999}.hi-select__input .hi-select__input--icon{-webkit-box-flex:0;-ms-flex:none;flex:none}.hi-select__input--search input{position:relative;max-width:100%;width:100%;height:100%;padding:0;line-height:1;border-radius:2px;font-size:14px;cursor:pointer;background:transparent;border-width:0;outline:0;z-index:10}.hi-select__input--search input[data-visbility='false']{width:1px}.hi-select__input--search input::-webkit-input-placeholder{font-weight:300;color:#ccc}.hi-select__input--search input::-moz-placeholder{font-weight:300;color:#ccc}.hi-select__input--search input:-moz-placeholder{font-weight:300;color:#ccc}.hi-select__input--search input:-ms-input-placeholder{font-weight:300;color:#ccc}.hi-select__input--icon{position:relative;-webkit-box-flex:0;-ms-flex:none;flex:none;display:inline-block;padding:0 0 0 8px;cursor:pointer;font-size:24px;color:#434343;background-color:#fff;-webkit-transform:scale(0.66667) rotate(0deg);transform:scale(0.66667) rotate(0deg);-webkit-transition:all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);zoom:1;-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)"}.hi-select__input--icon .hi-select__input--icon__close{display:none}.hi-select__input.single-value{height:32px;line-height:32px}.hi-select__input.single-value .hi-select__input--item,.hi-select__input.single-value .hi-select__input--search{-webkit-box-flex:1;-ms-flex:auto;flex:auto;padding:0 0 0 13px}.hi-select__input.single-value .hi-select__input--item{height:32px;line-height:32px;overflow:hidden;-webkit-transition:padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);transition:padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);text-align:left}.hi-select__input.single-value .hi-select__input--item__name{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;-webkit-transition:margin 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);transition:margin 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)}.hi-select__input.multiple-values{padding:4px 4px 0 4px}.hi-select__input.multiple-values .hi-select__input--icon{margin-top:-4px}.hi-select__input.multiple-values .hi-select__input--search{padding-left:3px}.hi-select__input.multiple-values .hi-select__input--placeholder{position:absolute;top:3px;left:15px;right:30px;height:24px;line-height:24px;color:#ccc;z-index:1}.hi-select__input.multiple-values .hi-select__input--placeholder ~ .hi-select__input-items .hi-select__input--search{padding:0 20px 0 11px}.hi-select__input.multiple-values .hi-select__input-items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:auto;flex:auto;overflow:hidden}.hi-select__input.multiple-values .hi-select__input-items.hi-select__input-items--all{-ms-flex-wrap:wrap;flex-wrap:wrap}.hi-select__input.multiple-values .hi-select__input-items--left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 8px;height:22px;line-height:22px;font-size:12px;color:#333;background-color:#f2f2f2;border-radius:10px;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-select__input.multiple-values .hi-select__input--item{-webkit-box-flex:0;-ms-flex:none;flex:none;position:relative;max-width:80%;height:22px;line-height:22px;padding:0 20px 0 10px;margin:0 4px 4px 0;overflow:hidden;vertical-align:middle;background-color:#f2f2f2;border-radius:2px;text-align:left}.hi-select__input.multiple-values .hi-select__input--item__name{font-size:13px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.hi-select__input.multiple-values .hi-select__input--item__remove{cursor:pointer;display:inline-block;font-size:12px;position:absolute;top:0;right:4px;padding:0 0 0 8px}.hi-select__input.multiple-values .hi-select__input--search{height:22px;line-height:22px;margin-bottom:4px}
+.hi-select__input{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;background-color:#fff;color:#333;line-height:1;border-radius:2px;border:1px solid #d8d8d8;cursor:pointer;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;height:32px}.hi-select__input.disabled{cursor:not-allowed;background-color:#f2f2f2;color:#ccc}.hi-select__input.disabled .hi-select__input--icon{background-color:#f2f2f2;color:#ccc;margin-left:0 !important}.hi-select__input.disabled .hi-select__input--icon,.hi-select__input.disabled input{cursor:not-allowed}.hi-select__input .hi-icon{margin-left:0 !important}.hi-select__input.active,.hi-select__input:not(.disabled):hover{border-color:#4284f5}.hi-select__input:not(.disabled):hover .hi-select__input--icon__expand.clearable{display:none}.hi-select__input:not(.disabled):hover .hi-select__input--icon__close{display:block;color:#bbb}.hi-select__input .hi-select__input--icon{-webkit-box-flex:0;-ms-flex:none;flex:none}.hi-select__input--search input{position:relative;max-width:100%;width:100%;height:100%;padding:0;line-height:1;border-radius:2px;font-size:14px;cursor:pointer;background:transparent;border-width:0;outline:0;z-index:10}.hi-select__input--search input[data-visbility='false']{width:1px}.hi-select__input--search input::-webkit-input-placeholder{font-weight:300;color:#ccc}.hi-select__input--search input::-moz-placeholder{font-weight:300;color:#ccc}.hi-select__input--search input:-moz-placeholder{font-weight:300;color:#ccc}.hi-select__input--search input:-ms-input-placeholder{font-weight:300;color:#ccc}.hi-select__input--search--value input{color:#333}.hi-select__input--icon{position:relative;-webkit-box-flex:0;-ms-flex:none;flex:none;display:inline-block;padding-right:8px;cursor:pointer;font-size:24px;color:#434343;background-color:#fff;-webkit-transform:scale(0.66667) rotate(0deg);transform:scale(0.66667) rotate(0deg);-webkit-transition:all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);zoom:1;-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)"}.hi-select__input--icon .hi-select__input--icon__close{display:none}.hi-select__input.single-value{height:32px;line-height:32px}.hi-select__input.single-value .hi-select__input--item,.hi-select__input.single-value .hi-select__input--search{-webkit-box-flex:1;-ms-flex:auto;flex:auto;padding:0 0 0 12px}.hi-select__input.single-value .hi-select__input--item{height:32px;line-height:32px;overflow:hidden;-webkit-transition:padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);transition:padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);text-align:left}.hi-select__input.single-value .hi-select__input--item__name{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;-webkit-transition:margin 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);transition:margin 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)}.hi-select__input.multiple-values{padding:4px 4px 0 4px}.hi-select__input.multiple-values .hi-select__input--icon{margin-top:-4px;margin-right:-4px}.hi-select__input.multiple-values .hi-select__input--search{padding-left:3px}.hi-select__input.multiple-values .hi-select__input--placeholder{position:absolute;top:3px;left:13px;right:30px;height:24px;line-height:24px;color:#ccc;z-index:1}.hi-select__input.multiple-values .hi-select__input--placeholder ~ .hi-select__input-items .hi-select__input--search{padding:0 20px 0 11px}.hi-select__input.multiple-values .hi-select__input-items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:auto;flex:auto;overflow:hidden}.hi-select__input.multiple-values .hi-select__input-items.hi-select__input-items--all{-ms-flex-wrap:wrap;flex-wrap:wrap}.hi-select__input.multiple-values .hi-select__input-items--left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 8px;height:22px;line-height:22px;font-size:12px;color:#333;background-color:#f2f2f2;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-select__input.multiple-values .hi-select__input-items--left.disabled{color:#ccc}.hi-select__input.multiple-values .hi-select__input--item{-webkit-box-flex:0;-ms-flex:none;flex:none;position:relative;max-width:60%;height:22px;line-height:22px;padding:0 20px 0 10px;margin:0 4px 4px 0;overflow:hidden;vertical-align:middle;background-color:#f2f2f2;border-radius:2px;text-align:left}.hi-select__input.multiple-values .hi-select__input--item__name{font-size:13px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.hi-select__input.multiple-values .hi-select__input--item__remove{cursor:pointer;display:inline-block;font-size:12px;position:absolute;top:0;right:4px;padding:0 0 0 8px}.hi-select__input.multiple-values .hi-select__input--item__remove.disabled{cursor:not-allowed}.hi-select__input.multiple-values .hi-select__input--search{height:22px;line-height:22px;margin-bottom:4px}.theme__orange.hi-select__input.active,.theme__orange.hi-select__input:not(.disabled):hover{border-color:#f63}.theme__cyan.hi-select__input.active,.theme__cyan.hi-select__input:not(.disabled):hover{border-color:#46bc99}.theme__magenta.hi-select__input.active,.theme__magenta.hi-select__input:not(.disabled):hover{border-color:#ff5975}.theme__lavender.hi-select__input.active,.theme__lavender.hi-select__input:not(.disabled):hover{border-color:#b450de}.theme__blue.hi-select__input.active,.theme__blue.hi-select__input:not(.disabled):hover{border-color:#3da8f5}.theme__purple.hi-select__input.active,.theme__purple.hi-select__input:not(.disabled):hover{border-color:#8a8acb}