@lavalogic/scoria 0.37.25 → 0.37.27

package/dist/Components/DateInput.svelte

@@ -46,7 +46,11 @@
 		onchange,
 	}: DateInputProps = $props();
 
-	const isInvalid = $derived((required && !value.trim()) || invalid);
+	// Null-safe: a fresh `<DateInput>` with no value passes `value=null`
+	// through the prop. The old `value.trim()` crashed with "Cannot read
+	// properties of null (reading 'trim')" the moment a required, empty
+	// DateInput rendered inside e.g. the Order Details collapsible card.
+	const isInvalid = $derived((required && !value?.trim()) || invalid);
 
 	function onkeydown(e: KeyboardEvent): void {
 		if (e.key === 'Enter') {

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

@@ -4,7 +4,6 @@
 	lang="ts"
 	generics="T extends object, FilterValueType, RowIdType extends Primitive"
 >
-	import Portal from '../../../../Portal.svelte';
 	import type { AbstractDisplayDef } from '../../../Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
 	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
@@ -210,19 +209,22 @@
 </div>
 {#if showModal && modalComponent}
 	<!--
-		Mirrors the `ValidityCell` pattern: portal the modal to
-		`document.body` so the surrounding sticky / overflow:hidden
-		ancestors (header, pinned columns, virtualised viewport) never
-		clip it. The component receives the public
-		`DisplayModalProps<T>` shape `{ row, close }`.
+		The component receives the public `DisplayModalProps<T>` shape
+		`{ row, close }`. 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.
 	-->
-	<Portal target={document.body}>
-		{@const ModalComponent = modalComponent}
-		<ModalComponent
-			row={cell.row.original}
-			close={onclose}
-		/>
-	</Portal>
+	{@const ModalComponent = modalComponent}
+	<ModalComponent
+		row={cell.row.original}
+		close={onclose}
+	/>
 {/if}
 
 <style>.focusable,

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

@@ -6,7 +6,6 @@
 >
 	import Action from '../../../../Action.svelte';
 	import type { IconProps } from '../../../../IconProps.js';
-	import Portal from '../../../../Portal.svelte';
 	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';
@@ -161,22 +160,30 @@
 		/>
 	</div>
 	{#if showModal}
-		<Portal target={document.body}>
-			<!--
-				`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.
-			-->
-			<ColumnDef.modal
-				row={cell.row.original}
-				close={onclose}
-			/>
-		</Portal>
+		<!--
+			`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>
 

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

@@ -25,6 +25,41 @@
 	import HighlightAllHeader from './HighlightAllHeader.svelte';
 	import SelectAllHeader from './SelectAllHeader.svelte';
 	import type { TableHeadProps } from './TableHeadProps.js';
+
+	/** Per-column toggle queue. The header onclick fires this so multiple
+	 *  clicks within a small window stack and apply on a single timer
+	 *  flush, which lets a fast double-click cycle straight to desc (or
+	 *  to clear-sort) without the user having to wait for the asc state
+	 *  to apply and reload data first. Single clicks pay a ~150 ms delay
+	 *  before the toggle runs, which is below most users' perceived
+	 *  latency threshold while still wide enough to batch dblclicks. */
+	const SORT_DEBOUNCE_MS = 150;
+	const sortDebounce = new WeakMap<
+		object,
+		{ count: number; timer: ReturnType<typeof setTimeout> | null }
+	>();
+	function debouncedSortToggle(columnRef: object, handler: ((e?: unknown) => void) | undefined): void {
+		if (!handler) {
+			return;
+		}
+		let entry = sortDebounce.get(columnRef);
+		if (!entry) {
+			entry = { count: 0, timer: null };
+			sortDebounce.set(columnRef, entry);
+		}
+		entry.count += 1;
+		if (entry.timer != null) {
+			clearTimeout(entry.timer);
+		}
+		entry.timer = setTimeout(() => {
+			const toFire = entry!.count;
+			entry!.count = 0;
+			entry!.timer = null;
+			for (let i = 0; i < toFire; i++) {
+				handler();
+			}
+		}, SORT_DEBOUNCE_MS);
+	}
 </script>
 
 <script
@@ -290,7 +325,7 @@
 							hideTooltip(header.column.columnDef);
 						}}
 						class="contents"
-						onclick={header.column.getToggleSortingHandler()}
+						onclick={() => debouncedSortToggle(header.column, header.column.getToggleSortingHandler())}
 					>
 						<div class="th cursor-pointer select-none">
 							<div class="header-text-wrapper">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.37.25",
+  "version": "0.37.27",
   "publishConfig": {
     "access": "restricted"
   },