@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/Table/Body/QuickSearchCell.svelte

@@ -1,635 +1,689 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, FilterValueType"
->
-	import { dev } from '$app/environment';
-	import Action from '../../Action.svelte';
-	import Button from '../../Button.svelte';
-	import MultiSelect from '../../MultiSelect.svelte';
-	import NumberInput from '../../NumberInput.svelte';
-	import SingleSelect from '../../SingleSelect.svelte';
-	import TextInput from '../../TextInput.svelte';
-	import ThreeStateRadio from '../../ThreeStateRadio.svelte';
-	import DateModal from '../../Touch/DateModal.svelte';
-	import { devCatch, hasQuery, isDateTuple, isNumericArray } from '../../../Helpers/Helpers.svelte.js';
-	import { Colour, ColourSet } from '../../../scss/colours.js';
-	import { InputVariant } from '../../../Types/Internal/InputVariant.js';
-	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
-	import { Size } from '../../../Types/Internal/Size.js';
-	import { getContext, onMount, untrack } from 'svelte';
-	import { cubicOut } from 'svelte/easing';
-	import { fade } from 'svelte/transition';
-
-	import QuerySelect from '../../QuerySelect.svelte';
-	import { Ternary } from '../../../Types/Internal/Ternary.js';
-	import { numberDateFilterTypes } from '../Misc/numberDateFilterTypes.js';
-	import { stringFilterTypes } from '../Misc/stringFilterTypes.js';
-	import { quickFilterContextIdentifier } from '../Table.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 type { QuickSearchCellProps } from './QuickSearchCellProps.js';
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const { column, customFilters }: QuickSearchCellProps<T, FilterValueType> = $props();
-
-	const def = $derived(column.columnDef);
-
-	const customFilter = $derived(customFilters?.get(def.id));
-
-	const isSelect = $derived(
-		def instanceof SelectDef ||
-			def.filterValueType == CustomFilterType.Select ||
-			customFilter?.type === CustomFilterType.Select
-	);
-
-	const hasFilterFn = $derived(!!def.filterFn && typeof def.filterFn === 'function');
-
-	// const hasAcceptableColumnType = $derived(
-	// 	(def instanceof AccessorDef && searchableTypes.has(def.accessorType)) ||
-	// 		(def instanceof AbstractDisplayDef && searchableTypes.has(def.displayType))
-	// );
-
-	const isSearchable = $derived(
-		def.allowFiltering && (hasFilterFn || customFilters?.has(def.id) == true)
-		// ((hasFilterFn && hasAcceptableColumnType) || customFilters?.has(def.id) == true) // removed hasAcceptableColumnType due to it being redundant
-	);
-
-	const isNumeric = $derived(
-		def instanceof NumberInputDef ||
-			def.filterValueType == 'Number' ||
-			customFilter?.type === CustomFilterType.Number
-	);
-
-	function emptyOptsAndWarn(): Array<SelectOption<unknown>> {
-		console.warn(`def ${def.id} is declared as a select filter but has no getOptions() function`);
-		return [];
-	}
-	const options = $derived(
-		isSelect ? (def.getOptions?.() ?? customFilter?.options ?? emptyOptsAndWarn()) : []
-	);
-	const isDate = $derived(def instanceof DateInputDef);
-	const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
-
-	const selectSymbol = Symbol();
-
-	const openedSelect = getContext<{ value: symbol | null } | null | undefined>(
-		quickFilterContextIdentifier
-	);
-
-	const isSelectOpen = $derived(openedSelect?.value === selectSymbol);
-
-	// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-	let asdfvalue: unknown | null = $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 inputId = $derived(`${tableContext.tableName}-cell-quicksearch-${column.id}`);
-
-	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 filteringStateValue = $derived(
-		tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value
-	);
-
-	$effect(() => {
-		if (isRemoteSelect && !tableContext.paginationRepo?.filtering) {
-			return;
-		}
-		void filteringStateValue;
-
-		if (hasQuery(customFilter)) {
-			if (def.debug) {
-				console.debug(`${def.id}: `, 'has query');
-			}
-
-			untrack(async () => {
-				const gotValue = filteringStateValue as Array<unknown> | undefined;
-
-				try {
-					//  as unknown as string | number | undefined;
-
-					if (gotValue != undefined) {
-						if (def.debug) {
-							console.debug(`${def.id}: query values:`, tableContext.dataRepo.__queryValues);
-						}
-						const key = customFilter.id;
-						const x = await tableContext.dataRepo.__queryValues.get(key);
-
-						if (def.debug) {
-							console.debug(`${def.id}: `, 'value:', $state.snapshot(x));
-						}
-						asdfvalue = (await x) ?? null;
-					} else if (def.debug) {
-						console.debug(
-							`${def.id}: `,
-							'filtering state value was undefined',
-							$state.snapshot(tableContext.paginationRepo?.filtering)
-						);
-					}
-				} catch (e) {
-					console.warn(e);
-					asdfvalue = null;
-				}
-			}).catch(devCatch);
-		} else if (isSelect) {
-			if (def.debug) {
-				console.debug(`${def.id}: `, 'is select (not query)');
-			}
-
-			if (!tableContext.paginationRepo?.filtering) {
-				return;
-			}
-
-			const gotValue = filteringStateValue as Array<unknown> | undefined;
-
-			function isSelectOption(it: unknown): it is SelectOption<unknown> {
-				return it != null && typeof it == 'object';
-			}
-			untrack(async () => {
-				try {
-					const opts = await options;
-					if (def.debug) {
-						console.debug(`${def.id}: possible options:`, $state.snapshot(opts));
-					}
-					const x = opts.filter((it) => {
-						if (!isSelectOption(it)) {
-							return false;
-						}
-						if (it.value == undefined) {
-							return true;
-						}
-
-						if (typeof it.value == 'string' || typeof it.value == 'number') {
-							return (gotValue as unknown as Array<string | number> | 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);
-					}
-				}
-			}).catch(devCatch);
-		} else if (isNumeric) {
-			if (
-				selectedNumberFilterType?.value === NumberDateFilterMode.Between &&
-				tableContext.paginationRepo?.filtering
-			) {
-				const gotValue = filteringStateValue;
-				if (gotValue != undefined) {
-					const [min, max] = gotValue as [number, number | undefined];
-					asdfvalue = min;
-					valueMin = min;
-					valueMax = max ?? null;
-				} else {
-					asdfvalue = valueMin = valueMax = null;
-				}
-			} else if (tableContext.paginationRepo?.filtering) {
-				const gotValue = filteringStateValue;
-
-				if (gotValue != undefined) {
-					const [min] = gotValue as [number, number | undefined];
-					asdfvalue = min;
-					valueMin = min;
-					valueMax = min;
-				} else {
-					asdfvalue = valueMin = valueMax = null;
-				}
-			}
-		} else if (tableContext.paginationRepo?.filtering) {
-			const gotValue = filteringStateValue;
-			if (gotValue == null || typeof gotValue == 'string' || typeof gotValue == 'number') {
-				//RATS
-				rats(gotValue);
-				asdfvalue = gotValue;
-			}
-		}
-	});
-
-	function rats(gotValue: unknown) {
-		// RATS
-		if (dev && gotValue != null && typeof gotValue == 'object' && gotValue instanceof Promise) {
-			throw new Error(`Unexpected Promise`);
-		}
-	}
-	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;
-					asdfvalue = valueMin?.toString();
-				} else if (valueMin == undefined) {
-					valueMin = valueMax;
-					asdfvalue = valueMax.toString();
-				} else {
-					asdfvalue = valueMin.toString();
-				}
-			} else if (!hasQuery(customFilter)) {
-				const gotValue = filterOption.value;
-				if (gotValue == null || typeof gotValue == 'string' || typeof gotValue == 'number') {
-					//RATS
-					rats(gotValue);
-					asdfvalue = gotValue;
-				}
-			}
-		}
-	});
-
-	function closeOnCtrlF(e: KeyboardEvent) {
-		if (e.key.toLocaleUpperCase() === 'F' && e.ctrlKey) {
-			return;
-		}
-		e.stopPropagation();
-	}
-
-	let showFromDateModal = $state(false);
-	let showToDateModal = $state(false);
-
-	function generateOnChangeObject(label: string) {
-		return (newValue: SelectOption<unknown> | null) => {
-			tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
-			tableContext.dataRepo.__queryValues.set(label, newValue);
-			rats(newValue);
-			asdfvalue = newValue;
-		};
-	}
-
-	function generateOnChangePrimitive(label: string) {
-		return (newValue: SelectOption<unknown> | null) => {
-			tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
-			tableContext.dataRepo.__queryValues.set(label, newValue?.value ?? null);
-			rats(newValue);
-			asdfvalue = newValue?.value ?? null;
-		};
-	}
-
-	let isNullFilter = $derived(selectedNumberFilterType?.value == NumberDateFilterMode.null);
-</script>
-
-<td class="input-cell {inputId}">
-	{#if isSearchable}
-		<div class="input-wrapper-parent">
-			{#if isDate}
-				{@const dateValues = tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)
-					?.value ?? [null, null]}
-				{#if isDateTuple(dateValues)}
-					{@const [fromDate, toDate] = dateValues}
-					<div class="spaced-around">
-						<Button
-							size={Size.FillHeight}
-							fullWidth
-							onclick={() => {
-								showFromDateModal = true;
-							}}>From {fromDate?.toLocaleDateString() ?? 'Any Date'}</Button
-						>
-
-						<Button
-							size={Size.FillHeight}
-							fullWidth
-							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 isSelect}
-				{#if hasQuery(customFilter)}
-					{#if customFilter.valueAsObject !== true}
-						{@const label = customFilter.id}
-
-						<!-- TODO: multiselect -->
-
-						<!-- FIXME: Most likely Unsafe -->
-						<QuerySelect
-							valueAsObject={false}
-							clearable
-							name={customFilter.objectName ?? 'Item'}
-							valueProp="value"
-							labelProp="label"
-							value={asdfvalue as null}
-							query={customFilter.query}
-							bind:options={lastQueryOptions}
-							onchange={generateOnChangePrimitive(label)}
-						/>
-					{:else}
-						{@const label = customFilter.id}
-
-						<!-- TODO: multiselect -->
-
-						<QuerySelect
-							valueAsObject={true}
-							clearable
-							name={customFilter.objectName ?? 'Item'}
-							valueProp="value"
-							labelProp="label"
-							value={asdfvalue as null}
-							query={customFilter.query}
-							bind:options={lastQueryOptions}
-							onchange={generateOnChangeObject(label)}
-						/>
-					{/if}
-				{:else}
-					{#await options then options}
-						<MultiSelect
-							labelProp="label"
-							valueProp="value"
-							{options}
-							valueAsObject
-							onchange={(e: Array<SelectOption<unknown>>) => {
-								tableContext.paginationRepo?.filterBy(
-									def.id,
-									e.map((it) => it.value)
-								);
-							}}
-							selectedValues={selectedOptions}
-							collapseSelection
-						/>
-					{/await}
-				{/if}
-			{:else if def instanceof CheckboxDef}
-				{@const value = (() => {
-					switch (tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value) {
-						case true: {
-							return Ternary.True;
-						}
-						case false: {
-							return Ternary.False;
-						}
-						default: {
-							return Ternary.Neutral;
-						}
-					}
-				})()}
-				<div class="centered">
-					<ThreeStateRadio
-						{value}
-						yesLabel="Selected"
-						noLabel="Not Selected"
-						neutralLabel="Any"
-						neutralIcon={{ name: 'circle-minus' }}
-						onchange={(v) => {
-							switch (v) {
-								case Ternary.False: {
-									tableContext.paginationRepo?.filterBy(def.id, false);
-									return;
-								}
-								case Ternary.True: {
-									tableContext.paginationRepo?.filterBy(def.id, true);
-									return;
-								}
-								case Ternary.Neutral:
-								default: {
-									tableContext.paginationRepo?.filterBy(def.id, null);
-									return;
-								}
-							}
-						}}
-					/>
-				</div>
-			{:else if isNumeric}
-				{#if selectedNumberFilterType?.value === NumberDateFilterMode.Between}
-					<div class="input-wrapper left">
-						<NumberInput
-							data-type="quicksearch"
-							id={inputId}
-							bind:value={valueMin}
-							variant={InputVariant.Table}
-							placeholder="Min&hellip;"
-							oninput={() => {
-								tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
-							}}
-							onkeydown={closeOnCtrlF}
-						/>
-					</div>
-					<div class="input-wrapper right">
-						<NumberInput
-							data-type="quicksearch"
-							id={inputId}
-							bind:value={valueMax}
-							placeholder="Max&hellip;"
-							variant={InputVariant.Table}
-							oninput={() => {
-								tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
-							}}
-							onkeydown={closeOnCtrlF}
-						/>
-					</div>
-				{:else}
-					<div class="input-wrapper right">
-						{#await isNullFilter}
-							loading
-						{:then isNullFilter}
-							{#if isNullFilter}
-								<TextInput
-									data-type="quicksearch"
-									id={inputId}
-									value="is Null"
-									disabled
-									variant={InputVariant.Table}
-								/>
-							{:else}
-								<!-- NOTE: This is a text input in order to support the __in functionality, which is a comma separated list of numbers -->
-								<TextInput
-									data-type="quicksearch"
-									id={inputId}
-									bind:value={asdfvalue as string | null}
-									placeholder="Filter&hellip;"
-									variant={InputVariant.Table}
-									oninput={() => {
-										tableContext.paginationRepo?.filterBy(def.id, [asdfvalue || null]);
-									}}
-									onkeydown={closeOnCtrlF}
-								/>
-							{/if}
-						{:catch e}
-							{@debug e}
-						{/await}
-					</div>
-				{/if}
-			{:else if asdfvalue == null || typeof asdfvalue == 'string'}
-				<div class="input-wrapper right">
-					{#if selectedStringFilterType?.value == StringFilterMode.null}
-						<TextInput
-							data-type="quicksearch"
-							id={inputId}
-							value="is Null"
-							disabled
-							variant={InputVariant.Table}
-						/>
-					{:else if selectedStringFilterType?.value == StringFilterMode.Empty}
-						<TextInput
-							data-type="quicksearch"
-							id={inputId}
-							value="is Empty"
-							disabled
-							variant={InputVariant.Table}
-						/>
-					{:else}
-						<TextInput
-							data-type="quicksearch"
-							id={inputId}
-							oninput={() => {
-								tableContext.paginationRepo?.filterBy(def.id, asdfvalue);
-							}}
-							variant={InputVariant.Table}
-							bind:value={asdfvalue as string | null}
-							placeholder="Filter&hellip;"
-						/>
-					{/if}
-				</div>
-			{/if}
-
-			<!-- TODO button for date, checkbox or select for checkbox -->
-		</div>
-
-		{#if !isSelect && !isDate && !(def instanceof CheckboxDef)}
-			<div class="stick-right">
-				<Action
-					data-type="quicksearch"
-					size={Size.FillHeight}
-					colourSet={ColourSet.Auxiliary}
-					icon={{
-						name: 'filter-2',
-						size: Size.MediumLarge,
-						colour: Colour['$ui-blue-5'],
-					}}
-					onclick={() => {
-						if (!openedSelect) {
-							return;
-						}
-						if (openedSelect.value === selectSymbol) {
-							openedSelect.value = null;
-						} else {
-							openedSelect.value = selectSymbol;
-						}
-					}}
-				/>
-			</div>
-		{/if}
-	{/if}
-
-	{#if isSelectOpen}
-		<div
-			class="floating"
-			transition:fade={{ easing: cubicOut, duration: 100 }}
-		>
-			<div class="select-wrapper">
-				{#if isNumeric}
-					<SingleSelect
-						options={numberDateFilterTypes}
-						labelProp="label"
-						valueProp="value"
-						name="Filter Type"
-						valueAsObject
-						value={selectedNumberFilterType}
-						onchange={(newValue: SelectOption<NumberDateFilterMode> | null) => {
-							const oldFilterType = selectedNumberFilterType;
-
-							const newFilterType = newValue?.value ?? NumberDateFilterMode.In;
-
-							if (newFilterType !== oldFilterType?.value) {
-								tableContext.paginationRepo?.setFilterMode(def.id, newFilterType);
-
-								if (newFilterType === NumberDateFilterMode.Between) {
-									tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMin]);
-								} else if (newFilterType === NumberDateFilterMode.In) {
-									tableContext.paginationRepo?.filterBy(def.id, [asdfvalue]);
-								} else {
-									tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
-								}
-							}
-						}}
-						onkeydown={(e: KeyboardEvent) => {
-							e.stopPropagation();
-						}}
-					/>
-				{:else}
-					<SingleSelect
-						options={stringFilterTypes}
-						labelProp="label"
-						valueProp="value"
-						name="Filter Type"
-						valueAsObject
-						value={selectedStringFilterType}
-						onchange={(newValue: SelectOption<StringFilterMode> | null) => {
-							const filterType = newValue?.value ?? StringFilterMode.Contains;
-							tableContext.paginationRepo?.setFilterMode(def.id, filterType);
-						}}
-						onkeydown={(e: KeyboardEvent) => {
-							e.stopPropagation();
-						}}
-					/>
-				{/if}
-			</div>
-		</div>
-	{/if}
-</td>
-
-<style>td {
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive, FilterValueType"
+>
+	import { dev } from '$app/environment';
+	import Action from '../../Action.svelte';
+	import Button from '../../Button.svelte';
+	import MultiSelect from '../../MultiSelect.svelte';
+	import NumberInput from '../../NumberInput.svelte';
+	import SingleSelect from '../../SingleSelect.svelte';
+	import TextInput from '../../TextInput.svelte';
+	import ThreeStateRadio from '../../ThreeStateRadio.svelte';
+	import DateModal from '../../Touch/DateModal.svelte';
+	import { hasQuery } from '../TableHelpers.svelte.js';
+	import { devCatch, isDateTuple, isNumericArray } from '../../../Helpers/Helpers.svelte.js';
+	import { Colour, ColourSet } from '../../../scss/colours.js';
+	import { InputVariant } from '../../../Types/Internal/InputVariant.js';
+	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
+	import { Size } from '../../../Types/Internal/Size.js';
+	import { getContext, onDestroy, onMount, untrack } from 'svelte';
+	import { cubicOut } from 'svelte/easing';
+	import { fade } from 'svelte/transition';
+
+	import QuerySelect from '../../QuerySelect.svelte';
+	import { Ternary } from '../../../Types/Internal/Ternary.js';
+	import { numberDateFilterTypes } from '../Misc/numberDateFilterTypes.js';
+	import { stringFilterTypes } from '../Misc/stringFilterTypes.js';
+	import { quickFilterContextIdentifier } from '../Table.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 { QuickSearchCellProps } from './QuickSearchCellProps.js';
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	const { column, customFilters }: QuickSearchCellProps<T, FilterValueType> = $props();
+
+	const def = $derived(column.columnDef);
+
+	const customFilter = $derived(customFilters?.get(def.id));
+
+	const isSelect = $derived(
+		def instanceof SelectDef ||
+			def.filterValueType == CustomFilterType.Select ||
+			customFilter?.type === CustomFilterType.Select
+	);
+
+	const hasFilterFn = $derived(!!def.filterFn && typeof def.filterFn === 'function');
+
+	// const hasAcceptableColumnType = $derived(
+	// 	(def instanceof AccessorDef && searchableTypes.has(def.accessorType)) ||
+	// 		(def instanceof AbstractDisplayDef && searchableTypes.has(def.displayType))
+	// );
+
+	const isSearchable = $derived(
+		def.allowFiltering && (hasFilterFn || customFilters?.has(def.id) == true)
+		// ((hasFilterFn && hasAcceptableColumnType) || customFilters?.has(def.id) == true) // removed hasAcceptableColumnType due to it being redundant
+	);
+
+	const isNumeric = $derived(
+		def instanceof NumberInputDef ||
+			def.filterValueType == 'Number' ||
+			customFilter?.type === CustomFilterType.Number
+	);
+
+	function emptyOptsAndWarn(): Array<SelectOption<unknown>> {
+		console.warn(`def ${def.id} is declared as a select filter but has no getOptions() function`);
+		return [];
+	}
+	const options = $derived(
+		isSelect ? (def.getOptions?.() ?? customFilter?.options ?? emptyOptsAndWarn()) : []
+	);
+	const isDate = $derived(def instanceof DateInputDef);
+	const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
+
+	const selectSymbol = Symbol();
+
+	const openedSelect = getContext<{ value: symbol | null } | null | undefined>(
+		quickFilterContextIdentifier
+	);
+
+	const isSelectOpen = $derived(openedSelect?.value === selectSymbol);
+
+	// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+	let value: unknown | null = $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 inputId = $derived(`${tableContext.tableName}-cell-quicksearch-${column.id}`);
+
+	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 filteringStateValue = $derived(
+		tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value
+	);
+
+	$effect(() => {
+		if (isRemoteSelect && !tableContext.paginationRepo?.filtering) {
+			return;
+		}
+		void filteringStateValue;
+
+		if (hasQuery(customFilter)) {
+			if (def.debug) {
+				console.debug(`${def.id}: `, 'has query');
+			}
+
+			untrack(async () => {
+				const gotValue = filteringStateValue as Array<unknown> | undefined;
+
+				try {
+					//  as unknown as string | number | undefined;
+
+					if (gotValue != undefined) {
+						if (def.debug) {
+							console.debug(`${def.id}: query values:`, tableContext.dataRepo.__queryValues);
+						}
+						const key = customFilter.id;
+						const x = await tableContext.dataRepo.__queryValues.get(key);
+
+						if (def.debug) {
+							console.debug(`${def.id}: `, 'value:', $state.snapshot(x));
+						}
+						value = (await x) ?? null;
+					} else if (def.debug) {
+						console.debug(
+							`${def.id}: `,
+							'filtering state value was undefined',
+							$state.snapshot(tableContext.paginationRepo?.filtering)
+						);
+					}
+				} catch (e) {
+					console.warn(e);
+					value = null;
+				}
+			}).catch(devCatch);
+		} else if (isSelect) {
+			if (def.debug) {
+				console.debug(`${def.id}: `, 'is select (not query)');
+			}
+
+			if (!tableContext.paginationRepo?.filtering) {
+				return;
+			}
+
+			const gotValue = filteringStateValue as Array<unknown> | undefined;
+
+			function isSelectOption(it: unknown): it is SelectOption<unknown> {
+				return it != null && typeof it == 'object';
+			}
+			untrack(async () => {
+				try {
+					const opts = await options;
+					if (def.debug) {
+						console.debug(`${def.id}: possible options:`, $state.snapshot(opts));
+					}
+					const x = opts.filter((it) => {
+						if (!isSelectOption(it)) {
+							return false;
+						}
+						if (it.value == undefined) {
+							return true;
+						}
+
+						if (typeof it.value == 'string' || typeof it.value == 'number') {
+							return (gotValue as unknown as Array<string | number> | 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);
+					}
+				}
+			}).catch(devCatch);
+		} else if (isNumeric) {
+			if (
+				selectedNumberFilterType?.value === NumberDateFilterMode.Between &&
+				tableContext.paginationRepo?.filtering
+			) {
+				const gotValue = filteringStateValue;
+				if (gotValue != undefined) {
+					const [min, max] = gotValue as [number, number | undefined];
+					value = min;
+					valueMin = min;
+					valueMax = max ?? null;
+				} else {
+					value = valueMin = valueMax = null;
+				}
+			} else if (tableContext.paginationRepo?.filtering) {
+				const gotValue = filteringStateValue;
+
+				if (gotValue != undefined) {
+					const [min] = gotValue as [number, number | undefined];
+					value = min;
+					valueMin = min;
+					valueMax = min;
+				} else {
+					value = valueMin = valueMax = null;
+				}
+			}
+		} else if (tableContext.paginationRepo?.filtering) {
+			const gotValue = filteringStateValue;
+			if (gotValue == null || typeof gotValue == 'string' || typeof gotValue == 'number') {
+				assertNotPromise(gotValue);
+				value = gotValue;
+			}
+		}
+	});
+
+	/**
+	 * Dev-only invariant: a Promise must never reach the synchronous primitive
+	 * sink (we should always have awaited it upstream). Throws in dev to make
+	 * any regression loud; no-ops in production builds.
+	 */
+	function assertNotPromise(gotValue: unknown) {
+		if (dev && gotValue != null && typeof gotValue == 'object' && gotValue instanceof Promise) {
+			throw new Error(`Unexpected Promise`);
+		}
+	}
+	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;
+					value = valueMin?.toString();
+				} else if (valueMin == undefined) {
+					valueMin = valueMax;
+					value = valueMax.toString();
+				} else {
+					value = valueMin.toString();
+				}
+			} else if (!hasQuery(customFilter)) {
+				const gotValue = filterOption.value;
+				if (gotValue == null || typeof gotValue == 'string' || typeof gotValue == 'number') {
+					assertNotPromise(gotValue);
+					value = gotValue;
+				}
+			}
+		}
+	});
+
+	function closeOnCtrlF(e: KeyboardEvent) {
+		if (e.key.toLocaleUpperCase() === 'F' && e.ctrlKey) {
+			return;
+		}
+		e.stopPropagation();
+	}
+
+	let showFromDateModal = $state(false);
+	let showToDateModal = $state(false);
+
+	function generateOnChangeObject(label: string) {
+		return (newValue: SelectOption<unknown> | null) => {
+			tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
+			tableContext.dataRepo.__queryValues.set(label, newValue);
+			assertNotPromise(newValue);
+			value = newValue;
+		};
+	}
+
+	function generateOnChangePrimitive(label: string) {
+		// Phase 7.6: AsPrimitive QuerySelect now hands us the primitive
+		// directly (previously typed as `SelectOption` with a hidden
+		// `.value` dig). The discriminated typing makes the flow
+		// straightforward.
+		return (newValue: unknown) => {
+			tableContext.paginationRepo?.filterBy(def.id, newValue ?? null);
+			tableContext.dataRepo.__queryValues.set(label, newValue ?? null);
+			assertNotPromise(newValue);
+			value = newValue ?? null;
+		};
+	}
+
+	let isNullFilter = $derived(selectedNumberFilterType?.value == NumberDateFilterMode.null);
+
+	/**
+	 * Debounce window for typed filter inputs. For a 10k-row table each
+	 * keystroke would otherwise kick off a full filter pass; coalescing
+	 * adjacent keystrokes within `FILTER_DEBOUNCE_MS` cuts the cost to
+	 * roughly one filter pass per pause-in-typing.
+	 */
+	const FILTER_DEBOUNCE_MS = 300;
+
+	/**
+	 * Sequence counter used to discard the result of a stale debounce
+	 * timer. When the user types again before the timer fires, the
+	 * `pendingSeq` increments; only the timer whose captured `seq`
+	 * matches `pendingSeq` is allowed to call `filterBy`.
+	 */
+	let pendingSeq = 0;
+	let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+
+	function debouncedFilterBy(value: unknown): void {
+		pendingSeq += 1;
+		const seq = pendingSeq;
+		if (debounceTimer !== undefined) {
+			clearTimeout(debounceTimer);
+		}
+		debounceTimer = setTimeout(() => {
+			debounceTimer = undefined;
+			if (seq !== pendingSeq) {
+				// A newer keystroke superseded this one before the timer
+				// fired; the newer timer will handle the filter call.
+				return;
+			}
+			tableContext.paginationRepo?.filterBy(def.id, value);
+		}, FILTER_DEBOUNCE_MS);
+	}
+
+	onDestroy(() => {
+		if (debounceTimer !== undefined) {
+			clearTimeout(debounceTimer);
+			debounceTimer = undefined;
+		}
+	});
+</script>
+
+<div class="input-cell {inputId}">
+	{#if isSearchable}
+		<div class="input-wrapper-parent">
+			{#if isDate}
+				{@const dateValues = tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)
+					?.value ?? [null, null]}
+				{#if isDateTuple(dateValues)}
+					{@const [fromDate, toDate] = dateValues}
+					<div class="spaced-around">
+						<Button
+							size={Size.FillHeight}
+							fullWidth
+							onclick={() => {
+								showFromDateModal = true;
+							}}>From {fromDate?.toLocaleDateString() ?? 'Any Date'}</Button
+						>
+
+						<Button
+							size={Size.FillHeight}
+							fullWidth
+							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 isSelect}
+				{#if hasQuery(customFilter)}
+					{#if customFilter.valueAsObject !== true}
+						{@const label = customFilter.id}
+
+						<!-- TODO: multiselect -->
+
+						<!-- FIXME: Most likely Unsafe -->
+						<QuerySelect
+							valueAsObject={false}
+							clearable
+							name={customFilter.objectName ?? 'Item'}
+							valueProp="value"
+							labelProp="label"
+							value={value as null}
+							query={customFilter.query}
+							bind:options={lastQueryOptions}
+							onchange={generateOnChangePrimitive(label)}
+						/>
+					{:else}
+						{@const label = customFilter.id}
+
+						<!-- TODO: multiselect -->
+
+						<QuerySelect
+							valueAsObject={true}
+							clearable
+							name={customFilter.objectName ?? 'Item'}
+							valueProp="value"
+							labelProp="label"
+							value={value as null}
+							query={customFilter.query}
+							bind:options={lastQueryOptions}
+							onchange={generateOnChangeObject(label)}
+						/>
+					{/if}
+				{:else}
+					{#await options then options}
+						<MultiSelect
+							labelProp="label"
+							valueProp="value"
+							{options}
+							valueAsObject
+							onchange={(e: Array<SelectOption<unknown>>) => {
+								tableContext.paginationRepo?.filterBy(
+									def.id,
+									e.map((it) => it.value)
+								);
+							}}
+							selectedValues={selectedOptions}
+							collapseSelection
+						/>
+					{/await}
+				{/if}
+			{:else if def instanceof CheckboxDef}
+				{@const value = (() => {
+					switch (tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value) {
+						case true: {
+							return Ternary.True;
+						}
+						case false: {
+							return Ternary.False;
+						}
+						default: {
+							return Ternary.Neutral;
+						}
+					}
+				})()}
+				<div class="centered">
+					<ThreeStateRadio
+						{value}
+						yesLabel="Selected"
+						noLabel="Not Selected"
+						neutralLabel="Any"
+						neutralIcon={{ name: 'circle-minus' }}
+						onchange={(v) => {
+							switch (v) {
+								case Ternary.False: {
+									tableContext.paginationRepo?.filterBy(def.id, false);
+									return;
+								}
+								case Ternary.True: {
+									tableContext.paginationRepo?.filterBy(def.id, true);
+									return;
+								}
+								case Ternary.Neutral:
+								default: {
+									tableContext.paginationRepo?.filterBy(def.id, null);
+									return;
+								}
+							}
+						}}
+					/>
+				</div>
+			{:else if isNumeric}
+				{#if selectedNumberFilterType?.value === NumberDateFilterMode.Between}
+					<div class="input-wrapper left">
+						<NumberInput
+							data-type="quicksearch"
+							id={inputId}
+							bind:value={valueMin}
+							variant={InputVariant.Table}
+							placeholder="Min&hellip;"
+							oninput={() => {
+								debouncedFilterBy([valueMin, valueMax]);
+							}}
+							onkeydown={closeOnCtrlF}
+						/>
+					</div>
+					<div class="input-wrapper right">
+						<NumberInput
+							data-type="quicksearch"
+							id={inputId}
+							bind:value={valueMax}
+							placeholder="Max&hellip;"
+							variant={InputVariant.Table}
+							oninput={() => {
+								debouncedFilterBy([valueMin, valueMax]);
+							}}
+							onkeydown={closeOnCtrlF}
+						/>
+					</div>
+				{:else}
+					<div class="input-wrapper right">
+						{#await isNullFilter}
+							loading
+						{:then isNullFilter}
+							{#if isNullFilter}
+								<TextInput
+									data-type="quicksearch"
+									id={inputId}
+									value="is Null"
+									disabled
+									variant={InputVariant.Table}
+								/>
+							{:else}
+								<!-- NOTE: This is a text input in order to support the __in functionality, which is a comma separated list of numbers -->
+								<TextInput
+									data-type="quicksearch"
+									id={inputId}
+									bind:value={value as string | null}
+									placeholder="Filter&hellip;"
+									variant={InputVariant.Table}
+									oninput={() => {
+										debouncedFilterBy([value || null]);
+									}}
+									onkeydown={closeOnCtrlF}
+								/>
+							{/if}
+						{:catch e}
+							<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+							{@debug e}
+						{/await}
+					</div>
+				{/if}
+			{:else if value == null || typeof value == 'string'}
+				<div class="input-wrapper right">
+					{#if selectedStringFilterType?.value == StringFilterMode.null}
+						<TextInput
+							data-type="quicksearch"
+							id={inputId}
+							value="is Null"
+							disabled
+							variant={InputVariant.Table}
+						/>
+					{:else if selectedStringFilterType?.value == StringFilterMode.Empty}
+						<TextInput
+							data-type="quicksearch"
+							id={inputId}
+							value="is Empty"
+							disabled
+							variant={InputVariant.Table}
+						/>
+					{:else}
+						<TextInput
+							data-type="quicksearch"
+							id={inputId}
+							oninput={() => {
+								debouncedFilterBy(value);
+							}}
+							variant={InputVariant.Table}
+							bind:value={value as string | null}
+							placeholder="Filter&hellip;"
+						/>
+					{/if}
+				</div>
+			{/if}
+
+			<!-- TODO button for date, checkbox or select for checkbox -->
+		</div>
+
+		{#if !isSelect && !isDate && !(def instanceof CheckboxDef)}
+			<div class="stick-right">
+				<Action
+					data-type="quicksearch"
+					size={Size.FillHeight}
+					colourSet={ColourSet.Auxiliary}
+					icon={{
+						name: 'filter-2',
+						size: Size.MediumLarge,
+						colour: Colour['$ui-blue-5'],
+					}}
+					onclick={() => {
+						if (!openedSelect) {
+							return;
+						}
+						if (openedSelect.value === selectSymbol) {
+							openedSelect.value = null;
+						} else {
+							openedSelect.value = selectSymbol;
+						}
+					}}
+				/>
+			</div>
+		{/if}
+	{/if}
+
+	{#if isSelectOpen}
+		<div
+			class="floating"
+			transition:fade={{ easing: cubicOut, duration: 100 }}
+		>
+			<div class="select-wrapper">
+				{#if isNumeric}
+					<SingleSelect
+						options={numberDateFilterTypes}
+						labelProp="label"
+						valueProp="value"
+						name="Filter Type"
+						valueAsObject
+						value={selectedNumberFilterType}
+						onchange={(newValue: SelectOption<NumberDateFilterMode> | null) => {
+							const oldFilterType = selectedNumberFilterType;
+
+							const newFilterType = newValue?.value ?? NumberDateFilterMode.In;
+
+							if (newFilterType !== oldFilterType?.value) {
+								tableContext.paginationRepo?.setFilterMode(def.id, newFilterType);
+
+								if (newFilterType === NumberDateFilterMode.Between) {
+									tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMin]);
+								} else if (newFilterType === NumberDateFilterMode.In) {
+									tableContext.paginationRepo?.filterBy(def.id, [value]);
+								} else {
+									tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
+								}
+							}
+						}}
+						onkeydown={(e: KeyboardEvent) => {
+							e.stopPropagation();
+						}}
+					/>
+				{:else}
+					<SingleSelect
+						options={stringFilterTypes}
+						labelProp="label"
+						valueProp="value"
+						name="Filter Type"
+						valueAsObject
+						value={selectedStringFilterType}
+						onchange={(newValue: SelectOption<StringFilterMode> | null) => {
+							const filterType = newValue?.value ?? StringFilterMode.Contains;
+							tableContext.paginationRepo?.setFilterMode(def.id, filterType);
+						}}
+						onkeydown={(e: KeyboardEvent) => {
+							e.stopPropagation();
+						}}
+					/>
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<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);
@@ -639,14 +693,16 @@
   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.input-cell {
+.input-cell {
   padding: unset;
   box-sizing: border-box;
-  vertical-align: middle;
 }
 
 .spaced-around {
@@ -660,14 +716,14 @@ td.input-cell {
   justify-content: space-around;
 }
 
-td {
+div.input-cell {
   background-color: #f4f7f9;
   height: var(--height);
   overflow: visible;
   padding-left: 0;
   padding-right: 0;
 }
-td div.stick-right {
+div.input-cell div.stick-right {
   position: absolute;
   right: 0.5rem;
   height: 100%;
@@ -736,10 +792,10 @@ div.input-wrapper-parent div.input-wrapper.right {
   --input-padding-right: 2.6rem;
 }
 
-td {
+[role=cell] {
   --input-width: 100%;
 }
-td .input-wrapper-parent {
+[role=cell] .input-wrapper-parent {
   width: 100%;
 }
 
@@ -753,4 +809,4 @@ td .input-wrapper-parent {
   height: 60px;
   --input-height: 60px;
   background-color: #ffffff;
-}</style>
+}</style>