@surdeddd/bottom-sheet 0.2.0 → 0.3.0

package/dist/integrations/formik.d.cts

@@ -1,4 +1,4 @@
-import { d as SheetEventMap } from '../BottomSheetEngine-CIT9Htti.cjs';
+import { e as SheetEventMap } from '../BottomSheetEngine-CAymrH-P.cjs';
 import '../transform-jVfAikE9.cjs';
 
 type FormikStateLike = {

package/dist/integrations/formik.d.ts

@@ -1,4 +1,4 @@
-import { d as SheetEventMap } from '../BottomSheetEngine-Df9MwBbm.js';
+import { e as SheetEventMap } from '../BottomSheetEngine-DcqcuudN.js';
 import '../transform-jVfAikE9.js';
 
 type FormikStateLike = {

package/dist/integrations/react-hook-form.d.cts

@@ -1,4 +1,4 @@
-import { d as SheetEventMap } from '../BottomSheetEngine-CIT9Htti.cjs';
+import { e as SheetEventMap } from '../BottomSheetEngine-CAymrH-P.cjs';
 import '../transform-jVfAikE9.cjs';
 
 type RhfFormStateLike = {

package/dist/integrations/react-hook-form.d.ts

@@ -1,4 +1,4 @@
-import { d as SheetEventMap } from '../BottomSheetEngine-Df9MwBbm.js';
+import { e as SheetEventMap } from '../BottomSheetEngine-DcqcuudN.js';
 import '../transform-jVfAikE9.js';
 
 type RhfFormStateLike = {

package/dist/overlay.cjs

@@ -22,6 +22,18 @@ 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;
   }
@@ -29,9 +41,24 @@ var SheetStack = class {
     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);
+      }
     });
   }
 };
@@ -154,9 +181,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;
@@ -164,6 +195,7 @@ var installFocusTrap = (container, options = {}) => {
   };
   focusInitial();
   const handleKey = (e) => {
+    if (!isActive()) return;
     if (e.key === "Escape" && options.onEscape) {
       options.onEscape();
       return;
@@ -186,6 +218,7 @@ var installFocusTrap = (container, options = {}) => {
     }
   };
   const handleFocusIn = (e) => {
+    if (!isActive()) return;
     const target = e.target;
     if (target && !container.contains(target)) {
       const list = focusables(container);
@@ -198,6 +231,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)) {
@@ -253,11 +288,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);
       }
@@ -273,7 +314,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");
@@ -287,7 +327,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;
@@ -297,6 +336,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;
@@ -305,8 +347,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()) {
@@ -336,6 +377,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({
@@ -415,6 +462,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);
@@ -451,6 +502,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") {
@@ -498,15 +550,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) => {
@@ -518,7 +572,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;
@@ -554,7 +608,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");
@@ -571,11 +628,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) => {
@@ -586,7 +646,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";
@@ -596,7 +656,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) {
@@ -624,7 +687,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;
@@ -725,6 +792,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();
@@ -758,6 +855,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 {
@@ -779,6 +892,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() {
@@ -812,7 +926,7 @@ var OverlayEngine = class {
       this.backdrop.style.willChange = "opacity";
     }
   }
-  awaitTransition(cycle) {
+  awaitTransition(cycle, property = "transform") {
     return new Promise((resolve) => {
       let done = false;
       const finish = () => {
@@ -827,10 +941,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() {
@@ -840,7 +954,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);
@@ -853,10 +970,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);
@@ -892,43 +1013,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 {
@@ -940,6 +1070,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);
@@ -954,10 +1085,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/overlay.d.cts

@@ -25,6 +25,12 @@ type OverlayUpdate = {
     enterAnimation?: OverlayAnimation;
     exitAnimation?: OverlayAnimation;
     preset?: OverlayPreset;
+    duration?: number;
+    enterEasing?: string;
+    exitEasing?: string;
+    closeOnEscape?: boolean;
+    closeOnBackdrop?: boolean;
+    closeOnOutsidePointer?: boolean;
     children?: HTMLElement | DocumentFragment | (() => HTMLElement | DocumentFragment) | null;
 };
 type OverlayOptions = {
@@ -52,6 +58,7 @@ type OverlayOptions = {
     peek?: number | string;
     closeOnOutsidePointer?: boolean;
     preset?: OverlayPreset;
+    respectReducedMotion?: boolean;
     onOpen?: () => void;
     onClose?: () => void;
 };
@@ -99,6 +106,10 @@ declare class OverlayEngine {
     private closeOnOutsidePointerEnabled;
     private detachOutsidePointer;
     private detachSwipe;
+    private respectReducedMotionEnabled;
+    private isTop;
+    private backPushed;
+    private movedToTarget;
     private onOpenCb?;
     private onCloseCb?;
     private isOpen_;
@@ -130,6 +141,8 @@ declare class OverlayEngine {
     clearOverlayChildren(): void;
     private assignSwipeFromConfig;
     private emit;
+    private effectiveDuration;
+    private popBackMarker;
     private resolvePeekPx;
     private maybeMount;
     private restoreMount;

package/dist/overlay.d.ts

@@ -25,6 +25,12 @@ type OverlayUpdate = {
     enterAnimation?: OverlayAnimation;
     exitAnimation?: OverlayAnimation;
     preset?: OverlayPreset;
+    duration?: number;
+    enterEasing?: string;
+    exitEasing?: string;
+    closeOnEscape?: boolean;
+    closeOnBackdrop?: boolean;
+    closeOnOutsidePointer?: boolean;
     children?: HTMLElement | DocumentFragment | (() => HTMLElement | DocumentFragment) | null;
 };
 type OverlayOptions = {
@@ -52,6 +58,7 @@ type OverlayOptions = {
     peek?: number | string;
     closeOnOutsidePointer?: boolean;
     preset?: OverlayPreset;
+    respectReducedMotion?: boolean;
     onOpen?: () => void;
     onClose?: () => void;
 };
@@ -99,6 +106,10 @@ declare class OverlayEngine {
     private closeOnOutsidePointerEnabled;
     private detachOutsidePointer;
     private detachSwipe;
+    private respectReducedMotionEnabled;
+    private isTop;
+    private backPushed;
+    private movedToTarget;
     private onOpenCb?;
     private onCloseCb?;
     private isOpen_;
@@ -130,6 +141,8 @@ declare class OverlayEngine {
     clearOverlayChildren(): void;
     private assignSwipeFromConfig;
     private emit;
+    private effectiveDuration;
+    private popBackMarker;
     private resolvePeekPx;
     private maybeMount;
     private restoreMount;