@surdeddd/bottom-sheet 0.21.1 → 0.22.0

package/dist/react.js

@@ -383,14 +383,26 @@ function notifyLinkedSheets(sheets, self) {
   }
 }
 
+// src/core/primitives/hot-path-thresholds.ts
+var SIZE_WRITE_EPSILON = 0.5;
+var OPACITY_WRITE_EPSILON = 5e-3;
+var POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
+var RANGE_DIVISION_EPSILON = 1e-4;
+
 // src/core/features/resize-observer.ts
 function installResizeObserver(deps) {
   if (typeof window === "undefined") {
     return () => {
     };
   }
+  const seatFor = () => {
+    const snap = deps.resolveActiveSnap();
+    const max = deps.getMaxAxisSize();
+    return { target: snap ? Math.min(snap.size, max) : null, max };
+  };
   const onResize = () => {
     if (deps.isDestroyed()) return;
+    const before = seatFor();
     deps.recomputeSnaps();
     const mode = deps.getMode();
     const isVerticalAxis = mode === "bottom" || mode === "top";
@@ -399,6 +411,10 @@ function installResizeObserver(deps) {
     if (viewportSize2 > 0 && viewportSize2 < max) {
       deps.setMaxAxisSize(viewportSize2);
     }
+    const after = seatFor();
+    if (before.target !== null && after.target !== null && Math.abs(after.target - before.target) < SIZE_WRITE_EPSILON && Math.abs(after.max - before.max) < SIZE_WRITE_EPSILON) {
+      return;
+    }
     const wasAnimating = deps.isAnimating?.() ?? false;
     deps.cancelInFlight();
     deps.newCycle();
@@ -667,12 +683,6 @@ var SCRIM_PRESETS = Object.freeze({
   }
 });
 
-// src/core/primitives/hot-path-thresholds.ts
-var SIZE_WRITE_EPSILON = 0.5;
-var OPACITY_WRITE_EPSILON = 5e-3;
-var POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
-var RANGE_DIVISION_EPSILON = 1e-4;
-
 // src/core/primitives/opacity-dedup.ts
 var WriteSentinel = class {
   constructor() {
@@ -2602,6 +2612,7 @@ var BottomSheetCore = class {
     __publicField(this, "lifecycle");
     __publicField(this, "closeOnBack");
     __publicField(this, "routedTo");
+    __publicField(this, "fitContentToSnap");
     __publicField(this, "persistent");
     __publicField(this, "disableCloseFlag");
     __publicField(this, "disableDragFlag");
@@ -2715,6 +2726,7 @@ var BottomSheetCore = class {
     );
     this.closeOnBack = resolved.closeOnBack;
     this.routedTo = opts.routedTo;
+    this.fitContentToSnap = opts.fitContentToSnap === true;
     this.persistent = resolved.persistent;
     this.disableCloseFlag = resolved.disableClose;
     this.disableDragFlag = resolved.disableDrag;
@@ -2816,7 +2828,8 @@ var BottomSheetCore = class {
         closeOnBack: this.closeOnBack,
         closeOnRouteChange: this.closeOnRouteChange,
         persistKey: this.persistKey,
-        autoCollapseAfter
+        autoCollapseAfter,
+        fitContentToSnap: this.fitContentToSnap
       },
       isDestroyed: () => this.destroyed,
       isDragging: () => this.isDraggingAny(),
@@ -2868,6 +2881,11 @@ var BottomSheetCore = class {
         "[BottomSheet] closeOnBack/routedTo/closeOnRouteChange need routeFeature() \u2014 option ignored"
       );
     }
+    if (this.fitContentToSnap && !names.has("content-fit")) {
+      devWarn(
+        "[BottomSheet] fitContentToSnap needs contentFitFeature() \u2014 option ignored"
+      );
+    }
     if (this.persistKey && !names.has("persist")) {
       devWarn(
         "[BottomSheet] persistKey needs persistFeature() \u2014 snaps will not be saved"
@@ -4225,6 +4243,68 @@ function visualViewportFeature() {
   };
 }
 
+// src/core/features/content-fit.ts
+var INSET_VAR = "--bs-content-inset";
+var FIT_ATTR = "data-bs-fit-content";
+function contentFitFeature() {
+  return {
+    name: "content-fit",
+    install: (ctx) => {
+      const scroller = ctx.scrollContainer;
+      if (!ctx.options.fitContentToSnap || !scroller || typeof window === "undefined") {
+        return;
+      }
+      const sheet = ctx.element;
+      let inset = 0;
+      let unpaddedMax = -1;
+      let top = 0;
+      const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
+      const follow = (size) => {
+        if (unpaddedMax < 0) {
+          unpaddedMax = scroller.scrollHeight - scroller.clientHeight - inset;
+          top = scroller.scrollTop;
+        }
+        const limit = Math.max(0, unpaddedMax + hiddenAt(size));
+        if (top > limit) {
+          if (scroller.scrollTop > limit) scroller.scrollTop = limit;
+          top = limit;
+        }
+      };
+      const settle = () => {
+        if (ctx.isDestroyed()) return;
+        const size = ctx.getSize();
+        unpaddedMax = -1;
+        follow(size);
+        inset = hiddenAt(size);
+        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        unpaddedMax = -1;
+      };
+      const moving = () => ctx.isAnimating() || ctx.isDragging();
+      const whenIdle = () => {
+        if (!moving()) settle();
+      };
+      sheet.setAttribute(FIT_ATTR, "");
+      settle();
+      const offProgress = ctx.on(
+        "progress",
+        (p) => moving() ? follow(p.size) : settle()
+      );
+      const offSnap = ctx.on("snap", settle);
+      const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
+      observer?.observe(document.documentElement);
+      window.addEventListener("orientationchange", whenIdle);
+      return () => {
+        offProgress();
+        offSnap();
+        observer?.disconnect();
+        window.removeEventListener("orientationchange", whenIdle);
+        sheet.removeAttribute(FIT_ATTR);
+        sheet.style.removeProperty(INSET_VAR);
+      };
+    }
+  };
+}
+
 // src/core/default-features.ts
 function defaultEngineFeatures() {
   return [
@@ -4232,7 +4312,8 @@ function defaultEngineFeatures() {
     visualViewportFeature(),
     persistFeature(),
     autoCollapseFeature(),
-    routeFeature()
+    routeFeature(),
+    contentFitFeature()
   ];
 }
 

package/dist/solid.cjs

@@ -378,14 +378,26 @@ function notifyLinkedSheets(sheets, self) {
   }
 }
 
+// src/core/primitives/hot-path-thresholds.ts
+var SIZE_WRITE_EPSILON = 0.5;
+var OPACITY_WRITE_EPSILON = 5e-3;
+var POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
+var RANGE_DIVISION_EPSILON = 1e-4;
+
 // src/core/features/resize-observer.ts
 function installResizeObserver(deps) {
   if (typeof window === "undefined") {
     return () => {
     };
   }
+  const seatFor = () => {
+    const snap = deps.resolveActiveSnap();
+    const max = deps.getMaxAxisSize();
+    return { target: snap ? Math.min(snap.size, max) : null, max };
+  };
   const onResize = () => {
     if (deps.isDestroyed()) return;
+    const before = seatFor();
     deps.recomputeSnaps();
     const mode = deps.getMode();
     const isVerticalAxis = mode === "bottom" || mode === "top";
@@ -394,6 +406,10 @@ function installResizeObserver(deps) {
     if (viewportSize2 > 0 && viewportSize2 < max) {
       deps.setMaxAxisSize(viewportSize2);
     }
+    const after = seatFor();
+    if (before.target !== null && after.target !== null && Math.abs(after.target - before.target) < SIZE_WRITE_EPSILON && Math.abs(after.max - before.max) < SIZE_WRITE_EPSILON) {
+      return;
+    }
     const wasAnimating = deps.isAnimating?.() ?? false;
     deps.cancelInFlight();
     deps.newCycle();
@@ -662,12 +678,6 @@ var SCRIM_PRESETS = Object.freeze({
   }
 });
 
-// src/core/primitives/hot-path-thresholds.ts
-var SIZE_WRITE_EPSILON = 0.5;
-var OPACITY_WRITE_EPSILON = 5e-3;
-var POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
-var RANGE_DIVISION_EPSILON = 1e-4;
-
 // src/core/primitives/opacity-dedup.ts
 var WriteSentinel = class {
   constructor() {
@@ -2597,6 +2607,7 @@ var BottomSheetCore = class {
     __publicField(this, "lifecycle");
     __publicField(this, "closeOnBack");
     __publicField(this, "routedTo");
+    __publicField(this, "fitContentToSnap");
     __publicField(this, "persistent");
     __publicField(this, "disableCloseFlag");
     __publicField(this, "disableDragFlag");
@@ -2710,6 +2721,7 @@ var BottomSheetCore = class {
     );
     this.closeOnBack = resolved.closeOnBack;
     this.routedTo = opts.routedTo;
+    this.fitContentToSnap = opts.fitContentToSnap === true;
     this.persistent = resolved.persistent;
     this.disableCloseFlag = resolved.disableClose;
     this.disableDragFlag = resolved.disableDrag;
@@ -2811,7 +2823,8 @@ var BottomSheetCore = class {
         closeOnBack: this.closeOnBack,
         closeOnRouteChange: this.closeOnRouteChange,
         persistKey: this.persistKey,
-        autoCollapseAfter
+        autoCollapseAfter,
+        fitContentToSnap: this.fitContentToSnap
       },
       isDestroyed: () => this.destroyed,
       isDragging: () => this.isDraggingAny(),
@@ -2863,6 +2876,11 @@ var BottomSheetCore = class {
         "[BottomSheet] closeOnBack/routedTo/closeOnRouteChange need routeFeature() \u2014 option ignored"
       );
     }
+    if (this.fitContentToSnap && !names.has("content-fit")) {
+      devWarn(
+        "[BottomSheet] fitContentToSnap needs contentFitFeature() \u2014 option ignored"
+      );
+    }
     if (this.persistKey && !names.has("persist")) {
       devWarn(
         "[BottomSheet] persistKey needs persistFeature() \u2014 snaps will not be saved"
@@ -4220,6 +4238,68 @@ function visualViewportFeature() {
   };
 }
 
+// src/core/features/content-fit.ts
+var INSET_VAR = "--bs-content-inset";
+var FIT_ATTR = "data-bs-fit-content";
+function contentFitFeature() {
+  return {
+    name: "content-fit",
+    install: (ctx) => {
+      const scroller = ctx.scrollContainer;
+      if (!ctx.options.fitContentToSnap || !scroller || typeof window === "undefined") {
+        return;
+      }
+      const sheet = ctx.element;
+      let inset = 0;
+      let unpaddedMax = -1;
+      let top = 0;
+      const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
+      const follow = (size) => {
+        if (unpaddedMax < 0) {
+          unpaddedMax = scroller.scrollHeight - scroller.clientHeight - inset;
+          top = scroller.scrollTop;
+        }
+        const limit = Math.max(0, unpaddedMax + hiddenAt(size));
+        if (top > limit) {
+          if (scroller.scrollTop > limit) scroller.scrollTop = limit;
+          top = limit;
+        }
+      };
+      const settle = () => {
+        if (ctx.isDestroyed()) return;
+        const size = ctx.getSize();
+        unpaddedMax = -1;
+        follow(size);
+        inset = hiddenAt(size);
+        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        unpaddedMax = -1;
+      };
+      const moving = () => ctx.isAnimating() || ctx.isDragging();
+      const whenIdle = () => {
+        if (!moving()) settle();
+      };
+      sheet.setAttribute(FIT_ATTR, "");
+      settle();
+      const offProgress = ctx.on(
+        "progress",
+        (p) => moving() ? follow(p.size) : settle()
+      );
+      const offSnap = ctx.on("snap", settle);
+      const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
+      observer?.observe(document.documentElement);
+      window.addEventListener("orientationchange", whenIdle);
+      return () => {
+        offProgress();
+        offSnap();
+        observer?.disconnect();
+        window.removeEventListener("orientationchange", whenIdle);
+        sheet.removeAttribute(FIT_ATTR);
+        sheet.style.removeProperty(INSET_VAR);
+      };
+    }
+  };
+}
+
 // src/core/default-features.ts
 function defaultEngineFeatures() {
   return [
@@ -4227,7 +4307,8 @@ function defaultEngineFeatures() {
     visualViewportFeature(),
     persistFeature(),
     autoCollapseFeature(),
-    routeFeature()
+    routeFeature(),
+    contentFitFeature()
   ];
 }
 
@@ -4323,6 +4404,7 @@ var BottomSheet = (props) => {
       disableDrag: props.disableDrag,
       dragFrom: props.dragFrom,
       dragFromContent: props.dragFromContent,
+      fitContentToSnap: props.fitContentToSnap,
       closeOnRouteChange: props.closeOnRouteChange,
       stackEffect: props.stackEffect,
       returnFocusTo: props.returnFocusTo

package/dist/solid.d.cts

@@ -94,6 +94,7 @@ type EngineOptions = {
     dragThreshold?: number;
     dragFrom?: DragFrom;
     dragFromContent?: boolean;
+    fitContentToSnap?: boolean;
     rubberBand?: boolean;
     backdropRange?: [number, number];
     screenRange?: [number, number];
@@ -140,6 +141,7 @@ type EngineFeatureOptions = {
     closeOnRouteChange: boolean;
     persistKey?: string;
     autoCollapseAfter?: number;
+    fitContentToSnap: boolean;
 };
 type EngineFeatureContext = {
     element: HTMLElement;
@@ -262,6 +264,7 @@ declare class BottomSheetCore {
     private lifecycle;
     private closeOnBack;
     private routedTo;
+    private fitContentToSnap;
     private persistent;
     private disableCloseFlag;
     private disableDragFlag;
@@ -432,6 +435,7 @@ type BottomSheetProps<TId extends string = string> = {
     disableDrag?: boolean;
     dragFrom?: EngineOptions["dragFrom"];
     dragFromContent?: boolean;
+    fitContentToSnap?: boolean;
     closeOnRouteChange?: boolean;
     stackEffect?: boolean;
     teleport?: boolean;

package/dist/solid.d.ts

@@ -94,6 +94,7 @@ type EngineOptions = {
     dragThreshold?: number;
     dragFrom?: DragFrom;
     dragFromContent?: boolean;
+    fitContentToSnap?: boolean;
     rubberBand?: boolean;
     backdropRange?: [number, number];
     screenRange?: [number, number];
@@ -140,6 +141,7 @@ type EngineFeatureOptions = {
     closeOnRouteChange: boolean;
     persistKey?: string;
     autoCollapseAfter?: number;
+    fitContentToSnap: boolean;
 };
 type EngineFeatureContext = {
     element: HTMLElement;
@@ -262,6 +264,7 @@ declare class BottomSheetCore {
     private lifecycle;
     private closeOnBack;
     private routedTo;
+    private fitContentToSnap;
     private persistent;
     private disableCloseFlag;
     private disableDragFlag;
@@ -432,6 +435,7 @@ type BottomSheetProps<TId extends string = string> = {
     disableDrag?: boolean;
     dragFrom?: EngineOptions["dragFrom"];
     dragFromContent?: boolean;
+    fitContentToSnap?: boolean;
     closeOnRouteChange?: boolean;
     stackEffect?: boolean;
     teleport?: boolean;

package/dist/solid.js

@@ -376,14 +376,26 @@ function notifyLinkedSheets(sheets, self) {
   }
 }
 
+// src/core/primitives/hot-path-thresholds.ts
+var SIZE_WRITE_EPSILON = 0.5;
+var OPACITY_WRITE_EPSILON = 5e-3;
+var POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
+var RANGE_DIVISION_EPSILON = 1e-4;
+
 // src/core/features/resize-observer.ts
 function installResizeObserver(deps) {
   if (typeof window === "undefined") {
     return () => {
     };
   }
+  const seatFor = () => {
+    const snap = deps.resolveActiveSnap();
+    const max = deps.getMaxAxisSize();
+    return { target: snap ? Math.min(snap.size, max) : null, max };
+  };
   const onResize = () => {
     if (deps.isDestroyed()) return;
+    const before = seatFor();
     deps.recomputeSnaps();
     const mode = deps.getMode();
     const isVerticalAxis = mode === "bottom" || mode === "top";
@@ -392,6 +404,10 @@ function installResizeObserver(deps) {
     if (viewportSize2 > 0 && viewportSize2 < max) {
       deps.setMaxAxisSize(viewportSize2);
     }
+    const after = seatFor();
+    if (before.target !== null && after.target !== null && Math.abs(after.target - before.target) < SIZE_WRITE_EPSILON && Math.abs(after.max - before.max) < SIZE_WRITE_EPSILON) {
+      return;
+    }
     const wasAnimating = deps.isAnimating?.() ?? false;
     deps.cancelInFlight();
     deps.newCycle();
@@ -660,12 +676,6 @@ var SCRIM_PRESETS = Object.freeze({
   }
 });
 
-// src/core/primitives/hot-path-thresholds.ts
-var SIZE_WRITE_EPSILON = 0.5;
-var OPACITY_WRITE_EPSILON = 5e-3;
-var POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
-var RANGE_DIVISION_EPSILON = 1e-4;
-
 // src/core/primitives/opacity-dedup.ts
 var WriteSentinel = class {
   constructor() {
@@ -2595,6 +2605,7 @@ var BottomSheetCore = class {
     __publicField(this, "lifecycle");
     __publicField(this, "closeOnBack");
     __publicField(this, "routedTo");
+    __publicField(this, "fitContentToSnap");
     __publicField(this, "persistent");
     __publicField(this, "disableCloseFlag");
     __publicField(this, "disableDragFlag");
@@ -2708,6 +2719,7 @@ var BottomSheetCore = class {
     );
     this.closeOnBack = resolved.closeOnBack;
     this.routedTo = opts.routedTo;
+    this.fitContentToSnap = opts.fitContentToSnap === true;
     this.persistent = resolved.persistent;
     this.disableCloseFlag = resolved.disableClose;
     this.disableDragFlag = resolved.disableDrag;
@@ -2809,7 +2821,8 @@ var BottomSheetCore = class {
         closeOnBack: this.closeOnBack,
         closeOnRouteChange: this.closeOnRouteChange,
         persistKey: this.persistKey,
-        autoCollapseAfter
+        autoCollapseAfter,
+        fitContentToSnap: this.fitContentToSnap
       },
       isDestroyed: () => this.destroyed,
       isDragging: () => this.isDraggingAny(),
@@ -2861,6 +2874,11 @@ var BottomSheetCore = class {
         "[BottomSheet] closeOnBack/routedTo/closeOnRouteChange need routeFeature() \u2014 option ignored"
       );
     }
+    if (this.fitContentToSnap && !names.has("content-fit")) {
+      devWarn(
+        "[BottomSheet] fitContentToSnap needs contentFitFeature() \u2014 option ignored"
+      );
+    }
     if (this.persistKey && !names.has("persist")) {
       devWarn(
         "[BottomSheet] persistKey needs persistFeature() \u2014 snaps will not be saved"
@@ -4218,6 +4236,68 @@ function visualViewportFeature() {
   };
 }
 
+// src/core/features/content-fit.ts
+var INSET_VAR = "--bs-content-inset";
+var FIT_ATTR = "data-bs-fit-content";
+function contentFitFeature() {
+  return {
+    name: "content-fit",
+    install: (ctx) => {
+      const scroller = ctx.scrollContainer;
+      if (!ctx.options.fitContentToSnap || !scroller || typeof window === "undefined") {
+        return;
+      }
+      const sheet = ctx.element;
+      let inset = 0;
+      let unpaddedMax = -1;
+      let top = 0;
+      const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
+      const follow = (size) => {
+        if (unpaddedMax < 0) {
+          unpaddedMax = scroller.scrollHeight - scroller.clientHeight - inset;
+          top = scroller.scrollTop;
+        }
+        const limit = Math.max(0, unpaddedMax + hiddenAt(size));
+        if (top > limit) {
+          if (scroller.scrollTop > limit) scroller.scrollTop = limit;
+          top = limit;
+        }
+      };
+      const settle = () => {
+        if (ctx.isDestroyed()) return;
+        const size = ctx.getSize();
+        unpaddedMax = -1;
+        follow(size);
+        inset = hiddenAt(size);
+        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        unpaddedMax = -1;
+      };
+      const moving = () => ctx.isAnimating() || ctx.isDragging();
+      const whenIdle = () => {
+        if (!moving()) settle();
+      };
+      sheet.setAttribute(FIT_ATTR, "");
+      settle();
+      const offProgress = ctx.on(
+        "progress",
+        (p) => moving() ? follow(p.size) : settle()
+      );
+      const offSnap = ctx.on("snap", settle);
+      const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
+      observer?.observe(document.documentElement);
+      window.addEventListener("orientationchange", whenIdle);
+      return () => {
+        offProgress();
+        offSnap();
+        observer?.disconnect();
+        window.removeEventListener("orientationchange", whenIdle);
+        sheet.removeAttribute(FIT_ATTR);
+        sheet.style.removeProperty(INSET_VAR);
+      };
+    }
+  };
+}
+
 // src/core/default-features.ts
 function defaultEngineFeatures() {
   return [
@@ -4225,7 +4305,8 @@ function defaultEngineFeatures() {
     visualViewportFeature(),
     persistFeature(),
     autoCollapseFeature(),
-    routeFeature()
+    routeFeature(),
+    contentFitFeature()
   ];
 }
 
@@ -4321,6 +4402,7 @@ var BottomSheet = (props) => {
       disableDrag: props.disableDrag,
       dragFrom: props.dragFrom,
       dragFromContent: props.dragFromContent,
+      fitContentToSnap: props.fitContentToSnap,
       closeOnRouteChange: props.closeOnRouteChange,
       stackEffect: props.stackEffect,
       returnFocusTo: props.returnFocusTo