From 22f26e498d26469b38d839f28df1b2e4a58a16c9 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Tue, 9 Jul 2024 12:43:11 -0400
Subject: [PATCH] [MultiSelect(Field|Menu)] Improve actions with
 mode="immediate"

---
 .changeset/silent-geckos-listen.md            |  5 ++
 .../src/lib/components/MultiSelect.svelte     |  2 +-
 .../lib/components/MultiSelectField.svelte    |  8 ++--
 .../src/lib/components/MultiSelectMenu.svelte | 12 +++--
 .../docs/components/MultiSelect/+page.svelte  |  2 +-
 .../components/MultiSelectField/+page.svelte  | 28 +++++++++++
 .../components/MultiSelectMenu/+page.svelte   | 46 +++++++++++++++++++
 7 files changed, 93 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/silent-geckos-listen.md

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 @@
   <MultiSelectMenu
     {options}
     {value}
+    {mode}
+    {maintainOrder}
     {indeterminateSelected}
     {max}
     {placement}
@@ -237,8 +241,6 @@
       </slot>
     </svelte:fragment>
 
-    <slot name="actions" slot="actions" let:selection {selection}>
-      <div></div>
-    </slot>
+    <slot name="actions" slot="actions" let:selection {selection} />
   </MultiSelectMenu>
 </div>
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 @@
   <MultiSelect
     {options}
     {value}
+    {mode}
+    {maintainOrder}
     {indeterminateSelected}
     {max}
     {open}
@@ -69,9 +73,9 @@
       ...settingsClasses.multiSelect,
       ...classes.multiSelect,
     }}
-    on:cancel={() => close()}
+    on:cancel={() => mode !== 'immediate' && close()}
     on:cancel
-    on:change={() => close()}
+    on:change={() => mode !== 'immediate' && close()}
     on:change
   >
     <slot name="beforeOptions" slot="beforeOptions" let:selection {selection} />
@@ -95,8 +99,6 @@
       </slot>
     </svelte:fragment>
 
-    <slot name="actions" slot="actions" let:selection {selection}>
-      <div></div>
-    </slot>
+    <slot name="actions" slot="actions" let:selection {selection} />
   </MultiSelect>
 </Menu>
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 @@
   <MultiSelect {options} {value} maintainOrder on:change={(e) => (value = e.detail.value)} />
 </Preview>
 
-<h2>Immediate apply changes (no actions)</h2>
+<h2>Immediately apply changes (no actions)</h2>
 
 <Preview>
   {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 @@
   />
 </Preview>
 
+<h2>Immediately apply changes (no actions)</h2>
+
+<Preview>
+  <MultiSelectField
+    {options}
+    {value}
+    on:change={(e) => (value = e.detail.value)}
+    mode="immediate"
+    maintainOrder
+  />
+</Preview>
+
+<h2>Immediately apply changes (with custom action)</h2>
+
+<Preview>
+  <MultiSelectField
+    {options}
+    {value}
+    on:change={(e) => (value = e.detail.value)}
+    mode="immediate"
+    maintainOrder
+  >
+    <div slot="actions">
+      <Button color="primary" icon={mdiPlus}>Add item</Button>
+    </div>
+  </MultiSelectField>
+</Preview>
+
 <h2>formatSelected</h2>
 
 <Preview>
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 @@
   </span>
 </Preview>
 
+<h2>Immediately apply changes (no actions)</h2>
+<Preview>
+  <span>
+    <ToggleButton let:on={open} let:toggleOff transition={false}>
+      {value.length} selected
+      <MultiSelectMenu
+        {options}
+        {value}
+        mode="immediate"
+        maintainOrder
+        on:change={(e) => {
+          // @ts-expect-error
+          value = e.detail.value;
+        }}
+        {open}
+        on:close={toggleOff}
+      />
+    </ToggleButton>
+  </span>
+</Preview>
+
+<h2>Immediately apply changes (with custom action)</h2>
+<Preview>
+  <span>
+    <ToggleButton let:on={open} let:toggleOff transition={false}>
+      {value.length} selected
+      <MultiSelectMenu
+        {options}
+        {value}
+        mode="immediate"
+        maintainOrder
+        on:change={(e) => {
+          // @ts-expect-error
+          value = e.detail.value;
+        }}
+        {open}
+        on:close={toggleOff}
+      >
+        <div slot="actions">
+          <Button color="primary" icon={mdiPlus}>Add item</Button>
+        </div>
+      </MultiSelectMenu>
+    </ToggleButton>
+  </span>
+</Preview>
+
 <h2>actions slot</h2>
 
 <Preview>