draft-components 4.16.0 → 4.18.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/css/draft-components.css +15 -4
- package/dist/components/multi-select/multi-select.css +15 -4
- package/dist/components/multi-select/multi-select.d.ts +21 -13
- package/dist/components/multi-select/multi-select.js +68 -56
- package/dist/components/multi-select/multi-select.js.map +1 -1
- package/package.json +1 -1
package/css/draft-components.css
CHANGED
|
@@ -5734,6 +5734,7 @@
|
|
|
5734
5734
|
box-sizing: border-box;
|
|
5735
5735
|
display: flex;
|
|
5736
5736
|
flex-direction: column;
|
|
5737
|
+
text-align: left;
|
|
5737
5738
|
color-scheme: light;
|
|
5738
5739
|
}
|
|
5739
5740
|
|
|
@@ -5741,7 +5742,7 @@
|
|
|
5741
5742
|
position: relative;
|
|
5742
5743
|
}
|
|
5743
5744
|
|
|
5744
|
-
.dc-multi-
|
|
5745
|
+
.dc-multi-select__chips {
|
|
5745
5746
|
display: flex;
|
|
5746
5747
|
flex-wrap: wrap;
|
|
5747
5748
|
gap: 4px;
|
|
@@ -5749,17 +5750,27 @@
|
|
|
5749
5750
|
margin-top: 8px;
|
|
5750
5751
|
}
|
|
5751
5752
|
|
|
5752
|
-
.dc-multi-
|
|
5753
|
+
.dc-multi-select__chip {
|
|
5753
5754
|
padding-top: 0;
|
|
5754
5755
|
padding-right: 0;
|
|
5755
5756
|
padding-bottom: 0;
|
|
5756
5757
|
}
|
|
5757
5758
|
|
|
5758
|
-
.dc-multi-
|
|
5759
|
+
.dc-multi-select__chip-button {
|
|
5760
|
+
display: inline-flex;
|
|
5761
|
+
align-items: center;
|
|
5762
|
+
justify-content: center;
|
|
5759
5763
|
width: 28px;
|
|
5760
5764
|
height: 28px;
|
|
5761
5765
|
padding: 0;
|
|
5762
5766
|
margin-left: 4px;
|
|
5767
|
+
color: inherit;
|
|
5768
|
+
-webkit-appearance: none;
|
|
5769
|
+
-moz-appearance: none;
|
|
5770
|
+
appearance: none;
|
|
5771
|
+
cursor: default;
|
|
5772
|
+
background: none;
|
|
5773
|
+
border: none;
|
|
5763
5774
|
border-radius: inherit;
|
|
5764
5775
|
}
|
|
5765
5776
|
|
|
@@ -5872,7 +5883,7 @@
|
|
|
5872
5883
|
}
|
|
5873
5884
|
|
|
5874
5885
|
.dc-multi-select__option-label {
|
|
5875
|
-
font-weight:
|
|
5886
|
+
font-weight: 500;
|
|
5876
5887
|
}
|
|
5877
5888
|
|
|
5878
5889
|
.dc-multi-select__option-caption {
|
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
box-sizing: border-box;
|
|
43
43
|
display: flex;
|
|
44
44
|
flex-direction: column;
|
|
45
|
+
text-align: left;
|
|
45
46
|
color-scheme: light;
|
|
46
47
|
}
|
|
47
48
|
|
|
@@ -49,7 +50,7 @@
|
|
|
49
50
|
position: relative;
|
|
50
51
|
}
|
|
51
52
|
|
|
52
|
-
.dc-multi-
|
|
53
|
+
.dc-multi-select__chips {
|
|
53
54
|
display: flex;
|
|
54
55
|
flex-wrap: wrap;
|
|
55
56
|
gap: 4px;
|
|
@@ -57,17 +58,27 @@
|
|
|
57
58
|
margin-top: 8px;
|
|
58
59
|
}
|
|
59
60
|
|
|
60
|
-
.dc-multi-
|
|
61
|
+
.dc-multi-select__chip {
|
|
61
62
|
padding-top: 0;
|
|
62
63
|
padding-right: 0;
|
|
63
64
|
padding-bottom: 0;
|
|
64
65
|
}
|
|
65
66
|
|
|
66
|
-
.dc-multi-
|
|
67
|
+
.dc-multi-select__chip-button {
|
|
68
|
+
display: inline-flex;
|
|
69
|
+
align-items: center;
|
|
70
|
+
justify-content: center;
|
|
67
71
|
width: 28px;
|
|
68
72
|
height: 28px;
|
|
69
73
|
padding: 0;
|
|
70
74
|
margin-left: 4px;
|
|
75
|
+
color: inherit;
|
|
76
|
+
-webkit-appearance: none;
|
|
77
|
+
-moz-appearance: none;
|
|
78
|
+
appearance: none;
|
|
79
|
+
cursor: default;
|
|
80
|
+
background: none;
|
|
81
|
+
border: none;
|
|
71
82
|
border-radius: inherit;
|
|
72
83
|
}
|
|
73
84
|
|
|
@@ -180,7 +191,7 @@
|
|
|
180
191
|
}
|
|
181
192
|
|
|
182
193
|
.dc-multi-select__option-label {
|
|
183
|
-
font-weight:
|
|
194
|
+
font-weight: 500;
|
|
184
195
|
}
|
|
185
196
|
|
|
186
197
|
.dc-multi-select__option-caption {
|
|
@@ -1,36 +1,44 @@
|
|
|
1
1
|
import { type ReactNode, type CSSProperties } from 'react';
|
|
2
2
|
export type MultiSelectSize = 'sm' | 'md' | 'lg';
|
|
3
|
+
export type MultiSelectChipTint = 'gray' | 'green' | 'lime' | 'sky' | 'blue' | 'indigo' | 'pink' | 'red' | 'orange' | 'yellow';
|
|
4
|
+
export type MultiSelectChipStyle = 'default' | 'filled' | 'tinted';
|
|
3
5
|
export type MultiSelectItem = {
|
|
4
6
|
id: string | number;
|
|
5
7
|
};
|
|
6
|
-
export type MultiSelectItemFilter<T
|
|
7
|
-
export type
|
|
8
|
-
export type
|
|
9
|
-
export type
|
|
8
|
+
export type MultiSelectItemFilter<T> = (searchQuery: string, item: T) => boolean;
|
|
9
|
+
export type MultiSelectItemIdGetter<T, R> = (item: T) => R;
|
|
10
|
+
export type MultiSelectItemLabelGetter<T> = (item: T) => ReactNode;
|
|
11
|
+
export type MultiSelectItemCaptionGetter<T> = (item: T) => ReactNode;
|
|
12
|
+
export type MultiSelectSelectedItemIdsChangeHandler<T> = (ids: T[]) => void;
|
|
10
13
|
export type MultiSelectOpenHandler = () => void;
|
|
11
14
|
export type MultiSelectCloseHandler = () => void;
|
|
12
15
|
export type MultiSelectMessages = {
|
|
13
16
|
noData?: ReactNode;
|
|
14
17
|
notFound?: ReactNode;
|
|
15
18
|
};
|
|
16
|
-
export declare function MultiSelect<
|
|
17
|
-
id?: string;
|
|
19
|
+
export declare function MultiSelect<IdType extends string | number, ItemType = unknown>({ style, className, size, inputId: defaultInputId, inputAriaLabel, chipTint, chipStyle, placeholder, noDataMessage, notFoundMessage, itemsLoadingMessage, items, itemsError, itemsLoading, invalid, disabled, selectedItemIds: checkedItemIds, onChangeSelectedItemIds: onChangeCheckedItemIds, filterItem, getItemId, getItemLabel, getItemCaption, onOpen, onClose, }: {
|
|
18
20
|
style?: CSSProperties;
|
|
19
21
|
className?: string;
|
|
20
22
|
size?: MultiSelectSize;
|
|
21
|
-
|
|
23
|
+
inputId?: string;
|
|
24
|
+
inputAriaLabel?: string;
|
|
25
|
+
chipTint?: MultiSelectChipTint;
|
|
26
|
+
chipStyle?: MultiSelectChipStyle;
|
|
22
27
|
placeholder?: string;
|
|
23
28
|
noDataMessage?: ReactNode;
|
|
24
29
|
notFoundMessage?: ReactNode;
|
|
25
30
|
itemsLoadingMessage?: ReactNode;
|
|
26
|
-
items:
|
|
31
|
+
items: ItemType[];
|
|
27
32
|
itemsError?: ReactNode;
|
|
28
33
|
itemsLoading?: boolean;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
+
invalid?: boolean;
|
|
35
|
+
disabled?: boolean;
|
|
36
|
+
selectedItemIds: IdType[];
|
|
37
|
+
onChangeSelectedItemIds: MultiSelectSelectedItemIdsChangeHandler<IdType>;
|
|
38
|
+
filterItem: MultiSelectItemFilter<ItemType>;
|
|
39
|
+
getItemId: MultiSelectItemIdGetter<ItemType, IdType>;
|
|
40
|
+
getItemLabel: MultiSelectItemLabelGetter<ItemType>;
|
|
41
|
+
getItemCaption?: MultiSelectItemCaptionGetter<ItemType>;
|
|
34
42
|
onOpen?: MultiSelectOpenHandler;
|
|
35
43
|
onClose?: MultiSelectCloseHandler;
|
|
36
44
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,63 +1,67 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useId, useRef, useState,
|
|
2
|
+
import { useId, useRef, useState, } from 'react';
|
|
3
3
|
import { classNames } from '../../lib/react-helpers.js';
|
|
4
4
|
import { Spinner } from '../spinner/index.js';
|
|
5
5
|
import { TextInput } from '../text-input/index.js';
|
|
6
6
|
import { Tag } from '../tag/index.js';
|
|
7
|
-
import { IconButton } from '../button/index.js';
|
|
8
7
|
import { CheckIcon, ChevronDownIcon, XMarkIcon } from './icons.js';
|
|
9
8
|
import { getElementBoundingRect } from '../../lib/get-element-bounding-rect.js';
|
|
10
|
-
export function MultiSelect({
|
|
11
|
-
const id = useId();
|
|
9
|
+
export function MultiSelect({ style, className, size = 'md', inputId: defaultInputId, inputAriaLabel, chipTint = 'blue', chipStyle = 'default', placeholder, noDataMessage = 'No data', notFoundMessage = 'Not found', itemsLoadingMessage = 'Loading...', items, itemsError, itemsLoading, invalid, disabled, selectedItemIds: checkedItemIds, onChangeSelectedItemIds: onChangeCheckedItemIds, filterItem, getItemId, getItemLabel, getItemCaption = () => undefined, onOpen, onClose, }) {
|
|
12
10
|
const ref = useRef(null);
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
const
|
|
11
|
+
const id = useId();
|
|
12
|
+
const inputId = defaultInputId || `${id}-multi-select-input`;
|
|
13
|
+
const buttonId = `${id}-multi-select-button`;
|
|
14
|
+
const listBoxId = `${id}-multi-select-list-box`;
|
|
15
|
+
const getOptionId = (itemId) => `${id}-multi-select-option-${itemId}`;
|
|
17
16
|
const [search, setSearch] = useState('');
|
|
18
17
|
const [expanded, setExpanded] = useState(false);
|
|
19
|
-
const [
|
|
20
|
-
const
|
|
21
|
-
const
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
const containerEl = ref.current;
|
|
27
|
-
if (!containerEl) {
|
|
28
|
-
return;
|
|
18
|
+
const [selectedItemId, setSelectedItemId] = useState(undefined);
|
|
19
|
+
const checkedItemIdSet = new Set(checkedItemIds);
|
|
20
|
+
const checkedItems = [];
|
|
21
|
+
const filteredItems = [];
|
|
22
|
+
for (const item of items) {
|
|
23
|
+
if (filterItem(search, item)) {
|
|
24
|
+
filteredItems.push(item);
|
|
29
25
|
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
inputEl.focus();
|
|
26
|
+
if (checkedItemIdSet.has(getItemId(item))) {
|
|
27
|
+
checkedItems.push(item);
|
|
33
28
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
29
|
+
}
|
|
30
|
+
const openListBox = () => {
|
|
31
|
+
const containerEl = ref.current;
|
|
32
|
+
if (!disabled && !expanded && containerEl) {
|
|
33
|
+
const inputEl = document.getElementById(inputId);
|
|
34
|
+
if (inputEl instanceof HTMLInputElement) {
|
|
35
|
+
inputEl.focus();
|
|
36
|
+
}
|
|
37
|
+
setExpanded(true);
|
|
38
|
+
if (typeof onOpen === 'function') {
|
|
39
|
+
onOpen();
|
|
40
|
+
}
|
|
37
41
|
}
|
|
38
42
|
};
|
|
39
43
|
const closeListBox = () => {
|
|
40
44
|
setExpanded(false);
|
|
41
|
-
|
|
45
|
+
setSelectedItemId(undefined);
|
|
42
46
|
if (typeof onClose === 'function') {
|
|
43
47
|
onClose();
|
|
44
48
|
}
|
|
45
49
|
};
|
|
46
|
-
const toggleItem = (
|
|
47
|
-
const
|
|
48
|
-
if (
|
|
49
|
-
|
|
50
|
+
const toggleItem = (itemId) => {
|
|
51
|
+
const newCheckedItemIdSet = new Set(checkedItemIdSet);
|
|
52
|
+
if (newCheckedItemIdSet.has(itemId)) {
|
|
53
|
+
newCheckedItemIdSet.delete(itemId);
|
|
50
54
|
}
|
|
51
55
|
else {
|
|
52
|
-
|
|
56
|
+
newCheckedItemIdSet.add(itemId);
|
|
53
57
|
}
|
|
54
|
-
|
|
58
|
+
onChangeCheckedItemIds(Array.from(newCheckedItemIdSet));
|
|
55
59
|
};
|
|
56
|
-
const selectItemAndScrollIfNeeded = (
|
|
57
|
-
|
|
60
|
+
const selectItemAndScrollIfNeeded = (itemId) => {
|
|
61
|
+
setSelectedItemId(itemId);
|
|
58
62
|
const containerEl = ref.current;
|
|
59
|
-
if (containerEl &&
|
|
60
|
-
const optionId = getOptionId(
|
|
63
|
+
if (containerEl && itemId) {
|
|
64
|
+
const optionId = getOptionId(itemId);
|
|
61
65
|
const listBoxEl = containerEl.querySelector(`#${listBoxId}`);
|
|
62
66
|
const optionEl = containerEl.querySelector(`#${optionId}`);
|
|
63
67
|
if (listBoxEl && optionEl) {
|
|
@@ -86,7 +90,7 @@ export function MultiSelect({ id: defaultId, style, className, size = 'md', inva
|
|
|
86
90
|
};
|
|
87
91
|
const handleInputChange = (event) => {
|
|
88
92
|
setSearch(event.target.value);
|
|
89
|
-
|
|
93
|
+
setSelectedItemId(undefined);
|
|
90
94
|
openListBox();
|
|
91
95
|
};
|
|
92
96
|
const handleInputKeyDown = (event) => {
|
|
@@ -97,8 +101,8 @@ export function MultiSelect({ id: defaultId, style, className, size = 'md', inva
|
|
|
97
101
|
switch (event.key) {
|
|
98
102
|
case 'Enter':
|
|
99
103
|
case ' ':
|
|
100
|
-
if (expanded &&
|
|
101
|
-
toggleItem(
|
|
104
|
+
if (expanded && selectedItemId) {
|
|
105
|
+
toggleItem(selectedItemId);
|
|
102
106
|
handled = true;
|
|
103
107
|
}
|
|
104
108
|
break;
|
|
@@ -108,11 +112,11 @@ export function MultiSelect({ id: defaultId, style, className, size = 'md', inva
|
|
|
108
112
|
if (filteredItems.length > 0 && !event.altKey) {
|
|
109
113
|
const firstItemIndex = 0;
|
|
110
114
|
const lastItemIndex = filteredItems.length - 1;
|
|
111
|
-
const selectedItemIndex = filteredItems.findIndex((item) => item ===
|
|
115
|
+
const selectedItemIndex = filteredItems.findIndex((item) => getItemId(item) === selectedItemId);
|
|
112
116
|
const newSelectedItem = selectedItemIndex >= 0 && selectedItemIndex < lastItemIndex
|
|
113
117
|
? filteredItems[selectedItemIndex + 1]
|
|
114
118
|
: filteredItems[firstItemIndex];
|
|
115
|
-
selectItemAndScrollIfNeeded(newSelectedItem);
|
|
119
|
+
selectItemAndScrollIfNeeded(getItemId(newSelectedItem));
|
|
116
120
|
}
|
|
117
121
|
handled = true;
|
|
118
122
|
break;
|
|
@@ -122,25 +126,25 @@ export function MultiSelect({ id: defaultId, style, className, size = 'md', inva
|
|
|
122
126
|
if (filteredItems.length > 0 && !event.altKey) {
|
|
123
127
|
const firstItemIndex = 0;
|
|
124
128
|
const lastItemIndex = filteredItems.length - 1;
|
|
125
|
-
const selectedItemIndex = filteredItems.findIndex((item) => item ===
|
|
129
|
+
const selectedItemIndex = filteredItems.findIndex((item) => getItemId(item) === selectedItemId);
|
|
126
130
|
const newSelectedItem = selectedItemIndex >= 0 && selectedItemIndex > firstItemIndex
|
|
127
131
|
? filteredItems[selectedItemIndex - 1]
|
|
128
132
|
: filteredItems[lastItemIndex];
|
|
129
|
-
selectItemAndScrollIfNeeded(newSelectedItem);
|
|
133
|
+
selectItemAndScrollIfNeeded(getItemId(newSelectedItem));
|
|
130
134
|
}
|
|
131
135
|
handled = true;
|
|
132
136
|
break;
|
|
133
137
|
case 'Home':
|
|
134
|
-
if (expanded &&
|
|
138
|
+
if (expanded && selectedItemId && filteredItems.length > 0) {
|
|
135
139
|
const firstItem = filteredItems[0];
|
|
136
|
-
selectItemAndScrollIfNeeded(firstItem);
|
|
140
|
+
selectItemAndScrollIfNeeded(getItemId(firstItem));
|
|
137
141
|
handled = true;
|
|
138
142
|
}
|
|
139
143
|
break;
|
|
140
144
|
case 'End':
|
|
141
|
-
if (expanded &&
|
|
145
|
+
if (expanded && selectedItemId && filteredItems.length > 0) {
|
|
142
146
|
const lastItem = filteredItems[filteredItems.length - 1];
|
|
143
|
-
selectItemAndScrollIfNeeded(lastItem);
|
|
147
|
+
selectItemAndScrollIfNeeded(getItemId(lastItem));
|
|
144
148
|
handled = true;
|
|
145
149
|
}
|
|
146
150
|
break;
|
|
@@ -174,29 +178,37 @@ export function MultiSelect({ id: defaultId, style, className, size = 'md', inva
|
|
|
174
178
|
listBoxContent = (_jsx("li", { className: "dc-multi-select__empty-state", children: notFoundMessage }));
|
|
175
179
|
}
|
|
176
180
|
else {
|
|
177
|
-
listBoxContent = filteredItems.map((item) =>
|
|
181
|
+
listBoxContent = filteredItems.map((item) => {
|
|
182
|
+
const itemId = getItemId(item);
|
|
183
|
+
return (_jsx(MultiSelectOption, { id: getOptionId(itemId), itemId: itemId, label: getItemLabel(item), caption: getItemCaption(item), checked: checkedItemIdSet.has(itemId), selected: selectedItemId === itemId, onCheck: toggleItem, onSelect: setSelectedItemId }, itemId));
|
|
184
|
+
});
|
|
178
185
|
}
|
|
179
|
-
return (_jsxs("div", { ref: ref, style: style, className: classNames('dc-multi-select', className), "data-expanded": expanded, children: [_jsxs("div", { className: "dc-multi-select__input-container", children: [_jsx(TextInput, { id: inputId, fullWidth: true, size: size, placeholder: placeholder, type: "text", role: "combobox", "aria-expanded": expanded, "aria-controls": listBoxId, "aria-activedescendant":
|
|
186
|
+
return (_jsxs("div", { ref: ref, style: style, className: classNames('dc-multi-select', className), "data-expanded": expanded, children: [_jsxs("div", { className: "dc-multi-select__input-container", children: [_jsx(TextInput, { id: inputId, fullWidth: true, size: size, placeholder: placeholder, type: "text", role: "combobox", "aria-label": inputAriaLabel, "aria-expanded": expanded, "aria-controls": listBoxId, "aria-activedescendant": selectedItemId ? getOptionId(selectedItemId) : undefined, value: search, invalid: invalid, disabled: disabled, "data-1p-ignore": true, onClick: handleInputClick, onBlur: handleInputBlur, onChange: handleInputChange, onKeyDown: handleInputKeyDown, slotRight: () => (_jsx("button", { id: buttonId, className: "dc-multi-select__button", type: "button", "aria-expanded": expanded, "aria-controls": listBoxId, tabIndex: -1, onPointerDown: handleButtonPress, children: _jsx(ChevronDownIcon, { "data-icon": "chevron-down", width: 20, height: 20 }) })) }), listBoxContent && (_jsx("ul", { id: listBoxId, className: "dc-multi-select__list-box", role: "listbox", children: listBoxContent }))] }), checkedItems.length > 0 && (_jsx("div", { className: "dc-multi-select__chips", children: checkedItems.map((item) => {
|
|
187
|
+
const itemId = getItemId(item);
|
|
188
|
+
return (_jsx(MultiSelectChip, { itemId: itemId, tint: chipTint, style: chipStyle, onDelete: toggleItem, children: getItemLabel(item) }, itemId));
|
|
189
|
+
}) }))] }));
|
|
180
190
|
}
|
|
181
|
-
function MultiSelectOption({ id,
|
|
191
|
+
function MultiSelectOption({ id, itemId, label, caption, checked, selected, onCheck, onSelect, }) {
|
|
182
192
|
const handlePointerDown = (event) => {
|
|
183
193
|
event.preventDefault();
|
|
184
194
|
event.stopPropagation();
|
|
185
|
-
onCheck(
|
|
195
|
+
onCheck(itemId);
|
|
186
196
|
};
|
|
187
197
|
const handlePointerOver = (event) => {
|
|
188
198
|
event.preventDefault();
|
|
189
199
|
event.stopPropagation();
|
|
190
|
-
onSelect(
|
|
200
|
+
onSelect(itemId);
|
|
191
201
|
};
|
|
192
|
-
|
|
193
|
-
if (typeof getCaption === 'function') {
|
|
194
|
-
caption = getCaption(item);
|
|
195
|
-
}
|
|
196
|
-
return (_jsxs("li", { id: id, className: "dc-multi-select__option", role: "option", "aria-checked": checked, "aria-selected": selected, onPointerDown: handlePointerDown, onPointerOver: handlePointerOver, children: [_jsx("div", { className: "dc-multi-select__option-checkbox", children: _jsx(CheckIcon, { "data-icon": "check", width: 16, height: 16 }) }), _jsxs("div", { className: "dc-multi-select__option-body", children: [_jsx("b", { className: "dc-multi-select__option-label", children: getLabel(item) }), caption
|
|
202
|
+
return (_jsxs("li", { id: id, className: "dc-multi-select__option", role: "option", "aria-checked": checked, "aria-selected": selected, onPointerDown: handlePointerDown, onPointerOver: handlePointerOver, children: [_jsx("div", { className: "dc-multi-select__option-checkbox", children: _jsx(CheckIcon, { "data-icon": "check", width: 16, height: 16 }) }), _jsxs("div", { className: "dc-multi-select__option-body", children: [_jsx("span", { className: "dc-multi-select__option-label", children: label }), caption
|
|
197
203
|
? _jsx("small", { className: "dc-multi-select__option-caption", children: caption })
|
|
198
204
|
: null] })] }));
|
|
199
205
|
}
|
|
206
|
+
function MultiSelectChip({ tint, style, itemId, children, onDelete, }) {
|
|
207
|
+
const handleButtonClick = () => {
|
|
208
|
+
onDelete(itemId);
|
|
209
|
+
};
|
|
210
|
+
return (_jsxs(Tag, { className: "dc-multi-select__chip", as: "span", size: "lg", tint: tint, tagStyle: style, children: [children, _jsx("button", { className: "dc-multi-select__chip-button", type: "button", onClick: handleButtonClick, children: _jsx(XMarkIcon, { "data-icon": "x-mark", width: 18, height: 18 }) })] }));
|
|
211
|
+
}
|
|
200
212
|
function isElementVisibleInsideParent(parent, child) {
|
|
201
213
|
const parentRect = getElementBoundingRect(parent);
|
|
202
214
|
const childRect = getElementBoundingRect(child);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multi-select.js","sourceRoot":"","sources":["../../../src/components/multi-select/multi-select.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,KAAK,EACL,MAAM,EACN,QAAQ,
|
|
1
|
+
{"version":3,"file":"multi-select.js","sourceRoot":"","sources":["../../../src/components/multi-select/multi-select.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,KAAK,EACL,MAAM,EACN,QAAQ,GAQT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAsChF,MAAM,UAAU,WAAW,CAAqD,EAC9E,KAAK,EACL,SAAS,EACT,IAAI,GAAG,IAAI,EACX,OAAO,EAAE,cAAc,EACvB,cAAc,EACd,QAAQ,GAAG,MAAM,EACjB,SAAS,GAAG,SAAS,EACrB,WAAW,EACX,aAAa,GAAG,SAAS,EACzB,eAAe,GAAG,WAAW,EAC7B,mBAAmB,GAAG,YAAY,EAClC,KAAK,EACL,UAAU,EACV,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,eAAe,EAAE,cAAc,EAC/B,uBAAuB,EAAE,sBAAsB,EAC/C,UAAU,EACV,SAAS,EACT,YAAY,EACZ,cAAc,GAAG,GAAG,EAAE,CAAC,SAAS,EAChC,MAAM,EACN,OAAO,GA0BR;IACC,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,OAAO,GAAG,cAAc,IAAI,GAAG,EAAE,qBAAqB,CAAC;IAC7D,MAAM,QAAQ,GAAG,GAAG,EAAE,sBAAsB,CAAC;IAC7C,MAAM,SAAS,GAAG,GAAG,EAAE,wBAAwB,CAAC;IAChD,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,GAAG,EAAE,wBAAwB,MAAM,EAAE,CAAC;IAC9E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACzC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAEpF,MAAM,gBAAgB,GAAG,IAAI,GAAG,CAAC,cAAc,CAAC,CAAC;IACjD,MAAM,YAAY,GAAe,EAAE,CAAC;IACpC,MAAM,aAAa,GAAe,EAAE,CAAC;IACrC,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,IAAI,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC;YAC7B,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC;QACD,IAAI,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;YAC1C,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC;QAChC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,WAAW,EAAE,CAAC;YAC1C,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;YACjD,IAAI,OAAO,YAAY,gBAAgB,EAAE,CAAC;gBACxC,OAAO,CAAC,KAAK,EAAE,CAAC;YAClB,CAAC;YACD,WAAW,CAAC,IAAI,CAAC,CAAC;YAClB,IAAI,OAAO,MAAM,KAAK,UAAU,EAAE,CAAC;gBACjC,MAAM,EAAE,CAAC;YACX,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,iBAAiB,CAAC,SAAS,CAAC,CAAC;QAE7B,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE,CAAC;YAClC,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,MAAc,EAAE,EAAE;QACpC,MAAM,mBAAmB,GAAG,IAAI,GAAG,CAAC,gBAAgB,CAAC,CAAC;QACtD,IAAI,mBAAmB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACpC,mBAAmB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,mBAAmB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAClC,CAAC;QACD,sBAAsB,CAAC,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAC1D,CAAC,CAAC;IAEF,MAAM,2BAA2B,GAAG,CAAC,MAAc,EAAE,EAAE;QACrD,iBAAiB,CAAC,MAAM,CAAC,CAAC;QAC1B,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC;QAChC,IAAI,WAAW,IAAI,MAAM,EAAE,CAAC;YAC1B,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;YACrC,MAAM,SAAS,GAAG,WAAW,CAAC,aAAa,CAAC,IAAI,SAAS,EAAE,CAAgB,CAAC;YAC5E,MAAM,QAAQ,GAAG,WAAW,CAAC,aAAa,CAAC,IAAI,QAAQ,EAAE,CAAgB,CAAC;YAC1E,IAAI,SAAS,IAAI,QAAQ,EAAE,CAAC;gBAC1B,MAAM,eAAe,GAAG,4BAA4B,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;gBAC1E,IAAI,CAAC,eAAe,EAAE,CAAC;oBACrB,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;gBAChD,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAA2C,CAAC,KAAK,EAAE,EAAE;QAC1E,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,QAAQ,EAAE,CAAC;YACb,YAAY,EAAE,CAAC;QACjB,CAAC;aAAM,CAAC;YACN,WAAW,EAAE,CAAC;QAChB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAwC,GAAG,EAAE;QACjE,WAAW,EAAE,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,eAAe,GAAwC,GAAG,EAAE;QAChE,YAAY,EAAE,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAyC,CAAC,KAAK,EAAE,EAAE;QACxE,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,iBAAiB,CAAC,SAAS,CAAC,CAAC;QAC7B,WAAW,EAAE,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAA2C,CAAC,KAAK,EAAE,EAAE;QAC3E,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACpC,OAAO;QACT,CAAC;QAED,IAAI,OAAO,GAAG,KAAK,CAAC;QACpB,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAClB,KAAK,OAAO,CAAC;YACb,KAAK,GAAG;gBACN,IAAI,QAAQ,IAAI,cAAc,EAAE,CAAC;oBAC/B,UAAU,CAAC,cAAc,CAAC,CAAC;oBAC3B,OAAO,GAAG,IAAI,CAAC;gBACjB,CAAC;gBACD,MAAM;YACR,KAAK,MAAM,CAAC;YACZ,KAAK,WAAW;gBACd,WAAW,EAAE,CAAC;gBACd,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;oBAC9C,MAAM,cAAc,GAAG,CAAC,CAAC;oBACzB,MAAM,aAAa,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;oBAC/C,MAAM,iBAAiB,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,cAAc,CAAC,CAAC;oBAChG,MAAM,eAAe,GAAG,iBAAiB,IAAI,CAAC,IAAI,iBAAiB,GAAG,aAAa;wBACjF,CAAC,CAAC,aAAa,CAAC,iBAAiB,GAAG,CAAC,CAAC;wBACtC,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;oBAClC,2BAA2B,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC;gBAC1D,CAAC;gBACD,OAAO,GAAG,IAAI,CAAC;gBACf,MAAM;YACR,KAAK,IAAI,CAAC;YACV,KAAK,SAAS;gBACZ,WAAW,EAAE,CAAC;gBACd,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;oBAC9C,MAAM,cAAc,GAAG,CAAC,CAAC;oBACzB,MAAM,aAAa,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;oBAC/C,MAAM,iBAAiB,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,cAAc,CAAC,CAAC;oBAChG,MAAM,eAAe,GAAG,iBAAiB,IAAI,CAAC,IAAI,iBAAiB,GAAG,cAAc;wBAClF,CAAC,CAAC,aAAa,CAAC,iBAAiB,GAAG,CAAC,CAAC;wBACtC,CAAC,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;oBACjC,2BAA2B,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC;gBAC1D,CAAC;gBACD,OAAO,GAAG,IAAI,CAAC;gBACf,MAAM;YACR,KAAK,MAAM;gBACT,IAAI,QAAQ,IAAI,cAAc,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;oBAC3D,MAAM,SAAS,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;oBACnC,2BAA2B,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;oBAClD,OAAO,GAAG,IAAI,CAAC;gBACjB,CAAC;gBACD,MAAM;YACR,KAAK,KAAK;gBACR,IAAI,QAAQ,IAAI,cAAc,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;oBAC3D,MAAM,QAAQ,GAAG,aAAa,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;oBACzD,2BAA2B,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;oBACjD,OAAO,GAAG,IAAI,CAAC;gBACjB,CAAC;gBACD,MAAM;YACR,KAAK,KAAK,CAAC;YACX,KAAK,QAAQ;gBACX,YAAY,EAAE,CAAC;gBACf,OAAO,GAAG,IAAI,CAAC;gBACf,MAAM;YACR;gBACE,MAAM;QACV,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC,CAAC;IAEF,IAAI,cAAyB,CAAC;IAC9B,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,cAAc,GAAG,IAAI,CAAC;IACxB,CAAC;SAAM,IAAI,YAAY,EAAE,CAAC;QACxB,cAAc,GAAG,CACf,cAAI,SAAS,EAAC,mEAAmE,aAC/E,KAAC,OAAO,IAAC,IAAI,EAAC,KAAK,GAAG,OAAE,mBAAmB,IACxC,CACN,CAAC;IACJ,CAAC;SAAM,IAAI,UAAU,EAAE,CAAC;QACtB,cAAc,GAAG,CACf,aAAI,SAAS,EAAC,iEAAiE,YAC5E,UAAU,GACR,CACN,CAAC;IACJ,CAAC;SAAM,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC9B,cAAc,GAAG,CACf,aAAI,SAAS,EAAC,8BAA8B,YACzC,aAAa,GACX,CACN,CAAC;IACJ,CAAC;SAAM,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACtC,cAAc,GAAG,CACf,aAAI,SAAS,EAAC,8BAA8B,YACzC,eAAe,GACb,CACN,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,cAAc,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAC1C,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;YAC/B,OAAO,CACL,KAAC,iBAAiB,IAEhB,EAAE,EAAE,WAAW,CAAC,MAAM,CAAC,EACvB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,EACzB,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,EAC7B,OAAO,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,EACrC,QAAQ,EAAE,cAAc,KAAK,MAAM,EACnC,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,iBAAiB,IARtB,MAAM,CASX,CACH,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,mBACpC,QAAQ,aAEvB,eAAK,SAAS,EAAC,kCAAkC,aAC/C,KAAC,SAAS,IACR,EAAE,EAAE,OAAO,EACX,SAAS,EAAE,IAAI,EACf,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,UAAU,gBACH,cAAc,mBACX,QAAQ,mBACR,SAAS,2BACD,cAAc,CAAC,CAAC,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,SAAS,EAC/E,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,oBACF,IAAI,EACpB,OAAO,EAAE,gBAAgB,EACzB,MAAM,EAAE,eAAe,EACvB,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAE,kBAAkB,EAC7B,SAAS,EAAE,GAAG,EAAE,CAAC,CACf,iBACE,EAAE,EAAE,QAAQ,EACZ,SAAS,EAAC,yBAAyB,EACnC,IAAI,EAAC,QAAQ,mBACE,QAAQ,mBACR,SAAS,EACxB,QAAQ,EAAE,CAAC,CAAC,EACZ,aAAa,EAAE,iBAAiB,YAEhC,KAAC,eAAe,iBAAW,cAAc,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC5D,CACV,GACD,EACD,cAAc,IAAI,CACjB,aACE,EAAE,EAAE,SAAS,EACb,SAAS,EAAC,2BAA2B,EACrC,IAAI,EAAC,SAAS,YAEb,cAAc,GACZ,CACN,IACG,EACL,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAC1B,cAAK,SAAS,EAAC,wBAAwB,YACpC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;oBACzB,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;oBAC/B,OAAO,CACL,KAAC,eAAe,IAEd,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,UAAU,YAEnB,YAAY,CAAC,IAAI,CAAC,IANd,MAAM,CAOK,CACnB,CAAC;gBACJ,CAAC,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC;AAED,SAAS,iBAAiB,CAAiC,EACzD,EAAE,EACF,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,QAAQ,GAUT;IACC,MAAM,iBAAiB,GAAuC,CAAC,KAAK,EAAE,EAAE;QACtE,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAuC,CAAC,KAAK,EAAE,EAAE;QACtE,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,QAAQ,CAAC,MAAM,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,CACL,cACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAC,yBAAyB,EACnC,IAAI,EAAC,QAAQ,kBACC,OAAO,mBACN,QAAQ,EACvB,aAAa,EAAE,iBAAiB,EAChC,aAAa,EAAE,iBAAiB,aAEhC,cAAK,SAAS,EAAC,kCAAkC,YAC/C,KAAC,SAAS,iBAAW,OAAO,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAClD,EACN,eAAK,SAAS,EAAC,8BAA8B,aAC3C,eAAM,SAAS,EAAC,+BAA+B,YAC5C,KAAK,GACD,EACN,OAAO;wBACN,CAAC,CAAC,gBAAO,SAAS,EAAC,iCAAiC,YAAE,OAAO,GAAS;wBACtE,CAAC,CAAC,IAAI,IACJ,IACH,CACN,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAA4B,EAClD,IAAI,EACJ,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,GAOT;IACC,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,QAAQ,CAAC,MAAM,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,GAAG,IACF,SAAS,EAAC,uBAAuB,EACjC,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,KAAK,aAEd,QAAQ,EACT,iBACE,SAAS,EAAC,8BAA8B,EACxC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,iBAAiB,YAE1B,KAAC,SAAS,iBAAW,QAAQ,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAChD,IACL,CACP,CAAC;AACJ,CAAC;AAED,SAAS,4BAA4B,CAAC,MAAmB,EAAE,KAAkB;IAC3E,MAAM,UAAU,GAAG,sBAAsB,CAAC,MAAM,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAC;IAChD,OAAO,SAAS,CAAC,GAAG,IAAI,UAAU,CAAC,GAAG,IAAI,SAAS,CAAC,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AAClF,CAAC"}
|