@surdeddd/bottom-sheet 0.21.0 → 0.21.2
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 +9 -0
- package/dist/{BottomSheetCore-CK8Rh1He.d.cts → BottomSheetCore-BHv6LPmS.d.cts} +1 -1
- package/dist/{BottomSheetCore-CIijwtdi.d.ts → BottomSheetCore-CK_mq14p.d.ts} +1 -1
- package/dist/{BottomSheetEngine-hLSAxzla.d.cts → BottomSheetEngine-mmFzIK1Z.d.cts} +1 -1
- package/dist/{BottomSheetEngine-CZglPsTF.d.ts → BottomSheetEngine-wLn6Q2kA.d.ts} +1 -1
- package/dist/core.cjs +31 -21
- package/dist/core.d.cts +2 -2
- package/dist/core.d.ts +2 -2
- package/dist/core.js +31 -21
- package/dist/debug.d.cts +1 -1
- package/dist/debug.d.ts +1 -1
- package/dist/element.cjs +37 -26
- package/dist/element.d.cts +2 -2
- package/dist/element.d.ts +2 -2
- package/dist/element.iife.global.js +2 -2
- package/dist/element.js +37 -26
- package/dist/features.d.cts +2 -2
- package/dist/features.d.ts +2 -2
- package/dist/{index-BqLHKOeM.d.ts → index-CWKv1Xy4.d.ts} +1 -1
- package/dist/{index-BEX-NHRJ.d.cts → index-juAyT76E.d.cts} +1 -1
- package/dist/index.cjs +31 -21
- package/dist/index.d.cts +4 -4
- package/dist/index.d.ts +4 -4
- package/dist/index.js +31 -21
- 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/preact.d.cts +2 -2
- package/dist/preact.d.ts +2 -2
- package/dist/qwik-lib/index.qwik.cjs +29 -19
- package/dist/qwik-lib/index.qwik.mjs +29 -19
- package/dist/qwik.cjs +31 -21
- package/dist/qwik.d.cts +2 -2
- package/dist/qwik.d.ts +2 -2
- package/dist/qwik.js +31 -21
- package/dist/react.cjs +31 -21
- package/dist/react.d.cts +3 -3
- package/dist/react.d.ts +3 -3
- package/dist/react.js +31 -21
- package/dist/solid.cjs +31 -21
- package/dist/solid.d.cts +1 -1
- package/dist/solid.d.ts +1 -1
- package/dist/solid.js +31 -21
- package/dist/solid.source.jsx +31 -21
- package/dist/svelte-core.cjs +31 -21
- package/dist/svelte-core.js +31 -21
- package/dist/svelte.cjs +31 -21
- package/dist/svelte.js +31 -21
- package/dist/vue.cjs +31 -21
- package/dist/vue.js +31 -21
- package/dist/webgl.d.cts +1 -1
- package/dist/webgl.d.ts +1 -1
- package/package.json +2 -2
|
@@ -359,13 +359,26 @@ function notifyLinkedSheets(sheets, self) {
|
|
|
359
359
|
}
|
|
360
360
|
}
|
|
361
361
|
}
|
|
362
|
+
const SIZE_WRITE_EPSILON = 0.5;
|
|
363
|
+
const OPACITY_WRITE_EPSILON = 5e-3;
|
|
364
|
+
const POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
|
|
365
|
+
const RANGE_DIVISION_EPSILON = 1e-4;
|
|
362
366
|
function installResizeObserver(deps) {
|
|
363
367
|
if (typeof window === "undefined") {
|
|
364
368
|
return () => {
|
|
365
369
|
};
|
|
366
370
|
}
|
|
371
|
+
const seatFor = () => {
|
|
372
|
+
const snap = deps.resolveActiveSnap();
|
|
373
|
+
const max = deps.getMaxAxisSize();
|
|
374
|
+
return {
|
|
375
|
+
target: snap ? Math.min(snap.size, max) : null,
|
|
376
|
+
max
|
|
377
|
+
};
|
|
378
|
+
};
|
|
367
379
|
const onResize = () => {
|
|
368
380
|
if (deps.isDestroyed()) return;
|
|
381
|
+
const before = seatFor();
|
|
369
382
|
deps.recomputeSnaps();
|
|
370
383
|
const mode = deps.getMode();
|
|
371
384
|
const isVerticalAxis = mode === "bottom" || mode === "top";
|
|
@@ -374,6 +387,10 @@ function installResizeObserver(deps) {
|
|
|
374
387
|
if (viewportSize2 > 0 && viewportSize2 < max) {
|
|
375
388
|
deps.setMaxAxisSize(viewportSize2);
|
|
376
389
|
}
|
|
390
|
+
const after = seatFor();
|
|
391
|
+
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) {
|
|
392
|
+
return;
|
|
393
|
+
}
|
|
377
394
|
const wasAnimating = deps.isAnimating?.() ?? false;
|
|
378
395
|
deps.cancelInFlight();
|
|
379
396
|
deps.newCycle();
|
|
@@ -635,10 +652,6 @@ const SCRIM_PRESETS = Object.freeze({
|
|
|
635
652
|
interactive: false
|
|
636
653
|
}
|
|
637
654
|
});
|
|
638
|
-
const SIZE_WRITE_EPSILON = 0.5;
|
|
639
|
-
const OPACITY_WRITE_EPSILON = 5e-3;
|
|
640
|
-
const POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
|
|
641
|
-
const RANGE_DIVISION_EPSILON = 1e-4;
|
|
642
655
|
class WriteSentinel {
|
|
643
656
|
constructor() {
|
|
644
657
|
__publicField(this, "last", -1);
|
|
@@ -783,7 +796,6 @@ class ScrimController {
|
|
|
783
796
|
__publicField(this, "backdrop");
|
|
784
797
|
__publicField(this, "mode");
|
|
785
798
|
__publicField(this, "isDestroyed");
|
|
786
|
-
__publicField(this, "isTopSheet");
|
|
787
799
|
__publicField(this, "getAllowedIds");
|
|
788
800
|
__publicField(this, "getResolvedSnaps");
|
|
789
801
|
__publicField(this, "snapToFn");
|
|
@@ -805,7 +817,6 @@ class ScrimController {
|
|
|
805
817
|
this.backdrop = deps.backdrop;
|
|
806
818
|
this.mode = deps.mode;
|
|
807
819
|
this.isDestroyed = deps.isDestroyed;
|
|
808
|
-
this.isTopSheet = deps.isTopSheet;
|
|
809
820
|
this.getAllowedIds = deps.getAllowedIds;
|
|
810
821
|
this.getResolvedSnaps = deps.getResolvedSnaps;
|
|
811
822
|
this.snapToFn = deps.snapTo;
|
|
@@ -856,8 +867,7 @@ class ScrimController {
|
|
|
856
867
|
if (this.backdrop) {
|
|
857
868
|
const [s, e] = this.backdropRange;
|
|
858
869
|
const range = Math.max(e - s, RANGE_DIVISION_EPSILON);
|
|
859
|
-
const
|
|
860
|
-
const backdropOpacity = this.isTopSheet() ? ramp : 0;
|
|
870
|
+
const backdropOpacity = Math.min(Math.max((progress - s) / range, 0), 1);
|
|
861
871
|
if (this.backdropOpacitySentinel.shouldWrite(backdropOpacity, OPACITY_WRITE_EPSILON)) {
|
|
862
872
|
this.backdrop.style.opacity = String(backdropOpacity);
|
|
863
873
|
}
|
|
@@ -2664,6 +2674,7 @@ class BottomSheetCore {
|
|
|
2664
2674
|
__publicField(this, "progressWriteSentinel", new WriteSentinel());
|
|
2665
2675
|
__publicField(this, "isTopSheet", true);
|
|
2666
2676
|
__publicField(this, "opening", false);
|
|
2677
|
+
__publicField(this, "promotedForOpen", false);
|
|
2667
2678
|
__publicField(this, "allowOvershoot", false);
|
|
2668
2679
|
__publicField(this, "progressPayload", {
|
|
2669
2680
|
value: 0,
|
|
@@ -2720,7 +2731,6 @@ class BottomSheetCore {
|
|
|
2720
2731
|
screenComponent: this.screenComponent,
|
|
2721
2732
|
backdrop: this.backdrop,
|
|
2722
2733
|
isDestroyed: () => this.destroyed,
|
|
2723
|
-
isTopSheet: () => this.isTopSheet,
|
|
2724
2734
|
getAllowedIds: () => this.snaps.getAllowedIds().slice(),
|
|
2725
2735
|
getResolvedSnaps: () => this.snaps.getResolvedSnaps().slice(),
|
|
2726
2736
|
snapTo: (id) => {
|
|
@@ -2968,6 +2978,7 @@ class BottomSheetCore {
|
|
|
2968
2978
|
if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
|
|
2969
2979
|
return;
|
|
2970
2980
|
}
|
|
2981
|
+
const resumingOpen = this.opening;
|
|
2971
2982
|
const signal = this.newCycle();
|
|
2972
2983
|
const onExternalAbort = () => {
|
|
2973
2984
|
this.animation.cancel();
|
|
@@ -2976,7 +2987,7 @@ class BottomSheetCore {
|
|
|
2976
2987
|
externalSignal?.addEventListener("abort", onExternalAbort, {
|
|
2977
2988
|
once: true
|
|
2978
2989
|
});
|
|
2979
|
-
const wasClosed = this.size === 0;
|
|
2990
|
+
const wasClosed = this.size === 0 || resumingOpen;
|
|
2980
2991
|
const previousId = this.activeId;
|
|
2981
2992
|
const previousSize = this.size;
|
|
2982
2993
|
this.scrollCache.cache(previousId, previousSize, target.size);
|
|
@@ -2985,7 +2996,10 @@ class BottomSheetCore {
|
|
|
2985
2996
|
const opensToRest = id === "closed" || rawTargetSize === 0;
|
|
2986
2997
|
if (wasClosed && !opensToRest) {
|
|
2987
2998
|
this.opening = true;
|
|
2988
|
-
|
|
2999
|
+
if (!resumingOpen) {
|
|
3000
|
+
this.promotedForOpen = true;
|
|
3001
|
+
sheetStack.promote(this.id);
|
|
3002
|
+
}
|
|
2989
3003
|
}
|
|
2990
3004
|
if (this.animation.viewTransitionsAvailable) {
|
|
2991
3005
|
this.currentViewTransition?.skipTransition?.();
|
|
@@ -3424,19 +3438,12 @@ class BottomSheetCore {
|
|
|
3424
3438
|
for (const anchor of this.anchors) anchor.syncZ(z + 1);
|
|
3425
3439
|
},
|
|
3426
3440
|
setIsTop: (isTop) => {
|
|
3427
|
-
if (this.isTopSheet === isTop) return;
|
|
3428
3441
|
this.isTopSheet = isTop;
|
|
3429
|
-
this.repaintScrim();
|
|
3430
3442
|
},
|
|
3431
3443
|
isOpen: () => this.size > 0 || this.opening,
|
|
3432
3444
|
setDepth: (depth) => this.applyStackDepth(depth)
|
|
3433
3445
|
}));
|
|
3434
3446
|
}
|
|
3435
|
-
repaintScrim() {
|
|
3436
|
-
if (this.destroyed) return;
|
|
3437
|
-
this.scrim.invalidateOpacityCache();
|
|
3438
|
-
this.scrim.applyOpacity(this.computeProgress(this.size), true);
|
|
3439
|
-
}
|
|
3440
3447
|
applyStackDepth(depth) {
|
|
3441
3448
|
if (!this.stackEffectEnabled) return;
|
|
3442
3449
|
this.element.setAttribute("data-stack-depth", String(depth));
|
|
@@ -3672,6 +3679,7 @@ class BottomSheetCore {
|
|
|
3672
3679
|
this.activeId = target.id;
|
|
3673
3680
|
if (previousSnapSize === 0 && target.size > 0) {
|
|
3674
3681
|
this.opening = true;
|
|
3682
|
+
this.promotedForOpen = true;
|
|
3675
3683
|
sheetStack.promote(this.id);
|
|
3676
3684
|
}
|
|
3677
3685
|
const settleCap = this.snaps.getMaxAxisSize();
|
|
@@ -3744,7 +3752,8 @@ class BottomSheetCore {
|
|
|
3744
3752
|
return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
|
|
3745
3753
|
}
|
|
3746
3754
|
handleOpen() {
|
|
3747
|
-
|
|
3755
|
+
if (this.promotedForOpen) this.promotedForOpen = false;
|
|
3756
|
+
else sheetStack.promote(this.id);
|
|
3748
3757
|
try {
|
|
3749
3758
|
this.lifecycle.install();
|
|
3750
3759
|
} catch (err) {
|
|
@@ -3776,6 +3785,7 @@ class BottomSheetCore {
|
|
|
3776
3785
|
}
|
|
3777
3786
|
handleClose() {
|
|
3778
3787
|
this.opening = false;
|
|
3788
|
+
this.promotedForOpen = false;
|
|
3779
3789
|
this.lifecycle.release();
|
|
3780
3790
|
sheetStack.update();
|
|
3781
3791
|
}
|
|
@@ -357,13 +357,26 @@ function notifyLinkedSheets(sheets, self) {
|
|
|
357
357
|
}
|
|
358
358
|
}
|
|
359
359
|
}
|
|
360
|
+
const SIZE_WRITE_EPSILON = 0.5;
|
|
361
|
+
const OPACITY_WRITE_EPSILON = 5e-3;
|
|
362
|
+
const POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
|
|
363
|
+
const RANGE_DIVISION_EPSILON = 1e-4;
|
|
360
364
|
function installResizeObserver(deps) {
|
|
361
365
|
if (typeof window === "undefined") {
|
|
362
366
|
return () => {
|
|
363
367
|
};
|
|
364
368
|
}
|
|
369
|
+
const seatFor = () => {
|
|
370
|
+
const snap = deps.resolveActiveSnap();
|
|
371
|
+
const max = deps.getMaxAxisSize();
|
|
372
|
+
return {
|
|
373
|
+
target: snap ? Math.min(snap.size, max) : null,
|
|
374
|
+
max
|
|
375
|
+
};
|
|
376
|
+
};
|
|
365
377
|
const onResize = () => {
|
|
366
378
|
if (deps.isDestroyed()) return;
|
|
379
|
+
const before = seatFor();
|
|
367
380
|
deps.recomputeSnaps();
|
|
368
381
|
const mode = deps.getMode();
|
|
369
382
|
const isVerticalAxis = mode === "bottom" || mode === "top";
|
|
@@ -372,6 +385,10 @@ function installResizeObserver(deps) {
|
|
|
372
385
|
if (viewportSize2 > 0 && viewportSize2 < max) {
|
|
373
386
|
deps.setMaxAxisSize(viewportSize2);
|
|
374
387
|
}
|
|
388
|
+
const after = seatFor();
|
|
389
|
+
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) {
|
|
390
|
+
return;
|
|
391
|
+
}
|
|
375
392
|
const wasAnimating = deps.isAnimating?.() ?? false;
|
|
376
393
|
deps.cancelInFlight();
|
|
377
394
|
deps.newCycle();
|
|
@@ -633,10 +650,6 @@ const SCRIM_PRESETS = Object.freeze({
|
|
|
633
650
|
interactive: false
|
|
634
651
|
}
|
|
635
652
|
});
|
|
636
|
-
const SIZE_WRITE_EPSILON = 0.5;
|
|
637
|
-
const OPACITY_WRITE_EPSILON = 5e-3;
|
|
638
|
-
const POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
|
|
639
|
-
const RANGE_DIVISION_EPSILON = 1e-4;
|
|
640
653
|
class WriteSentinel {
|
|
641
654
|
constructor() {
|
|
642
655
|
__publicField(this, "last", -1);
|
|
@@ -781,7 +794,6 @@ class ScrimController {
|
|
|
781
794
|
__publicField(this, "backdrop");
|
|
782
795
|
__publicField(this, "mode");
|
|
783
796
|
__publicField(this, "isDestroyed");
|
|
784
|
-
__publicField(this, "isTopSheet");
|
|
785
797
|
__publicField(this, "getAllowedIds");
|
|
786
798
|
__publicField(this, "getResolvedSnaps");
|
|
787
799
|
__publicField(this, "snapToFn");
|
|
@@ -803,7 +815,6 @@ class ScrimController {
|
|
|
803
815
|
this.backdrop = deps.backdrop;
|
|
804
816
|
this.mode = deps.mode;
|
|
805
817
|
this.isDestroyed = deps.isDestroyed;
|
|
806
|
-
this.isTopSheet = deps.isTopSheet;
|
|
807
818
|
this.getAllowedIds = deps.getAllowedIds;
|
|
808
819
|
this.getResolvedSnaps = deps.getResolvedSnaps;
|
|
809
820
|
this.snapToFn = deps.snapTo;
|
|
@@ -854,8 +865,7 @@ class ScrimController {
|
|
|
854
865
|
if (this.backdrop) {
|
|
855
866
|
const [s, e] = this.backdropRange;
|
|
856
867
|
const range = Math.max(e - s, RANGE_DIVISION_EPSILON);
|
|
857
|
-
const
|
|
858
|
-
const backdropOpacity = this.isTopSheet() ? ramp : 0;
|
|
868
|
+
const backdropOpacity = Math.min(Math.max((progress - s) / range, 0), 1);
|
|
859
869
|
if (this.backdropOpacitySentinel.shouldWrite(backdropOpacity, OPACITY_WRITE_EPSILON)) {
|
|
860
870
|
this.backdrop.style.opacity = String(backdropOpacity);
|
|
861
871
|
}
|
|
@@ -2662,6 +2672,7 @@ class BottomSheetCore {
|
|
|
2662
2672
|
__publicField(this, "progressWriteSentinel", new WriteSentinel());
|
|
2663
2673
|
__publicField(this, "isTopSheet", true);
|
|
2664
2674
|
__publicField(this, "opening", false);
|
|
2675
|
+
__publicField(this, "promotedForOpen", false);
|
|
2665
2676
|
__publicField(this, "allowOvershoot", false);
|
|
2666
2677
|
__publicField(this, "progressPayload", {
|
|
2667
2678
|
value: 0,
|
|
@@ -2718,7 +2729,6 @@ class BottomSheetCore {
|
|
|
2718
2729
|
screenComponent: this.screenComponent,
|
|
2719
2730
|
backdrop: this.backdrop,
|
|
2720
2731
|
isDestroyed: () => this.destroyed,
|
|
2721
|
-
isTopSheet: () => this.isTopSheet,
|
|
2722
2732
|
getAllowedIds: () => this.snaps.getAllowedIds().slice(),
|
|
2723
2733
|
getResolvedSnaps: () => this.snaps.getResolvedSnaps().slice(),
|
|
2724
2734
|
snapTo: (id) => {
|
|
@@ -2966,6 +2976,7 @@ class BottomSheetCore {
|
|
|
2966
2976
|
if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
|
|
2967
2977
|
return;
|
|
2968
2978
|
}
|
|
2979
|
+
const resumingOpen = this.opening;
|
|
2969
2980
|
const signal = this.newCycle();
|
|
2970
2981
|
const onExternalAbort = () => {
|
|
2971
2982
|
this.animation.cancel();
|
|
@@ -2974,7 +2985,7 @@ class BottomSheetCore {
|
|
|
2974
2985
|
externalSignal?.addEventListener("abort", onExternalAbort, {
|
|
2975
2986
|
once: true
|
|
2976
2987
|
});
|
|
2977
|
-
const wasClosed = this.size === 0;
|
|
2988
|
+
const wasClosed = this.size === 0 || resumingOpen;
|
|
2978
2989
|
const previousId = this.activeId;
|
|
2979
2990
|
const previousSize = this.size;
|
|
2980
2991
|
this.scrollCache.cache(previousId, previousSize, target.size);
|
|
@@ -2983,7 +2994,10 @@ class BottomSheetCore {
|
|
|
2983
2994
|
const opensToRest = id === "closed" || rawTargetSize === 0;
|
|
2984
2995
|
if (wasClosed && !opensToRest) {
|
|
2985
2996
|
this.opening = true;
|
|
2986
|
-
|
|
2997
|
+
if (!resumingOpen) {
|
|
2998
|
+
this.promotedForOpen = true;
|
|
2999
|
+
sheetStack.promote(this.id);
|
|
3000
|
+
}
|
|
2987
3001
|
}
|
|
2988
3002
|
if (this.animation.viewTransitionsAvailable) {
|
|
2989
3003
|
this.currentViewTransition?.skipTransition?.();
|
|
@@ -3422,19 +3436,12 @@ class BottomSheetCore {
|
|
|
3422
3436
|
for (const anchor of this.anchors) anchor.syncZ(z + 1);
|
|
3423
3437
|
},
|
|
3424
3438
|
setIsTop: (isTop) => {
|
|
3425
|
-
if (this.isTopSheet === isTop) return;
|
|
3426
3439
|
this.isTopSheet = isTop;
|
|
3427
|
-
this.repaintScrim();
|
|
3428
3440
|
},
|
|
3429
3441
|
isOpen: () => this.size > 0 || this.opening,
|
|
3430
3442
|
setDepth: (depth) => this.applyStackDepth(depth)
|
|
3431
3443
|
}));
|
|
3432
3444
|
}
|
|
3433
|
-
repaintScrim() {
|
|
3434
|
-
if (this.destroyed) return;
|
|
3435
|
-
this.scrim.invalidateOpacityCache();
|
|
3436
|
-
this.scrim.applyOpacity(this.computeProgress(this.size), true);
|
|
3437
|
-
}
|
|
3438
3445
|
applyStackDepth(depth) {
|
|
3439
3446
|
if (!this.stackEffectEnabled) return;
|
|
3440
3447
|
this.element.setAttribute("data-stack-depth", String(depth));
|
|
@@ -3670,6 +3677,7 @@ class BottomSheetCore {
|
|
|
3670
3677
|
this.activeId = target.id;
|
|
3671
3678
|
if (previousSnapSize === 0 && target.size > 0) {
|
|
3672
3679
|
this.opening = true;
|
|
3680
|
+
this.promotedForOpen = true;
|
|
3673
3681
|
sheetStack.promote(this.id);
|
|
3674
3682
|
}
|
|
3675
3683
|
const settleCap = this.snaps.getMaxAxisSize();
|
|
@@ -3742,7 +3750,8 @@ class BottomSheetCore {
|
|
|
3742
3750
|
return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
|
|
3743
3751
|
}
|
|
3744
3752
|
handleOpen() {
|
|
3745
|
-
|
|
3753
|
+
if (this.promotedForOpen) this.promotedForOpen = false;
|
|
3754
|
+
else sheetStack.promote(this.id);
|
|
3746
3755
|
try {
|
|
3747
3756
|
this.lifecycle.install();
|
|
3748
3757
|
} catch (err) {
|
|
@@ -3774,6 +3783,7 @@ class BottomSheetCore {
|
|
|
3774
3783
|
}
|
|
3775
3784
|
handleClose() {
|
|
3776
3785
|
this.opening = false;
|
|
3786
|
+
this.promotedForOpen = false;
|
|
3777
3787
|
this.lifecycle.release();
|
|
3778
3788
|
sheetStack.update();
|
|
3779
3789
|
}
|
package/dist/qwik.cjs
CHANGED
|
@@ -378,14 +378,26 @@ function notifyLinkedSheets(sheets, self) {
|
|
|
378
378
|
}
|
|
379
379
|
}
|
|
380
380
|
|
|
381
|
+
// src/core/primitives/hot-path-thresholds.ts
|
|
382
|
+
var SIZE_WRITE_EPSILON = 0.5;
|
|
383
|
+
var OPACITY_WRITE_EPSILON = 5e-3;
|
|
384
|
+
var POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
|
|
385
|
+
var RANGE_DIVISION_EPSILON = 1e-4;
|
|
386
|
+
|
|
381
387
|
// src/core/features/resize-observer.ts
|
|
382
388
|
function installResizeObserver(deps) {
|
|
383
389
|
if (typeof window === "undefined") {
|
|
384
390
|
return () => {
|
|
385
391
|
};
|
|
386
392
|
}
|
|
393
|
+
const seatFor = () => {
|
|
394
|
+
const snap = deps.resolveActiveSnap();
|
|
395
|
+
const max = deps.getMaxAxisSize();
|
|
396
|
+
return { target: snap ? Math.min(snap.size, max) : null, max };
|
|
397
|
+
};
|
|
387
398
|
const onResize = () => {
|
|
388
399
|
if (deps.isDestroyed()) return;
|
|
400
|
+
const before = seatFor();
|
|
389
401
|
deps.recomputeSnaps();
|
|
390
402
|
const mode = deps.getMode();
|
|
391
403
|
const isVerticalAxis = mode === "bottom" || mode === "top";
|
|
@@ -394,6 +406,10 @@ function installResizeObserver(deps) {
|
|
|
394
406
|
if (viewportSize2 > 0 && viewportSize2 < max) {
|
|
395
407
|
deps.setMaxAxisSize(viewportSize2);
|
|
396
408
|
}
|
|
409
|
+
const after = seatFor();
|
|
410
|
+
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) {
|
|
411
|
+
return;
|
|
412
|
+
}
|
|
397
413
|
const wasAnimating = deps.isAnimating?.() ?? false;
|
|
398
414
|
deps.cancelInFlight();
|
|
399
415
|
deps.newCycle();
|
|
@@ -662,12 +678,6 @@ var SCRIM_PRESETS = Object.freeze({
|
|
|
662
678
|
}
|
|
663
679
|
});
|
|
664
680
|
|
|
665
|
-
// src/core/primitives/hot-path-thresholds.ts
|
|
666
|
-
var SIZE_WRITE_EPSILON = 0.5;
|
|
667
|
-
var OPACITY_WRITE_EPSILON = 5e-3;
|
|
668
|
-
var POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
|
|
669
|
-
var RANGE_DIVISION_EPSILON = 1e-4;
|
|
670
|
-
|
|
671
681
|
// src/core/primitives/opacity-dedup.ts
|
|
672
682
|
var WriteSentinel = class {
|
|
673
683
|
constructor() {
|
|
@@ -777,7 +787,6 @@ var ScrimController = class {
|
|
|
777
787
|
__publicField(this, "backdrop");
|
|
778
788
|
__publicField(this, "mode");
|
|
779
789
|
__publicField(this, "isDestroyed");
|
|
780
|
-
__publicField(this, "isTopSheet");
|
|
781
790
|
__publicField(this, "getAllowedIds");
|
|
782
791
|
__publicField(this, "getResolvedSnaps");
|
|
783
792
|
__publicField(this, "snapToFn");
|
|
@@ -799,7 +808,6 @@ var ScrimController = class {
|
|
|
799
808
|
this.backdrop = deps.backdrop;
|
|
800
809
|
this.mode = deps.mode;
|
|
801
810
|
this.isDestroyed = deps.isDestroyed;
|
|
802
|
-
this.isTopSheet = deps.isTopSheet;
|
|
803
811
|
this.getAllowedIds = deps.getAllowedIds;
|
|
804
812
|
this.getResolvedSnaps = deps.getResolvedSnaps;
|
|
805
813
|
this.snapToFn = deps.snapTo;
|
|
@@ -844,8 +852,10 @@ var ScrimController = class {
|
|
|
844
852
|
if (this.backdrop) {
|
|
845
853
|
const [s, e] = this.backdropRange;
|
|
846
854
|
const range = Math.max(e - s, RANGE_DIVISION_EPSILON);
|
|
847
|
-
const
|
|
848
|
-
|
|
855
|
+
const backdropOpacity = Math.min(
|
|
856
|
+
Math.max((progress - s) / range, 0),
|
|
857
|
+
1
|
|
858
|
+
);
|
|
849
859
|
if (this.backdropOpacitySentinel.shouldWrite(
|
|
850
860
|
backdropOpacity,
|
|
851
861
|
OPACITY_WRITE_EPSILON
|
|
@@ -2620,6 +2630,7 @@ var BottomSheetCore = class {
|
|
|
2620
2630
|
__publicField(this, "progressWriteSentinel", new WriteSentinel());
|
|
2621
2631
|
__publicField(this, "isTopSheet", true);
|
|
2622
2632
|
__publicField(this, "opening", false);
|
|
2633
|
+
__publicField(this, "promotedForOpen", false);
|
|
2623
2634
|
__publicField(this, "allowOvershoot", false);
|
|
2624
2635
|
__publicField(this, "progressPayload", {
|
|
2625
2636
|
value: 0,
|
|
@@ -2676,7 +2687,6 @@ var BottomSheetCore = class {
|
|
|
2676
2687
|
screenComponent: this.screenComponent,
|
|
2677
2688
|
backdrop: this.backdrop,
|
|
2678
2689
|
isDestroyed: () => this.destroyed,
|
|
2679
|
-
isTopSheet: () => this.isTopSheet,
|
|
2680
2690
|
getAllowedIds: () => this.snaps.getAllowedIds().slice(),
|
|
2681
2691
|
getResolvedSnaps: () => this.snaps.getResolvedSnaps().slice(),
|
|
2682
2692
|
snapTo: (id) => {
|
|
@@ -2946,13 +2956,14 @@ var BottomSheetCore = class {
|
|
|
2946
2956
|
if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
|
|
2947
2957
|
return;
|
|
2948
2958
|
}
|
|
2959
|
+
const resumingOpen = this.opening;
|
|
2949
2960
|
const signal = this.newCycle();
|
|
2950
2961
|
const onExternalAbort = () => {
|
|
2951
2962
|
this.animation.cancel();
|
|
2952
2963
|
this.newCycle();
|
|
2953
2964
|
};
|
|
2954
2965
|
externalSignal?.addEventListener("abort", onExternalAbort, { once: true });
|
|
2955
|
-
const wasClosed = this.size === 0;
|
|
2966
|
+
const wasClosed = this.size === 0 || resumingOpen;
|
|
2956
2967
|
const previousId = this.activeId;
|
|
2957
2968
|
const previousSize = this.size;
|
|
2958
2969
|
this.scrollCache.cache(previousId, previousSize, target.size);
|
|
@@ -2961,7 +2972,10 @@ var BottomSheetCore = class {
|
|
|
2961
2972
|
const opensToRest = id === "closed" || rawTargetSize === 0;
|
|
2962
2973
|
if (wasClosed && !opensToRest) {
|
|
2963
2974
|
this.opening = true;
|
|
2964
|
-
|
|
2975
|
+
if (!resumingOpen) {
|
|
2976
|
+
this.promotedForOpen = true;
|
|
2977
|
+
sheetStack.promote(this.id);
|
|
2978
|
+
}
|
|
2965
2979
|
}
|
|
2966
2980
|
if (this.animation.viewTransitionsAvailable) {
|
|
2967
2981
|
this.currentViewTransition?.skipTransition?.();
|
|
@@ -3402,19 +3416,12 @@ var BottomSheetCore = class {
|
|
|
3402
3416
|
for (const anchor of this.anchors) anchor.syncZ(z + 1);
|
|
3403
3417
|
},
|
|
3404
3418
|
setIsTop: (isTop) => {
|
|
3405
|
-
if (this.isTopSheet === isTop) return;
|
|
3406
3419
|
this.isTopSheet = isTop;
|
|
3407
|
-
this.repaintScrim();
|
|
3408
3420
|
},
|
|
3409
3421
|
isOpen: () => this.size > 0 || this.opening,
|
|
3410
3422
|
setDepth: (depth) => this.applyStackDepth(depth)
|
|
3411
3423
|
}));
|
|
3412
3424
|
}
|
|
3413
|
-
repaintScrim() {
|
|
3414
|
-
if (this.destroyed) return;
|
|
3415
|
-
this.scrim.invalidateOpacityCache();
|
|
3416
|
-
this.scrim.applyOpacity(this.computeProgress(this.size), true);
|
|
3417
|
-
}
|
|
3418
3425
|
applyStackDepth(depth) {
|
|
3419
3426
|
if (!this.stackEffectEnabled) return;
|
|
3420
3427
|
this.element.setAttribute("data-stack-depth", String(depth));
|
|
@@ -3659,6 +3666,7 @@ var BottomSheetCore = class {
|
|
|
3659
3666
|
this.activeId = target.id;
|
|
3660
3667
|
if (previousSnapSize === 0 && target.size > 0) {
|
|
3661
3668
|
this.opening = true;
|
|
3669
|
+
this.promotedForOpen = true;
|
|
3662
3670
|
sheetStack.promote(this.id);
|
|
3663
3671
|
}
|
|
3664
3672
|
const settleCap = this.snaps.getMaxAxisSize();
|
|
@@ -3740,7 +3748,8 @@ var BottomSheetCore = class {
|
|
|
3740
3748
|
return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
|
|
3741
3749
|
}
|
|
3742
3750
|
handleOpen() {
|
|
3743
|
-
|
|
3751
|
+
if (this.promotedForOpen) this.promotedForOpen = false;
|
|
3752
|
+
else sheetStack.promote(this.id);
|
|
3744
3753
|
try {
|
|
3745
3754
|
this.lifecycle.install();
|
|
3746
3755
|
} catch (err) {
|
|
@@ -3772,6 +3781,7 @@ var BottomSheetCore = class {
|
|
|
3772
3781
|
}
|
|
3773
3782
|
handleClose() {
|
|
3774
3783
|
this.opening = false;
|
|
3784
|
+
this.promotedForOpen = false;
|
|
3775
3785
|
this.lifecycle.release();
|
|
3776
3786
|
sheetStack.update();
|
|
3777
3787
|
}
|
package/dist/qwik.d.cts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as _builder_io_qwik from '@builder.io/qwik';
|
|
2
2
|
import { QRL } from '@builder.io/qwik';
|
|
3
3
|
import { T as TeleportTarget } from './teleport-7uYNiEAT.cjs';
|
|
4
|
-
import { a as SnapPointDef, b as SheetMode, c as EngineOptions, S as SheetEventMap, E as EngineState } from './BottomSheetCore-
|
|
5
|
-
export { d as SnapPoint } from './BottomSheetCore-
|
|
4
|
+
import { a as SnapPointDef, b as SheetMode, c as EngineOptions, S as SheetEventMap, E as EngineState } from './BottomSheetCore-BHv6LPmS.cjs';
|
|
5
|
+
export { d as SnapPoint } from './BottomSheetCore-BHv6LPmS.cjs';
|
|
6
6
|
import './transform-jVfAikE9.cjs';
|
|
7
7
|
|
|
8
8
|
type BottomSheetProps<TId extends string = string> = {
|
package/dist/qwik.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as _builder_io_qwik from '@builder.io/qwik';
|
|
2
2
|
import { QRL } from '@builder.io/qwik';
|
|
3
3
|
import { T as TeleportTarget } from './teleport-7uYNiEAT.js';
|
|
4
|
-
import { a as SnapPointDef, b as SheetMode, c as EngineOptions, S as SheetEventMap, E as EngineState } from './BottomSheetCore-
|
|
5
|
-
export { d as SnapPoint } from './BottomSheetCore-
|
|
4
|
+
import { a as SnapPointDef, b as SheetMode, c as EngineOptions, S as SheetEventMap, E as EngineState } from './BottomSheetCore-CK_mq14p.js';
|
|
5
|
+
export { d as SnapPoint } from './BottomSheetCore-CK_mq14p.js';
|
|
6
6
|
import './transform-jVfAikE9.js';
|
|
7
7
|
|
|
8
8
|
type BottomSheetProps<TId extends string = string> = {
|
package/dist/qwik.js
CHANGED
|
@@ -376,14 +376,26 @@ function notifyLinkedSheets(sheets, self) {
|
|
|
376
376
|
}
|
|
377
377
|
}
|
|
378
378
|
|
|
379
|
+
// src/core/primitives/hot-path-thresholds.ts
|
|
380
|
+
var SIZE_WRITE_EPSILON = 0.5;
|
|
381
|
+
var OPACITY_WRITE_EPSILON = 5e-3;
|
|
382
|
+
var POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
|
|
383
|
+
var RANGE_DIVISION_EPSILON = 1e-4;
|
|
384
|
+
|
|
379
385
|
// src/core/features/resize-observer.ts
|
|
380
386
|
function installResizeObserver(deps) {
|
|
381
387
|
if (typeof window === "undefined") {
|
|
382
388
|
return () => {
|
|
383
389
|
};
|
|
384
390
|
}
|
|
391
|
+
const seatFor = () => {
|
|
392
|
+
const snap = deps.resolveActiveSnap();
|
|
393
|
+
const max = deps.getMaxAxisSize();
|
|
394
|
+
return { target: snap ? Math.min(snap.size, max) : null, max };
|
|
395
|
+
};
|
|
385
396
|
const onResize = () => {
|
|
386
397
|
if (deps.isDestroyed()) return;
|
|
398
|
+
const before = seatFor();
|
|
387
399
|
deps.recomputeSnaps();
|
|
388
400
|
const mode = deps.getMode();
|
|
389
401
|
const isVerticalAxis = mode === "bottom" || mode === "top";
|
|
@@ -392,6 +404,10 @@ function installResizeObserver(deps) {
|
|
|
392
404
|
if (viewportSize2 > 0 && viewportSize2 < max) {
|
|
393
405
|
deps.setMaxAxisSize(viewportSize2);
|
|
394
406
|
}
|
|
407
|
+
const after = seatFor();
|
|
408
|
+
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) {
|
|
409
|
+
return;
|
|
410
|
+
}
|
|
395
411
|
const wasAnimating = deps.isAnimating?.() ?? false;
|
|
396
412
|
deps.cancelInFlight();
|
|
397
413
|
deps.newCycle();
|
|
@@ -660,12 +676,6 @@ var SCRIM_PRESETS = Object.freeze({
|
|
|
660
676
|
}
|
|
661
677
|
});
|
|
662
678
|
|
|
663
|
-
// src/core/primitives/hot-path-thresholds.ts
|
|
664
|
-
var SIZE_WRITE_EPSILON = 0.5;
|
|
665
|
-
var OPACITY_WRITE_EPSILON = 5e-3;
|
|
666
|
-
var POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
|
|
667
|
-
var RANGE_DIVISION_EPSILON = 1e-4;
|
|
668
|
-
|
|
669
679
|
// src/core/primitives/opacity-dedup.ts
|
|
670
680
|
var WriteSentinel = class {
|
|
671
681
|
constructor() {
|
|
@@ -775,7 +785,6 @@ var ScrimController = class {
|
|
|
775
785
|
__publicField(this, "backdrop");
|
|
776
786
|
__publicField(this, "mode");
|
|
777
787
|
__publicField(this, "isDestroyed");
|
|
778
|
-
__publicField(this, "isTopSheet");
|
|
779
788
|
__publicField(this, "getAllowedIds");
|
|
780
789
|
__publicField(this, "getResolvedSnaps");
|
|
781
790
|
__publicField(this, "snapToFn");
|
|
@@ -797,7 +806,6 @@ var ScrimController = class {
|
|
|
797
806
|
this.backdrop = deps.backdrop;
|
|
798
807
|
this.mode = deps.mode;
|
|
799
808
|
this.isDestroyed = deps.isDestroyed;
|
|
800
|
-
this.isTopSheet = deps.isTopSheet;
|
|
801
809
|
this.getAllowedIds = deps.getAllowedIds;
|
|
802
810
|
this.getResolvedSnaps = deps.getResolvedSnaps;
|
|
803
811
|
this.snapToFn = deps.snapTo;
|
|
@@ -842,8 +850,10 @@ var ScrimController = class {
|
|
|
842
850
|
if (this.backdrop) {
|
|
843
851
|
const [s, e] = this.backdropRange;
|
|
844
852
|
const range = Math.max(e - s, RANGE_DIVISION_EPSILON);
|
|
845
|
-
const
|
|
846
|
-
|
|
853
|
+
const backdropOpacity = Math.min(
|
|
854
|
+
Math.max((progress - s) / range, 0),
|
|
855
|
+
1
|
|
856
|
+
);
|
|
847
857
|
if (this.backdropOpacitySentinel.shouldWrite(
|
|
848
858
|
backdropOpacity,
|
|
849
859
|
OPACITY_WRITE_EPSILON
|
|
@@ -2618,6 +2628,7 @@ var BottomSheetCore = class {
|
|
|
2618
2628
|
__publicField(this, "progressWriteSentinel", new WriteSentinel());
|
|
2619
2629
|
__publicField(this, "isTopSheet", true);
|
|
2620
2630
|
__publicField(this, "opening", false);
|
|
2631
|
+
__publicField(this, "promotedForOpen", false);
|
|
2621
2632
|
__publicField(this, "allowOvershoot", false);
|
|
2622
2633
|
__publicField(this, "progressPayload", {
|
|
2623
2634
|
value: 0,
|
|
@@ -2674,7 +2685,6 @@ var BottomSheetCore = class {
|
|
|
2674
2685
|
screenComponent: this.screenComponent,
|
|
2675
2686
|
backdrop: this.backdrop,
|
|
2676
2687
|
isDestroyed: () => this.destroyed,
|
|
2677
|
-
isTopSheet: () => this.isTopSheet,
|
|
2678
2688
|
getAllowedIds: () => this.snaps.getAllowedIds().slice(),
|
|
2679
2689
|
getResolvedSnaps: () => this.snaps.getResolvedSnaps().slice(),
|
|
2680
2690
|
snapTo: (id) => {
|
|
@@ -2944,13 +2954,14 @@ var BottomSheetCore = class {
|
|
|
2944
2954
|
if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
|
|
2945
2955
|
return;
|
|
2946
2956
|
}
|
|
2957
|
+
const resumingOpen = this.opening;
|
|
2947
2958
|
const signal = this.newCycle();
|
|
2948
2959
|
const onExternalAbort = () => {
|
|
2949
2960
|
this.animation.cancel();
|
|
2950
2961
|
this.newCycle();
|
|
2951
2962
|
};
|
|
2952
2963
|
externalSignal?.addEventListener("abort", onExternalAbort, { once: true });
|
|
2953
|
-
const wasClosed = this.size === 0;
|
|
2964
|
+
const wasClosed = this.size === 0 || resumingOpen;
|
|
2954
2965
|
const previousId = this.activeId;
|
|
2955
2966
|
const previousSize = this.size;
|
|
2956
2967
|
this.scrollCache.cache(previousId, previousSize, target.size);
|
|
@@ -2959,7 +2970,10 @@ var BottomSheetCore = class {
|
|
|
2959
2970
|
const opensToRest = id === "closed" || rawTargetSize === 0;
|
|
2960
2971
|
if (wasClosed && !opensToRest) {
|
|
2961
2972
|
this.opening = true;
|
|
2962
|
-
|
|
2973
|
+
if (!resumingOpen) {
|
|
2974
|
+
this.promotedForOpen = true;
|
|
2975
|
+
sheetStack.promote(this.id);
|
|
2976
|
+
}
|
|
2963
2977
|
}
|
|
2964
2978
|
if (this.animation.viewTransitionsAvailable) {
|
|
2965
2979
|
this.currentViewTransition?.skipTransition?.();
|
|
@@ -3400,19 +3414,12 @@ var BottomSheetCore = class {
|
|
|
3400
3414
|
for (const anchor of this.anchors) anchor.syncZ(z + 1);
|
|
3401
3415
|
},
|
|
3402
3416
|
setIsTop: (isTop) => {
|
|
3403
|
-
if (this.isTopSheet === isTop) return;
|
|
3404
3417
|
this.isTopSheet = isTop;
|
|
3405
|
-
this.repaintScrim();
|
|
3406
3418
|
},
|
|
3407
3419
|
isOpen: () => this.size > 0 || this.opening,
|
|
3408
3420
|
setDepth: (depth) => this.applyStackDepth(depth)
|
|
3409
3421
|
}));
|
|
3410
3422
|
}
|
|
3411
|
-
repaintScrim() {
|
|
3412
|
-
if (this.destroyed) return;
|
|
3413
|
-
this.scrim.invalidateOpacityCache();
|
|
3414
|
-
this.scrim.applyOpacity(this.computeProgress(this.size), true);
|
|
3415
|
-
}
|
|
3416
3423
|
applyStackDepth(depth) {
|
|
3417
3424
|
if (!this.stackEffectEnabled) return;
|
|
3418
3425
|
this.element.setAttribute("data-stack-depth", String(depth));
|
|
@@ -3657,6 +3664,7 @@ var BottomSheetCore = class {
|
|
|
3657
3664
|
this.activeId = target.id;
|
|
3658
3665
|
if (previousSnapSize === 0 && target.size > 0) {
|
|
3659
3666
|
this.opening = true;
|
|
3667
|
+
this.promotedForOpen = true;
|
|
3660
3668
|
sheetStack.promote(this.id);
|
|
3661
3669
|
}
|
|
3662
3670
|
const settleCap = this.snaps.getMaxAxisSize();
|
|
@@ -3738,7 +3746,8 @@ var BottomSheetCore = class {
|
|
|
3738
3746
|
return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
|
|
3739
3747
|
}
|
|
3740
3748
|
handleOpen() {
|
|
3741
|
-
|
|
3749
|
+
if (this.promotedForOpen) this.promotedForOpen = false;
|
|
3750
|
+
else sheetStack.promote(this.id);
|
|
3742
3751
|
try {
|
|
3743
3752
|
this.lifecycle.install();
|
|
3744
3753
|
} catch (err) {
|
|
@@ -3770,6 +3779,7 @@ var BottomSheetCore = class {
|
|
|
3770
3779
|
}
|
|
3771
3780
|
handleClose() {
|
|
3772
3781
|
this.opening = false;
|
|
3782
|
+
this.promotedForOpen = false;
|
|
3773
3783
|
this.lifecycle.release();
|
|
3774
3784
|
sheetStack.update();
|
|
3775
3785
|
}
|