@lavalogic/scoria 0.37.31 → 0.37.33

package/dist/Components/SingleSelect.svelte

@@ -179,29 +179,10 @@
 			// svelecte always emits the full option object regardless of
 			// `valueAsObject`. Map to the shape the discriminated variant
 			// promised: primitive for AsPrimitive, object for AsObject.
-			if (typeof window !== 'undefined') {
-				// eslint-disable-next-line no-console
-				console.debug('%c[scoria/SingleSelect] svelecte onChange fired', 'color:#a0a', {
-					inputId,
-					name,
-					newValue,
-					newValueType: typeof newValue,
-					valueAsObject,
-					valueProp,
-				});
-			}
 			if (valueAsObject) {
 				void (onchange as (v: V | null) => void | Promise<void>)(newValue);
 			} else {
 				const primitive = newValue == null ? null : newValue[valueProp];
-				if (typeof window !== 'undefined') {
-					// eslint-disable-next-line no-console
-					console.debug(
-						'%c[scoria/SingleSelect] calling outer onchange with primitive',
-						'color:#a0a',
-						{ primitive }
-					);
-				}
 				// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
 				void (onchange as (v: V[VP] | null) => void | Promise<void>)(primitive);
 			}

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

@@ -145,32 +145,8 @@
 					// V (from `value: T`) clashes with the option type
 					// (`SelectOption<T>`); the casts let `V` be inferred
 					// from the explicit `onchange` annotation.
-					if (dev) {
-						console.debug(
-							'%c[scoria/TableSelect] onchange fired',
-							'color:#0a0',
-							{
-								columnId: cell.column.columnDef.id,
-								newValue,
-								newValueType: typeof newValue,
-								oldValue: value,
-								optional,
-								willEdit: newValue !== value && (optional || newValue != null),
-							}
-						);
-					}
 					if (newValue !== value) {
 						if (optional || newValue != null) {
-							if (dev) {
-								console.debug(
-									'%c[scoria/TableSelect] calling tableContext.onEditCell',
-									'color:#0a0',
-									{
-										coords: $state.snapshot(editable.focusDetails.coordinates),
-										value: newValue,
-									}
-								);
-							}
 							tableContext
 								.onEditCell(cell.row.original, editable.focusDetails.coordinates, newValue ?? null)
 								.catch(devCatch);

package/dist/Components/Table/ColumnFactory.svelte.js

@@ -376,6 +376,16 @@ export function createColumnFactory() {
                 filterValueType: opts.filterValueType ?? FilterValueType.String,
                 getSortingFn: opts.getSortingFn,
                 getOptions: normalisedOptions,
+                // Forward reactiveDependencies onto the def so
+                // `makeRow.getValue` can read them synchronously before
+                // calling the (possibly async) accessor. Without this,
+                // reactive reads that happen only after `await` inside
+                // the consumer's `value` callback are not tracked by the
+                // cell's `$derived`, and downstream display cells never
+                // refresh when a sibling field is edited (visible on the
+                // Receipt pod table: Title / UoM did not reload after the
+                // SKU select changed `item.receiptLineId`).
+                reactiveDependencies: opts.reactiveDependencies,
             });
             return makeSpec('display', def);
         },

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.d.ts

@@ -92,6 +92,17 @@ export interface ColumnDefProps<T extends object, in FilterFnType, out OptionsTy
      *  advanced filter panel. See `BaseColumnOptions.filterGroup` for
      *  the consumer-facing description. */
     filterGroup?: string;
+    /**
+     * Optional thunk returning a list of additional reactive values the
+     * cell renderer should depend on. Read synchronously from
+     * `cell.getValue` before the (possibly async) `accessorFn` runs, so
+     * Svelte's `$derived` tracking captures these row-level reads even
+     * when the user's accessor reads them only after an `await` (where
+     * tracking is no longer active). Use when a column's displayed
+     * value depends on a sibling field that the accessor reads after a
+     * `Promise.then` / `await` boundary.
+     */
+    reactiveDependencies?: (row: T) => ReadonlyArray<unknown>;
 }
 /**
  * `ColumnDef<T, FilterFnType, OptionsType, TValue>` is the abstract base
@@ -137,6 +148,13 @@ export declare abstract class ColumnDef<T extends object, in FilterFnType = neve
     readonly isValid: ValidationFn<T> | undefined;
     /** Reads the row value. Required at the `AccessorDef` subclass layer. */
     readonly accessorFn: AccessorFn<T, TValue> | undefined;
+    /**
+     * Optional thunk returning a list of additional reactive values the
+     * cell should depend on. Read synchronously by `cell.getValue` so
+     * Svelte's `$derived` tracking picks them up even when the user's
+     * `accessorFn` accesses them only after an `await` boundary.
+     */
+    readonly reactiveDependencies: ((row: T) => ReadonlyArray<unknown>) | undefined;
     /** Filter predicate. Each subclass narrows the generic parameter. */
     abstract filterFn: FilterFn<T, FilterFnType> | undefined;
     private _minSize;

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

@@ -63,6 +63,7 @@ export class ColumnDef {
         // user function's synchronous portion). The per-Def WeakMap was
         // an extra correctness-eating layer.
         this.getDisplayValue = $derived(props.getDisplayValue);
+        this.reactiveDependencies = $derived(props.reactiveDependencies);
         this.debug = $derived(props.debug ?? false);
         this.getSortingFn = $derived(props.getSortingFn);
         this.getOptions = $derived(props.getOptions);
@@ -90,6 +91,13 @@ export class ColumnDef {
     isValid;
     /** Reads the row value. Required at the `AccessorDef` subclass layer. */
     accessorFn;
+    /**
+     * Optional thunk returning a list of additional reactive values the
+     * cell should depend on. Read synchronously by `cell.getValue` so
+     * Svelte's `$derived` tracking picks them up even when the user's
+     * `accessorFn` accesses them only after an `await` boundary.
+     */
+    reactiveDependencies;
     _minSize;
     /** Minimum width in pixels. */
     get minSize() {

package/dist/Components/Table/Types/Context/TableContext.svelte.js

@@ -1833,6 +1833,19 @@ export class TableContext {
                 id: `${index}_${def.id}`,
                 row: row,
                 getValue: () => {
+                    // Read declared reactive dependencies synchronously so the
+                    // caller's `$derived` registers them even when the
+                    // (possibly async) accessor reads them only after an
+                    // `await` (where Svelte's tracking context is no longer
+                    // active). The returned tuple is read for its side-effect
+                    // of touching each entry through the row proxy; the
+                    // values themselves are discarded.
+                    const deps = def.reactiveDependencies?.(item);
+                    if (deps) {
+                        for (let i = 0; i < deps.length; i++) {
+                            void deps[i];
+                        }
+                    }
                     const gotValue = def.accessorFn?.(item, index);
                     if (gotValue !== undefined) {
                         return gotValue;

package/dist/Components/Table/Types/Public/ColumnOptions.d.ts

@@ -184,6 +184,18 @@ export interface DisplayColumnOptions<TRow extends object, TValue = unknown> ext
      * types.
      */
     getOptions?: () => ReadonlyArray<SelectOption<TValue>> | Promise<ReadonlyArray<SelectOption<TValue>>>;
+    /**
+     * Optional thunk returning a list of additional reactive values
+     * this column's `value` callback depends on. Read synchronously
+     * by the cell renderer before invoking `value` so Svelte's
+     * `$derived` tracking captures those row-level reads, even when
+     * the `value` callback reads them only after an `await` boundary
+     * (where reactive tracking is no longer active). Use when the
+     * computed value depends on a sibling field that is read inside
+     * the async portion of `value` (e.g. `(row) => [row.fkId]` for a
+     * display column that fetches a foreign-key entity by id).
+     */
+    reactiveDependencies?: (row: TRow) => ReadonlyArray<unknown>;
 }
 /** Options for `col.bubble({ header, value, colour, ... })`. Renders one or
  *  more coloured pill bubbles per row. */

package/dist/Components/Table/createTable.svelte.js

@@ -255,24 +255,9 @@ function makeOnEditCell(editHandlers, onAnyEdit) {
     }
     return async (item, coords, value) => {
         const handler = editHandlers.get(coords.id);
-        if (typeof window !== 'undefined') {
-            // eslint-disable-next-line no-console
-            console.debug('%c[scoria/makeOnEditCell] dispatching', 'color:#08f', {
-                coordsId: coords.id,
-                value,
-                handlerFound: !!handler,
-                registeredHandlerKeys: Array.from(editHandlers.keys()),
-            });
-        }
         if (handler) {
             try {
                 await handler(item, value, coords);
-                if (typeof window !== 'undefined') {
-                    // eslint-disable-next-line no-console
-                    console.debug('%c[scoria/makeOnEditCell] handler resolved', 'color:#08f', {
-                        coordsId: coords.id,
-                    });
-                }
             }
             catch (e) {
                 devCatch(e);

package/dist/Helpers/dropdownPortal.js

@@ -90,8 +90,6 @@ export function attachDropdownPortal(options) {
             /* nothing wired up */
         };
     }
-    let originalParent = null;
-    let originalNextSibling = null;
     let isPortalled = false;
     const reposition = () => {
         if (!isPortalled) {
@@ -144,32 +142,31 @@ export function attachDropdownPortal(options) {
         if (isPortalled) {
             return;
         }
-        originalParent = dropdown.parentNode;
-        originalNextSibling = dropdown.nextSibling;
-        // Clear any `display: none` left over from a previous portalIn
-        // (see the defensive hide there) so the dropdown is visible
-        // once teleported into the new host.
+        // PREVIOUSLY: this helper moved the dropdown to `document.body`
+        // (or to the open `<dialog>` ancestor) via `appendChild` so it
+        // would escape ancestor `overflow: hidden` / `z-index` clipping.
+        // That hop broke Svelte 5's per-component event delegation:
+        // inline `onmousedown` / `onclick` handlers in Svelecte's
+        // template (specifically the `.sv_dropdown` element) are wired
+        // through a delegated dispatch rooted at the component's
+        // original mount point, and the dispatch's parent-chain walk
+        // never reaches the moved element. The visible symptom: mouse
+        // clicks on dropdown options did not select (keyboard Enter
+        // did, because that path bypasses the dropdown's click
+        // handler).
+        //
+        // We now leave the dropdown in its original DOM location and
+        // only flip it to `position: fixed`. `position: fixed` escapes
+        // ancestor `overflow` clipping (the original motivation for
+        // portaling) without removing the element from its component
+        // tree, so Svelte's delegated dispatch continues to find it.
+        // The reposition logic below tracks the trigger via
+        // `getBoundingClientRect` exactly as before.
         dropdown.style.display = '';
-        // Append the dropdown to the nearest open native `<dialog>` ancestor
-        // when one exists, otherwise to `document.body`. A `<dialog>` opened
-        // via `showModal()` renders in the browser's top layer, which sits
-        // above every z-indexed element in the regular stacking context.
-        // Without this hop the dropdown's `z-index: 10000` was still painted
-        // behind the dialog backdrop and its content (the symptom that
-        // surfaced as "select options disappear behind the allocate modal").
-        const dialogHost = trigger.closest('dialog');
-        const portalTarget = dialogHost && dialogHost.open ? dialogHost : document.body;
-        portalTarget.appendChild(dropdown);
-        // Tag the teleported dropdown so any "click outside the
-        // panel" / "click outside the trigger" handler elsewhere in
-        // the codebase can recognise the dropdown as a logical
-        // extension of its trigger and ignore clicks landing inside
-        // it. The `TableSidebar` side-panel uses this marker (along
-        // with `closest('.sv_dropdown')`) so clicking an option in a
-        // teleported filter-row dropdown does not close the
-        // side-panel under it. Components that want to ignore
-        // portal clicks should check
-        // `el.closest('[data-scoria-portal-dropdown]')`.
+        // Marker preserved for any consumer that still uses it (e.g.
+        // the TableSidebar "click-outside" handler). The dropdown is
+        // no longer literally portaled, but the marker means "treat
+        // clicks landing here as part of the trigger".
         dropdown.setAttribute('data-scoria-portal-dropdown', '');
         isPortalled = true;
         // First-frame measurement: lay out, then reposition again on
@@ -208,24 +205,14 @@ export function attachDropdownPortal(options) {
         // `display: none` (e.g. on certain transition-cancel race paths
         // the open/close class flip and the inline style update arrive
         // out of order), the dropdown would now be `position: static;
-        // display: block` in `document.body` and contribute its option
-        // list's height to the body scroll size - which is what surfaces
-        // as a stray page-level vertical scrollbar after toggling a
-        // select. Force `display: none` here; Svelecte will restore the
-        // inline style on next open via its own class-driven render.
+        // display: block` and contribute its option list's height to
+        // the page scroll size, which is what surfaces as a stray
+        // page-level vertical scrollbar after toggling a select. Force
+        // `display: none` here; Svelecte will restore the inline style
+        // on next open via its own class-driven render.
         if (!dropdown.classList.contains('is-open')) {
             dropdown.style.display = 'none';
         }
-        if (originalParent != null) {
-            if (originalNextSibling != null && originalNextSibling.parentNode === originalParent) {
-                originalParent.insertBefore(dropdown, originalNextSibling);
-            }
-            else {
-                originalParent.appendChild(dropdown);
-            }
-        }
-        originalParent = null;
-        originalNextSibling = null;
         isPortalled = false;
     };
     // Apply / unapply the portal whenever Svelecte toggles the

package/package.json

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