mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 10:51:06 +00:00
fix(multi-select): avoid cyclic dependency for Svelte 5 compatibility (#2034)
This commit is contained in:
parent
efddbbd3cc
commit
1acd713537
1 changed files with 24 additions and 22 deletions
|
@ -183,7 +183,6 @@
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
let initialSorted = false;
|
|
||||||
let highlightedIndex = -1;
|
let highlightedIndex = -1;
|
||||||
let prevChecked = [];
|
let prevChecked = [];
|
||||||
|
|
||||||
|
@ -227,18 +226,8 @@
|
||||||
highlightedIndex = index;
|
highlightedIndex = index;
|
||||||
}
|
}
|
||||||
|
|
||||||
function sort() {
|
|
||||||
return [
|
|
||||||
...(checked.length > 1 ? checked.sort(sortItem) : checked),
|
|
||||||
...unchecked.sort(sortItem),
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
afterUpdate(() => {
|
afterUpdate(() => {
|
||||||
if (checked.length !== prevChecked.length) {
|
if (checked.length !== prevChecked.length) {
|
||||||
if (selectionFeedback === "top") {
|
|
||||||
sortedItems = sort();
|
|
||||||
}
|
|
||||||
prevChecked = checked;
|
prevChecked = checked;
|
||||||
selectedIds = checked.map(({ id }) => id);
|
selectedIds = checked.map(({ id }) => id);
|
||||||
dispatch("select", {
|
dispatch("select", {
|
||||||
|
@ -249,25 +238,38 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!open) {
|
if (!open) {
|
||||||
if (!initialSorted || selectionFeedback !== "fixed") {
|
|
||||||
sortedItems = sort();
|
|
||||||
initialSorted = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
highlightedIndex = -1;
|
highlightedIndex = -1;
|
||||||
value = "";
|
value = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
items = sortedItems;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$: menuId = `menu-${id}`;
|
$: menuId = `menu-${id}`;
|
||||||
$: inline = type === "inline";
|
$: inline = type === "inline";
|
||||||
$: ariaLabel = $$props["aria-label"] || "Choose an item";
|
$: ariaLabel = $$props["aria-label"] || "Choose an item";
|
||||||
$: sortedItems = items.map((item) => ({
|
$: sortedItems = (() => {
|
||||||
...item,
|
if (selectionFeedback === "top" && selectedIds.length > 0) {
|
||||||
checked: selectedIds.includes(item.id),
|
const checkedItems = items
|
||||||
}));
|
.filter((item) => selectedIds.includes(item.id))
|
||||||
|
.map((item) => ({ ...item, checked: true }));
|
||||||
|
const uncheckedItems = items
|
||||||
|
.filter((item) => !selectedIds.includes(item.id))
|
||||||
|
.map((item) => ({ ...item, checked: false }));
|
||||||
|
|
||||||
|
return [
|
||||||
|
...(checkedItems.length > 1
|
||||||
|
? checkedItems.sort(sortItem)
|
||||||
|
: checkedItems),
|
||||||
|
...uncheckedItems.sort(sortItem),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
return items
|
||||||
|
.map((item) => ({
|
||||||
|
...item,
|
||||||
|
checked: selectedIds.includes(item.id),
|
||||||
|
}))
|
||||||
|
.sort(sortItem);
|
||||||
|
})();
|
||||||
$: checked = sortedItems.filter(({ checked }) => checked);
|
$: checked = sortedItems.filter(({ checked }) => checked);
|
||||||
$: unchecked = sortedItems.filter(({ checked }) => !checked);
|
$: unchecked = sortedItems.filter(({ checked }) => !checked);
|
||||||
$: filteredItems = sortedItems.filter((item) => filterItem(item, value));
|
$: filteredItems = sortedItems.filter((item) => filterItem(item, value));
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue