@lavalogic/scoria 0.40.13 → 0.40.15

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

@@ -1,681 +1,604 @@
-<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');
-
-	// A column is filterable when it has any of: a local `filterFn`, a
-	// declared `filterValueType` (server-side filtering — required for
-	// remote-pagination tables whose data repo never assigns `filterFn`),
-	// or a `customFilters` entry from `defsWrapper.remoteFilters`.
-	const hasDeclaredFilterType = $derived(def.filterValueType != null);
-
-	const isSearchable = $derived(
-		def.allowFiltering &&
-			(hasFilterFn || hasDeclaredFilterType || customFilters?.has(def.id) == true)
-	);
-
-	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 [];
+<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 { 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 { CustomFilterType } from "../Types/Filtering/CustomFilterType.js";
+import { NumberDateFilterMode } from "../Types/Filtering/NumberDateFilterMode.js";
+import { StringFilterMode } from "../Types/Filtering/StringFilterMode.js";
+const tableContext = getContext(TableContext.identifier);
+const { column, customFilters } = $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");
+// A column is filterable when it has any of: a local `filterFn`, a
+// declared `filterValueType` (server-side filtering — required for
+// remote-pagination tables whose data repo never assigns `filterFn`),
+// or a `customFilters` entry from `defsWrapper.remoteFilters`.
+const hasDeclaredFilterType = $derived(def.filterValueType != null);
+const isSearchable = $derived(def.allowFiltering && (hasFilterFn || hasDeclaredFilterType || customFilters?.has(def.id) == true));
+const isNumeric = $derived(def instanceof NumberInputDef || def.filterValueType == "Number" || customFilter?.type === CustomFilterType.Number);
+function emptyOptsAndWarn() {
+	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(quickFilterContextIdentifier);
+const isSelectOpen = $derived(openedSelect?.value === selectSymbol);
+// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+let value = $state(null);
+let valueMin = $state(null);
+let valueMax = $state(null);
+let selectedOptions = $state([]);
+let lastQueryOptions = $state([]);
+const inputId = $derived(`${tableContext.tableName}-cell-quicksearch-${column.id}`);
+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 filteringStateValue = $derived(tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value);
+$effect(() => {
+	if (isRemoteSelect && !tableContext.paginationRepo?.filtering) {
+		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");
 		}
-		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.queryValues.snapshot());
-						}
-						const x = tableContext.queryValues.get(def);
-
-						if (def.debug) {
-							console.debug(`${def.id}: `, 'value:', $state.snapshot(x));
-						}
-						value = x ?? null;
-					} else if (def.debug) {
-						console.debug(
-							`${def.id}: `,
-							'filtering state value was undefined',
-							$state.snapshot(tableContext.paginationRepo?.filtering)
-						);
+		untrack(async () => {
+			const gotValue = filteringStateValue;
+			try {
+				//  as unknown as string | number | undefined;
+				if (gotValue != undefined) {
+					if (def.debug) {
+						console.debug(`${def.id}: query values:`, tableContext.queryValues.snapshot());
 					}
-				} 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;
+					const x = tableContext.queryValues.get(def);
 					if (def.debug) {
-						console.debug(`${def.id}: possible options:`, $state.snapshot(opts));
+						console.debug(`${def.id}: `, "value:", $state.snapshot(x));
 					}
-					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
-							);
-						}
-
+					value = 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;
+		function isSelectOption(it) {
+			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 (def.debug) {
-						console.debug(`${def.id}: `, 'selected options:', x);
 					}
-					selectedOptions = x;
-				} catch (e) {
-					if (dev || def.debug) {
-						console.debug(`${def.id}: `, e);
+					if (it.value == undefined) {
+						return true;
 					}
+					if (typeof it.value == "string" || typeof it.value == "number") {
+						return gotValue?.includes(it.value);
+					}
+					return false;
+				});
+				if (def.debug) {
+					console.debug(`${def.id}: `, "selected options:", x);
 				}
-			}).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;
+				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;
+				value = min;
+				valueMin = min;
+				valueMax = max ?? null;
+			} 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;
+			if (gotValue != undefined) {
+				const [min] = gotValue;
+				value = min;
+				valueMin = min;
+				valueMax = min;
+			} else {
+				value = valueMin = valueMax = null;
 			}
 		}
-	});
-
-	/**
-	 * 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`);
+	} else if (tableContext.paginationRepo?.filtering) {
+		const gotValue = filteringStateValue;
+		if (gotValue == null || typeof gotValue == "string" || typeof gotValue == "number") {
+			assertNotPromise(gotValue);
+			value = gotValue;
 		}
 	}
-	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;
-				}
+});
+/**
+* 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) {
+	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.queryValues.set(def, newValue);
-			assertNotPromise(newValue);
-			value = newValue;
-		};
+});
+function closeOnCtrlF(e) {
+	if (e.key.toLocaleUpperCase() === "F" && e.ctrlKey) {
+		return;
 	}
-
-	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);
-			assertNotPromise(newValue);
-			value = newValue ?? null;
-		};
+	e.stopPropagation();
+}
+let showFromDateModal = $state(false);
+let showToDateModal = $state(false);
+function generateOnChangeObject(_label) {
+	return (newValue) => {
+		tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
+		tableContext.queryValues.set(def, newValue);
+		assertNotPromise(newValue);
+		value = newValue;
+	};
+}
+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);
+		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;
+function debouncedFilterBy(value) {
+	pendingSeq += 1;
+	const seq = pendingSeq;
+	if (debounceTimer !== undefined) {
+		clearTimeout(debounceTimer);
 	}
-
-	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;
 		}
-		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);
+		tableContext.paginationRepo?.filterBy(def.id, value);
+	}, FILTER_DEBOUNCE_MS);
+}
+onDestroy(() => {
+	if (debounceTimer !== undefined) {
+		clearTimeout(debounceTimer);
+		debounceTimer = undefined;
 	}
-
-	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>
-
+});
+</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,
@@ -815,4 +738,4 @@ div.input-wrapper-parent > :global(.select-wrapper) {
   height: 60px;
   --input-height: 60px;
   background-color: #ffffff;
-}</style>
+}</style>