@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/Table/Misc/FilterInput.svelte

@@ -1,643 +1,580 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive, FilterValueType"
->
-	import { dev } from '$app/environment';
-	import Button from '../../Button.svelte';
-	import MultiSelect from '../../MultiSelect.svelte';
-	import NumberInput from '../../NumberInput.svelte';
-	import QuerySelect from '../../QuerySelect.svelte';
-	import SingleSelect from '../../SingleSelect.svelte';
-	import TextInput from '../../TextInput.svelte';
-	import DateModal from '../../Touch/DateModal.svelte';
-	import { hasQuery } from '../TableHelpers.svelte.js';
-	import { devCatch, isDateTuple, isNumericArray } from '../../../Helpers/Helpers.svelte.js';
-	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
-	import { getContext, onMount, untrack } from 'svelte';
-	import { CheckboxDef } from '../Types/Columns/Definitions/Accessors/CheckboxDef.svelte.js';
-	import { DateInputDef } from '../Types/Columns/Definitions/Accessors/DateInputDef.svelte.js';
-	import { NumberInputDef } from '../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
-	import { SelectDef } from '../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import type { Primitive } from '../Types/Context/TableInitOptions.js';
-	import { CustomFilterType } from '../Types/Filtering/CustomFilterType.js';
-	import { NumberDateFilterMode } from '../Types/Filtering/NumberDateFilterMode.js';
-	import { StringFilterMode } from '../Types/Filtering/StringFilterMode.js';
-	import type { FilterInputProps } from './FilterInputProps.js';
-	import { numberDateFilterTypes } from './numberDateFilterTypes.js';
-	import { stringFilterTypes } from './stringFilterTypes.js';
-
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-
-	const { def, customFilters }: FilterInputProps<T, FilterValueType> = $props();
-
-	const customFilter = $derived(customFilters?.get(def.id));
-
-	/** Human-readable label used by every inner input (QuerySelect /
-	 *  MultiSelect / SingleSelect / etc.). Priority:
-	 *  1. The column's `header` (when it is a plain string, which is the
-	 *     usual case in flowms migrations).
-	 *  2. The customFilter's `label` (set on the remoteFilters entry).
-	 *  3. The raw `customFilter.id` (last-ditch fallback).
-	 *  Avoids surfacing dotted-path / camelCase IDs like
-	 *  `orderLines.allowSplitFulfilment` as the visible label. */
-	const displayLabel: string = $derived.by(() => {
-		if (typeof def.header === 'string' && def.header.length > 0) {
-			return def.header;
-		}
-		if (customFilter?.label) {
-			return customFilter.label;
-		}
-		return customFilter?.id ?? def.id;
-	});
-
-	const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
-
-	let value: unknown = $state(null);
-	let valueMin: number | null = $state(null);
-	let valueMax: number | null = $state(null);
-
-	let selectedOptions: Array<SelectOption<unknown>> = $state([]);
-	let lastQueryOptions: Array<SelectOption<unknown>> = $state([]);
-
-	const isNumeric = $derived(
-		def instanceof NumberInputDef || customFilter?.type === CustomFilterType.Number
-	);
-
-	const hasFilterFn = $derived(!!def.filterFn && typeof def.filterFn === 'function');
-
-	// A column is filterable when it has any of:
-	//  - a local `filterFn` (AccessorDef subclasses, or Display/Bubble/
-	//    Progress columns whose data repo is local),
-	//  - a declared `filterValueType` (server-side filtering — the UI
-	//    renders an input matching the declared type),
-	//  - a `customFilters` entry from `defsWrapper.remoteFilters`.
-	// The `filterValueType` case is required for remote-pagination tables:
-	// their data repo never assigns `filterFn`, so without it every typed
-	// column would silently disappear from the filter UI.
-	const hasDeclaredFilterType = $derived(def.filterValueType != null);
-
-	const isSearchable = $derived(
-		def.allowFiltering &&
-			(hasFilterFn || hasDeclaredFilterType || customFilters?.has(def.id) == true)
-	);
-
-	const isSelect = $derived(
-		def instanceof SelectDef || customFilter?.type === CustomFilterType.Select
-	);
-
-	const options = $derived(isSelect ? (def.getOptions?.() ?? customFilter?.options ?? []) : []);
-
-	let optionsPromise: Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>> = $state(
-		[] as Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>
-	);
-
-	onMount(() => {
-		retryOptionsPromise();
-	});
-
-	function retryOptionsPromise() {
-		optionsPromise = def instanceof SelectDef ? def.getOptions() : [];
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive, FilterValueType"
+>import { dev } from "$app/environment";
+import Button from "../../Button.svelte";
+import MultiSelect from "../../MultiSelect.svelte";
+import NumberInput from "../../NumberInput.svelte";
+import QuerySelect from "../../QuerySelect.svelte";
+import SingleSelect from "../../SingleSelect.svelte";
+import TextInput from "../../TextInput.svelte";
+import DateModal from "../../Touch/DateModal.svelte";
+import { hasQuery } from "../TableHelpers.svelte.js";
+import { devCatch, isDateTuple, isNumericArray } from "../../../Helpers/Helpers.svelte.js";
+import { getContext, onMount, untrack } from "svelte";
+import { CheckboxDef } from "../Types/Columns/Definitions/Accessors/CheckboxDef.svelte.js";
+import { DateInputDef } from "../Types/Columns/Definitions/Accessors/DateInputDef.svelte.js";
+import { NumberInputDef } from "../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js";
+import { SelectDef } from "../Types/Columns/Definitions/Accessors/SelectDef.svelte.js";
+import { TableContext } from "../Types/Context/TableContext.svelte.js";
+import { CustomFilterType } from "../Types/Filtering/CustomFilterType.js";
+import { NumberDateFilterMode } from "../Types/Filtering/NumberDateFilterMode.js";
+import { StringFilterMode } from "../Types/Filtering/StringFilterMode.js";
+import { numberDateFilterTypes } from "./numberDateFilterTypes.js";
+import { stringFilterTypes } from "./stringFilterTypes.js";
+const tableContext = getContext(TableContext.identifier);
+const { def, customFilters } = $props();
+const customFilter = $derived(customFilters?.get(def.id));
+/** Human-readable label used by every inner input (QuerySelect /
+*  MultiSelect / SingleSelect / etc.). Priority:
+*  1. The column's `header` (when it is a plain string, which is the
+*     usual case in flowms migrations).
+*  2. The customFilter's `label` (set on the remoteFilters entry).
+*  3. The raw `customFilter.id` (last-ditch fallback).
+*  Avoids surfacing dotted-path / camelCase IDs like
+*  `orderLines.allowSplitFulfilment` as the visible label. */
+const displayLabel = $derived.by(() => {
+	if (typeof def.header === "string" && def.header.length > 0) {
+		return def.header;
 	}
-
-	const filteringStateValue = $derived(
-		tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value
-	);
-
-	$effect(() => {
-		if (isRemoteSelect && !tableContext.paginationRepo?.filtering) {
-			return;
-		}
-		void filteringStateValue;
+	if (customFilter?.label) {
+		return customFilter.label;
+	}
+	return customFilter?.id ?? def.id;
+});
+const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
+let value = $state(null);
+let valueMin = $state(null);
+let valueMax = $state(null);
+let selectedOptions = $state([]);
+let lastQueryOptions = $state([]);
+const isNumeric = $derived(def instanceof NumberInputDef || customFilter?.type === CustomFilterType.Number);
+const hasFilterFn = $derived(!!def.filterFn && typeof def.filterFn === "function");
+// A column is filterable when it has any of:
+//  - a local `filterFn` (AccessorDef subclasses, or Display/Bubble/
+//    Progress columns whose data repo is local),
+//  - a declared `filterValueType` (server-side filtering — the UI
+//    renders an input matching the declared type),
+//  - a `customFilters` entry from `defsWrapper.remoteFilters`.
+// The `filterValueType` case is required for remote-pagination tables:
+// their data repo never assigns `filterFn`, so without it every typed
+// column would silently disappear from the filter UI.
+const hasDeclaredFilterType = $derived(def.filterValueType != null);
+const isSearchable = $derived(def.allowFiltering && (hasFilterFn || hasDeclaredFilterType || customFilters?.has(def.id) == true));
+const isSelect = $derived(def instanceof SelectDef || customFilter?.type === CustomFilterType.Select);
+const options = $derived(isSelect ? def.getOptions?.() ?? customFilter?.options ?? [] : []);
+let optionsPromise = $state([]);
+onMount(() => {
+	retryOptionsPromise();
+});
+function retryOptionsPromise() {
+	optionsPromise = def instanceof SelectDef ? def.getOptions() : [];
+}
+const filteringStateValue = $derived(tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value);
+$effect(() => {
+	if (isRemoteSelect && !tableContext.paginationRepo?.filtering) {
+		return;
+	}
+	void filteringStateValue;
+	if (def.debug) {
+		console.debug(`${def.id}: `, "FILTER INPUT: filtering state value:", $state.snapshot(filteringStateValue));
+	}
+	if (hasQuery(customFilter)) {
 		if (def.debug) {
-			console.debug(
-				`${def.id}: `,
-				'FILTER INPUT: filtering state value:',
-				$state.snapshot(filteringStateValue)
-			);
+			console.debug(`${def.id}: `, "has query");
 		}
-
-		if (hasQuery(customFilter)) {
-			if (def.debug) {
-				console.debug(`${def.id}: `, 'has query');
-			}
-
-			untrack(() => {
-				try {
-					if (filteringStateValue == undefined) {
-						// Filter cleared externally (saved view applied with an
-						// empty filter, or "Clear All" hit). Drop the typeahead
-						// echo so the next selection isn't masked by a stale
-						// cache, and clear the local value so the chip clears.
-						if (def.debug) {
-							console.debug(
-								`${def.id}: filtering state value was undefined`,
-								$state.snapshot(tableContext.paginationRepo?.filtering)
-							);
-						}
-						value = null;
-						tableContext.queryValues.delete(def);
-						return;
-					}
-
-					if (def.debug) {
-						console.debug(`${def.id}: query values:`, tableContext.queryValues.snapshot());
-					}
-					// Prefer the typeahead echo — it carries the real label
-					// from the option the user clicked. Fall back to the saved
-					// primitive (the usual case after applying a saved view)
-					// so the chip is at least visible; QuerySelect's own
-					// `$effect.pre` adds a placeholder option keyed on the
-					// primitive so it renders.
-					const cached = tableContext.queryValues.get(def);
+		untrack(() => {
+			try {
+				if (filteringStateValue == undefined) {
+					// Filter cleared externally (saved view applied with an
+					// empty filter, or "Clear All" hit). Drop the typeahead
+					// echo so the next selection isn't masked by a stale
+					// cache, and clear the local value so the chip clears.
 					if (def.debug) {
-						console.debug(`${def.id}: cached value:`, $state.snapshot(cached));
+						console.debug(`${def.id}: filtering state value was undefined`, $state.snapshot(tableContext.paginationRepo?.filtering));
 					}
-					if (cached != null) {
-						value = cached;
-					} else if (customFilter.valueAsObject === true) {
-						value = {
-							value: filteringStateValue,
-							label: String(filteringStateValue),
-						};
-					} else {
-						value = filteringStateValue;
-					}
-				} catch (e) {
-					console.warn(e);
 					value = null;
+					tableContext.queryValues.delete(def);
+					return;
 				}
-			});
-		} else if (isSelect) {
-			if (def.debug) {
-				console.debug(`${def.id}: is select (not query)`);
-			}
-			untrack(async () => {
-				try {
-					const opts = await options;
-					if (def.debug) {
-						console.debug(`${def.id}: possible options:`, $state.snapshot(options));
-					}
-					const x = opts.filter((it) => {
-						if (it.value != null && (typeof it.value == 'string' || typeof it.value == 'number')) {
-							return (filteringStateValue as Array<unknown> | undefined)?.includes(it.value);
-						}
-						return false;
-					});
-					if (def.debug) {
-						console.debug(`${def.id}: selected options:`, x);
-					}
-					selectedOptions = x;
-				} catch (e) {
-					if (dev || def.debug) {
-						console.debug(`${def.id}: `, e);
-					}
+				if (def.debug) {
+					console.debug(`${def.id}: query values:`, tableContext.queryValues.snapshot());
 				}
-			}).catch(devCatch);
-		} else if (isNumeric) {
-			if (
-				selectedNumberFilterType?.value === NumberDateFilterMode.Between &&
-				tableContext.paginationRepo?.filtering
-			) {
-				if (filteringStateValue != undefined) {
-					const [min, max] = filteringStateValue as [number, number | undefined];
-					value = min;
-					valueMin = min;
-					valueMax = max ?? null;
-				} else {
-					value = valueMin = valueMax = null;
+				// Prefer the typeahead echo — it carries the real label
+				// from the option the user clicked. Fall back to the saved
+				// primitive (the usual case after applying a saved view)
+				// so the chip is at least visible; QuerySelect's own
+				// `$effect.pre` adds a placeholder option keyed on the
+				// primitive so it renders.
+				const cached = tableContext.queryValues.get(def);
+				if (def.debug) {
+					console.debug(`${def.id}: cached value:`, $state.snapshot(cached));
 				}
-			} else if (tableContext.paginationRepo?.filtering) {
-				if (filteringStateValue != undefined) {
-					const [min] = filteringStateValue as [number, number | undefined];
-					value = min;
-					valueMin = min;
-					valueMax = min;
+				if (cached != null) {
+					value = cached;
+				} else if (customFilter.valueAsObject === true) {
+					value = {
+						value: filteringStateValue,
+						label: String(filteringStateValue)
+					};
 				} else {
-					value = valueMin = valueMax = null;
+					value = filteringStateValue;
 				}
+			} catch (e) {
+				console.warn(e);
+				value = null;
 			}
-		} else if (tableContext.paginationRepo?.filtering) {
-			if (
-				filteringStateValue == null ||
-				typeof filteringStateValue == 'string' ||
-				typeof filteringStateValue == 'number'
-			) {
-				value = filteringStateValue;
-			} else if (typeof filteringStateValue !== 'boolean') {
-				console.warn('unknown value type:', $state.snapshot(filteringStateValue));
-				value = filteringStateValue as string; // HACK attempt to keep production running
-			}
+		});
+	} else if (isSelect) {
+		if (def.debug) {
+			console.debug(`${def.id}: is select (not query)`);
 		}
-	});
-
-	onMount(() => {
-		const filterOption =
-			tableContext.paginationRepo?.filtering &&
-			tableContext.paginationRepo.filtering.find((it) => it.id === def.id);
-
-		if (filterOption) {
-			if (isNumericArray(filterOption.value)) {
-				[valueMin, valueMax] = filterOption.value;
-				if (valueMax == undefined) {
-					valueMax = valueMin;
-				} else if (valueMin == undefined) {
-					valueMin = valueMax;
+		untrack(async () => {
+			try {
+				const opts = await options;
+				if (def.debug) {
+					console.debug(`${def.id}: possible options:`, $state.snapshot(options));
 				}
-			} else if (!hasQuery(customFilter)) {
-				const gotValue = filterOption.value;
-				if (gotValue == null || typeof gotValue == 'string' || typeof gotValue == 'number') {
-					value = gotValue;
-				} else if (typeof filteringStateValue !== 'boolean') {
-					console.warn('unknown value type:', $state.snapshot(gotValue));
-					value = gotValue as string; // HACK attempt to keep production running
+				const x = opts.filter((it) => {
+					if (it.value != null && (typeof it.value == "string" || typeof it.value == "number")) {
+						return filteringStateValue?.includes(it.value);
+					}
+					return false;
+				});
+				if (def.debug) {
+					console.debug(`${def.id}: selected options:`, x);
+				}
+				selectedOptions = x;
+			} catch (e) {
+				if (dev || def.debug) {
+					console.debug(`${def.id}: `, e);
 				}
 			}
+		}).catch(devCatch);
+	} else if (isNumeric) {
+		if (selectedNumberFilterType?.value === NumberDateFilterMode.Between && tableContext.paginationRepo?.filtering) {
+			if (filteringStateValue != undefined) {
+				const [min, max] = filteringStateValue;
+				value = min;
+				valueMin = min;
+				valueMax = max ?? null;
+			} else {
+				value = valueMin = valueMax = null;
+			}
+		} else if (tableContext.paginationRepo?.filtering) {
+			if (filteringStateValue != undefined) {
+				const [min] = filteringStateValue;
+				value = min;
+				valueMin = min;
+				valueMax = min;
+			} else {
+				value = valueMin = valueMax = null;
+			}
 		}
-	});
-
-	const filterMode = $derived(tableContext.paginationRepo?.filterModes.get(def.id));
-	const selectedNumberFilterType: SelectOption<NumberDateFilterMode> | null = $derived.by(() => {
-		const value = (filterMode as NumberDateFilterMode | undefined) ?? NumberDateFilterMode.In;
-		return numberDateFilterTypes.find((it) => it.value === value) ?? null;
-	});
-	const selectedStringFilterType: SelectOption<StringFilterMode> | null = $derived.by(() => {
-		const value = (filterMode as StringFilterMode | undefined) ?? StringFilterMode.Contains;
-		return stringFilterTypes.find((it) => it.value === value) ?? null;
-	});
-
-	const inputId: string = $derived(`${tableContext.tableName}-${def.id}-filter-type`);
-
-	let showFromDateModal = $state(false);
-	let showToDateModal = $state(false);
-
-	/**
-	 * Debounce window for typed filter inputs (Text / Number / Between).
-	 * Discrete selections (selects, date pickers, filter-mode dropdowns)
-	 * skip this and fire `filterBy` immediately. Combined with the 400 ms
-	 * debounce in `createRemoteRowSource`, server-side filtering lands
-	 * roughly a second after the last keystroke.
-	 */
-	const FILTER_INPUT_DEBOUNCE_MS = 500;
-
-	let typingDebounceTimer: ReturnType<typeof setTimeout> | undefined;
-
-	/** Fire the table's `filterBy` after the user stops typing for
-	 *  `FILTER_INPUT_DEBOUNCE_MS`. Repeated calls coalesce; the most
-	 *  recent value wins. */
-	function debouncedFilterBy(id: string, newValue: unknown): void {
-		if (typingDebounceTimer !== undefined) {
-			clearTimeout(typingDebounceTimer);
+	} else if (tableContext.paginationRepo?.filtering) {
+		if (filteringStateValue == null || typeof filteringStateValue == "string" || typeof filteringStateValue == "number") {
+			value = filteringStateValue;
+		} else if (typeof filteringStateValue !== "boolean") {
+			console.warn("unknown value type:", $state.snapshot(filteringStateValue));
+			value = filteringStateValue;
 		}
-		typingDebounceTimer = setTimeout(() => {
-			typingDebounceTimer = undefined;
-			tableContext.paginationRepo?.filterBy(id, newValue);
-		}, FILTER_INPUT_DEBOUNCE_MS);
 	}
-
-	// Clear any pending debounce when the row unmounts so we do not
-	// fire `filterBy` against a torn-down `paginationRepo`.
-	$effect(() => {
-		return () => {
-			if (typingDebounceTimer !== undefined) {
-				clearTimeout(typingDebounceTimer);
-				typingDebounceTimer = undefined;
+});
+onMount(() => {
+	const filterOption = tableContext.paginationRepo?.filtering && tableContext.paginationRepo.filtering.find((it) => it.id === def.id);
+	if (filterOption) {
+		if (isNumericArray(filterOption.value)) {
+			[valueMin, valueMax] = filterOption.value;
+			if (valueMax == undefined) {
+				valueMax = valueMin;
+			} else if (valueMin == undefined) {
+				valueMin = valueMax;
 			}
-		};
-	});
-
-	function generateOnChangeObject(_label: string) {
-		return (newValue: SelectOption<unknown> | null) => {
-			tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
-			tableContext.queryValues.set(def, newValue ?? null);
-			value = newValue ?? null;
-		};
+		} else if (!hasQuery(customFilter)) {
+			const gotValue = filterOption.value;
+			if (gotValue == null || typeof gotValue == "string" || typeof gotValue == "number") {
+				value = gotValue;
+			} else if (typeof filteringStateValue !== "boolean") {
+				console.warn("unknown value type:", $state.snapshot(gotValue));
+				value = gotValue;
+			}
+		}
 	}
-
-	function generateOnChangePrimitive(_label: string) {
-		// AsPrimitive QuerySelect hands us the primitive value directly.
-		return (newValue: unknown) => {
-			tableContext.paginationRepo?.filterBy(def.id, newValue ?? null);
-			tableContext.queryValues.set(def, newValue ?? null);
-			value = newValue ?? null;
-		};
+});
+const filterMode = $derived(tableContext.paginationRepo?.filterModes.get(def.id));
+const selectedNumberFilterType = $derived.by(() => {
+	const value = filterMode ?? NumberDateFilterMode.In;
+	return numberDateFilterTypes.find((it) => it.value === value) ?? null;
+});
+const selectedStringFilterType = $derived.by(() => {
+	const value = filterMode ?? StringFilterMode.Contains;
+	return stringFilterTypes.find((it) => it.value === value) ?? null;
+});
+const inputId = $derived(`${tableContext.tableName}-${def.id}-filter-type`);
+let showFromDateModal = $state(false);
+let showToDateModal = $state(false);
+/**
+* Debounce window for typed filter inputs (Text / Number / Between).
+* Discrete selections (selects, date pickers, filter-mode dropdowns)
+* skip this and fire `filterBy` immediately. Combined with the 400 ms
+* debounce in `createRemoteRowSource`, server-side filtering lands
+* roughly a second after the last keystroke.
+*/
+const FILTER_INPUT_DEBOUNCE_MS = 500;
+let typingDebounceTimer;
+/** Fire the table's `filterBy` after the user stops typing for
+*  `FILTER_INPUT_DEBOUNCE_MS`. Repeated calls coalesce; the most
+*  recent value wins. */
+function debouncedFilterBy(id, newValue) {
+	if (typingDebounceTimer !== undefined) {
+		clearTimeout(typingDebounceTimer);
 	}
-</script>
-
-{#if isSearchable}
-	<!-- TODO remove this check once datePicker is supported -->
-	{#if def instanceof DateInputDef || def instanceof CheckboxDef}
-		<label for={inputId}>{displayLabel}</label>
-	{/if}
-	<div class="row">
-		{#if def instanceof DateInputDef}
-			{@const dateValues =
-				tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value ?? []}
-			{#if isDateTuple(dateValues)}
-				{@const [fromDate, toDate] = dateValues}
-				<div class="spaced-around">
-					<Button
-						onclick={() => {
-							showFromDateModal = true;
-						}}>From {fromDate?.toLocaleDateString() ?? 'Any Date'}</Button
-					>
-
-					<Button
-						onclick={() => {
-							showToDateModal = true;
-						}}>To {toDate?.toLocaleDateString() ?? 'Any Date'}</Button
-					>
-				</div>
-
-				{#if showFromDateModal}
-					<DateModal
-						header="Edit Date From"
-						value={fromDate}
-						cancelEditing={() => {
-							showFromDateModal = false;
-						}}
-						confirm={(e) => {
-							tableContext.paginationRepo?.filterBy(def.id, [e, toDate]);
-							showFromDateModal = false;
-						}}
-					/>
-				{/if}
-
-				{#if showToDateModal}
-					<DateModal
-						inclusive
-						header="Edit Date To"
-						value={toDate}
-						cancelEditing={() => {
-							showToDateModal = false;
-						}}
-						confirm={(e) => {
-							tableContext.paginationRepo?.filterBy(def.id, [fromDate, e]);
-							showToDateModal = false;
-						}}
-					/>
-				{/if}
-			{/if}
-		{:else if def instanceof SelectDef && !isRemoteSelect}
-			<div class="maxwidth">
-				{#await optionsPromise then options}
-					{@const selectedPrimitives = selectedOptions
-						.map((it) => it.value)
-						.filter((v): v is string | number => typeof v === 'string' || typeof v === 'number')}
-					<MultiSelect
-						label={customFilter?.id ??
-							customFilter?.label ??
-							customFilter?.objectName ??
-							customFilter?.queryKey ??
-							def.id}
-						labelProp="label"
-						valueProp="value"
-						name={customFilter?.objectName ?? 'Item'}
-						{options}
-						valueAsObject={false}
-						onchange={(e: Array<unknown>) => {
-							// Phase 7.6: `valueAsObject={false}` returns
-							// primitives directly.
-							tableContext.paginationRepo?.filterBy(def.id, e);
-						}}
-						selectedValues={selectedPrimitives}
-						collapseSelection
-					/>
-				{:catch e}
-					<span>Error retrieving options: {e.message}</span>
-					<Button
-						onclick={() => {
-							retryOptionsPromise();
-						}}>Retry</Button
-					>
-				{/await}
-			</div>
-		{:else if customFilter && isRemoteSelect}
-			<div class="contents">
-				{#await options then resolvedOptions}
-					{@const options = resolvedOptions as Array<SelectOption<unknown>>}
-					{#if hasQuery(customFilter)}
-						{#if customFilter.valueAsObject !== true}
-							{@const label = displayLabel}
-
-							<!-- TODO: multiselect -->
-
-							<QuerySelect
-								valueAsObject={false}
-								{label}
-								clearable
-								name={customFilter.objectName ?? 'Item'}
-								valueProp={'value' as never}
-								labelProp={'label' as never}
-								value={value as never}
-								query={customFilter.query}
-								bind:options={lastQueryOptions as never}
-								onchange={generateOnChangePrimitive(label)}
-							/>
-						{:else}
-							{@const label = displayLabel}
-
-							<!-- TODO: multiselect -->
-
-							<QuerySelect
-								valueAsObject={true}
-								{label}
-								clearable
-								name={customFilter.objectName ?? 'Item'}
-								valueProp="value"
-								labelProp="label"
-								value={value as null}
-								query={customFilter.query}
-								bind:options={lastQueryOptions}
-								onchange={generateOnChangeObject(label)}
-							/>
-						{/if}
-					{:else}
-						{@const selectedPrimitives = selectedOptions
-							.map((it) => it.value)
-							.filter(
-								(v): v is string | number => typeof v === 'string' || typeof v === 'number'
-							)}
-						<!--
-							With `valueAsObject={false}`, MultiSelect compares
-							its `selectedValues` against options by primitive
-							value, so we map `selectedOptions` to their
-							primitive `.value` rather than passing the
-							SelectOption objects directly.
-						-->
-						<MultiSelect
-							label={displayLabel}
-							labelProp="label"
-							valueProp="value"
-							name={customFilter.objectName ?? 'Item'}
-							{options}
-							valueAsObject={false}
-							onchange={(e: Array<unknown>) => {
-								// Phase 7.6: `valueAsObject={false}` returns
-								// primitives directly.
-								tableContext.paginationRepo?.filterBy(def.id, e);
-							}}
-							selectedValues={selectedPrimitives}
-							collapseSelection
-						/>
-					{/if}
-				{/await}
-			</div>
-		{:else if def instanceof CheckboxDef}
-			<div class="inner-row">
-				<label>
-					<input
-						value={false}
-						type="radio"
-						bind:group={value}
-						onchange={() => {
-							tableContext.paginationRepo?.filterBy(def.id, value);
-						}}
-					/>
-					No
-				</label>
-				<label>
-					<input
-						value={undefined}
-						type="radio"
-						bind:group={value}
-						onchange={() => {
-							tableContext.paginationRepo?.filterBy(def.id, value);
-						}}
-					/>
-					Any
-				</label>
-				<label>
-					<input
-						value={true}
-						type="radio"
-						bind:group={value}
-						onchange={() => {
-							tableContext.paginationRepo?.filterBy(def.id, value);
-						}}
-					/>
-					Yes
-				</label>
-			</div>
-		{:else if isNumeric}
-			{@const label = typeof def.header === 'string' ? def.header : undefined}
-			<div class="left">
-				<SingleSelect
-					{label}
-					name="Filter Type"
-					options={numberDateFilterTypes}
-					labelProp="label"
-					valueProp="value"
-					valueAsObject
-					value={selectedNumberFilterType}
-					onchange={(newValue: SelectOption<NumberDateFilterMode> | null) => {
-						const oldFilterType = selectedNumberFilterType;
-
-						const newFilterType = newValue?.value ?? NumberDateFilterMode.In;
-						tableContext.paginationRepo?.setFilterMode(def.id, newFilterType);
-
-						if (selectedNumberFilterType?.value !== oldFilterType?.value) {
-							if (oldFilterType?.value === NumberDateFilterMode.Between) {
-								valueMax = null;
-								tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMin]);
-							}
-
-							if (newFilterType === NumberDateFilterMode.In) {
-								tableContext.paginationRepo?.filterBy(def.id, [value]);
-							}
-
-							// TODO what about the other modes?
-						}
-					}}
-					onkeydown={(e: KeyboardEvent) => {
-						e.stopPropagation();
-					}}
-				/>
-			</div>
-			<div class="right">
-				{#if selectedNumberFilterType?.value === NumberDateFilterMode.Between}
-					<NumberInput
-						id={inputId}
-						bind:value={valueMin}
-						oninput={() => {
-							debouncedFilterBy(def.id, [valueMin, valueMax]);
-						}}
-						onkeydown={(e: KeyboardEvent) => {
-							e.stopPropagation();
-						}}
-					/>
-					<span>and</span>
-					<NumberInput
-						id={inputId}
-						bind:value={valueMax}
-						oninput={() => {
-							debouncedFilterBy(def.id, [valueMin, valueMax]);
-						}}
-						onkeydown={(e: KeyboardEvent) => {
-							e.stopPropagation();
-						}}
-					/>
-				{:else if value == null || typeof value == 'string'}
-					<TextInput
-						id={inputId}
-						bind:value
-						oninput={() => {
-							debouncedFilterBy(def.id, [value]);
-						}}
-						onkeydown={(e: KeyboardEvent) => {
-							e.stopPropagation();
-						}}
-					/>
-				{:else if dev}
-					error: {value?.toString()}
-					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-					{@debug value}
-				{/if}
-			</div>
-		{:else}
-			{@const label = typeof def.header === 'string' ? def.header : undefined}
-			<div class="left">
-				<SingleSelect
-					name="Filter Type"
-					valueAsObject
-					{label}
-					options={stringFilterTypes}
-					labelProp="label"
-					valueProp="value"
-					value={selectedStringFilterType}
-					onchange={(newValue: SelectOption<StringFilterMode> | null) => {
-						const filterType = newValue?.value ?? StringFilterMode.Contains;
-						tableContext.paginationRepo?.setFilterMode(def.id, filterType);
-					}}
-					onkeydown={(e: KeyboardEvent) => {
-						e.stopPropagation();
-					}}
-				/>
-			</div>
-			<div class="right">
-				{#if value == null || typeof value == 'string'}
-					<TextInput
-						id={inputId}
-						bind:value
-						oninput={() => {
-							debouncedFilterBy(def.id, value);
-						}}
-						onkeydown={(e: KeyboardEvent) => {
-							e.stopPropagation();
-						}}
-					/>
-				{:else if dev}
-					error: {value?.toString()}
-					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-					{@debug value}
-				{/if}
-			</div>
-		{/if}
-	</div>
-{/if}
-
+	typingDebounceTimer = setTimeout(() => {
+		typingDebounceTimer = undefined;
+		tableContext.paginationRepo?.filterBy(id, newValue);
+	}, FILTER_INPUT_DEBOUNCE_MS);
+}
+// Clear any pending debounce when the row unmounts so we do not
+// fire `filterBy` against a torn-down `paginationRepo`.
+$effect(() => {
+	return () => {
+		if (typingDebounceTimer !== undefined) {
+			clearTimeout(typingDebounceTimer);
+			typingDebounceTimer = undefined;
+		}
+	};
+});
+function generateOnChangeObject(_label) {
+	return (newValue) => {
+		tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
+		tableContext.queryValues.set(def, newValue ?? null);
+		value = newValue ?? null;
+	};
+}
+function generateOnChangePrimitive(_label) {
+	// AsPrimitive QuerySelect hands us the primitive value directly.
+	return (newValue) => {
+		tableContext.paginationRepo?.filterBy(def.id, newValue ?? null);
+		tableContext.queryValues.set(def, newValue ?? null);
+		value = newValue ?? null;
+	};
+}
+</script>
+
+{#if isSearchable}
+	<!-- TODO remove this check once datePicker is supported -->
+	{#if def instanceof DateInputDef || def instanceof CheckboxDef}
+		<label for={inputId}>{displayLabel}</label>
+	{/if}
+	<div class="row">
+		{#if def instanceof DateInputDef}
+			{@const dateValues =
+				tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value ?? []}
+			{#if isDateTuple(dateValues)}
+				{@const [fromDate, toDate] = dateValues}
+				<div class="spaced-around">
+					<Button
+						onclick={() => {
+							showFromDateModal = true;
+						}}>From {fromDate?.toLocaleDateString() ?? 'Any Date'}</Button
+					>
+
+					<Button
+						onclick={() => {
+							showToDateModal = true;
+						}}>To {toDate?.toLocaleDateString() ?? 'Any Date'}</Button
+					>
+				</div>
+
+				{#if showFromDateModal}
+					<DateModal
+						header="Edit Date From"
+						value={fromDate}
+						cancelEditing={() => {
+							showFromDateModal = false;
+						}}
+						confirm={(e) => {
+							tableContext.paginationRepo?.filterBy(def.id, [e, toDate]);
+							showFromDateModal = false;
+						}}
+					/>
+				{/if}
+
+				{#if showToDateModal}
+					<DateModal
+						inclusive
+						header="Edit Date To"
+						value={toDate}
+						cancelEditing={() => {
+							showToDateModal = false;
+						}}
+						confirm={(e) => {
+							tableContext.paginationRepo?.filterBy(def.id, [fromDate, e]);
+							showToDateModal = false;
+						}}
+					/>
+				{/if}
+			{/if}
+		{:else if def instanceof SelectDef && !isRemoteSelect}
+			<div class="maxwidth">
+				{#await optionsPromise then options}
+					{@const selectedPrimitives = selectedOptions
+						.map((it) => it.value)
+						.filter((v): v is string | number => typeof v === 'string' || typeof v === 'number')}
+					<MultiSelect
+						label={customFilter?.id ??
+							customFilter?.label ??
+							customFilter?.objectName ??
+							customFilter?.queryKey ??
+							def.id}
+						labelProp="label"
+						valueProp="value"
+						name={customFilter?.objectName ?? 'Item'}
+						{options}
+						valueAsObject={false}
+						onchange={(e: Array<unknown>) => {
+							// Phase 7.6: `valueAsObject={false}` returns
+							// primitives directly.
+							tableContext.paginationRepo?.filterBy(def.id, e);
+						}}
+						selectedValues={selectedPrimitives}
+						collapseSelection
+					/>
+				{:catch e}
+					<span>Error retrieving options: {e.message}</span>
+					<Button
+						onclick={() => {
+							retryOptionsPromise();
+						}}>Retry</Button
+					>
+				{/await}
+			</div>
+		{:else if customFilter && isRemoteSelect}
+			<div class="contents">
+				{#await options then resolvedOptions}
+					{@const options = resolvedOptions as Array<SelectOption<unknown>>}
+					{#if hasQuery(customFilter)}
+						{#if customFilter.valueAsObject !== true}
+							{@const label = displayLabel}
+
+							<!-- TODO: multiselect -->
+
+							<QuerySelect
+								valueAsObject={false}
+								{label}
+								clearable
+								name={customFilter.objectName ?? 'Item'}
+								valueProp={'value' as never}
+								labelProp={'label' as never}
+								value={value as never}
+								query={customFilter.query}
+								bind:options={lastQueryOptions as never}
+								onchange={generateOnChangePrimitive(label)}
+							/>
+						{:else}
+							{@const label = displayLabel}
+
+							<!-- TODO: multiselect -->
+
+							<QuerySelect
+								valueAsObject={true}
+								{label}
+								clearable
+								name={customFilter.objectName ?? 'Item'}
+								valueProp="value"
+								labelProp="label"
+								value={value as null}
+								query={customFilter.query}
+								bind:options={lastQueryOptions}
+								onchange={generateOnChangeObject(label)}
+							/>
+						{/if}
+					{:else}
+						{@const selectedPrimitives = selectedOptions
+							.map((it) => it.value)
+							.filter(
+								(v): v is string | number => typeof v === 'string' || typeof v === 'number'
+							)}
+						<!--
+							With `valueAsObject={false}`, MultiSelect compares
+							its `selectedValues` against options by primitive
+							value, so we map `selectedOptions` to their
+							primitive `.value` rather than passing the
+							SelectOption objects directly.
+						-->
+						<MultiSelect
+							label={displayLabel}
+							labelProp="label"
+							valueProp="value"
+							name={customFilter.objectName ?? 'Item'}
+							{options}
+							valueAsObject={false}
+							onchange={(e: Array<unknown>) => {
+								// Phase 7.6: `valueAsObject={false}` returns
+								// primitives directly.
+								tableContext.paginationRepo?.filterBy(def.id, e);
+							}}
+							selectedValues={selectedPrimitives}
+							collapseSelection
+						/>
+					{/if}
+				{/await}
+			</div>
+		{:else if def instanceof CheckboxDef}
+			<div class="inner-row">
+				<label>
+					<input
+						value={false}
+						type="radio"
+						bind:group={value}
+						onchange={() => {
+							tableContext.paginationRepo?.filterBy(def.id, value);
+						}}
+					/>
+					No
+				</label>
+				<label>
+					<input
+						value={undefined}
+						type="radio"
+						bind:group={value}
+						onchange={() => {
+							tableContext.paginationRepo?.filterBy(def.id, value);
+						}}
+					/>
+					Any
+				</label>
+				<label>
+					<input
+						value={true}
+						type="radio"
+						bind:group={value}
+						onchange={() => {
+							tableContext.paginationRepo?.filterBy(def.id, value);
+						}}
+					/>
+					Yes
+				</label>
+			</div>
+		{:else if isNumeric}
+			{@const label = typeof def.header === 'string' ? def.header : undefined}
+			<div class="left">
+				<SingleSelect
+					{label}
+					name="Filter Type"
+					options={numberDateFilterTypes}
+					labelProp="label"
+					valueProp="value"
+					valueAsObject
+					value={selectedNumberFilterType}
+					onchange={(newValue: SelectOption<NumberDateFilterMode> | null) => {
+						const oldFilterType = selectedNumberFilterType;
+
+						const newFilterType = newValue?.value ?? NumberDateFilterMode.In;
+						tableContext.paginationRepo?.setFilterMode(def.id, newFilterType);
+
+						if (selectedNumberFilterType?.value !== oldFilterType?.value) {
+							if (oldFilterType?.value === NumberDateFilterMode.Between) {
+								valueMax = null;
+								tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMin]);
+							}
+
+							if (newFilterType === NumberDateFilterMode.In) {
+								tableContext.paginationRepo?.filterBy(def.id, [value]);
+							}
+
+							// TODO what about the other modes?
+						}
+					}}
+					onkeydown={(e: KeyboardEvent) => {
+						e.stopPropagation();
+					}}
+				/>
+			</div>
+			<div class="right">
+				{#if selectedNumberFilterType?.value === NumberDateFilterMode.Between}
+					<NumberInput
+						id={inputId}
+						bind:value={valueMin}
+						oninput={() => {
+							debouncedFilterBy(def.id, [valueMin, valueMax]);
+						}}
+						onkeydown={(e: KeyboardEvent) => {
+							e.stopPropagation();
+						}}
+					/>
+					<span>and</span>
+					<NumberInput
+						id={inputId}
+						bind:value={valueMax}
+						oninput={() => {
+							debouncedFilterBy(def.id, [valueMin, valueMax]);
+						}}
+						onkeydown={(e: KeyboardEvent) => {
+							e.stopPropagation();
+						}}
+					/>
+				{:else if value == null || typeof value == 'string'}
+					<TextInput
+						id={inputId}
+						bind:value
+						oninput={() => {
+							debouncedFilterBy(def.id, [value]);
+						}}
+						onkeydown={(e: KeyboardEvent) => {
+							e.stopPropagation();
+						}}
+					/>
+				{:else if dev}
+					error: {value?.toString()}
+					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+					{@debug value}
+				{/if}
+			</div>
+		{:else}
+			{@const label = typeof def.header === 'string' ? def.header : undefined}
+			<div class="left">
+				<SingleSelect
+					name="Filter Type"
+					valueAsObject
+					{label}
+					options={stringFilterTypes}
+					labelProp="label"
+					valueProp="value"
+					value={selectedStringFilterType}
+					onchange={(newValue: SelectOption<StringFilterMode> | null) => {
+						const filterType = newValue?.value ?? StringFilterMode.Contains;
+						tableContext.paginationRepo?.setFilterMode(def.id, filterType);
+					}}
+					onkeydown={(e: KeyboardEvent) => {
+						e.stopPropagation();
+					}}
+				/>
+			</div>
+			<div class="right">
+				{#if value == null || typeof value == 'string'}
+					<TextInput
+						id={inputId}
+						bind:value
+						oninput={() => {
+							debouncedFilterBy(def.id, value);
+						}}
+						onkeydown={(e: KeyboardEvent) => {
+							e.stopPropagation();
+						}}
+					/>
+				{:else if dev}
+					error: {value?.toString()}
+					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+					{@debug value}
+				{/if}
+			</div>
+		{/if}
+	</div>
+{/if}
+
 <style>.contents {
   display: contents;
   --input-width: 100%;
@@ -708,4 +645,4 @@
 .inner-row label input {
   cursor: pointer;
   width: 2rem;
-}</style>
+}</style>