@lavalogic/scoria 0.16.3 → 0.17.0

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

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" generics="T extends object">
+<script
+	lang="ts"
+	generics="T extends object"
+>
 	import Button from '../../Button.svelte';
 	import { devCatch } from '../../../Helpers/Helpers.svelte.js';
 	import { Side } from '../../../Types/Internal/Side.js';
@@ -21,7 +24,7 @@
 		[ExpandedPanel.None]: null,
 		[ExpandedPanel.Column]: ColumnPanel,
 		[ExpandedPanel.Filter]: FilterPanel,
-		[ExpandedPanel.Toolbox]: ToolboxPanel
+		[ExpandedPanel.Toolbox]: ToolboxPanel,
 	};
 
 	let expandedPanel = $state<ExpandedPanel | null>(null);
@@ -49,7 +52,10 @@
 	}
 </script>
 
-<svelte:window onclick={handleClickOutside} onkeydown={handleEscKey} />
+<svelte:window
+	onclick={handleClickOutside}
+	onkeydown={handleEscKey}
+/>
 
 {#if ExpandedPanelElement != null}
 	<SidePanel toolbarPosition={tableContext.toolbarPosition}>
@@ -70,7 +76,7 @@
 		iconTop={{
 			// colour: Colour.$alt,
 			name: 'assessment',
-			size: Size.Medium
+			size: Size.Medium,
 		}}
 		label="Quick Filter"
 	/>
@@ -85,7 +91,7 @@
 		iconTop={{
 			// colour: Colour.$alt,
 			name: 'filter-bars',
-			size: Size.Medium
+			size: Size.Medium,
 		}}
 		label="Advanced Filter"
 	/>
@@ -99,7 +105,7 @@
 		iconTop={{
 			// colour: Colour.$alt,
 			name: 'columns',
-			size: Size.Medium
+			size: Size.Medium,
 		}}
 		label="Modify Columns"
 	/>
@@ -113,7 +119,7 @@
 		iconTop={{
 			// colour: Colour.$alt,
 			name: 'category',
-			size: Size.Medium
+			size: Size.Medium,
 		}}
 		label="My Tool Box"
 	/>
@@ -130,7 +136,7 @@
 			iconTop={{
 				// colour: Colour.$alt,
 				name: 'refresh',
-				size: Size.Medium
+				size: Size.Medium,
 			}}
 			label="Refresh"
 		/>

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

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" generics="T extends object">
+<script
+	lang="ts"
+	generics="T extends object"
+>
 	import Checkbox from '../../Checkbox.svelte';
 	import DesktopModal from '../../DesktopModal.svelte';
 	import { getContext } from 'svelte';

package/dist/Components/Table/Table.svelte

@@ -1,15 +1,17 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script
+	lang="ts"
+	module
+>
 	import {
 		ContextMenuContext,
-		type IContextMenuOption
+		type IContextMenuOption,
 	} from '../../Contexts/ContextMenuContext.svelte';
 	import { devCatch, refWrapper } from '../../Helpers/Helpers.svelte';
 	import type { RefWrapper } from '../../Types/Internal/RefWrapper.js';
 	import { getContext, onMount, setContext, tick, untrack } from 'svelte';
 	import LoadingOverlay from '../LoadingOverlay.svelte';
-	import type { HeightData } from './Body/HeightData.js';
 	import { shownPopup } from './Body/Rows/Columns/ActionsCell.svelte';
 	import TableBody from './Body/TableBody.svelte';
 	import TableHead from './Headers/TableHead.svelte';
@@ -39,7 +41,10 @@
 	const openedQuickFilterSelect = refWrapper(null);
 </script>
 
-<script lang="ts" generics="T extends object,IdType extends Primitive">
+<script
+	lang="ts"
+	generics="T extends object,IdType extends Primitive"
+>
 	const { nested = false, tableContext }: TableProps<T, IdType> = $props();
 
 	// NOTE: known limitation. This is passed as a wrapper, and they should never require reassignment. It is deeply reactive
@@ -78,7 +83,7 @@
 				element?.scrollIntoView({
 					behavior: 'instant',
 					block: 'nearest',
-					inline: 'nearest'
+					inline: 'nearest',
 				});
 			}
 		});
@@ -94,7 +99,7 @@
 			cell?.scrollIntoView({
 				behavior: 'instant',
 				block: 'nearest',
-				inline: 'nearest'
+				inline: 'nearest',
 			});
 		}
 	});
@@ -137,7 +142,7 @@
 					tableContext.moveFocus({
 						column: columnIndex,
 						row,
-						id: columnId
+						id: columnId,
 					});
 				}
 			}
@@ -153,8 +158,8 @@
 					callback: () => {
 						tableContext.copyDataToClipboard().catch(devCatch);
 					},
-					text: 'Copy Selection'
-				}
+					text: 'Copy Selection',
+				},
 			];
 
 			if (tableContext.hasHighlightedItems) {
@@ -162,7 +167,7 @@
 					callback: () => {
 						tableContext.copyHighlightedRowsToClipboard().catch(devCatch);
 					},
-					text: 'Copy Highlighted Rows'
+					text: 'Copy Highlighted Rows',
 				});
 			}
 
@@ -284,46 +289,46 @@
 		}
 	});
 
-	type SvelteTableElement = {
-		rowHeights: RefWrapper<Array<number>>;
-	};
-
-	let leftTable: SvelteTableElement | undefined = $state();
-	let centreTable: SvelteTableElement | undefined = $state();
-	let rightTable: SvelteTableElement | undefined = $state();
-
-	const totalRowSizes: Array<HeightData<T>> = $derived.by(() => {
-		if (!leftTable || !centreTable || !rightTable) {
-			return [];
-		}
-		const centre = centreTable.rowHeights.value;
-		const right = rightTable.rowHeights.value;
-
-		return leftTable.rowHeights.value.map((_leftHeight, index) => {
-			const leftHeight = _leftHeight || 0;
-			const centreHeight = centre[index] || 0;
-			const rightHeight = right[index] || 0;
-
-			const maxHeight = Math.max(leftHeight, centreHeight, rightHeight);
-			const applyTo: HeightData<T>['applyTo'] = [];
-
-			if (leftHeight < maxHeight) {
-				applyTo.push('left');
-			}
-			if (centreHeight < maxHeight) {
-				applyTo.push('centre');
-			}
-			if (rightHeight < maxHeight) {
-				applyTo.push('right');
-			}
-
-			return {
-				index,
-				applyTo,
-				maxHeight
-			};
-		});
-	});
+	// type SvelteTableElement = {
+	// 	rowHeights: RefWrapper<Array<number>>;
+	// };
+
+	// let leftTable: SvelteTableElement | undefined = $state();
+	// let centreTable: SvelteTableElement | undefined = $state();
+	// let rightTable: SvelteTableElement | undefined = $state();
+
+	// const totalRowSizes: Array<HeightData<T>> = $derived.by(() => {
+	// 	if (!leftTable || !centreTable || !rightTable) {
+	// 		return [];
+	// 	}
+	// 	const centre = centreTable.rowHeights.value;
+	// 	const right = rightTable.rowHeights.value;
+
+	// 	return leftTable.rowHeights.value.map((_leftHeight, index) => {
+	// 		const leftHeight = _leftHeight || 0;
+	// 		const centreHeight = centre[index] || 0;
+	// 		const rightHeight = right[index] || 0;
+
+	// 		const maxHeight = Math.max(leftHeight, centreHeight, rightHeight);
+	// 		const applyTo: HeightData<T>['applyTo'] = [];
+
+	// 		if (leftHeight < maxHeight) {
+	// 			applyTo.push('left');
+	// 		}
+	// 		if (centreHeight < maxHeight) {
+	// 			applyTo.push('centre');
+	// 		}
+	// 		if (rightHeight < maxHeight) {
+	// 			applyTo.push('right');
+	// 		}
+
+	// 		return {
+	// 			index,
+	// 			applyTo,
+	// 			maxHeight
+	// 		};
+	// 	});
+	// });
 </script>
 
 <svelte:window
@@ -356,12 +361,21 @@
 />
 
 <svelte:boundary>
-	<div class="grid" class:nested>
+	<div
+		class="grid"
+		class:nested
+	>
 		{#if tableContext.dataRepo.isLoading}
-			<LoadingOverlay absolute borderRadius="4px" />
+			<LoadingOverlay
+				absolute
+				borderRadius="4px"
+			/>
 		{/if}
 
-		<div class="horizontal-bar" class:border={tableContext.toolbarPosition === ToolbarPosition.Top}>
+		<div
+			class="horizontal-bar"
+			class:border={tableContext.toolbarPosition === ToolbarPosition.Top}
+		>
 			{#if tableContext.toolbarPosition === ToolbarPosition.Top}
 				<TableHorizontalBar />
 			{/if}
@@ -405,45 +419,71 @@
 			class:quick-filtering={tableContext.showQuickFiltering}
 			onkeydown={tableContext.handleTdKeydown}
 		>
-			<div class="flex_table" bind:this={ref} class:nested>
-				<div bind:this={unfocusRef} class="table-wrapper" oncontextmenu={openContextMenu}>
+			<div
+				class="flex_table"
+				bind:this={ref}
+				class:nested
+			>
+				<div
+					bind:this={unfocusRef}
+					class="table-wrapper"
+					oncontextmenu={openContextMenu}
+				>
 					<!-- {#if leftTotalSize > 0} -->
-					<table class="datatable__table left" style="min-width: {leftTotalSize}px">
-						<TableHead showHighlight={leftTotalSize > 0} side="left" />
+					<table
+						class="datatable__table left"
+						style="min-width: {leftTotalSize}px"
+					>
+						<TableHead
+							showHighlight={leftTotalSize > 0}
+							side="left"
+						/>
 						<TableBody
 							includeHighlight={appropriateSide == 'left'}
 							columns={leftColumns}
-							heights={totalRowSizes}
 							side="left"
-							bind:this={leftTable}
 						/>
+						<!-- heights={totalRowSizes} -->
+						<!-- bind:this={leftTable} -->
 					</table>
 					<!-- {/if} -->
 
 					<!-- {#if centreTotalSize > 0} -->
 
-					<table class="datatable__table centre" style="min-width: {centreTotalSize}px">
-						<TableHead showHighlight={leftTotalSize == 0} side="centre" />
+					<table
+						class="datatable__table centre"
+						style="min-width: {centreTotalSize}px"
+					>
+						<TableHead
+							showHighlight={leftTotalSize == 0}
+							side="centre"
+						/>
 						<TableBody
 							includeHighlight={appropriateSide == 'centre'}
 							columns={centreColumns}
-							heights={totalRowSizes}
 							side="centre"
-							bind:this={centreTable}
 						/>
+						<!-- heights={totalRowSizes}
+							bind:this={centreTable} -->
 					</table>
 					<!-- {/if} -->
 
 					<!-- {#if rightTotalSize > 0} -->
-					<table class="datatable__table right" style="min-width: {rightTotalSize}px">
-						<TableHead showHighlight={false} side="right" />
+					<table
+						class="datatable__table right"
+						style="min-width: {rightTotalSize}px"
+					>
+						<TableHead
+							showHighlight={false}
+							side="right"
+						/>
 						<TableBody
 							includeHighlight={appropriateSide == 'right'}
 							columns={rightColumns}
-							heights={totalRowSizes}
 							side="right"
-							bind:this={rightTable}
 						/>
+						<!-- heights={totalRowSizes}
+							bind:this={rightTable} -->
 					</table>
 					<!-- {/if} -->
 				</div>

package/dist/Components/Table/Types/Columns/Column.d.ts

@@ -1,7 +1,7 @@
 import type { ColumnDef } from './Definitions/ColumnDef.svelte.js';
-export interface Column<T extends object, in FilterFnType = unknown, out OptionsValueType = unknown> {
+export interface Column<T extends object, in FilterFnType = never, out FilterOptionsType = unknown> {
     id: string;
-    columnDef: ColumnDef<T, FilterFnType, OptionsValueType>;
+    columnDef: ColumnDef<T, FilterFnType, FilterOptionsType>;
     getCanSort: () => boolean;
     getToggleSortingHandler: () => ((e: MouseEvent) => void) | undefined;
     getIsSorted: () => 'asc' | 'desc' | 'none';

package/dist/Components/Table/Types/Columns/Definitions/Accessors/AccessorDef.svelte.d.ts

@@ -1,10 +1,10 @@
 import { ColumnDef, type ColumnDefProps } from '../ColumnDef.svelte.js';
 import type { AccessorType } from './AccessorType.js';
-export interface AccessorDefProps<T extends object, in FilterValueType, out OptionsValueType> extends ColumnDefProps<T, FilterValueType, OptionsValueType> {
+export interface AccessorDefProps<T extends object, in FilterValueType, out FilterOptionsType> extends ColumnDefProps<T, FilterValueType, FilterOptionsType> {
     readonly id: string & keyof T;
 }
-export declare abstract class AccessorDef<T extends object, in FilterValueType, out OptionsValueType> extends ColumnDef<T, FilterValueType, OptionsValueType> {
-    constructor(props: AccessorDefProps<T, FilterValueType, OptionsValueType>);
+export declare abstract class AccessorDef<T extends object, in FilterValueType, out FilterOptionsType> extends ColumnDef<T, FilterValueType, FilterOptionsType> {
+    constructor(props: AccessorDefProps<T, FilterValueType, FilterOptionsType>);
     readonly columnType: "Accessor";
     abstract readonly accessorType: AccessorType;
 }

package/dist/Components/Table/Types/Columns/Definitions/Accessors/CheckboxDef.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
 import type { BoolFilterValueType, FilterFn } from '../../../Filtering/FilterFn.js';
 import { AccessorDef, type AccessorDefProps } from './AccessorDef.svelte.js';
 export interface CheckboxDefProps<T extends object, in FilterValueType = BoolFilterValueType, out SelectValueType = BoolFilterValueType> extends AccessorDefProps<T, FilterValueType, SelectValueType> {
@@ -7,6 +6,6 @@ export declare class CheckboxDef<T extends object, in FilterValueType = BoolFilt
     readonly accessorType: "Checkbox";
     constructor(props: CheckboxDefProps<T, FilterValueType, SelectValueType>);
     private _filterFn;
-    get filterFn(): CustomFilterFn | FilterFn<T, FilterValueType> | undefined;
-    set filterFn(v: CustomFilterFn | FilterFn<T, FilterValueType> | undefined);
+    get filterFn(): FilterFn<T, FilterValueType> | undefined;
+    set filterFn(v: FilterFn<T, FilterValueType> | undefined);
 }

package/dist/Components/Table/Types/Columns/Definitions/Accessors/DateInputDef.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
 import type { DateFilterValueType, FilterFn } from '../../../Filtering/FilterFn.js';
 import { AccessorDef, type AccessorDefProps } from './AccessorDef.svelte.js';
 export interface DateInputDefProps<T extends object, in FilterValueType = DateFilterValueType, out SelectValueType = DateFilterValueType> extends AccessorDefProps<T, FilterValueType, SelectValueType> {
@@ -8,7 +7,7 @@ export declare class DateInputDef<T extends object, in FilterValueType = DateFil
     readonly accessorType: "Date";
     constructor(props: DateInputDefProps<T, FilterValueType, SelectValueType>);
     private _filterFn;
-    get filterFn(): FilterFn<T, FilterValueType> | CustomFilterFn | undefined;
-    set filterFn(v: FilterFn<T, FilterValueType> | CustomFilterFn | undefined);
+    get filterFn(): FilterFn<T, FilterValueType> | undefined;
+    set filterFn(v: FilterFn<T, FilterValueType> | undefined);
     readonly showTime: boolean;
 }

package/dist/Components/Table/Types/Columns/Definitions/Accessors/NumberInputDef.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
 import type { FilterFn, NumberFilterValueType } from '../../../Filtering/FilterFn.js';
 import { AccessorDef, type AccessorDefProps } from './AccessorDef.svelte.js';
 export interface NumberInputDefProps<T extends object, in FilterValueType = NumberFilterValueType, out OptionssValueType = NumberFilterValueType> extends AccessorDefProps<T, FilterValueType, OptionssValueType> {
@@ -11,6 +10,6 @@ export declare class NumberInputDef<T extends object, in FilterValueType = Numbe
     readonly min: number;
     readonly max: number;
     private _filterFn;
-    get filterFn(): CustomFilterFn | FilterFn<T, FilterValueType> | undefined;
-    set filterFn(v: CustomFilterFn | FilterFn<T, FilterValueType> | undefined);
+    get filterFn(): FilterFn<T, FilterValueType> | undefined;
+    set filterFn(v: FilterFn<T, FilterValueType> | undefined);
 }

package/dist/Components/Table/Types/Columns/Definitions/Accessors/QueryDef.svelte.d.ts

@@ -1,16 +1,15 @@
 import type { SelectOption } from '../../../../../../Types/Internal/SelectOption.js';
-import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
 import type { FilterFn } from '../../../Filtering/FilterFn.js';
 import { AccessorDef, type AccessorDefProps } from './AccessorDef.svelte.js';
-export interface QueryDefProps<T extends object, in FilterValueType = unknown, out OptionsValueType = unknown> extends AccessorDefProps<T, FilterValueType, OptionsValueType> {
+export interface QueryDefProps<T extends object, in FilterValueType = unknown, out FilterOptionsType = unknown> extends AccessorDefProps<T, FilterValueType, FilterOptionsType> {
     query: (queryString: string, item: T, index: number) => Promise<Array<SelectOption<unknown>>>;
     getDisplayValue: (item: T, index: number) => string | null | Promise<string | null>;
     clearable?: boolean;
 }
-export declare class QueryDef<T extends object, FilterValueType = unknown, out OptionsValueType = unknown> extends AccessorDef<T, FilterValueType, OptionsValueType> {
+export declare class QueryDef<T extends object, FilterValueType = unknown, out FilterOptionsType = unknown> extends AccessorDef<T, FilterValueType, FilterOptionsType> {
     readonly accessorType: "Query";
-    constructor(props: QueryDefProps<T, FilterValueType, OptionsValueType>);
-    readonly filterFn: CustomFilterFn | FilterFn<T, FilterValueType> | undefined;
+    constructor(props: QueryDefProps<T, FilterValueType, FilterOptionsType>);
+    readonly filterFn: FilterFn<T, FilterValueType> | undefined;
     getDisplayValue: (item: T, index: number) => string | null | Promise<string | null>;
     readonly query: (queryString: string, item: T, index: number) => Promise<Array<SelectOption<unknown>>>;
     readonly clearable: boolean;

package/dist/Components/Table/Types/Columns/Definitions/Accessors/SelectDef.svelte.d.ts

@@ -1,5 +1,4 @@
 import type { SelectOption } from '../../../../../../Types/Internal/SelectOption.js';
-import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
 import type { FilterFn } from '../../../Filtering/FilterFn.js';
 import { AccessorDef, type AccessorDefProps } from './AccessorDef.svelte.js';
 export interface SelectDefProps<T extends object, in FilterValueType, out SelectValueType> extends AccessorDefProps<T, FilterValueType, SelectValueType> {
@@ -14,8 +13,8 @@ export declare class SelectDef<T extends object, in FilterValueType, out SelectV
     constructor(props: SelectDefProps<T, FilterValueType, SelectValueType>);
     readonly accessorType: "Select";
     private _filterFn;
-    get filterFn(): FilterFn<T, FilterValueType> | CustomFilterFn | undefined;
-    set filterFn(v: FilterFn<T, FilterValueType> | CustomFilterFn | undefined);
+    get filterFn(): FilterFn<T, FilterValueType> | undefined;
+    set filterFn(v: FilterFn<T, FilterValueType> | undefined);
     readonly sortingFn?: (a: T, b: T) => 1 | -1 | 0;
     readonly optional: boolean;
     readonly clearable: boolean;

package/dist/Components/Table/Types/Columns/Definitions/Accessors/TextInputDef.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
 import type { FilterFn, StringFilterValueType } from '../../../Filtering/FilterFn.js';
 import { AccessorDef, type AccessorDefProps } from './AccessorDef.svelte.js';
 export interface TextInputDefProps<T extends object, in FilterValueType = StringFilterValueType, out SelectValueType = StringFilterValueType> extends AccessorDefProps<T, FilterValueType, SelectValueType> {
@@ -8,6 +7,6 @@ export declare class TextInputDef<T extends object, in FilterValueType = StringF
     readonly accessorType: "Text";
     constructor(props: TextInputDefProps<T, FilterValueType, SelectValueType>);
     private _filterFn;
-    get filterFn(): CustomFilterFn | FilterFn<T, FilterValueType> | undefined;
-    set filterFn(v: CustomFilterFn | FilterFn<T, FilterValueType> | undefined);
+    get filterFn(): FilterFn<T, FilterValueType> | undefined;
+    set filterFn(v: FilterFn<T, FilterValueType> | undefined);
 }

package/dist/Components/Table/Types/Columns/Definitions/Actions/ActionsDef.svelte.d.ts

@@ -1,12 +1,12 @@
 import type { ColourSet } from '../../../../../../scss/colours.js';
 import type { TableActionButton } from '../../TableActionButton.js';
 import { ColumnDef, type ColumnDefProps } from '../ColumnDef.svelte.js';
-export interface ActionsDefProps<T extends object, in FilterValueType, out OptionsValueType = unknown> extends Omit<ColumnDefProps<T, FilterValueType, OptionsValueType>, 'id' | 'header'> {
+export interface ActionsDefProps<T extends object, in FilterValueType, out FilterOptionsType = unknown> extends Omit<ColumnDefProps<T, FilterValueType, FilterOptionsType>, 'id' | 'header'> {
     actions: Array<TableActionButton<T>>;
     isEnabled?: (item: T, index: number, button: TableActionButton<T>) => boolean | Promise<boolean>;
     getColourSet?: (item: T, index: number, button: TableActionButton<T>) => ColourSet;
 }
-export declare class ActionsDef<T extends object, FilterValueType, out OptionsValueType = unknown> extends ColumnDef<T, FilterValueType, OptionsValueType> {
+export declare class ActionsDef<T extends object, FilterValueType, out FilterOptionsType = unknown> extends ColumnDef<T, FilterValueType, FilterOptionsType> {
     constructor(props: ActionsDefProps<T, FilterValueType>);
     readonly columnType: "Actions";
     readonly actions: Array<TableActionButton<T>>;

package/dist/Components/Table/Types/Columns/Definitions/Actions/ActionsDef.svelte.js

@@ -7,7 +7,7 @@ export class ActionsDef extends ColumnDef {
             id: `actions-${generateUUID()}`,
             header: 'Actions',
             allowSorting: false,
-            allowFiltering: false
+            allowFiltering: false,
         });
         this.actions = $derived(props.actions);
         this.isEnabled = $derived(props.isEnabled);

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.d.ts

@@ -1,7 +1,6 @@
 import type { Pixels } from '../../../../../Types/Internal/Misc.js';
 import type { SelectOption } from '../../../../../Types/Internal/SelectOption.js';
 import type { Snippet } from 'svelte';
-import type { CustomFilterFn } from '../../Filtering/CustomFilterFn.js';
 import type { FilterFn } from '../../Filtering/FilterFn.js';
 import type { FilterValueType } from '../../Filtering/FilterValueType.js';
 import { ColumnType } from '../ColumnType.js';
@@ -20,13 +19,13 @@ export interface ColumnDefProps<T extends object, in FilterFnType, out OptionsTy
     isEditable?: (item: T, index: number) => boolean | Promise<boolean>;
     resizable?: boolean;
     isValid?: ValidationFn<T>;
-    filterFn?: FilterFn<T, FilterFnType> | CustomFilterFn;
+    filterFn?: FilterFn<T, FilterFnType>;
     filterValueType?: FilterValueType;
     getOptions?: () => Array<SelectOption<OptionsType>> | Promise<Array<SelectOption<OptionsType>>>;
     accessorFn?: AccessorFn<T>;
     getDisplayValue?: (item: T, index: number) => string | null | Promise<string | null>;
 }
-export declare abstract class ColumnDef<T extends object, in FilterFnType = unknown, out OptionsType = unknown> {
+export declare abstract class ColumnDef<T extends object, in FilterFnType = never, out OptionsType = unknown> {
     protected constructor(props: ColumnDefProps<T, FilterFnType, OptionsType>);
     readonly id: string;
     debug: boolean;
@@ -39,7 +38,7 @@ export declare abstract class ColumnDef<T extends object, in FilterFnType = unkn
     readonly allowFiltering: boolean;
     readonly isValid: ValidationFn<T> | undefined;
     readonly accessorFn: AccessorFn<T> | undefined;
-    abstract filterFn: FilterFn<T, FilterFnType> | CustomFilterFn | undefined;
+    abstract filterFn: FilterFn<T, FilterFnType> | undefined;
     private _minSize;
     get minSize(): Pixels;
     set minSize(v: Pixels);

package/dist/Components/Table/Types/Columns/Definitions/ColumnDefSet.d.ts

@@ -7,5 +7,5 @@ export interface ColumnDefSet<T extends object> {
     sortingState: SortingState;
     visibilityState: VisibilityState;
     columnPinningState: ColumnPinningState;
-    columnDefs: Array<ColumnDef<T>>;
+    columnDefs: Array<ColumnDef<T, never, unknown>>;
 }

package/dist/Components/Table/Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.d.ts

@@ -2,17 +2,18 @@ import type { Component } from 'svelte';
 import type { DisplayType } from '../../DisplayType.js';
 import type { TableCell } from '../../TableCell.js';
 import { ColumnDef, type ColumnDefProps } from '../ColumnDef.svelte.js';
-export interface DisplayDefModalProps<T extends object, in FilterValueType = unknown, out OptionsValueType = unknown> {
-    cell: TableCell<T, FilterValueType, OptionsValueType>;
+export interface DisplayDefModalProps<T extends object, in FilterValueType = never, out FilterOptionsType = unknown> {
+    cell: TableCell<T, FilterValueType, FilterOptionsType>;
     onclose: () => void;
     onsubmit: () => void;
 }
-export interface AbstractDisplayDefProps<T extends object, FilterFnType, out OptionsValueType = unknown> extends ColumnDefProps<T, FilterFnType, OptionsValueType> {
+export interface AbstractDisplayDefProps<T extends object, in FilterFnType, out FilterOptionsType> extends ColumnDefProps<T, FilterFnType, FilterOptionsType> {
     modal?: Component<any, any, any>;
 }
-export declare abstract class AbstractDisplayDef<T extends object, FilterValueType, out OptionsValueType = unknown> extends ColumnDef<T, FilterValueType, OptionsValueType> {
+export declare abstract class AbstractDisplayDef<T extends object, in FilterValueType = never, out FilterOptionsType = unknown> extends ColumnDef<T, FilterValueType, FilterOptionsType> {
     abstract readonly displayType: DisplayType;
-    constructor(props: AbstractDisplayDefProps<T, FilterValueType, OptionsValueType>);
+    constructor(props: AbstractDisplayDefProps<T, FilterValueType, FilterOptionsType>);
     readonly columnType: "Display";
-    readonly modal: Component<DisplayDefModalProps<T, FilterValueType>, any, any> | undefined;
+    readonly modal: //HACK out parameter. Need to check if it's possible to be strict
+    Component<DisplayDefModalProps<T>, any, any> | undefined;
 }

package/dist/Components/Table/Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js

@@ -6,6 +6,5 @@ export class AbstractDisplayDef extends ColumnDef {
         this.modal = $derived(props.modal);
     }
     columnType = ColumnType.Display;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    modal; //HACK out parameter. Need to check if it's possible to be strict
+    modal;
 }

package/dist/Components/Table/Types/Columns/Definitions/Display/BubbleDef.svelte.d.ts

@@ -1,15 +1,14 @@
 import type { BubbleColour } from '../../../../../BubbleColour.js';
-import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
 import type { FilterFn, StringFilterValueType } from '../../../Filtering/FilterFn.js';
 import { AbstractDisplayDef, type AbstractDisplayDefProps } from './AbstractDisplayDef.svelte.js';
-export interface BubbleDefProps<T extends object, FilterValueType = StringFilterValueType> extends AbstractDisplayDefProps<T, FilterValueType> {
+export interface BubbleDefProps<T extends object, in FilterValueType, out FilterOptionsType> extends AbstractDisplayDefProps<T, FilterValueType, FilterOptionsType> {
     getColour?: (item: T, index: number, value: string) => BubbleColour | Promise<BubbleColour | null | undefined>;
 }
-export declare class BubbleDef<T extends object, FilterValueType = StringFilterValueType> extends AbstractDisplayDef<T, FilterValueType> {
+export declare class BubbleDef<T extends object, in FilterValueType = StringFilterValueType, out FilterOptionsType = unknown> extends AbstractDisplayDef<T, FilterValueType, FilterOptionsType> {
     readonly displayType: "Bubbles";
-    constructor(props: BubbleDefProps<T, FilterValueType>);
+    constructor(props: BubbleDefProps<T, FilterValueType, FilterOptionsType>);
     private _filterFn;
-    get filterFn(): FilterFn<T, FilterValueType> | CustomFilterFn | undefined;
-    set filterFn(v: FilterFn<T, FilterValueType> | CustomFilterFn | undefined);
+    get filterFn(): FilterFn<T, FilterValueType> | undefined;
+    set filterFn(v: FilterFn<T, FilterValueType> | undefined);
     getColour: ((item: T, index: number, value: string) => BubbleColour | Promise<BubbleColour | null | undefined>) | undefined;
 }

package/dist/Components/Table/Types/Columns/Definitions/Display/DisplayDef.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { CustomFilterFn } from '../../../Filtering/CustomFilterFn.js';
 import type { FilterFn } from '../../../Filtering/FilterFn.js';
 import { DisplayType } from '../../DisplayType.js';
 import { AbstractDisplayDef, type AbstractDisplayDefProps } from './AbstractDisplayDef.svelte.js';
-export type DisplayDefProps<T extends object, FilterValueType = unknown> = AbstractDisplayDefProps<T, FilterValueType>;
-export declare class DisplayDef<T extends object, FilterValueType = unknown> extends AbstractDisplayDef<T, FilterValueType> {
+export interface DisplayDefProps<T extends object, in FilterValueType, out FilterOptionsType> extends AbstractDisplayDefProps<T, FilterValueType, FilterOptionsType> {
+}
+export declare class DisplayDef<T extends object, in FilterValueType, out FilterOptionsType> extends AbstractDisplayDef<T, FilterValueType, FilterOptionsType> {
     readonly displayType: DisplayType;
-    constructor(props: DisplayDefProps<T, FilterValueType>);
+    constructor(props: DisplayDefProps<T, FilterValueType, FilterOptionsType>);
     private _filterFn;
-    get filterFn(): CustomFilterFn | FilterFn<T, FilterValueType> | undefined;
-    set filterFn(v: CustomFilterFn | FilterFn<T, FilterValueType> | undefined);
+    get filterFn(): FilterFn<T, FilterValueType> | undefined;
+    set filterFn(v: FilterFn<T, FilterValueType> | undefined);
 }