@lavalogic/scoria 0.39.2 → 0.40.0

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

@@ -1,192 +1,192 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import Action from '../../../../Action.svelte';
-	import type { IconProps } from '../../../../IconProps.js';
-	import type { AbstractDisplayDef } from '../../../Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
-	import { Colour, ColourSet } from '../../../../../scss/colours.js';
-	import { Size } from '../../../../../Types/Internal/Size.js';
-	import { Validity } from '../../../../../Types/Internal/Validity.js';
-
-	const iconSets: Record<Validity, IconProps> = {
-		[Validity.Invalid]: {
-			name: 'circle-cross',
-			colour: Colour['$error-border'],
-			size: Size.Medium,
-		},
-		[Validity.Valid]: { name: 'circle-tick', colour: Colour['$brand-primary'], size: Size.Medium },
-		[Validity.Info]: {
-			name: 'circle-information',
-			colour: Colour['$ui-blue-6'],
-			size: Size.Medium,
-		},
-		[Validity.Warning]: {
-			name: 'circle-exclamation',
-			colour: Colour['$warning-border'],
-			size: Size.Medium,
-		},
-		[Validity.Neutral]: { name: 'circle-minus', colour: Colour['$ui-blue-6'], size: Size.Medium },
-	};
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object,  FilterValueType, RowIdType extends Primitive"
->
-	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
-	import { getContext, tick } from 'svelte';
-	import type { ValidityCellProps } from './ValidityCellProps.js';
-
-	const { cell }: ValidityCellProps<T, FilterValueType> = $props();
-
-	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
-
-	const ColumnDef = $derived(cell.column.columnDef as AbstractDisplayDef<T, FilterValueType>);
-
-	const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
-		tableContext._focus.getFocusDetailsFor(cell)
-	);
-
-	let previousFocusElement: HTMLElement | undefined = $state();
-	let showModal = $state(false);
-
-	// Match the open-modal state by row-object identity and column id.
-	// Identity-based comparison keeps the modal locked to the row it was
-	// opened on even when pagination / sort / filter changes the visible
-	// index of that row.
-	$effect(() => {
-		const target = tableContext.openModalCell;
-		if (target !== null && target.row === cell.row.original && target.columnId === cell.column.id) {
-			previousFocusElement = document.activeElement as HTMLElement | undefined;
-			showModal = true;
-		} else {
-			showModal = false;
-		}
-	});
-
-	let validity: Validity = $state(Validity.Valid);
-	let reason = $state<string | undefined>();
-
-	$effect(() => {
-		const validityPromise = focusDetails.validity;
-
-		validityPromise
-			.then((v) => {
-				if (!v) {
-					validity = Validity.Neutral;
-					reason = undefined;
-				} else if (isValidityTuple(v)) {
-					validity = v.value;
-					reason = v.reason;
-				} else {
-					validity = v;
-
-					reason = undefined;
-				}
-			})
-			.catch(devCatch);
-	});
-
-	const thisId = $derived(
-		`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`
-	);
-
-	function onclose() {
-		tableContext.setOpenModalCell(null);
-
-		if (previousFocusElement?.id != thisId) {
-			tick()
-				.then(() => {
-					previousFocusElement?.focus();
-				})
-				.catch(devCatch);
-		}
-	}
-
-	const icon = $derived(iconSets[validity]);
-</script>
-
-<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	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}
-	>
-		<Action
-			id={thisId}
-			style={focusDetails.outline}
-			border={false}
-			colourSet={ColourSet.Auxiliary}
-			label={reason}
-			size={Size.FillWidth}
-			{icon}
-			onclick={() => {
-				if (ColumnDef.modal) {
-					tableContext.setOpenModalCell({
-						row: cell.row.original,
-						columnId: cell.column.id,
-					});
-				}
-			}}
-		/>
-	</div>
-	{#if showModal}
-		<!--
-			`ColumnDef.modal` is declared as
-			`Component<DisplayModalProps<TRow>>` on the public column
-			options, which exposes a stable `{ row, close }` prop
-			shape. Cell renderers used to hand a legacy
-			`{ cell, onclose, onsubmit }` triple here, which made the
-			public type lie about the runtime shape - migrated to
-			`{ row, close }` so consumer-authored modals can rely on
-			the documented type.
-
-			The dialog is NOT wrapped in `<Portal target={document.body}>`
-			any more. `<dialog>` opened via `showModal()` enters the
-			browser's top layer, so it already escapes overflow:hidden /
-			sticky / transform ancestors without needing to be re-parented.
-			Moving the `<div>` ancestor mid-mount (Portal's $effect runs
-			during the same microtask round as BaseModal's `tick().then`
-			`dialog.showModal()`) was popping the dialog out of the top
-			layer and leaving it to render inline at the bottom of the
-			page.
-		-->
-		<ColumnDef.modal
-			row={cell.row.original}
-			close={onclose}
-		/>
-	{/if}
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import Action from '../../../../Action.svelte';
+	import type { IconProps } from '../../../../IconProps.js';
+	import type { AbstractDisplayDef } from '../../../Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
+	import { Colour, ColourSet } from '../../../../../scss/colours.js';
+	import { Size } from '../../../../../Types/Internal/Size.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
+
+	const iconSets: Record<Validity, IconProps> = {
+		[Validity.Invalid]: {
+			name: 'circle-cross',
+			colour: Colour['$error-border'],
+			size: Size.Medium,
+		},
+		[Validity.Valid]: { name: 'circle-tick', colour: Colour['$brand-primary'], size: Size.Medium },
+		[Validity.Info]: {
+			name: 'circle-information',
+			colour: Colour['$ui-blue-6'],
+			size: Size.Medium,
+		},
+		[Validity.Warning]: {
+			name: 'circle-exclamation',
+			colour: Colour['$warning-border'],
+			size: Size.Medium,
+		},
+		[Validity.Neutral]: { name: 'circle-minus', colour: Colour['$ui-blue-6'], size: Size.Medium },
+	};
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object,  FilterValueType, RowIdType extends Primitive"
+>
+	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
+	import { getContext, tick } from 'svelte';
+	import type { ValidityCellProps } from './ValidityCellProps.js';
+
+	const { cell }: ValidityCellProps<T, FilterValueType> = $props();
+
+	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
+
+	const ColumnDef = $derived(cell.column.columnDef as AbstractDisplayDef<T, FilterValueType>);
+
+	const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
+		tableContext._focus.getFocusDetailsFor(cell)
+	);
+
+	let previousFocusElement: HTMLElement | undefined = $state();
+	let showModal = $state(false);
+
+	// Match the open-modal state by row-object identity and column id.
+	// Identity-based comparison keeps the modal locked to the row it was
+	// opened on even when pagination / sort / filter changes the visible
+	// index of that row.
+	$effect(() => {
+		const target = tableContext.openModalCell;
+		if (target !== null && target.row === cell.row.original && target.columnId === cell.column.id) {
+			previousFocusElement = document.activeElement as HTMLElement | undefined;
+			showModal = true;
+		} else {
+			showModal = false;
+		}
+	});
+
+	let validity: Validity = $state(Validity.Valid);
+	let reason = $state<string | undefined>();
+
+	$effect(() => {
+		const validityPromise = focusDetails.validity;
+
+		validityPromise
+			.then((v) => {
+				if (!v) {
+					validity = Validity.Neutral;
+					reason = undefined;
+				} else if (isValidityTuple(v)) {
+					validity = v.value;
+					reason = v.reason;
+				} else {
+					validity = v;
+
+					reason = undefined;
+				}
+			})
+			.catch(devCatch);
+	});
+
+	const thisId = $derived(
+		`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`
+	);
+
+	function onclose() {
+		tableContext.setOpenModalCell(null);
+
+		if (previousFocusElement?.id != thisId) {
+			tick()
+				.then(() => {
+					previousFocusElement?.focus();
+				})
+				.catch(devCatch);
+		}
+	}
+
+	const icon = $derived(iconSets[validity]);
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	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}
+	>
+		<Action
+			id={thisId}
+			style={focusDetails.outline}
+			border={false}
+			colourSet={ColourSet.Auxiliary}
+			label={reason}
+			size={Size.FillWidth}
+			{icon}
+			onclick={() => {
+				if (ColumnDef.modal) {
+					tableContext.setOpenModalCell({
+						row: cell.row.original,
+						columnId: cell.column.id,
+					});
+				}
+			}}
+		/>
+	</div>
+	{#if showModal}
+		<!--
+			`ColumnDef.modal` is declared as
+			`Component<DisplayModalProps<TRow>>` on the public column
+			options, which exposes a stable `{ row, close }` prop
+			shape. Cell renderers used to hand a legacy
+			`{ cell, onclose, onsubmit }` triple here, which made the
+			public type lie about the runtime shape - migrated to
+			`{ row, close }` so consumer-authored modals can rely on
+			the documented type.
+
+			The dialog is NOT wrapped in `<Portal target={document.body}>`
+			any more. `<dialog>` opened via `showModal()` enters the
+			browser's top layer, so it already escapes overflow:hidden /
+			sticky / transform ancestors without needing to be re-parented.
+			Moving the `<div>` ancestor mid-mount (Portal's $effect runs
+			during the same microtask round as BaseModal's `tick().then`
+			`dialog.showModal()`) was popping the dialog out of the top
+			layer and leaving it to render inline at the bottom of the
+			page.
+		-->
+		<ColumnDef.modal
+			row={cell.row.original}
+			close={onclose}
+		/>
+	{/if}
+</div>
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -245,4 +245,4 @@ div.slot-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
-}</style>
+}</style>