@capgo/capacitor-sheets 8.1.0 → 8.2.0

package/dist/index.js

@@ -711,12 +711,15 @@ function tween(start, end, progress) {
   const next = startValue + (endValue - startValue) * progress;
   return `${next}${unit}`;
 }
-var defaultOptions, defaultAnimation, stackRegistry, documentLockDepth, documentLockSnapshot, unitlessInsetPattern, safeAreaEdges, SheetController;
+var inertDepth, inertOriginal, inertHolders, defaultOptions, defaultAnimation, stackRegistry, documentLockDepth, documentLockSnapshot, unitlessInsetPattern, safeAreaEdges, SheetController;
 var init_sheet_controller = __esm({
   "src/core/sheet-controller.ts"() {
     "use strict";
     init_theme_color();
     init_utils();
+    inertDepth = /* @__PURE__ */ new WeakMap();
+    inertOriginal = /* @__PURE__ */ new WeakMap();
+    inertHolders = /* @__PURE__ */ new WeakMap();
     defaultOptions = {
       contentPlacement: "bottom",
       sheetRole: "dialog",
@@ -765,24 +768,32 @@ var init_sheet_controller = __esm({
       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;
@@ -813,10 +824,18 @@ var init_sheet_controller = __esm({
         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,
@@ -826,7 +845,9 @@ var init_sheet_controller = __esm({
           lastY: event.clientY,
           lastTime: performance.now(),
           velocity: 0,
-          dragging: false
+          dragging: false,
+          samples: [{ t: performance.now(), pos: startPos }],
+          interruptedMotion
         };
       };
       handlePointerMove = (event) => {
@@ -854,6 +875,8 @@ var init_sheet_controller = __esm({
         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");
       };
@@ -865,9 +888,17 @@ var init_sheet_controller = __esm({
           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;
@@ -952,6 +983,8 @@ var init_sheet_controller = __esm({
           this.remeasure();
           this.applyOffset(this.detentOffsetsPx[0] || this.hiddenOffsetPx, this.status);
           this.updateDomState(false);
+        } else if (this.presented && affectsDismissedOffset(options)) {
+          this.scheduleRemeasure();
         }
         this.registerStack();
       }
@@ -1006,6 +1039,7 @@ var init_sheet_controller = __esm({
         }
         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);
@@ -1014,15 +1048,33 @@ var init_sheet_controller = __esm({
         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 = {}) {
@@ -1031,6 +1083,8 @@ var init_sheet_controller = __esm({
         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());
@@ -1071,15 +1125,49 @@ var init_sheet_controller = __esm({
         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 = {}) {
@@ -1211,7 +1299,7 @@ var init_sheet_controller = __esm({
         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);
@@ -1236,7 +1324,18 @@ var init_sheet_controller = __esm({
         );
         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;
@@ -1250,10 +1349,13 @@ var init_sheet_controller = __esm({
           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") {
@@ -1477,47 +1579,152 @@ var init_sheet_controller = __esm({
         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;