@lavalogic/scoria 0.37.26 → 0.37.27

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/package.json

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