@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/Table/Body/Rows/TableRow.svelte

@@ -1,272 +1,340 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, RowIdType extends Primitive"
->
-	import { dev } from '$app/environment';
-	import { devCatch, generateShortUUID } from '../../../../Helpers/Helpers.svelte.js';
-	import { getContext, untrack } from 'svelte';
-	import NestedTable from '../../NestedTable.svelte';
-	import type { ExpandDef } from '../../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
-	import type { DefsWrapper } from '../../Types/Columns/DefsWrapper.js';
-	import type { TableCell } from '../../Types/Columns/TableCell.js';
-	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
-	import { type Primitive } from '../../Types/Context/TableInitOptions.js';
-	import ColumnHighlight from './ColumnHighlight.svelte';
-	import TableColumn from './Columns/TableColumn.svelte';
-	import type { TableRowProps } from './TableRowProps.js';
-
-	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
-
-	const { row, side, odd = false, customHeight, includeHighlight }: TableRowProps<T> = $props();
-
-	const hoverable = $derived(tableContext.changeColourOnHover);
-
-	//HACK converted this from derived to state+deffect because otherwise this throws an unsafe mutation error deeper down the stack
-	const cells: Array<TableCell<T>> = $derived(
-		side === 'left'
-			? row.getLeftVisibleCells()
-			: side === 'right'
-				? row.getRightVisibleCells()
-				: row.getCenterVisibleCells()
-	);
-
-	let expandedColumnDef: ExpandDef<T, object> | undefined = $state();
-
-	$effect(() => {
-		if (cells.length) {
-			void tableContext.table.data;
-			void tableContext.paginationRepo?.paginationState.pageIndex;
-			void tableContext.paginationRepo?.paginationState.pageSize;
-			untrack(() => {
-				expandedColumnDef = undefined;
-			});
-		}
-	});
-
-	let innerDataPromise: Array<object> | Promise<Array<object>> | undefined = $state();
-	let innerColumnDefs: DefsWrapper<object> = $state({ defs: [] });
-	let innerTableName: string | undefined = $state();
-
-	let prevExpandedColumnDef: ExpandDef<T, object> | undefined = $state();
-
-	const rowIndex = $derived(cells.at(0) && cells[0].row.visibleIndex);
-	let id = $state<RowIdType | undefined>();
-	const highlighted = $derived(id != undefined && tableContext.highlightedItems.has(id));
-
-	$effect(() => {
-		void row.original;
-		void tableContext.selectionExtractor;
-
-		if (rowIndex != undefined) {
-			const maybePromise = tableContext.selectionExtractor(row.original);
-			if (maybePromise instanceof Promise) {
-				maybePromise
-					.then((it) => {
-						id = it;
-					})
-					.catch(devCatch);
-			} else {
-				id = maybePromise;
-			}
-		} else {
-			id = undefined;
-		}
-	});
-
-	const showHighlightButton = $derived(rowIndex != null && includeHighlight);
-
-	const colspan = $derived(cells.length + (showHighlightButton ? 1 : 0));
-
-	$effect(() => {
-		void expandedColumnDef;
-
-		untrack(() => {
-			if (expandedColumnDef && expandedColumnDef.id != prevExpandedColumnDef?.id) {
-				prevExpandedColumnDef = expandedColumnDef;
-				innerColumnDefs = expandedColumnDef.getInnerColumnDefs(
-					cells[0].row.original,
-					cells[0].row.originalIndex
-				);
-
-				innerDataPromise = expandedColumnDef.accessorFn(
-					cells[0].row.original,
-					cells[0].row.originalIndex
-				) as Promise<Array<object>>;
-				innerTableName = expandedColumnDef.innerTableName;
-			} else if (
-				!expandedColumnDef ||
-				tableContext.columnVisibility[expandedColumnDef.id] === false
-			) {
-				innerTableName = undefined;
-				expandedColumnDef = prevExpandedColumnDef = innerDataPromise = undefined;
-				innerColumnDefs = { defs: [] };
-			}
-		});
-	});
-
-	function onExpandChange(columnDef: ExpandDef<T, object>) {
-		if (expandedColumnDef?.id === columnDef.id) {
-			expandedColumnDef = undefined;
-		} else {
-			expandedColumnDef = columnDef;
-		}
-	}
-
-	let trRef: HTMLTableRowElement | undefined = $state();
-	let _trHeight = $state(0);
-
-	let innerTrRef: HTMLTableRowElement | undefined = $state();
-	let _innerTrHeight = $state(0);
-
-	$effect(() => {
-		void trRef;
-		void customHeight;
-
-		return untrack(() => {
-			if (trRef && customHeight == null) {
-				const observer = new ResizeObserver((entries) => {
-					_trHeight = entries[0].borderBoxSize[0].blockSize;
-				});
-				observer.observe(trRef);
-
-				const currenttrRef = trRef;
-				return () => {
-					observer.unobserve(currenttrRef);
-					_trHeight = 0;
-				};
-			} else {
-				_trHeight = 0;
-			}
-			return () => {};
-		});
-	});
-
-	$effect(() => {
-		void innerTrRef;
-		return untrack(() => {
-			if (innerTrRef) {
-				const observer = new ResizeObserver((entries) => {
-					_innerTrHeight = entries[0].borderBoxSize[0].blockSize;
-				});
-				observer.observe(innerTrRef);
-
-				const currentinnerTrRef = innerTrRef;
-				return () => {
-					observer.unobserve(currentinnerTrRef);
-				};
-			} else {
-				_innerTrHeight = 0;
-			}
-			return () => {};
-		});
-	});
-
-	const _totalTrHeight = $derived(_trHeight + _innerTrHeight);
-	export const totalTrHeight = {
-		get value() {
-			return _totalTrHeight;
-		},
-	};
-</script>
-
-<tr
-	class:hoverable
-	class:alt={tableContext.alternateRowColours && odd}
-	class:highlighted
-	style={customHeight ? `height: ${customHeight}px !important;` : null}
-	bind:this={trRef}
->
-	{#if showHighlightButton}
-		<ColumnHighlight
-			rowIndex={rowIndex ??
-				(() => {
-					if (dev) {
-						console.error(`column had invalid row index: ${rowIndex}`);
-					}
-					return -1;
-				})()}
-			{highlighted}
-			toggleHighlightedRow={() => {
-				tableContext.toggleHighlightedRow(row.original)?.catch(devCatch);
-			}}
-		/>
-	{/if}
-	{#each cells as cell (cell)}
-		<TableColumn
-			{cell}
-			{expandedColumnDef}
-			{onExpandChange}
-		/>
-	{/each}
-</tr>
-
-{#if expandedColumnDef}
-	<!-- TODO re-test and re-implement these -->
-	<!-- transition:slide={{ duration: 150, axis: 'y', delay: 0 }} -->
-	<tr
-		class="inner-table"
-		bind:this={innerTrRef}
-	>
-		{#await innerDataPromise}
-			<td {colspan}>loading&hellip;</td>
-		{:then data}
-			{#if data && data.length}
-				{@const options = expandedColumnDef.innerTableOptions}
-				<td
-					class="no-padding"
-					{colspan}
-				>
-					{#if innerTableName}
-						{#key innerTableName}
-							<NestedTable
-								tableName={innerTableName}
-								{data}
-								columnDefWrapper={innerColumnDefs}
-								{options}
-								getUserId={tableContext.getUserId}
-							/>
-						{/key}
-					{:else}
-						<NestedTable
-							tableName={generateShortUUID()}
-							{data}
-							columnDefWrapper={innerColumnDefs}
-							{options}
-							getUserId={tableContext.getUserId}
-						/>
-					{/if}
-				</td>
-			{:else if !data}
-				<td {colspan}>Error Fetching data</td>
-			{:else}
-				<td {colspan}>No Data</td>
-			{/if}
-		{:catch e}
-			{#if dev}
-				<td>
-					error: {e}
-				</td>
-				<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-				{@debug e}
-			{/if}
-			<td {colspan}>Error Fetching data</td>
-		{/await}
-	</tr>
-{/if}
-
-<style>tr {
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, RowIdType extends Primitive"
+>
+	import type { ScoriaStorageKey } from '../../../../Types/Internal/Misc.js';
+	import { dev } from '$app/environment';
+	import { devCatch, generateWeakId } from '../../../../Helpers/Helpers.svelte.js';
+	import { getContext, untrack } from 'svelte';
+	import NestedTable from '../../NestedTable.svelte';
+	import type { ExpandDef } from '../../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
+	import type { DefsWrapper } from '../../Types/Columns/DefsWrapper.js';
+	import type { TableCell } from '../../Types/Columns/TableCell.js';
+	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
+	import { type Primitive } from '../../Types/Context/TableInitOptions.js';
+	import ColumnHighlight from './ColumnHighlight.svelte';
+	import TableColumn from './Columns/TableColumn.svelte';
+	import type { TableRowProps } from './TableRowProps.js';
+
+	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
+
+	const { row, odd = false, includeHighlight }: TableRowProps<T> = $props();
+
+	const hoverable = $derived(tableContext.changeColourOnHover);
+
+	// Visible cells in display order: left-pinned -> centre -> right-pinned.
+	// The browser now handles row-height alignment natively because all
+	// cells live in the same grid row, so the previous per-side fan-out
+	// and height-reconciliation pool is gone.
+	const leftCells: Array<TableCell<T>> = $derived(row.getLeftVisibleCells());
+	const centreCells: Array<TableCell<T>> = $derived(row.getCenterVisibleCells());
+	const rightCells: Array<TableCell<T>> = $derived(row.getRightVisibleCells());
+
+	// Cumulative pinning offsets for the sticky-positioned cells. Reads
+	// rendered widths from `_columnRenderedWidths` (populated by the
+	// ResizeObserver in TableHead) so the sticky positions stay
+	// accurate even though each pinned column track uses
+	// `minmax(W, 1fr)` and the actual width can exceed `columnDef.width`.
+	function renderedWidth(cell: TableCell<T>): number {
+		return tableContext._columnRenderedWidths.get(cell.column.id) ?? cell.column.columnDef.width;
+	}
+
+	const leftOffsets: Array<number> = $derived.by(() => {
+		void tableContext._columnRenderedWidths.size;
+		const offsets: Array<number> = [];
+		let cumulative = includeHighlight ? 20 : 0;
+		for (const cell of leftCells) {
+			offsets.push(cumulative);
+			cumulative += renderedWidth(cell);
+		}
+		return offsets;
+	});
+
+	const rightOffsets: Array<number> = $derived.by(() => {
+		void tableContext._columnRenderedWidths.size;
+		const offsets = new Array<number>(rightCells.length).fill(0);
+		let cumulative = 0;
+		for (let i = rightCells.length - 1; i >= 0; i--) {
+			offsets[i] = cumulative;
+			cumulative += renderedWidth(rightCells[i]);
+		}
+		return offsets;
+	});
+
+	let expandedColumnDef: ExpandDef<T, object> | undefined = $state();
+
+	$effect(() => {
+		if (leftCells.length + centreCells.length + rightCells.length > 0) {
+			void tableContext.table.data;
+			void tableContext.paginationRepo?.paginationState.pageIndex;
+			void tableContext.paginationRepo?.paginationState.pageSize;
+			untrack(() => {
+				expandedColumnDef = undefined;
+			});
+		}
+	});
+
+	let innerDataPromise: Array<object> | Promise<Array<object>> | undefined = $state();
+	let innerColumnDefs: DefsWrapper<object> = $state({ defs: [] });
+	let innerTableName: ScoriaStorageKey | undefined = $state();
+
+	let prevExpandedColumnDef: ExpandDef<T, object> | undefined = $state();
+
+	const firstCell = $derived(leftCells.at(0) ?? centreCells.at(0) ?? rightCells.at(0));
+	const rowIndex = $derived(firstCell?.row.visibleIndex);
+	let id = $state<RowIdType | undefined>();
+	const highlighted = $derived(id != undefined && tableContext.highlightedItems.has(id));
+
+	$effect(() => {
+		void row.original;
+		void tableContext.selectionExtractor;
+
+		if (rowIndex != undefined) {
+			const maybePromise = tableContext.selectionExtractor(row.original);
+			if (maybePromise instanceof Promise) {
+				maybePromise
+					.then((it) => {
+						id = it;
+					})
+					.catch(devCatch);
+			} else {
+				id = maybePromise;
+			}
+		} else {
+			id = undefined;
+		}
+	});
+
+	const showHighlightButton = $derived(rowIndex != null && includeHighlight);
+
+	$effect(() => {
+		void expandedColumnDef;
+
+		untrack(() => {
+			// Guard: if all columns have been hidden the cells arrays are
+			// empty; `firstCell` would otherwise be undefined.
+			if (!firstCell) {
+				return;
+			}
+			if (expandedColumnDef && expandedColumnDef.id != prevExpandedColumnDef?.id) {
+				prevExpandedColumnDef = expandedColumnDef;
+				innerColumnDefs = expandedColumnDef.getInnerColumnDefs(
+					firstCell.row.original,
+					firstCell.row.originalIndex
+				);
+
+				innerDataPromise = expandedColumnDef.accessorFn(
+					firstCell.row.original,
+					firstCell.row.originalIndex
+				) as Promise<Array<object>>;
+				innerTableName = expandedColumnDef.innerTableName;
+			} else if (
+				!expandedColumnDef ||
+				tableContext.columnVisibility[expandedColumnDef.id] === false
+			) {
+				innerTableName = undefined;
+				expandedColumnDef = prevExpandedColumnDef = innerDataPromise = undefined;
+				innerColumnDefs = { defs: [] };
+			}
+		});
+	});
+
+	function onExpandChange(columnDef: ExpandDef<T, object>) {
+		if (expandedColumnDef?.id === columnDef.id) {
+			expandedColumnDef = undefined;
+		} else {
+			expandedColumnDef = columnDef;
+		}
+	}
+
+	// Stable fallback name used when an ExpandDef does not supply its own
+	// `innerTableName`. Generating this once per row prevents localStorage
+	// preset keys from accumulating UUID-keyed garbage every expand toggle.
+	const fallbackInnerTableName = generateWeakId<ScoriaStorageKey>();
+</script>
+
+<div
+	role="row"
+	class="datatable-row"
+	class:hoverable
+	class:alt={tableContext.alternateRowColours && odd}
+	class:highlighted
+>
+	{#if showHighlightButton}
+		<div
+			role="cell"
+			class="cell highlight-cell pinned-left"
+			style="left: 0px"
+		>
+			<ColumnHighlight
+				rowIndex={rowIndex ??
+					(() => {
+						if (dev) {
+							console.error(`column had invalid row index: ${rowIndex}`);
+						}
+						return -1;
+					})()}
+				{highlighted}
+				toggleHighlightedRow={() => {
+					tableContext.toggleHighlightedRow(row.original)?.catch(devCatch);
+				}}
+			/>
+		</div>
+	{/if}
+	{#each leftCells as cell, index (cell.column.id)}
+		<div
+			role="cell"
+			class="cell pinned-left"
+			style="left: {leftOffsets[index]}px"
+		>
+			<TableColumn
+				{cell}
+				{expandedColumnDef}
+				{onExpandChange}
+			/>
+		</div>
+	{/each}
+	{#each centreCells as cell (cell.column.id)}
+		<div
+			role="cell"
+			class="cell"
+		>
+			<TableColumn
+				{cell}
+				{expandedColumnDef}
+				{onExpandChange}
+			/>
+		</div>
+	{/each}
+	{#each rightCells as cell, index (cell.column.id)}
+		<div
+			role="cell"
+			class="cell pinned-right"
+			style="right: {rightOffsets[index]}px"
+		>
+			<TableColumn
+				{cell}
+				{expandedColumnDef}
+				{onExpandChange}
+			/>
+		</div>
+	{/each}
+</div>
+
+{#if expandedColumnDef}
+	<div
+		role="row"
+		class="datatable-row expand-row"
+	>
+		<div
+			role="cell"
+			class="cell expand-cell"
+		>
+			{#await innerDataPromise}
+				loading&hellip;
+			{:then data}
+				{#if data && data.length}
+					{@const options = expandedColumnDef.innerTableOptions}
+					{#if innerTableName}
+						{#key innerTableName}
+							<NestedTable
+								tableName={innerTableName}
+								{data}
+								columnDefWrapper={innerColumnDefs}
+								{options}
+								getUserId={tableContext.getUserId}
+							/>
+						{/key}
+					{:else}
+						<NestedTable
+							tableName={fallbackInnerTableName}
+							{data}
+							columnDefWrapper={innerColumnDefs}
+							{options}
+							getUserId={tableContext.getUserId}
+						/>
+					{/if}
+				{:else if !data}
+					Error Fetching data
+				{:else}
+					No Data
+				{/if}
+			{:catch e}
+				{#if dev}
+					error: {e}
+					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+					{@debug e}
+				{/if}
+				Error Fetching data
+			{/await}
+		</div>
+	</div>
+{/if}
+
+<style>.datatable-row {
+  display: grid;
+  grid-template-columns: var(--cols);
   line-height: var(--line-height, 3);
   transition: line-height 0.2s ease, height 0.2s ease;
+}
+
+.datatable-row {
   background-color: #ffffff;
+  scroll-margin-top: 3rem;
+  scroll-margin-bottom: 3rem;
 }
-tr td.no-padding {
+.datatable-row > .cell.no-padding {
   padding: 0;
 }
-tr.alt {
+.datatable-row.alt {
   background-color: #f4f7f9;
 }
-tr.highlighted, tr.hoverable:hover {
+.datatable-row.highlighted, .datatable-row.hoverable:hover {
   background-color: #e6f8fd;
-}</style>
+}
+
+:global(.datatable.quick-filtering) .datatable-row {
+  scroll-margin-top: calc(3rem + 61px);
+}
+
+.datatable-row.alt > .cell.pinned-left,
+.datatable-row.alt > .cell.pinned-right {
+  background-color: #f4f7f9;
+}
+
+.datatable-row.highlighted > .cell.pinned-left,
+.datatable-row.highlighted > .cell.pinned-right,
+.datatable-row.hoverable:hover > .cell.pinned-left,
+.datatable-row.hoverable:hover > .cell.pinned-right {
+  background-color: #e6f8fd;
+}
+
+.cell {
+  display: block;
+  position: relative;
+  min-width: 0;
+  overflow: visible;
+  box-sizing: border-box;
+}
+.cell.pinned-left, .cell.pinned-right {
+  position: sticky;
+  z-index: 2;
+  background-color: #ffffff;
+}
+.cell.pinned-left {
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
+}
+.cell.pinned-right {
+  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.08);
+}
+
+.expand-row {
+  display: block;
+}
+.expand-row .expand-cell {
+  padding: 0;
+  display: block;
+  width: 100%;
+}</style>

package/dist/Components/Table/Body/Rows/TableRow.svelte.d.ts

@@ -2,11 +2,7 @@ import { type Primitive } from '../../Types/Context/TableInitOptions.js';
 import type { TableRowProps } from './TableRowProps.js';
 declare function $$render<T extends object, RowIdType extends Primitive>(): {
     props: TableRowProps<T>;
-    exports: {
-        totalTrHeight: {
-            readonly value: number;
-        };
-    };
+    exports: {};
     bindings: "";
     slots: {};
     events: {};
@@ -16,11 +12,7 @@ declare class __sveltets_Render<T extends object, RowIdType extends Primitive> {
     events(): ReturnType<typeof $$render<T, RowIdType>>['events'];
     slots(): ReturnType<typeof $$render<T, RowIdType>>['slots'];
     bindings(): "";
-    exports(): {
-        totalTrHeight: {
-            readonly value: number;
-        };
-    };
+    exports(): {};
 }
 interface $$IsomorphicComponent {
     new <T extends object, RowIdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, RowIdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, RowIdType>['props']>, ReturnType<__sveltets_Render<T, RowIdType>['events']>, ReturnType<__sveltets_Render<T, RowIdType>['slots']>> & {

package/dist/Components/Table/Body/Rows/TableRowProps.d.ts

@@ -1,8 +1,17 @@
 import type { Row } from '../../Types/Context/Row.js';
+/**
+ * Props for `TableRow`. The row now renders the full cell set (left
+ * pinned + centre + right pinned) as direct children of a single grid
+ * container; the per-side `side` / `customHeight` / `includeHighlight`
+ * props from the three-section render were dropped in the div+grid
+ * refactor. Row height is left to the browser via `grid-template-rows:
+ * auto`.
+ */
 export interface TableRowProps<T extends object> {
+    /** The row model exposed by the TableContext for this visible position. */
     row: Row<T>;
-    side: 'left' | 'right' | 'centre';
+    /** True for alternate-row striping. */
     odd: boolean;
-    customHeight: number | undefined;
+    /** Whether to render the leading highlight-toggle cell at column 0. */
     includeHighlight: boolean;
 }