@placeholderco/placeholder-ui 1.0.12 → 2.1.0

package/dist/form/SelectMulti.svelte

@@ -1,104 +1,157 @@
 <script lang="ts">
-	import { clickOutside } from "../actions/ClickOutside.js";
-	import type { NotifyModel } from "../models/NotifyModel.js";
+	import { clickOutside } from '../util/ClickOutside.js';
 	import type {
 		ComboBoxGroup,
 		ComboBoxItem,
 		FetchFunctionType,
 		RetrieveLabelFunctionType,
-		SearchFunctionType,
-	} from "../models/ComboBoxItem.js";
-	import ComboBoxMulti from "./ComboBoxMulti.svelte";
-	import FormGroup from "./FormGroup.svelte";
-	import Icon from "../icon/Icon.svelte";
-	import Loader from "../ui/Loader.svelte";
-	import { useDialogEvents } from "../ui/DialogEvents.svelte.js";
-	import selectorSvg from "../icon/selector.svg?raw";
-	import Textbox from "./Textbox.svelte";
-	import Badge from "../ui/Badge.svelte";
-	import ActionIcon from "../ui/ActionIcon.svelte";
-	import { iconX } from "../icon/index.js";
-	import { onMount, tick, type Snippet } from "svelte";
-
-	interface Props {
-		/** HTML name attribute for the select */
+		SearchFunctionType
+	} from '../models/ComboBoxItem.js';
+	import { ComboBoxMultiCore } from './comboBoxCore.svelte.js';
+	import ComboBoxMulti from './ComboBoxMulti.svelte';
+	import FormGroup from './FormGroup.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import Loader from '../ui/Loader.svelte';
+	import { useDialogEvents } from '../ui/DialogEvents.svelte.js';
+	import selectorSvg from '../icon/selector.svg?raw';
+	import Textbox from './Textbox.svelte';
+	import Badge from '../ui/Badge.svelte';
+	import ActionIcon from '../ui/ActionIcon.svelte';
+	import { iconX } from '../icon/index.js';
+	import { onMount, tick, type Snippet } from 'svelte';
+
+	const autoName = `selectmulti-${crypto.randomUUID()}`;
+
+	export interface SelectMultiProps {
+		/** HTML name attribute for the select (falls back to label, then auto-generated) */
 		name?: string;
+		/** Label text displayed above the select */
 		label?: string;
+		/** Array of selected values (bindable) */
 		values?: string[];
+		/**
+		 * Array of full selected item objects (bindable). Can be passed initially to preset
+		 * the selection with known labels — no `values` or retrieveLabelFunction needed.
+		 */
 		rawValues?: ComboBoxItem[];
+		/** Placeholder text when no values are selected */
 		placeholder?: string;
+		/** CSS classes for the select element */
 		class?: string;
+		/** CSS classes for the container element */
 		containerClass?: string;
+		/** Disable the select */
 		disabled?: boolean;
+		/** Mark field as required (shows asterisk) */
 		required?: boolean;
+		/** Show error state styling */
 		showError?: boolean;
+		/** Error message to display */
 		errorText?: string;
-		autofocus?: boolean; // will also cause dialog autofocus on first open only
-		autofocusDialog?: boolean; // will cause autofocus on every open, not just the first time
+		/** Auto-focus on mount (first dialog open only) */
+		autofocus?: boolean;
+		/** Auto-focus on every dialog open */
+		autofocusDialog?: boolean;
+		/** Enable search/filter within options */
 		allowSearch?: boolean;
-		showNoResultsMessage?: boolean;
+		/** Hide "no results" message when search finds nothing */
+		hideNoResults?: boolean;
+		/** Close dropdown after selecting an option */
 		closeOnSelection?: boolean;
+		/** Text shown while loading options */
 		loadingText?: string;
+		/** Flat list of selectable options */
 		options?: ComboBoxItem[];
+		/** Options organized into groups */
 		groupedOptions?: ComboBoxGroup[];
-		tooltipLocation?: "top" | "bottom" | "left" | "right";
+		/** Position of the tooltip */
+		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+		/** Async function to fetch options */
 		fetchFunction?: FetchFunctionType | null;
+		/** Async function to search/filter options */
 		searchFunction?: SearchFunctionType | null;
+		/** Async function to retrieve labels for values */
 		retrieveLabelFunction?: RetrieveLabelFunctionType | null;
+		/** Rich tooltip content using a Svelte snippet */
 		tooltipContent?: Snippet;
+		/** Simple tooltip text */
 		tooltipText?: string;
+		/** Callback when selection changes (returns value strings) */
 		onchange?: (e: string[]) => void;
+		/** Callback when selection changes (returns full item objects) */
 		onchangeRaw?: (e: ComboBoxItem[]) => void;
 	}
 
 	let {
 		name,
-		label = "",
+		label = '',
 		values = $bindable([]),
 		rawValues = $bindable([]),
-		placeholder = "\u00a0", // non-breaking space to prevent the height collapsing
-		class: classes = "",
-		containerClass = "",
+		placeholder = '\u00a0', // non-breaking space to prevent the height collapsing
+		class: classes = '',
+		containerClass = '',
 		disabled = false,
 		required = false,
 		showError = false,
-		errorText = "",
+		errorText = '',
 		autofocus = false,
 		autofocusDialog = false,
 		allowSearch = false,
-		showNoResultsMessage = true,
+		hideNoResults = false,
 		closeOnSelection = false,
-		loadingText = "",
+		loadingText = '',
 		options = [],
 		groupedOptions = [],
-		tooltipLocation = "top",
+		tooltipLocation = 'top',
 		fetchFunction = null,
 		searchFunction = null,
 		retrieveLabelFunction = null,
 		tooltipContent,
 		tooltipText,
 		onchange,
-		onchangeRaw,
-	}: Props = $props();
+		onchangeRaw
+	}: SelectMultiProps = $props();
+
+	let resolvedName = $derived((name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_'));
+	let computedAllowSearch = $derived(searchFunction ? true : allowSearch);
 
 	let internalValues: string[] = $state([]);
-	let filterString = $state("");
-	let preloading = $state(false);
-	let searching = $state(false);
-	let timeout: number;
+	let filterString = $state('');
 
-	let allGroups: ComboBoxGroup[] = $state([]);
-	let filteredGroups: ComboBoxGroup[] = $state([]);
+	if (values === null || values === undefined) values = [];
+	if (rawValues === null || rawValues === undefined) rawValues = [];
+	// Callers may preset the selection by passing only rawValues — adopt their values
+	if (values.length === 0 && rawValues.length > 0) values = rawValues.map((r) => r.value);
+
+	const core = new ComboBoxMultiCore({
+		getOptions: () => options,
+		getGroupedOptions: () => groupedOptions,
+		getFetchFunction: () => fetchFunction,
+		getSearchFunction: () => searchFunction,
+		getRetrieveLabelFunction: () => retrieveLabelFunction,
+		getValues: () => values,
+		setValues: (v) => (values = v),
+		setRawValues: (r) => (rawValues = r),
+		initialRawValues: [...rawValues],
+		clearUnknownStatic: true,
+		onValuesCleared: () => {
+			internalValues = [...values];
+			onchange?.(values);
+			onchangeRaw?.(rawValues);
+		},
+		onRawValuesResolved: (raw) => onchangeRaw?.(raw),
+		// Re-apply the active filter so a mid-search options swap doesn't drop results
+		onOptionsChanged: () => {
+			if (filterString) onFilterChange(filterString);
+		}
+	});
 
 	let open = $state(false);
 	let hideCombobox = $state(false);
 
-	if (values === null || values === undefined) values = [];
-
 	let isEmpty: boolean = $derived(rawValues?.length === 0);
 
 	onMount(() => {
-		initOptions(options);
 		if (autofocus) {
 			tick().then(() => {
 				focus();
@@ -122,7 +175,7 @@
 					focus();
 				}, 150);
 			}
-		},
+		}
 	});
 
 	function focus() {
@@ -130,173 +183,31 @@
 		tick().then(() => textboxElement?.focus());
 	}
 
-	let canReloadValues = false;
-
 	$effect(() => {
 		const currentValues = values || [];
 		const currentInternalValues = internalValues || [];
 
 		const arraysAreDifferent =
 			currentValues.length !== currentInternalValues.length ||
-			currentValues.some(
-				(value, index) => value !== currentInternalValues[index],
-			);
+			currentValues.some((value, index) => value !== currentInternalValues[index]);
 
 		if (arraysAreDifferent) {
 			internalValues = [...currentValues];
-
-			// Reset all options selection state
-			for (let option of allGroups.flatMap((x) => x.items)) {
-				option.selected = false;
+			const selfChanged = core.preloadValues();
+			// preloadValues fires its own callbacks when it drops invalid values; don't double-notify
+			if (!selfChanged) {
+				onchangeRaw?.(rawValues);
 			}
-
-			// Update rawValues based on new values
-			let newRawValues: ComboBoxItem[] = [];
-
-			for (let value of currentValues) {
-				const foundOption = allGroups
-					.flatMap((x) => x.items)
-					.find((x) => x.value === value);
-
-				if (foundOption) {
-					foundOption.selected = true;
-					newRawValues.push({ ...foundOption });
-				} else if (value != null) {
-					// Create a new option if not found in allOptions
-					const newOption = {
-						label: String(value),
-						value: value,
-						selected: true,
-					};
-					newRawValues.push(newOption);
-				}
-			}
-
-			rawValues = newRawValues;
 		}
 	});
 
-	function initOptions(options: ComboBoxItem[]) {
-		if (fetchFunction) {
-			preloading = true;
-			fetchFunction().then((response: NotifyModel<ComboBoxItem[]>) => {
-				convertOptions(response.object!);
-				preloadValues();
-				preloading = false;
-			});
-		} else {
-			if (groupedOptions.length) {
-				convertGroupOptions(groupedOptions);
-			} else if (options.length) {
-				convertOptions(options);
-			} else if (searchFunction) {
-				// Initialize empty groups for search function
-				allGroups = [];
-				filteredGroups = [];
-				allowSearch = true;
-			} else {
-				filteredGroups = [];
-			}
-			preloadValues();
-		}
-	}
-
-	function preloadValues(overwrite: boolean = false) {
-		if (!values || values.length === 0) {
-			rawValues = [];
-			values = [];
-
-			for (let option of allGroups.flatMap((x) => x.items))
-				option.selected = false;
-
-			return;
-		}
-
-		if (rawValues.length > 0 && !overwrite) return;
-
-		let promises = [];
-		let newRawValues: ComboBoxItem[] = [];
-
-		for (let option of allGroups.flatMap((x) => x.items))
-			option.selected = false;
-
-		for (let value of values) {
-			const foundOption = allGroups
-				.flatMap((x) => x.items)
-				.find((x) => x.value === value);
-
-			if (foundOption !== undefined) {
-				foundOption.selected = true;
-				newRawValues.push(foundOption);
-			} else if (searchFunction && retrieveLabelFunction) {
-				preloading = true;
-				let object = { label: value, value: value, selected: true };
-
-				promises.push(
-					retrieveLabelFunction(value).then((response) => {
-						object.label = response.object ?? value!.toString();
-					}),
-				);
-
-				newRawValues.push(object);
-			} else {
-				newRawValues.push({
-					label: value,
-					value: value,
-					selected: true,
-				});
-			}
-		}
-
-		if (promises && promises.length > 0) {
-			preloading = true;
-
-			Promise.all(promises).then((x) => {
-				rawValues = newRawValues;
-				preloading = false;
-			});
-		} else {
-			rawValues = newRawValues;
-		}
-	}
-
-	function convertOptions(options: ComboBoxItem[]) {
-		const allOptions = options.map((option) => {
-			return {
-				...option,
-				selected: values && values.some((x) => x === option.value),
-			};
-		});
-		allGroups = [{ label: "", items: [...allOptions] }];
-		filteredGroups = [{ label: "", items: [...allOptions] }];
-	}
-
-	function convertGroupOptions(groups: ComboBoxGroup[]) {
-		allGroups = groups.map((group) => {
-			return {
-				...group,
-				items: group.items.map((option) => {
-					return {
-						...option,
-						selected:
-							values && values.some((x) => x === option.value),
-						groupName: group.label,
-					};
-				}),
-			};
-		});
-		filteredGroups = [...allGroups];
-	}
-
 	function onSelection(selectedValue: ComboBoxItem) {
 		// Find the actual option in allOptions to ensure we're working with the correct reference
-		const optionIndex = allGroups
+		const optionIndex = core.allGroups
 			.flatMap((x) => x.items)
 			.findIndex((opt) => opt.value === selectedValue.value);
 		const actualOption =
-			optionIndex !== -1
-				? allGroups.flatMap((x) => x.items)[optionIndex]
-				: selectedValue;
+			optionIndex !== -1 ? core.allGroups.flatMap((x) => x.items)[optionIndex] : selectedValue;
 
 		actualOption.selected = !actualOption.selected;
 
@@ -305,11 +216,11 @@
 			rawValues = [...rawValues, actualOption];
 		} else if (!actualOption.selected) {
 			values = values.filter((value) => value !== actualOption.value);
-			rawValues = rawValues.filter(
-				(rawValue) => rawValue.value !== actualOption.value,
-			);
+			rawValues = rawValues.filter((rawValue) => rawValue.value !== actualOption.value);
 		}
 
+		internalValues = [...values];
+
 		onchange?.(values);
 		onchangeRaw?.(rawValues);
 
@@ -323,49 +234,25 @@
 
 	function onFilterChange(value: string) {
 		if (searchFunction && value) {
-			clearTimeout(timeout);
-			searching = true;
-			timeout = window.setTimeout(() => {
-				searchFunction(value).then(
-					(response: NotifyModel<ComboBoxItem[]>) => {
-						convertOptions(response.object!);
-						searching = false;
-						open = true;
-						hideCombobox = false;
-					},
-				);
-			}, 300);
-		} else if (allGroups) {
-			filteredGroups = allGroups.filter((group) =>
-				group.items.some((x) =>
-					x.label.toLowerCase().includes(value.toLowerCase()),
-				),
-			);
-
-			if (filteredGroups.length > 0) {
-				filteredGroups = filteredGroups.map((group) => ({
-					...group,
-					items: group.items.filter((x) =>
-						x.label.toLowerCase().includes(value.toLowerCase()),
-					),
-				}));
-			}
-
+			core.search(value, () => {
+				open = true;
+				hideCombobox = false;
+			});
+		} else {
+			core.filterLocal(value);
 			hideCombobox = false;
 		}
 	}
 
-	let comboBoxEl: ReturnType<typeof ComboBoxMulti> | undefined =
-		$state(undefined);
+	let comboBoxEl: ReturnType<typeof ComboBoxMulti> | undefined = $state(undefined);
 	let textboxElement: HTMLElement | undefined = $state(undefined);
 	let buttonElement: HTMLElement;
-	let comboBoxKeyDown: ((e: KeyboardEvent) => void) | undefined =
-		$state(undefined);
+	let comboBoxKeyDown: ((e: KeyboardEvent) => void) | undefined = $state(undefined);
 
 	function onKeyDown(e: KeyboardEvent) {
 		if (!open) return;
 
-		if (e.key === "Escape") {
+		if (e.key === 'Escape') {
 			e.preventDefault();
 			open = false;
 		} else if (comboBoxKeyDown) {
@@ -376,8 +263,7 @@
 	}
 
 	function closePopover(e: MouseEvent) {
-		if (textboxElement && textboxElement.contains(e.target as HTMLElement))
-			return;
+		if (textboxElement && textboxElement.contains(e.target as HTMLElement)) return;
 		if (buttonElement.contains(e.target as HTMLElement)) return;
 
 		open = false;
@@ -385,11 +271,10 @@
 
 	const extraClasses: string[] = $derived.by(() => {
 		const classes = [];
-		if (open) classes.push("!border-accent");
-		if (allowSearch && open && !isEmpty)
-			classes.push("border-b-0 rounded-b-none");
-		if (disabled) classes.push("disabled");
-		if (showError) classes.push("show-error");
+		if (open) classes.push('!border-accent');
+		if (computedAllowSearch && open && !isEmpty) classes.push('border-b-0 rounded-b-none');
+		if (disabled) classes.push('disabled');
+		if (showError) classes.push('show-error');
 
 		return classes;
 	});
@@ -397,25 +282,24 @@
 
 <div
 	class="select-container {containerClass}"
-	class:mb-[1px]={allowSearch && open && !isEmpty}
+	class:mb-[1px]={computedAllowSearch && open && !isEmpty}
 >
 	<FormGroup {label} {required} {tooltipContent} {tooltipLocation}>
 		<button
 			bind:this={buttonElement}
 			onclick={() => {
 				open = !open;
-				if (open && allowSearch) {
+				if (open && computedAllowSearch) {
 					tick().then(() => textboxElement?.focus());
 				}
 			}}
 			onkeydown={(e) => onKeyDown(e)}
-			disabled={preloading || disabled}
+			name={resolvedName}
+			disabled={core.preloading || disabled}
 			class="select {extraClasses} {classes}"
 		>
-			{#if isEmpty || preloading}
-				<span class="placeholder"
-					>{preloading ? "Loading..." : placeholder}</span
-				>
+			{#if isEmpty || core.preloading}
+				<span class="placeholder">{core.preloading ? 'Loading...' : placeholder}</span>
 			{:else}
 				<div class="selected-items">
 					{#each rawValues as value}
@@ -423,13 +307,13 @@
 							<Badge>{value.label}</Badge>
 						{:else}
 							<Badge
-								onDelete={() => {
+								ondelete={() => {
 									onSelection(value);
 									tick().then(() => (open = false));
 								}}>{value.label}</Badge
 							>
 						{/if}
-						<!-- <span class="inline-flex items-center bg-primary text-white rounded-md px-2">
+						<!-- <span class="inline-flex items-center bg-midnight text-white rounded-md px-2">
 						{value.label}
 						<button
 							class="leading-0 ml-1 size-4 rounded hover:bg-neutral-400/25"
@@ -448,7 +332,7 @@
 					{/each}
 				</div>
 			{/if}
-			{#if preloading || searching}
+			{#if core.preloading || core.searching}
 				<div class="loader">
 					<Loader sizeOverride="1.125rem" />
 				</div>
@@ -460,15 +344,13 @@
 						size="0.75rem"
 						onclick={(e: MouseEvent) => {
 							values = [];
+							internalValues = [];
 							rawValues = [];
 
 							onchange?.(values);
 							onchangeRaw?.(rawValues);
 
-							options.forEach((x) => (x.selected = false));
-							allGroups
-								.flatMap((x) => x.items)
-								.forEach((x) => (x.selected = false));
+							core.allGroups.flatMap((x) => x.items).forEach((x) => (x.selected = false));
 
 							e.stopPropagation();
 						}}
@@ -486,7 +368,7 @@
 			{open ? '' : 'hidden'}"
 	>
 		<div class="select-panel-inner" use:clickOutside={closePopover}>
-			{#if allowSearch}
+			{#if computedAllowSearch}
 				<Textbox
 					bind:value={filterString}
 					class="w-full
@@ -494,7 +376,7 @@
 						{open && !isEmpty ? 'border-t-0 rounded-t-none' : ''}"
 					bind:textboxElement
 					placeholder="Start typing to search..."
-					disabled={preloading}
+					disabled={core.preloading}
 					autocomplete="off"
 					oninput={() => onFilterChange(filterString)}
 					onkeydown={onKeyDown}
@@ -506,10 +388,10 @@
 				values={rawValues}
 				{onSelection}
 				onkeydown={comboBoxKeyDown}
-				groupedOptions={filteredGroups}
+				groupedOptions={core.filteredGroups}
 				open={open && !hideCombobox}
-				loading={searching}
-				{showNoResultsMessage}
+				loading={core.searching}
+				{hideNoResults}
 				{loadingText}
 			/>
 		</div>
@@ -525,53 +407,57 @@
 	}
 
 	.select {
-		font-size: var(--pui-font-size-md);
-		line-height: var(--pui-line-height-normal);
+		font-size: 1rem;
+		line-height: 1.5rem;
 		position: relative;
 		display: flex;
 		flex-wrap: wrap;
-		padding: var(--pui-spacing-1) var(--pui-spacing-2);
-		border-radius: var(--pui-radius-base);
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.25rem;
 		text-align: left;
-		background-color: var(--pui-input-bg);
-		color: var(--pui-text-primary);
-		border-color: var(--pui-border-default);
+		background-color: var(--input-bg-color);
+		color: var(--text-color);
+		border-color: var(--border-color);
 		cursor: pointer;
 		width: 100%;
 		align-items: center;
-		border: 1px solid var(--pui-border-default);
-		padding-right: var(--pui-spacing-8);
+		border: 1px solid var(--border-color);
+		padding-right: 2rem;
+		/* relative flex flex-wrap gap-x-1 gap-y-1 text-base rounded py-1 px-2 text-left focus:outline-none
+				bg-input border border-main-border focus-visible:border-accent
+				placeholder:text-zinc-400 dark:placeholder:text-neutral-500
+				disabled:bg-main-border disabled:cursor-not-allowed */
 	}
 
 	.select:focus {
-		border-color: var(--pui-accent-color);
+		border-color: var(--accent-color);
 		outline: 2px solid transparent;
-		outline-offset: var(--pui-focus-ring-offset);
+		outline-offset: 2px;
 	}
 
 	.select-icon {
 		position: absolute;
-		right: var(--pui-spacing-2);
-		width: var(--pui-spacing-4);
+		right: 0.5rem;
+		width: 1rem;
 		display: flex;
 	}
 
 	.btn-clear-container {
 		position: absolute;
 		line-height: 0;
-		right: var(--pui-spacing-1);
+		right: 0.4rem;
 	}
 
 	.select-btn-clear {
-		border-radius: var(--pui-radius-base);
-		padding: var(--pui-spacing-1);
+		border-radius: 0.25rem;
+		padding: 0.25rem;
 	}
 
 	.select-panel {
 		position: absolute;
 		width: 100%;
 		left: 0;
-		z-index: var(--pui-z-dropdown);
+		z-index: 70;
 	}
 
 	.select-panel-inner {
@@ -580,7 +466,7 @@
 	}
 
 	.placeholder {
-		color: var(--pui-text-placeholder);
+		color: var(--placeholder-color);
 	}
 
 	.hidden {
@@ -590,27 +476,27 @@
 	.disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
-		background-color: var(--pui-bg-disabled);
+		background-color: var(--border-color);
 	}
 
 	.selected-items {
 		display: flex;
 		flex-wrap: wrap;
-		gap: var(--pui-spacing-1);
+		gap: 0.25rem;
 	}
 
 	.loader {
 		position: absolute;
-		right: var(--pui-spacing-2_5);
-		width: var(--pui-spacing-4);
+		right: 0.65rem;
+		width: 1rem;
 		top: 6px;
 	}
 
 	.show-error {
-		border-color: var(--pui-text-danger);
+		border-color: var(--danger-text);
 	}
 
 	.text-error {
-		color: var(--pui-text-danger);
+		color: var(--danger-text);
 	}
 </style>