@lavalogic/scoria 0.40.1 → 0.40.3

package/dist/Components/Table/Body/Rows/Columns/BubbleCell.svelte

@@ -1,126 +1,126 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, FilterValueType, RowIdType extends Primitive"
->
-	import Bubble from '../../../../Bubble.svelte';
-	import { BubbleDef } from '../../../Types/Columns/Definitions/Display/BubbleDef.svelte.js';
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
-	import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
-	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext } from 'svelte';
-	import type { BubbleCellProps } from './BubbleCellProps.js';
-
-	const { cell }: BubbleCellProps<T, FilterValueType> = $props();
-
-	/**
-	 * Awaited or sync array of string labels to render as Bubble chips.
-	 * The cast is required because `BubbleDef` does not yet carry a
-	 * narrowed `TValue` generic and the dispatch passes the loose
-	 * `TableCell` rather than `BubbleTableCell<T, FilterValueType>`.
-	 */
-	const values = $derived(cell.getValue()) as Array<string> | Promise<Array<string>>;
-
-	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
-
-	const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
-		tableContext._focus.getFocusDetailsFor(cell)
-	);
-
-	let validity: Validity = $state(Validity.Valid);
-	$effect(() => {
-		const validityPromise = focusDetails.validity;
-
-		validityPromise
-			.then((v) => {
-				if (!v) {
-					validity = Validity.Neutral;
-				} else if (isValidityTuple(v)) {
-					validity = v.value;
-				} else {
-					validity = v;
-				}
-			})
-			.catch(devCatch);
-	});
-</script>
-
-<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-	tabIndex={0}
-	class="focusable"
-	class:multifocus={focusDetails.isMultiFocused}
-	class:multifocus-start={focusDetails.isMultiFocusStart}
-	style={focusDetails.outline}
-	class:info={validity == Validity.Info}
-	class:success={validity == Validity.Valid}
-	class:warning={validity == Validity.Warning}
-	class:error={validity == Validity.Invalid}
-	onmousedown={(e) => {
-		// start focus only on left click
-		if (e.button === 0) {
-			if (e.shiftKey) {
-				e.preventDefault();
-				tableContext.setFocusEnd(focusDetails.coordinates);
-			} else {
-				tableContext.startFocus(focusDetails.coordinates);
-			}
-		}
-	}}
-	onmouseover={() => {
-		if (tableContext.isMousingDown) {
-			tableContext.setFocusEnd(focusDetails.coordinates);
-		}
-	}}
-	onmouseup={() => {
-		tableContext.endFocus(focusDetails.coordinates);
-	}}
->
-	<div class="bubble-parent">
-		{#await values then values}
-			<!-- `maxBubbles` (default 3) caps how many pills render inline;
-			     anything beyond gets a single `"+N more"` overflow chip with
-			     the hidden labels as a hover tooltip. Key combines index and
-			     value because duplicate labels would otherwise collapse and
-			     reordering with identical labels would force unrelated
-			     bubbles to swap. -->
-			{@const maxBubbles = (cell.column.columnDef as BubbleDef<T>).maxBubbles ?? 3}
-			{@const visibleBubbles = values.slice(0, maxBubbles)}
-			{@const overflowCount = Math.max(0, values.length - maxBubbles)}
-			{@const overflowTitle = values.slice(maxBubbles).join(', ')}
-			{#each visibleBubbles as value, index (`${index}:${value}`)}
-				{@const colourPromise = (cell.column.columnDef as BubbleDef<T>).getColour?.(
-					cell.row.original,
-					cell.row.originalIndex,
-					value
-				)}
-
-				{#if colourPromise == undefined}
-					<Bubble {value} />
-				{:else}
-					{#await colourPromise then colour}
-						<Bubble
-							{value}
-							colours={colour ?? undefined}
-						/>
-					{/await}
-				{/if}
-			{/each}
-			{#if overflowCount > 0}
-				<span
-					class="bubble-overflow"
-					title={overflowTitle}
-				>+{overflowCount} more</span>
-			{/if}
-		{/await}
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, FilterValueType, RowIdType extends Primitive"
+>
+	import Bubble from '../../../../Bubble.svelte';
+	import { BubbleDef } from '../../../Types/Columns/Definitions/Display/BubbleDef.svelte.js';
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
+	import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
+	import { getContext } from 'svelte';
+	import type { BubbleCellProps } from './BubbleCellProps.js';
+
+	const { cell }: BubbleCellProps<T, FilterValueType> = $props();
+
+	/**
+	 * Awaited or sync array of string labels to render as Bubble chips.
+	 * The cast is required because `BubbleDef` does not yet carry a
+	 * narrowed `TValue` generic and the dispatch passes the loose
+	 * `TableCell` rather than `BubbleTableCell<T, FilterValueType>`.
+	 */
+	const values = $derived(cell.getValue()) as Array<string> | Promise<Array<string>>;
+
+	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
+
+	const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
+		tableContext._focus.getFocusDetailsFor(cell)
+	);
+
+	let validity: Validity = $state(Validity.Valid);
+	$effect(() => {
+		const validityPromise = focusDetails.validity;
+
+		validityPromise
+			.then((v) => {
+				if (!v) {
+					validity = Validity.Neutral;
+				} else if (isValidityTuple(v)) {
+					validity = v.value;
+				} else {
+					validity = v;
+				}
+			})
+			.catch(devCatch);
+	});
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
+	tabIndex={0}
+	class="focusable"
+	class:multifocus={focusDetails.isMultiFocused}
+	class:multifocus-start={focusDetails.isMultiFocusStart}
+	style={focusDetails.outline}
+	class:info={validity == Validity.Info}
+	class:success={validity == Validity.Valid}
+	class:warning={validity == Validity.Warning}
+	class:error={validity == Validity.Invalid}
+	onmousedown={(e) => {
+		// start focus only on left click
+		if (e.button === 0) {
+			if (e.shiftKey) {
+				e.preventDefault();
+				tableContext.setFocusEnd(focusDetails.coordinates);
+			} else {
+				tableContext.startFocus(focusDetails.coordinates);
+			}
+		}
+	}}
+	onmouseover={() => {
+		if (tableContext.isMousingDown) {
+			tableContext.setFocusEnd(focusDetails.coordinates);
+		}
+	}}
+	onmouseup={() => {
+		tableContext.endFocus(focusDetails.coordinates);
+	}}
+>
+	<div class="bubble-parent">
+		{#await values then values}
+			<!-- `maxBubbles` (default 3) caps how many pills render inline;
+			     anything beyond gets a single `"+N more"` overflow chip with
+			     the hidden labels as a hover tooltip. Key combines index and
+			     value because duplicate labels would otherwise collapse and
+			     reordering with identical labels would force unrelated
+			     bubbles to swap. -->
+			{@const maxBubbles = (cell.column.columnDef as BubbleDef<T>).maxBubbles ?? 3}
+			{@const visibleBubbles = values.slice(0, maxBubbles)}
+			{@const overflowCount = Math.max(0, values.length - maxBubbles)}
+			{@const overflowTitle = values.slice(maxBubbles).join(', ')}
+			{#each visibleBubbles as value, index (`${index}:${value}`)}
+				{@const colourPromise = (cell.column.columnDef as BubbleDef<T>).getColour?.(
+					cell.row.original,
+					cell.row.originalIndex,
+					value
+				)}
+
+				{#if colourPromise == undefined}
+					<Bubble {value} />
+				{:else}
+					{#await colourPromise then colour}
+						<Bubble
+							{value}
+							colours={colour ?? undefined}
+						/>
+					{/await}
+				{/if}
+			{/each}
+			{#if overflowCount > 0}
+				<span
+					class="bubble-overflow"
+					title={overflowTitle}
+				>+{overflowCount} more</span>
+			{/if}
+		{/await}
+	</div>
+</div>
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -218,4 +218,4 @@ div.bubble-parent {
   font-weight: 500;
   white-space: nowrap;
   cursor: default;
-}</style>
+}</style>

package/dist/Components/Table/Body/Rows/Columns/ExpandCell.svelte

@@ -1,122 +1,165 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, R extends object,FilterValueType, IdType extends Primitive"
->
-	import Action from '../../../../Action.svelte';
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import type { Primitive } from '../../../Types/Context/TableInitOptions.js';
-	import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
-	import { ColourSet } from '../../../../../scss/colours.js';
-	import { Size } from '../../../../../Types/Internal/Size.js';
-	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext } from 'svelte';
-	import type { ExpandCellProps } from './ExpandCellProps.js';
-
-	const {
-		cell,
-		expandedColumnDef,
-		onExpandChange,
-	}: ExpandCellProps<T, R, IdType, FilterValueType> = $props();
-
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-	const focusDetails: TableFocusDetails<T, IdType> = $derived(
-		tableContext._focus.getFocusDetailsFor(cell)
-	);
-
-	const enabled: boolean | Promise<boolean> = $derived(
-		cell.column.columnDef.isEnabled(cell.row.original, cell.row.originalIndex)
-	);
-
-	let validity: Validity = $state(Validity.Valid);
-	$effect(() => {
-		const validityPromise = focusDetails.validity;
-
-		validityPromise
-			.then((v) => {
-				if (!v) {
-					validity = Validity.Neutral;
-				} else if (isValidityTuple(v)) {
-					validity = v.value;
-				} else {
-					validity = v;
-				}
-			})
-			.catch(devCatch);
-	});
-</script>
-
-<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class:info={validity == Validity.Info}
-	class:success={validity == Validity.Valid}
-	class:warning={validity == Validity.Warning}
-	class:error={validity == Validity.Invalid}
-	class="focusable"
-	onmousedown={(e) => {
-		// start focus only on left click
-		if (e.button === 0) {
-			if (e.shiftKey) {
-				e.preventDefault();
-				tableContext.setFocusEnd(focusDetails.coordinates);
-			} else {
-				tableContext.startFocus(focusDetails.coordinates);
-			}
-		}
-	}}
-	onmouseover={() => {
-		if (tableContext.isMousingDown) {
-			tableContext.setFocusEnd(focusDetails.coordinates);
-		}
-	}}
-	onmouseup={() => {
-		tableContext.endFocus(focusDetails.coordinates);
-	}}
->
-	<div
-		class="slot-wrapper"
-		class:multifocus={focusDetails.isMultiFocused}
-		class:multifocus-start={focusDetails.isMultiFocusStart}
-	>
-		{#await enabled}
-			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-			{@render action(false)}
-		{:then enabled}
-			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-			{@render action(enabled)}
-		{/await}
-	</div>
-</div>
-
-{#snippet action(enabled: boolean)}
-	<div class="noninteractive">
-		<Action
-			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-			style={focusDetails.outline}
-			disabled={!enabled}
-			border={false}
-			label="Expand Nested Table"
-			size={Size.FillWidth}
-			icon={{
-				name: expandedColumnDef?.id === cell.column.columnDef.id ? 'minus' : 'plus',
-				size: Size.Medium,
-			}}
-			colourSet={expandedColumnDef?.id === cell.column.columnDef.id
-				? ColourSet.Primary
-				: ColourSet.Auxiliary}
-			onclick={(e: MouseEvent) => {
-				// FIXME why is this required? svelte bug?
-				e.stopImmediatePropagation();
-				// toastContext.toast("clicked")
-				onExpandChange(cell.column.columnDef);
-			}}
-		/>
-	</div>
-{/snippet}
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, R extends object,FilterValueType, IdType extends Primitive"
+>
+	import Action from '../../../../Action.svelte';
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../../../Types/Context/TableInitOptions.js';
+	import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
+	import { ColourSet } from '../../../../../scss/colours.js';
+	import { Size } from '../../../../../Types/Internal/Size.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
+	import { getContext } from 'svelte';
+	import type { ExpandCellProps } from './ExpandCellProps.js';
+
+	const {
+		cell,
+		expandedColumnDef,
+		onExpandChange,
+	}: ExpandCellProps<T, R, IdType, FilterValueType> = $props();
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+	const focusDetails: TableFocusDetails<T, IdType> = $derived(
+		tableContext._focus.getFocusDetailsFor(cell)
+	);
+
+	const enabled: boolean | Promise<boolean> = $derived(
+		cell.column.columnDef.isEnabled(cell.row.original, cell.row.originalIndex)
+	);
+
+	// Per-row toggle visibility. When `isVisible` resolves false the toggle is
+	// omitted entirely (rather than disabled). Sync booleans are used directly
+	// so non-visible rows never flash the icon; promises resolve into state.
+	const visibleRaw: boolean | Promise<boolean> = $derived(
+		cell.column.columnDef.isVisible
+			? cell.column.columnDef.isVisible(cell.row.original, cell.row.originalIndex)
+			: true
+	);
+	let visibleAsyncResolved = $state(true);
+	let visibleCounter = 0;
+	$effect(() => {
+		const raw = visibleRaw;
+		if (typeof raw === 'boolean') {
+			return;
+		}
+		const local = (visibleCounter = visibleCounter + 1);
+		raw
+			.then((v) => {
+				if (visibleCounter === local) {
+					visibleAsyncResolved = v;
+				}
+			})
+			.catch(() => {
+				if (visibleCounter === local) {
+					visibleAsyncResolved = false;
+				}
+			});
+	});
+	const visible = $derived(typeof visibleRaw === 'boolean' ? visibleRaw : visibleAsyncResolved);
+
+	let validity: Validity = $state(Validity.Valid);
+	$effect(() => {
+		const validityPromise = focusDetails.validity;
+
+		validityPromise
+			.then((v) => {
+				if (!v) {
+					validity = Validity.Neutral;
+				} else if (isValidityTuple(v)) {
+					validity = v.value;
+				} else {
+					validity = v;
+				}
+			})
+			.catch(devCatch);
+	});
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class:info={validity == Validity.Info}
+	class:success={validity == Validity.Valid}
+	class:warning={validity == Validity.Warning}
+	class:error={validity == Validity.Invalid}
+	class="focusable"
+	onmousedown={(e) => {
+		// start focus only on left click
+		if (e.button === 0) {
+			if (e.shiftKey) {
+				e.preventDefault();
+				tableContext.setFocusEnd(focusDetails.coordinates);
+			} else {
+				tableContext.startFocus(focusDetails.coordinates);
+			}
+		}
+	}}
+	onmouseover={() => {
+		if (tableContext.isMousingDown) {
+			tableContext.setFocusEnd(focusDetails.coordinates);
+		}
+	}}
+	onmouseup={() => {
+		tableContext.endFocus(focusDetails.coordinates);
+	}}
+>
+	<div
+		class="slot-wrapper"
+		class:multifocus={focusDetails.isMultiFocused}
+		class:multifocus-start={focusDetails.isMultiFocusStart}
+	>
+		{#if visible}
+			{#await enabled}
+				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+				{@render action(false)}
+			{:then enabled}
+				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+				{@render action(enabled)}
+			{/await}
+		{/if}
+	</div>
+</div>
+
+{#snippet action(enabled: boolean)}
+	<div class="noninteractive">
+		<Action
+			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
+			style={focusDetails.outline}
+			disabled={!enabled}
+			border={false}
+			label={cell.column.columnDef.onActivate ? 'Open Related Table' : 'Expand Nested Table'}
+			size={Size.FillWidth}
+			icon={{
+				name:
+					!cell.column.columnDef.onActivate &&
+					expandedColumnDef?.id === cell.column.columnDef.id
+						? 'minus'
+						: 'plus',
+				size: Size.Medium,
+			}}
+			colourSet={expandedColumnDef?.id === cell.column.columnDef.id && !cell.column.columnDef.onActivate
+				? ColourSet.Primary
+				: ColourSet.Auxiliary}
+			onclick={(e: MouseEvent) => {
+				// FIXME why is this required? svelte bug?
+				e.stopImmediatePropagation();
+				// Navigate-instead-of-expand: when the column carries an
+				// `onActivate`, drive the consumer's drill-down rather than
+				// mounting an inner table.
+				const onActivate = cell.column.columnDef.onActivate;
+				if (onActivate) {
+					void onActivate(cell.row.original);
+				} else {
+					onExpandChange(cell.column.columnDef);
+				}
+			}}
+		/>
+	</div>
+{/snippet}
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -199,4 +242,4 @@ div.slot-wrapper {
 .noninteractive {
   display: contents;
   user-select: none;
-}</style>
+}</style>