@lavalogic/scoria 0.36.0 → 0.37.0

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

@@ -4,8 +4,9 @@
 	lang="ts"
 	generics="T extends object, RowIdType extends Primitive"
 >
+	import type { ScoriaStorageKey } from '../../../../Types/Internal/Misc.js';
 	import { dev } from '$app/environment';
-	import { devCatch, generateShortUUID } from '../../../../Helpers/Helpers.svelte.js';
+	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';
@@ -19,23 +20,53 @@
 
 	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
 
-	const { row, side, odd = false, customHeight, includeHighlight }: TableRowProps<T> = $props();
+	const { row, odd = false, 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()
-	);
+	// 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 (cells.length) {
+		if (leftCells.length + centreCells.length + rightCells.length > 0) {
 			void tableContext.table.data;
 			void tableContext.paginationRepo?.paginationState.pageIndex;
 			void tableContext.paginationRepo?.paginationState.pageSize;
@@ -47,11 +78,12 @@
 
 	let innerDataPromise: Array<object> | Promise<Array<object>> | undefined = $state();
 	let innerColumnDefs: DefsWrapper<object> = $state({ defs: [] });
-	let innerTableName: string | undefined = $state();
+	let innerTableName: ScoriaStorageKey | undefined = $state();
 
 	let prevExpandedColumnDef: ExpandDef<T, object> | undefined = $state();
 
-	const rowIndex = $derived(cells.at(0) && cells[0].row.visibleIndex);
+	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));
 
@@ -77,22 +109,25 @@
 
 	const showHighlightButton = $derived(rowIndex != null && includeHighlight);
 
-	const colspan = $derived(cells.length + (showHighlightButton ? 1 : 0));
-
 	$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(
-					cells[0].row.original,
-					cells[0].row.originalIndex
+					firstCell.row.original,
+					firstCell.row.originalIndex
 				);
 
 				innerDataPromise = expandedColumnDef.accessorFn(
-					cells[0].row.original,
-					cells[0].row.originalIndex
+					firstCell.row.original,
+					firstCell.row.originalIndex
 				) as Promise<Array<object>>;
 				innerTableName = expandedColumnDef.innerTableName;
 			} else if (
@@ -114,110 +149,94 @@
 		}
 	}
 
-	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;
-		},
-	};
+	// 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>
 
-<tr
+<div
+	role="row"
+	class="datatable-row"
 	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);
-			}}
-		/>
+		<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 cells as cell (cell)}
-		<TableColumn
-			{cell}
-			{expandedColumnDef}
-			{onExpandChange}
-		/>
+	{#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}
-</tr>
+	{#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}
-	<!-- TODO re-test and re-implement these -->
-	<!-- transition:slide={{ duration: 150, axis: 'y', delay: 0 }} -->
-	<tr
-		class="inner-table"
-		bind:this={innerTrRef}
+	<div
+		role="row"
+		class="datatable-row expand-row"
 	>
-		{#await innerDataPromise}
-			<td {colspan}>loading&hellip;</td>
-		{:then data}
-			{#if data && data.length}
-				{@const options = expandedColumnDef.innerTableOptions}
-				<td
-					class="no-padding"
-					{colspan}
-				>
+		<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
@@ -230,43 +249,92 @@
 						{/key}
 					{:else}
 						<NestedTable
-							tableName={generateShortUUID()}
+							tableName={fallbackInnerTableName}
 							{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>
+				{:else if !data}
+					Error Fetching data
+				{:else}
+					No Data
+				{/if}
+			{:catch e}
+				{#if dev}
 					error: {e}
-				</td>
-				<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-				{@debug e}
-			{/if}
-			<td {colspan}>Error Fetching data</td>
-		{/await}
-	</tr>
+					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+					{@debug e}
+				{/if}
+				Error Fetching data
+			{/await}
+		</div>
+	</div>
 {/if}
 
-<style>tr {
+<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;
+}
+.datatable-row.highlighted, .datatable-row.hoverable:hover {
+  background-color: #e6f8fd;
+}
+
+: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;
 }
-tr.highlighted, tr.hoverable:hover {
+
+.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;
 }