@surdeddd/bottom-sheet 0.20.2 → 0.21.1

package/dist/react.cjs

@@ -784,7 +784,6 @@ var ScrimController = class {
     __publicField(this, "backdrop");
     __publicField(this, "mode");
     __publicField(this, "isDestroyed");
-    __publicField(this, "isTopSheet");
     __publicField(this, "getAllowedIds");
     __publicField(this, "getResolvedSnaps");
     __publicField(this, "snapToFn");
@@ -806,7 +805,6 @@ var ScrimController = class {
     this.backdrop = deps.backdrop;
     this.mode = deps.mode;
     this.isDestroyed = deps.isDestroyed;
-    this.isTopSheet = deps.isTopSheet;
     this.getAllowedIds = deps.getAllowedIds;
     this.getResolvedSnaps = deps.getResolvedSnaps;
     this.snapToFn = deps.snapTo;
@@ -855,18 +853,16 @@ var ScrimController = class {
         Math.max((progress - s) / range, 0),
         1
       );
-      if (this.isTopSheet() || backdropOpacity === 0) {
-        if (this.backdropOpacitySentinel.shouldWrite(
-          backdropOpacity,
-          OPACITY_WRITE_EPSILON
-        )) {
-          this.backdrop.style.opacity = String(backdropOpacity);
-        }
-        const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
-        if (nextPointer !== this.lastBackdropPointer) {
-          this.backdrop.style.pointerEvents = nextPointer;
-          this.lastBackdropPointer = nextPointer;
-        }
+      if (this.backdropOpacitySentinel.shouldWrite(
+        backdropOpacity,
+        OPACITY_WRITE_EPSILON
+      )) {
+        this.backdrop.style.opacity = String(backdropOpacity);
+      }
+      const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
+      if (nextPointer !== this.lastBackdropPointer) {
+        this.backdrop.style.pointerEvents = nextPointer;
+        this.lastBackdropPointer = nextPointer;
       }
     }
     if (this.screenComponent && this.scrimMode !== "off") {
@@ -1396,18 +1392,20 @@ var AnimationRunner = class {
   get isAnimating() {
     return this.currentTween !== null || this.currentSpring !== null || this.currentWaapi !== null;
   }
+  cancelWaapi() {
+    if (!this.currentWaapi) return;
+    const entry = this.currentWaapi;
+    this.currentWaapi = null;
+    entry.stop();
+    try {
+      entry.anim.cancel();
+    } catch {
+    }
+  }
   cancel() {
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
-    if (this.currentWaapi) {
-      const entry = this.currentWaapi;
-      this.currentWaapi = null;
-      entry.stop();
-      try {
-        entry.anim.cancel();
-      } catch {
-      }
-    }
+    this.cancelWaapi();
   }
   async animateTo(target, velocityPxPerMs) {
     if (target === this.getSize()) {
@@ -1418,6 +1416,7 @@ var AnimationRunner = class {
     }
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
+    this.cancelWaapi();
     this.getRootEl()?.setAttribute("data-animating", "true");
     this.element.style.willChange = "transform";
     if (this.reducedMotion) {
@@ -2628,6 +2627,7 @@ var BottomSheetCore = class {
     __publicField(this, "progressWriteSentinel", new WriteSentinel());
     __publicField(this, "isTopSheet", true);
     __publicField(this, "opening", false);
+    __publicField(this, "promotedForOpen", false);
     __publicField(this, "allowOvershoot", false);
     __publicField(this, "progressPayload", {
       value: 0,
@@ -2684,7 +2684,6 @@ var BottomSheetCore = class {
         screenComponent: this.screenComponent,
         backdrop: this.backdrop,
         isDestroyed: () => this.destroyed,
-        isTopSheet: () => this.isTopSheet,
         getAllowedIds: () => this.snaps.getAllowedIds().slice(),
         getResolvedSnaps: () => this.snaps.getResolvedSnaps().slice(),
         snapTo: (id) => {
@@ -2954,13 +2953,14 @@ var BottomSheetCore = class {
     if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
       return;
     }
+    const resumingOpen = this.opening;
     const signal = this.newCycle();
     const onExternalAbort = () => {
       this.animation.cancel();
       this.newCycle();
     };
     externalSignal?.addEventListener("abort", onExternalAbort, { once: true });
-    const wasClosed = this.size === 0;
+    const wasClosed = this.size === 0 || resumingOpen;
     const previousId = this.activeId;
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
@@ -2969,7 +2969,10 @@ var BottomSheetCore = class {
     const opensToRest = id === "closed" || rawTargetSize === 0;
     if (wasClosed && !opensToRest) {
       this.opening = true;
-      sheetStack.promote(this.id);
+      if (!resumingOpen) {
+        this.promotedForOpen = true;
+        sheetStack.promote(this.id);
+      }
     }
     if (this.animation.viewTransitionsAvailable) {
       this.currentViewTransition?.skipTransition?.();
@@ -3660,6 +3663,7 @@ var BottomSheetCore = class {
     this.activeId = target.id;
     if (previousSnapSize === 0 && target.size > 0) {
       this.opening = true;
+      this.promotedForOpen = true;
       sheetStack.promote(this.id);
     }
     const settleCap = this.snaps.getMaxAxisSize();
@@ -3741,7 +3745,8 @@ var BottomSheetCore = class {
     return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
   }
   handleOpen() {
-    sheetStack.promote(this.id);
+    if (this.promotedForOpen) this.promotedForOpen = false;
+    else sheetStack.promote(this.id);
     try {
       this.lifecycle.install();
     } catch (err) {
@@ -3773,6 +3778,7 @@ var BottomSheetCore = class {
   }
   handleClose() {
     this.opening = false;
+    this.promotedForOpen = false;
     this.lifecycle.release();
     sheetStack.update();
   }
@@ -4667,6 +4673,11 @@ var BottomSheet = react.forwardRef(
     react.useEffect(() => {
       onChange?.(state);
     }, [state, onChange]);
+    const mode = engineOpts.mode;
+    react.useEffect(() => {
+      if (mode === void 0) return;
+      getEngine()?.setMode(mode);
+    }, [getEngine, mode]);
     const [anchorHosts, setAnchorHosts] = react.useState([]);
     const anchorsKey = anchors ? JSON.stringify(
       anchors.map((a) => [

package/dist/react.d.cts

@@ -1,10 +1,10 @@
-import { c as EngineOptions, E as EngineState, A as AnchorOptions, e as ScrimStagesOptions, u as ScrimStageDef, S as SheetEventMap, C as CloseReason, v as ScrimUpdate, r as ScrimOverlayOptions, a as SnapPointDef, b as SheetMode } from './BottomSheetCore-VPJZcKcg.cjs';
-export { d as SnapPoint } from './BottomSheetCore-VPJZcKcg.cjs';
+import { c as EngineOptions, E as EngineState, A as AnchorOptions, e as ScrimStagesOptions, u as ScrimStageDef, S as SheetEventMap, C as CloseReason, v as ScrimUpdate, r as ScrimOverlayOptions, a as SnapPointDef, b as SheetMode } from './BottomSheetCore-BHv6LPmS.cjs';
+export { d as SnapPoint } from './BottomSheetCore-BHv6LPmS.cjs';
 import { OverlayOptions, OverlayState, Overlay as OverlayEngine } from './overlay.cjs';
 export { OverlayEdge } from './overlay.cjs';
 import * as react from 'react';
 import { CSSProperties, ReactNode } from 'react';
-import { B as BottomSheetEngine } from './BottomSheetEngine-B8C2CwF9.cjs';
+import { B as BottomSheetEngine } from './BottomSheetEngine-mmFzIK1Z.cjs';
 import { T as TeleportTarget } from './teleport-7uYNiEAT.cjs';
 import './transform-jVfAikE9.cjs';
 

package/dist/react.d.ts

@@ -1,10 +1,10 @@
-import { c as EngineOptions, E as EngineState, A as AnchorOptions, e as ScrimStagesOptions, u as ScrimStageDef, S as SheetEventMap, C as CloseReason, v as ScrimUpdate, r as ScrimOverlayOptions, a as SnapPointDef, b as SheetMode } from './BottomSheetCore-Cgn8b_6A.js';
-export { d as SnapPoint } from './BottomSheetCore-Cgn8b_6A.js';
+import { c as EngineOptions, E as EngineState, A as AnchorOptions, e as ScrimStagesOptions, u as ScrimStageDef, S as SheetEventMap, C as CloseReason, v as ScrimUpdate, r as ScrimOverlayOptions, a as SnapPointDef, b as SheetMode } from './BottomSheetCore-CK_mq14p.js';
+export { d as SnapPoint } from './BottomSheetCore-CK_mq14p.js';
 import { OverlayOptions, OverlayState, Overlay as OverlayEngine } from './overlay.js';
 export { OverlayEdge } from './overlay.js';
 import * as react from 'react';
 import { CSSProperties, ReactNode } from 'react';
-import { B as BottomSheetEngine } from './BottomSheetEngine-DwYR_ygJ.js';
+import { B as BottomSheetEngine } from './BottomSheetEngine-wLn6Q2kA.js';
 import { T as TeleportTarget } from './teleport-7uYNiEAT.js';
 import './transform-jVfAikE9.js';
 

package/dist/react.js

@@ -782,7 +782,6 @@ var ScrimController = class {
     __publicField(this, "backdrop");
     __publicField(this, "mode");
     __publicField(this, "isDestroyed");
-    __publicField(this, "isTopSheet");
     __publicField(this, "getAllowedIds");
     __publicField(this, "getResolvedSnaps");
     __publicField(this, "snapToFn");
@@ -804,7 +803,6 @@ var ScrimController = class {
     this.backdrop = deps.backdrop;
     this.mode = deps.mode;
     this.isDestroyed = deps.isDestroyed;
-    this.isTopSheet = deps.isTopSheet;
     this.getAllowedIds = deps.getAllowedIds;
     this.getResolvedSnaps = deps.getResolvedSnaps;
     this.snapToFn = deps.snapTo;
@@ -853,18 +851,16 @@ var ScrimController = class {
         Math.max((progress - s) / range, 0),
         1
       );
-      if (this.isTopSheet() || backdropOpacity === 0) {
-        if (this.backdropOpacitySentinel.shouldWrite(
-          backdropOpacity,
-          OPACITY_WRITE_EPSILON
-        )) {
-          this.backdrop.style.opacity = String(backdropOpacity);
-        }
-        const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
-        if (nextPointer !== this.lastBackdropPointer) {
-          this.backdrop.style.pointerEvents = nextPointer;
-          this.lastBackdropPointer = nextPointer;
-        }
+      if (this.backdropOpacitySentinel.shouldWrite(
+        backdropOpacity,
+        OPACITY_WRITE_EPSILON
+      )) {
+        this.backdrop.style.opacity = String(backdropOpacity);
+      }
+      const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
+      if (nextPointer !== this.lastBackdropPointer) {
+        this.backdrop.style.pointerEvents = nextPointer;
+        this.lastBackdropPointer = nextPointer;
       }
     }
     if (this.screenComponent && this.scrimMode !== "off") {
@@ -1394,18 +1390,20 @@ var AnimationRunner = class {
   get isAnimating() {
     return this.currentTween !== null || this.currentSpring !== null || this.currentWaapi !== null;
   }
+  cancelWaapi() {
+    if (!this.currentWaapi) return;
+    const entry = this.currentWaapi;
+    this.currentWaapi = null;
+    entry.stop();
+    try {
+      entry.anim.cancel();
+    } catch {
+    }
+  }
   cancel() {
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
-    if (this.currentWaapi) {
-      const entry = this.currentWaapi;
-      this.currentWaapi = null;
-      entry.stop();
-      try {
-        entry.anim.cancel();
-      } catch {
-      }
-    }
+    this.cancelWaapi();
   }
   async animateTo(target, velocityPxPerMs) {
     if (target === this.getSize()) {
@@ -1416,6 +1414,7 @@ var AnimationRunner = class {
     }
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
+    this.cancelWaapi();
     this.getRootEl()?.setAttribute("data-animating", "true");
     this.element.style.willChange = "transform";
     if (this.reducedMotion) {
@@ -2626,6 +2625,7 @@ var BottomSheetCore = class {
     __publicField(this, "progressWriteSentinel", new WriteSentinel());
     __publicField(this, "isTopSheet", true);
     __publicField(this, "opening", false);
+    __publicField(this, "promotedForOpen", false);
     __publicField(this, "allowOvershoot", false);
     __publicField(this, "progressPayload", {
       value: 0,
@@ -2682,7 +2682,6 @@ var BottomSheetCore = class {
         screenComponent: this.screenComponent,
         backdrop: this.backdrop,
         isDestroyed: () => this.destroyed,
-        isTopSheet: () => this.isTopSheet,
         getAllowedIds: () => this.snaps.getAllowedIds().slice(),
         getResolvedSnaps: () => this.snaps.getResolvedSnaps().slice(),
         snapTo: (id) => {
@@ -2952,13 +2951,14 @@ var BottomSheetCore = class {
     if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
       return;
     }
+    const resumingOpen = this.opening;
     const signal = this.newCycle();
     const onExternalAbort = () => {
       this.animation.cancel();
       this.newCycle();
     };
     externalSignal?.addEventListener("abort", onExternalAbort, { once: true });
-    const wasClosed = this.size === 0;
+    const wasClosed = this.size === 0 || resumingOpen;
     const previousId = this.activeId;
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
@@ -2967,7 +2967,10 @@ var BottomSheetCore = class {
     const opensToRest = id === "closed" || rawTargetSize === 0;
     if (wasClosed && !opensToRest) {
       this.opening = true;
-      sheetStack.promote(this.id);
+      if (!resumingOpen) {
+        this.promotedForOpen = true;
+        sheetStack.promote(this.id);
+      }
     }
     if (this.animation.viewTransitionsAvailable) {
       this.currentViewTransition?.skipTransition?.();
@@ -3658,6 +3661,7 @@ var BottomSheetCore = class {
     this.activeId = target.id;
     if (previousSnapSize === 0 && target.size > 0) {
       this.opening = true;
+      this.promotedForOpen = true;
       sheetStack.promote(this.id);
     }
     const settleCap = this.snaps.getMaxAxisSize();
@@ -3739,7 +3743,8 @@ var BottomSheetCore = class {
     return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
   }
   handleOpen() {
-    sheetStack.promote(this.id);
+    if (this.promotedForOpen) this.promotedForOpen = false;
+    else sheetStack.promote(this.id);
     try {
       this.lifecycle.install();
     } catch (err) {
@@ -3771,6 +3776,7 @@ var BottomSheetCore = class {
   }
   handleClose() {
     this.opening = false;
+    this.promotedForOpen = false;
     this.lifecycle.release();
     sheetStack.update();
   }
@@ -4665,6 +4671,11 @@ var BottomSheet = forwardRef(
     useEffect(() => {
       onChange?.(state);
     }, [state, onChange]);
+    const mode = engineOpts.mode;
+    useEffect(() => {
+      if (mode === void 0) return;
+      getEngine()?.setMode(mode);
+    }, [getEngine, mode]);
     const [anchorHosts, setAnchorHosts] = useState([]);
     const anchorsKey = anchors ? JSON.stringify(
       anchors.map((a) => [

package/dist/solid.cjs

@@ -777,7 +777,6 @@ var ScrimController = class {
     __publicField(this, "backdrop");
     __publicField(this, "mode");
     __publicField(this, "isDestroyed");
-    __publicField(this, "isTopSheet");
     __publicField(this, "getAllowedIds");
     __publicField(this, "getResolvedSnaps");
     __publicField(this, "snapToFn");
@@ -799,7 +798,6 @@ var ScrimController = class {
     this.backdrop = deps.backdrop;
     this.mode = deps.mode;
     this.isDestroyed = deps.isDestroyed;
-    this.isTopSheet = deps.isTopSheet;
     this.getAllowedIds = deps.getAllowedIds;
     this.getResolvedSnaps = deps.getResolvedSnaps;
     this.snapToFn = deps.snapTo;
@@ -848,18 +846,16 @@ var ScrimController = class {
         Math.max((progress - s) / range, 0),
         1
       );
-      if (this.isTopSheet() || backdropOpacity === 0) {
-        if (this.backdropOpacitySentinel.shouldWrite(
-          backdropOpacity,
-          OPACITY_WRITE_EPSILON
-        )) {
-          this.backdrop.style.opacity = String(backdropOpacity);
-        }
-        const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
-        if (nextPointer !== this.lastBackdropPointer) {
-          this.backdrop.style.pointerEvents = nextPointer;
-          this.lastBackdropPointer = nextPointer;
-        }
+      if (this.backdropOpacitySentinel.shouldWrite(
+        backdropOpacity,
+        OPACITY_WRITE_EPSILON
+      )) {
+        this.backdrop.style.opacity = String(backdropOpacity);
+      }
+      const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
+      if (nextPointer !== this.lastBackdropPointer) {
+        this.backdrop.style.pointerEvents = nextPointer;
+        this.lastBackdropPointer = nextPointer;
       }
     }
     if (this.screenComponent && this.scrimMode !== "off") {
@@ -1389,18 +1385,20 @@ var AnimationRunner = class {
   get isAnimating() {
     return this.currentTween !== null || this.currentSpring !== null || this.currentWaapi !== null;
   }
+  cancelWaapi() {
+    if (!this.currentWaapi) return;
+    const entry = this.currentWaapi;
+    this.currentWaapi = null;
+    entry.stop();
+    try {
+      entry.anim.cancel();
+    } catch {
+    }
+  }
   cancel() {
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
-    if (this.currentWaapi) {
-      const entry = this.currentWaapi;
-      this.currentWaapi = null;
-      entry.stop();
-      try {
-        entry.anim.cancel();
-      } catch {
-      }
-    }
+    this.cancelWaapi();
   }
   async animateTo(target, velocityPxPerMs) {
     if (target === this.getSize()) {
@@ -1411,6 +1409,7 @@ var AnimationRunner = class {
     }
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
+    this.cancelWaapi();
     this.getRootEl()?.setAttribute("data-animating", "true");
     this.element.style.willChange = "transform";
     if (this.reducedMotion) {
@@ -2621,6 +2620,7 @@ var BottomSheetCore = class {
     __publicField(this, "progressWriteSentinel", new WriteSentinel());
     __publicField(this, "isTopSheet", true);
     __publicField(this, "opening", false);
+    __publicField(this, "promotedForOpen", false);
     __publicField(this, "allowOvershoot", false);
     __publicField(this, "progressPayload", {
       value: 0,
@@ -2677,7 +2677,6 @@ var BottomSheetCore = class {
         screenComponent: this.screenComponent,
         backdrop: this.backdrop,
         isDestroyed: () => this.destroyed,
-        isTopSheet: () => this.isTopSheet,
         getAllowedIds: () => this.snaps.getAllowedIds().slice(),
         getResolvedSnaps: () => this.snaps.getResolvedSnaps().slice(),
         snapTo: (id) => {
@@ -2947,13 +2946,14 @@ var BottomSheetCore = class {
     if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
       return;
     }
+    const resumingOpen = this.opening;
     const signal = this.newCycle();
     const onExternalAbort = () => {
       this.animation.cancel();
       this.newCycle();
     };
     externalSignal?.addEventListener("abort", onExternalAbort, { once: true });
-    const wasClosed = this.size === 0;
+    const wasClosed = this.size === 0 || resumingOpen;
     const previousId = this.activeId;
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
@@ -2962,7 +2962,10 @@ var BottomSheetCore = class {
     const opensToRest = id === "closed" || rawTargetSize === 0;
     if (wasClosed && !opensToRest) {
       this.opening = true;
-      sheetStack.promote(this.id);
+      if (!resumingOpen) {
+        this.promotedForOpen = true;
+        sheetStack.promote(this.id);
+      }
     }
     if (this.animation.viewTransitionsAvailable) {
       this.currentViewTransition?.skipTransition?.();
@@ -3653,6 +3656,7 @@ var BottomSheetCore = class {
     this.activeId = target.id;
     if (previousSnapSize === 0 && target.size > 0) {
       this.opening = true;
+      this.promotedForOpen = true;
       sheetStack.promote(this.id);
     }
     const settleCap = this.snaps.getMaxAxisSize();
@@ -3734,7 +3738,8 @@ var BottomSheetCore = class {
     return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
   }
   handleOpen() {
-    sheetStack.promote(this.id);
+    if (this.promotedForOpen) this.promotedForOpen = false;
+    else sheetStack.promote(this.id);
     try {
       this.lifecycle.install();
     } catch (err) {
@@ -3766,6 +3771,7 @@ var BottomSheetCore = class {
   }
   handleClose() {
     this.opening = false;
+    this.promotedForOpen = false;
     this.lifecycle.release();
     sheetStack.update();
   }
@@ -4417,6 +4423,12 @@ var BottomSheet = (props) => {
   }, {
     defer: true
   }));
+  solidJs.createEffect(solidJs.on(() => props.mode, (value, prev) => {
+    if (!engine || prev === void 0 || value === void 0) return;
+    engine.setMode(value);
+  }, {
+    defer: true
+  }));
   const showBackdrop = solidJs.createMemo(() => props.backdrop !== false);
   const mode = solidJs.createMemo(() => props.mode ?? "bottom");
   const ariaLabel = solidJs.createMemo(() => props.ariaLabel ?? "Bottom sheet");

package/dist/solid.d.cts

@@ -285,6 +285,7 @@ declare class BottomSheetCore {
     private progressWriteSentinel;
     private isTopSheet;
     private opening;
+    private promotedForOpen;
     private allowOvershoot;
     private progressPayload;
     private dragContextBuf;

package/dist/solid.d.ts

@@ -285,6 +285,7 @@ declare class BottomSheetCore {
     private progressWriteSentinel;
     private isTopSheet;
     private opening;
+    private promotedForOpen;
     private allowOvershoot;
     private progressPayload;
     private dragContextBuf;