@occmundial/occ-atomic 2.0.0-beta.1 → 2.0.0-beta.11

package/build/Droplist/Droplist.js

@@ -1,284 +1,526 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classAutobind = _interopRequireDefault(require("class-autobind"));
+
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
-var _classnames2 = _interopRequireDefault(require("classnames"));
-
 var _Text = _interopRequireDefault(require("../Text"));
 
-var _usePrevious = _interopRequireDefault(require("../hooks/usePrevious"));
+var _Icon = _interopRequireDefault(require("../Icon"));
 
-var _styles = _interopRequireDefault(require("./styles"));
+var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
 var _functions = require("./functions");
 
+var _iconSizes = _interopRequireDefault(require("../subatomic/iconSizes"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+function _extends() { _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; }; return _extends.apply(this, arguments); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+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; } }
 
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 var arrowDown = 40;
 var arrowUp = 38;
 var enter = 13;
-/**
-* The Droplist component displays a list and filters it with the prop 'term'.
-* The value of 'term' es highlighted in every item that matches.
-* The array of objects needed to display the items needs a text and an id, and can contain a text that floats on the right. If you're going to group your items by category, you first need to set an array of groups, and each group must contain an array with the items.
-*/
-
-var Droplist = function Droplist(_ref) {
-  var items = _ref.items,
-      filter = _ref.filter,
-      term = _ref.term,
-      isOnFocus = _ref.isOnFocus,
-      groups = _ref.groups,
-      groupNameKey = _ref.groupNameKey,
-      groupIdKey = _ref.groupIdKey,
-      groupItemsKey = _ref.groupItemsKey,
-      itemIdKey = _ref.itemIdKey,
-      itemTextKey = _ref.itemTextKey,
-      itemTextRightKey = _ref.itemTextRightKey,
-      onClick = _ref.onClick,
-      onEnter = _ref.onEnter,
-      onMouseDown = _ref.onMouseDown,
-      onMouseUp = _ref.onMouseUp,
-      className = _ref.className,
-      id = _ref.id,
-      style = _ref.style;
-  var classes = (0, _styles["default"])();
-
-  var _useState = (0, _react.useState)(-1),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentItem = _useState2[0],
-      setCurrentItem = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(-1),
-      _useState4 = _slicedToArray(_useState3, 2),
-      currentGroup = _useState4[0],
-      setCurrentGroup = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(items),
-      _useState6 = _slicedToArray(_useState5, 2),
-      _items = _useState6[0],
-      setItems = _useState6[1];
-
-  var prevTerm = (0, _usePrevious["default"])(term);
-  var prevItems = (0, _usePrevious["default"])(items);
-  (0, _react.useEffect)(function () {
-    global.addEventListener('keydown', onKeyDown);
-    return function () {
-      return global.removeEventListener('keydown', onKeyDown);
+var inkLighter = _colors["default"].inkLighter,
+    ink = _colors["default"].ink;
+var iconSmall = _iconSizes["default"].small;
+/**
+ * The Droplist component displays a list and filters it with the prop 'term'.
+ * The value of 'term' es highlighted in every item that matches.
+ * The array of objects needed to display the items needs a text and an id, and can contain a text that floats on the right. If you're going to group your items by category, you first need to set an array of groups, and each group must contain an array with the items.
+ */
+
+var Droplist = /*#__PURE__*/function (_React$Component) {
+  _inherits(Droplist, _React$Component);
+
+  var _super = _createSuper(Droplist);
+
+  function Droplist(props) {
+    var _this;
+
+    _classCallCheck(this, Droplist);
+
+    _this = _super.call(this, props);
+    (0, _classAutobind["default"])(_assertThisInitialized(_this));
+    _this.state = {
+      currentItem: -1,
+      currentGroup: -1,
+      items: props.items
     };
-  });
-  (0, _react.useEffect)(function () {
-    if (filter) filterItems(items, term);
-  }, [filterItems, filter, items, term]);
-  (0, _react.useEffect)(function () {
-    if (term !== prevTerm || !(0, _isEqual["default"])(items, prevItems)) {
-      setCurrentItem(-1);
-      if (filter) filterItems(items, term);else setItems(items);
+    return _this;
+  }
+
+  _createClass(Droplist, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props = this.props,
+          items = _this$props.items,
+          filter = _this$props.filter,
+          term = _this$props.term;
+      window.addEventListener('keydown', this.onKeyDown);
+      if (filter) this.filterItems(items, term);
     }
-  }, [term, filter, items, prevTerm, prevItems, filterItems]);
-
-  var onKeyDown = function onKeyDown(e) {
-    if (isOnFocus) {
-      if (e.which === arrowUp || e.which === arrowDown) {
-        e.preventDefault();
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(props) {
+      if (props.term !== this.props.term || !(0, _isEqual["default"])(props.items, this.props.items)) {
+        this.setState({
+          currentItem: -1
+        });
+        if (props.filter) this.filterItems(props.items, props.term);else this.setState({
+          items: props.items
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('keydown', this.onKeyDown);
+    }
+  }, {
+    key: "onKeyDown",
+    value: function onKeyDown(e) {
+      var items = this.state.items;
+      var _this$props2 = this.props,
+          isOnFocus = _this$props2.isOnFocus,
+          groups = _this$props2.groups;
+
+      if (isOnFocus) {
+        if (e.which === arrowUp || e.which === arrowDown) {
+          e.preventDefault();
+
+          if (groups) {
+            if (e.which === arrowDown) {
+              this.moveGroupDown();
+            } else {
+              this.moveGroupUp();
+            }
+          } else {
+            if (e.which === arrowDown) {
+              this.moveDown(items);
+            } else {
+              this.moveUp(items);
+            }
+          }
+        }
 
+        if (e.which === enter) {
+          this.onEnter();
+        }
+      }
+    }
+  }, {
+    key: "onEnter",
+    value: function onEnter() {
+      var _this$state = this.state,
+          currentItem = _this$state.currentItem,
+          currentGroup = _this$state.currentGroup,
+          items = _this$state.items;
+      var _this$props3 = this.props,
+          onEnter = _this$props3.onEnter,
+          groups = _this$props3.groups,
+          groupItemsKey = _this$props3.groupItemsKey;
+
+      if (currentItem > -1) {
         if (groups) {
-          if (e.which === arrowDown) moveGroupDown();else moveGroupUp();
+          var selectedGroup = items.find(function (group, i) {
+            return i === currentGroup;
+          });
+          var selectedItem = selectedGroup[groupItemsKey].find(function (item, i) {
+            return i === currentItem;
+          });
+          this.setState({
+            currentGroup: -1,
+            currentItem: -1
+          });
+          if (onEnter && !selectedItem.disabled) onEnter(selectedItem);
         } else {
-          if (e.which === arrowDown) moveDown(_items);else moveUp(_items);
+          var _selectedItem = items.find(function (item, i) {
+            return i === currentItem;
+          });
+
+          this.setState({
+            currentItem: -1
+          });
+          if (onEnter && !_selectedItem.disabled) onEnter(_selectedItem);
         }
       }
+    }
+  }, {
+    key: "moveGroupDown",
+    value: function moveGroupDown() {
+      var _this$state2 = this.state,
+          currentItem = _this$state2.currentItem,
+          currentGroup = _this$state2.currentGroup,
+          items = _this$state2.items;
+      var groupItemsKey = this.props.groupItemsKey;
+
+      if (currentGroup === -1) {
+        this.moveToNextGroup();
+      } else {
+        var groupItems = items[currentGroup][groupItemsKey];
 
-      if (e.which === enter) _onEnter();
+        if (currentItem === groupItems.length - 1) {
+          this.moveToNextGroup();
+        } else {
+          this.moveDown(groupItems);
+        }
+      }
     }
-  };
+  }, {
+    key: "moveGroupUp",
+    value: function moveGroupUp() {
+      var _this$state3 = this.state,
+          currentItem = _this$state3.currentItem,
+          currentGroup = _this$state3.currentGroup,
+          items = _this$state3.items;
+      var groupItemsKey = this.props.groupItemsKey;
+
+      if (currentGroup === -1) {
+        this.moveToPreviousGroup();
+      } else {
+        var groupItems = items[currentGroup][groupItemsKey];
 
-  var _onEnter = (0, _react.useCallback)(function () {
-    if (currentItem > -1) {
-      if (groups) {
-        var selectedGroup = _items.find(function (group, i) {
-          return i === currentGroup;
+        if (currentItem === 0) {
+          this.moveToPreviousGroup();
+        } else {
+          this.moveUp(groupItems);
+        }
+      }
+    }
+  }, {
+    key: "moveToNextGroup",
+    value: function moveToNextGroup() {
+      var _this2 = this;
+
+      var _this$state4 = this.state,
+          currentGroup = _this$state4.currentGroup,
+          items = _this$state4.items;
+      var groupItemsKey = this.props.groupItemsKey;
+
+      if (currentGroup === items.length - 1) {
+        this.setState({
+          currentGroup: -1,
+          currentItem: -1
         });
-
-        var selectedItem = selectedGroup[groupItemsKey].find(function (item, i) {
-          return i === currentItem;
+      } else {
+        this.setState({
+          currentGroup: currentGroup + 1
+        }, function () {
+          var currentGroup = _this2.state.currentGroup;
+
+          if (items[currentGroup][groupItemsKey] && items[currentGroup][groupItemsKey].length) {
+            _this2.setState({
+              currentItem: 0
+            });
+          } else {
+            _this2.moveToNextGroup();
+          }
+        });
+      }
+    }
+  }, {
+    key: "moveToPreviousGroup",
+    value: function moveToPreviousGroup() {
+      var _this3 = this;
+
+      var _this$state5 = this.state,
+          currentGroup = _this$state5.currentGroup,
+          items = _this$state5.items;
+      var groupItemsKey = this.props.groupItemsKey;
+
+      if (currentGroup === -1) {
+        this.setState({
+          currentGroup: items.length - 1
+        }, function () {
+          var currentGroup = _this3.state.currentGroup;
+
+          if (items[currentGroup][groupItemsKey] && items[currentGroup][groupItemsKey].length) {
+            _this3.setState({
+              currentItem: items[currentGroup][groupItemsKey].length - 1
+            });
+          } else {
+            _this3.moveToPreviousGroup();
+          }
+        });
+      } else if (currentGroup === 0) {
+        this.setState({
+          currentGroup: -1,
+          currentItem: -1
         });
-        resetPosition();
-        if (onEnter) onEnter(selectedItem);
       } else {
-        var _selectedItem = _items.find(function (item, i) {
-          return i === currentItem;
+        this.setState({
+          currentGroup: currentGroup - 1
+        }, function () {
+          var currentGroup = _this3.state.currentGroup;
+
+          if (items[currentGroup][groupItemsKey] && items[currentGroup][groupItemsKey].length) {
+            _this3.setState({
+              currentItem: items[currentGroup][groupItemsKey].length - 1
+            });
+          } else {
+            _this3.moveToPreviousGroup();
+          }
         });
-
-        setCurrentItem(-1);
-        if (onEnter) onEnter(_selectedItem);
       }
     }
-  }, [_items, currentGroup, currentItem, groupItemsKey, groups, onEnter, resetPosition]);
-
-  var resetPosition = (0, _react.useCallback)(function () {
-    setCurrentGroup(-1);
-    setCurrentItem(-1);
-  }, []);
-  var moveGroupDown = (0, _react.useCallback)(function () {
-    if (currentGroup === -1) moveToNextGroup();else {
-      var groupItems = _items[currentGroup][groupItemsKey];
-      if (currentItem === groupItems.length - 1) moveToNextGroup();else moveDown(groupItems);
+  }, {
+    key: "moveDown",
+    value: function moveDown(items) {
+      var currentItem = this.state.currentItem;
+
+      if (currentItem === items.length - 1) {
+        this.setState({
+          currentItem: -1
+        });
+      } else {
+        this.setState({
+          currentItem: currentItem + 1
+        });
+      }
     }
-  }, [_items, currentGroup, currentItem, groupItemsKey, moveDown, moveToNextGroup]);
-
-  var moveGroupUp = function moveGroupUp() {
-    if (currentGroup === -1) moveToPreviousGroup();else {
-      var groupItems = _items[currentGroup][groupItemsKey];
-      if (currentItem === 0) moveToPreviousGroup();else moveUp(groupItems);
+  }, {
+    key: "moveUp",
+    value: function moveUp() {
+      var _this$state6 = this.state,
+          currentItem = _this$state6.currentItem,
+          items = _this$state6.items;
+
+      if (currentItem === -1) {
+        this.setState({
+          currentItem: items.length - 1
+        });
+      } else {
+        this.setState({
+          currentItem: currentItem - 1
+        });
+      }
     }
-  };
-
-  var moveToNextGroup = (0, _react.useCallback)(function () {
-    if (currentGroup === _items.length - 1) {
-      resetPosition();
-    } else {
-      var newGroup = currentGroup + 1;
-      setCurrentGroup(newGroup);
-      if (_items[newGroup][groupItemsKey] && _items[newGroup][groupItemsKey].length) setCurrentItem(0);else moveToNextGroup();
+  }, {
+    key: "onClick",
+    value: function onClick(item, e) {
+      var onClick = this.props.onClick;
+      e.stopPropagation();
+      this.setState({
+        currentGroup: -1,
+        currentItem: -1
+      });
+      if (onClick) onClick(item);
     }
-  }, [_items, currentGroup, groupItemsKey, resetPosition]);
-  var moveToPreviousGroup = (0, _react.useCallback)(function () {
-    if (currentGroup === -1) {
-      var newGroup = _items.length - 1;
-      setCurrentGroup(newGroup);
-      var subItems = _items[newGroup][groupItemsKey] || [];
-      if (subItems.length) setCurrentItem(subItems.length - 1);else moveToPreviousGroup();
-    } else if (currentGroup === 0) {
-      resetPosition();
-    } else {
-      var _newGroup = currentGroup - 1;
-
-      setCurrentGroup(_newGroup);
-
-      var _subItems = _items[_newGroup][groupItemsKey] || [];
-
-      if (_subItems.length) setCurrentItem(_subItems.length - 1);else moveToPreviousGroup();
+  }, {
+    key: "onMouseDown",
+    value: function onMouseDown(item, e) {
+      var onMouseDown = this.props.onMouseDown;
+      e.stopPropagation();
+      this.setState({
+        currentGroup: -1,
+        currentItem: -1
+      });
+      if (onMouseDown) onMouseDown(item);
     }
-  }, [_items, currentGroup, groupItemsKey, resetPosition]);
-  var moveDown = (0, _react.useCallback)(function (items) {
-    if (currentItem === items.length - 1) setCurrentItem(-1);else setCurrentItem(currentItem + 1);
-  }, [currentItem]);
-  var moveUp = (0, _react.useCallback)(function (items) {
-    if (currentItem === -1) setCurrentItem(items.length - 1);else setCurrentItem(currentItem - 1);
-  }, [currentItem]);
-
-  var _onClick = (0, _react.useCallback)(function (item, e) {
-    e.stopPropagation();
-    resetPosition();
-    if (onClick) onClick(item);
-  }, [onClick, resetPosition]);
-
-  var _onMouseDown = (0, _react.useCallback)(function (item, e) {
-    e.stopPropagation();
-    resetPosition();
-    if (onMouseDown) onMouseDown(item);
-  }, [onMouseDown, resetPosition]);
-
-  var _onMouseUp = (0, _react.useCallback)(function (item, e) {
-    e.stopPropagation();
-    resetPosition();
-    if (onMouseUp) onMouseUp(item);
-  }, [onMouseUp, resetPosition]);
-
-  var filterItems = (0, _react.useCallback)(function (items, term) {
-    if (groups) {
-      var newItems = (0, _cloneDeep["default"])(items);
-      newItems = items.map(function (group) {
-        group[groupItemsKey] = group[groupItemsKey].filter(function (item) {
+  }, {
+    key: "onMouseUp",
+    value: function onMouseUp(item, e) {
+      var onMouseUp = this.props.onMouseUp;
+      e.stopPropagation();
+      this.setState({
+        currentGroup: -1,
+        currentItem: -1
+      });
+      if (onMouseUp) onMouseUp(item);
+    }
+  }, {
+    key: "filterItems",
+    value: function filterItems(items, term) {
+      var _this$props4 = this.props,
+          itemTextKey = _this$props4.itemTextKey,
+          groupItemsKey = _this$props4.groupItemsKey,
+          groups = _this$props4.groups;
+
+      if (groups) {
+        var newItems = (0, _cloneDeep["default"])(items);
+        newItems = items.map(function (group) {
+          group[groupItemsKey] = group[groupItemsKey].filter(function (item) {
+            return (0, _functions.compareText)(item[itemTextKey], term) >= 0;
+          });
+          return group;
+        });
+        newItems = newItems.filter(function (group) {
+          return group[groupItemsKey].length > 0;
+        });
+        this.setState({
+          items: newItems
+        });
+      } else {
+        var _newItems = items.filter(function (item) {
           return (0, _functions.compareText)(item[itemTextKey], term) >= 0;
         });
-        return group;
-      });
-      newItems = newItems.filter(function (group) {
-        return group[groupItemsKey].length > 0;
-      });
-      setItems(newItems);
-    } else {
-      var _newItems = items.filter(function (item) {
-        return (0, _functions.compareText)(item[itemTextKey], term) >= 0;
-      });
 
-      setItems(_newItems);
+        this.setState({
+          items: _newItems
+        });
+      }
     }
-  }, [groupItemsKey, groups, itemTextKey]);
-  var renderList = (0, _react.useCallback)(function (items, selectedGroup) {
-    var itemsDOM = items.map(function (item, i) {
-      var index = (0, _functions.compareText)(item[itemTextKey], term);
-      var itemClassName = (0, _classnames2["default"])(classes.item, _defineProperty({}, classes.onFocus, selectedGroup && currentItem === i));
-      var content;
-
-      if (index >= 0) {
-        var text = (0, _functions.separateText)(item[itemTextKey], index, term);
-        content = _react["default"].createElement(_Text["default"], null, text[0].length ? text[0] : '', _react["default"].createElement(_Text["default"], {
-          tag: "b",
-          strong: true
-        }, text[1].length ? text[1] : ''), text[2].length ? text[2] : '');
-      } else content = _react["default"].createElement(_Text["default"], null, item[itemTextKey]);
-
-      return _react["default"].createElement("div", {
-        key: item[itemIdKey],
-        onClick: function onClick(e) {
-          return _onClick(item, e);
-        },
-        onMouseDown: function onMouseDown(e) {
-          return _onMouseDown(item, e);
-        },
-        onMouseUp: function onMouseUp(e) {
-          return _onMouseUp(item, e);
-        },
-        className: itemClassName
-      }, content, item[itemTextRightKey] && _react["default"].createElement("span", {
-        className: classes.right
-      }, _react["default"].createElement(_Text["default"], {
-        tag: "span",
-        low: true
-      }, item[itemTextRightKey])));
-    });
-    return itemsDOM;
-  }, [_onClick, _onMouseDown, _onMouseUp, classes.item, classes.onFocus, classes.right, currentItem, itemIdKey, itemTextKey, itemTextRightKey, term]);
-  return _react["default"].createElement("div", {
-    className: (0, _classnames2["default"])(classes.block, className),
-    id: id,
-    style: style
-  }, groups ? _items.map(function (group, i) {
-    return _react["default"].createElement("div", {
-      key: group[groupIdKey]
-    }, _react["default"].createElement(_Text["default"], {
-      small: true,
-      mid: true,
-      className: classes.group
-    }, group[groupNameKey].toUpperCase()), renderList(group[groupItemsKey], currentGroup === i));
-  }) : renderList(_items, true));
-};
+  }, {
+    key: "renderList",
+    value: function renderList(items, selectedGroup) {
+      var _this4 = this;
+
+      var currentItem = this.state.currentItem;
+      var _this$props5 = this.props,
+          classes = _this$props5.classes,
+          itemIdKey = _this$props5.itemIdKey,
+          itemTextKey = _this$props5.itemTextKey,
+          itemTextRightKey = _this$props5.itemTextRightKey,
+          term = _this$props5.term,
+          testId = _this$props5.testId;
+      var itemsDOM = items.map(function (item, i) {
+        var index = (0, _functions.compareText)(item[itemTextKey], term);
+
+        if (index >= 0) {
+          var text = (0, _functions.separateText)(item[itemTextKey], index, term);
+          return /*#__PURE__*/_react["default"].createElement("div", _extends({
+            key: item[itemIdKey],
+            onClick: !item.disabled ? function (e) {
+              return _this4.onClick(item, e);
+            } : null,
+            onMouseDown: function onMouseDown(e) {
+              return _this4.onMouseDown(item, e);
+            },
+            onMouseUp: function onMouseUp(e) {
+              return _this4.onMouseUp(item, e);
+            },
+            className: "".concat(classes.item).concat(selectedGroup && currentItem === i ? " ".concat(classes.onFocus) : '').concat(!item.disabled ? " ".concat(classes.itemPointer) : '')
+          }, testId && {
+            'data-testid': "".concat(testId, "__droplist-item-").concat(i)
+          }), /*#__PURE__*/_react["default"].createElement("div", null, item.iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+            iconName: item.iconName,
+            width: iconSmall,
+            height: iconSmall,
+            display: "inline-block",
+            className: classes.icon,
+            colors: [item.disabled ? inkLighter : ink]
+          }), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+            className: item.iconName ? classes.iconText : '',
+            low: item.disabled
+          }, text[0].length ? text[0] : '', /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+            tag: "b",
+            strong: true,
+            low: item.disabled
+          }, text[1].length ? text[1] : ''), text[2].length ? text[2] : '', item.extraText && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+            tag: "span",
+            strong: true,
+            low: item.disabled,
+            className: "".concat(classes.extraText).concat(!item.disabled ? " ".concat(classes.extraTextColor) : '')
+          }, item.extraText))), item[itemTextRightKey] && /*#__PURE__*/_react["default"].createElement("span", {
+            className: classes.right
+          }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+            tag: "span",
+            low: true
+          }, item[itemTextRightKey])));
+        } else {
+          return /*#__PURE__*/_react["default"].createElement("div", _extends({
+            key: item[itemIdKey],
+            onClick: function onClick(e) {
+              return _this4.onClick(item, e);
+            },
+            onMouseDown: function onMouseDown(e) {
+              return _this4.onMouseDown(item, e);
+            },
+            onMouseUp: function onMouseUp(e) {
+              return _this4.onMouseUp(item, e);
+            },
+            className: "".concat(classes.item).concat(selectedGroup && currentItem === i ? " ".concat(classes.onFocus) : '')
+          }, testId && {
+            'data-testid': "".concat(testId, "__droplist-item-").concat(i)
+          }), /*#__PURE__*/_react["default"].createElement("div", null, item.iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+            iconName: item.iconName,
+            width: 14,
+            height: 14,
+            display: "inline-block",
+            colors: [inkLighter]
+          }), /*#__PURE__*/_react["default"].createElement(_Text["default"], null, item[itemTextKey], item.extraText && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+            tag: "span",
+            strong: true,
+            className: classes.extraText
+          }, item.extraText))), item[itemTextRightKey] && /*#__PURE__*/_react["default"].createElement("span", {
+            className: classes.right
+          }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+            tag: "span",
+            low: true
+          }, item[itemTextRightKey])));
+        }
+      });
+      return itemsDOM;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this5 = this;
+
+      var _this$state7 = this.state,
+          items = _this$state7.items,
+          currentGroup = _this$state7.currentGroup;
+      var _this$props6 = this.props,
+          classes = _this$props6.classes,
+          className = _this$props6.className,
+          style = _this$props6.style,
+          id = _this$props6.id,
+          groups = _this$props6.groups,
+          groupNameKey = _this$props6.groupNameKey,
+          groupIdKey = _this$props6.groupIdKey,
+          groupItemsKey = _this$props6.groupItemsKey;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(classes.block).concat(className ? " ".concat(className) : ''),
+        id: id,
+        style: style
+      }, groups ? items.map(function (group, index) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          key: group[groupIdKey]
+        }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+          small: true,
+          mid: true,
+          className: classes.group
+        }, group[groupNameKey].toUpperCase()), _this5.renderList(group[groupItemsKey], currentGroup === index));
+      }) : this.renderList(items, true));
+    }
+  }]);
+
+  return Droplist;
+}(_react["default"].Component);
 
 Droplist.defaultProps = {
   groups: false,
@@ -292,6 +534,8 @@ Droplist.defaultProps = {
   filter: true
 };
 Droplist.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+
   /** Array of objects with all the items to display. */
   items: _propTypes["default"].array,
 
@@ -338,7 +582,10 @@ Droplist.propTypes = {
   isOnFocus: _propTypes["default"].bool,
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
-  style: _propTypes["default"].object
+  style: _propTypes["default"].object,
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string
 };
 var _default = Droplist;
 exports["default"] = _default;