@lavalogic/scoria 0.37.42 → 0.37.44

package/dist/Components/HorizontalTabGroup.svelte

@@ -15,6 +15,7 @@
 		selected,
 		noRadius = false,
 		grow = false,
+		dense = false,
 		filterable = false,
 		filterFn,
 	}: HorizontalTabGroupProps<CommonDenominator> = $props();
@@ -42,6 +43,7 @@
 	class="wrapper"
 	class:no-radius={noRadius}
 	class:grow
+	class:dense
 >
 	<div class="tabs">
 		<div class="sticky">
@@ -104,6 +106,9 @@
 .wrapper.grow {
   flex-grow: 1;
 }
+.wrapper.dense {
+  align-items: flex-start;
+}
 .wrapper:not(.grow) .tabs {
   padding-top: 1px;
 }

package/dist/Components/HorizontalTabGroupProps.d.ts

@@ -15,6 +15,18 @@ interface HorizontalTabGroupPropsBase<CommonDenominator> {
     noRadius?: boolean;
     /** Stretch to fill the parent's flex axis. */
     grow?: boolean;
+    /**
+     * Anchor the tab strip to the top of the group rather than letting
+     * it stretch to the height of the active tab's content. In the
+     * default `align-items: stretch` row layout, the tabs strip and the
+     * content pane stretch each other to the tallest natural height -
+     * which is fine for full-page tables, but leaves a tall column of
+     * empty `.ui-blue-2` background next to a short tab body inside a
+     * dialog. With `dense`, the wrapper switches to `align-items:
+     * flex-start` so both children sit at their natural heights and
+     * the group collapses onto whichever is taller.
+     */
+    dense?: boolean;
     /** The tabs to render. Keyed by `option.label`. */
     tabs: ReadonlyArray<TabOption<CommonDenominator>>;
     /** Currently selected tab, matched by reference. */

package/dist/Components/Table/Body/QuickSearchCell.svelte

@@ -288,23 +288,31 @@
 	let showFromDateModal = $state(false);
 	let showToDateModal = $state(false);
 
-	function generateOnChangeObject(label: string) {
+	function generateOnChangeObject(_label: string) {
 		return (newValue: SelectOption<unknown> | null) => {
 			tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
-			tableContext.dataRepo.__queryValues.set(label, newValue);
+			// Cache by `def.id` (which equals `customFilter.id`) so the
+			// `$effect` lookup `__queryValues.get(customFilter.id)`
+			// finds it on the next reactive pass. Previously we keyed
+			// the cache by the human-readable `label`, so the effect's
+			// lookup returned `undefined` and the QuerySelect was
+			// immediately reset to the placeholder.
+			tableContext.dataRepo.__queryValues.set(def.id, newValue);
 			assertNotPromise(newValue);
 			value = newValue;
 		};
 	}
 
-	function generateOnChangePrimitive(label: string) {
+	function generateOnChangePrimitive(_label: string) {
 		// Phase 7.6: AsPrimitive QuerySelect now hands us the primitive
 		// directly (previously typed as `SelectOption` with a hidden
 		// `.value` dig). The discriminated typing makes the flow
 		// straightforward.
 		return (newValue: unknown) => {
 			tableContext.paginationRepo?.filterBy(def.id, newValue ?? null);
-			tableContext.dataRepo.__queryValues.set(label, newValue ?? null);
+			// See `generateOnChangeObject` - cache key matches the
+			// `$effect` lookup above.
+			tableContext.dataRepo.__queryValues.set(def.id, newValue ?? null);
 			assertNotPromise(newValue);
 			value = newValue ?? null;
 		};

package/dist/Components/Table/Misc/FilterInput.svelte

@@ -257,22 +257,68 @@
 	let showFromDateModal = $state(false);
 	let showToDateModal = $state(false);
 
-	function generateOnChangeObject(label: string) {
+	/**
+	 * Debounce window for typed filter inputs (Text / Number / Between
+	 * min+max). Discrete selections (Svelecte selects, date pickers,
+	 * filter-mode dropdowns) bypass this and fire `filterBy` immediately.
+	 * Combined with the 400 ms debounce in `createRemoteRowSource`, the
+	 * server-side lookup lands roughly one second after the last keystroke,
+	 * which matches the "wait a couple of seconds" expectation users have
+	 * when typing into a free-text filter.
+	 */
+	const FILTER_INPUT_DEBOUNCE_MS = 500;
+
+	let typingDebounceTimer: ReturnType<typeof setTimeout> | undefined;
+
+	/** Fire the table's `filterBy` after the user stops typing for
+	 *  `FILTER_INPUT_DEBOUNCE_MS`. Repeated calls coalesce; the most
+	 *  recent value wins. */
+	function debouncedFilterBy(id: string, newValue: unknown): void {
+		if (typingDebounceTimer !== undefined) {
+			clearTimeout(typingDebounceTimer);
+		}
+		typingDebounceTimer = setTimeout(() => {
+			typingDebounceTimer = undefined;
+			tableContext.paginationRepo?.filterBy(id, newValue);
+		}, FILTER_INPUT_DEBOUNCE_MS);
+	}
+
+	// Clear any pending debounce when the row unmounts so we do not
+	// fire `filterBy` against a torn-down `paginationRepo`.
+	$effect(() => {
+		return () => {
+			if (typingDebounceTimer !== undefined) {
+				clearTimeout(typingDebounceTimer);
+				typingDebounceTimer = undefined;
+			}
+		};
+	});
+
+	function generateOnChangeObject(_label: string) {
 		return (newValue: SelectOption<unknown> | null) => {
 			tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
-			tableContext.dataRepo.__queryValues.set(label, newValue ?? null);
+			// Cache by the column id (which is what the `$effect` above
+			// reads back with `__queryValues.get(customFilter.id)`).
+			// Previously we cached by the human-readable `label`, so the
+			// effect's lookup returned `undefined` and immediately
+			// overwrote `value` with `null` - the QuerySelect would
+			// briefly flash the chosen option then snap back to the
+			// "Please Select an Item" placeholder.
+			tableContext.dataRepo.__queryValues.set(def.id, newValue ?? null);
 			value = newValue ?? null;
 		};
 	}
 
-	function generateOnChangePrimitive(label: string) {
+	function generateOnChangePrimitive(_label: string) {
 		// Phase 7.6: AsPrimitive QuerySelect now hands us the primitive
 		// directly. The previous code typed this as `SelectOption<unknown>`
 		// and read `.value` off it; with the discriminated typing the
 		// primitive flows straight through.
 		return (newValue: unknown) => {
 			tableContext.paginationRepo?.filterBy(def.id, newValue ?? null);
-			tableContext.dataRepo.__queryValues.set(label, newValue ?? null);
+			// See note in `generateOnChangeObject` - keyed by `def.id`
+			// to match the `$effect` lookup.
+			tableContext.dataRepo.__queryValues.set(def.id, newValue ?? null);
 			value = newValue ?? null;
 		};
 	}
@@ -406,6 +452,24 @@
 							/>
 						{/if}
 					{:else}
+						{@const selectedPrimitives = selectedOptions
+							.map((it) => it.value)
+							.filter(
+								(v): v is string | number => typeof v === 'string' || typeof v === 'number'
+							)}
+						<!--
+							MultiSelect with `valueAsObject={false}` matches
+							options against the primitive value, not the whole
+							SelectOption shape. Previously the remote-select
+							branch passed the SelectOption objects directly
+							(the `selectedOptions` $state), meaning the inner
+							`selectedKeys` derived saw
+							`[{label, value}, ...]` rows where it expected
+							`[id1, id2, ...]`, so no chips ever rendered even
+							though the filter was active server-side. Pull the
+							primitive `value` off each option to match the
+							local-select branch above.
+						-->
 						<MultiSelect
 							label={displayLabel}
 							labelProp="label"
@@ -418,7 +482,7 @@
 								// primitives directly.
 								tableContext.paginationRepo?.filterBy(def.id, e);
 							}}
-							selectedValues={selectedOptions}
+							selectedValues={selectedPrimitives}
 							collapseSelection
 						/>
 					{/if}
@@ -501,7 +565,7 @@
 						id={inputId}
 						bind:value={valueMin}
 						oninput={() => {
-							tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
+							debouncedFilterBy(def.id, [valueMin, valueMax]);
 						}}
 						onkeydown={(e: KeyboardEvent) => {
 							e.stopPropagation();
@@ -512,7 +576,7 @@
 						id={inputId}
 						bind:value={valueMax}
 						oninput={() => {
-							tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
+							debouncedFilterBy(def.id, [valueMin, valueMax]);
 						}}
 						onkeydown={(e: KeyboardEvent) => {
 							e.stopPropagation();
@@ -523,7 +587,7 @@
 						id={inputId}
 						bind:value
 						oninput={() => {
-							tableContext.paginationRepo?.filterBy(def.id, [value]);
+							debouncedFilterBy(def.id, [value]);
 						}}
 						onkeydown={(e: KeyboardEvent) => {
 							e.stopPropagation();
@@ -561,7 +625,7 @@
 						id={inputId}
 						bind:value
 						oninput={() => {
-							tableContext.paginationRepo?.filterBy(def.id, value);
+							debouncedFilterBy(def.id, value);
 						}}
 						onkeydown={(e: KeyboardEvent) => {
 							e.stopPropagation();

package/dist/Components/Table/Table.svelte

@@ -893,6 +893,4 @@ div.sidebar-wrapper .sidebar.toolbar-right {
   text-align: left;
   min-width: max-content;
   isolation: isolate;
-  position: relative;
-  z-index: 20;
 }</style>

package/dist/Components/VerticalTabGroup.svelte

@@ -16,6 +16,7 @@
 		noscroll,
 		noTabMessage,
 		nohistory = false,
+		dense = false,
 	}: VerticalTabGroupProps<CommonDenominator> = $props();
 
 	const isNonEmptyString = (raw: unknown): raw is string =>
@@ -48,6 +49,7 @@
 <div
 	class="wrapper"
 	class:noscroll
+	class:dense
 	{style}
 >
 	<div class="tabs">
@@ -62,6 +64,7 @@
 	<div
 		class="content"
 		class:noscroll
+		class:dense
 	>
 		{#if selected}
 			{@render selected.content(selected.args)}
@@ -88,6 +91,10 @@
 .wrapper.noscroll {
   overflow: visible;
 }
+.wrapper.dense {
+  flex: 0 0 auto;
+  overflow: visible;
+}
 .wrapper .tabs {
   border-radius: 0 4px 0 0;
   display: flex;
@@ -113,4 +120,8 @@
 }
 .wrapper .content.noscroll {
   overflow: visible;
+}
+.wrapper .content.dense {
+  flex-grow: 0;
+  overflow: visible;
 }</style>

package/dist/Components/VerticalTabGroupProps.d.ts

@@ -20,4 +20,16 @@ export interface VerticalTabGroupProps<CommonDenominator> {
     noTabMessage?: string;
     /** Suppress on-mount history restore even when `name` is set. */
     nohistory?: boolean;
+    /**
+     * Size the group to the height of the selected tab's content rather
+     * than filling whatever vertical space the parent offers. Use this
+     * inside dialogs / forms where the tab body is a short, content-
+     * driven panel and the default `flex-grow: 1` would leave a
+     * stretch of empty background below the rendered content.
+     *
+     * Concretely this disables the `flex: 1` on the wrapper and the
+     * `flex-grow: 1` on the inner `.content`, so the group collapses
+     * vertically onto whatever the active tab renders.
+     */
+    dense?: boolean;
 }

package/dist/Helpers/dropdownPortal.d.ts

@@ -32,14 +32,19 @@
  *   3. Listens for capture-phase `scroll` events and for viewport
  *      `resize` events so the position tracks the trigger while
  *      the dropdown is open. Repositioning is rAF-throttled.
- *   4. Applies a very large `z-index` to the dropdown so it wins
- *      against the table's sticky-footer (`z-index: 10`) and
- *      pinned-column (`z-index: 5-11`) stacking layers. Note that
- *      `z-index` only competes within a shared stacking context;
- *      the dropdown's `position: fixed` + `z-index` makes it its
- *      own stacking context, but ancestor stacking contexts can
- *      still constrain it. See `_mixins.scss` `table-cell-svelecte`
- *      for the per-cell rules that avoid creating such ancestors.
+ *   4. Applies a very large `z-index` to the dropdown AND
+ *      temporarily lifts the dropdown's nearest stacking-context
+ *      ancestor (the sticky / isolated table strip that contains
+ *      the trigger) so the dropdown's z-index can actually win
+ *      against other peer stacking contexts in the same parent.
+ *      Without the lift the dropdown's z-index was trapped inside
+ *      its ancestor's own context and could be hidden by an
+ *      adjacent sibling stacking context with even a small
+ *      z-index - which is exactly what happened with the table's
+ *      sticky footer covering open cell dropdowns (or, after the
+ *      initial fix, the table body covering open footer
+ *      dropdowns). The lift is ref-counted so two dropdowns that
+ *      share an ancestor coordinate cleanly.
  */
 export interface DropdownPortalOptions {
     /** The Svelecte root wrapper `<div class="svelecte">`. Used as the

package/dist/Helpers/dropdownPortal.js

@@ -32,14 +32,19 @@
  *   3. Listens for capture-phase `scroll` events and for viewport
  *      `resize` events so the position tracks the trigger while
  *      the dropdown is open. Repositioning is rAF-throttled.
- *   4. Applies a very large `z-index` to the dropdown so it wins
- *      against the table's sticky-footer (`z-index: 10`) and
- *      pinned-column (`z-index: 5-11`) stacking layers. Note that
- *      `z-index` only competes within a shared stacking context;
- *      the dropdown's `position: fixed` + `z-index` makes it its
- *      own stacking context, but ancestor stacking contexts can
- *      still constrain it. See `_mixins.scss` `table-cell-svelecte`
- *      for the per-cell rules that avoid creating such ancestors.
+ *   4. Applies a very large `z-index` to the dropdown AND
+ *      temporarily lifts the dropdown's nearest stacking-context
+ *      ancestor (the sticky / isolated table strip that contains
+ *      the trigger) so the dropdown's z-index can actually win
+ *      against other peer stacking contexts in the same parent.
+ *      Without the lift the dropdown's z-index was trapped inside
+ *      its ancestor's own context and could be hidden by an
+ *      adjacent sibling stacking context with even a small
+ *      z-index - which is exactly what happened with the table's
+ *      sticky footer covering open cell dropdowns (or, after the
+ *      initial fix, the table body covering open footer
+ *      dropdowns). The lift is ref-counted so two dropdowns that
+ *      share an ancestor coordinate cleanly.
  */
 /**
  * Z-index applied to the open dropdown. Picked very high so the
@@ -48,6 +53,108 @@
  * stays below modal overlays (`z 99999` in `Action`-based popovers).
  */
 const PORTAL_Z_INDEX = 99998;
+/**
+ * Z-index applied to the dropdown's nearest stacking-context ancestor
+ * while the dropdown is open. One below `PORTAL_Z_INDEX` so the
+ * dropdown still wins inside its own stacking context, but high
+ * enough that the whole ancestor block paints above its peer stacking
+ * contexts (e.g. the table footer's `position: sticky; z-index: 10`
+ * row, or the table body's `isolation: isolate; z-index: 20`
+ * container). Without this lift, the dropdown's `z-index: 99998` was
+ * trapped inside the ancestor's own stacking context and could not
+ * paint above a sibling stacking context with even a small z-index.
+ *
+ * The previous workaround pinned `.datatable-grid` at `z-index: 20`
+ * so its cell dropdowns sat above the footer; that fixed the cell
+ * case but reversed the failure for the footer's `Records-per-Page`
+ * select, whose dropdown opens upwards into the rows. Lifting the
+ * dropdown's actual ancestor at open time means both cases work
+ * without either side needing a hard-coded z-index bias.
+ */
+const STACKING_LIFT_Z_INDEX = 99997;
+/**
+ * Walk up the DOM from `el` and return the first ancestor that
+ * establishes a new CSS stacking context. The dropdown's z-index
+ * only competes inside this ancestor's context, so lifting this
+ * element is what determines whether the dropdown can paint above a
+ * sibling sticky / isolated block. Stops at `document.body` (which
+ * doesn't form a useful pivot for the lift).
+ */
+function findStackingContextAncestor(el) {
+    let current = el.parentElement;
+    while (current && current !== document.body) {
+        if (createsStackingContext(current)) {
+            return current;
+        }
+        current = current.parentElement;
+    }
+    return null;
+}
+/**
+ * True when the computed style of `el` causes the browser to
+ * establish a new stacking context. Covers the cases that actually
+ * appear in scoria today (sticky / isolated table strips, fixed
+ * popover ancestors). Not exhaustive against every CSS feature that
+ * triggers a stacking context, but tuned for our tree.
+ */
+function createsStackingContext(el) {
+    const cs = getComputedStyle(el);
+    if (cs.position === 'fixed' || cs.position === 'sticky') {
+        return true;
+    }
+    if ((cs.position === 'relative' || cs.position === 'absolute') &&
+        cs.zIndex !== 'auto') {
+        return true;
+    }
+    if (cs.isolation === 'isolate') {
+        return true;
+    }
+    if (cs.transform !== 'none') {
+        return true;
+    }
+    if (cs.filter !== 'none') {
+        return true;
+    }
+    if (cs.perspective !== 'none') {
+        return true;
+    }
+    if (cs.mixBlendMode !== 'normal') {
+        return true;
+    }
+    if (Number.parseFloat(cs.opacity) < 1) {
+        return true;
+    }
+    if (cs.willChange && cs.willChange !== 'auto') {
+        return true;
+    }
+    return false;
+}
+const raiseCounts = new WeakMap();
+function liftStackingContext(el) {
+    let info = raiseCounts.get(el);
+    if (!info) {
+        info = { count: 0, originalInlineZIndex: el.style.zIndex };
+        raiseCounts.set(el, info);
+        el.style.zIndex = String(STACKING_LIFT_Z_INDEX);
+    }
+    info.count++;
+    let released = false;
+    return () => {
+        if (released) {
+            return;
+        }
+        released = true;
+        const current = raiseCounts.get(el);
+        if (!current) {
+            return;
+        }
+        current.count--;
+        if (current.count <= 0) {
+            el.style.zIndex = current.originalInlineZIndex;
+            raiseCounts.delete(el);
+        }
+    };
+}
 /**
  * Minimum free vertical space below the trigger before the dropdown
  * is flipped to open upwards. Picked to fit the default Svelecte
@@ -109,6 +216,7 @@ export function attachDropdownPortal(options) {
         };
     }
     let isOpen = false;
+    let releaseStackingLift = null;
     const reposition = () => {
         if (!isOpen) {
             return;
@@ -175,6 +283,18 @@ export function attachDropdownPortal(options) {
             return;
         }
         isOpen = true;
+        // Lift the dropdown's nearest stacking-context ancestor so the
+        // whole block paints above any sibling stacking contexts that
+        // would otherwise hide it. Without this, the dropdown's high
+        // z-index is trapped inside the ancestor's own stacking context.
+        // Resolved from `trigger` rather than `dropdown` because the
+        // dropdown's `position: fixed` makes it its own stacking
+        // context; we want to lift the surrounding sticky / isolated
+        // table strip, not the dropdown itself.
+        const stackingAncestor = findStackingContextAncestor(trigger);
+        if (stackingAncestor) {
+            releaseStackingLift = liftStackingContext(stackingAncestor);
+        }
         dropdown.style.display = '';
         dropdown.setAttribute('data-scoria-portal-dropdown', '');
         reposition();
@@ -189,6 +309,10 @@ export function attachDropdownPortal(options) {
         throttled.cancel();
         window.removeEventListener('scroll', handleScroll, { capture: true });
         window.removeEventListener('resize', handleResize);
+        if (releaseStackingLift) {
+            releaseStackingLift();
+            releaseStackingLift = null;
+        }
         dropdown.style.position = '';
         dropdown.style.top = '';
         dropdown.style.left = '';

package/package.json

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