@jetbrains/ring-ui 5.1.1 → 6.0.2-beta.0

package/dist/_helpers/input.js

@@ -1,3 +1,229 @@
-var modules_88cfaf40 = {"unit":"8px","button-shadow":"inset 0 0 0 1px","height":"var(--ring-button-height)","loaderWidth":"64px","light":"light_rui_e356","heightS":"heightS_rui_e356","heightM":"heightM_rui_e356","heightL":"heightL_rui_e356","button":"button_rui_e356","active":"active_rui_e356","withIcon":"withIcon_rui_e356","icon":"icon_rui_e356","primary":"primary_rui_e356","loader":"loader_rui_e356","loaderBackground":"loaderBackground_rui_e356","danger":"danger_rui_e356","text":"text_rui_e356","content":"content_rui_e356","text-loading":"text-loading_rui_e356","inline":"inline_rui_e356","withNormalIcon":"withNormalIcon_rui_e356","withDangerIcon":"withDangerIcon_rui_e356","progress":"progress_rui_e356","delayed":"delayed_rui_e356","short":"short_rui_e356","dropdownIcon":"dropdownIcon_rui_e356","outerContainer":"outerContainer_rui_e356","borderless":"borderless_rui_e356","container":"container_rui_e356","input":"input_rui_e356","error":"error_rui_e356","clearable":"clearable_rui_e356","clear":"clear_rui_e356","empty":"empty_rui_e356","label":"label_rui_e356","disabledLabel":"disabledLabel_rui_e356","errorText":"errorText_rui_e356","sizeS":"sizeS_rui_e356","sizeM":"sizeM_rui_e356","sizeL":"sizeL_rui_e356","sizeFULL":"sizeFULL_rui_e356"};
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, d as _createClass, e as _objectWithoutProperties, f as _extends } from './_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.object.values.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import closeIcon from '@jetbrains/icons/close-12px';
+import { refObject } from '../global/prop-types.js';
+import { Button } from '../button/button.js';
+import getUID from '../global/get-uid.js';
+import Icon from '../icon/icon.js';
+import { I18nContext } from '../i18n/i18n-context.js';
+import composeRefs from '../global/composeRefs.js';
+import { ControlsHeightContext } from '../global/controls-height.js';
+import { ControlLabel } from '../control-label/control-label.js';
 
-export { modules_88cfaf40 as m };
+var modules_88cfaf40 = {"unit":"i__const_unit_1","button-shadow":"inset 0 0 0 1px","height":"var(--ring-button-height)","loaderWidth":"64px","light":"light_rui_2ac4","heightS":"heightS_rui_e356","heightM":"heightM_rui_e356","heightL":"heightL_rui_e356","button":"button_rui_e356","active":"active_rui_e356","withIcon":"withIcon_rui_e356","icon":"icon_rui_e356","primary":"primary_rui_e356","loader":"loader_rui_e356","loaderBackground":"loaderBackground_rui_e356","danger":"danger_rui_e356","text":"text_rui_e356","content":"content_rui_e356","text-loading":"text-loading_rui_e356","inline":"inline_rui_e356","withNormalIcon":"withNormalIcon_rui_e356","withDangerIcon":"withDangerIcon_rui_e356","progress":"progress_rui_e356","delayed":"delayed_rui_e356","short":"short_rui_e356","dropdownIcon":"dropdownIcon_rui_e356","outerContainer":"outerContainer_rui_e356","borderless":"borderless_rui_e356","container":"container_rui_e356","input":"input_rui_e356","error":"error_rui_e356","clearable":"clearable_rui_e356","clear":"clear_rui_e356","empty":"empty_rui_e356","errorText":"errorText_rui_e356","sizeS":"sizeS_rui_e356","sizeM":"sizeM_rui_e356","sizeL":"sizeL_rui_e356","sizeFULL":"sizeFULL_rui_e356"};
+
+var _excluded = ["size", "active", "multiline", "borderless", "label", "labelType", "error", "className", "inputClassName", "children", "value", "onClear", "disabled", "inputRef", "onChange", "enableShortcuts", "id", "placeholder", "icon", "translations", "height", "afterInput"];
+function noop() {}
+/**
+ * @name Input
+ */
+var Size;
+(function (Size) {
+  Size["AUTO"] = "Auto";
+  Size["S"] = "S";
+  Size["M"] = "M";
+  Size["L"] = "L";
+  Size["FULL"] = "FULL";
+})(Size || (Size = {}));
+var Input = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Input, _PureComponent);
+  var _super = _createSuper(Input);
+  function Input() {
+    var _this;
+    _classCallCheck(this, Input);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      empty: true
+    });
+    _defineProperty(_assertThisInitialized(_this), "frame", void 0);
+    _defineProperty(_assertThisInitialized(_this), "input", void 0);
+    _defineProperty(_assertThisInitialized(_this), "id", getUID('ring-input-'));
+    _defineProperty(_assertThisInitialized(_this), "inputRef", function (el) {
+      _this.input = el;
+    });
+    _defineProperty(_assertThisInitialized(_this), "clear", function (e) {
+      _this.props.onClear && _this.props.onClear(e);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleInputChange", function (e) {
+      if (!_this.props.multiline) {
+        var _this$props$onChange, _this$props;
+        (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, e);
+        _this.checkValue();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleTextareaChange", function (e) {
+      if (_this.props.multiline) {
+        var _this$props$onChange2, _this$props2;
+        (_this$props$onChange2 = (_this$props2 = _this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props2, e);
+        _this.checkValue();
+      }
+    });
+    return _this;
+  }
+  _createClass(Input, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      this.frame = requestAnimationFrame(function () {
+        return _this2.adapt();
+      });
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.adapt();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.frame != null) {
+        cancelAnimationFrame(this.frame);
+      }
+    }
+  }, {
+    key: "getId",
+    value: function getId() {
+      return this.props.id || this.id;
+    }
+  }, {
+    key: "checkValue",
+    value: function checkValue() {
+      var _this$input;
+      this.setState({
+        empty: !((_this$input = this.input) !== null && _this$input !== void 0 && _this$input.value)
+      });
+      if (this.props.multiline && this.input != null && this.input.scrollHeight >= this.input.clientHeight) {
+        this.stretch(this.input);
+      }
+    }
+  }, {
+    key: "stretch",
+    value: function stretch(el) {
+      if (!el || !el.style) {
+        return;
+      }
+      el.style.height = '0'; // To know the real scrollHeight
+      el.style.height = "".concat(el.scrollHeight + 2, "px");
+    }
+  }, {
+    key: "adapt",
+    value: function adapt() {
+      this.checkValue();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames,
+        _this3 = this;
+      var _this$props3 = this.props,
+        size = _this$props3.size,
+        active = _this$props3.active,
+        multiline = _this$props3.multiline,
+        borderless = _this$props3.borderless,
+        label = _this$props3.label,
+        labelType = _this$props3.labelType,
+        error = _this$props3.error,
+        className = _this$props3.className,
+        inputClassName = _this$props3.inputClassName,
+        children = _this$props3.children,
+        value = _this$props3.value,
+        onClear = _this$props3.onClear,
+        disabled = _this$props3.disabled,
+        inputRef = _this$props3.inputRef;
+        _this$props3.onChange;
+        var enableShortcuts = _this$props3.enableShortcuts;
+        _this$props3.id;
+        var placeholder = _this$props3.placeholder,
+        icon = _this$props3.icon,
+        translations = _this$props3.translations,
+        _this$props3$height = _this$props3.height,
+        height = _this$props3$height === void 0 ? this.context : _this$props3$height,
+        afterInput = _this$props3.afterInput,
+        restProps = _objectWithoutProperties(_this$props3, _excluded);
+      var empty = this.state.empty;
+      var clearable = !!onClear;
+      var classes = classNames(className, modules_88cfaf40.outerContainer, [modules_88cfaf40["size".concat(size)]], [modules_88cfaf40["height".concat(height)]], (_classNames = {
+        'ring-js-shortcuts': enableShortcuts === true
+      }, _defineProperty(_classNames, modules_88cfaf40.active, active), _defineProperty(_classNames, modules_88cfaf40.error, error != null), _defineProperty(_classNames, modules_88cfaf40.empty, empty), _defineProperty(_classNames, modules_88cfaf40.noLabel, !this.props.label), _defineProperty(_classNames, modules_88cfaf40.withIcon, icon != null), _defineProperty(_classNames, modules_88cfaf40.clearable, clearable), _defineProperty(_classNames, modules_88cfaf40.borderless, borderless), _classNames));
+      var inputClasses = classNames(modules_88cfaf40.input, inputClassName);
+      var text = value != null ? value : children;
+      var commonProps = {
+        ref: composeRefs(this.inputRef, inputRef),
+        className: inputClasses,
+        value: text,
+        disabled: disabled,
+        id: this.getId(),
+        placeholder: placeholder,
+        'aria-label': typeof label === 'string' && label ? label : placeholder,
+        'data-enabled-shortcuts': Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null
+      };
+      return /*#__PURE__*/React.createElement(I18nContext.Consumer, null, function (_ref) {
+        var _translations$clear;
+        var translate = _ref.translate;
+        return /*#__PURE__*/React.createElement("div", {
+          className: classes,
+          "data-test": "ring-input"
+        }, label && /*#__PURE__*/React.createElement(ControlLabel, {
+          htmlFor: _this3.getId(),
+          disabled: disabled,
+          type: labelType
+        }, label), /*#__PURE__*/React.createElement("div", {
+          className: modules_88cfaf40.container
+        }, icon && /*#__PURE__*/React.createElement(Icon, {
+          glyph: icon,
+          className: modules_88cfaf40.icon
+        }), multiline ? /*#__PURE__*/React.createElement("textarea", _extends({
+          onChange: _this3.handleTextareaChange,
+          rows: 1
+        }, commonProps, restProps)) : /*#__PURE__*/React.createElement("input", _extends({
+          onChange: _this3.handleInputChange
+        }, commonProps, restProps)), clearable && !disabled && /*#__PURE__*/React.createElement(Button, {
+          title: (_translations$clear = translations === null || translations === void 0 ? void 0 : translations.clear) !== null && _translations$clear !== void 0 ? _translations$clear : translate('clear'),
+          "data-test": "ring-input-clear",
+          className: modules_88cfaf40.clear,
+          icon: closeIcon,
+          onClick: _this3.clear
+        }), afterInput), error && /*#__PURE__*/React.createElement("div", {
+          className: modules_88cfaf40.errorText
+        }, error));
+      });
+    }
+  }]);
+  return Input;
+}(PureComponent);
+_defineProperty(Input, "defaultProps", {
+  size: Size.M,
+  onChange: noop,
+  inputRef: noop,
+  enableShortcuts: ['esc']
+});
+_defineProperty(Input, "contextType", ControlsHeightContext);
+Input.propTypes = {
+  value: PropTypes.string,
+  className: PropTypes.string,
+  inputClassName: PropTypes.string,
+  size: PropTypes.oneOf(Object.values(Size)).isRequired,
+  label: PropTypes.node,
+  active: PropTypes.bool,
+  error: PropTypes.string,
+  multiline: PropTypes.bool,
+  onChange: PropTypes.func,
+  onClear: PropTypes.func,
+  inputRef: PropTypes.oneOfType([PropTypes.func, refObject(PropTypes.instanceOf(HTMLInputElement)), refObject(PropTypes.instanceOf(HTMLTextAreaElement))]),
+  children: PropTypes.string,
+  enableShortcuts: PropTypes.oneOfType([PropTypes.bool, PropTypes.arrayOf(PropTypes.string.isRequired)]),
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  placeholder: PropTypes.string,
+  translations: PropTypes.object,
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType])
+};
+
+export { Input as I, Size as S, modules_88cfaf40 as m };

package/dist/_helpers/island.js

@@ -1,3 +1,3 @@
-var modules_e6a056e1 = {"unit":"8px","gradientStart":"rgba(255, 255, 255, 0)","gradientStop":"var(--ring-content-background-color)","light":"light_rui_1d72","island":"island_rui_1d72","withTransparentBottomBorder":"withTransparentBottomBorder_rui_1d72","header":"header_rui_1d72","withBottomBorder":"withBottomBorder_rui_1d72","title":"title_rui_1d72","narrowIsland":"narrowIsland_rui_1d72","content":"content_rui_1d72","scrollableWrapper":"scrollableWrapper_rui_1d72","withoutPaddings":"withoutPaddings_rui_1d72","contentWithTopFade":"contentWithTopFade_rui_1d72","contentWithBottomFade":"contentWithBottomFade_rui_1d72"};
+var modules_e6a056e1 = {"unit":"i__const_unit_0","gradientStart":"rgba(255, 255, 255, 0)","gradientStop":"var(--ring-content-background-color)","light":"light_rui_2ac4","island":"island_rui_1d72","withTransparentBottomBorder":"withTransparentBottomBorder_rui_1d72","header":"header_rui_1d72","withBottomBorder":"withBottomBorder_rui_1d72","title":"title_rui_1d72","narrowIsland":"narrowIsland_rui_1d72","content":"content_rui_1d72","scrollableWrapper":"scrollableWrapper_rui_1d72","withoutPaddings":"withoutPaddings_rui_1d72","contentWithTopFade":"contentWithTopFade_rui_1d72","contentWithBottomFade":"contentWithBottomFade_rui_1d72"};
 
 export { modules_e6a056e1 as m };

package/dist/_helpers/list.js

@@ -1,3 +1,3 @@
-var modules_3b67a421 = {"unit":"8px","listSpacing":"8px","light":"light_rui_93ef","list":"list_rui_93ef","simpleInner":"simpleInner_rui_93ef","scrolling":"scrolling_rui_93ef","separator":"separator_rui_93ef","separator_first":"separator_first_rui_93ef","item":"item_rui_93ef","itemContainer":"itemContainer_rui_93ef","compact":"compact_rui_93ef","error":"error_rui_93ef","add":"add_rui_93ef","top":"top_rui_93ef","left":"left_rui_93ef","label":"label_rui_93ef","description":"description_rui_93ef","right":"right_rui_93ef","details":"details_rui_93ef","padded":"padded_rui_93ef","hint":"hint_rui_93ef","action":"action_rui_93ef","actionLink":"actionLink_rui_93ef","hover":"hover_rui_93ef","icon":"icon_rui_93ef","highlight":"highlight_rui_93ef","service":"service_rui_93ef","glyph":"glyph_rui_93ef","avatar":"avatar_rui_93ef glyph_rui_93ef","rightGlyph":"rightGlyph_rui_93ef glyph_rui_93ef","checkboxContainer":"checkboxContainer_rui_93ef","title":"title_rui_93ef","title_first":"title_first_rui_93ef","text":"text_rui_93ef","fade":"fade_rui_93ef","disabled":"disabled_rui_93ef"};
+var modules_3b67a421 = {"unit":"i__const_unit_0","listSpacing":"8px","light":"light_rui_2ac4","list":"list_rui_93ef","simpleInner":"simpleInner_rui_93ef","scrolling":"scrolling_rui_93ef","separator":"separator_rui_93ef","separator_first":"separator_first_rui_93ef","item":"item_rui_93ef","itemContainer":"itemContainer_rui_93ef","compact":"compact_rui_93ef","error":"error_rui_93ef","add":"add_rui_93ef","top":"top_rui_93ef","left":"left_rui_93ef","label":"label_rui_93ef","description":"description_rui_93ef","right":"right_rui_93ef","details":"details_rui_93ef","padded":"padded_rui_93ef","hint":"hint_rui_93ef","action":"action_rui_93ef","actionLink":"actionLink_rui_93ef","hover":"hover_rui_93ef","icon":"icon_rui_93ef","highlight":"highlight_rui_93ef","service":"service_rui_93ef","glyph":"glyph_rui_93ef","avatar":"avatar_rui_93ef glyph_rui_93ef","rightGlyph":"rightGlyph_rui_93ef glyph_rui_93ef","checkboxContainer":"checkboxContainer_rui_93ef","title":"title_rui_93ef","title_first":"title_first_rui_93ef","text":"text_rui_93ef","fade":"fade_rui_93ef","disabled":"disabled_rui_93ef"};
 
 export { modules_3b67a421 as m };

package/dist/_helpers/query-assist__suggestions.js

@@ -1,85 +1,102 @@
+import { d as _createClass, c as _classCallCheck } from './_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.symbol.js';
+import 'core-js/modules/es.symbol.description.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
 import React from 'react';
 import List from '../list/list.js';
 
-var modules_da7ab055 = {"unit":"8px","button-shadow":"inset 0 0 0 1px","height":"var(--ring-button-height)","loaderWidth":"64px","overInputZIndex":"2","inputGap":"24px","light":"light_rui_d22e","heightS":"heightS_rui_d22e","heightM":"heightM_rui_d22e","heightL":"heightL_rui_d22e","button":"button_rui_d22e","active":"active_rui_d22e","withIcon":"withIcon_rui_d22e","icon":"icon_rui_d22e","primary":"primary_rui_d22e","loader":"loader_rui_d22e","loaderBackground":"loaderBackground_rui_d22e","danger":"danger_rui_d22e","text":"text_rui_d22e","content":"content_rui_d22e","text-loading":"text-loading_rui_d22e","inline":"inline_rui_d22e","withNormalIcon":"withNormalIcon_rui_d22e","withDangerIcon":"withDangerIcon_rui_d22e","progress":"progress_rui_d22e","delayed":"delayed_rui_d22e","short":"short_rui_d22e","dropdownIcon":"dropdownIcon_rui_d22e","queryAssist":"queryAssist_rui_d22e","error":"error_rui_d22e","queryAssistDisabled":"queryAssistDisabled_rui_d22e","huge":"huge_rui_d22e","actions":"actions_rui_d22e","input":"input_rui_d22e","letter-text":"letter-text_rui_d22e","letterDefault":"letterDefault_rui_d22e","letter-field-name":"letter-field-name_rui_d22e","letter-field-value":"letter-field-value_rui_d22e","letter-operator":"letter-operator_rui_d22e","letter-error":"letter-error_rui_d22e","highlight":"highlight_rui_d22e","service":"service_rui_d22e","placeholder":"placeholder_rui_d22e resetButton_rui_8bff","letter":"letter_rui_d22e","rightSearchButton":"rightSearchButton_rui_d22e","clear":"clear_rui_d22e","withoutGlass":"withoutGlass_rui_d22e","loaderActive":"loaderActive_rui_d22e","loaderOnTheRight":"loaderOnTheRight_rui_d22e","inputRevertOrder":"inputRevertOrder_rui_d22e"};
+var modules_da7ab055 = {"unit":"i__const_unit_1","button-shadow":"inset 0 0 0 1px","height":"var(--ring-button-height)","loaderWidth":"64px","overInputZIndex":"2","inputGap":"24px","light":"light_rui_2ac4","heightS":"heightS_rui_d22e","heightM":"heightM_rui_d22e","heightL":"heightL_rui_d22e","button":"button_rui_d22e","active":"active_rui_d22e","withIcon":"withIcon_rui_d22e","icon":"icon_rui_d22e","primary":"primary_rui_d22e","loader":"loader_rui_d22e","loaderBackground":"loaderBackground_rui_d22e","danger":"danger_rui_d22e","text":"text_rui_d22e","content":"content_rui_d22e","text-loading":"text-loading_rui_d22e","inline":"inline_rui_d22e","withNormalIcon":"withNormalIcon_rui_d22e","withDangerIcon":"withDangerIcon_rui_d22e","progress":"progress_rui_d22e","delayed":"delayed_rui_d22e","short":"short_rui_d22e","dropdownIcon":"dropdownIcon_rui_d22e","queryAssist":"queryAssist_rui_d22e","error":"error_rui_d22e","queryAssistDisabled":"queryAssistDisabled_rui_d22e","huge":"huge_rui_d22e","actions":"actions_rui_d22e","input":"input_rui_d22e","letter-text":"letter-text_rui_d22e","letterDefault":"letterDefault_rui_d22e","letter-field-name":"letter-field-name_rui_d22e","letter-field-value":"letter-field-value_rui_d22e","letter-operator":"letter-operator_rui_d22e","letter-error":"letter-error_rui_d22e","highlight":"highlight_rui_d22e","service":"service_rui_d22e","placeholder":"placeholder_rui_d22e resetButton_rui_8bff","hugePlaceholder":"hugePlaceholder_rui_d22e","letter":"letter_rui_d22e","rightSearchButton":"rightSearchButton_rui_d22e","clear":"clear_rui_d22e","withoutGlass":"withoutGlass_rui_d22e","loaderActive":"loaderActive_rui_d22e","loaderOnTheRight":"loaderOnTheRight_rui_d22e","inputRevertOrder":"inputRevertOrder_rui_d22e"};
 
-const ICON_ID_LENGTH = 44;
-class QueryAssistSuggestions {
-  /*
-  * Pay attention that this method produces not a 100% unique key.
-  * Consider to use a unique identifier provided by a server.
-   */
-  static createKey(suggestion) {
-    const {
-      description,
-      group,
-      icon,
-      option,
-      prefix = '',
-      suffix = ''
-    } = suggestion;
-    return prefix + option + suffix + group + description + (icon ? icon.substring(icon.length - ICON_ID_LENGTH) : '');
+var ICON_ID_LENGTH = 44;
+var QueryAssistSuggestions = /*#__PURE__*/function () {
+  function QueryAssistSuggestions() {
+    _classCallCheck(this, QueryAssistSuggestions);
   }
-  static renderLabel(suggestion) {
-    const {
-      className,
-      matchingStart = 0,
-      matchingEnd = 0,
-      option,
-      prefix = '',
-      suffix = ''
-    } = suggestion;
-    let wrappedOption;
-    let before = '';
-    let after = '';
-    if (matchingStart !== matchingEnd) {
-      before = option.substring(0, matchingStart);
-      wrappedOption = /*#__PURE__*/React.createElement("span", {
-        className: modules_da7ab055.highlight
-      }, option.substring(matchingStart, matchingEnd));
-      after = option.substring(matchingEnd);
-    } else {
-      wrappedOption = option;
+  _createClass(QueryAssistSuggestions, null, [{
+    key: "createKey",
+    value:
+    /*
+    * Pay attention that this method produces not a 100% unique key.
+    * Consider to use a unique identifier provided by a server.
+     */
+    function createKey(suggestion) {
+      var description = suggestion.description,
+        group = suggestion.group,
+        icon = suggestion.icon,
+        option = suggestion.option,
+        _suggestion$prefix = suggestion.prefix,
+        prefix = _suggestion$prefix === void 0 ? '' : _suggestion$prefix,
+        _suggestion$suffix = suggestion.suffix,
+        suffix = _suggestion$suffix === void 0 ? '' : _suggestion$suffix;
+      return prefix + option + suffix + group + description + (icon ? icon.substring(icon.length - ICON_ID_LENGTH) : '');
     }
-    const wrappedPrefix = prefix && /*#__PURE__*/React.createElement("span", {
-      className: modules_da7ab055.service
-    }, prefix);
-    const wrappedSuffix = suffix && /*#__PURE__*/React.createElement("span", {
-      className: modules_da7ab055.service
-    }, suffix);
-    return /*#__PURE__*/React.createElement("span", {
-      className: className
-    }, wrappedPrefix, before, wrappedOption, after, wrappedSuffix);
-  }
-  static renderGroupSeparator(suggestion, prevSuggestion) {
-    const {
-      group,
-      option
-    } = suggestion;
-    const {
-      SEPARATOR
-    } = List.ListProps.Type;
-    if (prevSuggestion !== group) {
-      return {
-        key: option + group + SEPARATOR,
-        description: group,
-        rgItemType: SEPARATOR
-      };
+  }, {
+    key: "renderLabel",
+    value: function renderLabel(suggestion) {
+      var className = suggestion.className,
+        _suggestion$matchingS = suggestion.matchingStart,
+        matchingStart = _suggestion$matchingS === void 0 ? 0 : _suggestion$matchingS,
+        _suggestion$matchingE = suggestion.matchingEnd,
+        matchingEnd = _suggestion$matchingE === void 0 ? 0 : _suggestion$matchingE,
+        option = suggestion.option,
+        _suggestion$prefix2 = suggestion.prefix,
+        prefix = _suggestion$prefix2 === void 0 ? '' : _suggestion$prefix2,
+        _suggestion$suffix2 = suggestion.suffix,
+        suffix = _suggestion$suffix2 === void 0 ? '' : _suggestion$suffix2;
+      var wrappedOption;
+      var before = '';
+      var after = '';
+      if (matchingStart !== matchingEnd) {
+        before = option.substring(0, matchingStart);
+        wrappedOption = /*#__PURE__*/React.createElement("span", {
+          className: modules_da7ab055.highlight
+        }, option.substring(matchingStart, matchingEnd));
+        after = option.substring(matchingEnd);
+      } else {
+        wrappedOption = option;
+      }
+      var wrappedPrefix = prefix && /*#__PURE__*/React.createElement("span", {
+        className: modules_da7ab055.service
+      }, prefix);
+      var wrappedSuffix = suffix && /*#__PURE__*/React.createElement("span", {
+        className: modules_da7ab055.service
+      }, suffix);
+      return /*#__PURE__*/React.createElement("span", {
+        className: className
+      }, wrappedPrefix, before, wrappedOption, after, wrappedSuffix);
     }
-    return null;
-  }
-  static renderList(suggestions, suggestionRenderer) {
-    const renderedSuggestions = [];
-    suggestions.forEach((suggestion, index, arr) => {
-      const prevSuggestionGroup = arr[index - 1] && arr[index - 1].group;
-      const groupSeparator = QueryAssistSuggestions.renderGroupSeparator(suggestion, prevSuggestionGroup);
-      if (groupSeparator) {
-        renderedSuggestions.push(groupSeparator);
+  }, {
+    key: "renderGroupSeparator",
+    value: function renderGroupSeparator(suggestion, prevSuggestion) {
+      var group = suggestion.group,
+        option = suggestion.option;
+      var SEPARATOR = List.ListProps.Type.SEPARATOR;
+      if (prevSuggestion !== group) {
+        return {
+          key: option + group + SEPARATOR,
+          description: group,
+          rgItemType: SEPARATOR
+        };
       }
-      renderedSuggestions.push(suggestionRenderer(suggestion));
-    });
-    return renderedSuggestions;
-  }
-}
+      return null;
+    }
+  }, {
+    key: "renderList",
+    value: function renderList(suggestions, suggestionRenderer) {
+      var renderedSuggestions = [];
+      suggestions.forEach(function (suggestion, index, arr) {
+        var prevSuggestionGroup = arr[index - 1] && arr[index - 1].group;
+        var groupSeparator = QueryAssistSuggestions.renderGroupSeparator(suggestion, prevSuggestionGroup);
+        if (groupSeparator) {
+          renderedSuggestions.push(groupSeparator);
+        }
+        renderedSuggestions.push(suggestionRenderer(suggestion));
+      });
+      return renderedSuggestions;
+    }
+  }]);
+  return QueryAssistSuggestions;
+}();
 
 export { QueryAssistSuggestions as Q, modules_da7ab055 as m };

package/dist/_helpers/select__filter.js

@@ -1,59 +1,86 @@
-import { _ as _defineProperty, a as _extends } from './_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, d as _createClass, e as _objectWithoutProperties, f as _extends } from './_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.object.to-string.js';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Input } from '../input/input.js';
+import { I as Input } from './input.js';
 import sniffr from '../global/sniffer.js';
 import { ActiveItemContext } from '../list/list.js';
+import { I18nContext } from '../i18n/i18n-context.js';
 
-var modules_b607bec2 = {"unit":"8px","filterWithTagsFocused":"filterWithTagsFocused_rui_531d","light":"light_rui_531d","filterWithTags":"filterWithTags_rui_531d","filterWrapper":"filterWrapper_rui_531d","filterWithTagsInput":"filterWithTagsInput_rui_531d","filter":"filter_rui_531d","filterIcon":"filterIcon_rui_531d","bottomLine":"bottomLine_rui_531d","message":"message_rui_531d","selectAll":"selectAll_rui_531d"};
+var modules_b607bec2 = {"unit":"i__const_unit_0","filterWithTagsFocused":"filterWithTagsFocused_rui_531d","light":"light_rui_2ac4","filterWithTags":"filterWithTags_rui_531d","filterWrapper":"filterWrapper_rui_531d","filterWithTagsInput":"filterWithTagsInput_rui_531d","filter":"filter_rui_531d","filterIcon":"filterIcon_rui_531d","bottomLine":"bottomLine_rui_531d","message":"message_rui_531d","selectAll":"selectAll_rui_531d"};
 
+var _excluded = ["className", "listId"];
 function noop() {}
-class SelectFilter extends Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "input", void 0);
-    _defineProperty(this, "inputRef", el => {
-      this.input = el;
-      this.props.inputRef(el);
+var SelectFilter = /*#__PURE__*/function (_Component) {
+  _inherits(SelectFilter, _Component);
+  var _super = _createSuper(SelectFilter);
+  function SelectFilter() {
+    var _this;
+    _classCallCheck(this, SelectFilter);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "input", void 0);
+    _defineProperty(_assertThisInitialized(_this), "inputRef", function (el) {
+      _this.input = el;
+      _this.props.inputRef(el);
     });
+    return _this;
   }
-  componentWillUnmount() {
-    this.blur();
-  }
-  focus() {
-    const {
-      input
-    } = this;
-    if (input && input !== document.activeElement) {
-      sniffr.browser.name === 'firefox' ? input.select() : input.focus();
+  _createClass(SelectFilter, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.blur();
     }
-  }
-  blur() {
-    if (this.input && this.input === document.activeElement) {
-      this.input.blur();
+  }, {
+    key: "focus",
+    value: function focus() {
+      var input = this.input;
+      if (input && input !== document.activeElement) {
+        sniffr.browser.name === 'firefox' ? input.select() : input.focus();
+      }
     }
-  }
-  render() {
-    const {
-      className,
-      listId,
-      ...restProps
-    } = this.props;
-    const classes = classNames(modules_b607bec2.filter, className);
-    return /*#__PURE__*/React.createElement(ActiveItemContext.ValueContext.Consumer, null, activeItemId => /*#__PURE__*/React.createElement(Input, _extends({}, restProps, {
-      "aria-owns": listId,
-      "aria-activedescendant": activeItemId,
-      autoComplete: "off",
-      autoFocus: true,
-      borderless: true,
-      inputRef: this.inputRef,
-      className: classes
-    })));
-  }
-}
+  }, {
+    key: "blur",
+    value: function blur() {
+      if (this.input && this.input === document.activeElement) {
+        this.input.blur();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        className = _this$props.className,
+        listId = _this$props.listId,
+        restProps = _objectWithoutProperties(_this$props, _excluded);
+      var classes = classNames(modules_b607bec2.filter, className);
+      return /*#__PURE__*/React.createElement(ActiveItemContext.ValueContext.Consumer, null, function (activeItemId) {
+        return /*#__PURE__*/React.createElement(I18nContext.Consumer, null, function (_ref) {
+          var _restProps$placeholde;
+          var translate = _ref.translate;
+          return /*#__PURE__*/React.createElement(Input, _extends({}, restProps, {
+            placeholder: (_restProps$placeholde = restProps.placeholder) !== null && _restProps$placeholde !== void 0 ? _restProps$placeholde : translate('filterItems'),
+            "aria-owns": listId,
+            "aria-activedescendant": activeItemId,
+            autoComplete: "off",
+            autoFocus: true,
+            borderless: true,
+            inputRef: _this2.inputRef,
+            className: classes
+          }));
+        });
+      });
+    }
+  }]);
+  return SelectFilter;
+}(Component);
 _defineProperty(SelectFilter, "defaultProps", {
-  placeholder: 'Filter items',
   inputRef: noop
 });
 SelectFilter.propTypes = {

package/dist/_helpers/services-link.js

@@ -1,30 +1,42 @@
-import { _ as _defineProperty, a as _extends } from './_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, d as _createClass, e as _objectWithoutProperties, f as _extends } from './_rollupPluginBabelHelpers.js';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Link from '../link/link.js';
 
-var modules_74a7bf8b = {"unit":"8px","light":"light_rui_e0d5","services":"services_rui_e0d5","active":"active_rui_e0d5","item":"item_rui_e0d5","itemLogo":"itemLogo_rui_e0d5","activeItem":"activeItem_rui_e0d5 item_rui_e0d5 active_rui_e0d5","line":"line_rui_e0d5","itemStacked":"itemStacked_rui_e0d5","activeItemStacked":"activeItemStacked_rui_e0d5 itemStacked_rui_e0d5 active_rui_e0d5"};
+var modules_74a7bf8b = {"unit":"i__const_unit_0","light":"light_rui_2ac4","services":"services_rui_e0d5","active":"active_rui_e0d5","item":"item_rui_e0d5","itemLogo":"itemLogo_rui_e0d5","activeItem":"activeItem_rui_e0d5 item_rui_e0d5 active_rui_e0d5","line":"line_rui_e0d5","itemStacked":"itemStacked_rui_e0d5","activeItemStacked":"activeItemStacked_rui_e0d5 itemStacked_rui_e0d5 active_rui_e0d5"};
 
-class ServicesLink extends PureComponent {
-  render() {
-    const {
-      service,
-      ...props
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Link, _extends({
-      target: "_self",
-      href: service.homeUrl
-    }, props), WrapText => service.iconUrl ? [/*#__PURE__*/React.createElement("span", {
-      key: "icon",
-      className: modules_74a7bf8b.itemLogo,
-      style: {
-        backgroundImage: `url(${service.iconUrl})`
-      }
-    }), /*#__PURE__*/React.createElement("div", {
-      key: "text"
-    }, /*#__PURE__*/React.createElement(WrapText, null, service.name))] : /*#__PURE__*/React.createElement(WrapText, null, service.name));
+var _excluded = ["service"];
+var ServicesLink = /*#__PURE__*/function (_PureComponent) {
+  _inherits(ServicesLink, _PureComponent);
+  var _super = _createSuper(ServicesLink);
+  function ServicesLink() {
+    _classCallCheck(this, ServicesLink);
+    return _super.apply(this, arguments);
   }
-}
+  _createClass(ServicesLink, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        service = _this$props.service,
+        props = _objectWithoutProperties(_this$props, _excluded);
+      return /*#__PURE__*/React.createElement(Link, _extends({
+        target: "_self",
+        href: service.homeUrl
+      }, props), function (WrapText) {
+        return service.iconUrl ? [/*#__PURE__*/React.createElement("span", {
+          key: "icon",
+          className: modules_74a7bf8b.itemLogo,
+          style: {
+            backgroundImage: "url(".concat(service.iconUrl, ")")
+          }
+        }), /*#__PURE__*/React.createElement("div", {
+          key: "text"
+        }, /*#__PURE__*/React.createElement(WrapText, null, service.name))] : /*#__PURE__*/React.createElement(WrapText, null, service.name);
+      });
+    }
+  }]);
+  return ServicesLink;
+}(PureComponent);
 _defineProperty(ServicesLink, "propTypes", {
   isActive: PropTypes.bool,
   service: PropTypes.shape({