Pass object of classes through Select-like fields to Field instances

.changeset/friendly-squids-attack1.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+adds a function `normalizeClasses` to normalize classes when they can be a string or an object, essentially converting strings to objects

.changeset/friendly-squids-attack2.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+adds a function `clsMerge` for merging groups of classes without needing to do more complex property-by-property merging

.changeset/friendly-squids-attack3.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+passes the `classes` objects down to the `TextField` component from the `Select` and `MultiSelect` components

.changeset/friendly-squids-attack4.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+fixes a TypeError caused by a faulty ReturnType from `entries()` and removes a related `@ts-expect-error`

packages/svelte-ux/src/lib/components/MultiSelectField.svelte

@@ -11,7 +11,7 @@
   import MultiSelectOption from './MultiSelectOption.svelte';
   import TextField from './TextField.svelte';
 
-  import { cls } from '../utils/styles.js';
+  import { cls, clsMerge, normalizeClasses } from '../utils/styles.js';
   import { Logger } from '../utils/logger.js';
   import ProgressCircle from './ProgressCircle.svelte';
 
@@ -47,7 +47,7 @@
   export let classes: {
     root?: string;
     multiSelectMenu?: MultiSelectMenuProps['classes'];
-    field?: string;
+    field?: string | ComponentProps<TextField>['classes'];
     actions?: string;
   } = {};
 
@@ -154,7 +154,11 @@
     bind:inputEl
     on:focus={onFocus}
     on:change={onSearchChange}
-    class={cls('h-full', settingsClasses.field, classes.field)}
+    classes={clsMerge(
+      normalizeClasses(settingsClasses.field),
+      { root: 'h-full' },
+      normalizeClasses(classes.field)
+    )}
     {...restProps}
   >
     <slot slot="prepend" name="prepend" />

packages/svelte-ux/src/lib/components/SelectField.svelte

@@ -6,7 +6,7 @@
 
   import { Logger } from '../utils/logger.js';
   import { autoFocus, selectOnFocus } from '../actions/input.js';
-  import { cls } from '../utils/styles.js';
+  import { cls, clsMerge, normalizeClasses } from '../utils/styles.js';
 
   import Button from './Button.svelte';
   import ProgressCircle from './ProgressCircle.svelte';
@@ -427,12 +427,16 @@
     on:keydown={onKeyDown}
     on:keypress={onKeyPress}
     actions={fieldActions}
-    classes={{
-      container: inlineOptions
-        ? 'border-none shadow-none hover:shadow-none group-focus-within:shadow-none'
-        : undefined,
-    }}
-    class={cls('h-full', settingsClasses.field, fieldClasses)}
+    classes={clsMerge(
+      normalizeClasses(settingsClasses.field),
+      {
+        root: 'h-full',
+        container: inlineOptions
+          ? 'border-none shadow-none hover:shadow-none group-focus-within:shadow-none'
+          : undefined,
+      },
+      normalizeClasses(classes.field)
+    )}
     role="combobox"
     aria-expanded={open ? 'true' : 'false'}
     aria-autocomplete={!inlineOptions ? 'list' : undefined}

packages/svelte-ux/src/lib/types/typeHelpers.ts

@@ -41,10 +41,12 @@ export function keys<T extends object>(o: T) {
 export type ObjectKey = string | number | symbol;
 
 // Get entries (array of [key, value] arrays) of object (strongly-typed)
-export function entries<K extends ObjectKey, V>(o: Record<K, V>): [K, V][];
+export function entries<K extends ObjectKey, V>(
+  o: Record<K, V>
+): [`${Extract<K, string | number>}`, V][];
 export function entries<K, V>(o: Map<K, V>): [K, V][];
 // @ts-expect-error
-export function entries<K extends ObjectKey | unknown, V>(o: Record<K, V> | Map<K, V>): [K, V][] {
+export function entries<K extends ObjectKey | unknown, V>(o: Record<K, V> | Map<K, V>) {
   if (o instanceof Map) return Array.from(o.entries()) as unknown as [K, V][];
   return Object.entries(o) as unknown as [K, V][]; // TODO: Improve based on key/value pair - https://stackoverflow.com/questions/60141960/typescript-key-value-relation-preserving-object-entries-type
 }

packages/svelte-ux/src/lib/utils/styles.ts

@@ -2,6 +2,7 @@ import clsx, { type ClassValue } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { range } from 'd3-array';
 import { entries } from '../types/typeHelpers.js';
+import { mergeWith } from 'lodash-es';
 
 /**
  * Convert object to style string
@@ -11,7 +12,6 @@ export function objectToString(styleObj: { [key: string]: string }) {
     .map(([key, value]) => {
       if (value) {
         // Convert camelCase into kaboob-case (ex.  (transformOrigin => transform-origin))
-        // @ts-expect-error
         const propertyName = key.replace(/([A-Z])/g, '-$1').toLowerCase();
         return `${propertyName}: ${value};`;
       } else {
@@ -40,4 +40,17 @@ const twMerge = extendTailwindMerge({
   },
 });
 
-export const cls = (...inputs: ClassValue[]) => twMerge(clsx(...inputs));
+type ClassFalsyValues = undefined | null | false;
+type AnyClassValue = ClassValue | ClassFalsyValues;
+type AnyClassCollection = Record<string | number | symbol, AnyClassValue> | ClassFalsyValues;
+
+export const cls = (...inputs: AnyClassValue[]) => twMerge(clsx(...inputs));
+
+export const clsMerge = <T extends AnyClassCollection>(
+  ...inputs: T[]
+): Exclude<T, false | undefined> =>
+  mergeWith({}, ...inputs.filter(Boolean), (a: string, b: string) => twMerge(a, b));
+
+export const normalizeClasses = <T extends object>(classes: string | ClassFalsyValues | T): T => {
+  return classes && typeof classes === 'object' ? classes : ({ root: classes } as T);
+};