@decisiv/ui-components 2.0.1-alpha.185 → 2.0.1-alpha.187

package/lib/components/SearchInput/index.js

@@ -25,38 +25,30 @@ Object.defineProperty(exports, "StyledFlexProps", {
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
 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 _HelpMessage = _interopRequireDefault(require("../../atoms/InputField/HelpMessage"));
 
-var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 
 var _types = require("./types");
 
-var _Input = _interopRequireDefault(require("../TextField/Input"));
+var _styles = require("./styles");
 
 var _useUpdateEffect = _interopRequireDefault(require("../../utils/useUpdateEffect"));
 
+var _Select = _interopRequireDefault(require("../Select"));
+
 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; } }
@@ -67,59 +59,28 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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;height:inherit;"]);
-var ButtonGroup = (0, _styledComponents.default)(_Flex.default).withConfig({
-  displayName: "SearchInput__ButtonGroup",
-  componentId: "sc-1lgi0sd-2"
-})(["align-items:center;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), function (_ref5) {
-  var inputSize = _ref5.inputSize;
-  return inputSize === 'small' ? 0 : (0, _rem.default)(_spacing.default.base * 0.5);
-});
-var TimesIconWrapper = (0, _styledComponents.default)(_Flex.default).withConfig({
-  displayName: "SearchInput__TimesIconWrapper",
-  componentId: "sc-1lgi0sd-4"
-})(["height:inherit;visibility:", ";margin-right:", ";color:", ";align-items:center;border:1px solid transparent;border-radius:2px;&:hover{color:", ";}&:focus{outline:none;border:1px solid ", ";", "}"], function (_ref6) {
-  var visible = _ref6.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(_ref7) {
-  var onSearch = _ref7.onSearch,
-      value = _ref7.value,
-      onChange = _ref7.onChange,
-      size = _ref7.size,
-      disabled = _ref7.disabled,
-      searchDisabled = _ref7.searchDisabled,
-      _ref7$searchOn = _ref7.searchOn,
-      searchOn = _ref7$searchOn === void 0 ? 'submit' : _ref7$searchOn,
-      props = _objectWithoutProperties(_ref7, ["onSearch", "value", "onChange", "size", "disabled", "searchDisabled", "searchOn"]);
+function SearchInput(_ref) {
+  var onSearch = _ref.onSearch,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      size = _ref.size,
+      disabled = _ref.disabled,
+      searchDisabled = _ref.searchDisabled,
+      _ref$searchOn = _ref.searchOn,
+      searchOn = _ref$searchOn === void 0 ? 'submit' : _ref$searchOn,
+      _ref$searchByOptions = _ref.searchByOptions,
+      searchByOptions = _ref$searchByOptions === void 0 ? [] : _ref$searchByOptions,
+      _ref$searchByLabel = _ref.searchByLabel,
+      searchByLabel = _ref$searchByLabel === void 0 ? '' : _ref$searchByLabel,
+      searchByValue = _ref.searchByValue,
+      _ref$searchByName = _ref.searchByName,
+      searchByName = _ref$searchByName === void 0 ? '' : _ref$searchByName,
+      searchByDefaultValue = _ref.searchByDefaultValue,
+      searchByWidth = _ref.searchByWidth,
+      onSearchByChange = _ref.onSearchByChange,
+      warningMessage = _ref.warningMessage,
+      helpMessage = _ref.helpMessage,
+      props = _objectWithoutProperties(_ref, ["onSearch", "value", "onChange", "size", "disabled", "searchDisabled", "searchOn", "searchByOptions", "searchByLabel", "searchByValue", "searchByName", "searchByDefaultValue", "searchByWidth", "onSearchByChange", "warningMessage", "helpMessage"]);
 
   var translate = (0, _useTranslations.default)();
   var handleSearch = (0, _react.useCallback)(function () {
@@ -127,6 +88,7 @@ function SearchInput(_ref7) {
   }, [disabled, searchDisabled, onSearch, value]);
   var mediumSized = size === 'medium';
   var hasText = !!value && !!value.length;
+  var showSearchBy = !(0, _isEmpty.default)(searchByOptions);
   var handleClear = (0, _react.useCallback)(function () {
     !disabled && onChange && onChange({
       target: {
@@ -143,30 +105,45 @@ function SearchInput(_ref7) {
     }
   }, [searchOn, value]);
   var renderLeftIcon = searchOn === 'change' || searchOn === 'submit' && mediumSized;
-  return _react.default.createElement(StyledFlex, {
+  return _react.default.createElement(_styles.SearchInputContainer, null, _react.default.createElement(_styles.StyledFlex, {
     flex: 1,
     mediumSized: mediumSized,
     "data-testid": "search-container"
-  }, _react.default.createElement(_InputField.default, _extends({
+  }, showSearchBy && _react.default.createElement(_styles.SelectWrapper, {
+    width: searchByWidth
+  }, _react.default.createElement(_Select.default, {
+    "aria-label": translate(undefined, 'searchInput.searchBy'),
+    disabled: disabled,
+    hideClearButton: true,
+    hideLabel: !mediumSized,
+    label: searchByLabel,
+    name: searchByName,
+    options: searchByOptions,
+    value: searchByValue,
+    withWarningIntent: !!warningMessage,
+    onChange: onSearchByChange,
+    defaultValue: searchByDefaultValue
+  })), _react.default.createElement(_InputField.default, _extends({
     label: "",
     hideLabel: true,
     disabled: disabled,
-    value: value
+    value: value,
+    withWarningIntent: !!warningMessage
   }, props), function (p) {
-    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(StyledBody, null, renderLeftIcon && _react.default.createElement(SearchIconWrapper, {
+    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_styles.StyledBody, null, renderLeftIcon && _react.default.createElement(_styles.SearchIconWrapper, {
       inputSize: size
     }, _react.default.createElement(_Search.default, {
       size: "medium",
       "data-testid": "search-icon"
-    })), _react.default.createElement(StyledInput, _extends({}, p, {
+    })), _react.default.createElement(_styles.StyledInput, _extends({}, p, {
       onChange: onChange,
       onKeyPress: handleKeyPress
-    })), _react.default.createElement(ButtonGroup, {
+    })), _react.default.createElement(_styles.ButtonGroup, {
       mediumSized: mediumSized
     }, !disabled && _react.default.createElement(_Tooltip.default, {
       placement: "top",
       target: // eslint-disable-next-line react/jsx-wrap-multilines
-      _react.default.createElement(TimesIconWrapper, {
+      _react.default.createElement(_styles.TimesIconWrapper, {
         tabIndex: 0,
         "aria-label": translate(undefined, 'searchInput.clearSearch'),
         onClick: handleClear,
@@ -183,6 +160,10 @@ function SearchInput(_ref7) {
       size: size,
       onClick: handleSearch
     }))));
+  })), !(0, _isEmpty.default)(warningMessage) && _react.default.createElement(_styles.WarningMessage, {
+    intent: "warning"
+  }, warningMessage), _react.default.createElement(_HelpMessage.default, {
+    helpMessage: helpMessage
   }));
 }
 

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

@@ -20,8 +20,24 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
 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; }
 
+// Prevent warnings about missing document methods (createRange, etc.)
+jest.mock('popper.js', function () {
+  var _class, _temp;
+
+  var PopperJS = jest.requireActual('popper.js');
+  return _temp = _class = function _class() {
+    _classCallCheck(this, _class);
+
+    return {
+      destroy: function destroy() {},
+      scheduleUpdate: function scheduleUpdate() {}
+    };
+  }, _defineProperty(_class, "placements", PopperJS.placements), _temp;
+});
 beforeAll(function () {
   var root = document.createElement('div');
   root.setAttribute('id', 'popovers-root');
@@ -474,4 +490,171 @@ describe('Search input', function () {
       }, _callee14);
     })));
   });
+  describe('searchBy selector', function () {
+    var searchByOptions = [{
+      id: 'Value 1',
+      label: 'Value 1'
+    }, {
+      id: 'Value 2',
+      label: 'Value 2'
+    }, {
+      id: 'Value 3',
+      label: 'Value 3'
+    }];
+    it('renders list of options', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15() {
+      var _render2, getByLabelText, getByText;
+
+      return regeneratorRuntime.wrap(function _callee15$(_context15) {
+        while (1) {
+          switch (_context15.prev = _context15.next) {
+            case 0:
+              _render2 = render(_react.default.createElement(_.default, {
+                searchByOptions: searchByOptions,
+                searchByLabel: "Search By",
+                searchByName: "search-by",
+                value: "Searched value",
+                onChange: onChangeMock,
+                onSearch: onSearchMock
+              })), getByLabelText = _render2.getByLabelText, getByText = _render2.getByText;
+              expect(getByLabelText('Search By')).toBeInTheDocument();
+
+              _react2.fireEvent.click(getByLabelText('Search By'));
+
+              searchByOptions.forEach(function (_ref17) {
+                var label = _ref17.label;
+                expect(getByText(label)).toBeInTheDocument();
+              });
+
+            case 4:
+            case "end":
+              return _context15.stop();
+          }
+        }
+      }, _callee15);
+    })));
+    it('calls searchBy callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee16() {
+      var mockedFn, _render3, getByLabelText, getByText;
+
+      return regeneratorRuntime.wrap(function _callee16$(_context16) {
+        while (1) {
+          switch (_context16.prev = _context16.next) {
+            case 0:
+              mockedFn = jest.fn();
+              _render3 = render(_react.default.createElement(_.default, {
+                searchByOptions: searchByOptions,
+                searchByLabel: "Search By",
+                searchByName: "search-by",
+                onSearchByChange: mockedFn,
+                value: "Searched value",
+                onChange: onChangeMock,
+                onSearch: onSearchMock
+              })), getByLabelText = _render3.getByLabelText, getByText = _render3.getByText;
+              expect(getByLabelText('Search By')).toBeInTheDocument();
+
+              _react2.fireEvent.click(getByLabelText('Search By'));
+
+              searchByOptions.forEach(function (_ref19) {
+                var label = _ref19.label;
+                expect(getByText(label)).toBeInTheDocument();
+              });
+
+              _react2.fireEvent.click(getByText(searchByOptions[0].label));
+
+              expect(mockedFn).toHaveBeenCalledWith(searchByOptions[0].label);
+
+            case 7:
+            case "end":
+              return _context16.stop();
+          }
+        }
+      }, _callee16);
+    })));
+    describe('small', function () {
+      it('does not renders label', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee17() {
+        var _render4, queryByText;
+
+        return regeneratorRuntime.wrap(function _callee17$(_context17) {
+          while (1) {
+            switch (_context17.prev = _context17.next) {
+              case 0:
+                _render4 = render(_react.default.createElement(_.default, {
+                  searchByOptions: searchByOptions,
+                  searchByLabel: "Search By",
+                  searchByName: "search-by",
+                  value: "Searched value",
+                  onChange: onChangeMock,
+                  onSearch: onSearchMock,
+                  size: "small"
+                })), queryByText = _render4.queryByText;
+                expect(queryByText('Search By')).not.toBeVisible();
+
+              case 2:
+              case "end":
+                return _context17.stop();
+            }
+          }
+        }, _callee17);
+      })));
+    });
+    describe('warning message', function () {
+      it('renders warning message', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee18() {
+        var _render5, getByLabelText, getByText;
+
+        return regeneratorRuntime.wrap(function _callee18$(_context18) {
+          while (1) {
+            switch (_context18.prev = _context18.next) {
+              case 0:
+                _render5 = render(_react.default.createElement(_.default, {
+                  searchByOptions: searchByOptions,
+                  searchByLabel: "Search By",
+                  searchByName: "search-by",
+                  value: "Searched value",
+                  onChange: onChangeMock,
+                  onSearch: onSearchMock,
+                  warningMessage: "warning message"
+                })), getByLabelText = _render5.getByLabelText, getByText = _render5.getByText;
+                expect(getByLabelText('Search By')).toBeInTheDocument();
+                expect(getByText('warning message')).toBeInTheDocument();
+
+              case 3:
+              case "end":
+                return _context18.stop();
+            }
+          }
+        }, _callee18);
+      })));
+    });
+    describe('help message', function () {
+      it('renders warning message', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee19() {
+        var _render6, getByLabelText, getByText;
+
+        return regeneratorRuntime.wrap(function _callee19$(_context19) {
+          while (1) {
+            switch (_context19.prev = _context19.next) {
+              case 0:
+                _render6 = render(_react.default.createElement(_.default, {
+                  searchByOptions: searchByOptions,
+                  searchByLabel: "Search By",
+                  searchByName: "search-by",
+                  value: "Searched value",
+                  onChange: onChangeMock,
+                  onSearch: onSearchMock,
+                  warningMessage: "warning message",
+                  helpMessage: "help message",
+                  searchByDefaultValue: "Value 1",
+                  searchByWidth: "100px"
+                })), getByLabelText = _render6.getByLabelText, getByText = _render6.getByText;
+                expect(getByLabelText('Search By')).toBeInTheDocument();
+                expect(getByText('warning message')).toBeInTheDocument();
+                expect(getByText('help message')).toBeInTheDocument();
+
+              case 4:
+              case "end":
+                return _context19.stop();
+            }
+          }
+        }, _callee19);
+      })));
+    });
+  });
 });

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

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

package/lib/components/SearchInput/schema.js

@@ -19,7 +19,18 @@ schema.propTypes = {
   searchDisabled: _reactDesc.PropTypes.bool.description('Boolean indicating whether only the search button 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')
+  onChange: _reactDesc.PropTypes.func.description('A callback that is invoked when the value of the search field changes'),
+  searchByValue: _reactDesc.PropTypes.string.description('The ID of the option that is selected in the search by field. If provided, controlling the search by field must be handled externally.'),
+  searchByLabel: _reactDesc.PropTypes.string.description('Label for the search by field'),
+  searchByName: _reactDesc.PropTypes.string.description('Name for the search by field'),
+  onSearchByChange: _reactDesc.PropTypes.func.description('A callback that is invoked when the value of the search by field changes'),
+  searchByOptions: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.shape({
+    id: _reactDesc.PropTypes.string.description('The id for an option in the search by list.'),
+    label: _reactDesc.PropTypes.string.description('The label text for an option in the search by list.'),
+    value: _reactDesc.PropTypes.string.description('The value for an option in the search by list.')
+  })).description('The array of data for the options that will be rendered in the search by field'),
+  searchByDefaultValue: _reactDesc.PropTypes.string.description('The ID of the option that should be selected by default in the search by field.'),
+  searchByWidth: _reactDesc.PropTypes.string.description('A pass-through CSS value for the search by field width attribute.')
 };
 var _default = schema;
 exports.default = _default;