@decisiv/ui-components 2.0.1-alpha.177 → 2.0.1-alpha.178

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, searchOn, ...props }: SearchInputProps): JSX.Element;
+declare function SearchInput({ onSearch, value, onChange, size, disabled, searchDisabled, 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;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"}
+{"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,cAAc,EACd,QAAmB,EACnB,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA0GhC;kBAnHuB,WAAW;;;;;eAAX,WAAW;AAyHnC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC"}

package/lib/components/SearchInput/index.js

@@ -116,14 +116,15 @@ function SearchInput(_ref7) {
       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", "searchOn"]);
+      props = _objectWithoutProperties(_ref7, ["onSearch", "value", "onChange", "size", "disabled", "searchDisabled", "searchOn"]);
 
   var translate = (0, _useTranslations.default)();
   var handleSearch = (0, _react.useCallback)(function () {
-    !disabled && onSearch && onSearch(value);
-  }, [disabled, onSearch, value]);
+    !disabled && !searchDisabled && onSearch && onSearch(value);
+  }, [disabled, searchDisabled, onSearch, value]);
   var mediumSized = size === 'medium';
   var hasText = !!value && !!value.length;
   var handleClear = (0, _react.useCallback)(function () {
@@ -176,7 +177,7 @@ function SearchInput(_ref7) {
     }, translate(undefined, 'searchInput.clear')), searchOn === 'submit' && _react.default.createElement(_Button.default, {
       "aria-label": "Search",
       tabIndex: 0,
-      disabled: disabled || !hasText,
+      disabled: disabled || searchDisabled || !hasText,
       text: mediumSized ? translate(undefined, 'searchInput.search') : '',
       icon: mediumSized ? undefined : _Search.default,
       size: size,

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

@@ -345,6 +345,66 @@ describe('Search input', function () {
       }
     }, _callee11);
   })));
+  it('renders only the search button as disabled when searchDisabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
+    var container, input, button;
+    return regeneratorRuntime.wrap(function _callee12$(_context12) {
+      while (1) {
+        switch (_context12.prev = _context12.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "some value",
+              searchDisabled: true
+            }));
+            input = container.getByRole('textbox');
+            button = container.getByRole('button');
+            expect(button).toBeDisabled();
+            expect(input).toBeEnabled();
+
+          case 5:
+          case "end":
+            return _context12.stop();
+        }
+      }
+    }, _callee12);
+  })));
+  it('does not calls search callback when searchDisabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
+    var container, searchInput;
+    return regeneratorRuntime.wrap(function _callee13$(_context13) {
+      while (1) {
+        switch (_context13.prev = _context13.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              searchDisabled: true,
+              value: "Searched value",
+              onChange: onChangeMock,
+              onSearch: onSearchMock,
+              size: "medium"
+            }));
+            _context13.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            _context13.next = 5;
+            return _context13.sent.querySelector('input');
+
+          case 5:
+            searchInput = _context13.sent;
+
+            _react2.fireEvent.keyPress(searchInput, {
+              code: 'Enter',
+              key: 'Enter',
+              charCode: 13
+            });
+
+            expect(onSearchMock).not.toHaveBeenCalled();
+
+          case 8:
+          case "end":
+            return _context13.stop();
+        }
+      }
+    }, _callee13);
+  })));
   describe('when using the searchOn `change`', function () {
     var searchOn = 'change';
     it('renders the search icon when size is "small"', function () {
@@ -376,11 +436,11 @@ describe('Search input', function () {
 
       expect(queryByRole('button')).not.toBeInTheDocument();
     });
-    it('triggers the onSearch function when changing the value of the component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
+    it('triggers the onSearch function when changing the value of the component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14() {
       var container, searchInput;
-      return regeneratorRuntime.wrap(function _callee12$(_context12) {
+      return regeneratorRuntime.wrap(function _callee14$(_context14) {
         while (1) {
-          switch (_context12.prev = _context12.next) {
+          switch (_context14.prev = _context14.next) {
             case 0:
               container = render(_react.default.createElement(_.default, {
                 searchOn: searchOn,
@@ -388,15 +448,15 @@ describe('Search input', function () {
                 onChange: onChangeMock,
                 onSearch: onSearchMock
               }));
-              _context12.next = 3;
+              _context14.next = 3;
               return container.findByTestId('search-container');
 
             case 3:
-              _context12.next = 5;
-              return _context12.sent.querySelector('input');
+              _context14.next = 5;
+              return _context14.sent.querySelector('input');
 
             case 5:
-              searchInput = _context12.sent;
+              searchInput = _context14.sent;
 
               _react2.fireEvent.change(searchInput, {
                 target: {
@@ -408,10 +468,10 @@ describe('Search input', function () {
 
             case 8:
             case "end":
-              return _context12.stop();
+              return _context14.stop();
           }
         }
-      }, _callee12);
+      }, _callee14);
     })));
   });
 });

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;AAkCxD,eAAe,MAAM,CAAC"}
+{"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"}

package/lib/components/SearchInput/schema.js

@@ -16,6 +16,7 @@ schema.propTypes = {
   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.'),
+  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')

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

@@ -9,6 +9,7 @@ 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;
+    searchDisabled?: boolean;
     searchOn?: SearchOn;
     onSearch?: (value: string) => void;
     onSelectItem?: (value: any) => void;

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;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"}
+{"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,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,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.177+205e39a",
+  "version": "2.0.1-alpha.178+7978735",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "205e39a7485f904df27a6656ff9f1f15eeeef354"
+  "gitHead": "797873560822df50197eb9218de314ad7ad5d4f3"
 }