@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.
- package/README.md +108 -66
- package/dist/{BottomSheetEngine-CBRcBwV-.d.ts → BottomSheetEngine-DRjCU73e.d.ts} +6 -5
- package/dist/{BottomSheetEngine-BcyruNP1.d.cts → BottomSheetEngine-DzsIwD28.d.cts} +6 -5
- package/dist/element.cjs +161 -99
- package/dist/element.d.cts +1 -1
- package/dist/element.d.ts +1 -1
- package/dist/element.iife.global.js +2 -2
- package/dist/element.js +161 -99
- package/dist/index.cjs +155 -115
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +155 -115
- package/dist/integrations/formik.d.cts +1 -1
- package/dist/integrations/formik.d.ts +1 -1
- package/dist/integrations/react-hook-form.d.cts +1 -1
- package/dist/integrations/react-hook-form.d.ts +1 -1
- package/dist/overlay.cjs +34 -25
- package/dist/overlay.d.cts +3 -0
- package/dist/overlay.d.ts +3 -0
- package/dist/overlay.js +34 -25
- package/dist/preact.d.cts +2 -1
- package/dist/preact.d.ts +2 -1
- package/dist/qwik.cjs +179 -93
- package/dist/qwik.d.cts +11 -2
- package/dist/qwik.d.ts +11 -2
- package/dist/qwik.js +179 -93
- package/dist/react.cjs +266 -181
- package/dist/react.d.cts +26 -4
- package/dist/react.d.ts +26 -4
- package/dist/react.js +266 -181
- package/dist/solid.cjs +145 -92
- package/dist/solid.d.cts +14 -4
- package/dist/solid.d.ts +14 -4
- package/dist/solid.js +145 -92
- package/dist/solid.source.jsx +145 -92
- package/dist/styles.css +17 -1
- package/dist/svelte-core.cjs +128 -90
- package/dist/svelte-core.js +128 -90
- package/dist/svelte-src/BottomSheet.svelte +6 -0
- package/dist/svelte.cjs +130 -90
- package/dist/svelte.d.cts +2 -0
- package/dist/svelte.d.ts +2 -0
- package/dist/svelte.js +130 -90
- package/dist/teleport-7uYNiEAT.d.cts +3 -0
- package/dist/teleport-7uYNiEAT.d.ts +3 -0
- package/dist/vue.cjs +136 -91
- package/dist/vue.d.cts +3 -1
- package/dist/vue.d.ts +3 -1
- package/dist/vue.js +136 -91
- 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
|
-
|
|
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
|
-
|
|
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
|
|
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, "
|
|
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.
|
|
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
|
-
|
|
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
|
-
|
|
2912
|
+
devWarn(`[BottomSheet] unknown snap id: ${id}`);
|
|
2828
2913
|
return;
|
|
2829
2914
|
}
|
|
2830
2915
|
if (!this.snaps.getAllowedIds().includes(id)) {
|
|
2831
|
-
|
|
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.
|
|
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
|
-
|
|
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
|
-
|
|
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.
|
|
3190
|
+
this.maxHeight.resolveCap();
|
|
3137
3191
|
this.snaps.recompute();
|
|
3138
|
-
this.
|
|
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
|
-
|
|
3189
|
-
|
|
3190
|
-
|
|
3191
|
-
|
|
3192
|
-
|
|
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
|
-
|
|
3209
|
-
|
|
3210
|
-
|
|
3211
|
-
|
|
3212
|
-
|
|
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.
|
|
3268
|
+
this.maxHeight.resolveCap();
|
|
3239
3269
|
this.snaps.setRaw(this.snapPointsRaw);
|
|
3240
|
-
this.
|
|
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
|
-
|
|
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
|
-
|
|
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.
|
|
3905
|
+
this.syncBackdropPointerEvents();
|
|
3866
3906
|
if (this.backdropFilter) {
|
|
3867
|
-
this.
|
|
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.
|
|
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.
|
|
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
|
-
|
|
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
|
-
|
|
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) {
|
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
|
-
|
|
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.
|
|
708
|
+
this.syncBackdropPointerEvents();
|
|
700
709
|
if (this.backdropFilter) {
|
|
701
|
-
this.
|
|
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.
|
|
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.
|
|
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
|
-
|
|
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
|
-
|
|
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) {
|
package/dist/overlay.d.cts
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;
|
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;
|