@lavalogic/scoria 0.37.32 → 0.37.35

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

@@ -322,10 +322,13 @@
   box-sizing: border-box;
   text-align: center;
   --sv-border: none;
+  min-width: 0;
+  overflow: hidden;
 }
 .select-cell :global(.select-wrapper) {
   --sv-min-height: 0px;
   --sv-general-padding: 0px;
   --sv-item-wrap-padding: 0px 0.75rem;
   --input-height: var(--height);
+  min-width: 0;
 }</style>

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

@@ -294,10 +294,13 @@
   box-sizing: border-box;
   text-align: center;
   --sv-border: none;
+  min-width: 0;
+  overflow: hidden;
 }
 .select-cell :global(.select-wrapper) {
   --sv-min-height: 0px;
   --sv-general-padding: 0px;
   --sv-item-wrap-padding: 0px 0.75rem;
   --input-height: var(--height);
+  min-width: 0;
 }</style>

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) {
@@ -140,68 +138,55 @@ export function attachDropdownPortal(options) {
     const handleResize = () => {
         throttled.schedule();
     };
-    /**
-     * Direct mousedown listener attached to the portaled dropdown that
-     * calls `preventDefault()` to keep focus on the Svelecte input while
-     * the user clicks an option.
-     *
-     * Svelecte already attaches `onmousedown={preventDefault}` to the
-     * `.sv_dropdown` element in template, but Svelte 5 wires inline
-     * event handlers through its delegated-event chain rooted at the
-     * original mount point. Once we `appendChild` the dropdown to
-     * `document.body` (or to a `<dialog>` ancestor) the delegated chain
-     * no longer finds this element, the inline handler never fires,
-     * the browser's default mousedown shifts focus to the option (or to
-     * `body`), Svelecte's `on_blur` runs `updateDropdownState(false)`
-     * which closes the dropdown, this helper's MutationObserver moves
-     * the dropdown back into place, and the `mouseup` / `click` events
-     * never reach an option element. The visible symptom: keyboard
-     * selection (Enter) works, mouse click does not.
-     *
-     * Adding a *direct* `addEventListener` on the dropdown bypasses
-     * Svelte's delegation entirely. The listener is reset every
-     * `portalOut` / `portalIn` cycle.
-     */
-    const preventFocusShiftOnMousedown = (e) => {
-        // Same intent as Svelecte's own `on_mouse_down`. Keep focus on
-        // the input so `on_blur` does not collapse the dropdown before
-        // the click event reaches its selection handler.
-        e.preventDefault();
+    // Track whether the dropdown has been moved to the portal target
+    // at least once. We move it AT MOUNT 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 (the
+    // `position: fixed`-only variant suffered from that footer being
+    // painted ABOVE the open option list).
+    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) {
             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.
+        moveToPortalTargetOnce();
+        // Clear the defensive `display: none` that `portalIn` may have
+        // applied; the dropdown is opening again now.
         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 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', '');
-        // Restore the focus-preserving mousedown handler that Svelte's
-        // delegated event chain no longer reaches after the move.
-        dropdown.addEventListener('mousedown', preventFocusShiftOnMousedown);
         isPortalled = true;
         // First-frame measurement: lay out, then reposition again on
         // the next frame so we measure the dropdown's real
@@ -220,12 +205,10 @@ export function attachDropdownPortal(options) {
             return;
         }
         throttled.cancel();
-        dropdown.removeEventListener('mousedown', preventFocusShiftOnMousedown);
         window.removeEventListener('scroll', handleScroll, { capture: true });
         window.removeEventListener('resize', handleResize);
         // Strip the inline overrides so Svelecte's next open starts
-        // from a clean slate (and so a closed dropdown still occupies
-        // its Svelecte-managed `display: none` slot).
+        // from a clean slate.
         dropdown.style.position = '';
         dropdown.style.top = '';
         dropdown.style.left = '';
@@ -237,27 +220,20 @@ export function attachDropdownPortal(options) {
         dropdown.style.zIndex = '';
         dropdown.removeAttribute('data-scoria-portal-dropdown');
         // Defensive: if Svelecte left the dropdown without its own
-        // `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: 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 `document.body` and contribute
+        // its option-list height to the body scroll size, surfacing
+        // as a stray page-level scrollbar after toggling a select.
         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;
+        // 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;
     };
     // Apply / unapply the portal whenever Svelecte toggles the
@@ -285,5 +261,46 @@ export function attachDropdownPortal(options) {
     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
+        // (see `moveToPortalTargetOnce`). 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);
+        }
     };
 }
+tion;
+of;
+mutations;
+{
+    if (mutation.attributeName !== 'class') {
+        continue;
+    }
+    if (dropdown.classList.contains('is-open')) {
+        portalOut();
+    }
+    else {
+        portalIn();
+    }
+}
+;
+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();
+}
+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
+    // (see `moveToPortalTargetOnce`). 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);
+    }
+};

package/dist/scss/_mixins.scss

@@ -1745,12 +1745,33 @@
 		box-sizing: border-box;
 		text-align: center;
 		--sv-border: none;
+		// Suppress the cell's content-driven `min-width: auto`. Without
+		// this, an open select-cell whose Svelecte input is rendering a
+		// long selected-value label (e.g. `TEST-SA1-01 (line ID
+		// 525504)` plus the clear-x icon) reports its `min-content` as
+		// the full label width. With the column grid track sized
+		// `minmax(W, 1fr)`, the track minimum becomes `max(W,
+		// min-content)` and grows past the declared `W`, which forces
+		// every other `1fr` column to shrink in turn (the visible
+		// "all columns resize when the SKU dropdown is opened on a
+		// 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;
 
 		:global(.select-wrapper) {
 			--sv-min-height: 0px;
 			--sv-general-padding: 0px;
 			--sv-item-wrap-padding: 0px 0.75rem;
 			--input-height: var(--height);
+			// `min-width: 0` here too: `.select-wrapper` is a flex
+			// container by default in the regular SingleSelect, but
+			// inside the table cell it should likewise relinquish
+			// its content-driven minimum so the cell shrink works.
+			min-width: 0;
 		}
 	}
 }

package/package.json

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