@surdeddd/bottom-sheet 0.9.1 → 0.11.0

package/dist/overlay.js

@@ -118,6 +118,13 @@ var resolveSnap = (point, mode, measureFit) => {
   }
 };
 
+// src/core/primitives/devWarn.ts
+function devWarn(...args) {
+  if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" && typeof console !== "undefined") {
+    console.warn(...args);
+  }
+}
+
 // src/core/primitives/instance-id.ts
 var counters = {};
 function nextInstanceId(prefix) {
@@ -520,7 +527,147 @@ function installOverlaySwipe(deps) {
   };
 }
 
-// src/core/overlay.ts
+// src/core/features/history-coordinator.ts
+var entries = [];
+var subscribers = /* @__PURE__ */ new Set();
+var suppress = 0;
+var pendingRebrand = null;
+var listenerInstalled = false;
+var hasWindow = () => typeof window !== "undefined";
+var hasHistory = () => typeof history !== "undefined";
+var runInternal = (fn) => {
+  try {
+    fn();
+  } finally {
+  }
+};
+var notifyRouteChange = () => {
+  const snapshot = Array.from(subscribers);
+  for (const fn of snapshot) fn();
+};
+var ensureListener = () => {
+  if (listenerInstalled || !hasWindow()) return;
+  window.addEventListener("popstate", onPopState);
+  listenerInstalled = true;
+};
+var maybeTeardownListener = () => {
+  if (!listenerInstalled) return;
+  if (entries.length > 0 || subscribers.size > 0 || suppress > 0) return;
+  if (hasWindow()) window.removeEventListener("popstate", onPopState);
+  listenerInstalled = false;
+};
+function onPopState() {
+  if (suppress > 0) {
+    suppress -= 1;
+    const rebrand = pendingRebrand;
+    pendingRebrand = null;
+    if (rebrand) rebrand();
+    maybeTeardownListener();
+    return;
+  }
+  if (entries.length === 0) {
+    notifyRouteChange();
+    maybeTeardownListener();
+    return;
+  }
+  let target = null;
+  let targetIdx = -1;
+  for (let i = entries.length - 1; i >= 0; i -= 1) {
+    const entry = entries[i];
+    if (!entry.surface.isOpen()) continue;
+    if (!target) {
+      target = entry;
+      targetIdx = i;
+    }
+    if (entry.surface.isTop()) {
+      target = entry;
+      targetIdx = i;
+      break;
+    }
+  }
+  if (!target) {
+    const removed = entries.pop();
+    if (removed) removed.live = false;
+    maybeTeardownListener();
+    return;
+  }
+  target.live = false;
+  entries.splice(targetIdx, 1);
+  const settled = target;
+  void Promise.resolve(settled.surface.close()).then(() => {
+    if (settled.surface.isOpen()) restore(settled);
+  });
+  maybeTeardownListener();
+}
+function restore(entry) {
+  if (!hasWindow() || !hasHistory()) return;
+  entry.live = true;
+  runInternal(() => {
+    try {
+      history.pushState(entry.surface.markerState(), "", entry.surface.url);
+    } catch {
+      entry.live = false;
+    }
+  });
+  if (entry.live) {
+    entries.push(entry);
+    ensureListener();
+  }
+}
+function pushBackMarker(surface) {
+  const entry = { surface, priorUrl: void 0, live: false };
+  if (!hasWindow() || !hasHistory()) {
+    return entry;
+  }
+  entry.priorUrl = surface.url !== void 0 ? location.href : void 0;
+  runInternal(() => {
+    try {
+      history.pushState(surface.markerState(), "", surface.url);
+      entry.live = true;
+    } catch {
+      entry.live = false;
+    }
+  });
+  if (entry.live) {
+    entries.push(entry);
+    ensureListener();
+  }
+  return entry;
+}
+function popBackMarker(handle) {
+  if (!hasWindow() || !hasHistory()) return;
+  const entry = handle;
+  const idx = entries.indexOf(entry);
+  if (idx === -1 || !entry.live) return;
+  const last = entries.length - 1;
+  entry.live = false;
+  entries.splice(idx, 1);
+  if (idx !== last) {
+    const rebrandSurface = entries[entries.length - 1].surface;
+    const rebrandUrl = entry.priorUrl;
+    pendingRebrand = () => {
+      runInternal(() => {
+        history.replaceState(
+          rebrandSurface.markerState(),
+          "",
+          rebrandUrl !== void 0 ? rebrandUrl : location.href
+        );
+      });
+    };
+  }
+  suppress += 1;
+  runInternal(() => {
+    try {
+      history.back();
+    } catch {
+      suppress = Math.max(0, suppress - 1);
+      pendingRebrand = null;
+    }
+  });
+  maybeTeardownListener();
+}
+
+// src/core/overlay-options.ts
 var OVERLAY_PRESETS = Object.freeze({
   sheet: Object.freeze({
     enterAnimation: "slide",
@@ -551,6 +698,8 @@ var OVERLAY_PRESETS = Object.freeze({
     swipeToClose: false
   })
 });
+
+// src/core/overlay.ts
 var OverlayEngine = class {
   constructor(opts) {
     __publicField(this, "id", nextInstanceId("ovl"));
@@ -585,7 +734,7 @@ var OverlayEngine = class {
     __publicField(this, "detachSwipe", null);
     __publicField(this, "respectReducedMotionEnabled");
     __publicField(this, "isTop", true);
-    __publicField(this, "backPushed", false);
+    __publicField(this, "backMarker", null);
     __publicField(this, "movedToTarget", false);
     __publicField(this, "onOpenCb");
     __publicField(this, "onCloseCb");
@@ -597,7 +746,6 @@ var OverlayEngine = class {
     __publicField(this, "bus", createEventBus());
     __publicField(this, "detachEscape", null);
     __publicField(this, "detachBackdrop", null);
-    __publicField(this, "detachHardwareBack", null);
     __publicField(this, "releaseStackEntry", null);
     __publicField(this, "lifecycle");
     this.element = opts.element;
@@ -627,7 +775,7 @@ var OverlayEngine = class {
     this.onOpenCb = opts.onOpen;
     this.onCloseCb = opts.onClose;
     if (this.peekRaw !== void 0 && this.edge !== "bottom") {
-      console.warn(
+      devWarn(
         "[OverlayEngine] `peek` is only supported on edge: 'bottom' \u2014 ignoring."
       );
       this.peekRaw = void 0;
@@ -694,10 +842,9 @@ var OverlayEngine = class {
           this.element.style.opacity = "1";
           if (this.backdrop) {
             this.backdrop.style.opacity = String(this.backdropOpacity);
-            this.backdrop.style.pointerEvents = this.backdropOpacity > 0 ? "auto" : "none";
+            this.syncBackdropPointerEvents();
             if (this.backdropFilter) {
-              this.backdrop.style.backdropFilter = this.backdropFilter;
-              this.backdrop.style.webkitBackdropFilter = this.backdropFilter;
+              this.applyBackdropFilter(this.backdropFilter);
             }
           }
           try {
@@ -717,8 +864,7 @@ var OverlayEngine = class {
               this.backdrop.style.opacity = "0";
               this.backdrop.style.pointerEvents = "none";
               if (this.backdropFilter) {
-                this.backdrop.style.backdropFilter = "";
-                this.backdrop.style.webkitBackdropFilter = "";
+                this.applyBackdropFilter(void 0);
               }
             }
             this.element.setAttribute("data-state", "closed");
@@ -753,7 +899,10 @@ var OverlayEngine = class {
     this.isOpen_ = false;
     this.isAnimating_ = true;
     sheetStack.update();
-    this.popBackMarker(reason);
+    if (reason !== "back" && this.backMarker) {
+      popBackMarker(this.backMarker);
+    }
+    this.backMarker = null;
     this.element.setAttribute("data-state", "exiting");
     const dur = this.effectiveDuration();
     const transitionStr = `transform ${dur}ms ${this.exitEasing}, opacity ${dur}ms ease-in`;
@@ -776,8 +925,7 @@ var OverlayEngine = class {
           this.backdrop.style.opacity = "0";
           this.backdrop.style.pointerEvents = "none";
           if (this.backdropFilter) {
-            this.backdrop.style.backdropFilter = "";
-            this.backdrop.style.webkitBackdropFilter = "";
+            this.applyBackdropFilter(void 0);
           }
         }
         this.releaseInteractiveListeners();
@@ -812,6 +960,10 @@ var OverlayEngine = class {
     this.bus.clear();
     this.setWillChange(false);
     this.releaseInteractiveListeners();
+    if (this.backMarker) {
+      popBackMarker(this.backMarker);
+      this.backMarker = null;
+    }
     this.releaseStackEntry?.();
     this.releaseStackEntry = null;
     const hadOriginalParent = this.originalParent !== null;
@@ -825,20 +977,14 @@ var OverlayEngine = class {
     this.backdropOpacity = opacity;
     if (this.isOpen_ && this.backdrop) {
       this.backdrop.style.opacity = String(opacity);
+      this.syncBackdropPointerEvents();
     }
   }
   setBackdropFilter(filter) {
     if (this.destroyed) return;
     this.backdropFilter = filter;
     if (!this.isOpen_ || !this.backdrop) return;
-    const style = this.backdrop.style;
-    if (filter) {
-      this.backdrop.style.backdropFilter = filter;
-      style.webkitBackdropFilter = filter;
-    } else {
-      this.backdrop.style.backdropFilter = "";
-      style.webkitBackdropFilter = "";
-    }
+    this.applyBackdropFilter(filter);
   }
   setSwipeToClose(config) {
     if (this.destroyed) return;
@@ -907,16 +1053,10 @@ var OverlayEngine = class {
     if (this.isOpen_ && this.backdrop) {
       if (merged.backdropOpacity !== void 0) {
         this.backdrop.style.opacity = String(this.backdropOpacity);
+        this.syncBackdropPointerEvents();
       }
       if (merged.backdropFilter !== void 0) {
-        const style = this.backdrop.style;
-        if (this.backdropFilter) {
-          this.backdrop.style.backdropFilter = this.backdropFilter;
-          style.webkitBackdropFilter = this.backdropFilter;
-        } else {
-          this.backdrop.style.backdropFilter = "";
-          style.webkitBackdropFilter = "";
-        }
+        this.applyBackdropFilter(this.backdropFilter);
       }
     }
     if (opts.duration !== void 0) this.duration = opts.duration;
@@ -985,19 +1125,6 @@ var OverlayEngine = class {
   effectiveDuration() {
     return this.respectReducedMotionEnabled && prefersReducedMotion() ? 0 : this.duration;
   }
-  popBackMarker(reason) {
-    if (!this.backPushed) return;
-    this.backPushed = false;
-    if (reason === "back") return;
-    const state = history.state;
-    if (state && state.__bsOverlay === this.id) {
-      try {
-        history.back();
-      } catch {
-        return;
-      }
-    }
-  }
   resolvePeekPx(raw) {
     if (typeof raw === "number") return Math.max(0, raw);
     try {
@@ -1051,6 +1178,21 @@ var OverlayEngine = class {
       this.backdrop.style.pointerEvents = "none";
     }
   }
+  syncBackdropPointerEvents() {
+    if (!this.backdrop) return;
+    this.backdrop.style.pointerEvents = this.backdropOpacity > 0 ? "auto" : "none";
+  }
+  applyBackdropFilter(filter) {
+    if (!this.backdrop) return;
+    const style = this.backdrop.style;
+    if (filter) {
+      this.backdrop.style.backdropFilter = filter;
+      style.webkitBackdropFilter = filter;
+    } else {
+      this.backdrop.style.backdropFilter = "";
+      style.webkitBackdropFilter = "";
+    }
+  }
   setWillChange(on) {
     this.element.style.willChange = on ? "transform, opacity" : "";
     if (this.backdrop) {
@@ -1098,21 +1240,6 @@ var OverlayEngine = class {
       this.backdrop.addEventListener("click", handler);
       this.detachBackdrop = () => this.backdrop?.removeEventListener("click", handler);
     }
-    if (this.closeOnBackEnabled && typeof window !== "undefined" && !this.detachHardwareBack) {
-      try {
-        history.pushState({ __bsOverlay: this.id }, "");
-        this.backPushed = true;
-      } catch {
-      }
-      const onPop = () => {
-        if (this.isOpen_ && this.isTop) {
-          this.backPushed = false;
-          void this.close("back");
-        }
-      };
-      window.addEventListener("popstate", onPop);
-      this.detachHardwareBack = () => window.removeEventListener("popstate", onPop);
-    }
     if (this.closeOnOutsidePointerEnabled && !this.detachOutsidePointer) {
       const handler = (e) => {
         if (!this.isOpen_) return;
@@ -1125,14 +1252,20 @@ var OverlayEngine = class {
       document.addEventListener("pointerdown", handler, true);
       this.detachOutsidePointer = () => document.removeEventListener("pointerdown", handler, true);
     }
+    if (this.closeOnBackEnabled && this.backMarker === null && typeof window !== "undefined") {
+      this.backMarker = pushBackMarker({
+        isOpen: () => this.isOpen_,
+        isTop: () => this.isTop,
+        close: () => this.close("back"),
+        markerState: () => ({ __bsOverlay: this.id })
+      });
+    }
   }
   releaseInteractiveListeners() {
     this.detachEscape?.();
     this.detachEscape = null;
     this.detachBackdrop?.();
     this.detachBackdrop = null;
-    this.detachHardwareBack?.();
-    this.detachHardwareBack = null;
     this.detachSwipe?.();
     this.detachSwipe = null;
     this.detachOutsidePointer?.();

package/dist/preact.d.cts

@@ -1,5 +1,6 @@
 export { BottomSheet, BottomSheetFromConfig, BottomSheetFromConfigProps, BottomSheetHandle, BottomSheetProps, HeaderProp, Overlay, OverlayHandle, OverlayProps, SheetConfig, UseBottomSheetRefs, UseBottomSheetReturn, UseOverlayReturn, useBottomSheet, useOverlay } from './react.cjs';
-export { E as EngineState, b as SheetMode, d as SnapPoint, a as SnapPointDef } from './BottomSheetEngine-BcyruNP1.cjs';
+export { E as EngineState, b as SheetMode, e as SnapPoint, a as SnapPointDef } from './BottomSheetEngine-DzsIwD28.cjs';
 export { OverlayEdge, OverlayOptions, OverlayState } from './overlay.cjs';
 import 'react';
+import './teleport-7uYNiEAT.cjs';
 import './transform-jVfAikE9.cjs';

package/dist/preact.d.ts

@@ -1,5 +1,6 @@
 export { BottomSheet, BottomSheetFromConfig, BottomSheetFromConfigProps, BottomSheetHandle, BottomSheetProps, HeaderProp, Overlay, OverlayHandle, OverlayProps, SheetConfig, UseBottomSheetRefs, UseBottomSheetReturn, UseOverlayReturn, useBottomSheet, useOverlay } from './react.js';
-export { E as EngineState, b as SheetMode, d as SnapPoint, a as SnapPointDef } from './BottomSheetEngine-CBRcBwV-.js';
+export { E as EngineState, b as SheetMode, e as SnapPoint, a as SnapPointDef } from './BottomSheetEngine-DRjCU73e.js';
 export { OverlayEdge, OverlayOptions, OverlayState } from './overlay.js';
 import 'react';
+import './teleport-7uYNiEAT.js';
 import './transform-jVfAikE9.js';