@surdeddd/bottom-sheet 0.10.0 → 0.11.0

package/dist/overlay.cjs

@@ -529,6 +529,146 @@ function installOverlaySwipe(deps) {
   };
 }
 
+// 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({
@@ -596,7 +736,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");
@@ -608,7 +748,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;
@@ -762,7 +901,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`;
@@ -820,6 +962,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;
@@ -981,19 +1127,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 {
@@ -1109,21 +1242,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;
@@ -1136,14 +1254,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/overlay.d.cts

@@ -110,7 +110,7 @@ declare class OverlayEngine {
     private detachSwipe;
     private respectReducedMotionEnabled;
     private isTop;
-    private backPushed;
+    private backMarker;
     private movedToTarget;
     private onOpenCb?;
     private onCloseCb?;
@@ -122,7 +122,6 @@ declare class OverlayEngine {
     private bus;
     private detachEscape;
     private detachBackdrop;
-    private detachHardwareBack;
     private releaseStackEntry;
     private lifecycle;
     constructor(opts: OverlayOptions);
@@ -144,7 +143,6 @@ declare class OverlayEngine {
     private assignSwipeFromConfig;
     private emit;
     private effectiveDuration;
-    private popBackMarker;
     private resolvePeekPx;
     private maybeMount;
     private restoreMount;

package/dist/overlay.d.ts

@@ -110,7 +110,7 @@ declare class OverlayEngine {
     private detachSwipe;
     private respectReducedMotionEnabled;
     private isTop;
-    private backPushed;
+    private backMarker;
     private movedToTarget;
     private onOpenCb?;
     private onCloseCb?;
@@ -122,7 +122,6 @@ declare class OverlayEngine {
     private bus;
     private detachEscape;
     private detachBackdrop;
-    private detachHardwareBack;
     private releaseStackEntry;
     private lifecycle;
     constructor(opts: OverlayOptions);
@@ -144,7 +143,6 @@ declare class OverlayEngine {
     private assignSwipeFromConfig;
     private emit;
     private effectiveDuration;
-    private popBackMarker;
     private resolvePeekPx;
     private maybeMount;
     private restoreMount;

package/dist/overlay.js

@@ -527,6 +527,146 @@ function installOverlaySwipe(deps) {
   };
 }
 
+// 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({
@@ -594,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");
@@ -606,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;
@@ -760,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`;
@@ -818,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;
@@ -979,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 {
@@ -1107,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;
@@ -1134,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?.();