@surdeddd/bottom-sheet 0.8.1 → 0.9.0

package/dist/overlay.js

@@ -71,14 +71,6 @@ var SheetStack = class {
 };
 var sheetStack = new SheetStack();
 
-// src/core/primitives/transform.ts
-var CLOSED_TRANSFORM = {
-  bottom: "translate3d(0, 100%, 0)",
-  top: "translate3d(0, -100%, 0)",
-  left: "translate3d(-100%, 0, 0)",
-  right: "translate3d(100%, 0, 0)"
-};
-
 // src/core/primitives/cssLength.ts
 var probe = null;
 var PROBE_ATTR = "data-bs-probe";
@@ -187,9 +179,35 @@ var isVisible = (el) => {
   }
   return el.offsetParent !== null;
 };
-var focusables = (root) => Array.from(root.querySelectorAll(FOCUSABLE)).filter(
+var collectFocusables = (root) => {
+  const out = Array.from(root.querySelectorAll(FOCUSABLE));
+  if (typeof HTMLSlotElement !== "undefined") {
+    for (const slot of Array.from(root.querySelectorAll("slot"))) {
+      for (const assigned of slot.assignedElements()) {
+        if (assigned.matches(FOCUSABLE)) out.push(assigned);
+        out.push(...collectFocusables(assigned));
+      }
+    }
+  }
+  return out;
+};
+var focusables = (root) => collectFocusables(root).filter(
   (el) => !el.hasAttribute("inert") && isVisible(el) && !el.matches("[aria-hidden='true']")
 );
+var containsComposed = (container, node) => {
+  let n = node;
+  while (n) {
+    if (n === container) return true;
+    const slot = n.assignedSlot;
+    if (slot) {
+      n = slot;
+      continue;
+    }
+    const parent = n.parentNode;
+    n = parent instanceof ShadowRoot ? parent.host : parent;
+  }
+  return false;
+};
 var trapStack = [];
 var installFocusTrap = (container, options = {}) => {
   if (typeof document === "undefined") return () => {
@@ -199,7 +217,13 @@ var installFocusTrap = (container, options = {}) => {
   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;
+    const spec = options.initialFocus;
+    if (spec === false) {
+      if (!container.hasAttribute("tabindex")) container.tabIndex = -1;
+      container.focus({ preventScroll: true });
+      return;
+    }
+    const initial = typeof spec === "string" ? container.querySelector(spec) : spec ?? focusables(container)[0] ?? container;
     initial?.focus({ preventScroll: true });
   };
   focusInitial();
@@ -229,7 +253,7 @@ var installFocusTrap = (container, options = {}) => {
   const handleFocusIn = (e) => {
     if (!isActive()) return;
     const target = e.target;
-    if (target && !container.contains(target)) {
+    if (target && !containsComposed(container, target)) {
       const list = focusables(container);
       list[0]?.focus({ preventScroll: true });
     }
@@ -266,8 +290,14 @@ var lockBodyScroll = () => {
       position: body.style.position,
       top: body.style.top,
       width: body.style.width,
+      paddingRight: body.style.paddingRight,
       scrollY: window.scrollY
     };
+    const scrollbarGap = window.innerWidth - document.documentElement.clientWidth;
+    if (scrollbarGap > 0) {
+      const current = parseFloat(getComputedStyle(body).paddingRight) || 0;
+      body.style.paddingRight = `${current + scrollbarGap}px`;
+    }
     body.style.overflow = "hidden";
     body.style.position = "fixed";
     body.style.top = `-${savedStyles.scrollY}px`;
@@ -285,6 +315,7 @@ var lockBodyScroll = () => {
       body.style.position = savedStyles.position;
       body.style.top = savedStyles.top;
       body.style.width = savedStyles.width;
+      body.style.paddingRight = savedStyles.paddingRight;
       window.scrollTo(0, savedStyles.scrollY);
       savedStyles = null;
     }
@@ -392,6 +423,103 @@ var prefersReducedMotion = () => {
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 };
 
+// src/core/primitives/transform.ts
+var CLOSED_TRANSFORM = {
+  bottom: "translate3d(0, 100%, 0)",
+  top: "translate3d(0, -100%, 0)",
+  left: "translate3d(-100%, 0, 0)",
+  right: "translate3d(100%, 0, 0)"
+};
+
+// src/core/primitives/overlay-transforms.ts
+var closedTransform = (edge) => CLOSED_TRANSFORM[edge];
+var closedTransformFor = (edge, animation, peekPx) => {
+  switch (animation) {
+    case "fade":
+      return "translate3d(0, 0, 0)";
+    case "scale":
+      return "translate3d(0, 0, 0) scale(0.94)";
+    case "slide":
+    default:
+      if (peekPx !== void 0 && edge === "bottom") {
+        return `translate3d(0, calc(100% - ${peekPx}px), 0)`;
+      }
+      return closedTransform(edge);
+  }
+};
+var openTransformFor = (animation) => animation === "scale" ? "translate3d(0, 0, 0) scale(1)" : "translate3d(0, 0, 0)";
+
+// src/core/features/overlay-swipe.ts
+function installOverlaySwipe(deps) {
+  const el = deps.element;
+  const edge = deps.edge;
+  const isVertical = edge === "bottom" || edge === "top";
+  const sign = edge === "bottom" || edge === "right" ? 1 : -1;
+  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();
+    tracking = true;
+    dragging = false;
+  };
+  const onMove = (e) => {
+    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 (!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 * deps.getThreshold() || velocity > deps.getVelocityThreshold();
+    el.style.transition = deps.getExitTransition();
+    if (past) {
+      deps.close();
+    } else {
+      el.style.transform = deps.getOpenTransform();
+    }
+  };
+  el.addEventListener("pointerdown", onDown);
+  el.addEventListener("pointermove", onMove);
+  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);
+    el.removeEventListener("pointercancel", finish);
+  };
+}
+
 // src/core/overlay.ts
 var OVERLAY_PRESETS = Object.freeze({
   sheet: Object.freeze({
@@ -423,22 +551,6 @@ var OVERLAY_PRESETS = Object.freeze({
     swipeToClose: false
   })
 });
-var closedTransform = (edge) => CLOSED_TRANSFORM[edge];
-var closedTransformFor = (edge, animation, peekPx) => {
-  switch (animation) {
-    case "fade":
-      return "translate3d(0, 0, 0)";
-    case "scale":
-      return "translate3d(0, 0, 0) scale(0.94)";
-    case "slide":
-    default:
-      if (peekPx !== void 0 && edge === "bottom") {
-        return `translate3d(0, calc(100% - ${peekPx}px), 0)`;
-      }
-      return closedTransform(edge);
-  }
-};
-var openTransformFor = (animation) => animation === "scale" ? "translate3d(0, 0, 0) scale(1)" : "translate3d(0, 0, 0)";
 var OverlayEngine = class {
   constructor(opts) {
     __publicField(this, "id", nextInstanceId("ovl"));
@@ -571,6 +683,7 @@ var OverlayEngine = class {
     if (this.backdrop) {
       this.backdrop.style.transition = `opacity ${dur}ms ease-out`;
     }
+    this.setWillChange(true);
     const cycle = ++this.cycleNonce;
     return new Promise((resolve) => {
       requestAnimationFrame(() => {
@@ -593,6 +706,7 @@ var OverlayEngine = class {
             this.releaseInteractiveListeners();
             this.isOpen_ = false;
             this.isAnimating_ = false;
+            this.setWillChange(false);
             this.element.style.transform = closedTransformFor(
               this.edge,
               this.enterAnimation,
@@ -623,6 +737,7 @@ var OverlayEngine = class {
           ).then(() => {
             if (this.destroyed || cycle !== this.cycleNonce) return resolve();
             this.isAnimating_ = false;
+            this.setWillChange(false);
             this.element.setAttribute("data-state", "open");
             this.emit("open", void 0);
             this.onOpenCb?.();
@@ -646,6 +761,7 @@ var OverlayEngine = class {
     if (this.backdrop) {
       this.backdrop.style.transition = `opacity ${dur}ms ease-in`;
     }
+    this.setWillChange(true);
     const cycle = ++this.cycleNonce;
     return new Promise((resolve) => {
       requestAnimationFrame(() => {
@@ -671,6 +787,7 @@ var OverlayEngine = class {
         ).then(() => {
           if (this.destroyed || cycle !== this.cycleNonce) return resolve();
           this.isAnimating_ = false;
+          this.setWillChange(false);
           if (this.peekPx === void 0) {
             this.element.setAttribute("hidden", "");
           }
@@ -693,6 +810,7 @@ var OverlayEngine = class {
     this.destroyed = true;
     this.cycleNonce++;
     this.bus.clear();
+    this.setWillChange(false);
     this.releaseInteractiveListeners();
     this.releaseStackEntry?.();
     this.releaseStackEntry = null;
@@ -918,7 +1036,6 @@ var OverlayEngine = class {
     this.originalNextSibling = null;
   }
   applyClosedStyles() {
-    this.element.style.willChange = "transform, opacity";
     this.element.style.transform = closedTransformFor(
       this.edge,
       this.enterAnimation,
@@ -932,7 +1049,12 @@ var OverlayEngine = class {
     if (this.backdrop) {
       this.backdrop.style.opacity = "0";
       this.backdrop.style.pointerEvents = "none";
-      this.backdrop.style.willChange = "opacity";
+    }
+  }
+  setWillChange(on) {
+    this.element.style.willChange = on ? "transform, opacity" : "";
+    if (this.backdrop) {
+      this.backdrop.style.willChange = on ? "opacity" : "";
     }
   }
   awaitTransition(cycle, property = "transform") {
@@ -1018,73 +1140,15 @@ var OverlayEngine = class {
     this.lifecycle.release();
   }
   installSwipeToClose() {
-    const el = this.element;
-    const edge = this.edge;
-    const isVertical = edge === "bottom" || edge === "top";
-    const sign = edge === "bottom" || edge === "right" ? 1 : -1;
-    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();
-      tracking = true;
-      dragging = false;
-    };
-    const onMove = (e) => {
-      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 (!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 * this.swipeThreshold || velocity > this.swipeVelocityThreshold;
-      el.style.transition = `transform ${this.effectiveDuration()}ms ${this.exitEasing}`;
-      if (past) {
-        void this.close("swipe");
-      } else {
-        el.style.transform = openTransformFor(this.enterAnimation);
-      }
-    };
-    el.addEventListener("pointerdown", onDown);
-    el.addEventListener("pointermove", onMove);
-    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);
-      el.removeEventListener("pointercancel", finish);
-    };
+    return installOverlaySwipe({
+      element: this.element,
+      edge: this.edge,
+      getThreshold: () => this.swipeThreshold,
+      getVelocityThreshold: () => this.swipeVelocityThreshold,
+      getExitTransition: () => `transform ${this.effectiveDuration()}ms ${this.exitEasing}`,
+      getOpenTransform: () => openTransformFor(this.enterAnimation),
+      close: () => void this.close("swipe")
+    });
   }
   registerInStack() {
     this.releaseStackEntry = sheetStack.push({

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, b as SheetMode, d as SnapPoint, a as SnapPointDef } from './BottomSheetEngine-7BDK2OWX.cjs';
+export { E as EngineState, b as SheetMode, d as SnapPoint, a as SnapPointDef } from './BottomSheetEngine-BcyruNP1.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, b as SheetMode, d as SnapPoint, a as SnapPointDef } from './BottomSheetEngine-BFTb0-4Z.js';
+export { E as EngineState, b as SheetMode, d as SnapPoint, a as SnapPointDef } from './BottomSheetEngine-CBRcBwV-.js';
 export { OverlayEdge, OverlayOptions, OverlayState } from './overlay.js';
 import 'react';
 import './transform-jVfAikE9.js';