@decisiv/ui-components 2.0.1-alpha.143 → 2.0.1-alpha.144

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SearchInputProps, SearchItem, StyledFlexProps } from './types';
-declare function SearchInput({ onSearch, value, onChange, size, disabled, ...props }: SearchInputProps): JSX.Element;
+declare function SearchInput({ onSearch, value, onChange, size, disabled, searchOn, ...props }: SearchInputProps): JSX.Element;
 declare namespace SearchInput {
     var defaultProps: {
         size: string;

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

@@ -1 +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"}
+{"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;AAkExE,iBAAwB,WAAW,CAAC,EAClC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,QAAmB,EACnB,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA0GhC;kBAlHuB,WAAW;;;;;eAAX,WAAW;AAwHnC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC"}

package/lib/components/SearchInput/index.js

@@ -55,6 +55,8 @@ var _types = require("./types");
 
 var _Input = _interopRequireDefault(require("../TextField/Input"));
 
+var _useUpdateEffect = _interopRequireDefault(require("../../utils/useUpdateEffect"));
+
 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; } }
@@ -81,23 +83,26 @@ var StyledFlex = (0, _styledComponents.default)(_Flex.default).withConfig({
 var StyledBody = (0, _styledComponents.default)(_Flex.default).withConfig({
   displayName: "SearchInput__StyledBody",
   componentId: "sc-1lgi0sd-1"
-})(["flex:1;align-items:center;"]);
+})(["flex:1;align-items:center;height:inherit;"]);
 var ButtonGroup = (0, _styledComponents.default)(_Flex.default).withConfig({
   displayName: "SearchInput__ButtonGroup",
   componentId: "sc-1lgi0sd-2"
-})(["margin-right:", ";cursor:default;"], function (_ref4) {
+})(["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), (0, _rem.default)(_spacing.default.base * 0.5));
+})(["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"
-})(["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;
+})(["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({
@@ -105,13 +110,15 @@ var StyledInput = (0, _styledComponents.default)(_Input.default).withConfig({
   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"]);
+function SearchInput(_ref7) {
+  var onSearch = _ref7.onSearch,
+      value = _ref7.value,
+      onChange = _ref7.onChange,
+      size = _ref7.size,
+      disabled = _ref7.disabled,
+      _ref7$searchOn = _ref7.searchOn,
+      searchOn = _ref7$searchOn === void 0 ? 'submit' : _ref7$searchOn,
+      props = _objectWithoutProperties(_ref7, ["onSearch", "value", "onChange", "size", "disabled", "searchOn"]);
 
   var translate = (0, _useTranslations.default)();
   var handleSearch = (0, _react.useCallback)(function () {
@@ -129,9 +136,15 @@ function SearchInput(_ref6) {
   var handleKeyPress = (0, _react.useCallback)(function (event) {
     if (event.key === 'Enter') handleSearch();
   }, [handleSearch]);
+  (0, _useUpdateEffect.default)(function () {
+    if (searchOn === 'change') {
+      handleSearch();
+    }
+  }, [searchOn, value]);
+  var renderLeftIcon = searchOn === 'change' || searchOn === 'submit' && mediumSized;
   return _react.default.createElement(StyledFlex, {
-    mediumSized: mediumSized,
     flex: 1,
+    mediumSized: mediumSized,
     "data-testid": "search-container"
   }, _react.default.createElement(_InputField.default, _extends({
     label: "",
@@ -139,8 +152,8 @@ function SearchInput(_ref6) {
     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
+    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(StyledBody, null, renderLeftIcon && _react.default.createElement(SearchIconWrapper, {
+      inputSize: size
     }, _react.default.createElement(_Search.default, {
       size: "medium",
       "data-testid": "search-icon"
@@ -160,7 +173,7 @@ function SearchInput(_ref6) {
       }, _react.default.createElement(_Times.default, {
         size: "small"
       }))
-    }, translate(undefined, 'searchInput.clear')), _react.default.createElement(_Button.default, {
+    }, translate(undefined, 'searchInput.clear')), searchOn === 'submit' && _react.default.createElement(_Button.default, {
       "aria-label": "Search",
       tabIndex: 0,
       disabled: disabled || !hasText,

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

@@ -345,4 +345,73 @@ describe('Search input', function () {
       }
     }, _callee11);
   })));
+  describe('when using the searchOn `change`', function () {
+    var searchOn = 'change';
+    it('renders the search icon when size is "small"', function () {
+      var container = render(_react.default.createElement(_.default, {
+        searchOn: "change",
+        value: "",
+        onChange: onChangeMock,
+        size: "small"
+      }));
+      expect(container.getByTestId('search-icon')).toBeInTheDocument();
+    });
+    it('renders the search icon when size is "medium"', function () {
+      var container = render(_react.default.createElement(_.default, {
+        searchOn: "change",
+        value: "",
+        onChange: onChangeMock,
+        size: "medium"
+      }));
+      expect(container.getByTestId('search-icon')).toBeInTheDocument();
+    });
+    it('does not render the submit search button', function () {
+      var _render = render(_react.default.createElement(_.default, {
+        value: "search value",
+        searchOn: searchOn,
+        onChange: onChangeMock,
+        onSearch: onSearchMock
+      })),
+          queryByRole = _render.queryByRole;
+
+      expect(queryByRole('button')).not.toBeInTheDocument();
+    });
+    it('triggers the onSearch function when changing the value of the component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
+      var container, searchInput;
+      return regeneratorRuntime.wrap(function _callee12$(_context12) {
+        while (1) {
+          switch (_context12.prev = _context12.next) {
+            case 0:
+              container = render(_react.default.createElement(_.default, {
+                searchOn: searchOn,
+                value: "Searched value",
+                onChange: onChangeMock,
+                onSearch: onSearchMock
+              }));
+              _context12.next = 3;
+              return container.findByTestId('search-container');
+
+            case 3:
+              _context12.next = 5;
+              return _context12.sent.querySelector('input');
+
+            case 5:
+              searchInput = _context12.sent;
+
+              _react2.fireEvent.change(searchInput, {
+                target: {
+                  value: 'some value'
+                }
+              });
+
+              expect(onChangeMock).toHaveBeenCalled();
+
+            case 8:
+            case "end":
+              return _context12.stop();
+          }
+        }
+      }, _callee12);
+    })));
+  });
 });

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;AAwBxD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AAkCxD,eAAe,MAAM,CAAC"}

package/lib/components/SearchInput/schema.js

@@ -12,6 +12,8 @@ var schema = (0, _reactDesc.describe)({
   displayName: 'SearchInput'
 });
 schema.propTypes = {
+  searchOn: _reactDesc.PropTypes.oneOf(['change', 'submit']).description('Set the behavior when the onSearch function is called').defaultValue('submit'),
+  debounceTimeout: _reactDesc.PropTypes.number.description('The amount of ms to wait until onSearch is called after the user has typed in the  search input').defaultValue('500'),
   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'),

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

@@ -6,8 +6,10 @@ export interface SearchItem<T> {
     value: T;
 }
 export declare type Size = 'medium' | 'small';
+export declare type SearchOn = 'submit' | 'change';
 export interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'label'>, Omit<BaseInputFieldProps, 'children' | 'onClick' | 'label'> {
     zIndex?: number;
+    searchOn?: SearchOn;
     onSearch?: (value: string) => void;
     onSelectItem?: (value: any) => void;
     onBlur?: React.FocusEventHandler;

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

@@ -1 +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"}
+{"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;AACtC,oBAAY,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE3C,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,QAAQ,CAAC;IACpB,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.143+69b8e4a",
+  "version": "2.0.1-alpha.144+5fb644e",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "69b8e4afa501944214740b4e6578349f5cfbba14"
+  "gitHead": "5fb644e81efa4fc03869b1c9814a4b51c33af164"
 }