@surdeddd/bottom-sheet 0.8.0 → 0.8.2

package/dist/vue.cjs

@@ -2928,7 +2928,10 @@ var BottomSheetEngine = class {
     cs.flex = "none";
     if (vertical) cs.height = "auto";
     else cs.width = "auto";
-    const natural = vertical ? el.offsetHeight : el.offsetWidth;
+    const poked = vertical ? el.offsetHeight : el.offsetWidth;
+    const contentBox = vertical ? content.clientHeight : content.clientWidth;
+    const contentScroll = vertical ? content.scrollHeight : content.scrollWidth;
+    const natural = Math.max(poked, poked - contentBox + contentScroll);
     sheetStyle[axis] = prevSheet;
     cs.flex = prevFlex;
     if (vertical) cs.height = prevContent;
@@ -2940,9 +2943,21 @@ var BottomSheetEngine = class {
     const natural = this.measureSheetNatural(vertical);
     const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
     if (typeof window === "undefined") return capped;
-    const viewport = vertical ? window.innerHeight : window.innerWidth;
+    const viewport = this.containingExtent(vertical);
     return viewport > 0 ? Math.min(capped, viewport) : capped;
   }
+  // The fit cap is the sheet's containing block, not always the window: a
+  // position:fixed sheet nested under a transform/filter/will-change ancestor
+  // is clipped to that ancestor, so capping by window.innerHeight oversizes the
+  // sheet and the content/footer get clipped. offsetParent resolves to that
+  // ancestor when present, and is null (→ viewport) for a plain fixed sheet.
+  containingExtent(vertical) {
+    const op = this.element.offsetParent;
+    if (op && op !== document.body && op !== document.documentElement) {
+      return vertical ? op.clientHeight : op.clientWidth;
+    }
+    return vertical ? window.innerHeight : window.innerWidth;
+  }
   installFitObserver() {
     if (typeof ResizeObserver === "undefined") return;
     if (!this.snapPointsRaw.some((p) => p.size === "fit" || p.size === "content"))
@@ -3493,6 +3508,7 @@ function useBottomSheet(opts) {
     if (!sheetRef.value) return;
     const {
       onSnap,
+      teleport,
       teleportTo,
       backdropColor,
       backdropOpacity,
@@ -3507,7 +3523,7 @@ function useBottomSheet(opts) {
       scrim: screenRef.value ?? void 0
     });
     sync();
-    const target = resolveTeleportTarget(teleportTo);
+    const target = teleport === false ? null : resolveTeleportTarget(teleportTo);
     if (target) {
       restoreTeleport = teleportElements(
         [backdropRef.value, screenRef.value, sheetRef.value],
@@ -3772,6 +3788,11 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       required: false,
       default: "body"
     },
+    teleport: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     backdropColor: {
       type: String,
       required: false
@@ -3807,11 +3828,6 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       type: null,
       required: false
     },
-    teleport: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
     anchors: {
       type: Array,
       required: false

package/dist/vue.js

@@ -2926,7 +2926,10 @@ var BottomSheetEngine = class {
     cs.flex = "none";
     if (vertical) cs.height = "auto";
     else cs.width = "auto";
-    const natural = vertical ? el.offsetHeight : el.offsetWidth;
+    const poked = vertical ? el.offsetHeight : el.offsetWidth;
+    const contentBox = vertical ? content.clientHeight : content.clientWidth;
+    const contentScroll = vertical ? content.scrollHeight : content.scrollWidth;
+    const natural = Math.max(poked, poked - contentBox + contentScroll);
     sheetStyle[axis] = prevSheet;
     cs.flex = prevFlex;
     if (vertical) cs.height = prevContent;
@@ -2938,9 +2941,21 @@ var BottomSheetEngine = class {
     const natural = this.measureSheetNatural(vertical);
     const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
     if (typeof window === "undefined") return capped;
-    const viewport = vertical ? window.innerHeight : window.innerWidth;
+    const viewport = this.containingExtent(vertical);
     return viewport > 0 ? Math.min(capped, viewport) : capped;
   }
+  // The fit cap is the sheet's containing block, not always the window: a
+  // position:fixed sheet nested under a transform/filter/will-change ancestor
+  // is clipped to that ancestor, so capping by window.innerHeight oversizes the
+  // sheet and the content/footer get clipped. offsetParent resolves to that
+  // ancestor when present, and is null (→ viewport) for a plain fixed sheet.
+  containingExtent(vertical) {
+    const op = this.element.offsetParent;
+    if (op && op !== document.body && op !== document.documentElement) {
+      return vertical ? op.clientHeight : op.clientWidth;
+    }
+    return vertical ? window.innerHeight : window.innerWidth;
+  }
   installFitObserver() {
     if (typeof ResizeObserver === "undefined") return;
     if (!this.snapPointsRaw.some((p) => p.size === "fit" || p.size === "content"))
@@ -3491,6 +3506,7 @@ function useBottomSheet(opts) {
     if (!sheetRef.value) return;
     const {
       onSnap,
+      teleport,
       teleportTo,
       backdropColor,
       backdropOpacity,
@@ -3505,7 +3521,7 @@ function useBottomSheet(opts) {
       scrim: screenRef.value ?? void 0
     });
     sync();
-    const target = resolveTeleportTarget(teleportTo);
+    const target = teleport === false ? null : resolveTeleportTarget(teleportTo);
     if (target) {
       restoreTeleport = teleportElements(
         [backdropRef.value, screenRef.value, sheetRef.value],
@@ -3770,6 +3786,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       required: false,
       default: "body"
     },
+    teleport: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     backdropColor: {
       type: String,
       required: false
@@ -3805,11 +3826,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       type: null,
       required: false
     },
-    teleport: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
     anchors: {
       type: Array,
       required: false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surdeddd/bottom-sheet",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "Universal, headless bottom sheet — framework-agnostic core with React, Vue 3, Svelte, Solid, Qwik, Preact, Lit and Custom Element adapters. Pointer Events, snap points, momentum, a11y, SSR-safe.",
   "type": "module",
   "license": "MIT",