@decisiv/ui-components 2.0.1-alpha.177 → 2.0.1-alpha.179
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Combobox/index.js +1 -1
- package/lib/components/SearchInput/index.d.ts +1 -1
- package/lib/components/SearchInput/index.d.ts.map +1 -1
- package/lib/components/SearchInput/index.js +5 -4
- package/lib/components/SearchInput/index.test.js +69 -9
- package/lib/components/SearchInput/schema.d.ts.map +1 -1
- package/lib/components/SearchInput/schema.js +1 -0
- package/lib/components/SearchInput/types.d.ts +1 -0
- package/lib/components/SearchInput/types.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -480,7 +480,7 @@ function Combobox(props, ref) {
|
|
|
480
480
|
return undefined;
|
|
481
481
|
}, [internalInputValue, loading, options, translate]);
|
|
482
482
|
var selectedValuesIds = selectedValues ? selectedValues.map(function (elem) {
|
|
483
|
-
return elem.id || '';
|
|
483
|
+
return elem && elem.id || '';
|
|
484
484
|
}) : undefined;
|
|
485
485
|
return _react.default.createElement(StyledInputDiv, {
|
|
486
486
|
maxWidth: maxWidth
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { SearchInputProps, SearchItem, StyledFlexProps } from './types';
|
|
3
|
-
declare function SearchInput({ onSearch, value, onChange, size, disabled, searchOn, ...props }: SearchInputProps): JSX.Element;
|
|
3
|
+
declare function SearchInput({ onSearch, value, onChange, size, disabled, searchDisabled, searchOn, ...props }: SearchInputProps): JSX.Element;
|
|
4
4
|
declare namespace SearchInput {
|
|
5
5
|
var defaultProps: {
|
|
6
6
|
size: string;
|
|
@@ -1 +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;
|
|
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,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"}
|
|
@@ -116,14 +116,15 @@ function SearchInput(_ref7) {
|
|
|
116
116
|
onChange = _ref7.onChange,
|
|
117
117
|
size = _ref7.size,
|
|
118
118
|
disabled = _ref7.disabled,
|
|
119
|
+
searchDisabled = _ref7.searchDisabled,
|
|
119
120
|
_ref7$searchOn = _ref7.searchOn,
|
|
120
121
|
searchOn = _ref7$searchOn === void 0 ? 'submit' : _ref7$searchOn,
|
|
121
|
-
props = _objectWithoutProperties(_ref7, ["onSearch", "value", "onChange", "size", "disabled", "searchOn"]);
|
|
122
|
+
props = _objectWithoutProperties(_ref7, ["onSearch", "value", "onChange", "size", "disabled", "searchDisabled", "searchOn"]);
|
|
122
123
|
|
|
123
124
|
var translate = (0, _useTranslations.default)();
|
|
124
125
|
var handleSearch = (0, _react.useCallback)(function () {
|
|
125
|
-
!disabled && onSearch && onSearch(value);
|
|
126
|
-
}, [disabled, onSearch, value]);
|
|
126
|
+
!disabled && !searchDisabled && onSearch && onSearch(value);
|
|
127
|
+
}, [disabled, searchDisabled, onSearch, value]);
|
|
127
128
|
var mediumSized = size === 'medium';
|
|
128
129
|
var hasText = !!value && !!value.length;
|
|
129
130
|
var handleClear = (0, _react.useCallback)(function () {
|
|
@@ -176,7 +177,7 @@ function SearchInput(_ref7) {
|
|
|
176
177
|
}, translate(undefined, 'searchInput.clear')), searchOn === 'submit' && _react.default.createElement(_Button.default, {
|
|
177
178
|
"aria-label": "Search",
|
|
178
179
|
tabIndex: 0,
|
|
179
|
-
disabled: disabled || !hasText,
|
|
180
|
+
disabled: disabled || searchDisabled || !hasText,
|
|
180
181
|
text: mediumSized ? translate(undefined, 'searchInput.search') : '',
|
|
181
182
|
icon: mediumSized ? undefined : _Search.default,
|
|
182
183
|
size: size,
|
|
@@ -345,6 +345,66 @@ describe('Search input', function () {
|
|
|
345
345
|
}
|
|
346
346
|
}, _callee11);
|
|
347
347
|
})));
|
|
348
|
+
it('renders only the search button as disabled when searchDisabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
|
|
349
|
+
var container, input, button;
|
|
350
|
+
return regeneratorRuntime.wrap(function _callee12$(_context12) {
|
|
351
|
+
while (1) {
|
|
352
|
+
switch (_context12.prev = _context12.next) {
|
|
353
|
+
case 0:
|
|
354
|
+
container = render(_react.default.createElement(_.default, {
|
|
355
|
+
value: "some value",
|
|
356
|
+
searchDisabled: true
|
|
357
|
+
}));
|
|
358
|
+
input = container.getByRole('textbox');
|
|
359
|
+
button = container.getByRole('button');
|
|
360
|
+
expect(button).toBeDisabled();
|
|
361
|
+
expect(input).toBeEnabled();
|
|
362
|
+
|
|
363
|
+
case 5:
|
|
364
|
+
case "end":
|
|
365
|
+
return _context12.stop();
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
}, _callee12);
|
|
369
|
+
})));
|
|
370
|
+
it('does not calls search callback when searchDisabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
|
|
371
|
+
var container, searchInput;
|
|
372
|
+
return regeneratorRuntime.wrap(function _callee13$(_context13) {
|
|
373
|
+
while (1) {
|
|
374
|
+
switch (_context13.prev = _context13.next) {
|
|
375
|
+
case 0:
|
|
376
|
+
container = render(_react.default.createElement(_.default, {
|
|
377
|
+
searchDisabled: true,
|
|
378
|
+
value: "Searched value",
|
|
379
|
+
onChange: onChangeMock,
|
|
380
|
+
onSearch: onSearchMock,
|
|
381
|
+
size: "medium"
|
|
382
|
+
}));
|
|
383
|
+
_context13.next = 3;
|
|
384
|
+
return container.findByTestId('search-container');
|
|
385
|
+
|
|
386
|
+
case 3:
|
|
387
|
+
_context13.next = 5;
|
|
388
|
+
return _context13.sent.querySelector('input');
|
|
389
|
+
|
|
390
|
+
case 5:
|
|
391
|
+
searchInput = _context13.sent;
|
|
392
|
+
|
|
393
|
+
_react2.fireEvent.keyPress(searchInput, {
|
|
394
|
+
code: 'Enter',
|
|
395
|
+
key: 'Enter',
|
|
396
|
+
charCode: 13
|
|
397
|
+
});
|
|
398
|
+
|
|
399
|
+
expect(onSearchMock).not.toHaveBeenCalled();
|
|
400
|
+
|
|
401
|
+
case 8:
|
|
402
|
+
case "end":
|
|
403
|
+
return _context13.stop();
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
}, _callee13);
|
|
407
|
+
})));
|
|
348
408
|
describe('when using the searchOn `change`', function () {
|
|
349
409
|
var searchOn = 'change';
|
|
350
410
|
it('renders the search icon when size is "small"', function () {
|
|
@@ -376,11 +436,11 @@ describe('Search input', function () {
|
|
|
376
436
|
|
|
377
437
|
expect(queryByRole('button')).not.toBeInTheDocument();
|
|
378
438
|
});
|
|
379
|
-
it('triggers the onSearch function when changing the value of the component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function
|
|
439
|
+
it('triggers the onSearch function when changing the value of the component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14() {
|
|
380
440
|
var container, searchInput;
|
|
381
|
-
return regeneratorRuntime.wrap(function
|
|
441
|
+
return regeneratorRuntime.wrap(function _callee14$(_context14) {
|
|
382
442
|
while (1) {
|
|
383
|
-
switch (
|
|
443
|
+
switch (_context14.prev = _context14.next) {
|
|
384
444
|
case 0:
|
|
385
445
|
container = render(_react.default.createElement(_.default, {
|
|
386
446
|
searchOn: searchOn,
|
|
@@ -388,15 +448,15 @@ describe('Search input', function () {
|
|
|
388
448
|
onChange: onChangeMock,
|
|
389
449
|
onSearch: onSearchMock
|
|
390
450
|
}));
|
|
391
|
-
|
|
451
|
+
_context14.next = 3;
|
|
392
452
|
return container.findByTestId('search-container');
|
|
393
453
|
|
|
394
454
|
case 3:
|
|
395
|
-
|
|
396
|
-
return
|
|
455
|
+
_context14.next = 5;
|
|
456
|
+
return _context14.sent.querySelector('input');
|
|
397
457
|
|
|
398
458
|
case 5:
|
|
399
|
-
searchInput =
|
|
459
|
+
searchInput = _context14.sent;
|
|
400
460
|
|
|
401
461
|
_react2.fireEvent.change(searchInput, {
|
|
402
462
|
target: {
|
|
@@ -408,10 +468,10 @@ describe('Search input', function () {
|
|
|
408
468
|
|
|
409
469
|
case 8:
|
|
410
470
|
case "end":
|
|
411
|
-
return
|
|
471
|
+
return _context14.stop();
|
|
412
472
|
}
|
|
413
473
|
}
|
|
414
|
-
},
|
|
474
|
+
}, _callee14);
|
|
415
475
|
})));
|
|
416
476
|
});
|
|
417
477
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;
|
|
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"}
|
|
@@ -16,6 +16,7 @@ schema.propTypes = {
|
|
|
16
16
|
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'),
|
|
17
17
|
size: _reactDesc.PropTypes.oneOf(['medium', 'small']).description('Controls the size of the search input.').defaultValue('medium'),
|
|
18
18
|
disabled: _reactDesc.PropTypes.bool.description('Boolean indicating whether the search input is disabled.'),
|
|
19
|
+
searchDisabled: _reactDesc.PropTypes.bool.description('Boolean indicating whether only the search button is disabled.'),
|
|
19
20
|
value: _reactDesc.PropTypes.string.description('A text value to be displayed on the input field'),
|
|
20
21
|
onSearch: _reactDesc.PropTypes.func.description('A callback that is invoked with the input value when the the search action is performed'),
|
|
21
22
|
onChange: _reactDesc.PropTypes.func.description('A callback that is invoked when the value of the search field changes')
|
|
@@ -9,6 +9,7 @@ export declare type Size = 'medium' | 'small';
|
|
|
9
9
|
export declare type SearchOn = 'submit' | 'change';
|
|
10
10
|
export interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'label'>, Omit<BaseInputFieldProps, 'children' | 'onClick' | 'label'> {
|
|
11
11
|
zIndex?: number;
|
|
12
|
+
searchDisabled?: boolean;
|
|
12
13
|
searchOn?: SearchOn;
|
|
13
14
|
onSearch?: (value: string) => void;
|
|
14
15
|
onSelectItem?: (value: any) => void;
|
|
@@ -1 +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"}
|
|
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,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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@decisiv/ui-components",
|
|
3
|
-
"version": "2.0.1-alpha.
|
|
3
|
+
"version": "2.0.1-alpha.179+de2059e",
|
|
4
4
|
"description": "Decisiv's design system React components",
|
|
5
5
|
"author": "Decisiv UI Development Team",
|
|
6
6
|
"license": "MIT",
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"access": "public"
|
|
72
72
|
},
|
|
73
73
|
"private": false,
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "de2059eec30eca7792501c9089b1926607af00be"
|
|
75
75
|
}
|