@lavalogic/scoria 0.37.37 → 0.37.38

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

@@ -323,7 +323,6 @@
   text-align: center;
   --sv-border: none;
   min-width: 0;
-  overflow: hidden;
 }
 .select-cell :global(.select-wrapper) {
   --sv-min-height: 0px;

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

@@ -295,7 +295,6 @@
   text-align: center;
   --sv-border: none;
   min-width: 0;
-  overflow: hidden;
 }
 .select-cell :global(.select-wrapper) {
   --sv-min-height: 0px;

package/dist/Helpers/dropdownPortal.d.ts

@@ -8,37 +8,42 @@
  * `transform` / `filter` / `will-change: transform` on the way up to
  * the body.
  *
- * This helper sidesteps all of that:
+ * This helper does NOT move the dropdown in the DOM. Moving the
+ * `.sv_dropdown` element to `document.body` (the original strategy)
+ * broke Svelte 5's per-component event delegation: inline
+ * `onmousedown` / `onclick` handlers declared in Svelecte's template
+ * are dispatched by the app's root-level delegated listener, which
+ * walks the live `parentNode` chain at dispatch time. Once the
+ * dropdown was a sibling of the app root rather than a descendant,
+ * the chain no longer reached the selection handler, so mouse clicks
+ * silently did nothing (keyboard Enter still worked because that
+ * path is wired on the input, not the dropdown).
  *
- *   1. On first open, it reparents the dropdown to `document.body` (or
- *      to the nearest open `<dialog>` ancestor) ONCE and leaves it
- *      there for the lifetime of the SingleSelect. Moving the element
- *      on every open / close raced with the user's mouse click and
- *      broke Svelte 5's per-component event delegation, so options
- *      could only be selected with the keyboard.
- *   2. It switches the dropdown to `position: fixed` and sets
- *      `top` / `left` / `width` / `bottom` from the trigger's
- *      `getBoundingClientRect()`.
- *   3. It picks `top` vs `bottom` based on available space below vs
- *      above the trigger, so the dropdown auto-flips upwards when the
- *      trigger sits near the bottom of the viewport.
- *   4. It 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 to keep the
- *      cost off the scroll-event hot path.
- *   5. On close, the inline positioning styles are cleared and the
- *      dropdown is hidden with `display: none` (Svelecte will restore
- *      its own display rule on the next open via the class flip). The
- *      dropdown is NOT moved back to its original parent.
+ * Instead, the helper:
  *
- * The helper deliberately does NOT add the `is-open` class or fight
- * Svelecte's own state machine. Svelecte still owns open / closed
- * lifecycle; the portal just intercepts the moment the class flips
- * `is-open` on / off via a `MutationObserver`.
+ *   1. Switches the dropdown to `position: fixed` and sets
+ *      `top` / `left` / `width` / `bottom` from the trigger's
+ *      `getBoundingClientRect()`, so it escapes ancestor
+ *      `overflow: hidden` / `overflow: auto` clipping (which was
+ *      the original motivation for portaling).
+ *   2. Picks `top` vs `bottom` based on available space below vs
+ *      above the trigger, so the dropdown auto-flips upwards when
+ *      the trigger sits near the bottom of the viewport.
+ *   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.
  */
 export interface DropdownPortalOptions {
     /** The Svelecte root wrapper `<div class="svelecte">`. Used as the
-     *  anchor for positioning the teleported dropdown. */
+     *  anchor for positioning the dropdown. */
     getTrigger: () => HTMLElement | null | undefined;
     /** The `<div class="sv_dropdown">` Svelecte renders. The helper
      *  watches this element's `class` attribute for `is-open` /

package/dist/Helpers/dropdownPortal.js

@@ -8,41 +8,46 @@
  * `transform` / `filter` / `will-change: transform` on the way up to
  * the body.
  *
- * This helper sidesteps all of that:
+ * This helper does NOT move the dropdown in the DOM. Moving the
+ * `.sv_dropdown` element to `document.body` (the original strategy)
+ * broke Svelte 5's per-component event delegation: inline
+ * `onmousedown` / `onclick` handlers declared in Svelecte's template
+ * are dispatched by the app's root-level delegated listener, which
+ * walks the live `parentNode` chain at dispatch time. Once the
+ * dropdown was a sibling of the app root rather than a descendant,
+ * the chain no longer reached the selection handler, so mouse clicks
+ * silently did nothing (keyboard Enter still worked because that
+ * path is wired on the input, not the dropdown).
  *
- *   1. On first open, it reparents the dropdown to `document.body` (or
- *      to the nearest open `<dialog>` ancestor) ONCE and leaves it
- *      there for the lifetime of the SingleSelect. Moving the element
- *      on every open / close raced with the user's mouse click and
- *      broke Svelte 5's per-component event delegation, so options
- *      could only be selected with the keyboard.
- *   2. It switches the dropdown to `position: fixed` and sets
- *      `top` / `left` / `width` / `bottom` from the trigger's
- *      `getBoundingClientRect()`.
- *   3. It picks `top` vs `bottom` based on available space below vs
- *      above the trigger, so the dropdown auto-flips upwards when the
- *      trigger sits near the bottom of the viewport.
- *   4. It 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 to keep the
- *      cost off the scroll-event hot path.
- *   5. On close, the inline positioning styles are cleared and the
- *      dropdown is hidden with `display: none` (Svelecte will restore
- *      its own display rule on the next open via the class flip). The
- *      dropdown is NOT moved back to its original parent.
+ * Instead, the helper:
  *
- * The helper deliberately does NOT add the `is-open` class or fight
- * Svelecte's own state machine. Svelecte still owns open / closed
- * lifecycle; the portal just intercepts the moment the class flips
- * `is-open` on / off via a `MutationObserver`.
+ *   1. Switches the dropdown to `position: fixed` and sets
+ *      `top` / `left` / `width` / `bottom` from the trigger's
+ *      `getBoundingClientRect()`, so it escapes ancestor
+ *      `overflow: hidden` / `overflow: auto` clipping (which was
+ *      the original motivation for portaling).
+ *   2. Picks `top` vs `bottom` based on available space below vs
+ *      above the trigger, so the dropdown auto-flips upwards when
+ *      the trigger sits near the bottom of the viewport.
+ *   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.
  */
 /**
- * Z-index applied to the teleported dropdown. Chosen so the dropdown
- * sits above all sticky table strips (`z 5-11` in the table grid) and
- * the side-panel chrome, but stays below modal overlays (`z 99999`
- * in `Action`-based popovers).
+ * Z-index applied to the open dropdown. Picked very high so the
+ * dropdown sits above sticky table strips (`z 5-11` in the table
+ * grid), the table footer (`z 10`), and the side-panel chrome, but
+ * stays below modal overlays (`z 99999` in `Action`-based popovers).
  */
-const PORTAL_Z_INDEX = 10000;
+const PORTAL_Z_INDEX = 99998;
 /**
  * Minimum free vertical space below the trigger before the dropdown
  * is flipped to open upwards. Picked to fit the default Svelecte
@@ -94,16 +99,12 @@ export function attachDropdownPortal(options) {
             /* nothing wired up */
         };
     }
-    let isPortalled = false;
+    let isOpen = false;
     const reposition = () => {
-        if (!isPortalled) {
+        if (!isOpen) {
             return;
         }
         const tr = trigger.getBoundingClientRect();
-        // `offsetHeight` only reflects the actual rendered height once
-        // Svelecte has laid out the option list, so the first frame
-        // after open may read 0; fall back to the flip threshold so
-        // we still pick a sensible orientation in that case.
         const dropdownHeight = dropdown.offsetHeight || FLIP_THRESHOLD_PX;
         const viewportHeight = window.innerHeight;
         const spaceBelow = viewportHeight - tr.bottom;
@@ -112,18 +113,9 @@ export function attachDropdownPortal(options) {
         dropdown.style.position = 'fixed';
         dropdown.style.left = `${tr.left}px`;
         dropdown.style.width = `${tr.width}px`;
-        // Override Svelecte's own `min-width: 100%` on `.sv_dropdown`.
-        // With `position: fixed` the percentage resolves against the
-        // initial containing block (the viewport), which would otherwise
-        // stretch the dropdown across the whole page. Pin the
-        // minimum to the trigger width so the dropdown stays the same
-        // width as the select that opened it.
         dropdown.style.minWidth = `${tr.width}px`;
         dropdown.style.maxWidth = `${tr.width}px`;
         dropdown.style.zIndex = String(PORTAL_Z_INDEX);
-        // Bound the dropdown's max height to the available space so
-        // long option lists scroll internally rather than disappear
-        // past the viewport edge.
         if (openUp) {
             dropdown.style.top = '';
             dropdown.style.bottom = `${viewportHeight - tr.top}px`;
@@ -142,75 +134,25 @@ export function attachDropdownPortal(options) {
     const handleResize = () => {
         throttled.schedule();
     };
-    // Track whether the dropdown has been moved to the portal target
-    // at least once. We move it AT FIRST OPEN and leave it there for
-    // the lifetime of the SingleSelect, regardless of open / close.
-    // This avoids two bugs the older "move on every open, move back on
-    // every close" implementation suffered from:
-    //   1. Svelte 5's per-component event delegation walks the live
-    //      DOM parentNode chain at dispatch time; moving the dropdown
-    //      mid-click left the chain pointing at the old parent and
-    //      Svelecte's `on_click` selection handler never ran, so
-    //      mouse clicks did not select an option (keyboard Enter did,
-    //      because keydown is wired on the input, not the dropdown).
-    //   2. The MutationObserver that toggled the move based on the
-    //      `is-open` class fired between `mousedown` and `click`. The
-    //      observer's microtask moved the dropdown back to its
-    //      original parent before the `click` event reached an
-    //      option, so the click resolved against `body` instead of
-    //      the dropdown item.
-    // Keeping the element in the portal target the whole time also
-    // puts the dropdown in the body's stacking context unconditionally,
-    // which means a `z-index: 10000` actually wins against the table's
-    // own sticky-footer / pinned-column stacking contexts.
-    let didMoveToPortalTarget = false;
-    const moveToPortalTargetOnce = () => {
-        if (didMoveToPortalTarget) {
-            return;
-        }
-        // Append to the nearest open `<dialog>` ancestor if one exists
-        // (so the dropdown ends up in the dialog's top-layer stacking
-        // context and is not painted behind the dialog's backdrop /
-        // content), otherwise to `document.body`.
-        const dialogHost = trigger.closest('dialog');
-        const portalTarget = dialogHost && dialogHost.open ? dialogHost : document.body;
-        portalTarget.appendChild(dropdown);
-        didMoveToPortalTarget = true;
-    };
-    const portalOut = () => {
-        if (isPortalled) {
+    const onOpen = () => {
+        if (isOpen) {
             return;
         }
-        moveToPortalTargetOnce();
-        // Clear the defensive `display: none` that `portalIn` may have
-        // applied; the dropdown is opening again now.
+        isOpen = true;
         dropdown.style.display = '';
-        // Marker so consumers (e.g. the TableSidebar "click-outside"
-        // handler) can recognise clicks landing inside the dropdown as
-        // part of the trigger, not as outside-clicks.
         dropdown.setAttribute('data-scoria-portal-dropdown', '');
-        isPortalled = true;
-        // First-frame measurement: lay out, then reposition again on
-        // the next frame so we measure the dropdown's real
-        // `offsetHeight` once it has options rendered.
         reposition();
         requestAnimationFrame(reposition);
-        // `capture: true` so scroll events on any ancestor (the
-        // filter-panel side pane, the page itself, the .datatable
-        // scroll container) reach this listener; without capture the
-        // listener would only fire when the document element scrolls.
         window.addEventListener('scroll', handleScroll, { capture: true, passive: true });
         window.addEventListener('resize', handleResize, { passive: true });
     };
-    const portalIn = () => {
-        if (!isPortalled) {
+    const onClose = () => {
+        if (!isOpen) {
             return;
         }
         throttled.cancel();
         window.removeEventListener('scroll', handleScroll, { capture: true });
         window.removeEventListener('resize', handleResize);
-        // Strip the inline overrides so Svelecte's next open starts
-        // from a clean slate.
         dropdown.style.position = '';
         dropdown.style.top = '';
         dropdown.style.left = '';
@@ -221,56 +163,30 @@ export function attachDropdownPortal(options) {
         dropdown.style.maxHeight = '';
         dropdown.style.zIndex = '';
         dropdown.removeAttribute('data-scoria-portal-dropdown');
-        // Defensive: if Svelecte left the dropdown without its own
-        // `display: none` (transition-cancel race paths where the
-        // open/close class flip and the inline style update arrive
-        // out of order), the dropdown would otherwise stay
-        // `position: static; display: block` in the portal target
-        // and contribute its option-list height to the page scroll
-        // size, surfacing as a stray page-level scrollbar after
-        // toggling a select.
         if (!dropdown.classList.contains('is-open')) {
             dropdown.style.display = 'none';
         }
-        // Note: we do NOT move the dropdown back to its original
-        // parent. Moving mid-click races with the click event (see
-        // the `moveToPortalTargetOnce` comment above). The dropdown
-        // stays in the portal target for the rest of its lifetime
-        // and is removed on component unmount.
-        isPortalled = false;
+        isOpen = false;
     };
-    // Apply / unapply the portal whenever Svelecte toggles the
-    // `is-open` class on the dropdown. We watch class only because
-    // Svelecte's open state is exposed purely as a class flip.
     const observer = new MutationObserver((mutations) => {
         for (const mutation of mutations) {
             if (mutation.attributeName !== 'class') {
                 continue;
             }
             if (dropdown.classList.contains('is-open')) {
-                portalOut();
+                onOpen();
             }
             else {
-                portalIn();
+                onClose();
             }
         }
     });
     observer.observe(dropdown, { attributes: true, attributeFilter: ['class'] });
-    // Honour the dropdown's initial state in case it mounted already
-    // open (e.g. `focusOnLoad`).
     if (dropdown.classList.contains('is-open')) {
-        portalOut();
+        onOpen();
     }
     return () => {
         observer.disconnect();
-        portalIn();
-        // Final cleanup: the dropdown was moved to the portal target
-        // at first open and stayed there for the component's
-        // lifetime. When the SingleSelect unmounts, take the dropdown
-        // out of the portal target so it is not orphaned in the
-        // document.
-        if (didMoveToPortalTarget && dropdown.parentNode) {
-            dropdown.parentNode.removeChild(dropdown);
-        }
+        onClose();
     };
 }

package/dist/scss/_mixins.scss

@@ -1757,10 +1757,16 @@
 		// row that already has a value" symptom). `min-width: 0` makes
 		// the cell honour the column's declared minimum instead.
 		min-width: 0;
-		// Pair with `overflow: hidden` so the input inside cannot
-		// visually overflow the cell once it is forced narrower than
-		// its content - the label clips with ellipsis instead.
-		overflow: hidden;
+		// `overflow: hidden` is intentionally NOT applied here:
+		// it would clip the open dropdown (the dropdown lives inside
+		// the cell as a Svelecte-owned sibling of the control, and
+		// `position: fixed` should escape it, but a containing-block
+		// ancestor with `transform` / `filter` would still let
+		// `overflow: hidden` clip it). The leaf `.focusable` /
+		// `.select-cell` rules already include `overflow-x: clip`
+		// from `table-cell-basic` for the cell's text content; that
+		// is enough to ellipsise the in-input label when the cell is
+		// forced narrower than its rendered text.
 
 		:global(.select-wrapper) {
 			--sv-min-height: 0px;

package/package.json

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