@qoretechnologies/reqore 0.74.0-pr.645.g4798615 → 0.74.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.
- package/dist/components/MultiSelect/index.d.ts +18 -69
- package/dist/components/MultiSelect/index.d.ts.map +1 -1
- package/dist/components/MultiSelect/index.js +20 -194
- package/dist/components/MultiSelect/index.js.map +1 -1
- package/dist/components/Select/index.d.ts +95 -0
- package/dist/components/Select/index.d.ts.map +1 -0
- package/dist/components/Select/index.js +243 -0
- package/dist/components/Select/index.js.map +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/docs/docs/intro.md +1 -2
- package/package.json +1 -1
- package/tests.json +1 -0
- package/dist/components/SingleSelect/index.d.ts +0 -23
- package/dist/components/SingleSelect/index.d.ts.map +0 -1
- package/dist/components/SingleSelect/index.js +0 -52
- package/dist/components/SingleSelect/index.js.map +0 -1
|
@@ -1,73 +1,22 @@
|
|
|
1
|
-
import { TSizes } from '../../constants/sizes';
|
|
2
|
-
import { IReqoreControlGroupProps } from '../ControlGroup';
|
|
3
|
-
import { IReqoreDropdownProps } from '../Dropdown';
|
|
4
|
-
import { IReqoreDropdownItem } from '../Dropdown/list';
|
|
5
|
-
import { IReqoreEffect } from '../Effect';
|
|
6
|
-
import { IReqoreInputProps } from '../Input';
|
|
7
|
-
import { IReqoreTagProps } from '../Tag';
|
|
8
|
-
export type TReqoreMultiSelectItem = Omit<IReqoreDropdownItem, 'color'> & Pick<IReqoreTagProps, 'asBadge' | 'rightIcon' | 'actions'> & {
|
|
9
|
-
isNew?: boolean;
|
|
10
|
-
};
|
|
11
1
|
/**
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
2
|
+
* Backwards compatibility for `ReqoreMultiSelect`.
|
|
3
|
+
*
|
|
4
|
+
* The component itself is now `ReqoreSelect`, which holds one value by default
|
|
5
|
+
* and many with `multi` — there is no second implementation, because the two
|
|
6
|
+
* never differed in anything but the shape of the value.
|
|
7
|
+
*
|
|
8
|
+
* This module stays so that nothing consuming the old name breaks: both
|
|
9
|
+
* `import { ReqoreMultiSelect } from '@qoretechnologies/reqore'` and the deep
|
|
10
|
+
* `'@qoretechnologies/reqore/dist/components/MultiSelect'` import that reqraft
|
|
11
|
+
* and qorus-ide use for `TReqoreMultiSelectItem` keep resolving, with the same
|
|
12
|
+
* types they always had.
|
|
15
13
|
*/
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
canCreateItems?: boolean;
|
|
24
|
-
selectedItemEffect?: IReqoreEffect;
|
|
25
|
-
selectedItemSize?: TSizes;
|
|
26
|
-
selectorProps?: Omit<IReqoreInputProps, 'value' | 'onValueChange'> & IReqoreDropdownProps;
|
|
27
|
-
openOnMount?: IReqoreDropdownProps['isDefaultOpen'];
|
|
28
|
-
enterKeySelects?: boolean;
|
|
29
|
-
disabled?: boolean;
|
|
30
|
-
showNoItemsMessage?: boolean;
|
|
31
|
-
noItemsMessageProps?: IReqoreTagProps;
|
|
32
|
-
/** Label for the tag shown when no items are selected. Defaults to `'No items selected'`. */
|
|
33
|
-
noItemsSelectedLabel?: string;
|
|
34
|
-
/** Label shown in the dropdown when the query matches no existing items. Defaults to `'No existing items found'`. */
|
|
35
|
-
noMatchingItemsLabel?: string;
|
|
36
|
-
/** Label shown in the dropdown when there are no items at all (and `canCreateItems` is true). Defaults to `'No items exist'`. */
|
|
37
|
-
noItemsAvailableLabel?: string;
|
|
38
|
-
/** Divider label preceding the user-created items section. Defaults to `'Custom Items'`. */
|
|
39
|
-
customItemsDividerLabel?: string;
|
|
40
|
-
/** Divider label preceding items that match the current query (shown when `canCreateItems` is true). Defaults to `'Items matching your query'`. */
|
|
41
|
-
matchingItemsDividerLabel?: string;
|
|
42
|
-
/**
|
|
43
|
-
* Prefix used to build the "create new" option label. Rendered as `${createItemLabelPrefix} "${query}"`.
|
|
44
|
-
* Defaults to `'Create new'`.
|
|
45
|
-
*/
|
|
46
|
-
createItemLabelPrefix?: string;
|
|
47
|
-
/** Placeholder for the search input when items cannot be created. Defaults to `'Type to search...'`. */
|
|
48
|
-
searchPlaceholder?: string;
|
|
49
|
-
/** Placeholder for the search input when `canCreateItems` is true. Defaults to `'Type to search or create an item...'`. */
|
|
50
|
-
createItemPlaceholder?: string;
|
|
51
|
-
}
|
|
52
|
-
export interface IReqoreMultiSelectProps extends IReqoreMultiSelectCommonProps {
|
|
53
|
-
value?: string[];
|
|
54
|
-
onValueChange: (value: string[]) => void;
|
|
55
|
-
}
|
|
56
|
-
/**
|
|
57
|
-
* Internal-only shape. `single` is what `ReqoreSingleSelect` sets to make the
|
|
58
|
-
* selection hold at most one value; it is deliberately not part of
|
|
59
|
-
* `IReqoreMultiSelectProps`, so a multi-select cannot be talked into it.
|
|
60
|
-
*/
|
|
61
|
-
export interface IReqoreMultiSelectBaseProps extends IReqoreMultiSelectProps {
|
|
62
|
-
single?: boolean;
|
|
63
|
-
}
|
|
64
|
-
export interface IReqoreMultiSelectItemProps extends Pick<IReqoreMultiSelectProps, 'selectedItemEffect' | 'selectedItemSize' | 'disabled'> {
|
|
65
|
-
item: TReqoreMultiSelectItem;
|
|
66
|
-
onClick?: () => void;
|
|
67
|
-
onRemoveClick?: () => void;
|
|
68
|
-
onItemClickIcon?: IReqoreTagProps['rightIcon'];
|
|
69
|
-
}
|
|
70
|
-
export declare const ReqoreMultiSelectItem: import("react").MemoExoticComponent<({ item, onRemoveClick, onClick, selectedItemEffect, selectedItemSize, onItemClickIcon, disabled, }: IReqoreMultiSelectItemProps) => import("react/jsx-runtime").JSX.Element>;
|
|
71
|
-
export declare const ReqoreMultiSelectBase: ({ value, onValueChange, onItemClick, single, canRemoveItems, canCreateItems, items, selectedItemEffect, selectedItemSize, selectorProps, openOnMount, enterKeySelects, onItemClickIcon, onItemAdded, onItemRemoved, disabled, showNoItemsMessage, noItemsMessageProps, noItemsSelectedLabel, noMatchingItemsLabel, noItemsAvailableLabel, customItemsDividerLabel, matchingItemsDividerLabel, createItemLabelPrefix, searchPlaceholder, createItemPlaceholder, ...rest }: IReqoreMultiSelectBaseProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
import { IReqoreSelectMultiProps } from '../Select';
|
|
15
|
+
export type { IReqoreSelectBaseProps as IReqoreMultiSelectBaseProps, IReqoreSelectCommonProps as IReqoreMultiSelectCommonProps, IReqoreSelectItemProps as IReqoreMultiSelectItemProps, TReqoreSelectItem as TReqoreMultiSelectItem, } from '../Select';
|
|
16
|
+
export { ReqoreSelectBase as ReqoreMultiSelectBase, ReqoreSelectItem as ReqoreMultiSelectItem } from '../Select';
|
|
17
|
+
/** The multi-value half of `IReqoreSelectProps`, minus the discriminant the
|
|
18
|
+
wrapper supplies — so the props are exactly what they were before. */
|
|
19
|
+
export type IReqoreMultiSelectProps = Omit<IReqoreSelectMultiProps, 'multi'>;
|
|
20
|
+
/** `ReqoreSelect` with `multi` pre-set: same name, same props, same value shape. */
|
|
72
21
|
export declare const ReqoreMultiSelect: (props: IReqoreMultiSelectProps) => import("react/jsx-runtime").JSX.Element;
|
|
73
22
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,uBAAuB,EAAgB,MAAM,WAAW,CAAC;AAElE,YAAY,EACV,sBAAsB,IAAI,2BAA2B,EACrD,wBAAwB,IAAI,6BAA6B,EACzD,sBAAsB,IAAI,2BAA2B,EACrD,iBAAiB,IAAI,sBAAsB,GAC5C,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,gBAAgB,IAAI,qBAAqB,EAAE,gBAAgB,IAAI,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAEjH;yEACyE;AACzE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,EAAE,OAAO,CAAC,CAAC;AAE7E,oFAAoF;AACpF,eAAO,MAAM,iBAAiB,GAAI,OAAO,uBAAuB,4CAE/D,CAAC"}
|
|
@@ -10,201 +10,27 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
25
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
26
|
-
if (ar || !(i in from)) {
|
|
27
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
28
|
-
ar[i] = from[i];
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
32
|
-
};
|
|
33
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
34
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
35
|
-
};
|
|
36
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
-
exports.ReqoreMultiSelect = exports.
|
|
14
|
+
exports.ReqoreMultiSelect = exports.ReqoreMultiSelectItem = exports.ReqoreMultiSelectBase = void 0;
|
|
38
15
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
});
|
|
58
|
-
var ReqoreMultiSelectBase = function (_a) {
|
|
59
|
-
var _b = _a.value, value = _b === void 0 ? [] : _b, onValueChange = _a.onValueChange, onItemClick = _a.onItemClick, single = _a.single, canRemoveItems = _a.canRemoveItems, canCreateItems = _a.canCreateItems, _c = _a.items, items = _c === void 0 ? [] : _c, selectedItemEffect = _a.selectedItemEffect, selectedItemSize = _a.selectedItemSize, selectorProps = _a.selectorProps, openOnMount = _a.openOnMount, enterKeySelects = _a.enterKeySelects, onItemClickIcon = _a.onItemClickIcon, onItemAdded = _a.onItemAdded, onItemRemoved = _a.onItemRemoved, disabled = _a.disabled, _d = _a.showNoItemsMessage, showNoItemsMessage = _d === void 0 ? true : _d, _e = _a.noItemsMessageProps, noItemsMessageProps = _e === void 0 ? {} : _e, _f = _a.noItemsSelectedLabel, noItemsSelectedLabel = _f === void 0 ? 'No items selected' : _f, _g = _a.noMatchingItemsLabel, noMatchingItemsLabel = _g === void 0 ? 'No existing items found' : _g, _h = _a.noItemsAvailableLabel, noItemsAvailableLabel = _h === void 0 ? 'No items exist' : _h, _j = _a.customItemsDividerLabel, customItemsDividerLabel = _j === void 0 ? 'Custom Items' : _j, _k = _a.matchingItemsDividerLabel, matchingItemsDividerLabel = _k === void 0 ? 'Items matching your query' : _k, _l = _a.createItemLabelPrefix, createItemLabelPrefix = _l === void 0 ? 'Create new' : _l, _m = _a.searchPlaceholder, searchPlaceholder = _m === void 0 ? 'Type to search...' : _m, _o = _a.createItemPlaceholder, createItemPlaceholder = _o === void 0 ? 'Type to search or create an item...' : _o, rest = __rest(_a, ["value", "onValueChange", "onItemClick", "single", "canRemoveItems", "canCreateItems", "items", "selectedItemEffect", "selectedItemSize", "selectorProps", "openOnMount", "enterKeySelects", "onItemClickIcon", "onItemAdded", "onItemRemoved", "disabled", "showNoItemsMessage", "noItemsMessageProps", "noItemsSelectedLabel", "noMatchingItemsLabel", "noItemsAvailableLabel", "customItemsDividerLabel", "matchingItemsDividerLabel", "createItemLabelPrefix", "searchPlaceholder", "createItemPlaceholder"]);
|
|
60
|
-
var _p = (0, react_1.useState)([]), createdItems = _p[0], setCreatedItems = _p[1];
|
|
61
|
-
var _q = (0, react_1.useState)(''), query = _q[0], setQuery = _q[1];
|
|
62
|
-
var popoverData = (0, react_1.useRef)(undefined);
|
|
63
|
-
var _r = (0, react_1.useState)(false), focused = _r[0], setFocused = _r[1];
|
|
64
|
-
var isSelectorDisabled = Boolean(disabled || (selectorProps === null || selectorProps === void 0 ? void 0 : selectorProps.disabled) || (!(0, lodash_1.size)(items) && !(0, lodash_1.size)(createdItems) && !canCreateItems));
|
|
65
|
-
(0, react_1.useEffect)(function () {
|
|
66
|
-
var _a, _b;
|
|
67
|
-
if (query && !((_a = popoverData.current) === null || _a === void 0 ? void 0 : _a.isOpen())) {
|
|
68
|
-
(_b = popoverData.current) === null || _b === void 0 ? void 0 : _b.open();
|
|
69
|
-
}
|
|
70
|
-
}, [query]);
|
|
71
|
-
(0, react_1.useEffect)(function () {
|
|
72
|
-
if (enterKeySelects) {
|
|
73
|
-
document.addEventListener('keydown', handleKeyDown);
|
|
74
|
-
}
|
|
75
|
-
return function () {
|
|
76
|
-
document.removeEventListener('keydown', handleKeyDown);
|
|
77
|
-
};
|
|
78
|
-
});
|
|
79
|
-
var addRemoveItem = (0, react_1.useCallback)(function (item) {
|
|
80
|
-
if (value.includes(item.value)) {
|
|
81
|
-
onValueChange(single ? [] : value.filter(function (v) { return v !== item.value; }));
|
|
82
|
-
onItemRemoved === null || onItemRemoved === void 0 ? void 0 : onItemRemoved(item.value);
|
|
83
|
-
}
|
|
84
|
-
else {
|
|
85
|
-
// A single select holds one value, so picking another replaces it
|
|
86
|
-
// rather than adding to it.
|
|
87
|
-
onValueChange(single ? [item.value] : __spreadArray(__spreadArray([], value, true), [item.value], false));
|
|
88
|
-
onItemAdded === null || onItemAdded === void 0 ? void 0 : onItemAdded(item.value);
|
|
89
|
-
}
|
|
90
|
-
}, [value, onValueChange, onItemAdded, onItemRemoved, single]);
|
|
91
|
-
var handleItemSelect = (0, react_1.useCallback)(function (item) {
|
|
92
|
-
var _a;
|
|
93
|
-
addRemoveItem(item);
|
|
94
|
-
if (item.isNew) {
|
|
95
|
-
setCreatedItems(__spreadArray(__spreadArray([], createdItems, true), [
|
|
96
|
-
{
|
|
97
|
-
value: item.value,
|
|
98
|
-
},
|
|
99
|
-
], false));
|
|
100
|
-
}
|
|
101
|
-
setQuery('');
|
|
102
|
-
// A single select holds one value, so the list has nothing left to offer
|
|
103
|
-
// once one is picked. The dropdown closes itself on a click
|
|
104
|
-
// (`multiSelect={!single}` below), but the ENTER-key path never reaches
|
|
105
|
-
// it, so close it here too.
|
|
106
|
-
if (single) {
|
|
107
|
-
(_a = popoverData.current) === null || _a === void 0 ? void 0 : _a.close();
|
|
108
|
-
}
|
|
109
|
-
}, [createdItems, value, items, addRemoveItem, single]);
|
|
110
|
-
/*
|
|
111
|
-
This code creates a list of all items that are available
|
|
112
|
-
for selection in the dropdown. It will include the items
|
|
113
|
-
that are passed in as props, as well as any items that the
|
|
114
|
-
user has created.
|
|
115
|
-
*/
|
|
116
|
-
var allItems = (0, react_1.useMemo)(function () {
|
|
117
|
-
var customItems = (0, lodash_1.size)(createdItems)
|
|
118
|
-
? __spreadArray([{ divider: true, label: customItemsDividerLabel }], createdItems, true) : [];
|
|
119
|
-
var filteredItems = __spreadArray(__spreadArray([], items, true), customItems, true).filter(function (item) {
|
|
120
|
-
var _a;
|
|
121
|
-
return query
|
|
122
|
-
? item.divider
|
|
123
|
-
? false
|
|
124
|
-
: ((_a = (item.label || item.value)) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().indexOf(query.toLowerCase())) !== -1
|
|
125
|
-
: true;
|
|
126
|
-
});
|
|
127
|
-
// Mark selected items as selected
|
|
128
|
-
filteredItems = filteredItems.map(function (item) { return (__assign(__assign({}, (0, lodash_1.omit)(item, ['actions', 'asBadge', 'rightIcon'])), { selected: value.includes(item.value) })); });
|
|
129
|
-
var nothingMatched = Boolean(query) && !(0, lodash_1.size)(filteredItems);
|
|
130
|
-
if (nothingMatched) {
|
|
131
|
-
filteredItems = [
|
|
132
|
-
{ label: noMatchingItemsLabel, readOnly: true, minimal: true, icon: 'ForbidLine' },
|
|
133
|
-
];
|
|
134
|
-
}
|
|
135
|
-
// If there is a query and there are filtered items
|
|
136
|
-
// and there is no item that exactly matches the query, add it to the list
|
|
137
|
-
if (query &&
|
|
138
|
-
!filteredItems.some(function (item) { return item.value === query; }) &&
|
|
139
|
-
canCreateItems) {
|
|
140
|
-
filteredItems = __spreadArray(__spreadArray([
|
|
141
|
-
{
|
|
142
|
-
label: "".concat(createItemLabelPrefix, " \"").concat(query, "\""),
|
|
143
|
-
value: query,
|
|
144
|
-
isNew: true,
|
|
145
|
-
icon: 'AddCircleLine',
|
|
146
|
-
minimal: true,
|
|
147
|
-
flat: false,
|
|
148
|
-
effect: {
|
|
149
|
-
gradient: {
|
|
150
|
-
colors: {
|
|
151
|
-
0: 'success',
|
|
152
|
-
100: 'success:darken:1',
|
|
153
|
-
},
|
|
154
|
-
},
|
|
155
|
-
},
|
|
156
|
-
}
|
|
157
|
-
], (nothingMatched ? [] : [{ divider: true, label: matchingItemsDividerLabel }]), true), filteredItems, true);
|
|
158
|
-
}
|
|
159
|
-
return filteredItems;
|
|
160
|
-
}, [
|
|
161
|
-
items,
|
|
162
|
-
createdItems,
|
|
163
|
-
query,
|
|
164
|
-
value,
|
|
165
|
-
customItemsDividerLabel,
|
|
166
|
-
noMatchingItemsLabel,
|
|
167
|
-
matchingItemsDividerLabel,
|
|
168
|
-
createItemLabelPrefix,
|
|
169
|
-
]);
|
|
170
|
-
var handleKeyDown = (0, react_1.useCallback)(function (e) {
|
|
171
|
-
if (e.key === 'Enter' && focused) {
|
|
172
|
-
var item = __spreadArray(__spreadArray([], items, true), createdItems, true).find(function (item) { return item.value === query; });
|
|
173
|
-
if (item) {
|
|
174
|
-
handleItemSelect(item);
|
|
175
|
-
}
|
|
176
|
-
else if (canCreateItems && query) {
|
|
177
|
-
handleItemSelect({
|
|
178
|
-
value: query,
|
|
179
|
-
isNew: true,
|
|
180
|
-
});
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
}, [items, createdItems, query, canCreateItems, focused]);
|
|
184
|
-
var getItemByValue = (0, react_1.useCallback)(function (value) {
|
|
185
|
-
var _a;
|
|
186
|
-
// A selected value with no matching item still gets a chip — without the
|
|
187
|
-
// fallback the value is held but nothing is drawn for it, which reads as
|
|
188
|
-
// "nothing is selected".
|
|
189
|
-
return (_a = __spreadArray(__spreadArray([], items, true), createdItems, true).find(function (item) { return item.value === value; })) !== null && _a !== void 0 ? _a : { value: value };
|
|
190
|
-
}, [items, createdItems, value]);
|
|
191
|
-
return ((0, jsx_runtime_1.jsxs)(ControlGroup_1.default, __assign({ vertical: true, fluid: true }, rest, { children: [(0, lodash_1.size)(value) ? ((0, jsx_runtime_1.jsx)(group_1.default, { minimal: rest.minimal, size: rest.size, children: value.map(function (v) { return ((0, jsx_runtime_1.jsx)(exports.ReqoreMultiSelectItem, { item: getItemByValue(v), onItemClickIcon: onItemClickIcon, onRemoveClick: canRemoveItems ? function () { return addRemoveItem(getItemByValue(v)); } : undefined, onClick: onItemClick
|
|
192
|
-
? function () {
|
|
193
|
-
onItemClick(getItemByValue(v));
|
|
194
|
-
}
|
|
195
|
-
: undefined, selectedItemEffect: selectedItemEffect, selectedItemSize: selectedItemSize, disabled: disabled }, v)); }) })) : showNoItemsMessage ? ((0, jsx_runtime_1.jsx)(group_1.default, { minimal: rest.minimal, size: rest.size, children: (0, jsx_runtime_1.jsx)(Tag_1.default, __assign({ color: 'transparent', icon: 'ForbidLine', label: noItemsSelectedLabel }, noItemsMessageProps)) })) : null, (0, jsx_runtime_1.jsx)(ControlGroup_1.default, { minimal: rest.minimal, flat: rest.flat, size: rest.size, children: (0, jsx_runtime_1.jsx)(__1.ReqoreDropdown, __assign({ useTargetWidth: true, handler: 'click', placement: 'auto-start', placeholder: canCreateItems ? createItemPlaceholder : searchPlaceholder }, selectorProps, { disabled: isSelectorDisabled, multiSelect: !single, onFocus: function () {
|
|
196
|
-
var _a;
|
|
197
|
-
setFocused(true);
|
|
198
|
-
if (!isSelectorDisabled) {
|
|
199
|
-
(_a = popoverData.current) === null || _a === void 0 ? void 0 : _a.open();
|
|
200
|
-
}
|
|
201
|
-
}, onBlur: function () { return setFocused(false); }, passPopoverData: function (data) { return (popoverData.current = data); }, component: __1.ReqoreInput, onClearClick: function () { return setQuery(''); }, value: query, isDefaultOpen: openOnMount, onItemSelect: handleItemSelect, onChange: function (e) { return setQuery(e.target.value); }, items: (0, lodash_1.size)(allItems)
|
|
202
|
-
? allItems
|
|
203
|
-
: canCreateItems
|
|
204
|
-
? [{ label: noItemsAvailableLabel, readOnly: true, minimal: true, icon: 'ForbidLine' }]
|
|
205
|
-
: [] })) })] })));
|
|
206
|
-
};
|
|
207
|
-
exports.ReqoreMultiSelectBase = ReqoreMultiSelectBase;
|
|
208
|
-
var ReqoreMultiSelect = function (props) { return ((0, jsx_runtime_1.jsx)(exports.ReqoreMultiSelectBase, __assign({}, props))); };
|
|
16
|
+
/**
|
|
17
|
+
* Backwards compatibility for `ReqoreMultiSelect`.
|
|
18
|
+
*
|
|
19
|
+
* The component itself is now `ReqoreSelect`, which holds one value by default
|
|
20
|
+
* and many with `multi` — there is no second implementation, because the two
|
|
21
|
+
* never differed in anything but the shape of the value.
|
|
22
|
+
*
|
|
23
|
+
* This module stays so that nothing consuming the old name breaks: both
|
|
24
|
+
* `import { ReqoreMultiSelect } from '@qoretechnologies/reqore'` and the deep
|
|
25
|
+
* `'@qoretechnologies/reqore/dist/components/MultiSelect'` import that reqraft
|
|
26
|
+
* and qorus-ide use for `TReqoreMultiSelectItem` keep resolving, with the same
|
|
27
|
+
* types they always had.
|
|
28
|
+
*/
|
|
29
|
+
var Select_1 = require("../Select");
|
|
30
|
+
var Select_2 = require("../Select");
|
|
31
|
+
Object.defineProperty(exports, "ReqoreMultiSelectBase", { enumerable: true, get: function () { return Select_2.ReqoreSelectBase; } });
|
|
32
|
+
Object.defineProperty(exports, "ReqoreMultiSelectItem", { enumerable: true, get: function () { return Select_2.ReqoreSelectItem; } });
|
|
33
|
+
/** `ReqoreSelect` with `multi` pre-set: same name, same props, same value shape. */
|
|
34
|
+
var ReqoreMultiSelect = function (props) { return ((0, jsx_runtime_1.jsx)(Select_1.ReqoreSelect, __assign({}, props, { multi: true }))); };
|
|
209
35
|
exports.ReqoreMultiSelect = ReqoreMultiSelect;
|
|
210
36
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MultiSelect/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MultiSelect/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;GAYG;AACH,oCAAkE;AAQlE,oCAAiH;AAAxG,+GAAA,gBAAgB,OAAyB;AAAE,+GAAA,gBAAgB,OAAyB;AAM7F,oFAAoF;AAC7E,IAAM,iBAAiB,GAAG,UAAC,KAA8B,IAAK,OAAA,CACnE,uBAAC,qBAAY,eAAK,KAAK,IAAE,KAAK,UAAG,CAClC,EAFoE,CAEpE,CAAC;AAFW,QAAA,iBAAiB,qBAE5B"}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { TSizes } from '../../constants/sizes';
|
|
2
|
+
import { IReqoreControlGroupProps } from '../ControlGroup';
|
|
3
|
+
import { IReqoreDropdownProps } from '../Dropdown';
|
|
4
|
+
import { IReqoreDropdownItem } from '../Dropdown/list';
|
|
5
|
+
import { IReqoreEffect } from '../Effect';
|
|
6
|
+
import { IReqoreInputProps } from '../Input';
|
|
7
|
+
import { IReqoreTagProps } from '../Tag';
|
|
8
|
+
export type TReqoreSelectItem = Omit<IReqoreDropdownItem, 'color'> & Pick<IReqoreTagProps, 'asBadge' | 'rightIcon' | 'actions'> & {
|
|
9
|
+
isNew?: boolean;
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Everything a multi- and a single-select share. The two differ only in the
|
|
13
|
+
* shape of the value they carry, so `value` / `onValueChange` are declared by
|
|
14
|
+
* each of them and everything else lives here.
|
|
15
|
+
*/
|
|
16
|
+
export interface IReqoreSelectCommonProps extends Omit<IReqoreControlGroupProps, 'children' | 'vertical' | 'stack'> {
|
|
17
|
+
items?: TReqoreSelectItem[];
|
|
18
|
+
onItemClick?: (item: IReqoreDropdownItem) => void;
|
|
19
|
+
onItemClickIcon?: IReqoreTagProps['rightIcon'];
|
|
20
|
+
onItemAdded?: (item: TReqoreSelectItem) => void;
|
|
21
|
+
onItemRemoved?: (item: TReqoreSelectItem) => void;
|
|
22
|
+
canRemoveItems?: boolean;
|
|
23
|
+
canCreateItems?: boolean;
|
|
24
|
+
selectedItemEffect?: IReqoreEffect;
|
|
25
|
+
selectedItemSize?: TSizes;
|
|
26
|
+
selectorProps?: Omit<IReqoreInputProps, 'value' | 'onValueChange'> & IReqoreDropdownProps;
|
|
27
|
+
openOnMount?: IReqoreDropdownProps['isDefaultOpen'];
|
|
28
|
+
enterKeySelects?: boolean;
|
|
29
|
+
disabled?: boolean;
|
|
30
|
+
showNoItemsMessage?: boolean;
|
|
31
|
+
noItemsMessageProps?: IReqoreTagProps;
|
|
32
|
+
/** Label for the tag shown when no items are selected. Defaults to `'No items selected'`. */
|
|
33
|
+
noItemsSelectedLabel?: string;
|
|
34
|
+
/** Label shown in the dropdown when the query matches no existing items. Defaults to `'No existing items found'`. */
|
|
35
|
+
noMatchingItemsLabel?: string;
|
|
36
|
+
/** Label shown in the dropdown when there are no items at all (and `canCreateItems` is true). Defaults to `'No items exist'`. */
|
|
37
|
+
noItemsAvailableLabel?: string;
|
|
38
|
+
/** Divider label preceding the user-created items section. Defaults to `'Custom Items'`. */
|
|
39
|
+
customItemsDividerLabel?: string;
|
|
40
|
+
/** Divider label preceding items that match the current query (shown when `canCreateItems` is true). Defaults to `'Items matching your query'`. */
|
|
41
|
+
matchingItemsDividerLabel?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Prefix used to build the "create new" option label. Rendered as `${createItemLabelPrefix} "${query}"`.
|
|
44
|
+
* Defaults to `'Create new'`.
|
|
45
|
+
*/
|
|
46
|
+
createItemLabelPrefix?: string;
|
|
47
|
+
/** Placeholder for the search input when items cannot be created. Defaults to `'Type to search...'`. */
|
|
48
|
+
searchPlaceholder?: string;
|
|
49
|
+
/** Placeholder for the search input when `canCreateItems` is true. Defaults to `'Type to search or create an item...'`. */
|
|
50
|
+
createItemPlaceholder?: string;
|
|
51
|
+
}
|
|
52
|
+
/** Holding ONE value — the default. */
|
|
53
|
+
export interface IReqoreSelectSingleProps extends IReqoreSelectCommonProps {
|
|
54
|
+
multi?: false;
|
|
55
|
+
value?: string;
|
|
56
|
+
onValueChange: (value?: string) => void;
|
|
57
|
+
}
|
|
58
|
+
/** Holding MANY values — what `ReqoreMultiSelect` has always been. */
|
|
59
|
+
export interface IReqoreSelectMultiProps extends IReqoreSelectCommonProps {
|
|
60
|
+
multi: true;
|
|
61
|
+
value?: string[];
|
|
62
|
+
onValueChange: (value: string[]) => void;
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* `multi` decides the SHAPE of the value, so these are a discriminated union
|
|
66
|
+
* rather than one interface with a loose type: a single select hands its
|
|
67
|
+
* caller `string | undefined` and a multi hands back `string[]`, and neither
|
|
68
|
+
* has to narrow what it is given.
|
|
69
|
+
*/
|
|
70
|
+
export type IReqoreSelectProps = IReqoreSelectSingleProps | IReqoreSelectMultiProps;
|
|
71
|
+
/**
|
|
72
|
+
* Internal-only shape. The base always speaks arrays; `single` is what the
|
|
73
|
+
* public component derives from `multi` so that one implementation serves both
|
|
74
|
+
* shapes.
|
|
75
|
+
*/
|
|
76
|
+
export interface IReqoreSelectBaseProps extends IReqoreSelectCommonProps {
|
|
77
|
+
value?: string[];
|
|
78
|
+
onValueChange: (value: string[]) => void;
|
|
79
|
+
single?: boolean;
|
|
80
|
+
}
|
|
81
|
+
export interface IReqoreSelectItemProps extends Pick<IReqoreSelectCommonProps, 'selectedItemEffect' | 'selectedItemSize' | 'disabled'> {
|
|
82
|
+
item: TReqoreSelectItem;
|
|
83
|
+
onClick?: () => void;
|
|
84
|
+
onRemoveClick?: () => void;
|
|
85
|
+
onItemClickIcon?: IReqoreTagProps['rightIcon'];
|
|
86
|
+
}
|
|
87
|
+
export declare const ReqoreSelectItem: import("react").MemoExoticComponent<({ item, onRemoveClick, onClick, selectedItemEffect, selectedItemSize, onItemClickIcon, disabled, }: IReqoreSelectItemProps) => import("react/jsx-runtime").JSX.Element>;
|
|
88
|
+
export declare const ReqoreSelectBase: ({ value, onValueChange, onItemClick, single, canRemoveItems, canCreateItems, items, selectedItemEffect, selectedItemSize, selectorProps, openOnMount, enterKeySelects, onItemClickIcon, onItemAdded, onItemRemoved, disabled, showNoItemsMessage, noItemsMessageProps, noItemsSelectedLabel, noMatchingItemsLabel, noItemsAvailableLabel, customItemsDividerLabel, matchingItemsDividerLabel, createItemLabelPrefix, searchPlaceholder, createItemPlaceholder, ...rest }: IReqoreSelectBaseProps) => import("react/jsx-runtime").JSX.Element;
|
|
89
|
+
/**
|
|
90
|
+
* One select. `multi` decides whether it holds one value or many — there is a
|
|
91
|
+
* single implementation, because the two only ever differed in the shape of
|
|
92
|
+
* the value and in whether picking a second item replaces the first.
|
|
93
|
+
*/
|
|
94
|
+
export declare const ReqoreSelect: ({ multi, value, onValueChange, canRemoveItems, noItemsSelectedLabel, noMatchingItemsLabel, noItemsAvailableLabel, customItemsDividerLabel, matchingItemsDividerLabel, createItemPlaceholder, ...rest }: IReqoreSelectProps) => import("react/jsx-runtime").JSX.Element;
|
|
95
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}
|