@capgo/capacitor-sheets 8.1.0 → 8.2.1

package/dist/react/index.mjs

@@ -503,6 +503,9 @@ function releaseThemeColorDimmer(documentRef) {
 }
 
 // src/core/sheet-controller.ts
+var inertDepth = /* @__PURE__ */ new WeakMap();
+var inertOriginal = /* @__PURE__ */ new WeakMap();
+var inertHolders = /* @__PURE__ */ new WeakMap();
 var defaultOptions = {
   contentPlacement: "bottom",
   sheetRole: "dialog",
@@ -687,24 +690,32 @@ var SheetController = class {
   pointerTravel = null;
   connected = false;
   lockedScroll = false;
-  inertedElements = /* @__PURE__ */ new Map();
+  inertHeldElements = /* @__PURE__ */ new Set();
+  remeasureFrame = null;
+  activeMotion = null;
+  pendingSettle = null;
+  /** Entering completion deferred by a drag that interrupted present(); runs once the sheet settles. */
+  deferredEnteringComplete = null;
+  /** Resolves the in-flight present() after entering lifecycle completes or is abandoned. */
+  settlePresentPromise = null;
   previousFocus = null;
   hasThemeDimmer = false;
   stackId = null;
   documentListenersAttached = false;
   viewListenersElement = null;
   visualViewportListenersAttached = false;
-  handleVisualViewportResize = () => {
+  handleVisualViewportResize = (event) => {
     const view = this.parts.view;
     const visualViewport = this.root.ownerDocument.defaultView?.visualViewport;
     if (!view) return;
+    const viewportChanged = event !== void 0;
     if (!visualViewport || this.options.nativeFocusScrollPrevention === false) {
-      this.setKeyboardOffset("0em");
+      this.setKeyboardOffset("0em", viewportChanged);
       return;
     }
     const layoutHeight = this.root.ownerDocument.documentElement.clientHeight;
     const keyboardOffset = Math.max(0, layoutHeight - visualViewport.height - visualViewport.offsetTop);
-    this.setKeyboardOffset(`${toEm(view, keyboardOffset)}em`);
+    this.setKeyboardOffset(`${toEm(view, keyboardOffset)}em`, viewportChanged);
   };
   handleFocusIn = (event) => {
     if (!this.presented || this.options.nativeFocusScrollPrevention === false) return;
@@ -735,10 +746,18 @@ var SheetController = class {
     if (!this.presented || this.options.swipe === false || this.options.contentPlacement === "center") return;
     if (!(event.target instanceof Element)) return;
     if (!this.parts.content?.contains(event.target) && event.target !== this.parts.backdrop) return;
+    if (this.pointerTravel && !event.isPrimary) return;
     if (this.options.nativeEdgeSwipePrevention !== false && this.isNativeEdgePointer(event)) {
       event.preventDefault();
     }
+    this.syncOffsetFromRenderedPosition();
+    const interruptedMotion = this.activeMotion ? this.pendingSettle : null;
+    this.pendingSettle = null;
+    this.cancelActiveMotion();
+    this.applyOffset(this.currentOffsetPx, this.status);
     this.remeasure();
+    const axis = isVerticalTrack(this.activeTrack) ? "y" : "x";
+    const startPos = axis === "y" ? event.clientY : event.clientX;
     this.pointerTravel = {
       id: event.pointerId,
       startOffsetPx: this.currentOffsetPx,
@@ -748,7 +767,9 @@ var SheetController = class {
       lastY: event.clientY,
       lastTime: performance.now(),
       velocity: 0,
-      dragging: false
+      dragging: false,
+      samples: [{ t: performance.now(), pos: startPos }],
+      interruptedMotion
     };
   };
   handlePointerMove = (event) => {
@@ -776,6 +797,8 @@ var SheetController = class {
     travel.lastX = event.clientX;
     travel.lastY = event.clientY;
     travel.lastTime = now;
+    travel.samples.push({ t: now, pos: current });
+    if (travel.samples.length > 24) travel.samples.shift();
     const nextOffset = this.limitOffset(travel.startOffsetPx + delta);
     this.applyOffset(nextOffset, "dragging");
   };
@@ -787,9 +810,17 @@ var SheetController = class {
       currentTarget.releasePointerCapture(event.pointerId);
     }
     this.pointerTravel = null;
-    if (!travel.dragging) return;
-    const nearest = this.nearestDetentForOffset(this.currentOffsetPx, travel.velocity);
+    if (!travel.dragging) {
+      if (travel.interruptedMotion && this.presented) {
+        void this.runSettleMotion(travel.interruptedMotion);
+      }
+      return;
+    }
+    const nearest = this.nearestDetentForOffset(this.currentOffsetPx, this.releaseVelocity(travel));
     dispatch(this.root, "cap-sheet-drag-end", this.getTravelEvent());
+    if (travel.interruptedMotion?.status === "entering") {
+      this.deferredEnteringComplete = travel.interruptedMotion.complete;
+    }
     if (nearest === 0 && this.options.swipeDismissal !== false) {
       void this.dismiss({ source: "gesture" });
       return;
@@ -874,6 +905,8 @@ var SheetController = class {
       this.remeasure();
       this.applyOffset(this.detentOffsetsPx[0] || this.hiddenOffsetPx, this.status);
       this.updateDomState(false);
+    } else if (this.presented && affectsDismissedOffset(options)) {
+      this.scheduleRemeasure();
     }
     this.registerStack();
   }
@@ -928,6 +961,7 @@ var SheetController = class {
     }
     this.previousFocus = this.root.ownerDocument.activeElement;
     this.presented = true;
+    this.abandonDeferredEntering();
     this.activeDetent = clamp(options.detent ?? this.resolveInitialDetent(), 1, this.detentOffsetsPx.length - 1);
     this.updateDetentState();
     this.updateDomState(true);
@@ -936,15 +970,33 @@ var SheetController = class {
     this.retainThemeDimmer();
     this.setStatus("entering");
     dispatch(this.root, "cap-sheet-present", this.getTravelEvent());
-    await this.animateTo(this.detentOffsetsPx[this.activeDetent] || 0, {
-      ...this.options.enteringAnimationSettings || {},
-      ...options.animation || {}
+    const source = options.source || "programmatic";
+    let resolvePresent;
+    const presentLifecycleSettled = new Promise((resolve) => {
+      resolvePresent = resolve;
     });
-    this.setStatus("idle");
-    this.focusInitialElement();
-    this.emitPresentedChange(true, options.source || "programmatic");
-    this.emitActiveDetentChange(this.activeDetent, 0);
-    this.updateStack();
+    this.settlePresentPromise = () => {
+      resolvePresent();
+    };
+    const complete = () => {
+      this.setStatus("idle");
+      this.focusInitialElement();
+      this.emitPresentedChange(true, source);
+      this.emitActiveDetentChange(this.activeDetent, 0);
+      this.updateStack();
+      this.releasePresentAwait();
+    };
+    const finished = await this.runSettleMotion({
+      status: "entering",
+      animation: {
+        ...this.options.enteringAnimationSettings || {},
+        ...options.animation || {}
+      },
+      complete
+    });
+    if (!finished) {
+      await presentLifecycleSettled;
+    }
   }
   /** Dismiss the sheet. */
   async dismiss(options = {}) {
@@ -953,6 +1005,8 @@ var SheetController = class {
     const previous = this.activeDetent;
     this.presented = false;
     this.activeDetent = 0;
+    this.pendingSettle = null;
+    this.abandonDeferredEntering();
     this.updateDetentState();
     this.setStatus("exiting");
     dispatch(this.root, "cap-sheet-dismiss", this.getTravelEvent());
@@ -993,15 +1047,49 @@ var SheetController = class {
     const previous = this.activeDetent;
     this.activeDetent = target;
     this.updateDetentState();
-    this.setStatus("settling");
-    await this.animateTo(this.detentOffsetsPx[target] || 0, {
-      ...this.options.steppingAnimationSettings || {},
-      ...options.animation || {}
+    await this.runSettleMotion({
+      status: "settling",
+      animation: {
+        ...this.options.steppingAnimationSettings || {},
+        ...options.animation || {}
+      },
+      complete: () => {
+        const enteringComplete = this.deferredEnteringComplete;
+        if (enteringComplete) {
+          this.deferredEnteringComplete = null;
+          enteringComplete();
+          return;
+        }
+        this.setStatus("idle");
+        if (previous !== target) {
+          this.emitActiveDetentChange(target, previous);
+        }
+      }
     });
-    this.setStatus("idle");
-    if (previous !== target) {
-      this.emitActiveDetentChange(target, previous);
-    }
+  }
+  /**
+   * Animate to the active detent and run the completion once the motion finishes.
+   * When the motion is cancelled by a pointerdown, the settle stays pending so a tap
+   * that never becomes a drag can resume it.
+   */
+  releasePresentAwait() {
+    if (!this.settlePresentPromise) return;
+    const settle = this.settlePresentPromise;
+    this.settlePresentPromise = null;
+    settle();
+  }
+  abandonDeferredEntering() {
+    this.deferredEnteringComplete = null;
+    this.releasePresentAwait();
+  }
+  async runSettleMotion(motion) {
+    this.setStatus(motion.status);
+    this.pendingSettle = motion;
+    const finished = await this.animateTo(this.detentOffsetsPx[this.activeDetent] || 0, motion.animation);
+    if (!finished) return false;
+    if (this.pendingSettle === motion) this.pendingSettle = null;
+    motion.complete();
+    return true;
   }
   /** Step up or down one detent. */
   async step(direction = "up", options = {}) {
@@ -1133,7 +1221,7 @@ var SheetController = class {
     const resolved = resolveAnimation(settings);
     if (!content || shouldSkipMotion(resolved.skip)) {
       this.applyOffset(targetOffsetPx, "idle");
-      return;
+      return true;
     }
     const startOffset = this.currentOffsetPx;
     const fromProgress = this.getProgressForOffset(startOffset);
@@ -1158,7 +1246,18 @@ var SheetController = class {
     );
     const started = performance.now();
     let frame;
+    let cancelled = false;
+    const cancelMotion = () => {
+      if (cancelled) return;
+      cancelled = true;
+      cancelAnimationFrame(frame);
+      contentAnimation?.cancel();
+      backdropAnimation?.cancel();
+      this.activeMotion = null;
+    };
+    this.activeMotion = { cancel: cancelMotion };
     const tick = () => {
+      if (cancelled) return;
       const progress = duration === 0 ? 1 : clamp((performance.now() - started) / duration, 0, 1);
       const offset = startOffset + (targetOffsetPx - startOffset) * progress;
       this.currentOffsetPx = offset;
@@ -1172,10 +1271,13 @@ var SheetController = class {
       contentAnimation?.finished,
       backdropAnimation ? backdropAnimation.finished : Promise.resolve()
     ]);
+    if (cancelled) return false;
     cancelAnimationFrame(frame);
     contentAnimation?.cancel();
     backdropAnimation?.cancel();
+    this.activeMotion = null;
     this.applyOffset(targetOffsetPx, "idle");
+    return true;
   }
   getProgressForOffset(offsetPx) {
     if (this.options.contentPlacement === "center") {
@@ -1399,47 +1501,152 @@ var SheetController = class {
     documentLockSnapshot.delete(doc);
     this.lockedScroll = false;
   }
-  setKeyboardOffset(value) {
+  setKeyboardOffset(value, viewportChanged = false) {
     const view = this.parts.view;
     if (!view) return;
-    if (view.style.getPropertyValue("--cap-sheet-keyboard-offset") !== value) {
-      view.style.setProperty("--cap-sheet-keyboard-offset", value);
-    }
+    const changed = view.style.getPropertyValue("--cap-sheet-keyboard-offset") !== value;
+    if (changed) view.style.setProperty("--cap-sheet-keyboard-offset", value);
+    if (changed || viewportChanged) this.scheduleRemeasure();
+  }
+  scheduleRemeasure() {
     if (!this.presented) return;
-    requestAnimationFrame(() => {
+    if (this.remeasureFrame !== null) return;
+    this.remeasureFrame = requestAnimationFrame(() => {
+      this.remeasureFrame = null;
       if (!this.presented) return;
       this.remeasure();
+      if (this.status === "dragging") return;
       this.applyOffset(this.detentOffsetsPx[this.activeDetent] || 0, this.status);
     });
   }
+  cancelActiveMotion() {
+    this.activeMotion?.cancel();
+    this.activeMotion = null;
+  }
+  syncOffsetFromRenderedPosition() {
+    const content = this.parts.content;
+    if (!content || this.options.contentPlacement === "center") return;
+    const offsetPx = this.readOffsetPxFromTransform(content);
+    if (offsetPx === null) return;
+    this.currentOffsetPx = offsetPx;
+  }
+  readOffsetPxFromTransform(content) {
+    const axis = isVerticalTrack(this.activeTrack) ? "y" : "x";
+    const computed = this.root.ownerDocument.defaultView?.getComputedStyle(content).transform;
+    const inline = content.style.transform;
+    const transform = computed && computed !== "none" ? computed : inline && inline !== "none" ? inline : "";
+    if (!transform) return this.currentOffsetPx;
+    const translateMatch = transform.match(/translate3d\(\s*([^,]+)\s*,\s*([^,]+)\s*,/);
+    if (translateMatch) {
+      const raw = axis === "y" ? translateMatch[2] : translateMatch[1];
+      const emMatch = raw.trim().match(/^(-?[\d.]+)em$/);
+      if (emMatch) return Number.parseFloat(emMatch[1]) * getEmPx(content);
+      const pxMatch = raw.trim().match(/^(-?[\d.]+)px$/);
+      if (pxMatch) return Number.parseFloat(pxMatch[1]);
+    }
+    const matrixMatch = transform.match(/^matrix\(([^)]+)\)$/);
+    if (matrixMatch) {
+      const values = matrixMatch[1].split(",").map((part) => Number.parseFloat(part.trim()));
+      const translation = axis === "y" ? values[5] : values[4];
+      if (Number.isFinite(translation)) return translation;
+    }
+    const matrix3dMatch = transform.match(/^matrix3d\(([^)]+)\)$/);
+    if (matrix3dMatch) {
+      const values = matrix3dMatch[1].split(",").map((part) => Number.parseFloat(part.trim()));
+      const translation = axis === "y" ? values[13] : values[12];
+      if (Number.isFinite(translation)) return translation;
+    }
+    return null;
+  }
+  releaseVelocity(travel) {
+    const windowMs = 100;
+    const now = performance.now();
+    const samples = travel.samples.filter((sample) => now - sample.t <= windowMs);
+    if (samples.length < 2) return 0;
+    const first = samples[0];
+    const last = samples[samples.length - 1];
+    const elapsed = Math.max(last.t - first.t, 1);
+    return (last.pos - first.pos) / elapsed * 1e3;
+  }
+  getAllowedOutsideElements() {
+    const allowed = /* @__PURE__ */ new Set();
+    if (this.parts.view) allowed.add(this.parts.view);
+    for (const element of this.parts.islands) allowed.add(element);
+    for (const element of this.parts.externalOverlays) allowed.add(element);
+    return allowed;
+  }
+  applyInertForElement(element, allowed) {
+    const isAllowed = Array.from(allowed).some((candidate) => element === candidate || element.contains(candidate));
+    if (isAllowed) {
+      element.inert = false;
+      element.removeAttribute("aria-hidden");
+      return;
+    }
+    element.inert = true;
+    element.setAttribute("aria-hidden", "true");
+  }
   applyInert() {
     if (this.options.inertOutside === false || !this.parts.view) return;
-    const body = this.root.ownerDocument.body;
-    const allowed = /* @__PURE__ */ new Set([this.parts.view, ...this.parts.islands, ...this.parts.externalOverlays]);
-    this.clearInert();
+    const doc = this.root.ownerDocument;
+    const body = doc.body;
+    const allowed = this.getAllowedOutsideElements();
+    this.releaseInertHold();
+    const holders = inertHolders.get(doc) || /* @__PURE__ */ new Set();
+    holders.add(this);
+    inertHolders.set(doc, holders);
     for (const child of Array.from(body.children)) {
       if (!(child instanceof HTMLElement)) continue;
-      this.inertedElements.set(child, { inert: child.inert, ariaHidden: child.getAttribute("aria-hidden") });
-      const isAllowed = Array.from(allowed).some((element) => child === element || child.contains(element));
-      if (isAllowed) {
-        child.inert = false;
-        child.removeAttribute("aria-hidden");
-        continue;
+      const depth = inertDepth.get(child) ?? 0;
+      if (depth === 0) {
+        inertOriginal.set(child, { inert: child.inert, ariaHidden: child.getAttribute("aria-hidden") });
       }
-      child.inert = true;
-      child.setAttribute("aria-hidden", "true");
+      inertDepth.set(child, depth + 1);
+      this.inertHeldElements.add(child);
+      this.applyInertForElement(child, allowed);
     }
   }
   clearInert() {
-    for (const [element, state] of this.inertedElements) {
-      element.inert = state.inert;
-      if (state.ariaHidden === null) {
-        element.removeAttribute("aria-hidden");
+    this.releaseInertHold();
+  }
+  releaseInertHold() {
+    if (this.inertHeldElements.size === 0) return;
+    const doc = this.root.ownerDocument;
+    const holders = inertHolders.get(doc);
+    holders?.delete(this);
+    if (holders?.size === 0) inertHolders.delete(doc);
+    for (const element of this.inertHeldElements) {
+      const depth = Math.max((inertDepth.get(element) ?? 1) - 1, 0);
+      if (depth === 0) {
+        inertDepth.delete(element);
+        const snapshot = inertOriginal.get(element);
+        if (snapshot) {
+          element.inert = snapshot.inert;
+          if (snapshot.ariaHidden === null) {
+            element.removeAttribute("aria-hidden");
+          } else {
+            element.setAttribute("aria-hidden", snapshot.ariaHidden);
+          }
+          inertOriginal.delete(element);
+        }
       } else {
-        element.setAttribute("aria-hidden", state.ariaHidden);
+        inertDepth.set(element, depth);
       }
     }
-    this.inertedElements.clear();
+    this.inertHeldElements.clear();
+    this.reapplyDocumentInert(doc);
+  }
+  reapplyDocumentInert(doc) {
+    const holders = inertHolders.get(doc);
+    if (!holders?.size) return;
+    const top = Array.from(holders).filter((controller) => controller.presented && controller.options.inertOutside !== false).sort((left, right) => right.getStackZIndex() - left.getStackZIndex())[0];
+    if (!top) return;
+    const allowed = top.getAllowedOutsideElements();
+    const body = doc.body;
+    for (const child of Array.from(body.children)) {
+      if (!(child instanceof HTMLElement)) continue;
+      if ((inertDepth.get(child) ?? 0) === 0) continue;
+      top.applyInertForElement(child, allowed);
+    }
   }
   retainThemeDimmer() {
     if (this.hasThemeDimmer || this.options.themeColorDimming !== "auto") return;