@lavalogic/scoria 0.37.33 → 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

@@ -138,35 +138,54 @@ 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 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;
         }
-        // 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.
+        moveToPortalTargetOnce();
+        // Clear the defensive `display: none` that `portalIn` may have
+        // applied; the dropdown is opening again now.
         dropdown.style.display = '';
-        // 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".
+        // 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
@@ -189,8 +208,7 @@ export function attachDropdownPortal(options) {
         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 = '';
@@ -202,17 +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` 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.
+        // `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';
         }
+        // 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
@@ -240,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.33",
+  "version": "0.37.35",
   "publishConfig": {
     "access": "restricted"
   },