@sb1/ffe-account-selector-react 100.3.0 → 100.4.0

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.
@@ -28,11 +28,11 @@ import { texts } from '../texts';
28
28
  import { AccountMultiselectOptionBody } from './AccountMultiselectOptionBody';
29
29
  export var AccountSelectorMulti = function (_a) {
30
30
  var _b;
31
- var id = _a.id, className = _a.className, _c = _a.locale, locale = _c === void 0 ? 'nb' : _c, selectedAccounts = _a.selectedAccounts, _d = _a.showBalance, showBalance = _d === void 0 ? false : _d, noMatches = _a.noMatches, accounts = _a.accounts, onChange = _a.onChange, labelledById = _a.labelledById, OptionBody = _a.optionBody, postListElement = _a.postListElement, onReset = _a.onReset, inputProps = _a.inputProps, _e = _a.formatAccountNumber, formatAccountNumber = _e === void 0 ? true : _e, ariaInvalid = _a.ariaInvalid, onOpen = _a.onOpen, onClose = _a.onClose, maxRenderedDropdownElements = _a.maxRenderedDropdownElements, rest = __rest(_a, ["id", "className", "locale", "selectedAccounts", "showBalance", "noMatches", "accounts", "onChange", "labelledById", "optionBody", "postListElement", "onReset", "inputProps", "formatAccountNumber", "ariaInvalid", "onOpen", "onClose", "maxRenderedDropdownElements"]);
31
+ var id = _a.id, className = _a.className, _c = _a.locale, locale = _c === void 0 ? 'nb' : _c, selectedAccounts = _a.selectedAccounts, _d = _a.showBalance, showBalance = _d === void 0 ? false : _d, noMatches = _a.noMatches, accounts = _a.accounts, onChange = _a.onChange, labelledById = _a.labelledById, OptionBody = _a.optionBody, postListElement = _a.postListElement, onReset = _a.onReset, inputProps = _a.inputProps, _e = _a.formatAccountNumber, formatAccountNumber = _e === void 0 ? true : _e, ariaInvalid = _a.ariaInvalid, onOpen = _a.onOpen, onClose = _a.onClose, maxRenderedDropdownElements = _a.maxRenderedDropdownElements, showNumberSelectedAfter = _a.showNumberSelectedAfter, rest = __rest(_a, ["id", "className", "locale", "selectedAccounts", "showBalance", "noMatches", "accounts", "onChange", "labelledById", "optionBody", "postListElement", "onReset", "inputProps", "formatAccountNumber", "ariaInvalid", "onOpen", "onClose", "maxRenderedDropdownElements", "showNumberSelectedAfter"]);
32
32
  var formatter = formatAccountNumber
33
33
  ? formatIncompleteAccountNumber
34
34
  : undefined;
35
- return (React.createElement(SearchableDropdownMultiSelect, { id: id, labelledById: labelledById, inputProps: inputProps, dropdownAttributes: showBalance
35
+ return (React.createElement(SearchableDropdownMultiSelect, { id: id, labelledById: labelledById, className: className, inputProps: inputProps, dropdownAttributes: showBalance
36
36
  ? ['name', 'accountNumber', 'balance']
37
37
  : ['name', 'accountNumber'], postListElement: postListElement, dropdownList: accounts, noMatch: noMatches !== null && noMatches !== void 0 ? noMatches : { text: texts[locale].noMatch }, formatter: formatter, onChange: onChange, searchAttributes: ['name', 'accountNumber'], locale: locale, optionBody: function (_a) {
38
38
  var item = _a.item, isHighlighted = _a.isHighlighted, restOptionBody = __rest(_a, ["item", "isHighlighted"]);
@@ -40,7 +40,7 @@ export var AccountSelectorMulti = function (_a) {
40
40
  return (React.createElement(OptionBody, __assign({ item: item, isHighlighted: isHighlighted }, restOptionBody)));
41
41
  }
42
42
  return (React.createElement(AccountMultiselectOptionBody, { item: item, isHighlighted: isHighlighted, locale: locale, showBalance: showBalance }));
43
- }, ariaInvalid: (_b = rest['aria-invalid']) !== null && _b !== void 0 ? _b : ariaInvalid, searchMatcher: searchMatcherIgnoringAccountNumberFormatting, selectedItems: selectedAccounts, onOpen: onOpen, onClose: onClose, maxRenderedDropdownElements: maxRenderedDropdownElements, isEqual: function (accountA, accountB) {
43
+ }, ariaInvalid: (_b = rest['aria-invalid']) !== null && _b !== void 0 ? _b : ariaInvalid, searchMatcher: searchMatcherIgnoringAccountNumberFormatting, selectedItems: selectedAccounts, onOpen: onOpen, onClose: onClose, maxRenderedDropdownElements: maxRenderedDropdownElements, showNumberSelectedAfter: showNumberSelectedAfter, isEqual: function (accountA, accountB) {
44
44
  return accountA.accountNumber === accountB.accountNumber;
45
45
  } }));
46
46
  };
@@ -34,11 +34,11 @@ var texts_1 = require("../texts");
34
34
  var AccountMultiselectOptionBody_1 = require("./AccountMultiselectOptionBody");
35
35
  var AccountSelectorMulti = function (_a) {
36
36
  var _b;
37
- var id = _a.id, className = _a.className, _c = _a.locale, locale = _c === void 0 ? 'nb' : _c, selectedAccounts = _a.selectedAccounts, _d = _a.showBalance, showBalance = _d === void 0 ? false : _d, noMatches = _a.noMatches, accounts = _a.accounts, onChange = _a.onChange, labelledById = _a.labelledById, OptionBody = _a.optionBody, postListElement = _a.postListElement, onReset = _a.onReset, inputProps = _a.inputProps, _e = _a.formatAccountNumber, formatAccountNumber = _e === void 0 ? true : _e, ariaInvalid = _a.ariaInvalid, onOpen = _a.onOpen, onClose = _a.onClose, maxRenderedDropdownElements = _a.maxRenderedDropdownElements, rest = __rest(_a, ["id", "className", "locale", "selectedAccounts", "showBalance", "noMatches", "accounts", "onChange", "labelledById", "optionBody", "postListElement", "onReset", "inputProps", "formatAccountNumber", "ariaInvalid", "onOpen", "onClose", "maxRenderedDropdownElements"]);
37
+ var id = _a.id, className = _a.className, _c = _a.locale, locale = _c === void 0 ? 'nb' : _c, selectedAccounts = _a.selectedAccounts, _d = _a.showBalance, showBalance = _d === void 0 ? false : _d, noMatches = _a.noMatches, accounts = _a.accounts, onChange = _a.onChange, labelledById = _a.labelledById, OptionBody = _a.optionBody, postListElement = _a.postListElement, onReset = _a.onReset, inputProps = _a.inputProps, _e = _a.formatAccountNumber, formatAccountNumber = _e === void 0 ? true : _e, ariaInvalid = _a.ariaInvalid, onOpen = _a.onOpen, onClose = _a.onClose, maxRenderedDropdownElements = _a.maxRenderedDropdownElements, showNumberSelectedAfter = _a.showNumberSelectedAfter, rest = __rest(_a, ["id", "className", "locale", "selectedAccounts", "showBalance", "noMatches", "accounts", "onChange", "labelledById", "optionBody", "postListElement", "onReset", "inputProps", "formatAccountNumber", "ariaInvalid", "onOpen", "onClose", "maxRenderedDropdownElements", "showNumberSelectedAfter"]);
38
38
  var formatter = formatAccountNumber
39
39
  ? format_1.formatIncompleteAccountNumber
40
40
  : undefined;
41
- return (react_1.default.createElement(ffe_searchable_dropdown_react_1.SearchableDropdownMultiSelect, { id: id, labelledById: labelledById, inputProps: inputProps, dropdownAttributes: showBalance
41
+ return (react_1.default.createElement(ffe_searchable_dropdown_react_1.SearchableDropdownMultiSelect, { id: id, labelledById: labelledById, className: className, inputProps: inputProps, dropdownAttributes: showBalance
42
42
  ? ['name', 'accountNumber', 'balance']
43
43
  : ['name', 'accountNumber'], postListElement: postListElement, dropdownList: accounts, noMatch: noMatches !== null && noMatches !== void 0 ? noMatches : { text: texts_1.texts[locale].noMatch }, formatter: formatter, onChange: onChange, searchAttributes: ['name', 'accountNumber'], locale: locale, optionBody: function (_a) {
44
44
  var item = _a.item, isHighlighted = _a.isHighlighted, restOptionBody = __rest(_a, ["item", "isHighlighted"]);
@@ -46,7 +46,7 @@ var AccountSelectorMulti = function (_a) {
46
46
  return (react_1.default.createElement(OptionBody, __assign({ item: item, isHighlighted: isHighlighted }, restOptionBody)));
47
47
  }
48
48
  return (react_1.default.createElement(AccountMultiselectOptionBody_1.AccountMultiselectOptionBody, { item: item, isHighlighted: isHighlighted, locale: locale, showBalance: showBalance }));
49
- }, ariaInvalid: (_b = rest['aria-invalid']) !== null && _b !== void 0 ? _b : ariaInvalid, searchMatcher: searchMatcherIgnoringAccountNumberFormatting_1.searchMatcherIgnoringAccountNumberFormatting, selectedItems: selectedAccounts, onOpen: onOpen, onClose: onClose, maxRenderedDropdownElements: maxRenderedDropdownElements, isEqual: function (accountA, accountB) {
49
+ }, ariaInvalid: (_b = rest['aria-invalid']) !== null && _b !== void 0 ? _b : ariaInvalid, searchMatcher: searchMatcherIgnoringAccountNumberFormatting_1.searchMatcherIgnoringAccountNumberFormatting, selectedItems: selectedAccounts, onOpen: onOpen, onClose: onClose, maxRenderedDropdownElements: maxRenderedDropdownElements, showNumberSelectedAfter: showNumberSelectedAfter, isEqual: function (accountA, accountB) {
50
50
  return accountA.accountNumber === accountB.accountNumber;
51
51
  } }));
52
52
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-account-selector-react",
3
- "version": "100.3.0",
3
+ "version": "100.4.0",
4
4
  "description": "Selector for bank accounts with autocomplete.",
5
5
  "keywords": [
6
6
  "ffe"
@@ -30,13 +30,13 @@
30
30
  "test:watch": "ffe-buildtool jest --watch"
31
31
  },
32
32
  "dependencies": {
33
- "@sb1/ffe-formatters": "^100.3.0",
34
- "@sb1/ffe-icons-react": "^100.3.0",
35
- "@sb1/ffe-searchable-dropdown-react": "^100.3.0",
33
+ "@sb1/ffe-formatters": "^100.4.0",
34
+ "@sb1/ffe-icons-react": "^100.4.0",
35
+ "@sb1/ffe-searchable-dropdown-react": "^100.4.0",
36
36
  "classnames": "^2.3.1"
37
37
  },
38
38
  "devDependencies": {
39
- "@sb1/ffe-buildtool": "^100.3.0",
39
+ "@sb1/ffe-buildtool": "^100.4.0",
40
40
  "eslint": "^9.22.0",
41
41
  "react": "^18.2.0",
42
42
  "react-dom": "^18.2.0"
@@ -47,5 +47,5 @@
47
47
  "publishConfig": {
48
48
  "access": "public"
49
49
  },
50
- "gitHead": "140f4c90e592fa75482ecc36a8f2e4a3a37cf27d"
50
+ "gitHead": "fc78d293e18c36bcf24ad640eb5ff7e1963f2262"
51
51
  }
@@ -58,5 +58,11 @@ export interface AccountSelectorMultiProps<T extends Account = Account> {
58
58
  * Use the `ffe-accent-color` class on the component or on the container of the component instead
59
59
  * [Read more in the upgrade guide](https://sparebank1.github.io/designsystem/?path=/docs/introduksjon-changelog--docs#2025---februar---semantiske-farger) */
60
60
  onColoredBg?: never;
61
+ /**
62
+ * Using this will give a text "X selected" instead of chips,
63
+ * after a certain number of selected items.
64
+ * If you always want "X selected" showing, pass in 0
65
+ */
66
+ showNumberSelectedAfter?: number;
61
67
  }
62
- export declare const AccountSelectorMulti: <T extends Account = Account>({ id, className, locale, selectedAccounts, showBalance, noMatches, accounts, onChange, labelledById, optionBody: OptionBody, postListElement, onReset, inputProps, formatAccountNumber, ariaInvalid, onOpen, onClose, maxRenderedDropdownElements, ...rest }: AccountSelectorMultiProps<T>) => React.JSX.Element;
68
+ export declare const AccountSelectorMulti: <T extends Account = Account>({ id, className, locale, selectedAccounts, showBalance, noMatches, accounts, onChange, labelledById, optionBody: OptionBody, postListElement, onReset, inputProps, formatAccountNumber, ariaInvalid, onOpen, onClose, maxRenderedDropdownElements, showNumberSelectedAfter, ...rest }: AccountSelectorMultiProps<T>) => React.JSX.Element;