@capgo/capacitor-sheets 8.0.14 → 8.0.16

package/dist/index.js

@@ -711,7 +711,7 @@ function tween(start, end, progress) {
   const next = startValue + (endValue - startValue) * progress;
   return `${next}${unit}`;
 }
-var defaultOptions, defaultAnimation, stackRegistry, unitlessInsetPattern, safeAreaEdges, SheetController;
+var defaultOptions, defaultAnimation, stackRegistry, documentLockDepth, documentLockSnapshot, unitlessInsetPattern, safeAreaEdges, SheetController;
 var init_sheet_controller = __esm({
   "src/core/sheet-controller.ts"() {
     "use strict";
@@ -742,6 +742,8 @@ var init_sheet_controller = __esm({
       contentMove: true
     };
     stackRegistry = /* @__PURE__ */ new Map();
+    documentLockDepth = /* @__PURE__ */ new WeakMap();
+    documentLockSnapshot = /* @__PURE__ */ new WeakMap();
     unitlessInsetPattern = /^-?(?:\d+(?:\.\d+)?|\.\d+)$/;
     safeAreaEdges = ["top", "bottom", "left", "right"];
     SheetController = class {
@@ -763,8 +765,6 @@ var init_sheet_controller = __esm({
       pointerTravel = null;
       connected = false;
       lockedScroll = false;
-      previousBodyOverflow = "";
-      previousBodyTouchAction = "";
       inertedElements = /* @__PURE__ */ new Map();
       previousFocus = null;
       hasThemeDimmer = false;
@@ -777,12 +777,20 @@ var init_sheet_controller = __esm({
         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;
@@ -999,6 +1007,7 @@ var init_sheet_controller = __esm({
         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();
@@ -1022,6 +1031,7 @@ var init_sheet_controller = __esm({
         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, {
@@ -1060,6 +1070,7 @@ 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 || {},
@@ -1331,6 +1342,7 @@ var init_sheet_controller = __esm({
         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;
       }
@@ -1342,6 +1354,7 @@ var init_sheet_controller = __esm({
         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;
       }
@@ -1374,6 +1387,7 @@ var init_sheet_controller = __esm({
           content.setAttribute("tabindex", content.getAttribute("tabindex") || "-1");
         }
         this.root.toggleAttribute("presented", presented);
+        this.updateDetentState();
       }
       linkAccessibleNames() {
         if (!this.parts.content) return;
@@ -1422,24 +1436,60 @@ var init_sheet_controller = __esm({
       }
       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;
@@ -1518,6 +1568,12 @@ var init_sheet_controller = __esm({
         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;