@lavalogic/scoria 0.37.43 → 0.37.44

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

@@ -294,22 +294,31 @@
 		};
 	});
 
-	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 ?? 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;
 		};
 	}

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/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.43",
+  "version": "0.37.44",
   "publishConfig": {
     "access": "restricted"
   },