@lavalogic/scoria 0.36.0 → 0.37.0

package/dist/Components/QuerySelect.svelte

@@ -1,53 +1,5 @@
 <svelte:options runes />
 
-<script
-	lang="ts"
-	module
->
-	interface QuerySelectPropsAsObjectCommonProps<V extends object, VP extends ValueProp<V>> {
-		labelProp: NonNullableKey<V>;
-		valueProp: VP;
-
-		query: (value: string) => Promise<Array<V>>;
-		onchange: (newValue: V | null) => void;
-
-		options?: Array<V>;
-		name?: string;
-		disabled?: boolean;
-		width?: string;
-		height?: string;
-		label?: string;
-		required?: boolean;
-		invalid?: boolean;
-		onfocus?: (target: HTMLInputElement) => void;
-		inputId?: string;
-		focusOnLoad?: boolean;
-		clearable?: boolean;
-		isValid?: (item: V | null) => boolean;
-	}
-
-	export interface QuerySelectPropsAsObject<
-		V extends object,
-		VP extends ValueProp<V>,
-	> extends QuerySelectPropsAsObjectCommonProps<V, VP> {
-		valueAsObject: true;
-		value: V | null;
-	}
-
-	export interface QuerySelectPropsAsPrimitive<
-		V extends object,
-		VP extends ValueProp<V>,
-	> extends QuerySelectPropsAsObjectCommonProps<V, VP> {
-		valueAsObject: false;
-		value: V[VP] | null;
-	}
-
-	export type QuerySelectProps<V extends object, VP extends ValueProp<V>> =
-		| QuerySelectPropsAsObject<V, VP>
-		| QuerySelectPropsAsPrimitive<V, VP>;
-</script>
-
-<!-- #region Script -->
 <script
 	lang="ts"
 	generics="V extends object, VP extends ValueProp<V>"
@@ -55,13 +7,15 @@
 	import { ToastContext } from '../Contexts/ToastContext.svelte.js';
 
 	import { dev } from '$app/environment';
-	import { devCatch, generateShortUUID, vowels } from '../Helpers/Helpers.svelte.js';
+	import { devCatch, generateWeakId, vowels } from '../Helpers/Helpers.svelte.js';
+	import { attachDropdownPortal } from '../Helpers/dropdownPortal.js';
 	import { Colour, ColourSet } from '../scss/colours.js';
-	import type { NonNullableKey, ValueProp } from '../Types/Internal/Misc.js';
+	import type { ValueProp } from '../Types/Internal/Misc.js';
 	import { Size } from '../Types/Internal/Size.js';
 	import Svelecte from 'svelecte';
 	import { getContext, onMount, type Snippet, tick, untrack } from 'svelte';
 	import Action from './Action.svelte';
+	import type { QuerySelectProps } from './QuerySelectProps.js';
 
 	let {
 		label,
@@ -77,7 +31,7 @@
 		width,
 		height,
 		focusOnLoad = false,
-		inputId = generateShortUUID(),
+		inputId = generateWeakId(),
 		value: selectedValue,
 		options = $bindable<Array<V>>([]),
 		isValid,
@@ -102,6 +56,8 @@
 	let loadingDiv: HTMLDivElement | undefined = $state();
 	let isLoading = $state(false);
 	let hasRegisteredListeners = $state(false);
+	// Abort controller used to remove input listeners on unmount.
+	let listenerAbort: AbortController | undefined;
 
 	function isObjectValue(value: unknown): value is V {
 		return value !== null && typeof value == 'object' && labelProp in value && valueProp in value;
@@ -114,25 +70,30 @@
 				if (valueAsObject) {
 					if (isObjectValue(selectedValue)) {
 						if (!options.some((opt: V) => opt[valueProp] === selectedValue[valueProp])) {
-							options.push(selectedValue);
+							// Immutable update so the bindable propagates even when the
+							// parent did not declare `$state` on its side.
+							options = [...options, selectedValue];
 						}
 					} else if (dev) {
 						console.warn(`valueAsObject is true but the value doesn't match`, selectedValue);
 						return;
 					}
 				} else if (!options.some((opt: V) => opt[valueProp] === selectedValue)) {
-					options.push({
-						//best-effort solution. Not a good one
-						// eslint-disable-next-line @typescript-eslint/no-base-to-string
-						[labelProp]: selectedValue.toString(),
-						[valueProp]: selectedValue,
-					} as V);
+					options = [
+						...options,
+						{
+							//best-effort solution. Not a good one
+							// eslint-disable-next-line @typescript-eslint/no-base-to-string
+							[labelProp]: selectedValue.toString(),
+							[valueProp]: selectedValue,
+						} as V,
+					];
 				}
 			}
 		});
 	});
 
-	let isInvalid = $derived(
+	const isInvalid = $derived(
 		(required && !selectedValue) ||
 			invalid ||
 			isValid?.(
@@ -147,28 +108,7 @@
 	function forceShowDropdown(e: HTMLInputElement) {
 		if (focusOnLoad && !hasAutoFocused) {
 			hasAutoFocused = true;
-
-			const input = e;
-
-			input.click();
-
-			// HACK. the default selectOnTab functionality selects the highlighted element,
-			// this selects the first element on the list
-			// please decide which one we'll be using and be consistent
-			// input.addEventListener('keydown', (e) => {
-			// if (e.key === 'Tab') {
-			// 	const inputElement = e.target as HTMLInputElement | undefined;
-			// 	if (inputElement && inputElement.value.trim()) {
-			// 		(
-			// 			inputElement?.parentElement?.parentElement?.parentElement?.parentElement?.querySelector(
-			// 				'[data-pos="0"]' //first element from dropdown
-			// 			) as HTMLElement | undefined
-			// 		)?.click();
-			// 	} else if (optional) {
-			// 		dispatch('change', null);
-			// 	}
-			// }
-			// });
+			e.click();
 		}
 	}
 
@@ -189,15 +129,12 @@
 		}
 
 		const input = document.getElementById(inputId);
-		// input?.addEventListener('focus', () => {
-		// 	hidden = true;
-		// });
-		// input?.addEventListener('blur', () => {
-		// 	hidden = false;
-		// });
-
-		// HACK callback for is-open on/off
-		const dropdownRef = input?.closest('div.svelecte')?.querySelector('.sv_dropdown') ?? undefined;
+		const svelecteRoot = input?.closest('div.svelecte') as HTMLElement | null;
+		const dropdownRef =
+			(svelecteRoot?.querySelector('.sv_dropdown') as HTMLElement | null) ?? undefined;
+
+		// HACK callback for is-open on/off; drives the chevron rotation
+		// in the action snippet further down.
 		const observer = new MutationObserver((mutations: Array<MutationRecord>) => {
 			for (let i = mutations.length - 1; i > -1; i--) {
 				const mutation = mutations[i];
@@ -211,8 +148,19 @@
 			observer.observe(dropdownRef, { attributes: true });
 		}
 
+		// Teleport the Svelecte dropdown to `document.body` while open
+		// so it escapes every ancestor `overflow` / `transform` /
+		// `z-index` stacking context. See `Helpers/dropdownPortal.ts`.
+		const detachPortal = attachDropdownPortal({
+			getTrigger: () => svelecteRoot,
+			getDropdown: () => dropdownRef,
+		});
+
 		return () => {
 			observer.disconnect();
+			detachPortal();
+			clearTimeout(timeoutHandler);
+			listenerAbort?.abort();
 		};
 	});
 
@@ -229,6 +177,8 @@
 	function registerInputListeners(e: HTMLInputElement) {
 		if (!hasRegisteredListeners) {
 			hasRegisteredListeners = true;
+			listenerAbort = new AbortController();
+			const signal = listenerAbort.signal;
 
 			const inputElement = e;
 
@@ -240,33 +190,40 @@
 				tryQuery(currentHandler, '').catch(devCatch);
 			}, 500) as unknown as number);
 
-			inputElement.addEventListener('input', (e) => {
-				clearTimeout(timeoutHandler);
-
-				const searchValue = (e.target as HTMLInputElement).value;
-
-				const currentHandler = (timeoutHandler = setTimeout(() => {
-					tryQuery(currentHandler, searchValue).catch(devCatch);
-				}, 500) as unknown as number);
-			});
-
-			inputElement.addEventListener('keydown', (e) => {
-				if (e.key === 'Enter') {
-					tick()
-						.then(() => {
-							const searchValue = (e.target as HTMLInputElement).value;
-							if (searchValue) {
-								// dispatch('search', { value: inputElement.value });
-								clearTimeout(timeoutHandler);
-
-								const currentHandler = (timeoutHandler = setTimeout(() => {
-									tryQuery(currentHandler, searchValue, true).catch(devCatch);
-								}, 1) as unknown as number);
-							}
-						})
-						.catch(devCatch);
-				}
-			});
+			inputElement.addEventListener(
+				'input',
+				(e) => {
+					clearTimeout(timeoutHandler);
+
+					const searchValue = (e.target as HTMLInputElement).value;
+
+					const currentHandler = (timeoutHandler = setTimeout(() => {
+						tryQuery(currentHandler, searchValue).catch(devCatch);
+					}, 500) as unknown as number);
+				},
+				{ signal }
+			);
+
+			inputElement.addEventListener(
+				'keydown',
+				(e) => {
+					if (e.key === 'Enter') {
+						tick()
+							.then(() => {
+								const searchValue = (e.target as HTMLInputElement).value;
+								if (searchValue) {
+									clearTimeout(timeoutHandler);
+
+									const currentHandler = (timeoutHandler = setTimeout(() => {
+										tryQuery(currentHandler, searchValue, true).catch(devCatch);
+									}, 1) as unknown as number);
+								}
+							})
+							.catch(devCatch);
+					}
+				},
+				{ signal }
+			);
 		}
 	}
 
@@ -294,7 +251,16 @@
 
 	function onChange(newValue: V | null | undefined) {
 		if (clearable || newValue != null) {
-			onchange(newValue ?? null);
+			// svelecte always passes the full option object; normalise to
+			// the shape the variant promised. AsPrimitive callbacks
+			// receive the primitive key (`V[VP]`), not the object.
+			if (valueAsObject) {
+				void (onchange as (v: V | null) => void | Promise<void>)(newValue ?? null);
+			} else {
+				const primitive = newValue == null ? null : newValue[valueProp];
+				// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+				void (onchange as (v: V[VP] | null) => void | Promise<void>)(primitive);
+			}
 		}
 	}
 
@@ -303,10 +269,6 @@
 	let isExpanded = $state(false);
 </script>
 
-<!-- #endregion -->
-
-<!-- #region HTML -->
-
 <div
 	class="select-wrapper"
 	class:invalid={isInvalid}
@@ -322,7 +284,7 @@
 			>
 		</label>
 	{/if}
-	<!-- strict mode is used to stop svelecte from rejecting perfectly valid values... wtf -->
+	<!-- strict mode is used to stop svelecte from rejecting perfectly valid values -->
 	<Svelecte
 		strictMode={false}
 		keepCreated
@@ -354,9 +316,6 @@
 	>
 		{#snippet toggleIcon()}
 			<div class="nothing"></div>
-			<!-- <div class="icon-bg">
-				<Icon name="chevron-down" size={Size.MediumSmall} />
-			</div> -->
 		{/snippet}
 	</Svelecte>
 
@@ -404,10 +363,6 @@
 	{/snippet}
 </div>
 
-<!-- #endregion -->
-
-<!-- #region CSS
- -->
 <style>.select-wrapper {
   min-width: var(--input-min-width, 12rem);
   width: var(--input-width, 100%);
@@ -476,24 +431,13 @@
   max-height: 100%;
   box-sizing: border-box;
 }
-.select-wrapper :global(.sv-item--content) {
-  font-size: 0.875rem;
-}
-.select-wrapper :global(.sv-item--wrap.in-dropdown) {
-  cursor: pointer;
-  min-height: 40px;
-  align-items: center;
-}
-.select-wrapper :global(.sv-item--content) {
-  min-height: 1.2rem;
-}
 .select-wrapper :global(.sv-btn-indicator) {
   cursor: pointer;
 }
 .select-wrapper.no-border {
   --sv-border: none;
 }
-.select-wrapper .select-wrapper.force-upwards :global .sv_dropdown.is-open {
+.select-wrapper.force-upwards :global .sv_dropdown.is-open {
   bottom: var(--dropdown-bottom);
 }
 .select-wrapper :global .sv-control {
@@ -514,32 +458,18 @@
 .select-wrapper :global .svelecte.svelecte-control {
   cursor: pointer;
 }
-.select-wrapper :global .sv-item--wrap.in-dropdown {
-  cursor: pointer;
-  min-height: 40px;
-  align-items: center;
-}
-.select-wrapper :global .sv-item--content {
-  min-height: 1.2rem;
-}
 .select-wrapper :global span {
   transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
 }
 .select-wrapper :global .sv-control {
   transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
 }
-.select-wrapper :global div.sv_dropdown.is-open {
-  z-index: 99;
-}
 .select-wrapper div.nothing {
   height: 0;
   width: 0;
 }
-.select-wrapper .dropdown-item,
 .select-wrapper .selection {
   font-size: 0.875rem;
-}
-.select-wrapper .selection {
   padding-left: 0.5rem;
   white-space: nowrap;
   display: flex;
@@ -563,22 +493,36 @@ div.icons {
   box-sizing: border-box;
 }
 
-.dropdown-item {
+:global .sv-item--wrap.in-dropdown {
+  cursor: pointer;
+  min-height: 40px;
+  align-items: center;
+}
+:global .sv-item--content {
+  font-size: 0.875rem;
+  min-height: 1.2rem;
+}
+:global div.sv_dropdown.is-open {
+  z-index: 99;
+}
+
+:global(.dropdown-item) {
   display: flex;
   flex-flow: row nowrap;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   gap: 1rem;
+  font-size: 0.875rem;
   fill: #259fc7;
 }
-.dropdown-item .toggle-icon {
+:global(.dropdown-item) .toggle-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-flow: column nowrap;
   opacity: 0;
 }
-.dropdown-item .toggle-icon.yes {
+:global(.dropdown-item) .toggle-icon.yes {
   opacity: 1;
 }</style>

package/dist/Components/QuerySelect.svelte.d.ts

@@ -1,32 +1,5 @@
-interface QuerySelectPropsAsObjectCommonProps<V extends object, VP extends ValueProp<V>> {
-    labelProp: NonNullableKey<V>;
-    valueProp: VP;
-    query: (value: string) => Promise<Array<V>>;
-    onchange: (newValue: V | null) => void;
-    options?: Array<V>;
-    name?: string;
-    disabled?: boolean;
-    width?: string;
-    height?: string;
-    label?: string;
-    required?: boolean;
-    invalid?: boolean;
-    onfocus?: (target: HTMLInputElement) => void;
-    inputId?: string;
-    focusOnLoad?: boolean;
-    clearable?: boolean;
-    isValid?: (item: V | null) => boolean;
-}
-export interface QuerySelectPropsAsObject<V extends object, VP extends ValueProp<V>> extends QuerySelectPropsAsObjectCommonProps<V, VP> {
-    valueAsObject: true;
-    value: V | null;
-}
-export interface QuerySelectPropsAsPrimitive<V extends object, VP extends ValueProp<V>> extends QuerySelectPropsAsObjectCommonProps<V, VP> {
-    valueAsObject: false;
-    value: V[VP] | null;
-}
-export type QuerySelectProps<V extends object, VP extends ValueProp<V>> = QuerySelectPropsAsObject<V, VP> | QuerySelectPropsAsPrimitive<V, VP>;
-import type { NonNullableKey, ValueProp } from '../Types/Internal/Misc.js';
+import type { ValueProp } from '../Types/Internal/Misc.js';
+import type { QuerySelectProps } from './QuerySelectProps.js';
 declare function $$render<V extends object, VP extends ValueProp<V>>(): {
     props: QuerySelectProps<V, VP>;
     exports: {

package/dist/Components/QuerySelectProps.d.ts

@@ -0,0 +1,66 @@
+import type { CssLength, NonNullableKey, ValueProp } from '../Types/Internal/Misc.js';
+interface QuerySelectCommonProps<V extends object, VP extends ValueProp<V>> {
+    /** Key of `V` whose value is the label string. */
+    labelProp: NonNullableKey<V>;
+    /** Key of `V` whose value is the unique identifier. */
+    valueProp: VP;
+    /** Asynchronous query function. Debounced as the user types. */
+    query: (value: string) => Promise<Array<V>>;
+    /** Optional initial option set; bindable so the component can extend it. */
+    options?: Array<V>;
+    /** Singular display name. */
+    name?: string;
+    /** Disable the input. */
+    disabled?: boolean;
+    /**
+     * CSS width override. Interpolated into a CSS custom property.
+     *
+     * BREAKING (Phase 7.7): was `string`; now requires the `CssLength`
+     * brand. Use the `cssLength('...')` helper.
+     */
+    width?: CssLength;
+    /**
+     * CSS height override. Interpolated into a CSS custom property.
+     *
+     * BREAKING (Phase 7.7): was `string`; now requires the `CssLength`
+     * brand. Use the `cssLength('...')` helper.
+     */
+    height?: CssLength;
+    /** Top label. */
+    label?: string;
+    /** Whether a selection is required. */
+    required?: boolean;
+    /** Force the invalid visual state. */
+    invalid?: boolean;
+    /** Focus handler invoked with the input element. */
+    onfocus?: (target: HTMLInputElement) => void;
+    /** DOM id of the underlying input. */
+    inputId?: string;
+    /** Focus the input on mount. */
+    focusOnLoad?: boolean;
+    /** When true, an "x" clears the selection. */
+    clearable?: boolean;
+    /** Optional consumer-supplied validity check. */
+    isValid?: (item: V | null) => boolean;
+}
+export interface QuerySelectPropsAsObject<V extends object, VP extends ValueProp<V>> extends QuerySelectCommonProps<V, VP> {
+    valueAsObject: true;
+    value: V | null;
+    /**
+     * Called when the selection changes. Receives the full option object
+     * (or null) because `valueAsObject` is `true`.
+     */
+    onchange: (newValue: V | null) => void | Promise<void>;
+}
+export interface QuerySelectPropsAsPrimitive<V extends object, VP extends ValueProp<V>> extends QuerySelectCommonProps<V, VP> {
+    valueAsObject: false;
+    value: V[VP] | null;
+    /**
+     * Called when the selection changes. Receives the primitive key value
+     * (`V[VP]`) or null because `valueAsObject` is `false`. Do NOT read
+     * `.value` off the argument -- it is already the primitive.
+     */
+    onchange: (newValue: V[VP] | null) => void | Promise<void>;
+}
+export type QuerySelectProps<V extends object, VP extends ValueProp<V>> = QuerySelectPropsAsObject<V, VP> | QuerySelectPropsAsPrimitive<V, VP>;
+export {};

package/dist/Components/QuerySelectProps.js

@@ -0,0 +1 @@
+export {};