fix(multi-select): avoid cyclic dependency for Svelte 5 compatibility (#2034)

This commit is contained in:
Paweł Malinowski 2024-11-09 23:53:46 +01:00 committed by GitHub
commit 1acd713537
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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));