@lavalogic/scoria 0.36.0 → 0.37.0

package/dist/Components/Table/Headers/TableHead.svelte

@@ -17,57 +17,148 @@
 	import { ExpandDef } from '../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
 	import { RowSelectionDef } from '../Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import type { HeaderGroup } from '../Types/HeaderGroup.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
+	import type { Header } from '../Types/Header.js';
+
+	/** Local alias: scoria's headers never carry custom filter generics here. */
+	type AnyHeader<T extends object> = Header<T, never, unknown>;
 	import HighlightAllHeader from './HighlightAllHeader.svelte';
 	import SelectAllHeader from './SelectAllHeader.svelte';
-
-	export interface TableHeadProps {
-		showHighlight: boolean;
-		side: 'left' | 'centre' | 'right';
-		oncontextmenu?: (e: MouseEvent) => void;
-	}
+	import type { TableHeadProps } from './TableHeadProps.js';
 </script>
 
 <script
 	lang="ts"
-	generics="T extends object"
+	generics="T extends object, IdType extends Primitive"
 >
-	const { showHighlight, side = 'centre', oncontextmenu }: TableHeadProps = $props();
+	const { oncontextmenu }: TableHeadProps = $props();
 
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
 	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
 
-	const groups: Array<HeaderGroup<T>> = $derived.by(() => {
+	const leftHeaders: Array<AnyHeader<T>> = $derived.by(() => {
 		void tableContext.table.columnVisibility;
-		void Object.keys(tableContext.table.columnVisibility);
 		void tableContext.table.columnPinning.left?.size;
 		void tableContext.table.columnPinning.right?.size;
+		return tableContext.table.getLeftHeaderGroups().flatMap((it) => it.headers);
+	});
+
+	const centreHeaders: Array<AnyHeader<T>> = $derived.by(() => {
+		void tableContext.table.columnVisibility;
+		void tableContext.table.columnPinning.left?.size;
+		void tableContext.table.columnPinning.right?.size;
+		return tableContext.table.getCenterHeaderGroups().flatMap((it) => it.headers);
+	});
+
+	const rightHeaders: Array<AnyHeader<T>> = $derived.by(() => {
+		void tableContext.table.columnVisibility;
+		void tableContext.table.columnPinning.left?.size;
+		void tableContext.table.columnPinning.right?.size;
+		return tableContext.table.getRightHeaderGroups().flatMap((it) => it.headers);
+	});
+
+	// Cumulative pinning offsets for the sticky-positioned cells. Each
+	// pinned-left cell is anchored to `left: (sum of widths of preceding
+	// pinned-left cells)`; pinned-right cells are anchored to `right:
+	// (sum of widths of following pinned-right cells)`. Recomputed
+	// whenever a header width changes (which happens on resize handle
+	// drag or column sizing reset).
+	// Read rendered widths from the shared context map; this map is
+	// populated by the ResizeObserver below as the header cells lay
+	// out. The fallback to `header.getSize()` (declared width) covers
+	// the first frame before the observer has fired.
+	function renderedWidth(columnId: string, declared: number): number {
+		return tableContext._columnRenderedWidths.get(columnId) ?? declared;
+	}
+
+	// Single ResizeObserver instance shared across all header cells.
+	// Each `<div role="columnheader">` registers itself via the
+	// `observeHeader` attachment below; the callback writes the cell's
+	// rendered inline-size into the shared `_columnRenderedWidths` map
+	// so TableRow / TableHead / TableBody can read accurate sticky
+	// pinning offsets.
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const elementToColumnId = new WeakMap<Element, string>();
+	const headerObserver =
+		typeof ResizeObserver === 'undefined'
+			? null
+			: new ResizeObserver((entries) => {
+					for (const entry of entries) {
+						const columnId = elementToColumnId.get(entry.target);
+						if (columnId == null) {
+							continue;
+						}
+						const inlineSize = entry.borderBoxSize[0]?.inlineSize ?? entry.contentRect.width;
+						tableContext._columnRenderedWidths.set(columnId, inlineSize);
+					}
+				});
+
+	$effect(() => () => {
+		headerObserver?.disconnect();
+	});
+
+	function observeHeader(node: HTMLElement, columnId: string): () => void {
+		if (!headerObserver) {
+			return () => {};
+		}
+		elementToColumnId.set(node, columnId);
+		headerObserver.observe(node);
+		return () => {
+			headerObserver.unobserve(node);
+			elementToColumnId.delete(node);
+			tableContext._columnRenderedWidths.delete(columnId);
+		};
+	}
+
+	const leftOffsets: Array<number> = $derived.by(() => {
+		void tableContext._columnRenderedWidths.size;
+		const offsets: Array<number> = [];
+		// Highlight column is always 20px wide and always the first
+		// pinned-left cell when present, so subsequent pinned-left
+		// headers must be offset past it.
+		let cumulative = showHighlightColumn ? 20 : 0;
+		for (const header of leftHeaders) {
+			offsets.push(cumulative);
+			cumulative += renderedWidth(header.column.id, header.getSize());
+		}
+		return offsets;
+	});
 
-		return side === 'left'
-			? tableContext.table.getLeftHeaderGroups()
-			: side === 'right'
-				? tableContext.table.getRightHeaderGroups()
-				: tableContext.table.getCenterHeaderGroups();
+	const rightOffsets: Array<number> = $derived.by(() => {
+		void tableContext._columnRenderedWidths.size;
+		const offsets = new Array<number>(rightHeaders.length).fill(0);
+		let cumulative = 0;
+		for (let i = rightHeaders.length - 1; i >= 0; i--) {
+			offsets[i] = cumulative;
+			cumulative += renderedWidth(rightHeaders[i].column.id, rightHeaders[i].getSize());
+		}
+		return offsets;
 	});
 
+	const showHighlightColumn = $derived(
+		leftHeaders.length > 0 || centreHeaders.length > 0 || rightHeaders.length > 0
+	);
+
 	const iconNames = {
 		asc: 'sort-asc',
 		desc: 'sort-desc',
 		none: 'sort-none',
 	} as const;
 
-	let currentDropTarget: HTMLTableCellElement | null = $state(null);
+	let currentDropTarget: HTMLElement | null = $state(null);
 
 	function setCurrentDropTarget(target: EventTarget | null) {
-		currentDropTarget = target as HTMLTableCellElement | null;
+		currentDropTarget = target as HTMLElement | null;
 	}
 
 	function showtooltip(e: MouseEvent, columnDef: ColumnDef<T>): void {
 		if (columnDef instanceof ExpandDef) {
-			const rect = (e.target as HTMLElement).closest('th')?.getBoundingClientRect();
+			const rect = (e.target as HTMLElement)
+				.closest('[role="columnheader"]')
+				?.getBoundingClientRect();
 
 			if (!rect) {
-				console.warn('could not find closest TH');
+				console.warn('could not find closest columnheader');
 
 				return;
 			}
@@ -94,8 +185,7 @@
 			return;
 		}
 
-		// const dropTarget = (e.target as HTMLElement)?.closest('th');
-		const dropTarget = currentDropTarget?.closest('th');
+		const dropTarget = currentDropTarget?.closest<HTMLElement>('[role="columnheader"]');
 
 		if (dropTarget) {
 			tableContext.reorderColumn(dropTarget);
@@ -104,164 +194,226 @@
 		currentDropTarget = null;
 	}
 
+	function ariaSort(state: 'asc' | 'desc' | 'none'): 'ascending' | 'descending' | 'none' {
+		if (state === 'asc') {
+			return 'ascending';
+		}
+		if (state === 'desc') {
+			return 'descending';
+		}
+		return 'none';
+	}
+
 	function setDragTarget(def: ColumnDef<T>) {
 		tableContext.dragTarget = def;
 	}
 
 	const currentDropTargetId = $derived(
-		(currentDropTarget as HTMLElement | null | undefined)?.closest('th')?.id
+		(currentDropTarget as HTMLElement | null | undefined)?.closest('[role="columnheader"]')?.id
 	);
 </script>
 
-<thead
-	oncontextmenu={(e) => {
-		e.stopPropagation();
-		oncontextmenu?.(e);
-	}}
+<div
+	role="rowgroup"
+	class="datatable-header"
+	{oncontextmenu}
 >
-	{#each groups as group (group)}
-		<tr>
-			{#if showHighlight && group.headers.length}
-				<th
-					id="highlight-header"
-					draggable={false}
-					colspan="1"
-					class="highlight-column"
-				>
-					<div class="th">
-						<HighlightAllHeader />
-					</div>
-				</th>
-			{/if}
-
-			{#each group.headers as header (header)}
-				{@const headerId = `${tableContext.tableName}-header-${header.id}`}
-				<!-- {@const computedSize = tableContext.measureHeaderWidth(header.column.columnDef)} -->
-				<th
-					id={headerId}
-					draggable={tableContext.allowColumnReordering}
-					colSpan={header.colSpan}
-					style="width: {Math.max(
-						// computedSize,
-						// header.column.columnDef.minSize ?? 0,
-						// tableContext.columnSizing[header.id] ??
-						header.getSize()
-					)}px"
-					class:action-column={!header.column.getCanSort()}
-					class:targeted={currentDropTargetId === headerId}
-					ondragstart={() => {
-						setDragTarget(header.column.columnDef);
-					}}
-					ondragover={(e) => {
-						e.preventDefault();
-						if (tableContext.dragTarget?.id !== header.id) {
-							setCurrentDropTarget(e.target);
-						} else {
-							setCurrentDropTarget(null);
-						}
-					}}
-					ondrop={onDrop}
-				>
-					{#if !header.isPlaceholder}
-						<div class="margin-right">
-							{#if header.column.getCanSort()}
-								<button
-									onmouseenter={(e) => {
-										showtooltip(e, header.column.columnDef);
-									}}
-									onmouseleave={() => {
-										hideTooltip(header.column.columnDef);
-									}}
-									class="contents"
-									onclick={header.column.getToggleSortingHandler()}
-								>
-									<div class="th cursor-pointer select-none">
-										<div class="header-text-wrapper">
-											{#if header.column.columnDef instanceof RowSelectionDef}
-												<SelectAllHeader />
-											{:else}
-												{#if header.column.columnDef instanceof ExpandDef}
-													<Icon
-														name={header.column.columnDef.headerIcon}
-														colour={Colour['$font-primary']}
-													/>
-												{:else if typeof header.column.columnDef.header == 'string'}
-													{header.column.columnDef.header}
-												{:else}
-													{@render header.column.columnDef.header()}
-												{/if}
-												<Icon
-													variant={Variant.HeaderIcon}
-													size={Size.Medium}
-													name={iconNames[header.column.getIsSorted()]}
-												/>
-											{/if}
-										</div>
-									</div>
-								</button>
-							{:else}
-								{@const isRowSelect = header.column.columnDef instanceof RowSelectionDef}
-								<!-- svelte-ignore a11y_no_static_element_interactions -->
-								<div
-									onmouseenter={(e) => {
-										showtooltip(e, header.column.columnDef);
-									}}
-									onmouseleave={() => {
-										hideTooltip(header.column.columnDef);
-									}}
-									class="contents"
-								>
-									<div
-										class="th"
-										class:nopadding={isRowSelect}
-									>
-										<div class="header-text-wrapper no-sort cursor-pointer select-none">
-											{#if isRowSelect}
-												<SelectAllHeader />
-											{:else if header.column.columnDef instanceof ExpandDef}
-												<Icon
-													name={header.column.columnDef.headerIcon}
-													colour={Colour['$font-primary']}
-												/>
-											{:else if typeof header.column.columnDef.header == 'string'}
-												{header.column.columnDef.header}
-											{:else}
-												{@render header.column.columnDef.header()}
-											{/if}
-										</div>
-									</div>
-								</div>
-							{/if}
-
-							{#if tableContext.enableResize}
-								<!-- svelte-ignore a11y_no_static_element_interactions -->
-								<div
-									onmousedown={(e) => {
-										e.preventDefault();
-										e.stopImmediatePropagation();
-										const handler = header.getResizeHandler();
-										handler(e);
-									}}
-									ondblclick={() => {
-										tableContext.autoResize(header.column.columnDef).catch(devCatch);
-									}}
-									class="resizer right"
-									class:isResizing={header.column.getIsResizing()}
-								></div>
-							{/if}
+	<div
+		role="row"
+		class="datatable-row header-row"
+	>
+		{#if showHighlightColumn}
+			<div
+				role="columnheader"
+				id="highlight-header"
+				class="cell header highlight-column pinned-left"
+				style="left: 0px"
+			>
+				<div class="th">
+					<HighlightAllHeader />
+				</div>
+			</div>
+		{/if}
+
+		{#each leftHeaders as header, index (header.id)}
+			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+			{@render headerCell(header, 'left', leftOffsets[index])}
+		{/each}
+		{#each centreHeaders as header (header.id)}
+			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+			{@render headerCell(header, undefined, 0)}
+		{/each}
+		{#each rightHeaders as header, index (header.id)}
+			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+			{@render headerCell(header, 'right', rightOffsets[index])}
+		{/each}
+	</div>
+</div>
+
+{#snippet headerCell(header: AnyHeader<T>, side: 'left' | 'right' | undefined, offset: number)}
+	{@const headerId = `${tableContext.tableName}-header-${header.id}`}
+	<!-- svelte-ignore a11y_interactive_supports_focus -->
+	<div
+		role="columnheader"
+		id={headerId}
+		{@attach (node: HTMLElement) => observeHeader(node, header.column.id)}
+		draggable={tableContext.allowColumnReordering}
+		class="cell header"
+		class:pinned-left={side === 'left'}
+		class:pinned-right={side === 'right'}
+		class:action-column={!header.column.getCanSort()}
+		class:targeted={currentDropTargetId === headerId}
+		style:left={side === 'left' ? `${offset}px` : null}
+		style:right={side === 'right' ? `${offset}px` : null}
+		aria-sort={header.column.getCanSort() ? ariaSort(header.column.getIsSorted()) : undefined}
+		ondragstart={() => {
+			setDragTarget(header.column.columnDef);
+		}}
+		ondragover={(e) => {
+			e.preventDefault();
+			if (tableContext.dragTarget?.id !== header.id) {
+				setCurrentDropTarget(e.target);
+			} else {
+				setCurrentDropTarget(null);
+			}
+		}}
+		ondrop={onDrop}
+	>
+		{#if !header.isPlaceholder}
+			<div class="margin-right">
+				{#if header.column.getCanSort()}
+					<button
+						onmouseenter={(e) => {
+							showtooltip(e, header.column.columnDef);
+						}}
+						onmouseleave={() => {
+							hideTooltip(header.column.columnDef);
+						}}
+						class="contents"
+						onclick={header.column.getToggleSortingHandler()}
+					>
+						<div class="th cursor-pointer select-none">
+							<div class="header-text-wrapper">
+								{#if header.column.columnDef instanceof RowSelectionDef}
+									<SelectAllHeader />
+								{:else}
+									{#if header.column.columnDef instanceof ExpandDef}
+										<Icon
+											name={header.column.columnDef.headerIcon}
+											colour={Colour['$font-primary']}
+										/>
+									{:else if typeof header.column.columnDef.header == 'string'}
+										{header.column.columnDef.header}
+									{:else}
+										{@render header.column.columnDef.header()}
+									{/if}
+									<Icon
+										variant={Variant.HeaderIcon}
+										size={Size.Medium}
+										name={iconNames[header.column.getIsSorted()]}
+									/>
+								{/if}
+							</div>
+						</div>
+					</button>
+				{:else}
+					{@const isRowSelect = header.column.columnDef instanceof RowSelectionDef}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						onmouseenter={(e) => {
+							showtooltip(e, header.column.columnDef);
+						}}
+						onmouseleave={() => {
+							hideTooltip(header.column.columnDef);
+						}}
+						class="contents"
+					>
+						<div
+							class="th"
+							class:nopadding={isRowSelect}
+						>
+							<div class="header-text-wrapper no-sort cursor-pointer select-none">
+								{#if isRowSelect}
+									<SelectAllHeader />
+								{:else if header.column.columnDef instanceof ExpandDef}
+									<Icon
+										name={header.column.columnDef.headerIcon}
+										colour={Colour['$font-primary']}
+									/>
+								{:else if typeof header.column.columnDef.header == 'string'}
+									{header.column.columnDef.header}
+								{:else}
+									{@render header.column.columnDef.header()}
+								{/if}
+							</div>
 						</div>
-					{/if}
-				</th>
-			{/each}
-		</tr>
-	{/each}
-</thead>
-
-<style>th {
+					</div>
+				{/if}
+
+				{#if tableContext.enableResize}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						onmousedown={(e) => {
+							e.preventDefault();
+							e.stopImmediatePropagation();
+							const handler = header.getResizeHandler();
+							handler(e);
+						}}
+						ondblclick={() => {
+							tableContext.autoResize(header.column.columnDef).catch(devCatch);
+						}}
+						class="resizer right"
+						class:isResizing={header.column.getIsResizing()}
+					></div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+{/snippet}
+
+<style>.cell.header {
   position: relative;
-  min-width: fit-content;
+  min-width: 0;
   color: #000000;
-  border: solid 1px #cbd4da;
+  border-right: solid 1px #cbd4da;
+  border-bottom: solid 1px #cbd4da;
+}
+
+.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);
+}
+
+.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.header-row {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: #ffffff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, calc(0.08 * var(--show-top-shadow, 0)));
+}
+.datatable-row.header-row > .cell.pinned-left, .datatable-row.header-row > .cell.pinned-right {
+  z-index: 11;
 }
 
 .margin-right {
@@ -276,15 +428,22 @@ div.no-sort {
   justify-content: center;
 }
 
-th {
+.datatable-header {
+  display: contents;
+}
+
+.header {
   transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
   height: 100%;
+  background-color: #ffffff;
+  overflow: hidden;
+  min-width: min-content;
+  height: 3rem;
 }
-
-th.targeted * {
+.header.targeted * {
   background-color: #259fc7;
 }
-th.targeted {
+.header.targeted {
   background-color: #259fc7;
   --background-colour: #259fc7;
 }
@@ -296,24 +455,12 @@ button.contents {
   user-select: none;
 }
 
-thead {
-  position: sticky;
-  top: 0px;
-  z-index: 1;
-}
-thead tr th {
-  background-color: #ffffff;
-  overflow: hidden;
-  min-width: min-content;
-  height: 3rem;
-}
-
 button div.th:not(.nopadding) {
   padding: 0.75rem;
 }
 
 div.th {
-  min-width: calc(min-content + 2rem);
+  min-width: 0;
   display: flex;
   flex-flow: row nowrap;
   white-space: nowrap;
@@ -334,6 +481,8 @@ div.th .header-text-wrapper {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
+  min-width: 0;
+  overflow: hidden;
 }
 div.th::after {
   content: " ";
@@ -355,6 +504,10 @@ div.th::after {
   cursor: col-resize;
   user-select: none;
   touch-action: none;
+  z-index: 2;
+}
+.resizer:hover {
+  background: rgba(31, 129, 160, 0.4);
 }
 .resizer.isResizing {
   background: rgba(31, 129, 160, 0.4);
@@ -367,18 +520,5 @@ div.th::after {
 .highlight-column {
   width: 20px;
   overflow: hidden;
-}
-
-tr {
-  line-height: var(--line-height, 3);
-}
-tr th {
-  border-top: none;
-  border-bottom: none;
-}
-tr th:first-of-type {
-  border-left: none;
-}
-tr th:last-of-type {
-  border-right: none;
+  border-right: solid 1px #cbd4da;
 }</style>