@surdeddd/bottom-sheet 0.9.0 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/README.md +108 -66
  2. package/dist/{BottomSheetEngine-CBRcBwV-.d.ts → BottomSheetEngine-DRjCU73e.d.ts} +6 -5
  3. package/dist/{BottomSheetEngine-BcyruNP1.d.cts → BottomSheetEngine-DzsIwD28.d.cts} +6 -5
  4. package/dist/element.cjs +161 -99
  5. package/dist/element.d.cts +1 -1
  6. package/dist/element.d.ts +1 -1
  7. package/dist/element.iife.global.js +2 -2
  8. package/dist/element.js +161 -99
  9. package/dist/index.cjs +155 -115
  10. package/dist/index.d.cts +2 -2
  11. package/dist/index.d.ts +2 -2
  12. package/dist/index.js +155 -115
  13. package/dist/integrations/formik.d.cts +1 -1
  14. package/dist/integrations/formik.d.ts +1 -1
  15. package/dist/integrations/react-hook-form.d.cts +1 -1
  16. package/dist/integrations/react-hook-form.d.ts +1 -1
  17. package/dist/overlay.cjs +34 -25
  18. package/dist/overlay.d.cts +3 -0
  19. package/dist/overlay.d.ts +3 -0
  20. package/dist/overlay.js +34 -25
  21. package/dist/preact.d.cts +2 -1
  22. package/dist/preact.d.ts +2 -1
  23. package/dist/qwik.cjs +179 -93
  24. package/dist/qwik.d.cts +11 -2
  25. package/dist/qwik.d.ts +11 -2
  26. package/dist/qwik.js +179 -93
  27. package/dist/react.cjs +266 -181
  28. package/dist/react.d.cts +26 -4
  29. package/dist/react.d.ts +26 -4
  30. package/dist/react.js +266 -181
  31. package/dist/solid.cjs +145 -92
  32. package/dist/solid.d.cts +14 -4
  33. package/dist/solid.d.ts +14 -4
  34. package/dist/solid.js +145 -92
  35. package/dist/solid.source.jsx +145 -92
  36. package/dist/styles.css +17 -1
  37. package/dist/svelte-core.cjs +128 -90
  38. package/dist/svelte-core.js +128 -90
  39. package/dist/svelte-src/BottomSheet.svelte +6 -0
  40. package/dist/svelte.cjs +130 -90
  41. package/dist/svelte.d.cts +2 -0
  42. package/dist/svelte.d.ts +2 -0
  43. package/dist/svelte.js +130 -90
  44. package/dist/teleport-7uYNiEAT.d.cts +3 -0
  45. package/dist/teleport-7uYNiEAT.d.ts +3 -0
  46. package/dist/vue.cjs +136 -91
  47. package/dist/vue.d.cts +3 -1
  48. package/dist/vue.d.ts +3 -1
  49. package/dist/vue.js +136 -91
  50. package/package.json +6 -6
package/dist/index.js CHANGED
@@ -187,11 +187,18 @@ var resolveSnap = (point, mode, measureFit) => {
187
187
  return Math.max(0, el.getBoundingClientRect().width);
188
188
  };
189
189
 
190
+ // src/core/primitives/devWarn.ts
191
+ function devWarn(...args) {
192
+ if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" && typeof console !== "undefined") {
193
+ console.warn(...args);
194
+ }
195
+ }
196
+
190
197
  // src/core/primitives/snap-points.ts
191
198
  var resolveSnapList = (points, mode, measureFit) => points.map((p) => {
192
199
  const raw = resolveSnap(p.size, mode, measureFit);
193
200
  if (!Number.isFinite(raw) || raw < 0) {
194
- console.warn(
201
+ devWarn(
195
202
  `[BottomSheet] snap "${p.id}" resolved to invalid size (${String(p.size)} \u2192 ${raw}); clamped to 0.`
196
203
  );
197
204
  return { id: p.id, size: 0 };
@@ -203,7 +210,7 @@ var auditVhUsage = (points) => {
203
210
  for (const p of points) {
204
211
  if (typeof p.size !== "string") continue;
205
212
  if (!VH_NOT_DVH.test(p.size)) continue;
206
- console.warn(
213
+ devWarn(
207
214
  `[BottomSheet] snap "${p.id}" uses "vh" \u2014 prefer "dvh" on mobile (iOS Safari URL bar makes vh unstable). See https://web.dev/blog/viewport-units`
208
215
  );
209
216
  }
@@ -257,6 +264,26 @@ var findDragSettleTarget = (input) => {
257
264
  );
258
265
  };
259
266
 
267
+ // src/core/primitives/cancelable-emit.ts
268
+ function emitCancelable(emit, base, warnLabel) {
269
+ let cancelled = false;
270
+ let frozen = false;
271
+ emit({
272
+ ...base,
273
+ cancel: () => {
274
+ if (frozen) {
275
+ devWarn(
276
+ `[BottomSheet] ${warnLabel}.cancel() called asynchronously \u2014 ignored. cancel() must be invoked synchronously inside the listener.`
277
+ );
278
+ return;
279
+ }
280
+ cancelled = true;
281
+ }
282
+ });
283
+ frozen = true;
284
+ return cancelled;
285
+ }
286
+
260
287
  // src/core/primitives/snap-resolver.ts
261
288
  var SnapResolver = class {
262
289
  constructor(raw, allowed, mode, measureFit, onMaxAxisSizeChange) {
@@ -401,7 +428,9 @@ function notifyLinkedSheets(sheets, self) {
401
428
  try {
402
429
  if (linked.state.size === 0) continue;
403
430
  const ids = linked.getAllowedIds();
404
- const target = ids.find((id) => id !== "closed");
431
+ const resolved = linked.getResolvedSnaps();
432
+ const sizeOf = (id) => resolved.find((s) => s.id === id)?.size ?? 0;
433
+ const target = ids.find((id) => sizeOf(id) > 0);
405
434
  if (target && target !== linked.state.activeId) {
406
435
  void linked.snapTo(target);
407
436
  }
@@ -618,11 +647,15 @@ function installVisualViewport(deps) {
618
647
  if (clamp < deps.getMaxAxisSize()) {
619
648
  deps.setMaxAxisSize(clamp);
620
649
  }
650
+ const wasAnimating = deps.isAnimating?.() ?? false;
651
+ deps.cancelInFlight();
652
+ deps.newCycle();
621
653
  const max = deps.getMaxAxisSize();
622
654
  deps.setSize(Math.min(deps.getSize(), max));
623
655
  const current = deps.resolveActiveSnap();
624
656
  if (current && !deps.isDragging()) {
625
657
  deps.applySize(Math.min(current.size, max));
658
+ if (wasAnimating) deps.resyncAfterCancel?.();
626
659
  } else {
627
660
  deps.applySize(deps.getSize());
628
661
  }
@@ -763,6 +796,54 @@ function installFitObserver(deps) {
763
796
  };
764
797
  }
765
798
 
799
+ // src/core/features/max-height-controller.ts
800
+ function createMaxHeightController(deps) {
801
+ let maxHeightCap;
802
+ let maxHeightRaw;
803
+ const resolveCap = () => {
804
+ const raw = maxHeightRaw;
805
+ if (raw === void 0) {
806
+ maxHeightCap = void 0;
807
+ return;
808
+ }
809
+ if (typeof raw === "number") {
810
+ maxHeightCap = raw;
811
+ return;
812
+ }
813
+ if (typeof window === "undefined") return;
814
+ const measured = resolveSnap(raw, deps.mode);
815
+ maxHeightCap = measured > 0 ? measured : void 0;
816
+ };
817
+ const clampTo = () => {
818
+ if (maxHeightCap === void 0) return;
819
+ if (deps.getMaxAxisSize() > maxHeightCap) {
820
+ deps.setMaxAxisSize(maxHeightCap);
821
+ }
822
+ };
823
+ return {
824
+ setRadius(r) {
825
+ deps.element.style.setProperty(
826
+ "--bs-radius",
827
+ typeof r === "number" ? `${r}px` : r
828
+ );
829
+ },
830
+ setMaxHeight(h) {
831
+ const value = typeof h === "number" ? `${h}px` : h;
832
+ const axis = layoutAxis(deps.mode);
833
+ deps.element.style.setProperty(
834
+ axis === "height" ? "max-height" : "max-width",
835
+ value
836
+ );
837
+ maxHeightRaw = h;
838
+ resolveCap();
839
+ deps.recompute();
840
+ },
841
+ resolveCap,
842
+ clampTo,
843
+ getCap: () => maxHeightCap
844
+ };
845
+ }
846
+
766
847
  // src/core/features/fit-measurement.ts
767
848
  var measureSheetNatural = (element, content, vertical) => {
768
849
  if (!content) {
@@ -894,13 +975,6 @@ var WriteSentinel = class {
894
975
  }
895
976
  };
896
977
 
897
- // src/core/primitives/devWarn.ts
898
- function devWarn(...args) {
899
- if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" && typeof console !== "undefined") {
900
- console.warn(...args);
901
- }
902
- }
903
-
904
978
  // src/core/primitives/overlay-position.ts
905
979
  function resolveSheetAnchoredStyle(mode, position, inset) {
906
980
  const sizeOffset = `calc(var(--bs-size, 0px) + ${inset})`;
@@ -2547,8 +2621,7 @@ var BottomSheetEngine = class {
2547
2621
  __publicField(this, "disableCloseFlag");
2548
2622
  __publicField(this, "disableDragFlag");
2549
2623
  __publicField(this, "closeOnRouteChange");
2550
- __publicField(this, "maxHeightCap");
2551
- __publicField(this, "maxHeightRaw");
2624
+ __publicField(this, "maxHeight");
2552
2625
  __publicField(this, "snapPointsRaw");
2553
2626
  __publicField(this, "snaps");
2554
2627
  __publicField(this, "activeId");
@@ -2659,11 +2732,20 @@ var BottomSheetEngine = class {
2659
2732
  auditVhUsage(this.snapPointsRaw);
2660
2733
  this.auditDuplicateSnapIds(this.snapPointsRaw);
2661
2734
  this.rootEl = this.element.closest(".bs-root");
2735
+ this.maxHeight = createMaxHeightController({
2736
+ element: this.element,
2737
+ mode: this.mode,
2738
+ getMaxAxisSize: () => this.snaps.getMaxAxisSize(),
2739
+ setMaxAxisSize: (size) => {
2740
+ this.snaps.setMaxAxisSize(size);
2741
+ },
2742
+ recompute: () => this.recompute()
2743
+ });
2662
2744
  this.fitDeps = {
2663
2745
  element: this.element,
2664
2746
  scrollContainer: this.scrollContainer,
2665
2747
  mode: this.mode,
2666
- getMaxHeightCap: () => this.maxHeightCap
2748
+ getMaxHeightCap: () => this.maxHeight.getCap()
2667
2749
  };
2668
2750
  this.snaps = new SnapResolver(
2669
2751
  this.snapPointsRaw,
@@ -2774,7 +2856,7 @@ var BottomSheetEngine = class {
2774
2856
  }
2775
2857
  use(plugin) {
2776
2858
  if (this.destroyed) {
2777
- console.warn(
2859
+ devWarn(
2778
2860
  `[BottomSheet] use("${plugin.name}") called on destroyed engine \u2014 ignored.`
2779
2861
  );
2780
2862
  return this;
@@ -2816,6 +2898,9 @@ var BottomSheetEngine = class {
2816
2898
  getAllowedIds() {
2817
2899
  return this.snaps.getAllowedIds().slice();
2818
2900
  }
2901
+ getResolvedSnaps() {
2902
+ return this.snaps.getResolvedSnaps();
2903
+ }
2819
2904
  async snapTo(id, velocityOrOpts = 0, _skipBeforeSnap = false) {
2820
2905
  if (this.destroyed) return;
2821
2906
  const opts = typeof velocityOrOpts === "object" ? velocityOrOpts : { velocity: velocityOrOpts };
@@ -2824,11 +2909,11 @@ var BottomSheetEngine = class {
2824
2909
  if (externalSignal?.aborted) return;
2825
2910
  const target = this.snaps.findById(id);
2826
2911
  if (!target) {
2827
- console.warn(`[BottomSheet] unknown snap id: ${id}`);
2912
+ devWarn(`[BottomSheet] unknown snap id: ${id}`);
2828
2913
  return;
2829
2914
  }
2830
2915
  if (!this.snaps.getAllowedIds().includes(id)) {
2831
- console.warn(`[BottomSheet] snap "${id}" is not in allowed list`);
2916
+ devWarn(`[BottomSheet] snap "${id}" is not in allowed list`);
2832
2917
  return;
2833
2918
  }
2834
2919
  if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
@@ -2960,42 +3045,11 @@ var BottomSheetEngine = class {
2960
3045
  }
2961
3046
  setRadius(r) {
2962
3047
  if (this.destroyed) return;
2963
- this.element.style.setProperty(
2964
- "--bs-radius",
2965
- typeof r === "number" ? `${r}px` : r
2966
- );
3048
+ this.maxHeight.setRadius(r);
2967
3049
  }
2968
3050
  setMaxHeight(h) {
2969
3051
  if (this.destroyed) return;
2970
- const value = typeof h === "number" ? `${h}px` : h;
2971
- const axis = layoutAxis(this.mode);
2972
- this.element.style.setProperty(
2973
- axis === "height" ? "max-height" : "max-width",
2974
- value
2975
- );
2976
- this.maxHeightRaw = h;
2977
- this.resolveMaxHeightCap();
2978
- this.recompute();
2979
- }
2980
- resolveMaxHeightCap() {
2981
- const raw = this.maxHeightRaw;
2982
- if (raw === void 0) {
2983
- this.maxHeightCap = void 0;
2984
- return;
2985
- }
2986
- if (typeof raw === "number") {
2987
- this.maxHeightCap = raw;
2988
- return;
2989
- }
2990
- if (typeof window === "undefined") return;
2991
- const measured = resolveSnap(raw, this.mode);
2992
- this.maxHeightCap = measured > 0 ? measured : void 0;
2993
- }
2994
- clampToMaxHeight() {
2995
- if (this.maxHeightCap === void 0) return;
2996
- if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
2997
- this.snaps.setMaxAxisSize(this.maxHeightCap);
2998
- }
3052
+ this.maxHeight.setMaxHeight(h);
2999
3053
  }
3000
3054
  setAllowed(ids, snap) {
3001
3055
  if (this.destroyed) return;
@@ -3083,7 +3137,7 @@ var BottomSheetEngine = class {
3083
3137
  };
3084
3138
  const host = this.screenComponent?.parentElement;
3085
3139
  if (!host) {
3086
- console.warn(
3140
+ devWarn(
3087
3141
  "[BottomSheet] setScrimStages: no scrim element mounted \u2014 pass `scrim` to the engine first."
3088
3142
  );
3089
3143
  return () => {
@@ -3133,9 +3187,9 @@ var BottomSheetEngine = class {
3133
3187
  }
3134
3188
  recompute() {
3135
3189
  if (this.destroyed) return;
3136
- this.resolveMaxHeightCap();
3190
+ this.maxHeight.resolveCap();
3137
3191
  this.snaps.recompute();
3138
- this.clampToMaxHeight();
3192
+ this.maxHeight.clampTo();
3139
3193
  this.scrim.invalidateOpacityCache();
3140
3194
  if (this.gesture?.isDragging) return;
3141
3195
  const current = this.snaps.findById(this.activeId);
@@ -3185,42 +3239,18 @@ var BottomSheetEngine = class {
3185
3239
  return this.currentAbort.signal;
3186
3240
  }
3187
3241
  emitBeforeSnap(target, previousId) {
3188
- let cancelled = false;
3189
- let frozen = false;
3190
- this.emit("before-snap", {
3191
- id: target.id,
3192
- size: target.size,
3193
- previousId,
3194
- cancel: () => {
3195
- if (frozen) {
3196
- console.warn(
3197
- "[BottomSheet] before-snap.cancel() called asynchronously \u2014 ignored. cancel() must be invoked synchronously inside the listener."
3198
- );
3199
- return;
3200
- }
3201
- cancelled = true;
3202
- }
3203
- });
3204
- frozen = true;
3205
- return cancelled;
3242
+ return emitCancelable(
3243
+ (payload) => this.emit("before-snap", payload),
3244
+ { id: target.id, size: target.size, previousId },
3245
+ "before-snap"
3246
+ );
3206
3247
  }
3207
3248
  emitBeforeClose(reason) {
3208
- let cancelled = false;
3209
- let frozen = false;
3210
- this.emit("before-close", {
3211
- reason,
3212
- cancel: () => {
3213
- if (frozen) {
3214
- console.warn(
3215
- "[BottomSheet] before-close.cancel() called asynchronously \u2014 ignored. cancel() must be invoked synchronously inside the listener."
3216
- );
3217
- return;
3218
- }
3219
- cancelled = true;
3220
- }
3221
- });
3222
- frozen = true;
3223
- return cancelled;
3249
+ return emitCancelable(
3250
+ (payload) => this.emit("before-close", payload),
3251
+ { reason },
3252
+ "before-close"
3253
+ );
3224
3254
  }
3225
3255
  applyAutoAriaLabelledBy() {
3226
3256
  if (typeof document === "undefined") return;
@@ -3235,16 +3265,16 @@ var BottomSheetEngine = class {
3235
3265
  this.element.setAttribute("aria-labelledby", titled.id);
3236
3266
  }
3237
3267
  recomputeSnaps() {
3238
- this.resolveMaxHeightCap();
3268
+ this.maxHeight.resolveCap();
3239
3269
  this.snaps.setRaw(this.snapPointsRaw);
3240
- this.clampToMaxHeight();
3270
+ this.maxHeight.clampTo();
3241
3271
  this.scrim.invalidateOpacityCache();
3242
3272
  }
3243
3273
  auditDuplicateSnapIds(points) {
3244
3274
  const seen = /* @__PURE__ */ new Set();
3245
3275
  for (const p of points) {
3246
3276
  if (seen.has(p.id)) {
3247
- console.warn(
3277
+ devWarn(
3248
3278
  `[BottomSheet] duplicate snap id "${p.id}" \u2014 only the first occurrence is reachable.`
3249
3279
  );
3250
3280
  }
@@ -3411,7 +3441,15 @@ var BottomSheetEngine = class {
3411
3441
  setSize: (size) => {
3412
3442
  this.size = size;
3413
3443
  },
3414
- applySize: (size) => this.applySize(size)
3444
+ applySize: (size) => this.applySize(size),
3445
+ cancelInFlight: () => {
3446
+ this.animation.cancel();
3447
+ },
3448
+ newCycle: () => {
3449
+ this.newCycle();
3450
+ },
3451
+ isAnimating: () => this.animation.isAnimating,
3452
+ resyncAfterCancel: () => this.resyncAfterResize()
3415
3453
  }));
3416
3454
  }
3417
3455
  this.teardowns.add(installSliderKeyboard({
@@ -3688,7 +3726,7 @@ function installOverlaySwipe(deps) {
3688
3726
  };
3689
3727
  }
3690
3728
 
3691
- // src/core/overlay.ts
3729
+ // src/core/overlay-options.ts
3692
3730
  var OVERLAY_PRESETS = Object.freeze({
3693
3731
  sheet: Object.freeze({
3694
3732
  enterAnimation: "slide",
@@ -3719,6 +3757,8 @@ var OVERLAY_PRESETS = Object.freeze({
3719
3757
  swipeToClose: false
3720
3758
  })
3721
3759
  });
3760
+
3761
+ // src/core/overlay.ts
3722
3762
  var OverlayEngine = class {
3723
3763
  constructor(opts) {
3724
3764
  __publicField(this, "id", nextInstanceId("ovl"));
@@ -3795,7 +3835,7 @@ var OverlayEngine = class {
3795
3835
  this.onOpenCb = opts.onOpen;
3796
3836
  this.onCloseCb = opts.onClose;
3797
3837
  if (this.peekRaw !== void 0 && this.edge !== "bottom") {
3798
- console.warn(
3838
+ devWarn(
3799
3839
  "[OverlayEngine] `peek` is only supported on edge: 'bottom' \u2014 ignoring."
3800
3840
  );
3801
3841
  this.peekRaw = void 0;
@@ -3862,10 +3902,9 @@ var OverlayEngine = class {
3862
3902
  this.element.style.opacity = "1";
3863
3903
  if (this.backdrop) {
3864
3904
  this.backdrop.style.opacity = String(this.backdropOpacity);
3865
- this.backdrop.style.pointerEvents = this.backdropOpacity > 0 ? "auto" : "none";
3905
+ this.syncBackdropPointerEvents();
3866
3906
  if (this.backdropFilter) {
3867
- this.backdrop.style.backdropFilter = this.backdropFilter;
3868
- this.backdrop.style.webkitBackdropFilter = this.backdropFilter;
3907
+ this.applyBackdropFilter(this.backdropFilter);
3869
3908
  }
3870
3909
  }
3871
3910
  try {
@@ -3885,8 +3924,7 @@ var OverlayEngine = class {
3885
3924
  this.backdrop.style.opacity = "0";
3886
3925
  this.backdrop.style.pointerEvents = "none";
3887
3926
  if (this.backdropFilter) {
3888
- this.backdrop.style.backdropFilter = "";
3889
- this.backdrop.style.webkitBackdropFilter = "";
3927
+ this.applyBackdropFilter(void 0);
3890
3928
  }
3891
3929
  }
3892
3930
  this.element.setAttribute("data-state", "closed");
@@ -3944,8 +3982,7 @@ var OverlayEngine = class {
3944
3982
  this.backdrop.style.opacity = "0";
3945
3983
  this.backdrop.style.pointerEvents = "none";
3946
3984
  if (this.backdropFilter) {
3947
- this.backdrop.style.backdropFilter = "";
3948
- this.backdrop.style.webkitBackdropFilter = "";
3985
+ this.applyBackdropFilter(void 0);
3949
3986
  }
3950
3987
  }
3951
3988
  this.releaseInteractiveListeners();
@@ -3993,20 +4030,14 @@ var OverlayEngine = class {
3993
4030
  this.backdropOpacity = opacity;
3994
4031
  if (this.isOpen_ && this.backdrop) {
3995
4032
  this.backdrop.style.opacity = String(opacity);
4033
+ this.syncBackdropPointerEvents();
3996
4034
  }
3997
4035
  }
3998
4036
  setBackdropFilter(filter) {
3999
4037
  if (this.destroyed) return;
4000
4038
  this.backdropFilter = filter;
4001
4039
  if (!this.isOpen_ || !this.backdrop) return;
4002
- const style = this.backdrop.style;
4003
- if (filter) {
4004
- this.backdrop.style.backdropFilter = filter;
4005
- style.webkitBackdropFilter = filter;
4006
- } else {
4007
- this.backdrop.style.backdropFilter = "";
4008
- style.webkitBackdropFilter = "";
4009
- }
4040
+ this.applyBackdropFilter(filter);
4010
4041
  }
4011
4042
  setSwipeToClose(config) {
4012
4043
  if (this.destroyed) return;
@@ -4075,16 +4106,10 @@ var OverlayEngine = class {
4075
4106
  if (this.isOpen_ && this.backdrop) {
4076
4107
  if (merged.backdropOpacity !== void 0) {
4077
4108
  this.backdrop.style.opacity = String(this.backdropOpacity);
4109
+ this.syncBackdropPointerEvents();
4078
4110
  }
4079
4111
  if (merged.backdropFilter !== void 0) {
4080
- const style = this.backdrop.style;
4081
- if (this.backdropFilter) {
4082
- this.backdrop.style.backdropFilter = this.backdropFilter;
4083
- style.webkitBackdropFilter = this.backdropFilter;
4084
- } else {
4085
- this.backdrop.style.backdropFilter = "";
4086
- style.webkitBackdropFilter = "";
4087
- }
4112
+ this.applyBackdropFilter(this.backdropFilter);
4088
4113
  }
4089
4114
  }
4090
4115
  if (opts.duration !== void 0) this.duration = opts.duration;
@@ -4219,6 +4244,21 @@ var OverlayEngine = class {
4219
4244
  this.backdrop.style.pointerEvents = "none";
4220
4245
  }
4221
4246
  }
4247
+ syncBackdropPointerEvents() {
4248
+ if (!this.backdrop) return;
4249
+ this.backdrop.style.pointerEvents = this.backdropOpacity > 0 ? "auto" : "none";
4250
+ }
4251
+ applyBackdropFilter(filter) {
4252
+ if (!this.backdrop) return;
4253
+ const style = this.backdrop.style;
4254
+ if (filter) {
4255
+ this.backdrop.style.backdropFilter = filter;
4256
+ style.webkitBackdropFilter = filter;
4257
+ } else {
4258
+ this.backdrop.style.backdropFilter = "";
4259
+ style.webkitBackdropFilter = "";
4260
+ }
4261
+ }
4222
4262
  setWillChange(on) {
4223
4263
  this.element.style.willChange = on ? "transform, opacity" : "";
4224
4264
  if (this.backdrop) {
@@ -1,4 +1,4 @@
1
- import { e as SheetEventMap } from '../BottomSheetEngine-BcyruNP1.cjs';
1
+ import { d as SheetEventMap } from '../BottomSheetEngine-DzsIwD28.cjs';
2
2
  import '../transform-jVfAikE9.cjs';
3
3
 
4
4
  type FormikStateLike = {
@@ -1,4 +1,4 @@
1
- import { e as SheetEventMap } from '../BottomSheetEngine-CBRcBwV-.js';
1
+ import { d as SheetEventMap } from '../BottomSheetEngine-DRjCU73e.js';
2
2
  import '../transform-jVfAikE9.js';
3
3
 
4
4
  type FormikStateLike = {
@@ -1,4 +1,4 @@
1
- import { e as SheetEventMap } from '../BottomSheetEngine-BcyruNP1.cjs';
1
+ import { d as SheetEventMap } from '../BottomSheetEngine-DzsIwD28.cjs';
2
2
  import '../transform-jVfAikE9.cjs';
3
3
 
4
4
  type RhfFormStateLike = {
@@ -1,4 +1,4 @@
1
- import { e as SheetEventMap } from '../BottomSheetEngine-CBRcBwV-.js';
1
+ import { d as SheetEventMap } from '../BottomSheetEngine-DRjCU73e.js';
2
2
  import '../transform-jVfAikE9.js';
3
3
 
4
4
  type RhfFormStateLike = {
package/dist/overlay.cjs CHANGED
@@ -120,6 +120,13 @@ var resolveSnap = (point, mode, measureFit) => {
120
120
  }
121
121
  };
122
122
 
123
+ // src/core/primitives/devWarn.ts
124
+ function devWarn(...args) {
125
+ if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" && typeof console !== "undefined") {
126
+ console.warn(...args);
127
+ }
128
+ }
129
+
123
130
  // src/core/primitives/instance-id.ts
124
131
  var counters = {};
125
132
  function nextInstanceId(prefix) {
@@ -522,7 +529,7 @@ function installOverlaySwipe(deps) {
522
529
  };
523
530
  }
524
531
 
525
- // src/core/overlay.ts
532
+ // src/core/overlay-options.ts
526
533
  var OVERLAY_PRESETS = Object.freeze({
527
534
  sheet: Object.freeze({
528
535
  enterAnimation: "slide",
@@ -553,6 +560,8 @@ var OVERLAY_PRESETS = Object.freeze({
553
560
  swipeToClose: false
554
561
  })
555
562
  });
563
+
564
+ // src/core/overlay.ts
556
565
  var OverlayEngine = class {
557
566
  constructor(opts) {
558
567
  __publicField(this, "id", nextInstanceId("ovl"));
@@ -629,7 +638,7 @@ var OverlayEngine = class {
629
638
  this.onOpenCb = opts.onOpen;
630
639
  this.onCloseCb = opts.onClose;
631
640
  if (this.peekRaw !== void 0 && this.edge !== "bottom") {
632
- console.warn(
641
+ devWarn(
633
642
  "[OverlayEngine] `peek` is only supported on edge: 'bottom' \u2014 ignoring."
634
643
  );
635
644
  this.peekRaw = void 0;
@@ -696,10 +705,9 @@ var OverlayEngine = class {
696
705
  this.element.style.opacity = "1";
697
706
  if (this.backdrop) {
698
707
  this.backdrop.style.opacity = String(this.backdropOpacity);
699
- this.backdrop.style.pointerEvents = this.backdropOpacity > 0 ? "auto" : "none";
708
+ this.syncBackdropPointerEvents();
700
709
  if (this.backdropFilter) {
701
- this.backdrop.style.backdropFilter = this.backdropFilter;
702
- this.backdrop.style.webkitBackdropFilter = this.backdropFilter;
710
+ this.applyBackdropFilter(this.backdropFilter);
703
711
  }
704
712
  }
705
713
  try {
@@ -719,8 +727,7 @@ var OverlayEngine = class {
719
727
  this.backdrop.style.opacity = "0";
720
728
  this.backdrop.style.pointerEvents = "none";
721
729
  if (this.backdropFilter) {
722
- this.backdrop.style.backdropFilter = "";
723
- this.backdrop.style.webkitBackdropFilter = "";
730
+ this.applyBackdropFilter(void 0);
724
731
  }
725
732
  }
726
733
  this.element.setAttribute("data-state", "closed");
@@ -778,8 +785,7 @@ var OverlayEngine = class {
778
785
  this.backdrop.style.opacity = "0";
779
786
  this.backdrop.style.pointerEvents = "none";
780
787
  if (this.backdropFilter) {
781
- this.backdrop.style.backdropFilter = "";
782
- this.backdrop.style.webkitBackdropFilter = "";
788
+ this.applyBackdropFilter(void 0);
783
789
  }
784
790
  }
785
791
  this.releaseInteractiveListeners();
@@ -827,20 +833,14 @@ var OverlayEngine = class {
827
833
  this.backdropOpacity = opacity;
828
834
  if (this.isOpen_ && this.backdrop) {
829
835
  this.backdrop.style.opacity = String(opacity);
836
+ this.syncBackdropPointerEvents();
830
837
  }
831
838
  }
832
839
  setBackdropFilter(filter) {
833
840
  if (this.destroyed) return;
834
841
  this.backdropFilter = filter;
835
842
  if (!this.isOpen_ || !this.backdrop) return;
836
- const style = this.backdrop.style;
837
- if (filter) {
838
- this.backdrop.style.backdropFilter = filter;
839
- style.webkitBackdropFilter = filter;
840
- } else {
841
- this.backdrop.style.backdropFilter = "";
842
- style.webkitBackdropFilter = "";
843
- }
843
+ this.applyBackdropFilter(filter);
844
844
  }
845
845
  setSwipeToClose(config) {
846
846
  if (this.destroyed) return;
@@ -909,16 +909,10 @@ var OverlayEngine = class {
909
909
  if (this.isOpen_ && this.backdrop) {
910
910
  if (merged.backdropOpacity !== void 0) {
911
911
  this.backdrop.style.opacity = String(this.backdropOpacity);
912
+ this.syncBackdropPointerEvents();
912
913
  }
913
914
  if (merged.backdropFilter !== void 0) {
914
- const style = this.backdrop.style;
915
- if (this.backdropFilter) {
916
- this.backdrop.style.backdropFilter = this.backdropFilter;
917
- style.webkitBackdropFilter = this.backdropFilter;
918
- } else {
919
- this.backdrop.style.backdropFilter = "";
920
- style.webkitBackdropFilter = "";
921
- }
915
+ this.applyBackdropFilter(this.backdropFilter);
922
916
  }
923
917
  }
924
918
  if (opts.duration !== void 0) this.duration = opts.duration;
@@ -1053,6 +1047,21 @@ var OverlayEngine = class {
1053
1047
  this.backdrop.style.pointerEvents = "none";
1054
1048
  }
1055
1049
  }
1050
+ syncBackdropPointerEvents() {
1051
+ if (!this.backdrop) return;
1052
+ this.backdrop.style.pointerEvents = this.backdropOpacity > 0 ? "auto" : "none";
1053
+ }
1054
+ applyBackdropFilter(filter) {
1055
+ if (!this.backdrop) return;
1056
+ const style = this.backdrop.style;
1057
+ if (filter) {
1058
+ this.backdrop.style.backdropFilter = filter;
1059
+ style.webkitBackdropFilter = filter;
1060
+ } else {
1061
+ this.backdrop.style.backdropFilter = "";
1062
+ style.webkitBackdropFilter = "";
1063
+ }
1064
+ }
1056
1065
  setWillChange(on) {
1057
1066
  this.element.style.willChange = on ? "transform, opacity" : "";
1058
1067
  if (this.backdrop) {
@@ -75,6 +75,7 @@ type OverlayEventMap = {
75
75
  "before-open": void;
76
76
  "before-close": void;
77
77
  };
78
+
78
79
  type Listener<K extends keyof OverlayEventMap> = (payload: OverlayEventMap[K]) => void;
79
80
  declare class OverlayEngine {
80
81
  private id;
@@ -148,6 +149,8 @@ declare class OverlayEngine {
148
149
  private maybeMount;
149
150
  private restoreMount;
150
151
  private applyClosedStyles;
152
+ private syncBackdropPointerEvents;
153
+ private applyBackdropFilter;
151
154
  private setWillChange;
152
155
  private awaitTransition;
153
156
  private installInteractiveListeners;
package/dist/overlay.d.ts CHANGED
@@ -75,6 +75,7 @@ type OverlayEventMap = {
75
75
  "before-open": void;
76
76
  "before-close": void;
77
77
  };
78
+
78
79
  type Listener<K extends keyof OverlayEventMap> = (payload: OverlayEventMap[K]) => void;
79
80
  declare class OverlayEngine {
80
81
  private id;
@@ -148,6 +149,8 @@ declare class OverlayEngine {
148
149
  private maybeMount;
149
150
  private restoreMount;
150
151
  private applyClosedStyles;
152
+ private syncBackdropPointerEvents;
153
+ private applyBackdropFilter;
151
154
  private setWillChange;
152
155
  private awaitTransition;
153
156
  private installInteractiveListeners;