@supersoniks/concorde 4.9.7 → 4.9.9

package/src/core/components/functional/queue/queue.ts

@@ -5,6 +5,13 @@ import { map } from "lit/directives/map.js";
 import DataProvider, { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
 import "@supersoniks/concorde/core/components/functional/list/list";
 import { HTML } from "@supersoniks/concorde/utils";
+import {
+  isSafariScrollEngine,
+  resetScrollRoot,
+  restoreScrollRoot,
+  watchScrollRoot,
+  type ScrollRoot,
+} from "@supersoniks/concorde/core/utils/SafariScrollGuard";
 import { ListItems } from "@supersoniks/concorde/core/components/functional/list/list";
 
 type QueueItem = {
@@ -74,7 +81,7 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
     this.requestId = 0;
     this.isFirstRequest = true;
     this.nextHadEvent = false;
-    this.teardownScrollGuard();
+    this.teardownScrollSync();
     this.publisher.set({});
     super.disconnectedCallback();
     return;
@@ -106,8 +113,7 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
         HTML.getAncestorAttributeValue(this.parentElement, "dataProvider") ||
         "";
     }
-    this.captureScrollPosition();
-    this.ensureScrollGuard();
+    this.ensureScrollSync();
     super.connectedCallback();
     this.publisher.set({});
     this.key = this.getAttribute("key");
@@ -164,8 +170,7 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
     if (searchHash == this.searchHash && !this.isFirstRequest) return;
     this.searchHash = searchHash;
     // Nouvelle recherche : ne pas restaurer l'ancienne position de scroll
-    this.storedScrollX = 0;
-    this.storedScrollY = 0;
+    resetScrollRoot(this.resolveScrollRoot(), { x: 0, y: 0 });
 
     /**
      * on reset les données avant de lancer la requète
@@ -193,23 +198,15 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
   };
 
   /**
-   * Conteneur scrollé (élément ou window) — Safari / iOS only.
-   * Stock = dernière position user (touch/wheel/pointer + settle inertie).
-   * Restore = updated (enfants Lit) + MutationObserver (subscribers / modal).
+   * Conteneur scrollé — Safari : stock/restore via SafariScrollGuard
+   * (capture intent user globale). Ici : sync root + restore après Lit.
    */
-  scrollRoot: HTMLElement | Window | null = null;
-  storedScrollY = 0;
-  storedScrollX = 0;
-  private static readonly SCROLL_SETTLE_MS = 150;
-  private userScrollEngaged = false;
-  private restoringScroll = false;
-  private scrollGuardActive = false;
-  private scrollSettleTimer?: ReturnType<typeof setTimeout>;
+  scrollRoot: ScrollRoot | null = null;
+  private scrollSyncActive = false;
   private mutationObserver: MutationObserver | null = null;
-  private boundScrollTarget: EventTarget | null = null;
   private restoreGeneration = 0;
 
-  resolveScrollRoot(): HTMLElement | Window {
+  resolveScrollRoot(): ScrollRoot {
     const ancestor = HTML.getScrollingAncestor(this);
     if (
       !ancestor ||
@@ -221,136 +218,21 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
     return ancestor as HTMLElement;
   }
 
-  /** Lit la position courante — ne pas appeler sur un scroll “fantôme” Safari. */
-  captureScrollPosition() {
-    if (!this.isSafari()) {
-      return;
-    }
-    const root = this.resolveScrollRoot();
-    this.scrollRoot = root;
-    if (root === window) {
-      this.storedScrollX = window.scrollX;
-      this.storedScrollY = window.scrollY;
-    } else {
-      const el = root as HTMLElement;
-      this.storedScrollX = el.scrollLeft;
-      this.storedScrollY = el.scrollTop;
-    }
-  }
-
-  restoreScrollPosition() {
-    if (!this.isSafari()) {
-      return;
-    }
-    const root = this.scrollRoot ?? this.resolveScrollRoot();
-    const x = this.storedScrollX;
-    const y = this.storedScrollY;
-    this.restoringScroll = true;
-    try {
-      if (root === window) {
-        if (
-          Math.abs(x - window.scrollX) > 10 ||
-          Math.abs(y - window.scrollY) > 10
-        ) {
-          window.scrollTo(x, y);
-        }
-      } else {
-        const el = root as HTMLElement;
-        if (
-          Math.abs(x - el.scrollLeft) > 10 ||
-          Math.abs(y - el.scrollTop) > 10
-        ) {
-          el.scrollLeft = x;
-          el.scrollTop = y;
-        }
-      }
-    } finally {
-      requestAnimationFrame(() => {
-        this.restoringScroll = false;
-      });
-    }
-  }
-
   isSafari() {
-    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    return isSafariScrollEngine();
   }
 
-  private markUserScrollEngaged = () => {
-    this.userScrollEngaged = true;
-  };
-
-  private armScrollSettle = () => {
-    clearTimeout(this.scrollSettleTimer);
-    this.scrollSettleTimer = setTimeout(() => {
-      this.userScrollEngaged = false;
-      this.scrollSettleTimer = undefined;
-    }, Queue.SCROLL_SETTLE_MS);
-  };
-
-  private onScrollRootScroll = () => {
-    if (!this.isSafari() || this.restoringScroll || !this.userScrollEngaged) {
-      return;
-    }
-    this.captureScrollPosition();
-    // iOS : l’inertie continue après touchend → prolonger l’engagement
-    this.armScrollSettle();
-  };
-
-  private onUserScrollIntent = () => {
-    if (!this.isSafari()) return;
-    this.markUserScrollEngaged();
-  };
-
-  private onUserScrollIntentEnd = () => {
-    if (!this.isSafari()) return;
-    this.armScrollSettle();
-  };
-
-  private onWheelIntent = () => {
-    if (!this.isSafari()) return;
-    this.markUserScrollEngaged();
-    this.armScrollSettle();
-  };
-
-  ensureScrollGuard() {
-    if (!this.isSafari() || !this.isConnected) {
+  ensureScrollSync() {
+    if (!isSafariScrollEngine() || !this.isConnected) {
       return;
     }
     const root = this.resolveScrollRoot();
-    const target: EventTarget = root === window ? window : root;
-    if (this.scrollGuardActive && this.boundScrollTarget === target) {
-      this.scrollRoot = root;
+    this.scrollRoot = root;
+    watchScrollRoot(root);
+    if (this.scrollSyncActive) {
       return;
     }
-    this.teardownScrollGuard();
-    this.scrollRoot = root;
-    this.boundScrollTarget = target;
-    this.scrollGuardActive = true;
-
-    target.addEventListener("scroll", this.onScrollRootScroll, {
-      passive: true,
-    });
-    // Intent user : touch (iOS), wheel, pointer (scrollbar desktop Safari)
-    target.addEventListener("touchstart", this.onUserScrollIntent, {
-      passive: true,
-    });
-    target.addEventListener("touchend", this.onUserScrollIntentEnd, {
-      passive: true,
-    });
-    target.addEventListener("touchcancel", this.onUserScrollIntentEnd, {
-      passive: true,
-    });
-    target.addEventListener("wheel", this.onWheelIntent, { passive: true });
-    target.addEventListener("pointerdown", this.onUserScrollIntent, {
-      passive: true,
-    });
-    target.addEventListener("pointerup", this.onUserScrollIntentEnd, {
-      passive: true,
-    });
-    target.addEventListener("pointercancel", this.onUserScrollIntentEnd, {
-      passive: true,
-    });
-
+    this.scrollSyncActive = true;
     this.mutationObserver = new MutationObserver(() => {
       this.scheduleRestoreAfterChildren();
     });
@@ -361,27 +243,11 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
     });
   }
 
-  teardownScrollGuard() {
+  teardownScrollSync() {
     this.restoreGeneration++;
-    clearTimeout(this.scrollSettleTimer);
-    this.scrollSettleTimer = undefined;
-    this.userScrollEngaged = false;
-    this.restoringScroll = false;
-    if (this.boundScrollTarget) {
-      const target = this.boundScrollTarget;
-      target.removeEventListener("scroll", this.onScrollRootScroll);
-      target.removeEventListener("touchstart", this.onUserScrollIntent);
-      target.removeEventListener("touchend", this.onUserScrollIntentEnd);
-      target.removeEventListener("touchcancel", this.onUserScrollIntentEnd);
-      target.removeEventListener("wheel", this.onWheelIntent);
-      target.removeEventListener("pointerdown", this.onUserScrollIntent);
-      target.removeEventListener("pointerup", this.onUserScrollIntentEnd);
-      target.removeEventListener("pointercancel", this.onUserScrollIntentEnd);
-      this.boundScrollTarget = null;
-    }
     this.mutationObserver?.disconnect();
     this.mutationObserver = null;
-    this.scrollGuardActive = false;
+    this.scrollSyncActive = false;
     this.scrollRoot = null;
   }
 
@@ -390,7 +256,7 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
    * Ne pas await updateComplete *dans* updated (deadlock) — on sort du cycle via void async.
    */
   scheduleRestoreAfterChildren() {
-    if (!this.isSafari() || !this.isConnected) {
+    if (!isSafariScrollEngine() || !this.isConnected) {
       return;
     }
     const generation = ++this.restoreGeneration;
@@ -410,14 +276,17 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
       await new Promise<void>((r) => requestAnimationFrame(() => r()));
       if (generation !== this.restoreGeneration || !this.isConnected) return;
 
-      this.restoreScrollPosition();
+      const root = this.scrollRoot ?? this.resolveScrollRoot();
+      watchScrollRoot(root);
+      restoreScrollRoot(root);
     })();
   }
 
   protected updated(_changedProperties: PropertyValues): void {
-    if (this.isSafari()) {
-      this.ensureScrollGuard();
-      this.restoreScrollPosition();
+    if (isSafariScrollEngine()) {
+      this.ensureScrollSync();
+      const root = this.scrollRoot ?? this.resolveScrollRoot();
+      restoreScrollRoot(root);
       this.scheduleRestoreAfterChildren();
     }
 
@@ -533,7 +402,7 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
     // Ne pas écraser le stock avec un jump Safari : uniquement sync du root / guard.
     if (this.isSafari()) {
       this.scrollRoot = this.resolveScrollRoot();
-      this.ensureScrollGuard();
+      this.ensureScrollSync();
     }
     if (!Array.isArray(this.props)) {
       return nothing;

package/src/core/components/ui/_css/scroll.ts

@@ -1,4 +1,7 @@
 import { css } from "lit";
+import { installSafariScrollGuard } from "@supersoniks/concorde/core/utils/SafariScrollGuard";
+
+installSafariScrollGuard();
 
 export const customScroll = css`
   .custom-scroll {