From ead4d54dcf00cc0fcab1ba9e6ad929f614911e68 Mon Sep 17 00:00:00 2001
From: willnationsdev <willnationsdev@gmail.com>
Date: Mon, 12 Feb 2024 21:13:54 -0600
Subject: [PATCH 1/2] Fix SelectField's icon/styles for field/option.

---
 .changeset/bright-donuts-appear.md            |  5 +++
 .../src/lib/components/SelectField.svelte     | 43 ++++++++++++++++---
 .../src/lib/components/TextField.svelte       |  3 +-
 .../lib/components/_SelectListOptions.svelte  |  3 --
 .../docs/components/SelectField/+page.svelte  | 22 ++++++++--
 5 files changed, 64 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/bright-donuts-appear.md

diff --git a/.changeset/bright-donuts-appear.md b/.changeset/bright-donuts-appear.md
new file mode 100644
index 000000000..46a84c347
--- /dev/null
+++ b/.changeset/bright-donuts-appear.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+Fix SelectField MenuOption icons no longer being passed to MenuItems. Fix SelectField `classes: { field: ... }` not being incorporated into the inner `TextField` properly. Same with `classes: { option: ... }` not being incorporated into each inner `MenuItem` option. Update SelectField docs page with colored example that differentiates icon & input color, both in the field and the menu items.
diff --git a/packages/svelte-ux/src/lib/components/SelectField.svelte b/packages/svelte-ux/src/lib/components/SelectField.svelte
index 7644b21d0..ab79a3e3d 100644
--- a/packages/svelte-ux/src/lib/components/SelectField.svelte
+++ b/packages/svelte-ux/src/lib/components/SelectField.svelte
@@ -67,14 +67,41 @@
     root?: string;
     field?: string | ComponentProps<TextField>['classes'];
     options?: string;
-    option?: string;
+    option?: string | ComponentProps<MenuItem>['classes'];
     selected?: string;
     group?: string;
     empty?: string;
   } = {};
 
   let fieldClasses: ComponentProps<TextField>['classes'];
-  $: fieldClasses = typeof classes.field === 'string' ? { root: classes.field } : classes.field;
+  $: {
+    let v: {root?: any} = {};
+    if (typeof settingsClasses?.field === 'string') {
+      v = { root: settingsClasses.field };
+    } else {
+      v = settingsClasses?.field ?? {};
+    }
+    if (typeof classes?.field === 'string') {
+      fieldClasses = { ...v, root: cls(v.root, classes.field)};
+    } else {
+      fieldClasses = { ...v, ...classes?.field ?? {} };
+    }
+  }
+
+  let optionClasses: ComponentProps<MenuItem>['classes'];
+  $: {
+    let v: {root?: any} = {};
+    if (typeof settingsClasses?.option === 'string') {
+      v = { root: settingsClasses.option };
+    } else {
+      v = settingsClasses?.option ?? {};
+    }
+    if (typeof classes?.option === 'string') {
+      optionClasses = { ...v, root: cls(v.root, classes.option)};
+    } else {
+      optionClasses = { ...v, ...classes?.option ?? {} };
+    }
+  }
 
   // Menu props
   export let placement: Placement = 'bottom-start';
@@ -425,11 +452,13 @@
     on:keypress={onKeyPress}
     actions={fieldActions}
     classes={{
+      ...fieldClasses,
       container: inlineOptions
-        ? 'border-none shadow-none hover:shadow-none group-focus-within:shadow-none'
-        : undefined,
+        ? cls('border-none shadow-none hover:shadow-none group-focus-within:shadow-none', fieldClasses?.container)
+        : fieldClasses?.container,
+      
     }}
-    class={cls('h-full', settingsClasses.field, fieldClasses)}
+    class={cls('h-full')}
     role="combobox"
     aria-expanded={open ? 'true' : 'false'}
     aria-autocomplete={!inlineOptions ? 'list' : undefined}
@@ -534,6 +563,7 @@
           <svelte:fragment slot="option" let:option let:index>
             <slot name="option" {option} {index} {selected} {value} {highlightIndex}>
               <MenuItem
+              	classes={optionClasses}
                 class={cls(
                   index === highlightIndex && '[:not(.group:hover)>&]:bg-surface-content/5',
                   option === selected && (classes.selected || 'font-semibold'),
@@ -549,6 +579,7 @@
                 role="option"
                 aria-selected={option === selected ? 'true' : 'false'}
                 aria-disabled={option?.disabled ? 'true' : 'false'}
+                icon={option.icon}
               >
                 {optionText(option)}
               </MenuItem>
@@ -594,6 +625,7 @@
         <svelte:fragment slot="option" let:option let:index>
           <slot name="option" {option} {index} {selected} {value} {highlightIndex}>
             <MenuItem
+              classes={optionClasses}
               class={cls(
                 index === highlightIndex && '[:not(.group:hover)>&]:bg-surface-content/5',
                 option === selected && (classes.selected || 'font-semibold'),
@@ -609,6 +641,7 @@
               role="option"
               aria-selected={option === selected ? 'true' : 'false'}
               aria-disabled={option?.disabled ? 'true' : 'false'}
+              icon={option.icon}
             >
               {optionText(option)}
             </MenuItem>
diff --git a/packages/svelte-ux/src/lib/components/TextField.svelte b/packages/svelte-ux/src/lib/components/TextField.svelte
index 37e0da5c6..389add034 100644
--- a/packages/svelte-ux/src/lib/components/TextField.svelte
+++ b/packages/svelte-ux/src/lib/components/TextField.svelte
@@ -70,6 +70,7 @@
     error?: string;
     prepend?: string;
     append?: string;
+    icon?: string;
   } = {};
 
   // Input props
@@ -259,7 +260,7 @@
             <slot name="prepend" />
             {#if icon}
               <span class="mr-3">
-                <Icon data={asIconData(icon)} class="text-surface-content/50" />
+                <Icon data={asIconData(icon)} class={cls("text-surface-content/50", classes.icon)} />
               </span>
             {/if}
           </div>
diff --git a/packages/svelte-ux/src/lib/components/_SelectListOptions.svelte b/packages/svelte-ux/src/lib/components/_SelectListOptions.svelte
index caeabf749..b0cf20297 100644
--- a/packages/svelte-ux/src/lib/components/_SelectListOptions.svelte
+++ b/packages/svelte-ux/src/lib/components/_SelectListOptions.svelte
@@ -24,10 +24,7 @@
 
   export let classes: {
     root?: string;
-    option?: string;
-    selected?: string;
     group?: string;
-    empty?: string;
   } = {};
 
   const settingsClasses = getComponentClasses('SelectField');
diff --git a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
index 37554ba37..4307d1e4b 100644
--- a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
@@ -15,13 +15,15 @@
   import { cls } from '$lib/utils/styles';
   import type { MenuOption } from '$lib/types';
 
-  let options: MenuOption[] = [
+  let graphicOptions: MenuOption[] = [
     { label: 'One', value: 1, icon: mdiMagnify },
     { label: 'Two', value: 2, icon: mdiPlus },
     { label: 'Three', value: 3, icon: mdiPencil },
     { label: 'Four', value: 4, icon: mdiAccount },
   ];
 
+  let options: MenuOption[] = graphicOptions.map(o => { return { ...o, icon: undefined }; });
+
   const optionsWithGroup: MenuOption[] = [
     { label: 'One', value: 1, group: 'First' },
     { label: 'Two', value: 2, group: 'First' },
@@ -185,7 +187,7 @@
 <h2>option slot with icon (field icon updates based on selected option)</h2>
 
 <Preview>
-  <SelectField {options} bind:value activeOptionIcon={true}>
+  <SelectField options={graphicOptions} bind:value activeOptionIcon={true}>
     <div slot="option" let:option let:index let:selected let:highlightIndex>
       <MenuItem
         class={cls(
@@ -194,7 +196,6 @@
           option.group ? 'px-4' : 'px-2'
         )}
         scrollIntoView={index === highlightIndex}
-        icon={{ data: option.icon, style: 'color: #0000FF;' }}
       >
         {option.label}
       </MenuItem>
@@ -371,6 +372,21 @@
   <SelectField {options} icon={mdiMagnify} />
 </Preview>
 
+<h2>Icon and options with icons (field icon updates based on selected option)</h2>
+
+<Preview>
+  <SelectField
+    options={graphicOptions}
+    bind:value
+    activeOptionIcon={true}
+    classes={{
+      field: { input: 'text-blue-600', icon: 'text-pink-300' },
+      option: { root: 'text-blue-600', icon: 'text-pink-300' },
+    }}
+    on:change={(e) => console.log('on:change', e.detail)}
+  />
+</Preview>
+
 <h2>Rounded</h2>
 
 <Preview>

From 0fbcdc1fc8c7fcd94f9cc68b3f4c483b4cedac2d Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Tue, 13 Feb 2024 07:28:09 -0500
Subject: [PATCH 2/2] Run prettier

---
 .../src/lib/components/SelectField.svelte     | 20 ++++++++++---------
 .../src/lib/components/TextField.svelte       |  5 ++++-
 .../docs/components/SelectField/+page.svelte  |  4 +++-
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/svelte-ux/src/lib/components/SelectField.svelte b/packages/svelte-ux/src/lib/components/SelectField.svelte
index ab79a3e3d..a0b5f8c68 100644
--- a/packages/svelte-ux/src/lib/components/SelectField.svelte
+++ b/packages/svelte-ux/src/lib/components/SelectField.svelte
@@ -75,31 +75,31 @@
 
   let fieldClasses: ComponentProps<TextField>['classes'];
   $: {
-    let v: {root?: any} = {};
+    let v: { root?: any } = {};
     if (typeof settingsClasses?.field === 'string') {
       v = { root: settingsClasses.field };
     } else {
       v = settingsClasses?.field ?? {};
     }
     if (typeof classes?.field === 'string') {
-      fieldClasses = { ...v, root: cls(v.root, classes.field)};
+      fieldClasses = { ...v, root: cls(v.root, classes.field) };
     } else {
-      fieldClasses = { ...v, ...classes?.field ?? {} };
+      fieldClasses = { ...v, ...(classes?.field ?? {}) };
     }
   }
 
   let optionClasses: ComponentProps<MenuItem>['classes'];
   $: {
-    let v: {root?: any} = {};
+    let v: { root?: any } = {};
     if (typeof settingsClasses?.option === 'string') {
       v = { root: settingsClasses.option };
     } else {
       v = settingsClasses?.option ?? {};
     }
     if (typeof classes?.option === 'string') {
-      optionClasses = { ...v, root: cls(v.root, classes.option)};
+      optionClasses = { ...v, root: cls(v.root, classes.option) };
     } else {
-      optionClasses = { ...v, ...classes?.option ?? {} };
+      optionClasses = { ...v, ...(classes?.option ?? {}) };
     }
   }
 
@@ -454,9 +454,11 @@
     classes={{
       ...fieldClasses,
       container: inlineOptions
-        ? cls('border-none shadow-none hover:shadow-none group-focus-within:shadow-none', fieldClasses?.container)
+        ? cls(
+            'border-none shadow-none hover:shadow-none group-focus-within:shadow-none',
+            fieldClasses?.container
+          )
         : fieldClasses?.container,
-      
     }}
     class={cls('h-full')}
     role="combobox"
@@ -563,7 +565,7 @@
           <svelte:fragment slot="option" let:option let:index>
             <slot name="option" {option} {index} {selected} {value} {highlightIndex}>
               <MenuItem
-              	classes={optionClasses}
+                classes={optionClasses}
                 class={cls(
                   index === highlightIndex && '[:not(.group:hover)>&]:bg-surface-content/5',
                   option === selected && (classes.selected || 'font-semibold'),
diff --git a/packages/svelte-ux/src/lib/components/TextField.svelte b/packages/svelte-ux/src/lib/components/TextField.svelte
index 389add034..ae48a5d52 100644
--- a/packages/svelte-ux/src/lib/components/TextField.svelte
+++ b/packages/svelte-ux/src/lib/components/TextField.svelte
@@ -260,7 +260,10 @@
             <slot name="prepend" />
             {#if icon}
               <span class="mr-3">
-                <Icon data={asIconData(icon)} class={cls("text-surface-content/50", classes.icon)} />
+                <Icon
+                  data={asIconData(icon)}
+                  class={cls('text-surface-content/50', classes.icon)}
+                />
               </span>
             {/if}
           </div>
diff --git a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
index 4307d1e4b..a46640361 100644
--- a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
@@ -22,7 +22,9 @@
     { label: 'Four', value: 4, icon: mdiAccount },
   ];
 
-  let options: MenuOption[] = graphicOptions.map(o => { return { ...o, icon: undefined }; });
+  let options: MenuOption[] = graphicOptions.map((o) => {
+    return { ...o, icon: undefined };
+  });
 
   const optionsWithGroup: MenuOption[] = [
     { label: 'One', value: 1, group: 'First' },