@surdeddd/bottom-sheet 0.2.0 → 0.4.0

package/dist/overlay.js

@@ -20,16 +20,52 @@ var SheetStack = class {
     this.entries.splice(idx, 1);
     this.recompute();
   }
+  promote(id) {
+    const idx = this.entries.findIndex((e) => e.id === id);
+    if (idx === -1) return;
+    if (idx !== this.entries.length - 1) {
+      const [entry] = this.entries.splice(idx, 1);
+      this.entries.push(entry);
+    }
+    this.recompute();
+  }
+  update() {
+    this.recompute();
+  }
   size() {
     return this.entries.length;
   }
+  depthOf(id) {
+    const open = [];
+    for (const entry of this.entries) {
+      if (!entry.isOpen || entry.isOpen()) open.push(entry);
+    }
+    const idx = open.findIndex((e) => e.id === id);
+    if (idx === -1) return 0;
+    return open.length - 1 - idx;
+  }
   clear() {
     this.entries = [];
   }
   recompute() {
+    let top = null;
+    const open = [];
+    for (const entry of this.entries) {
+      if (!entry.isOpen || entry.isOpen()) {
+        top = entry;
+        open.push(entry);
+      }
+    }
+    if (!top && this.entries.length > 0) {
+      top = this.entries[this.entries.length - 1];
+    }
     this.entries.forEach((entry, i) => {
       entry.setZIndex(BASE_Z + i * STEP);
-      entry.setIsTop(i === this.entries.length - 1);
+      entry.setIsTop(entry === top);
+      if (entry.setDepth) {
+        const openIdx = open.indexOf(entry);
+        entry.setDepth(openIdx === -1 ? 0 : open.length - 1 - openIdx);
+      }
     });
   }
 };
@@ -74,7 +110,9 @@ var PERCENT = /^(-?\d+(?:\.\d+)?)%$/;
 var resolveSnap = (point, mode, measureFit) => {
   if (typeof point === "number") return Math.max(0, point);
   if (point === "full") return viewportSize();
-  if (point === "fit") return Math.max(0, 0);
+  if (point === "fit" || point === "content") {
+    return Math.max(0, 0);
+  }
   const pctMatch = point.match(PERCENT);
   if (pctMatch) {
     const pct = parseFloat(pctMatch[1]) / 100;
@@ -152,9 +190,13 @@ var isVisible = (el) => {
 var focusables = (root) => Array.from(root.querySelectorAll(FOCUSABLE)).filter(
   (el) => !el.hasAttribute("inert") && isVisible(el) && !el.matches("[aria-hidden='true']")
 );
+var trapStack = [];
 var installFocusTrap = (container, options = {}) => {
   if (typeof document === "undefined") return () => {
   };
+  const token = {};
+  trapStack.push(token);
+  const isActive = () => trapStack[trapStack.length - 1] === token;
   const previouslyFocused = document.activeElement;
   const focusInitial = () => {
     const initial = typeof options.initialFocus === "string" ? container.querySelector(options.initialFocus) : options.initialFocus ?? focusables(container)[0] ?? container;
@@ -162,6 +204,7 @@ var installFocusTrap = (container, options = {}) => {
   };
   focusInitial();
   const handleKey = (e) => {
+    if (!isActive()) return;
     if (e.key === "Escape" && options.onEscape) {
       options.onEscape();
       return;
@@ -184,6 +227,7 @@ var installFocusTrap = (container, options = {}) => {
     }
   };
   const handleFocusIn = (e) => {
+    if (!isActive()) return;
     const target = e.target;
     if (target && !container.contains(target)) {
       const list = focusables(container);
@@ -196,6 +240,8 @@ var installFocusTrap = (container, options = {}) => {
   return () => {
     if (released) return;
     released = true;
+    const idx = trapStack.indexOf(token);
+    if (idx !== -1) trapStack.splice(idx, 1);
     document.removeEventListener("keydown", handleKey, true);
     document.removeEventListener("focusin", handleFocusIn, true);
     if (previouslyFocused && document.contains(previouslyFocused)) {
@@ -251,11 +297,17 @@ function createInertSiblings(rootProvider) {
   return {
     apply() {
       if (typeof document === "undefined") return;
-      const root = rootProvider();
-      const parent = root.parentElement ?? document.body;
+      let top = rootProvider();
+      while (top.parentElement && top.parentElement !== document.body) {
+        top = top.parentElement;
+      }
+      const parent = top.parentElement ?? document.body;
       for (const child of Array.from(parent.children)) {
-        if (child === root) continue;
+        if (child === top) continue;
         if (child.hasAttribute("inert")) continue;
+        if (child.classList.contains("bs-backdrop") || child.classList.contains("bs-screen") || child.classList.contains("bs-root")) {
+          continue;
+        }
         child.setAttribute("inert", "");
         tracked.push(child);
       }
@@ -271,7 +323,6 @@ function createInertSiblings(rootProvider) {
 var LifecycleController = class {
   constructor(deps, opts) {
     __publicField(this, "element");
-    __publicField(this, "closeFn");
     __publicField(this, "focusTrapEnabled");
     __publicField(this, "initialFocus");
     __publicField(this, "closeOnEscape");
@@ -285,7 +336,6 @@ var LifecycleController = class {
     __publicField(this, "installed", false);
     __publicField(this, "destroyed", false);
     this.element = deps.element;
-    this.closeFn = deps.close;
     this.focusTrapEnabled = opts.focusTrap ?? false;
     this.initialFocus = opts.initialFocus;
     this.closeOnEscape = opts.closeOnEscape ?? true;
@@ -295,6 +345,9 @@ var LifecycleController = class {
     this.returnFocus = opts.returnFocus;
     this.inertSiblings = createInertSiblings(() => this.element);
   }
+  get isInstalled() {
+    return this.installed;
+  }
   install() {
     if (this.destroyed) return;
     this.installed = true;
@@ -303,8 +356,7 @@ var LifecycleController = class {
     }
     if (this.focusTrapEnabled && !this.releaseFocusTrap) {
       this.releaseFocusTrap = installFocusTrap(this.element, {
-        initialFocus: this.initialFocus,
-        onEscape: this.closeOnEscape ? () => void this.closeFn() : void 0
+        initialFocus: this.initialFocus
       });
     }
     if (this.inertSiblingsEnabled && this.shouldApplyInertSiblings()) {
@@ -324,7 +376,7 @@ var LifecycleController = class {
     this.releaseScrollLock = null;
     this.inertSiblings.remove();
     if (this.returnFocus) {
-      const target = typeof this.returnFocus === "function" ? this.returnFocus() : this.returnFocus;
+      const target = typeof this.returnFocus === "function" ? this.returnFocus() : typeof this.returnFocus === "string" ? typeof document !== "undefined" ? document.querySelector(this.returnFocus) : null : this.returnFocus;
       target?.focus?.();
     }
   }
@@ -334,6 +386,12 @@ var LifecycleController = class {
   }
 };
 
+// src/core/animation/animation.ts
+var prefersReducedMotion = () => {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+};
+
 // src/core/overlay.ts
 var OVERLAY_PRESETS = Object.freeze({
   sheet: Object.freeze({
@@ -413,6 +471,10 @@ var OverlayEngine = class {
     __publicField(this, "closeOnOutsidePointerEnabled");
     __publicField(this, "detachOutsidePointer", null);
     __publicField(this, "detachSwipe", null);
+    __publicField(this, "respectReducedMotionEnabled");
+    __publicField(this, "isTop", true);
+    __publicField(this, "backPushed", false);
+    __publicField(this, "movedToTarget", false);
     __publicField(this, "onOpenCb");
     __publicField(this, "onCloseCb");
     __publicField(this, "isOpen_", false);
@@ -449,6 +511,7 @@ var OverlayEngine = class {
     this.mountTarget = opts.mountTo;
     this.peekRaw = opts.peek;
     this.closeOnOutsidePointerEnabled = opts.closeOnOutsidePointer ?? false;
+    this.respectReducedMotionEnabled = opts.respectReducedMotion ?? true;
     this.onOpenCb = opts.onOpen;
     this.onCloseCb = opts.onClose;
     if (this.peekRaw !== void 0 && this.edge !== "bottom") {
@@ -496,15 +559,17 @@ var OverlayEngine = class {
     this.emit("before-open", void 0);
     this.isOpen_ = true;
     this.isAnimating_ = true;
+    sheetStack.promote(this.id);
     this.element.removeAttribute("hidden");
     this.element.setAttribute("data-state", "entering");
     if (this.focusTrapEnabled) {
       this.element.setAttribute("aria-modal", "true");
     }
-    const transitionStr = `transform ${this.duration}ms ${this.enterEasing}, opacity ${this.duration}ms ease-out`;
+    const dur = this.effectiveDuration();
+    const transitionStr = `transform ${dur}ms ${this.enterEasing}, opacity ${dur}ms ease-out`;
     this.element.style.transition = transitionStr;
     if (this.backdrop) {
-      this.backdrop.style.transition = `opacity ${this.duration}ms ease-out`;
+      this.backdrop.style.transition = `opacity ${dur}ms ease-out`;
     }
     const cycle = ++this.cycleNonce;
     return new Promise((resolve) => {
@@ -516,7 +581,7 @@ var OverlayEngine = class {
           this.element.style.opacity = "1";
           if (this.backdrop) {
             this.backdrop.style.opacity = String(this.backdropOpacity);
-            this.backdrop.style.pointerEvents = "auto";
+            this.backdrop.style.pointerEvents = this.backdropOpacity > 0 ? "auto" : "none";
             if (this.backdropFilter) {
               this.backdrop.style.backdropFilter = this.backdropFilter;
               this.backdrop.style.webkitBackdropFilter = this.backdropFilter;
@@ -552,7 +617,10 @@ var OverlayEngine = class {
             });
             return resolve();
           }
-          this.awaitTransition(cycle).then(() => {
+          this.awaitTransition(
+            cycle,
+            this.enterAnimation === "fade" ? "opacity" : "transform"
+          ).then(() => {
             if (this.destroyed || cycle !== this.cycleNonce) return resolve();
             this.isAnimating_ = false;
             this.element.setAttribute("data-state", "open");
@@ -569,11 +637,14 @@ var OverlayEngine = class {
     this.emit("before-close", void 0);
     this.isOpen_ = false;
     this.isAnimating_ = true;
+    sheetStack.update();
+    this.popBackMarker(reason);
     this.element.setAttribute("data-state", "exiting");
-    const transitionStr = `transform ${this.duration}ms ${this.exitEasing}, opacity ${this.duration}ms ease-in`;
+    const dur = this.effectiveDuration();
+    const transitionStr = `transform ${dur}ms ${this.exitEasing}, opacity ${dur}ms ease-in`;
     this.element.style.transition = transitionStr;
     if (this.backdrop) {
-      this.backdrop.style.transition = `opacity ${this.duration}ms ease-in`;
+      this.backdrop.style.transition = `opacity ${dur}ms ease-in`;
     }
     const cycle = ++this.cycleNonce;
     return new Promise((resolve) => {
@@ -584,7 +655,7 @@ var OverlayEngine = class {
           this.exitAnimation,
           this.peekPx
         );
-        this.element.style.opacity = "0";
+        this.element.style.opacity = this.peekPx !== void 0 ? "1" : "0";
         if (this.backdrop) {
           this.backdrop.style.opacity = "0";
           this.backdrop.style.pointerEvents = "none";
@@ -594,7 +665,10 @@ var OverlayEngine = class {
           }
         }
         this.releaseInteractiveListeners();
-        this.awaitTransition(cycle).then(() => {
+        this.awaitTransition(
+          cycle,
+          this.exitAnimation === "fade" ? "opacity" : "transform"
+        ).then(() => {
           if (this.destroyed || cycle !== this.cycleNonce) return resolve();
           this.isAnimating_ = false;
           if (this.peekPx === void 0) {
@@ -622,7 +696,11 @@ var OverlayEngine = class {
     this.releaseInteractiveListeners();
     this.releaseStackEntry?.();
     this.releaseStackEntry = null;
+    const hadOriginalParent = this.originalParent !== null;
     this.restoreMount();
+    if (this.movedToTarget && !hadOriginalParent && this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
   }
   setBackdropOpacity(opacity) {
     if (this.destroyed) return;
@@ -723,6 +801,36 @@ var OverlayEngine = class {
         }
       }
     }
+    if (opts.duration !== void 0) this.duration = opts.duration;
+    if (opts.enterEasing !== void 0) this.enterEasing = opts.enterEasing;
+    if (opts.exitEasing !== void 0) this.exitEasing = opts.exitEasing;
+    if (opts.closeOnEscape !== void 0) {
+      this.closeOnEscape = opts.closeOnEscape;
+      if (!opts.closeOnEscape) {
+        this.detachEscape?.();
+        this.detachEscape = null;
+      } else if (this.isOpen_) {
+        this.installInteractiveListeners();
+      }
+    }
+    if (opts.closeOnBackdrop !== void 0) {
+      this.closeOnBackdropEnabled = opts.closeOnBackdrop;
+      if (!opts.closeOnBackdrop) {
+        this.detachBackdrop?.();
+        this.detachBackdrop = null;
+      } else if (this.isOpen_) {
+        this.installInteractiveListeners();
+      }
+    }
+    if (opts.closeOnOutsidePointer !== void 0) {
+      this.closeOnOutsidePointerEnabled = opts.closeOnOutsidePointer;
+      if (!opts.closeOnOutsidePointer) {
+        this.detachOutsidePointer?.();
+        this.detachOutsidePointer = null;
+      } else if (this.isOpen_) {
+        this.installInteractiveListeners();
+      }
+    }
     if (opts.children !== void 0) {
       if (opts.children === null) {
         this.clearOverlayChildren();
@@ -756,6 +864,22 @@ var OverlayEngine = class {
   emit(event, payload) {
     this.bus.emit(event, payload);
   }
+  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 {
@@ -777,6 +901,7 @@ var OverlayEngine = class {
     this.originalParent = this.element.parentNode;
     this.originalNextSibling = this.element.nextSibling;
     target.appendChild(this.element);
+    this.movedToTarget = true;
     this.mounted = true;
   }
   restoreMount() {
@@ -810,7 +935,7 @@ var OverlayEngine = class {
       this.backdrop.style.willChange = "opacity";
     }
   }
-  awaitTransition(cycle) {
+  awaitTransition(cycle, property = "transform") {
     return new Promise((resolve) => {
       let done = false;
       const finish = () => {
@@ -825,10 +950,10 @@ var OverlayEngine = class {
           finish();
           return;
         }
-        if (e.propertyName === "transform") finish();
+        if (e.target === this.element && e.propertyName === property) finish();
       };
       this.element.addEventListener("transitionend", onEnd);
-      const timer = window.setTimeout(finish, this.duration + 50);
+      const timer = window.setTimeout(finish, this.effectiveDuration() + 50);
     });
   }
   installInteractiveListeners() {
@@ -838,7 +963,10 @@ var OverlayEngine = class {
     }
     if (this.closeOnEscape && !this.detachEscape) {
       const handler = (e) => {
-        if (e.key === "Escape" && this.isOpen_) void this.close("escape");
+        if (e.defaultPrevented) return;
+        if (e.key === "Escape" && this.isOpen_ && this.isTop) {
+          void this.close("escape");
+        }
       };
       document.addEventListener("keydown", handler);
       this.detachEscape = () => document.removeEventListener("keydown", handler);
@@ -851,10 +979,14 @@ var OverlayEngine = class {
     if (this.closeOnBackEnabled && typeof window !== "undefined" && !this.detachHardwareBack) {
       try {
         history.pushState({ __bsOverlay: this.id }, "");
+        this.backPushed = true;
       } catch {
       }
       const onPop = () => {
-        if (this.isOpen_) void this.close("back");
+        if (this.isOpen_ && this.isTop) {
+          this.backPushed = false;
+          void this.close("back");
+        }
       };
       window.addEventListener("popstate", onPop);
       this.detachHardwareBack = () => window.removeEventListener("popstate", onPop);
@@ -890,43 +1022,52 @@ var OverlayEngine = class {
     const edge = this.edge;
     const isVertical = edge === "bottom" || edge === "top";
     const sign = edge === "bottom" || edge === "right" ? 1 : -1;
-    const threshold = this.swipeThreshold;
-    const velocityThreshold = this.swipeVelocityThreshold;
+    const SLOP = 8;
     let startX = 0;
     let startY = 0;
     let startT = 0;
+    let tracking = false;
     let dragging = false;
     let pointerId = null;
+    const previousTouchAction = el.style.touchAction;
+    el.style.touchAction = isVertical ? "pan-x" : "pan-y";
     const onDown = (e) => {
       if (e.button !== void 0 && e.button !== 0) return;
       pointerId = e.pointerId;
       startX = e.clientX;
       startY = e.clientY;
       startT = performance.now();
-      dragging = true;
-      el.style.transition = "none";
-      try {
-        el.setPointerCapture(e.pointerId);
-      } catch {
-      }
+      tracking = true;
+      dragging = false;
     };
     const onMove = (e) => {
-      if (!dragging || e.pointerId !== pointerId) return;
+      if (!tracking || e.pointerId !== pointerId) return;
       const delta = isVertical ? e.clientY - startY : e.clientX - startX;
+      if (!dragging) {
+        if (Math.abs(delta) < SLOP) return;
+        dragging = true;
+        el.style.transition = "none";
+        try {
+          el.setPointerCapture(e.pointerId);
+        } catch {
+        }
+      }
       const offset = Math.max(0, sign * delta);
       el.style.transform = isVertical ? `translate3d(0, ${sign * offset}px, 0)` : `translate3d(${sign * offset}px, 0, 0)`;
     };
     const finish = (e) => {
-      if (!dragging || e.pointerId !== pointerId) return;
-      dragging = false;
+      if (!tracking || e.pointerId !== pointerId) return;
+      tracking = false;
       pointerId = null;
+      if (!dragging) return;
+      dragging = false;
       const dt = performance.now() - startT || 1;
       const delta = isVertical ? e.clientY - startY : e.clientX - startX;
       const offset = Math.max(0, sign * delta);
       const velocity = sign * delta / dt;
       const size = isVertical ? el.offsetHeight : el.offsetWidth;
-      const past = offset > size * threshold || velocity > velocityThreshold;
-      el.style.transition = `transform ${this.duration}ms ${this.exitEasing}`;
+      const past = offset > size * this.swipeThreshold || velocity > this.swipeVelocityThreshold;
+      el.style.transition = `transform ${this.effectiveDuration()}ms ${this.exitEasing}`;
       if (past) {
         void this.close("swipe");
       } else {
@@ -938,6 +1079,7 @@ var OverlayEngine = class {
     el.addEventListener("pointerup", finish);
     el.addEventListener("pointercancel", finish);
     return () => {
+      el.style.touchAction = previousTouchAction;
       el.removeEventListener("pointerdown", onDown);
       el.removeEventListener("pointermove", onMove);
       el.removeEventListener("pointerup", finish);
@@ -952,10 +1094,12 @@ var OverlayEngine = class {
         if (this.backdrop) this.backdrop.style.zIndex = String(z - 1);
       },
       setIsTop: (isTop) => {
+        this.isTop = isTop;
         if (this.backdrop) {
           this.backdrop.style.display = isTop ? "" : "none";
         }
-      }
+      },
+      isOpen: () => this.isOpen_
     });
   }
 };

package/dist/preact.d.cts

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

package/dist/preact.d.ts

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