@lavalogic/scoria 0.36.0 → 0.37.0

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

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script
+	lang="ts"
+	module
+>
 	import Action from '../../Action.svelte';
 	import Button from '../../Button.svelte';
 	import Icon from '../../Icon.svelte';
@@ -15,17 +18,18 @@
 	import { Variant } from '../../../Types/Internal/Variant.js';
 	import { getContext, tick } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
 	import { FilterType } from '../Types/Filtering/FilterType.js';
-
-	export interface TableFooterProps {
-		onkeydown?: (e: KeyboardEvent) => void;
-	}
+	import type { TableFooterProps } from './TableFooterProps.js';
 </script>
 
-<script lang="ts" generics="T extends object">
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
 	let { onkeydown }: TableFooterProps = $props();
 
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
 	const alertContext = getContext<AlertContext>(AlertContext.identifier);
 
 	const pageSizes: Array<SelectOption<number>> = $state([
@@ -33,7 +37,7 @@
 		{ label: '40', value: 40 },
 		{ label: '60', value: 60 },
 		{ label: '80', value: 80 },
-		{ label: '100', value: 100 }
+		{ label: '100', value: 100 },
 	]);
 
 	// eslint-disable-next-line svelte/prefer-writable-derived
@@ -56,7 +60,7 @@
 			} else {
 				const newValue = {
 					label: tableContext.paginationRepo.paginationState.pageSize.toString(),
-					value: tableContext.paginationRepo.paginationState.pageSize
+					value: tableContext.paginationRepo.paginationState.pageSize,
 				};
 				createOption(newValue);
 				currentSize = newValue;
@@ -66,11 +70,13 @@
 		}
 	});
 
-	let debounceTimeout = -1;
+	let debounceTimeout: ReturnType<typeof setTimeout> | undefined;
 	function onNumberInput(e: Event) {
 		const page = parseInt((e.target as HTMLInputElement).value);
 
-		clearTimeout(debounceTimeout);
+		if (debounceTimeout !== undefined) {
+			clearTimeout(debounceTimeout);
+		}
 		if (!isNaN(page)) {
 			debounceTimeout = setTimeout(() => {
 				tableContext.paginationRepo?.setPage(page);
@@ -83,10 +89,19 @@
 						}
 					})
 					.catch(devCatch);
-			}, 400) as unknown as number;
+			}, 400);
 		}
 	}
 
+	$effect(() => {
+		return () => {
+			if (debounceTimeout !== undefined) {
+				clearTimeout(debounceTimeout);
+				debounceTimeout = undefined;
+			}
+		};
+	});
+
 	$effect(() => {
 		pageValue = (tableContext.paginationRepo?.paginationState.pageIndex ?? 0) + 1;
 	});
@@ -139,7 +154,7 @@
 			icon={{
 				name: 'assessment',
 				size: Size.Medium,
-				colour: tableContext.showSelectedOnly ? Colour['$brand-primary'] : selectedItemIconColour
+				colour: tableContext.showSelectedOnly ? Colour['$brand-primary'] : selectedItemIconColour,
 			}}
 			onclick={() => {
 				tableContext.showSelectedOnly = !tableContext.showSelectedOnly;
@@ -152,29 +167,17 @@
 			icon={{
 				name: 'eraser',
 				size: Size.Medium,
-				colour: selectedItemIconColour
+				colour: selectedItemIconColour,
 			}}
 			onclick={() => {
 				alertContext.prompt('Are you sure you want to clear your selection?', {
 					onYes: () => {
 						tableContext.showSelectedOnly = false;
 						tableContext.resetSelectedItems();
-					}
+					},
 				});
 			}}
 		/>
-
-		<!-- <Button
-			variant={Variant.Toolbar}
-			disabled={tableContext.selectedItems.size == 0}
-			side={Side.Bottom}
-			size={Size.Tiny}
-			iconLeft={{
-				name: 'left-close',
-				size: Size.Medium,
-				colour: tableContext.showSelected ? Colour['$brand-primary'] : Colour['$font-secondary']
-			}}>Previous Page</Button
-		> -->
 	</div>
 
 	<div class="block">
@@ -226,13 +229,19 @@
 
 		<div class="scrollable">
 			<div class="block">
-				<Icon name="paper" colour={Colour['$ui-blue-6']} />
+				<Icon
+					name="paper"
+					colour={Colour['$ui-blue-6']}
+				/>
 				<span>{tableContext.lastPage} {autoPluralise('Page', tableContext.lastPage)}</span>
 			</div>
 
 			<div class="block">
 				<label for="{tableContext.tableName}-jump-to-page"
-					><Icon name="arrow-move-horizontal" colour={Colour['$ui-blue-6']} /></label
+					><Icon
+						name="arrow-move-horizontal"
+						colour={Colour['$ui-blue-6']}
+					/></label
 				>
 
 				<label for="{tableContext.tableName}-jump-to-page">Jump to page:</label>
@@ -257,7 +266,7 @@
 					size={Size.FillHeight}
 					iconLeft={{
 						name: 'left-close',
-						size: Size.FillHeight
+						size: Size.FillHeight,
 					}}>Previous Page</Button
 				>
 			</div>
@@ -291,11 +300,9 @@
 						tableContext.paginationRepo.paginationState.pageIndex + 1 >= tableContext.lastPage}
 					iconRight={{
 						name: 'right-close',
-						size: Size.FillHeight
+						size: Size.FillHeight,
 					}}>Next Page</Button
 				>
-				<!-- 
-					// colour: Colour['$dark-blue'] -->
 			</div>
 		</div>
 	{/if}
@@ -305,7 +312,10 @@
   border-top: solid 1px #cbd4da;
   overflow: visible;
   width: 100%;
-  z-index: 1;
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+  box-shadow: 0 -2px 4px rgba(0, 0, 0, calc(0.08 * var(--show-bottom-shadow, 0)));
   display: flex;
   flex-flow: row nowrap;
   background-color: #cbd4da;
@@ -313,7 +323,6 @@
   justify-content: flex-start;
   align-items: stretch;
   line-height: 1;
-  bottom: 0;
 }
 .spread_row.limited {
   overflow: hidden;

package/dist/Components/Table/Misc/TableFooter.svelte.d.ts

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

package/dist/Components/Table/Misc/TableFooterProps.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Props for `TableFooter`, the persistent footer bar showing pagination,
+ * selection summary, and page-size controls for the Table.
+ */
+export interface TableFooterProps {
+    /** Forwarded `keydown` handler on the footer wrapper. */
+    onkeydown?: (e: KeyboardEvent) => void;
+}

package/dist/Components/Table/Misc/TableFooterProps.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" generics="T extends object">
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
 	import Button from '../../Button.svelte';
 	import { devCatch } from '../../../Helpers/Helpers.svelte.js';
 	import { Side } from '../../../Types/Internal/Side.js';
@@ -8,23 +11,22 @@
 	import { Variant } from '../../../Types/Internal/Variant.js';
 	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
 	import { ExpandedPanel } from '../Types/ExpandedPanel.js';
 	import ColumnPanelModal from './ColumnPanelModal.svelte';
-	import {
-		default as FilterPanelModal,
-		default as ToolboxPanelModal
-	} from './FilterPanelModal.svelte';
+	import FilterPanelModal from './FilterPanelModal.svelte';
+	import ToolboxPanelModal from './ToolboxPanelModal.svelte';
 
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
 
 	const panels = {
 		[ExpandedPanel.None]: null,
 		[ExpandedPanel.Column]: ColumnPanelModal,
 		[ExpandedPanel.Filter]: FilterPanelModal,
-		[ExpandedPanel.Toolbox]: ToolboxPanelModal
+		[ExpandedPanel.Toolbox]: ToolboxPanelModal,
 	} as const;
 
-	let expandedPanel: ExpandedPanel | null = $state(null as ExpandedPanel | null);
+	let expandedPanel = $state<ExpandedPanel | null>(null);
 
 	let ExpandedPanelElement = $derived(expandedPanel ? panels[expandedPanel] : null);
 </script>
@@ -47,8 +49,7 @@
 		disabled={!tableContext.allowQuickFiltering}
 		variant={Variant.Toolbar}
 		iconTop={{
-			// colour: Colour.$alt,
-			name: 'assessment'
+			name: 'assessment',
 		}}>Quick Filter</Button
 	>
 	<Button
@@ -61,8 +62,7 @@
 		size={Size.Small}
 		variant={Variant.Toolbar}
 		iconTop={{
-			// colour: Colour.$alt,
-			name: 'filter-bars'
+			name: 'filter-bars',
 		}}>Advanced Filter</Button
 	>
 	<Button
@@ -74,8 +74,7 @@
 		variant={Variant.Toolbar}
 		toggled={expandedPanel === ExpandedPanel.Column}
 		iconTop={{
-			// colour: Colour.$alt,
-			name: 'columns'
+			name: 'columns',
 		}}>Modify Columns</Button
 	>
 	<Button
@@ -87,8 +86,7 @@
 		}}
 		variant={Variant.Toolbar}
 		iconTop={{
-			// colour: Colour.$alt,
-			name: 'category'
+			name: 'category',
 		}}>My Tool Box</Button
 	>
 	{#if tableContext.dataRepo.addEmptyRow}
@@ -100,8 +98,7 @@
 			}}
 			variant={Variant.Toolbar}
 			iconTop={{
-				// colour: Colour.$alt,
-				name: 'plus'
+				name: 'plus',
 			}}>Add a Row</Button
 		>
 	{/if}
@@ -117,47 +114,19 @@
 			disabled={!tableContext.allowQuickFiltering}
 			variant={Variant.Toolbar}
 			iconTop={{
-				// colour: Colour.$alt,
-				name: 'refresh'
+				name: 'refresh',
 			}}>Refresh</Button
 		>
 	{/if}
 
 	<div class="filler"></div>
-
-	<!-- <Button
-		size={Size.Small}
-		side={Side.Bottom}
-		toggled={expandedPanel === ExpandedPanel.Toolbox}
-		onclick={() => {
-			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
-		}}
-		variant={Variant.Toolbar}
-		iconTop={{
-			// colour: Colour.$alt,
-			name: 'database-download'
-		}}>Export Records</Button
-	>
-	<Button
-		size={Size.Small}
-		side={Side.Bottom}
-		toggled={expandedPanel === ExpandedPanel.Toolbox}
-		onclick={() => {
-			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
-		}}
-		variant={Variant.Toolbar}
-		iconTop={{
-			// colour: Colour.$alt,
-			name: 'setting-cog'
-		}}>Table Configuration</Button
-	> -->
 </div>
 
 <style>.sidebar {
   flex-flow: row nowrap;
   text-orientation: sideways;
   align-self: stretch;
-  box-shadow: 0px 0px 0px 3px #d5dbe0 inset;
+  box-shadow: 0px 0px 0px 3px #cbd4da inset;
   display: flex;
   justify-content: start;
   border-radius: 4px;

package/dist/Components/Table/Misc/TableHorizontalBar.svelte.d.ts

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

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

@@ -2,7 +2,7 @@
 
 <script
 	lang="ts"
-	generics="T extends object"
+	generics="T extends object, IdType extends Primitive"
 >
 	import Button from '../../Button.svelte';
 	import { devCatch } from '../../../Helpers/Helpers.svelte.js';
@@ -11,6 +11,7 @@
 	import { Variant } from '../../../Types/Internal/Variant.js';
 	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
 	import { ExpandedPanel } from '../Types/ExpandedPanel.js';
 	import { ToolbarPosition } from '../Types/Toolbar/ToolbarPosition.js';
 	import ColumnPanel from './ColumnPanel.svelte';
@@ -18,14 +19,13 @@
 	import SidePanel from './SidePanel.svelte';
 	import ToolboxPanel from './ToolboxPanel.svelte';
 
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
 
 	const panels = {
-		[ExpandedPanel.None]: null,
 		[ExpandedPanel.Column]: ColumnPanel,
 		[ExpandedPanel.Filter]: FilterPanel,
 		[ExpandedPanel.Toolbox]: ToolboxPanel,
-	};
+	} as const;
 
 	let expandedPanel = $state<ExpandedPanel | null>(null);
 
@@ -33,16 +33,32 @@
 		tableContext.limitFooter = !!expandedPanel;
 	});
 
-	let ExpandedPanelElement = $derived(expandedPanel ? panels[expandedPanel] : null);
+	let ExpandedPanelElement = $derived(
+		expandedPanel && expandedPanel !== ExpandedPanel.None ? panels[expandedPanel] : null
+	);
 
 	function handleClickOutside(e: MouseEvent) {
-		if (
-			(e.target as HTMLElement).isConnected &&
-			(e.target as HTMLElement).closest('.side-content') == null &&
-			(e.target as HTMLElement).closest('.sidebar') == null
-		) {
-			expandedPanel = null;
+		const target = e.target as HTMLElement;
+		if (!target.isConnected) {
+			return;
+		}
+		// A click landing inside the side-panel or the toolbar
+		// sidebar should keep the panel open.
+		if (target.closest('.side-content') != null) {
+			return;
+		}
+		if (target.closest('.sidebar') != null) {
+			return;
 		}
+		// A click landing inside a teleported select dropdown (see
+		// `Helpers/dropdownPortal.ts`) is a logical extension of the
+		// trigger that lives inside the side-panel, so it must not
+		// close the panel. The marker attribute is set by the portal
+		// helper while the dropdown is teleported to `document.body`.
+		if (target.closest('[data-scoria-portal-dropdown]') != null) {
+			return;
+		}
+		expandedPanel = null;
 	}
 
 	function handleEscKey(e: KeyboardEvent) {
@@ -63,8 +79,6 @@
 	</SidePanel>
 {/if}
 <div class="sidebar">
-	<!-- TODO may have to disable the sidebar class when it is not toggled -->
-
 	<Button
 		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
 		onclick={() => {
@@ -74,7 +88,6 @@
 		disabled={!tableContext.allowQuickFiltering}
 		variant={Variant.Toolbar}
 		iconTop={{
-			// colour: Colour.$alt,
 			name: 'assessment',
 			size: Size.Medium,
 		}}
@@ -89,7 +102,6 @@
 		}}
 		variant={Variant.Toolbar}
 		iconTop={{
-			// colour: Colour.$alt,
 			name: 'filter-bars',
 			size: Size.Medium,
 		}}
@@ -103,7 +115,6 @@
 		variant={Variant.Toolbar}
 		toggled={expandedPanel === ExpandedPanel.Column}
 		iconTop={{
-			// colour: Colour.$alt,
 			name: 'columns',
 			size: Size.Medium,
 		}}
@@ -117,7 +128,6 @@
 		}}
 		variant={Variant.Toolbar}
 		iconTop={{
-			// colour: Colour.$alt,
 			name: 'category',
 			size: Size.Medium,
 		}}
@@ -134,7 +144,6 @@
 			variant={Variant.Toolbar}
 			toggled={tableContext.dataRepo.isLoading}
 			iconTop={{
-				// colour: Colour.$alt,
 				name: 'refresh',
 				size: Size.Medium,
 			}}
@@ -143,41 +152,13 @@
 	{/if}
 
 	<div class="filler"></div>
-	<!-- <Button
-		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
-		toggled={expandedPanel === ExpandedPanel.Toolbox}
-		onclick={(e) => {
-			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
-		}}
-		variant={Variant.Toolbar}
-		iconTop={{
-			// colour: Colour.$alt,
-			name: 'database-download',
-			size: Size.Medium
-		}}
-		label="Export Records"
-	/>
-	<Button
-		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
-		toggled={expandedPanel === ExpandedPanel.Toolbox}
-		onclick={(e) => {
-			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
-		}}
-		variant={Variant.Toolbar}
-		iconTop={{
-			// colour: Colour.$alt,
-			name: 'setting-cog',
-			size: Size.Medium
-		}}
-		label="Table Configuration"
-	/> -->
 </div>
 
 <style>.sidebar {
   flex-flow: column nowrap;
   text-orientation: sideways;
   align-self: stretch;
-  box-shadow: 0px 0px 0px 3px #d5dbe0 inset;
+  box-shadow: 0px 0px 0px 3px #cbd4da inset;
   display: flex;
   justify-content: start;
   gap: 1px;

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

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