@lavalogic/scoria 0.37.26 → 0.37.28

package/dist/Components/DateInput.svelte

@@ -298,7 +298,7 @@ label {
 
 .error-wrapper {
   display: block;
-  height: max(var(--input-height, 3rem));
+  height: max(var(--input-height, 3rem), 2rem);
   width: var(--input-width, 100%);
 }
 .error-wrapper.for-table {

package/dist/Components/DimensionInput.svelte

@@ -320,7 +320,7 @@ label {
 
 .error-wrapper {
   display: block;
-  height: max(var(--input-height, 3rem));
+  height: max(var(--input-height, 3rem), 2rem);
   width: var(--input-width, 100%);
 }
 .error-wrapper.for-table {

package/dist/Components/FileUpload.svelte

@@ -386,7 +386,7 @@ label {
 
 .error-wrapper {
   display: block;
-  height: max(var(--input-height, 3rem));
+  height: max(var(--input-height, 3rem), 2rem);
   width: var(--input-width, 100%);
 }
 .error-wrapper.for-table {

package/dist/Components/NumberInput.svelte

@@ -307,7 +307,7 @@ label {
 
 .error-wrapper {
   display: block;
-  height: max(var(--input-height, 3rem));
+  height: max(var(--input-height, 3rem), 2rem);
   width: var(--input-width, 100%);
 }
 .error-wrapper.for-table {

package/dist/Components/PasswordInput.svelte

@@ -238,7 +238,7 @@ label {
 
 .error-wrapper {
   display: block;
-  height: max(var(--input-height, 3rem));
+  height: max(var(--input-height, 3rem), 2rem);
   width: var(--input-width, 100%);
 }
 .error-wrapper.for-table {

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/Types/Columns/Definitions/Accessors/SelectDef.svelte.js

@@ -1,4 +1,3 @@
-import { memoiseRowAccessor } from '../../../../../../Helpers/memoiseByRow.js';
 import { AccessorDef } from './AccessorDef.svelte.js';
 import { AccessorType } from './AccessorType.js';
 /**
@@ -11,10 +10,14 @@ import { AccessorType } from './AccessorType.js';
 export class SelectDef extends AccessorDef {
     constructor(props) {
         super(props);
-        // Row-keyed WeakMap cache around the per-row options provider. For
-        // Promise returns the Promise itself is cached, so {#await} resolves
-        // once per row rather than per render.
-        this.getSpecificOptions = $derived(memoiseRowAccessor(props.getSpecificOptions));
+        // Pass through `props.getSpecificOptions` unchanged. The previous
+        // `memoiseRowAccessor` wrapper cached the per-row option set by
+        // row identity, which made the cached option list stick around
+        // even when the row's mutable properties changed - subtle but
+        // real bug surface for any cell that wants different options
+        // after a sibling property is edited. Svelte's `$derived` in
+        // `TableSelect` already memoises the call correctly.
+        this.getSpecificOptions = $derived(props.getSpecificOptions);
         this.optional = $derived(props.optional ?? false);
         this.clearable = $derived(props.clearable ?? true);
         this._filterFn = $state(props.filterFn);

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.js

@@ -1,4 +1,3 @@
-import { memoiseRowAccessor } from '../../../../../Helpers/memoiseByRow.js';
 import { ColumnType } from '../ColumnType.js';
 /**
  * `ColumnDef<T, FilterFnType, OptionsType, TValue>` is the abstract base
@@ -46,12 +45,24 @@ export class ColumnDef {
         this.resizable = $derived(props.resizable ?? true);
         this.header = $derived(props.header);
         this._filterValueType = $derived(props.filterValueType);
-        // Row-keyed WeakMap cache so a 1000-row render invokes the user
-        // callback at most once per row. Reassigning props.getDisplayValue
-        // re-derives the wrapper and discards the stale cache automatically.
-        // Async returns: the Promise itself is cached, so repeated reads
-        // return the same Promise and Svelte's {#await} resolves once.
-        this.getDisplayValue = $derived(memoiseRowAccessor(props.getDisplayValue));
+        // Pass through `props.getDisplayValue` unchanged.
+        //
+        // We used to wrap this with `memoiseRowAccessor`, which caches the
+        // result by row identity in a WeakMap. That broke every editable
+        // cell whose display depends on a mutable row property: after a
+        // user edited e.g. `item.receiptLineId`, the next render still
+        // got the cached `null` from the first call and rows never
+        // updated (visible on the Receipt pod table's SKU column - the
+        // dropdown selection appeared not to take effect and the
+        // downstream Title / UoM columns never populated).
+        //
+        // Svelte's `$derived` at the cell layer (`TableSelect`,
+        // `FocusableImmutableCell`, ...) already memoises correctly: it
+        // only re-runs the user callback when its reactive inputs change
+        // (cell, row identity, column def, or any state read inside the
+        // user function's synchronous portion). The per-Def WeakMap was
+        // an extra correctness-eating layer.
+        this.getDisplayValue = $derived(props.getDisplayValue);
         this.debug = $derived(props.debug ?? false);
         this.getSortingFn = $derived(props.getSortingFn);
         this.getOptions = $derived(props.getOptions);

package/dist/Components/TextInput.svelte

@@ -326,7 +326,7 @@ label {
 
 .error-wrapper {
   display: block;
-  height: max(var(--input-height, 3rem));
+  height: max(var(--input-height, 3rem), 2rem);
   width: var(--input-width, 100%);
 }
 .error-wrapper.for-table {

package/dist/scss/_mixins.scss

@@ -1065,9 +1065,14 @@
 
 	.error-wrapper {
 		display: block;
-		// width: 100%;
-		// height: max(var(--input-height, #{sizing.$input-height}), 2rem);
-		height: max(var(--input-height, #{sizing.$input-height}));
+		// `max()` requires at least two arguments. The previous
+		// `height: max(var(--input-height, 3rem))` was invalid CSS and
+		// the browser dropped the rule, leaving the wrapper at
+		// `height: auto`, which collapsed inputs inside modals (e.g.
+		// the Edit Receipt Attributes Line Details tab) to ~30px
+		// because the inner `<input>` uses `height: 100%`. Use the
+		// two-argument form that matches `.textarea-error-wrapper`.
+		height: max(var(--input-height, #{sizing.$input-height}), 2rem);
 		width: var(--input-width, 100%);
 
 		&.for-table {

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.28",
   "publishConfig": {
     "access": "restricted"
   },