@decisiv/ui-components 2.0.1-alpha.138 → 2.0.1-alpha.141

package/lib/components/Popover/schema.js

@@ -31,7 +31,7 @@ schema.makePropTypes = function () {
     containerSelector: _reactDesc.PropTypes.string.description("A CSS selector to the element where the ".concat(component, "s should be rendered in, or \"parent\" to render the ").concat(component, " in-place.")).defaultValue('body'),
     hideOnESC: _reactDesc.PropTypes.bool.description("Whether or not to close the ".concat(component, " when the user presses the \"Escape\" key. No effect when `visible` is not `undefined`.")).defaultValue('true'),
     hideOnClickOutside: _reactDesc.PropTypes.bool.description("Whether or not to close the ".concat(component, " when the user clicks outside the ").concat(component, ". No effect when `visible` is not `undefined`.")).defaultValue('true'),
-    zIndex: _reactDesc.PropTypes.bool.description("The css `z-index` value to apply to the ".concat(component, " content wrapper. Is set to `auto` when not provided.")),
+    zIndex: _reactDesc.PropTypes.number.description("The css `z-index` value to apply to the ".concat(component, " content wrapper. Is set to `auto` when not provided.")),
     onShow: _reactDesc.PropTypes.func.description("A function called when the ".concat(component, " becomes visible. Only called if `visible` is `undefined`.")),
     onHide: _reactDesc.PropTypes.func.description("A function called when the ".concat(component, " becomes hidden. Only called if `visible` is `undefined`.")),
     onRequestHide: _reactDesc.PropTypes.func.description("A function called if `visible` is not `undefined` and when the user clicks outside the ".concat(component, " or presses the \"Escape\" key."))

package/lib/components/SearchInput/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { SearchInputProps, SearchItem, StyledFlexProps } from './types';
+declare function SearchInput({ onSearch, value, onChange, size, disabled, ...props }: SearchInputProps): JSX.Element;
+declare namespace SearchInput {
+    var defaultProps: {
+        size: string;
+    };
+}
+export default SearchInput;
+export { SearchInputProps, SearchItem, StyledFlexProps };
+//# sourceMappingURL=index.d.ts.map

package/lib/components/SearchInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/index.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA6DxE,iBAAwB,WAAW,CAAC,EAClC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA+FhC;kBAtGuB,WAAW;;;;;eAAX,WAAW;AA4GnC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC"}

package/lib/components/SearchInput/index.js

@@ -0,0 +1,177 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SearchInput;
+Object.defineProperty(exports, "SearchInputProps", {
+  enumerable: true,
+  get: function get() {
+    return _types.SearchInputProps;
+  }
+});
+Object.defineProperty(exports, "SearchItem", {
+  enumerable: true,
+  get: function get() {
+    return _types.SearchItem;
+  }
+});
+Object.defineProperty(exports, "StyledFlexProps", {
+  enumerable: true,
+  get: function get() {
+    return _types.StyledFlexProps;
+  }
+});
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Times = _interopRequireDefault(require("@decisiv/iconix/lib/components/Times"));
+
+var _Search = _interopRequireDefault(require("@decisiv/iconix/lib/components/Search"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
+
+var _Flex = _interopRequireDefault(require("../Flex"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _InputField = _interopRequireDefault(require("../../atoms/InputField"));
+
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+
+var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
+
+var _types = require("./types");
+
+var _Input = _interopRequireDefault(require("../TextField/Input"));
+
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var StyledFlex = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "SearchInput__StyledFlex",
+  componentId: "sc-1lgi0sd-0"
+})(["align-items:center;[cursor='text']{height:", "px;> div{", ";padding-bottom:", ";}}"], function (_ref) {
+  var mediumSized = _ref.mediumSized;
+  return mediumSized ? 50 : 32;
+}, function (_ref2) {
+  var mediumSized = _ref2.mediumSized;
+  return !mediumSized && "padding-top: ".concat((0, _rem.default)(_spacing.default.base * 0.1));
+}, function (_ref3) {
+  var mediumSized = _ref3.mediumSized;
+  return (0, _rem.default)(_spacing.default.base * (mediumSized ? 0.6 : 0.1));
+});
+var StyledBody = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "SearchInput__StyledBody",
+  componentId: "sc-1lgi0sd-1"
+})(["flex:1;align-items:center;"]);
+var ButtonGroup = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "SearchInput__ButtonGroup",
+  componentId: "sc-1lgi0sd-2"
+})(["margin-right:", ";cursor:default;"], function (_ref4) {
+  var mediumSized = _ref4.mediumSized;
+  return (0, _rem.default)(_spacing.default.base * (mediumSized ? 1 : 0.3));
+});
+var SearchIconWrapper = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "SearchInput__SearchIconWrapper",
+  componentId: "sc-1lgi0sd-3"
+})(["color:", ";margin-right:", ";margin-left:", ";align-items:center;"], (0, _toColorString.default)(_color.default.base.alaskanHusky), (0, _rem.default)(_spacing.default.base * 1.5), (0, _rem.default)(_spacing.default.base * 0.5));
+var TimesIconWrapper = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "SearchInput__TimesIconWrapper",
+  componentId: "sc-1lgi0sd-4"
+})(["visibility:", ";margin-right:", ";color:", ";align-items:center;border:1px solid transparent;border-radius:2px;&:hover{color:", ";}&:focus{outline:none;border:1px solid ", ";", "}"], function (_ref5) {
+  var visible = _ref5.visible;
+  return visible ? 'visible' : 'hidden';
+}, (0, _rem.default)(_spacing.default.base), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.status.danger.medium), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)(_color.default.interaction.pacificOcean40));
+var StyledInput = (0, _styledComponents.default)(_Input.default).withConfig({
+  displayName: "SearchInput__StyledInput",
+  componentId: "sc-1lgi0sd-5"
+})(["padding:0;color:", ";"], (0, _toColorString.default)(_color.default.base.charcoal));
+
+function SearchInput(_ref6) {
+  var onSearch = _ref6.onSearch,
+      value = _ref6.value,
+      onChange = _ref6.onChange,
+      size = _ref6.size,
+      disabled = _ref6.disabled,
+      props = _objectWithoutProperties(_ref6, ["onSearch", "value", "onChange", "size", "disabled"]);
+
+  var translate = (0, _useTranslations.default)();
+  var handleSearch = (0, _react.useCallback)(function () {
+    !disabled && onSearch && onSearch(value);
+  }, [disabled, onSearch, value]);
+  var mediumSized = size === 'medium';
+  var hasText = !!value && !!value.length;
+  var handleClear = (0, _react.useCallback)(function () {
+    !disabled && onChange && onChange({
+      target: {
+        value: ''
+      }
+    });
+  }, [disabled, onChange]);
+  var handleKeyPress = (0, _react.useCallback)(function (event) {
+    if (event.key === 'Enter') handleSearch();
+  }, [handleSearch]);
+  return _react.default.createElement(StyledFlex, {
+    mediumSized: mediumSized,
+    flex: 1,
+    "data-testid": "search-container"
+  }, _react.default.createElement(_InputField.default, _extends({
+    label: "",
+    hideLabel: true,
+    disabled: disabled,
+    value: value
+  }, props), function (p) {
+    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(StyledBody, null, mediumSized && _react.default.createElement(SearchIconWrapper, {
+      disabled: mediumSized
+    }, _react.default.createElement(_Search.default, {
+      size: "medium",
+      "data-testid": "search-icon"
+    })), _react.default.createElement(StyledInput, _extends({}, p, {
+      onChange: onChange,
+      onKeyPress: handleKeyPress
+    })), _react.default.createElement(ButtonGroup, {
+      mediumSized: mediumSized
+    }, !disabled && _react.default.createElement(_Tooltip.default, {
+      placement: "top",
+      target: // eslint-disable-next-line react/jsx-wrap-multilines
+      _react.default.createElement(TimesIconWrapper, {
+        tabIndex: 0,
+        "aria-label": translate(undefined, 'searchInput.clearSearch'),
+        onClick: handleClear,
+        visible: hasText
+      }, _react.default.createElement(_Times.default, {
+        size: "small"
+      }))
+    }, translate(undefined, 'searchInput.clear')), _react.default.createElement(_Button.default, {
+      "aria-label": "Search",
+      tabIndex: 0,
+      disabled: disabled || !hasText,
+      text: mediumSized ? translate(undefined, 'searchInput.search') : '',
+      icon: mediumSized ? undefined : _Search.default,
+      size: size,
+      onClick: handleSearch
+    }))));
+  }));
+}
+
+SearchInput.defaultProps = {
+  size: 'medium'
+};

package/lib/components/SearchInput/index.test.js

@@ -0,0 +1,348 @@
+"use strict";
+
+require("jest-styled-components");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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; }
+
+beforeAll(function () {
+  var root = document.createElement('div');
+  root.setAttribute('id', 'popovers-root');
+  document.body.appendChild(root);
+});
+
+var wrapper = function wrapper(_ref) {
+  var children = _ref.children;
+  return _react.default.createElement(_ConfigProvider.ConfigProvider, null, children);
+};
+
+var render = function render(ui, options) {
+  return (0, _react2.render)(ui, _objectSpread({}, options, {
+    wrapper: wrapper
+  }));
+};
+
+var onChangeMock = jest.fn();
+var onSearchMock = jest.fn();
+describe('Search input', function () {
+  afterEach(jest.clearAllMocks);
+  it('renders the search input with the TIMES icon HIDDEN when its blank', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var container, searchContainer;
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "",
+              onChange: onChangeMock
+            }));
+            _context.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            searchContainer = _context.sent;
+            expect((0, _react2.within)(searchContainer).getByLabelText('Clear search')).not.toBeVisible();
+
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('renders the search input with the TIMES icon VISIBLE when its blank', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var container, searchContainer;
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "Some value",
+              onChange: onChangeMock
+            }));
+            _context2.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            searchContainer = _context2.sent;
+            expect((0, _react2.within)(searchContainer).getByLabelText('Clear search')).toBeVisible();
+
+          case 5:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('renders SEARCH icon for MEDIUM sized search input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+    var container;
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "",
+              onChange: onChangeMock,
+              size: "medium"
+            }));
+            _context3.t0 = expect;
+            _context3.next = 4;
+            return container.findByTestId('search-icon');
+
+          case 4:
+            _context3.t1 = _context3.sent;
+            (0, _context3.t0)(_context3.t1).toBeInTheDocument();
+
+          case 6:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('renders search button with the text SEARCH for MEDIUM sized search input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+    var container;
+    return regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "",
+              onChange: onChangeMock,
+              size: "medium"
+            }));
+            _context4.t0 = expect;
+            _context4.next = 4;
+            return container.findByRole('button');
+
+          case 4:
+            _context4.t1 = _context4.sent;
+            (0, _context4.t0)(_context4.t1).toHaveTextContent('Search');
+
+          case 6:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('does not render the SEARCH icon for SMALL sized search input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
+    var container;
+    return regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "",
+              onChange: onChangeMock,
+              size: "small"
+            }));
+            expect(container.queryByTestId('search-icon')).not.toBeInTheDocument();
+
+          case 2:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  })));
+  it('renders search button with the icon SEARCH for SMALL sized search input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
+    var container, button;
+    return regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "",
+              onChange: onChangeMock,
+              size: "small"
+            }));
+            button = container.getByRole('button');
+            expect(button.querySelector('svg')).toBeInTheDocument();
+
+          case 3:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  })));
+  it('renders the search input with the TIMES icon HIDDEN when its disabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
+    var container, searchContainer;
+    return regeneratorRuntime.wrap(function _callee7$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "some value",
+              onChange: onChangeMock,
+              disabled: true
+            }));
+            _context7.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            searchContainer = _context7.sent;
+            expect((0, _react2.within)(searchContainer).queryByLabelText('Clear search')).not.toBeInTheDocument();
+
+          case 5:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee7);
+  })));
+  it('calls onChange when a change is triggered', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
+    var container, searchInput;
+    return regeneratorRuntime.wrap(function _callee8$(_context8) {
+      while (1) {
+        switch (_context8.prev = _context8.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "",
+              onChange: onChangeMock,
+              disabled: true
+            }));
+            _context8.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            _context8.next = 5;
+            return _context8.sent.querySelector('input');
+
+          case 5:
+            searchInput = _context8.sent;
+            _context8.next = 8;
+            return _react2.fireEvent.change(searchInput, {
+              target: {
+                value: 'some value'
+              }
+            });
+
+          case 8:
+            expect(onChangeMock).toHaveBeenCalled();
+
+          case 9:
+          case "end":
+            return _context8.stop();
+        }
+      }
+    }, _callee8);
+  })));
+  it('calls onChange with a blank value when clear button is clicked', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
+    var container, searchContainer;
+    return regeneratorRuntime.wrap(function _callee9$(_context9) {
+      while (1) {
+        switch (_context9.prev = _context9.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "Some value",
+              onChange: onChangeMock
+            }));
+            _context9.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            searchContainer = _context9.sent;
+            _context9.next = 6;
+            return _react2.fireEvent.click((0, _react2.within)(searchContainer).getByLabelText('Clear search'));
+
+          case 6:
+            expect(onChangeMock).toHaveBeenCalledWith({
+              target: {
+                value: ''
+              }
+            });
+
+          case 7:
+          case "end":
+            return _context9.stop();
+        }
+      }
+    }, _callee9);
+  })));
+  it('calls onSearch when search button is clicked', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10() {
+    var container;
+    return regeneratorRuntime.wrap(function _callee10$(_context10) {
+      while (1) {
+        switch (_context10.prev = _context10.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "Searched value",
+              onChange: onChangeMock,
+              onSearch: onSearchMock,
+              size: "medium"
+            }));
+            _context10.t0 = _react2.fireEvent;
+            _context10.next = 4;
+            return container.findByRole('button');
+
+          case 4:
+            _context10.t1 = _context10.sent;
+
+            _context10.t0.click.call(_context10.t0, _context10.t1);
+
+            expect(onSearchMock).toHaveBeenCalledWith('Searched value');
+
+          case 7:
+          case "end":
+            return _context10.stop();
+        }
+      }
+    }, _callee10);
+  })));
+  it('calls onSearch when enter is pressed', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11() {
+    var container, searchInput;
+    return regeneratorRuntime.wrap(function _callee11$(_context11) {
+      while (1) {
+        switch (_context11.prev = _context11.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "Searched value",
+              onChange: onChangeMock,
+              onSearch: onSearchMock,
+              size: "medium"
+            }));
+            _context11.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            _context11.next = 5;
+            return _context11.sent.querySelector('input');
+
+          case 5:
+            searchInput = _context11.sent;
+
+            _react2.fireEvent.keyPress(searchInput, {
+              code: 'Enter',
+              key: 'Enter',
+              charCode: 13
+            });
+
+            expect(onSearchMock).toHaveBeenCalledWith('Searched value');
+
+          case 8:
+          case "end":
+            return _context11.stop();
+        }
+      }
+    }, _callee11);
+  })));
+});

package/lib/components/SearchInput/schema.d.ts

@@ -0,0 +1,3 @@
+declare const schema: any;
+export default schema;
+//# sourceMappingURL=schema.d.ts.map

package/lib/components/SearchInput/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AAwBxD,eAAe,MAAM,CAAC"}

package/lib/components/SearchInput/schema.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactDesc = require("react-desc");
+
+// @ts-ignore no module typings
+var schema = (0, _reactDesc.describe)({
+  displayName: 'SearchInput'
+});
+schema.propTypes = {
+  size: _reactDesc.PropTypes.oneOf(['medium', 'small']).description('Controls the size of the search input.').defaultValue('medium'),
+  disabled: _reactDesc.PropTypes.bool.description('Boolean indicating whether the search input is disabled.'),
+  value: _reactDesc.PropTypes.string.description('A text value to be displayed on the input field'),
+  onSearch: _reactDesc.PropTypes.func.description('A callback that is invoked with the input value when the the search action is performed'),
+  onChange: _reactDesc.PropTypes.func.description('A callback that is invoked when the value of the search field changes')
+};
+var _default = schema;
+exports.default = _default;

package/lib/components/SearchInput/types.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { BaseInputFieldProps } from '../../atoms/InputField';
+import { FlexComponentProps } from '../Flex';
+export interface SearchItem<T> {
+    label: string;
+    value: T;
+}
+export declare type Size = 'medium' | 'small';
+export interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'label'>, Omit<BaseInputFieldProps, 'children' | 'onClick' | 'label'> {
+    zIndex?: number;
+    onSearch?: (value: string) => void;
+    onSelectItem?: (value: any) => void;
+    onBlur?: React.FocusEventHandler;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler;
+    onKeyDown?: React.KeyboardEventHandler;
+    size: Size;
+    value: string;
+}
+export interface SearchFieldProps extends Omit<SearchInputProps, 'loader'> {
+    observedElementRef: React.MutableRefObject<any>;
+}
+export interface StyledFlexProps extends FlexComponentProps {
+    width: number | null;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/SearchInput/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;CACV;AAED,oBAAY,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtC,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,EACzE,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC;IACxE,kBAAkB,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;CACjD;AAED,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB"}

package/lib/components/SearchInput/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/index.d.ts

@@ -23,6 +23,7 @@ export { default as Pagination } from './Pagination';
 export { default as Popover } from './Popover';
 export { default as RadioGroup } from './RadioGroup';
 export { default as Select } from './Select';
+export { default as SearchInput, SearchItem } from './SearchInput';
 export { default as SelectDate, DisabledDateRuleName, DayOfWeek, } from './SelectDate';
 export { default as SelectDateRange } from './SelectDateRange';
 export { default as SelectMenu } from './SelectMenu';

package/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}

package/lib/components/index.js

@@ -47,6 +47,8 @@ var _exportNames = {
   Popover: true,
   RadioGroup: true,
   Select: true,
+  SearchInput: true,
+  SearchItem: true,
   SelectDate: true,
   DisabledDateRuleName: true,
   DayOfWeek: true,
@@ -323,6 +325,18 @@ Object.defineProperty(exports, "Select", {
     return _Select.default;
   }
 });
+Object.defineProperty(exports, "SearchInput", {
+  enumerable: true,
+  get: function get() {
+    return _SearchInput.default;
+  }
+});
+Object.defineProperty(exports, "SearchItem", {
+  enumerable: true,
+  get: function get() {
+    return _SearchInput.SearchItem;
+  }
+});
 Object.defineProperty(exports, "SelectDate", {
   enumerable: true,
   get: function get() {
@@ -476,6 +490,8 @@ var _RadioGroup = _interopRequireDefault(require("./RadioGroup"));
 
 var _Select = _interopRequireDefault(require("./Select"));
 
+var _SearchInput = _interopRequireWildcard(require("./SearchInput"));
+
 var _SelectDate = _interopRequireWildcard(require("./SelectDate"));
 
 var _SelectDateRange = _interopRequireDefault(require("./SelectDateRange"));

package/lib/providers/ConfigProvider/utils/translations.d.ts

@@ -122,6 +122,11 @@ declare const translations: {
     textField: {
         readonly requiredMessage: "Required";
     };
+    searchInput: {
+        readonly clear: "Clear";
+        readonly search: "Search";
+        readonly clearSearch: "Clear search";
+    };
 };
 export declare type Translations = typeof translations;
 export default translations;

package/lib/providers/ConfigProvider/utils/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../../src/providers/ConfigProvider/utils/translations.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqHR,CAAC;AAEX,oBAAY,YAAY,GAAG,OAAO,YAAY,CAAC;AAE/C,eAAe,YAAY,CAAC"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../../src/providers/ConfigProvider/utils/translations.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HR,CAAC;AAEX,oBAAY,YAAY,GAAG,OAAO,YAAY,CAAC;AAE/C,eAAe,YAAY,CAAC"}

package/lib/providers/ConfigProvider/utils/translations.js

@@ -127,6 +127,11 @@ var translations = {
   },
   textField: {
     requiredMessage: 'Required'
+  },
+  searchInput: {
+    clear: 'Clear',
+    search: 'Search',
+    clearSearch: 'Clear search'
   }
 };
 var _default = translations;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.138+9032d31",
+  "version": "2.0.1-alpha.141+cc2b6fc",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "@decisiv/breakpoint-observer": "^1.8.8",
-    "@decisiv/design-tokens": "^1.8.8",
-    "@decisiv/iconix": "^2.0.0",
+    "@decisiv/design-tokens": "^1.8.9-alpha.259+cc2b6fc",
+    "@decisiv/iconix": "^2.0.1-alpha.141+cc2b6fc",
     "@decisiv/prop-types": "^1.6.9",
     "@seznam/compose-react-refs": "^1.0.2",
     "csstype": "^2.6.5",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "9032d3112c6ad97588d89b91969caacac41aee30"
+  "gitHead": "cc2b6fcfc5238b5405d1573196d9f75387db4362"
 }