@txstate-mws/svelte-components 1.6.14 → 1.6.16

package/dist/actions/glue.js

@@ -1,5 +1,50 @@
 import { watchForMutations } from '../util/index.js';
 import { equal } from 'txstate-utils';
+/**
+ * All active glue instances share one scroll listener and one requestAnimationFrame
+ * per frame. Each frame runs every registered measure() (the layout reads) and only
+ * then runs the write thunks they return, so for a page with thousands of glued
+ * elements the browser reads layout once per frame and never interleaves reads with
+ * writes. Multiple scroll events that arrive before a frame paints coalesce into a
+ * single measure pass.
+ */
+const glueInstances = new Set();
+let frameRequested = false;
+let scrollBound = false;
+function runGlueFrame() {
+    frameRequested = false;
+    const writes = [];
+    for (const measure of glueInstances) {
+        const write = measure();
+        if (write)
+            writes.push(write);
+    }
+    for (const write of writes)
+        write();
+}
+function scheduleGlueFrame() {
+    if (frameRequested)
+        return;
+    frameRequested = true;
+    requestAnimationFrame(runGlueFrame);
+}
+function onGlueScroll() {
+    scheduleGlueFrame();
+}
+function registerGlue(measure) {
+    glueInstances.add(measure);
+    if (!scrollBound) {
+        document.addEventListener('scroll', onGlueScroll, { capture: true, passive: true });
+        scrollBound = true;
+    }
+}
+function unregisterGlue(measure) {
+    glueInstances.delete(measure);
+    if (glueInstances.size === 0 && scrollBound) {
+        document.removeEventListener('scroll', onGlueScroll, { capture: true });
+        scrollBound = false;
+    }
+}
 /**
  * Make this element `position: fixed` and move it around to align with the target element.
  */
@@ -21,20 +66,33 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
         }
     }
     let lastrect;
-    let timer;
-    function reposition() {
-        const fixedParent = fixedContainingBlock(el);
+    // The containing block (nearest ancestor that establishes a containing block for
+    // position: fixed) is determined by the ancestors' computed styles. Scrolling can
+    // never change it, but it CAN change when an ancestor gains/loses a transform,
+    // filter, will-change, contain, etc. Walking the ancestor chain and calling
+    // getComputedStyle on each node is expensive, so cache it across the high-frequency
+    // scroll events and recompute only when something might have changed: a DOM/style
+    // mutation, a resize, or a target change (see invalidateAndSchedule / update).
+    let fixedParent;
+    let fixedParentComputed = false;
+    // Read-only pass: gather geometry and build the write thunk. Runs inside the shared
+    // frame's measure phase, so it must not write to the DOM.
+    function measure() {
+        if (!fixedParentComputed) {
+            fixedParent = fixedContainingBlock(el);
+            fixedParentComputed = true;
+        }
         let fixedRect = { left: 0, top: 0, right: 0, bottom: 0 };
         if (fixedParent) {
             const tmpRect = fixedParent.getBoundingClientRect();
             fixedRect = { left: tmpRect.left, right: document.documentElement.clientWidth - tmpRect.right, top: tmpRect.top, bottom: document.documentElement.clientHeight - tmpRect.bottom };
         }
         if (!target)
-            return;
+            return undefined;
         const tmpRect = target.getBoundingClientRect();
         const rect = { left: tmpRect.left - fixedRect.left, right: document.documentElement.clientWidth - tmpRect.right - fixedRect.right, top: tmpRect.top - fixedRect.top, bottom: document.documentElement.clientHeight - tmpRect.bottom - fixedRect.bottom, width: tmpRect.width, height: tmpRect.height };
         if (equal(rect, lastrect))
-            return;
+            return undefined;
         lastrect = rect;
         let autoalign = align;
         const leftright = rect.right > rect.left ? 'left' : 'right';
@@ -84,81 +142,75 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
         const elOffsetHeight = el.offsetHeight;
         const parentClientHeight = parent?.clientHeight ?? 0;
         const parentOverflowY = parent?.style.overflowY;
+        let position;
         if (autoalign === 'bottomleft') {
-            cancelAnimationFrame(timer);
-            timer = requestAnimationFrame(() => {
+            position = () => {
                 el.style.top = `${rect.top + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.left = `${rect.left}px`;
                 el.style.removeProperty('bottom');
                 el.style.removeProperty('right');
                 adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
-            });
+            };
             valign = 'bottom';
             halign = 'left';
         }
         else if (autoalign === 'bottomright') {
-            cancelAnimationFrame(timer);
-            timer = requestAnimationFrame(() => {
+            position = () => {
                 el.style.top = `${rect.top + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.removeProperty('left');
                 el.style.removeProperty('bottom');
                 el.style.right = `${rect.right}px`;
                 adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
-            });
+            };
             valign = 'bottom';
             halign = 'right';
         }
         else if (autoalign === 'topleft') {
-            cancelAnimationFrame(timer);
-            timer = requestAnimationFrame(() => {
+            position = () => {
                 el.style.removeProperty('top');
                 el.style.left = `${rect.left}px`;
                 el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.removeProperty('right');
                 adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
-            });
+            };
             valign = 'top';
             halign = 'left';
         }
         else if (autoalign === 'topright') {
-            cancelAnimationFrame(timer);
-            timer = requestAnimationFrame(() => {
+            position = () => {
                 el.style.removeProperty('top');
                 el.style.removeProperty('left');
                 el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.right = `${rect.right}px`;
                 adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
-            });
+            };
             valign = 'top';
             halign = 'right';
         }
         else if (autoalign === 'top') {
-            cancelAnimationFrame(timer);
-            timer = requestAnimationFrame(() => {
+            position = () => {
                 el.style.removeProperty('top');
                 el.style.left = `${rect.left + rect.width / 2 - elWidth / 2}px`;
                 el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.removeProperty('right');
                 adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
-            });
+            };
             valign = 'top';
             halign = 'center';
         }
         else if (autoalign === 'bottom') {
-            cancelAnimationFrame(timer);
-            timer = requestAnimationFrame(() => {
+            position = () => {
                 el.style.top = `${rect.top + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.left = `${rect.left + rect.width / 2 - elWidth / 2}px`;
                 el.style.removeProperty('bottom');
                 el.style.removeProperty('right');
                 adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
-            });
+            };
             valign = 'bottom';
             halign = 'center';
         }
         else if (autoalign === 'left') {
-            cancelAnimationFrame(timer);
-            timer = requestAnimationFrame(() => {
+            position = () => {
                 el.style.top = `${rect.top + rect.height / 2 - elHeight / 2}px`;
                 el.style.removeProperty('bottom');
                 if (cover) {
@@ -170,13 +222,12 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
                     el.style.right = `${rect.right + rect.width + gap}px`;
                 }
                 adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
-            });
+            };
             valign = 'center';
             halign = 'left';
         }
         else if (autoalign === 'right') {
-            cancelAnimationFrame(timer);
-            timer = requestAnimationFrame(() => {
+            position = () => {
                 el.style.top = `${rect.top + rect.height / 2 - elHeight / 2}px`;
                 el.style.removeProperty('bottom');
                 if (cover) {
@@ -188,26 +239,35 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
                     el.style.removeProperty('right');
                 }
                 adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
-            });
+            };
             valign = 'center';
             halign = 'right';
         }
         else if (autoalign === 'middle') {
-            cancelAnimationFrame(timer);
-            timer = requestAnimationFrame(() => {
+            position = () => {
                 el.style.top = `${rect.top + rect.height / 2 - elHeight / 2}px`;
                 el.style.left = `${rect.left + rect.width / 2 - elWidth / 2}px`;
                 el.style.removeProperty('bottom');
                 el.style.removeProperty('right');
                 adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
-            });
+            };
             valign = 'center';
             halign = 'center';
         }
-        store?.update(v => ({ ...v, valign, halign }));
+        const fvalign = valign;
+        const fhalign = halign;
+        return () => {
+            position?.();
+            store?.update(v => ({ ...v, valign: fvalign, halign: fhalign }));
+        };
+    }
+    function invalidateAndSchedule() {
+        // A mutation or resize may have changed which ancestor is the containing block.
+        fixedParentComputed = false;
+        scheduleGlueFrame();
     }
-    const { destroy: watchDestroy } = watchForMutations(reposition);
-    document.addEventListener('scroll', reposition, { capture: true });
+    const { destroy: watchDestroy } = watchForMutations(invalidateAndSchedule);
+    registerGlue(measure);
     return {
         update({ target: utarget, align: ualign = 'auto', cover: ucover = false, gap: ugap = 0, store: ustore }) {
             align = ualign;
@@ -223,13 +283,14 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
                     el.style.removeProperty('position');
                 else {
                     el.style.position = 'fixed';
-                    reposition();
+                    fixedParentComputed = false;
                 }
+                scheduleGlueFrame();
             }
         },
         destroy() {
+            unregisterGlue(measure);
             watchDestroy();
-            document.removeEventListener('scroll', reposition);
             if (adjustparentheight && parent) {
                 if (formerMinHeight)
                     parent.style.minHeight = formerMinHeight;

package/dist/components/FocusLock.svelte

@@ -13,7 +13,7 @@ When they do, the escape event will be fired, allowing you to remove the dialog.
 When it goes away, they'll be trapped inside the previous `FocusLock`, and so on.
 -->
 <script context="module" lang="ts">
-  export const FocusLockStack: { focusId: string, pause: () => void, unpause: () => void, update: () => void }[] = []
+  export const FocusLockStack: { focusId: string, pause: () => void, unpause: () => void, update: () => void, inheritReturnFocus: (el: HTMLElement) => void }[] = []
   const waitAtick = typeof requestAnimationFrame !== 'undefined' ? (resolve: (value: unknown) => void) => requestAnimationFrame(resolve) : (resolve: (value: unknown) => void) => resolve(0)
 </script>
 
@@ -49,7 +49,13 @@ When it goes away, they'll be trapped inside the previous `FocusLock`, and so on
       focusId,
       pause: () => { state = 'paused' },
       unpause: () => { if (state === 'paused') state = 'active' },
-      update: () => { dispatch('focuslockupdate') }
+      update: () => { dispatch('focuslockupdate') },
+      inheritReturnFocus: el => {
+        // only accept a hand-me-down if our own recorded target is useless - we
+        // captured document.activeElement after the previous lock's content was
+        // already removed, so it's usually document.body or a disconnected element
+        if (!returnfocusto || returnfocusto === document.body || !returnfocusto.isConnected) returnfocusto = el
+      }
     })
     for (const entry of FocusLockStack) entry.update()
     if (typeof returnfocusto === 'undefined') {
@@ -76,8 +82,17 @@ When it goes away, they'll be trapped inside the previous `FocusLock`, and so on
     // will think it was an "outside" click and kill itself
     await new Promise(waitAtick)
 
-    if (returnfocusto && wasactive) {
-      returnfocusto.focus()
+    const top = FocusLockStack.slice(-1)[0]
+    if (top?.focusId === focusId) {
+      // never restore focus to document.body - it accomplishes nothing except
+      // blurring whatever the user has focused since we began closing
+      if (returnfocusto && wasactive && returnfocusto !== document.body) returnfocusto.focus()
+    } else if (top && returnfocusto?.isConnected && returnfocusto !== document.body) {
+      // another focus lock mounted while we were waiting (e.g. one modal replaced
+      // by another in the same update) and has taken focus - restoring ours would
+      // steal it back out of the new dialog. instead, hand our return target down
+      // the chain so the final modal can return focus to the original trigger
+      top.inheritReturnFocus(returnfocusto)
     }
     const idx = FocusLockStack.findIndex(f => f.focusId === focusId)
     if (idx > -1) FocusLockStack.splice(idx, 1)
@@ -98,7 +113,7 @@ When it goes away, they'll be trapped inside the previous `FocusLock`, and so on
     }
   }
   const keydown = (e: KeyboardEvent) => {
-    if (state === 'active' && e.key === 'Escape' && escapable) {
+    if ((state === 'active' || state === 'init') && e.key === 'Escape' && escapable) {
       e.preventDefault()
       dispatch('escape')
     }

package/dist/components/FocusLock.svelte.d.ts

@@ -4,6 +4,7 @@ export declare const FocusLockStack: {
     pause: () => void;
     unpause: () => void;
     update: () => void;
+    inheritReturnFocus: (el: HTMLElement) => void;
 }[];
 declare const __propDef: {
     props: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.6.14",
+  "version": "1.6.16",
   "description": "Svelte components that are generically useful.",
   "scripts": {
     "prepublishOnly": "svelte-package",
@@ -29,7 +29,7 @@
     "@sveltejs/package": "^2.0.2",
     "eslint-config-love": "^154.0.0",
     "eslint-plugin-svelte": "^3.0.0",
-    "svelte": "^5.0.0",
+    "svelte": "^5.56.3",
     "svelte-check": "^4.0.0",
     "tslib": "^2.3.1",
     "typescript": "^6.0.3"