@capgo/capacitor-sheets 8.0.14 → 8.0.16

package/dist/react/index.mjs

@@ -528,6 +528,8 @@ var defaultAnimation = {
   contentMove: true
 };
 var stackRegistry = /* @__PURE__ */ new Map();
+var documentLockDepth = /* @__PURE__ */ new WeakMap();
+var documentLockSnapshot = /* @__PURE__ */ new WeakMap();
 function parseNumber(value) {
   if (value === null) return void 0;
   const parsed = Number.parseInt(value, 10);
@@ -685,8 +687,6 @@ var SheetController = class {
   pointerTravel = null;
   connected = false;
   lockedScroll = false;
-  previousBodyOverflow = "";
-  previousBodyTouchAction = "";
   inertedElements = /* @__PURE__ */ new Map();
   previousFocus = null;
   hasThemeDimmer = false;
@@ -699,12 +699,20 @@ var SheetController = class {
     const visualViewport = this.root.ownerDocument.defaultView?.visualViewport;
     if (!view) return;
     if (!visualViewport || this.options.nativeFocusScrollPrevention === false) {
-      view.style.setProperty("--cap-sheet-keyboard-offset", "0em");
+      this.setKeyboardOffset("0em");
       return;
     }
     const layoutHeight = this.root.ownerDocument.documentElement.clientHeight;
     const keyboardOffset = Math.max(0, layoutHeight - visualViewport.height - visualViewport.offsetTop);
-    view.style.setProperty("--cap-sheet-keyboard-offset", `${toEm(view, keyboardOffset)}em`);
+    this.setKeyboardOffset(`${toEm(view, keyboardOffset)}em`);
+  };
+  handleFocusIn = (event) => {
+    if (!this.presented || this.options.nativeFocusScrollPrevention === false) return;
+    const target = event.target;
+    const content = this.parts.content;
+    if (!(target instanceof HTMLElement) || !content?.contains(target)) return;
+    if (!["input", "select", "textarea"].includes(target.localName) && !target.isContentEditable) return;
+    requestAnimationFrame(() => target.scrollIntoView({ block: "nearest", inline: "nearest" }));
   };
   handleDocumentKeyDown = (event) => {
     if (!this.presented) return;
@@ -921,6 +929,7 @@ var SheetController = class {
     this.previousFocus = this.root.ownerDocument.activeElement;
     this.presented = true;
     this.activeDetent = clamp(options.detent ?? this.resolveInitialDetent(), 1, this.detentOffsetsPx.length - 1);
+    this.updateDetentState();
     this.updateDomState(true);
     this.lockPage();
     this.applyInert();
@@ -944,6 +953,7 @@ var SheetController = class {
     const previous = this.activeDetent;
     this.presented = false;
     this.activeDetent = 0;
+    this.updateDetentState();
     this.setStatus("exiting");
     dispatch(this.root, "cap-sheet-dismiss", this.getTravelEvent());
     await this.animateTo(this.detentOffsetsPx[0] || this.hiddenOffsetPx, {
@@ -982,6 +992,7 @@ 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 || {},
@@ -1253,6 +1264,7 @@ var SheetController = class {
     view.addEventListener("pointermove", this.handlePointerMove, { passive: false });
     view.addEventListener("pointerup", this.handlePointerUp);
     view.addEventListener("pointercancel", this.handlePointerUp);
+    view.addEventListener("focusin", this.handleFocusIn);
     view.addEventListener("wheel", this.handleWheel, { passive: false });
     this.viewListenersElement = view;
   }
@@ -1264,6 +1276,7 @@ var SheetController = class {
     view.removeEventListener("pointermove", this.handlePointerMove);
     view.removeEventListener("pointerup", this.handlePointerUp);
     view.removeEventListener("pointercancel", this.handlePointerUp);
+    view.removeEventListener("focusin", this.handleFocusIn);
     view.removeEventListener("wheel", this.handleWheel);
     this.viewListenersElement = null;
   }
@@ -1296,6 +1309,7 @@ var SheetController = class {
       content.setAttribute("tabindex", content.getAttribute("tabindex") || "-1");
     }
     this.root.toggleAttribute("presented", presented);
+    this.updateDetentState();
   }
   linkAccessibleNames() {
     if (!this.parts.content) return;
@@ -1344,24 +1358,60 @@ var SheetController = class {
   }
   lockPage() {
     if (this.lockedScroll) return;
-    const body = this.root.ownerDocument.body;
-    this.previousBodyOverflow = body.style.overflow;
-    this.previousBodyTouchAction = body.style.touchAction;
+    const doc = this.root.ownerDocument;
+    const documentElement = doc.documentElement;
+    const body = doc.body;
+    const depth = documentLockDepth.get(doc) ?? 0;
+    if (depth === 0) {
+      documentLockSnapshot.set(doc, {
+        htmlOverflow: documentElement.style.overflow,
+        htmlTouchAction: documentElement.style.touchAction,
+        bodyOverflow: body.style.overflow,
+        bodyTouchAction: body.style.touchAction
+      });
+    }
+    documentElement.style.overflow = "hidden";
+    documentElement.style.touchAction = "none";
     body.dataset.capSheetScrollLocked = "true";
     body.style.overflow = "hidden";
     body.style.touchAction = "none";
+    documentLockDepth.set(doc, depth + 1);
     this.lockedScroll = true;
   }
   unlockPage() {
     if (!this.lockedScroll) return;
-    const body = this.root.ownerDocument.body;
+    const doc = this.root.ownerDocument;
+    const documentElement = doc.documentElement;
+    const body = doc.body;
+    const depth = Math.max((documentLockDepth.get(doc) ?? 1) - 1, 0);
+    if (depth > 0) {
+      documentLockDepth.set(doc, depth);
+      this.lockedScroll = false;
+      return;
+    }
+    const snapshot = documentLockSnapshot.get(doc);
     delete body.dataset.capSheetScrollLocked;
-    body.style.overflow = this.previousBodyOverflow;
-    body.style.touchAction = this.previousBodyTouchAction;
-    this.previousBodyOverflow = "";
-    this.previousBodyTouchAction = "";
+    documentElement.style.overflow = snapshot?.htmlOverflow ?? "";
+    documentElement.style.touchAction = snapshot?.htmlTouchAction ?? "";
+    body.style.overflow = snapshot?.bodyOverflow ?? "";
+    body.style.touchAction = snapshot?.bodyTouchAction ?? "";
+    documentLockDepth.delete(doc);
+    documentLockSnapshot.delete(doc);
     this.lockedScroll = false;
   }
+  setKeyboardOffset(value) {
+    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);
+    }
+    if (!this.presented) return;
+    requestAnimationFrame(() => {
+      if (!this.presented) return;
+      this.remeasure();
+      this.applyOffset(this.detentOffsetsPx[this.activeDetent] || 0, this.status);
+    });
+  }
   applyInert() {
     if (this.options.inertOutside === false || !this.parts.view) return;
     const body = this.root.ownerDocument.body;
@@ -1440,6 +1490,12 @@ var SheetController = class {
     const detail = { activeDetent, previousActiveDetent };
     dispatch(this.root, "cap-sheet-active-detent-change", detail);
   }
+  updateDetentState() {
+    const activeDetent = String(this.activeDetent);
+    this.root.dataset.activeDetent = activeDetent;
+    if (this.parts.view) this.parts.view.dataset.activeDetent = activeDetent;
+    if (this.parts.content) this.parts.content.dataset.activeDetent = activeDetent;
+  }
   registerStack() {
     const nextStack = this.options.stack || this.root.closest("cap-sheet-stack")?.id || null;
     if (this.stackId === nextStack) return;