diff --git a/.changeset/silent-geckos-listen.md b/.changeset/silent-geckos-listen.md
new file mode 100644
index 000000000..8ee1bb98f
--- /dev/null
+++ b/.changeset/silent-geckos-listen.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+[MultiSelect(Field|Menu)] Improve actions with mode="immediate"
diff --git a/packages/svelte-ux/src/lib/components/MultiSelect.svelte b/packages/svelte-ux/src/lib/components/MultiSelect.svelte
index 26101a53c..451dd7175 100644
--- a/packages/svelte-ux/src/lib/components/MultiSelect.svelte
+++ b/packages/svelte-ux/src/lib/components/MultiSelect.svelte
@@ -268,7 +268,7 @@
class={cls(
'actions',
'flex items-center justify-end',
- mode === 'actions' && 'border-t border-surface-content/10 pt-2',
+ '[&:not(:has(>:first-child))]:hidden border-t border-surface-content/10 pt-2',
settingsClasses.actions,
classes.actions
)}
diff --git a/packages/svelte-ux/src/lib/components/MultiSelectField.svelte b/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
index 0853900e0..28bc4e010 100644
--- a/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
+++ b/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
@@ -22,6 +22,8 @@
// MultiSelectMenu props
export let options: MultiSelectMenuProps['options'];
export let value: MultiSelectMenuProps['value'];
+ export let mode: MultiSelectMenuProps['mode'] | undefined = undefined;
+ export let maintainOrder: MultiSelectMenuProps['maintainOrder'] | undefined = undefined;
export let indeterminateSelected: typeof value = [];
/** Maximum number of options that can be selected */
export let max: number | undefined = undefined;
@@ -203,6 +205,8 @@
-
-
-
+
diff --git a/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte b/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte
index c8bb22e64..c0664cfdd 100644
--- a/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte
+++ b/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte
@@ -13,6 +13,8 @@
export let options: MultiSelectProps['options'];
export let value: MultiSelectProps['value'];
+ export let mode: MultiSelectProps['mode'] | undefined = undefined;
+ export let maintainOrder: MultiSelectProps['maintainOrder'] | undefined = undefined;
export let indeterminateSelected: typeof value = [];
export let open = false;
export let duration = 200;
@@ -53,6 +55,8 @@
close()}
+ on:cancel={() => mode !== 'immediate' && close()}
on:cancel
- on:change={() => close()}
+ on:change={() => mode !== 'immediate' && close()}
on:change
>
@@ -95,8 +99,6 @@
-
-
-
+
diff --git a/packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.svelte b/packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.svelte
index 095b6f947..1f5c3ac1e 100644
--- a/packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.svelte
@@ -42,7 +42,7 @@
(value = e.detail.value)} />
-Immediate apply changes (no actions)
+Immediately apply changes (no actions)
{value.length} selected
diff --git a/packages/svelte-ux/src/routes/docs/components/MultiSelectField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/MultiSelectField/+page.svelte
index 313ea6001..e9db4f1a8 100644
--- a/packages/svelte-ux/src/routes/docs/components/MultiSelectField/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/MultiSelectField/+page.svelte
@@ -79,6 +79,34 @@
/>
+Immediately apply changes (no actions)
+
+
+ (value = e.detail.value)}
+ mode="immediate"
+ maintainOrder
+ />
+
+
+Immediately apply changes (with custom action)
+
+
+ (value = e.detail.value)}
+ mode="immediate"
+ maintainOrder
+ >
+
+
+
+
+
+
formatSelected
diff --git a/packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.svelte b/packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.svelte
index 680b4aff9..a95809ad7 100644
--- a/packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.svelte
@@ -129,6 +129,52 @@
+Immediately apply changes (no actions)
+
+
+
+ {value.length} selected
+ {
+ // @ts-expect-error
+ value = e.detail.value;
+ }}
+ {open}
+ on:close={toggleOff}
+ />
+
+
+
+
+Immediately apply changes (with custom action)
+
+
+
+ {value.length} selected
+ {
+ // @ts-expect-error
+ value = e.detail.value;
+ }}
+ {open}
+ on:close={toggleOff}
+ >
+
+
+
+
+
+
+
+
actions slot