@lavalogic/scoria 0.36.0 → 0.37.1

package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte

@@ -7,21 +7,23 @@
 	import { dev } from '$app/environment';
 	import SingleSelect from '../../../../SingleSelect.svelte';
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { devCatch, isValidityTuple, loadingText } from '../../../../../Helpers/Helpers.svelte.js';
+	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
+	import { cssLength, devCatch, loadingText } from '../../../../../Helpers/Helpers.svelte.js';
 	import type { SelectOption } from '../../../../../Types/Internal/SelectOption.js';
 	import { Validity } from '../../../../../Types/Internal/Validity.js';
 	import { getContext, tick } from 'svelte';
+	import { useAsyncEditable } from './_helpers/useAsyncEditable.svelte.js';
 	import type { TableSelectProps } from './TableSelectProps.js';
 </script>
 
 <script
 	lang="ts"
-	generics="T extends object"
+	generics="T extends object, OptionsValueType, RowIdType extends Primitive"
 >
-	const { cell }: TableSelectProps<T, T> = $props();
+	// Group1-F: widen the second generic (was <T, T>); see comment below.
+	const { cell }: TableSelectProps<T, OptionsValueType> = $props();
 
-	let tdref = $state<HTMLTableCellElement | undefined>();
+	let tdref = $state<HTMLElement | undefined>();
 
 	const selectValue = $derived(cell.getValue() as T | Promise<T> | null | undefined);
 
@@ -31,135 +33,24 @@
 
 	const optional = $derived(cell.column.columnDef.optional);
 
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
 
-	const editable = $derived(
-		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
-	);
-
-	const focusDetails: TableFocusDetails<T, never> = $derived(
-		new TableFocusDetails(cell, tableContext)
-	);
-
-	const wantsToBeEdited = $derived(
-		tableContext.focusStart?.column === focusDetails.coordinates.column &&
-			tableContext.focusEnd?.column === focusDetails.coordinates.column &&
-			tableContext.focusStart.row === focusDetails.coordinates.row &&
-			tableContext.focusEnd.row === focusDetails.coordinates.row &&
-			!tableContext.isMousingDown &&
-			tableContext.focusStartIsBeingEdited
-	);
-
-	let isBeingEdited = $derived(false);
-
-	function handleIsEditable(isEditable: boolean): Promise<void> {
-		if (isEditable) {
-			return tick().then(() => {
-				isBeingEdited = true;
-			});
-		} else {
-			if (isBeingEdited) {
-				return tick()
-					.then(() => {
-						if (!tableContext.singleClickEditing) {
-							tableContext.focusStartIsBeingEdited = false;
-						}
-
-						isBeingEdited = false;
-					})
-					.catch(devCatch);
-			}
-		}
-
-		return Promise.resolve();
-	}
-
-	$effect(() => {
-		void editable;
-		if (wantsToBeEdited) {
-			if (editable instanceof Promise) {
-				editable
-					.then((isEditable) => {
-						return handleIsEditable(isEditable);
-					})
-
-					.catch(devCatch);
-			} else {
-				handleIsEditable(editable).catch(devCatch);
-			}
-		} else {
-			tick()
-				.then(() => {
-					isBeingEdited = false;
-					tableContext.focusStartIsBeingEdited = false;
-				})
-				.catch(devCatch);
-		}
+	const editable = useAsyncEditable<T, RowIdType>({
+		cell: () => cell,
 	});
 
 	const optionsPromise = $derived(
 		cell.column.columnDef.getSpecificOptions?.(
 			cell.row.original,
-			focusDetails.coordinates.column
+			editable.focusDetails.coordinates.column
 		) ?? cell.column.columnDef.getOptions()
 	);
 
-	let validity: Validity = $state(Validity.Valid);
-	$effect(() => {
-		const validityPromise = focusDetails.validity;
-
-		validityPromise
-			.then((v) => {
-				if (!v) {
-					validity = Validity.Neutral;
-				} else if (isValidityTuple(v)) {
-					validity = v.value;
-				} else {
-					validity = v;
-				}
-			})
-			.catch(devCatch);
-	});
-
-	async function handleTDFocus(): Promise<boolean> {
-		if (
-			(await editable) &&
-			tableContext.focusStart?.column === focusDetails.coordinates.column &&
-			tableContext.focusStart.row === focusDetails.coordinates.row
-		) {
-			if (
-				tableContext.focusEnd?.column !== focusDetails.coordinates.column ||
-				tableContext.focusEnd.row !== focusDetails.coordinates.row
-			) {
-				tableContext.setFocusEnd(focusDetails.coordinates);
-			}
-
-			tableContext.isMousingDown = false;
-			tableContext.focusStartIsBeingEdited = true;
-			return true;
-		}
-
-		return false;
-	}
-
-	async function handleSingleClick(): Promise<boolean> {
-		return tableContext.singleClickEditing && (await handleTDFocus());
-	}
-	async function handleDoubleClick(): Promise<boolean> {
-		return !tableContext.singleClickEditing && (await handleTDFocus());
-	}
-
 	function handleTab(e: KeyboardEvent) {
 		if (e.key === 'Escape') {
 			e.preventDefault();
 			e.stopPropagation();
-
-			tableContext.focusStartIsBeingEdited = false;
-			tick()
-				.then(() => {
-					tdref?.focus();
-				})
-				.catch(devCatch);
+			editable.leaveEditingViaKeyboard(tdref);
 		}
 		if (e.key === 'Tab') {
 			e.preventDefault();
@@ -182,30 +73,46 @@
 		}
 	}
 
+	/**
+	 * Track the inner select input so the keydown re-dispatcher is removed on
+	 * blur or remount; the previous implementation accumulated one listener
+	 * per focus event (P1 workorder finding). This wiring is genuinely
+	 * cell-specific (Select / QuerySelect only) and therefore lives outside
+	 * the shared `useAsyncEditable` helper.
+	 */
+	let activeKeydownTarget: HTMLInputElement | undefined;
+
 	function addKeydownEvent(target: HTMLInputElement | undefined) {
-		target?.addEventListener('keydown', keydownForce);
+		if (activeKeydownTarget && activeKeydownTarget !== target) {
+			activeKeydownTarget.removeEventListener('keydown', keydownForce);
+		}
+		if (target) {
+			target.addEventListener('keydown', keydownForce);
+			activeKeydownTarget = target;
+		}
 	}
 
-	function tryHandleTDFocus() {
-		handleTDFocus().catch(devCatch);
+	function removeKeydownEvent() {
+		if (activeKeydownTarget) {
+			activeKeydownTarget.removeEventListener('keydown', keydownForce);
+			activeKeydownTarget = undefined;
+		}
 	}
 
-	let prevtdref: HTMLTableCellElement | undefined = undefined;
-	$effect(() => {
-		if (tdref) {
-			if (tdref != prevtdref) {
-				tdref.addEventListener('edit', tryHandleTDFocus);
-			} else {
-				prevtdref = tdref;
-			}
-		}
-	});
+	/**
+	 * Effect wires the `edit` custom event with proper cleanup on tdref
+	 * remount or component unmount (replaces the previous `prevtdref`
+	 * pattern that accumulated listeners; P1 workorder finding). The
+	 * listener wiring lives in the shared `useAsyncEditable` helper.
+	 */
+	$effect(() => editable.attachEditListener(tdref));
+
+	// Drop the keydown listener if the cell unmounts.
+	$effect(() => removeKeydownEvent);
 </script>
 
-{#if isBeingEdited}
-	<!-- onkeydown={handleInputKeydown} -->
-	<!-- onkeydown={handleEsc} -->
-	<td
+{#if editable.isBeingEdited}
+	<div
 		class="select-cell"
 		bind:this={tdref}
 	>
@@ -215,22 +122,37 @@
 			<SingleSelect
 				focusOnLoad
 				name="Item"
-				valueProp="value"
-				labelProp="label"
-				value={value ?? null}
-				{options}
-				width="100%"
+				valueProp={'value' as never}
+				labelProp={'label' as never}
+				value={(value ?? null) as never}
+				options={options as never}
+				width={cssLength('100%')}
 				clearable={cell.column.columnDef.clearable}
 				onfocus={addKeydownEvent}
 				valueAsObject={false}
-				onchange={(newValue: SelectOption<T> | null) => {
-					if (newValue?.value !== value) {
-						if (optional || newValue?.value != null) {
+				onchange={(newValue: SelectOption<T>['value'] | null) => {
+					// Phase 7.6: `valueAsObject={false}` means SingleSelect's
+					// onchange receives the primitive key value directly
+					// (`SelectOption<T>['value']`, i.e. `T`). The previous
+					// code typed this as the full `SelectOption` object and
+					// read `.value` off it, which masked itself only because
+					// downstream `onEditCell` consumers happened to not use
+					// the supplied value. Now that the variant typing is
+					// honest, the primitive flows straight through. The
+					// `as never` prop casts work around an inference
+					// limitation: Svelte component generics can't be
+					// explicitly passed in template syntax, and the inferred
+					// V (from `value: T`) clashes with the option type
+					// (`SelectOption<T>`); the casts let `V` be inferred
+					// from the explicit `onchange` annotation.
+					if (newValue !== value) {
+						if (optional || newValue != null) {
 							tableContext
-								.onEditCell(cell.row.original, focusDetails.coordinates, newValue?.value ?? null)
+								.onEditCell(cell.row.original, editable.focusDetails.coordinates, newValue ?? null)
 								.catch(devCatch);
 						}
 					}
+					removeKeydownEvent();
 					tableContext.focusStartIsBeingEdited = false;
 					tick()
 						.then(() => {
@@ -247,51 +169,49 @@
 			{/if}
 			could not retrieve options
 		{/await}
-	</td>
+	</div>
 {:else}
-	<!-- // onkeydown={handleTdKeydown} -->
 	<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-	<td
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
 		bind:this={tdref}
 		tabIndex="0"
-		style={focusDetails.outline}
+		style={editable.focusDetails.outline}
 		id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 		class="focusable editable"
-		class:multifocus={focusDetails.isMultiFocused}
-		class:multifocus-start={focusDetails.isMultiFocusStart}
-		class:info={validity == Validity.Info}
-		class:success={validity == Validity.Valid}
-		class:warning={validity == Validity.Warning}
-		class:error={validity == Validity.Invalid}
+		class:multifocus={editable.focusDetails.isMultiFocused}
+		class:multifocus-start={editable.focusDetails.isMultiFocusStart}
+		class:info={editable.validity == Validity.Info}
+		class:success={editable.validity == Validity.Valid}
+		class:warning={editable.validity == Validity.Warning}
+		class:error={editable.validity == Validity.Invalid}
 		ondblclick={() => {
-			handleDoubleClick().catch(devCatch);
+			editable.handleDoubleClickFocus();
 		}}
 		onmousedown={(e) => {
 			// start focus only on left click
 			if (e.button === 0) {
 				if (e.shiftKey) {
 					e.preventDefault();
-					tableContext.setFocusEnd(focusDetails.coordinates);
+					tableContext.setFocusEnd(editable.focusDetails.coordinates);
 				} else {
-					tableContext.startFocus(focusDetails.coordinates);
+					tableContext.startFocus(editable.focusDetails.coordinates);
 				}
 			}
 		}}
 		onmouseover={() => {
 			if (tableContext.isMousingDown) {
-				tableContext.setFocusEnd(focusDetails.coordinates);
+				tableContext.setFocusEnd(editable.focusDetails.coordinates);
 			}
 		}}
 		onmouseup={() => {
-			handleSingleClick()
-				.then((wasHandled) => {
-					if (!wasHandled) {
-						tableContext.endFocus(focusDetails.coordinates);
-					}
-				})
-				.catch(devCatch);
+			const wasHandled = editable.handleSingleClickFocus();
+			if (!wasHandled) {
+				tableContext.endFocus(editable.focusDetails.coordinates);
+			}
 		}}
-		>{#await visibleValue}
+	>
+		{#await visibleValue}
 			{loadingText}
 		{:then value}
 			{value ?? '-'}
@@ -302,11 +222,15 @@
 				{@debug e}
 			{/if}
 			Could not retrieve options
-		{/await}</td
-	>
+		{/await}
+	</div>
 {/if}
 
-<style>td {
+<style>.focusable,
+.checkbox-cell,
+.input-cell,
+.select-cell,
+.datepicker-cell {
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
@@ -316,47 +240,61 @@
   position: relative;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
-  border: solid 1px #cbd4da;
-  border-left: none;
+  border-right: solid 1px #cbd4da;
+  border-bottom: solid 1px #cbd4da;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--height);
 }
 
-td.multifocus {
+.focusable.multifocus,
+.checkbox-cell.multifocus,
+.input-cell.multifocus,
+.select-cell.multifocus {
   background-color: var(--multifocus-colour, #e6f8fd);
 }
-td.multifocus.multifocus-start {
+.focusable.multifocus.multifocus-start,
+.checkbox-cell.multifocus.multifocus-start,
+.input-cell.multifocus.multifocus-start,
+.select-cell.multifocus.multifocus-start {
   background-color: #ffffff;
 }
 
-td.focusable {
+.focusable {
   user-select: none;
   cursor: default;
   outline: none;
 }
-td.focusable.editable {
+.focusable.editable {
   cursor: pointer;
 }
 
-td.info {
+.focusable.info,
+.checkbox-cell.info,
+.input-cell.info,
+.select-cell.info {
   background-color: #1f81a0;
 }
-td.warning {
+.focusable.warning,
+.checkbox-cell.warning,
+.input-cell.warning,
+.select-cell.warning {
   background-color: #f8eab8;
 }
-td.error {
+.focusable.error,
+.checkbox-cell.error,
+.input-cell.error,
+.select-cell.error {
   background-color: #f9e9e9;
 }
 
-td.select-cell {
+.select-cell {
   padding: unset;
   box-sizing: border-box;
-  vertical-align: middle;
   text-align: center;
-}
-
-td {
   --sv-border: none;
 }
-td :global(.select-wrapper) {
+.select-cell :global(.select-wrapper) {
   --sv-min-height: 0px;
   --sv-general-padding: 0px;
   --sv-item-wrap-padding: 0px 0.75rem;

package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte.d.ts

@@ -1,25 +1,26 @@
+import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
 import type { TableSelectProps } from './TableSelectProps.js';
-declare function $$render<T extends object>(): {
-    props: TableSelectProps<T, T>;
+declare function $$render<T extends object, OptionsValueType, RowIdType extends Primitive>(): {
+    props: TableSelectProps<T, OptionsValueType>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends object> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+declare class __sveltets_Render<T extends object, OptionsValueType, RowIdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, OptionsValueType, RowIdType>>['props'];
+    events(): ReturnType<typeof $$render<T, OptionsValueType, RowIdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, OptionsValueType, RowIdType>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <T extends object, OptionsValueType, RowIdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, OptionsValueType, RowIdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, OptionsValueType, RowIdType>['props']>, ReturnType<__sveltets_Render<T, OptionsValueType, RowIdType>['events']>, ReturnType<__sveltets_Render<T, OptionsValueType, RowIdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, OptionsValueType, RowIdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, OptionsValueType, RowIdType>['exports']>;
+    <T extends object, OptionsValueType, RowIdType extends Primitive>(internal: unknown, props: ReturnType<__sveltets_Render<T, OptionsValueType, RowIdType>['props']> & {}): ReturnType<__sveltets_Render<T, OptionsValueType, RowIdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
 }
 declare const TableSelect: $$IsomorphicComponent;
-type TableSelect<T extends object> = InstanceType<typeof TableSelect<T>>;
+type TableSelect<T extends object, OptionsValueType, RowIdType extends Primitive> = InstanceType<typeof TableSelect<T, OptionsValueType, RowIdType>>;
 export default TableSelect;

package/dist/Components/Table/Body/Rows/Columns/TableSelectProps.d.ts

@@ -1,4 +1,10 @@
 import type { SelectTableCell } from './SelectTableCell.js';
+/**
+ * Props for {@link TableSelect}. The cell renders the awaited display value
+ * out of edit mode, and a `SingleSelect` (backed by `SelectDef.getOptions`
+ * or `getSpecificOptions`) inside the cell while editing.
+ */
 export interface TableSelectProps<T extends object, FilterValueType> {
+    /** The select-backed cell to render. */
     cell: SelectTableCell<T, FilterValueType>;
 }