@marianmeres/stuic 2.62.0 → 2.63.0

package/dist/components/CommandMenu/CommandMenu.svelte

@@ -95,6 +95,7 @@
 	let isFetching = $state(false);
 	let optionsBox: HTMLDivElement | undefined = $state();
 	let activeEl: HTMLButtonElement | undefined = $state();
+	let fetchRequestId = 0;
 
 	//
 	// svelte-ignore state_referenced_locally
@@ -119,15 +120,18 @@
 
 	//
 	const debounced = new Debounced(() => q, 150);
-	watch([() => debounced.current], ([currQ], [oldQ]) => {
+	watch([() => debounced.current], ([currQ], [_oldQ]) => {
 		if (!currQ && !showAllOnEmptyQ) {
 			_optionsColl.clear();
 			return;
 		}
 
 		isFetching = true;
+		const currentRequest = ++fetchRequestId;
 		getOptions(`${currQ}`, [])
 			.then((res) => {
+				// Ignore stale responses
+				if (currentRequest !== fetchRequestId) return;
 				_optionsColl.clear().addMany(res);
 			})
 			.catch((e) => {
@@ -159,6 +163,7 @@
 
 	// internal DRY
 	const rand = Math.random().toString(36).slice(2);
+	const listId = `cmd-menu-list-${rand}`;
 	function btn_id(id: string | number, prefix = "btn-") {
 		return prefix + rand + strHash(`${id}`.repeat(3));
 	}
@@ -235,6 +240,9 @@
 				class="search m-2 shadow-xl"
 				classLabelBox="m-0"
 				autocomplete="off"
+				aria-autocomplete="list"
+				aria-controls={options.size ? listId : undefined}
+				aria-activedescendant={options.active ? btn_id(options.active[itemIdPropName]) : undefined}
 				placeholder={searchPlaceholder ?? t("search_placeholder")}
 				classInputBoxWrap={twMerge(
 					// always look like focused
@@ -282,6 +290,11 @@
 					</div>
 				{/snippet}
 				{#snippet inputBelow()}
+					<div class="sr-only" aria-live="polite" aria-atomic="true">
+						{#if options.size}
+							{options.size} results available
+						{/if}
+					</div>
 					{#if options.size}
 						<div
 							class={twMerge(
@@ -292,6 +305,9 @@
 							)}
 							bind:this={optionsBox}
 							tabindex="-1"
+							role="listbox"
+							id={listId}
+							aria-label="Search results"
 						>
 							{#each _normalize_and_group_options(options.items) as [_optgroup, _opts]}
 								<!-- {console.log(11111, _optgroup, _opts)} -->
@@ -303,15 +319,17 @@
 											{_optgroup}
 										</div>
 									{/if}
-									<ul>
-										{#each _opts as item (item.id)}
+									<ul role="presentation">
+										{#each _opts as item (item[itemIdPropName])}
 											{@const active =
 												item[itemIdPropName] === options.active?.[itemIdPropName]}
 											<!-- {@const isSelected = false} -->
-											<li class:active>
+											<li class:active role="presentation">
 												<button
 													class:active
 													type="button"
+													role="option"
+													aria-selected={active}
 													class={twMerge(
 														"no-focus-visible",
 														"text-left rounded-md py-2 px-2.5",
@@ -322,7 +340,6 @@
 														"hover:border-neutral-400 dark:hover:border-neutral-500",
 														active && "bg-neutral-200 dark:bg-neutral-800",
 														classOption,
-														// active && "border-neutral-400",
 														active && classOptionActive
 													)}
 													id={btn_id(item[itemIdPropName])}
@@ -340,8 +357,6 @@
 														}
 													}}
 												>
-													<!-- role="checkbox"
-											aria-checked={active} -->
 													{_renderOptionLabel(item)}
 												</button>
 											</li>
@@ -361,4 +376,15 @@
 	.options {
 		scrollbar-width: thin;
 	}
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
 </style>

package/dist/components/Input/FieldOptions.svelte

@@ -3,7 +3,7 @@
 	import { iconSearch, iconCheck, iconCircle, iconSquare } from "../../icons/index.js";
 	import { ItemCollection, type Item } from "@marianmeres/item-collection";
 	import { Debounced, watch } from "runed";
-	import { tick, type Snippet } from "svelte";
+	import { onDestroy, tick, type Snippet } from "svelte";
 	import { tooltip } from "../../actions/index.js";
 	import { type ValidateOptions } from "../../actions/validate.svelte.js";
 	import type { TranslateFn } from "../../types.js";
@@ -65,11 +65,8 @@
 		noScrollLock?: boolean;
 		style?: string;
 		t?: TranslateFn;
-		renderValue?: (strigifiedItems: string) => string;
-		getOptions: (
-			q: string,
-			current: Item[]
-		) => Promise<{ coll?: ItemCollection<Item>; found: Item[] }>;
+		renderValue?: (stringifiedItems: string) => string;
+		getOptions: (q: string, current: Item[]) => Promise<{ found: Item[] }>;
 		notifications?: NotificationsStack;
 		cardinality?: number;
 		renderOptionLabel?: (item: Item) => string;
@@ -186,6 +183,10 @@
 	let modalDialog: ModalDialog = $state()!;
 	let innerValue = $state("");
 	let isFetching = $state(false);
+	let isUnmounted = false;
+	onDestroy(() => {
+		isUnmounted = true;
+	});
 	let cardinality = $derived(_cardinality === -1 ? Infinity : _cardinality);
 	let isMultiple = $derived(cardinality > 1);
 	let showIcons = $derived(isMultiple ? showIconsCheckbox : showIconsRadio);
@@ -246,6 +247,11 @@
 	// reconfigure if the prop ever changes during runtime (most likely will NOT)
 	$effect(() => {
 		_selectedColl.configure({ cardinality });
+		// trim excess selections if cardinality was reduced
+		if (_selectedColl.size > cardinality) {
+			const trimmed = _selectedColl.items.slice(0, cardinality);
+			_selectedColl.clear().addMany(trimmed);
+		}
 	});
 
 	// now, create the reactive, subscribed variants
@@ -259,10 +265,6 @@
 		);
 	}
 
-	// $inspect("options", options);
-	// $inspect("selected", selected);
-	// $inspect("lastQuery", lastQuery, innerValue);
-
 	// hidden input which holds the final value (upon which validation happens)
 	let parentHiddenInputEl: HTMLInputElement | undefined = $state();
 
@@ -274,38 +276,21 @@
 	let isAddNewBtnActive = $state(false);
 	let touch = $state(new Date());
 
-	// set value on open
-	// watch(
-	// 	() => modalDialog.visibility().visible,
-	// 	(isVisible, wasVisible) => {
-	// 		// modal was just opened
-	// 		if (isVisible) {
-	// 			_selectedColl.clear().addMany(maybeJsonParse(value));
-	// 			console.log(_selectedColl.dump());
-	// 			// IMPORTANT: focus first selected so it scrolls into view on open
-	// 			if (_selectedColl.size) {
-	// 				console.log(1111);
-	// 				waitForNextRepaint().then(() => {
-	// 					_optionsColl.setActive(_selectedColl.items[0]);
-	// 					waitForNextRepaint().then(() => {
-	// 						scrollIntoViewTrigger = new Date();
-	// 					});
-	// 				});
-	// 			}
-	// 		}
-	// 	}
-	// );
-
 	// suggest options as a typeahead feature
 	const debounced = new Debounced(() => innerValue, 150);
+	let fetchRequestId = 0;
 	watch(
 		[() => modalDialog.visibility().visible, () => debounced.current],
 		([isVisible, currVal]) => {
 			if (!isVisible) return;
 			isFetching = true;
+			const currentRequest = ++fetchRequestId;
 			getOptions(currVal, selected.items)
 				.then((res) => {
-					const { found, coll } = res;
+					// ignore stale responses
+					if (currentRequest !== fetchRequestId) return;
+
+					const { found } = res;
 
 					// continue normally, with (server) provided options...
 					_optionsColl.clear().addMany(found);
@@ -329,7 +314,7 @@
 			// IMPORTANT: focus first selected so it scrolls into view on open
 			if (_selectedColl.size) {
 				waitForNextRepaint().then(() => {
-					_optionsColl.setActive(_selectedColl.items[0]);
+					if (!isUnmounted) _optionsColl.setActive(_selectedColl.items[0]);
 				});
 			}
 		}
@@ -431,6 +416,8 @@
 		return groupped;
 	}
 
+	let groupedOptions = $derived(_normalize_and_group_options(options.items));
+
 	const BTN_CLS = [
 		"no-focus-visible",
 		"text-left rounded-md py-2 px-2.5 flex items-center space-x-2",
@@ -551,7 +538,7 @@
 				let extra = '';
 				if (vals.length > limit) {
 					vals = vals.slice(0, limit);
-					extra = `, ... <span class="text-sm opacity-50">(+${(origLength - limit)})</span>`;
+					extra = `, ... <span class="text-sm opacity-75">(+${(origLength - limit)})</span>`;
 				}
 				return vals.filter(v => v != null).map(_renderOptionLabel).join(", ") + extra;
 			} catch (e) {
@@ -568,6 +555,7 @@
 		preEscapeClose={escape}
 		classDialog="items-start"
 		class="w-full max-w-2xl bg-transparent pointer-events-none"
+		ariaLabelledby={id}
 		{noScrollLock}
 	>
 		<div class="pt-0 md:pt-[20vh] w-full">
@@ -601,7 +589,8 @@
 							}
 						}}
 						autocomplete="off"
-						name={`rand-${Math.random().toString(36).slice(2)}`}
+						aria-controls={`${id}-options`}
+						name={`field-${id}`}
 						{...rest}
 					/>
 
@@ -641,7 +630,7 @@
 
 								<span class="p-1 m-1 text-sm">&nbsp;</span>
 								<span
-									class="flex-1 block justify-end opacity-50 text-right text-sm p-1 pr-2"
+									class="flex-1 block justify-end opacity-75 text-right text-xs p-1 pr-2"
 								>
 									{selected.items.length}
 									{#if cardinality > 0 && cardinality < Infinity}
@@ -653,6 +642,7 @@
 
 							<!-- {#if options.items.length} -->
 							<div
+								id={`${id}-options`}
 								class={[
 									"options overflow-y-auto overflow-x-hidden space-y-1 scrollbar-thin",
 									"h-55 max-h-55",
@@ -661,7 +651,6 @@
 								tabindex="-1"
 							>
 								{#if isFetching && !options.items.length}
-									<!-- <div class="p-4 opacity-50"> -->
 									<div class="flex opacity-50 text-sm h-full items-center justify-center">
 										<Spinner class="w-4" />
 									</div>
@@ -688,7 +677,7 @@
 									</div>
 								{/if}
 
-								{#each _normalize_and_group_options(options.items) as [_optgroup, _opts]}
+								{#each groupedOptions as [_optgroup, _opts]}
 									{#if _optgroup}
 										<div
 											class={twMerge(
@@ -734,7 +723,7 @@
 														active && classOptionActive
 													)}
 													tabindex="-1"
-													role="checkbox"
+													role={isMultiple ? "checkbox" : "radio"}
 													aria-checked={isSelected}
 												>
 													{#if showIcons}
@@ -765,7 +754,7 @@
 							</div>
 							<!-- {/if} -->
 							<div class="p-2 px-3 flex items-end justify-between">
-								<div class="text-sm opacity-50">
+								<div class="text-xs opacity-75">
 									<!-- Use arrows to navigate. Spacebar and Enter to select and/or submit. -->
 									{#if allowUnknown}
 										{@html t("unknown_allowed")}
@@ -811,7 +800,8 @@
 								onclick={(e) => {
 									e.preventDefault();
 									if (innerValue.trim() == "") {
-										return escape();
+										escape();
+										return modalDialog.close();
 									}
 									innerValue = "";
 									input?.focus();

package/dist/components/Input/FieldOptions.svelte.d.ts

@@ -1,4 +1,4 @@
-import { ItemCollection, type Item } from "@marianmeres/item-collection";
+import { type Item } from "@marianmeres/item-collection";
 import { type Snippet } from "svelte";
 import { type ValidateOptions } from "../../actions/validate.svelte.js";
 import type { TranslateFn } from "../../types.js";
@@ -49,9 +49,8 @@ export interface Props extends Record<string, any> {
     noScrollLock?: boolean;
     style?: string;
     t?: TranslateFn;
-    renderValue?: (strigifiedItems: string) => string;
+    renderValue?: (stringifiedItems: string) => string;
     getOptions: (q: string, current: Item[]) => Promise<{
-        coll?: ItemCollection<Item>;
         found: Item[];
     }>;
     notifications?: NotificationsStack;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "2.62.0",
+  "version": "2.63.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",