@surdeddd/bottom-sheet 0.6.1 → 0.8.0

package/dist/solid.js

@@ -2358,6 +2358,7 @@ var BottomSheetEngine = class {
     __publicField(this, "progressWriteSentinel", new WriteSentinel());
     __publicField(this, "isTopSheet", true);
     __publicField(this, "opening", false);
+    __publicField(this, "allowOvershoot", false);
     __publicField(this, "progressPayload", {
       value: 0,
       size: 0
@@ -2648,8 +2649,8 @@ var BottomSheetEngine = class {
     this.updateAriaSlider();
     this.emit("snap", {
       id,
-      size: target.size,
-      progress: this.computeProgress(target.size)
+      size: this.size,
+      progress: this.computeProgress(this.size)
     });
     if (wasClosed && target.size > 0) {
       this.emit("open", { id });
@@ -2728,12 +2729,12 @@ var BottomSheetEngine = class {
     const value = typeof h === "number" ? `${h}px` : h;
     const axis = layoutAxis(this.mode);
     this.element.style.setProperty(
-      axis === "height" ? "maxHeight" : "maxWidth",
+      axis === "height" ? "max-height" : "max-width",
       value
     );
     if (typeof h === "number") {
       this.maxHeightCap = h;
-      this.clampToMaxHeight();
+      this.recompute();
     } else if (typeof window !== "undefined") {
       const probe2 = document.createElement("div");
       probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
@@ -2741,7 +2742,7 @@ var BottomSheetEngine = class {
       const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
       probe2.remove();
       this.maxHeightCap = measured > 0 ? measured : void 0;
-      this.clampToMaxHeight();
+      this.recompute();
     }
   }
   clampToMaxHeight() {
@@ -2749,9 +2750,6 @@ var BottomSheetEngine = class {
     if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
       this.snaps.setMaxAxisSize(this.maxHeightCap);
     }
-    if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
-      this.applySize(this.maxHeightCap);
-    }
   }
   setAllowed(ids, snap) {
     if (this.destroyed) return;
@@ -2889,6 +2887,7 @@ var BottomSheetEngine = class {
   recompute() {
     if (this.destroyed) return;
     this.snaps.recompute();
+    this.clampToMaxHeight();
     this.scrim.invalidateOpacityCache();
     if (this.gesture?.isDragging) return;
     const current = this.snaps.findById(this.activeId);
@@ -2912,43 +2911,36 @@ var BottomSheetEngine = class {
     }
     return out;
   }
-  measureContentExtent(vertical) {
+  measureSheetNatural(vertical) {
+    const el = this.element;
     const content = this.scrollContainer;
-    if (!content) return 0;
-    const targets = this.contentTargets();
-    if (targets.length === 0) {
-      return vertical ? content.scrollHeight : content.scrollWidth;
-    }
-    let min = Infinity;
-    let max = -Infinity;
-    for (const el of targets) {
-      const r = el.getBoundingClientRect();
-      if (vertical) {
-        if (r.top < min) min = r.top;
-        if (r.bottom > max) max = r.bottom;
-      } else {
-        if (r.left < min) min = r.left;
-        if (r.right > max) max = r.right;
-      }
-    }
-    if (!isFinite(min) || !isFinite(max) || max <= min) {
-      return vertical ? content.scrollHeight : content.scrollWidth;
-    }
-    let pad = 0;
-    if (typeof getComputedStyle !== "undefined") {
-      const cs = getComputedStyle(content);
-      pad = vertical ? (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0) : (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
-    }
-    return max - min + pad;
+    if (!content) {
+      return vertical ? el.offsetHeight : el.offsetWidth;
+    }
+    const axis = vertical ? "height" : "width";
+    const sheetStyle = el.style;
+    const cs = content.style;
+    const prevSheet = sheetStyle[axis];
+    const prevFlex = cs.flex;
+    const prevContent = vertical ? cs.height : cs.width;
+    sheetStyle[axis] = "auto";
+    cs.flex = "none";
+    if (vertical) cs.height = "auto";
+    else cs.width = "auto";
+    const natural = vertical ? el.offsetHeight : el.offsetWidth;
+    sheetStyle[axis] = prevSheet;
+    cs.flex = prevFlex;
+    if (vertical) cs.height = prevContent;
+    else cs.width = prevContent;
+    return natural;
   }
   measureFitSize() {
     const vertical = layoutAxis(this.mode) === "height";
-    const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
-    const content = this.scrollContainer;
-    const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
-    if (typeof window === "undefined") return natural;
+    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;
-    return viewport > 0 ? Math.min(natural, viewport) : natural;
+    return viewport > 0 ? Math.min(capped, viewport) : capped;
   }
   installFitObserver() {
     if (typeof ResizeObserver === "undefined") return;
@@ -3030,6 +3022,10 @@ var BottomSheetEngine = class {
       this.backdrop.style.opacity = "";
       this.backdrop.style.pointerEvents = "";
     }
+    if (this.anchorHost) {
+      this.anchorHost.style.removeProperty("--bs-size");
+      this.anchorHost.style.removeProperty("--bs-progress");
+    }
     if (this.screenComponent) {
       this.screenComponent.style.opacity = "";
       this.screenComponent.style.display = "";
@@ -3041,6 +3037,7 @@ var BottomSheetEngine = class {
     this.bus.emit(event, payload);
   }
   newCycle() {
+    this.allowOvershoot = false;
     this.currentAbort.abort();
     this.currentAbort = new AbortController();
     return this.currentAbort.signal;
@@ -3106,6 +3103,7 @@ var BottomSheetEngine = class {
       seen.add(p.id);
     }
     this.snaps.setRaw(this.snapPointsRaw);
+    this.clampToMaxHeight();
     this.scrim.invalidateOpacityCache();
   }
   getAllowedRange() {
@@ -3312,15 +3310,19 @@ var BottomSheetEngine = class {
       this.opening = true;
       sheetStack.promote(this.id);
     }
-    void this.animation.animateTo(target.size, velocity).then(() => {
-      this.opening = false;
+    const settleCap = this.snaps.getMaxAxisSize();
+    const settleSize = settleCap > 0 ? Math.min(target.size, settleCap) : target.size;
+    this.allowOvershoot = true;
+    void this.animation.animateTo(settleSize, velocity).then(() => {
       if (signal.aborted) return;
+      this.allowOvershoot = false;
+      this.opening = false;
       this.scrollCache.restore(target.id, previousSize, target.size);
       this.updateAriaSlider();
       this.emit("snap", {
         id: target.id,
-        size: target.size,
-        progress: this.computeProgress(target.size)
+        size: this.size,
+        progress: this.computeProgress(this.size)
       });
       this.haptic();
       if (previousSnapSize === 0 && target.size > 0) {
@@ -3345,23 +3347,25 @@ var BottomSheetEngine = class {
     }
   }
   applySize(size) {
-    this.size = size;
-    const offset = this.snaps.getMaxAxisSize() - size;
+    const cap = this.snaps.getMaxAxisSize();
+    const clamped = cap > 0 && size > cap && !this.gesture?.isDragging && !this.allowOvershoot ? cap : size;
+    this.size = clamped;
+    const offset = cap - clamped;
     const style = this.element.style;
     style.transform = this.transformTemplate(offset);
-    if (this.sizeWriteSentinel.shouldWrite(size, SIZE_WRITE_EPSILON)) {
-      style.setProperty("--bs-size", `${size}px`);
+    if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
+      style.setProperty("--bs-size", `${clamped}px`);
       if (this.scrimParent) {
-        this.scrimParent.style.setProperty("--bs-size", `${size}px`);
+        this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
       }
       if (this.anchorHost && this.anchorHost !== this.scrimParent) {
-        this.anchorHost.style.setProperty("--bs-size", `${size}px`);
+        this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
       }
       if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
-        this.rootEl.style.setProperty("--bs-size", `${size}px`);
+        this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
       }
     }
-    const progress = this.computeProgress(size);
+    const progress = this.computeProgress(clamped);
     const progressChanged = this.progressWriteSentinel.shouldWrite(
       progress,
       OPACITY_WRITE_EPSILON
@@ -3378,14 +3382,15 @@ var BottomSheetEngine = class {
     this.scrim.applyOpacity(progress, progressChanged);
     if (progressChanged && this.bus.listenerCount("progress") > 0) {
       this.progressPayload.value = progress;
-      this.progressPayload.size = size;
+      this.progressPayload.size = clamped;
       this.emit("progress", this.progressPayload);
     }
   }
   computeProgress(size) {
     const { min, max } = this.getAllowedRange();
-    if (max <= min) return 0;
-    return Math.min(Math.max((size - min) / (max - min), 0), 1);
+    const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
+    if (reachableMax <= min) return 0;
+    return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
   }
   handleOpen() {
     sheetStack.promote(this.id);
@@ -3409,8 +3414,8 @@ var BottomSheetEngine = class {
     this.updateAriaSlider();
     this.emit("snap", {
       id: target.id,
-      size: target.size,
-      progress: this.computeProgress(target.size)
+      size: this.size,
+      progress: this.computeProgress(this.size)
     });
     if (target.size > 0 && !this.lifecycle.isInstalled) {
       this.emit("open", { id: target.id });
@@ -3469,7 +3474,14 @@ var BottomSheet = (props) => {
       closeOnBack: props.closeOnBack,
       lockBodyScroll: props.lockBodyScroll,
       rubberBand: props.rubberBand,
-      backdropRange: props.backdropRange
+      backdropRange: props.backdropRange,
+      radius: props.radius,
+      maxHeight: props.maxHeight,
+      persistent: props.persistent,
+      disableClose: props.disableClose,
+      disableDrag: props.disableDrag,
+      closeOnRouteChange: props.closeOnRouteChange,
+      returnFocusTo: props.returnFocusTo
     };
     engine = new BottomSheetEngine(engineOpts);
     props.engineRef?.(engine);
@@ -3490,7 +3502,7 @@ var BottomSheet = (props) => {
     engine.on("dragend", sync);
     if (props.backdrop !== false && props.closeOnBackdrop !== false && backdropEl) {
       const onBackdropClick = () => {
-        void engine?.close();
+        if (engine?.canDismiss()) void engine.close("backdrop");
       };
       backdropEl.addEventListener("click", onBackdropClick);
       onCleanup(() => {

package/dist/solid.source.jsx

@@ -2359,6 +2359,7 @@ var BottomSheetEngine = class {
   progressWriteSentinel = new WriteSentinel();
   isTopSheet = true;
   opening = false;
+  allowOvershoot = false;
   progressPayload = {
     value: 0,
     size: 0
@@ -2650,8 +2651,8 @@ var BottomSheetEngine = class {
     this.updateAriaSlider();
     this.emit("snap", {
       id,
-      size: target.size,
-      progress: this.computeProgress(target.size)
+      size: this.size,
+      progress: this.computeProgress(this.size)
     });
     if (wasClosed && target.size > 0) {
       this.emit("open", { id });
@@ -2730,12 +2731,12 @@ var BottomSheetEngine = class {
     const value = typeof h === "number" ? `${h}px` : h;
     const axis = layoutAxis(this.mode);
     this.element.style.setProperty(
-      axis === "height" ? "maxHeight" : "maxWidth",
+      axis === "height" ? "max-height" : "max-width",
       value
     );
     if (typeof h === "number") {
       this.maxHeightCap = h;
-      this.clampToMaxHeight();
+      this.recompute();
     } else if (typeof window !== "undefined") {
       const probe2 = document.createElement("div");
       probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
@@ -2743,7 +2744,7 @@ var BottomSheetEngine = class {
       const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
       probe2.remove();
       this.maxHeightCap = measured > 0 ? measured : void 0;
-      this.clampToMaxHeight();
+      this.recompute();
     }
   }
   clampToMaxHeight() {
@@ -2751,9 +2752,6 @@ var BottomSheetEngine = class {
     if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
       this.snaps.setMaxAxisSize(this.maxHeightCap);
     }
-    if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
-      this.applySize(this.maxHeightCap);
-    }
   }
   setAllowed(ids, snap) {
     if (this.destroyed) return;
@@ -2891,6 +2889,7 @@ var BottomSheetEngine = class {
   recompute() {
     if (this.destroyed) return;
     this.snaps.recompute();
+    this.clampToMaxHeight();
     this.scrim.invalidateOpacityCache();
     if (this.gesture?.isDragging) return;
     const current = this.snaps.findById(this.activeId);
@@ -2914,43 +2913,36 @@ var BottomSheetEngine = class {
     }
     return out;
   }
-  measureContentExtent(vertical) {
+  measureSheetNatural(vertical) {
+    const el = this.element;
     const content = this.scrollContainer;
-    if (!content) return 0;
-    const targets = this.contentTargets();
-    if (targets.length === 0) {
-      return vertical ? content.scrollHeight : content.scrollWidth;
-    }
-    let min = Infinity;
-    let max = -Infinity;
-    for (const el of targets) {
-      const r = el.getBoundingClientRect();
-      if (vertical) {
-        if (r.top < min) min = r.top;
-        if (r.bottom > max) max = r.bottom;
-      } else {
-        if (r.left < min) min = r.left;
-        if (r.right > max) max = r.right;
-      }
-    }
-    if (!isFinite(min) || !isFinite(max) || max <= min) {
-      return vertical ? content.scrollHeight : content.scrollWidth;
-    }
-    let pad = 0;
-    if (typeof getComputedStyle !== "undefined") {
-      const cs = getComputedStyle(content);
-      pad = vertical ? (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0) : (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
-    }
-    return max - min + pad;
+    if (!content) {
+      return vertical ? el.offsetHeight : el.offsetWidth;
+    }
+    const axis = vertical ? "height" : "width";
+    const sheetStyle = el.style;
+    const cs = content.style;
+    const prevSheet = sheetStyle[axis];
+    const prevFlex = cs.flex;
+    const prevContent = vertical ? cs.height : cs.width;
+    sheetStyle[axis] = "auto";
+    cs.flex = "none";
+    if (vertical) cs.height = "auto";
+    else cs.width = "auto";
+    const natural = vertical ? el.offsetHeight : el.offsetWidth;
+    sheetStyle[axis] = prevSheet;
+    cs.flex = prevFlex;
+    if (vertical) cs.height = prevContent;
+    else cs.width = prevContent;
+    return natural;
   }
   measureFitSize() {
     const vertical = layoutAxis(this.mode) === "height";
-    const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
-    const content = this.scrollContainer;
-    const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
-    if (typeof window === "undefined") return natural;
+    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;
-    return viewport > 0 ? Math.min(natural, viewport) : natural;
+    return viewport > 0 ? Math.min(capped, viewport) : capped;
   }
   installFitObserver() {
     if (typeof ResizeObserver === "undefined") return;
@@ -3032,6 +3024,10 @@ var BottomSheetEngine = class {
       this.backdrop.style.opacity = "";
       this.backdrop.style.pointerEvents = "";
     }
+    if (this.anchorHost) {
+      this.anchorHost.style.removeProperty("--bs-size");
+      this.anchorHost.style.removeProperty("--bs-progress");
+    }
     if (this.screenComponent) {
       this.screenComponent.style.opacity = "";
       this.screenComponent.style.display = "";
@@ -3043,6 +3039,7 @@ var BottomSheetEngine = class {
     this.bus.emit(event, payload);
   }
   newCycle() {
+    this.allowOvershoot = false;
     this.currentAbort.abort();
     this.currentAbort = new AbortController();
     return this.currentAbort.signal;
@@ -3108,6 +3105,7 @@ var BottomSheetEngine = class {
       seen.add(p.id);
     }
     this.snaps.setRaw(this.snapPointsRaw);
+    this.clampToMaxHeight();
     this.scrim.invalidateOpacityCache();
   }
   getAllowedRange() {
@@ -3314,15 +3312,19 @@ var BottomSheetEngine = class {
       this.opening = true;
       sheetStack.promote(this.id);
     }
-    void this.animation.animateTo(target.size, velocity).then(() => {
-      this.opening = false;
+    const settleCap = this.snaps.getMaxAxisSize();
+    const settleSize = settleCap > 0 ? Math.min(target.size, settleCap) : target.size;
+    this.allowOvershoot = true;
+    void this.animation.animateTo(settleSize, velocity).then(() => {
       if (signal.aborted) return;
+      this.allowOvershoot = false;
+      this.opening = false;
       this.scrollCache.restore(target.id, previousSize, target.size);
       this.updateAriaSlider();
       this.emit("snap", {
         id: target.id,
-        size: target.size,
-        progress: this.computeProgress(target.size)
+        size: this.size,
+        progress: this.computeProgress(this.size)
       });
       this.haptic();
       if (previousSnapSize === 0 && target.size > 0) {
@@ -3347,23 +3349,25 @@ var BottomSheetEngine = class {
     }
   }
   applySize(size) {
-    this.size = size;
-    const offset = this.snaps.getMaxAxisSize() - size;
+    const cap = this.snaps.getMaxAxisSize();
+    const clamped = cap > 0 && size > cap && !this.gesture?.isDragging && !this.allowOvershoot ? cap : size;
+    this.size = clamped;
+    const offset = cap - clamped;
     const style = this.element.style;
     style.transform = this.transformTemplate(offset);
-    if (this.sizeWriteSentinel.shouldWrite(size, SIZE_WRITE_EPSILON)) {
-      style.setProperty("--bs-size", `${size}px`);
+    if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
+      style.setProperty("--bs-size", `${clamped}px`);
       if (this.scrimParent) {
-        this.scrimParent.style.setProperty("--bs-size", `${size}px`);
+        this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
       }
       if (this.anchorHost && this.anchorHost !== this.scrimParent) {
-        this.anchorHost.style.setProperty("--bs-size", `${size}px`);
+        this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
       }
       if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
-        this.rootEl.style.setProperty("--bs-size", `${size}px`);
+        this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
       }
     }
-    const progress = this.computeProgress(size);
+    const progress = this.computeProgress(clamped);
     const progressChanged = this.progressWriteSentinel.shouldWrite(
       progress,
       OPACITY_WRITE_EPSILON
@@ -3380,14 +3384,15 @@ var BottomSheetEngine = class {
     this.scrim.applyOpacity(progress, progressChanged);
     if (progressChanged && this.bus.listenerCount("progress") > 0) {
       this.progressPayload.value = progress;
-      this.progressPayload.size = size;
+      this.progressPayload.size = clamped;
       this.emit("progress", this.progressPayload);
     }
   }
   computeProgress(size) {
     const { min, max } = this.getAllowedRange();
-    if (max <= min) return 0;
-    return Math.min(Math.max((size - min) / (max - min), 0), 1);
+    const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
+    if (reachableMax <= min) return 0;
+    return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
   }
   handleOpen() {
     sheetStack.promote(this.id);
@@ -3411,8 +3416,8 @@ var BottomSheetEngine = class {
     this.updateAriaSlider();
     this.emit("snap", {
       id: target.id,
-      size: target.size,
-      progress: this.computeProgress(target.size)
+      size: this.size,
+      progress: this.computeProgress(this.size)
     });
     if (target.size > 0 && !this.lifecycle.isInstalled) {
       this.emit("open", { id: target.id });
@@ -3467,7 +3472,14 @@ var BottomSheet = (props) => {
       closeOnBack: props.closeOnBack,
       lockBodyScroll: props.lockBodyScroll,
       rubberBand: props.rubberBand,
-      backdropRange: props.backdropRange
+      backdropRange: props.backdropRange,
+      radius: props.radius,
+      maxHeight: props.maxHeight,
+      persistent: props.persistent,
+      disableClose: props.disableClose,
+      disableDrag: props.disableDrag,
+      closeOnRouteChange: props.closeOnRouteChange,
+      returnFocusTo: props.returnFocusTo
     };
     engine = new BottomSheetEngine(engineOpts);
     props.engineRef?.(engine);
@@ -3486,7 +3498,7 @@ var BottomSheet = (props) => {
     engine.on("dragend", sync);
     if (props.backdrop !== false && props.closeOnBackdrop !== false && backdropEl) {
       const onBackdropClick = () => {
-        void engine?.close();
+        if (engine?.canDismiss()) void engine.close("backdrop");
       };
       backdropEl.addEventListener("click", onBackdropClick);
       onCleanup(() => {

package/dist/styles.css

@@ -118,7 +118,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 8px 16px 4px;
+  padding: var(--bs-handle-padding, 8px 16px 4px);
   cursor: grab;
   touch-action: none;
   user-select: none;
@@ -246,7 +246,7 @@
 
 .bs-header {
   flex: 0 0 auto;
-  padding: 0 16px 8px;
+  padding: var(--bs-header-padding, 0 16px 8px);
   background: var(--bs-surface, var(--bs-surface-d));
 }
 
@@ -257,12 +257,12 @@
   -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain;
   user-select: text;
-  padding: 0 16px 16px;
+  padding: var(--bs-content-padding, 0 16px 16px);
 }
 
 .bs-footer {
   flex: 0 0 auto;
-  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
+  padding: var(--bs-footer-padding, 12px 16px calc(12px + env(safe-area-inset-bottom)));
   border-top: 1px solid var(--bs-surface-border, var(--bs-surface-border-d));
   background: var(--bs-surface, var(--bs-surface-d));
 }