@surdeddd/bottom-sheet 0.20.2 → 0.21.1
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 +10 -1
- package/dist/{BottomSheetCore-VPJZcKcg.d.cts → BottomSheetCore-BHv6LPmS.d.cts} +1 -0
- package/dist/{BottomSheetCore-Cgn8b_6A.d.ts → BottomSheetCore-CK_mq14p.d.ts} +1 -0
- package/dist/{BottomSheetEngine-B8C2CwF9.d.cts → BottomSheetEngine-mmFzIK1Z.d.cts} +1 -1
- package/dist/{BottomSheetEngine-DwYR_ygJ.d.ts → BottomSheetEngine-wLn6Q2kA.d.ts} +1 -1
- package/dist/core.cjs +33 -27
- package/dist/core.d.cts +2 -2
- package/dist/core.d.ts +2 -2
- package/dist/core.js +33 -27
- package/dist/debug.d.cts +1 -1
- package/dist/debug.d.ts +1 -1
- package/dist/element.cjs +37 -27
- 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 -27
- package/dist/features.d.cts +2 -2
- package/dist/features.d.ts +2 -2
- package/dist/{index-DcMkhXAy.d.ts → index-CWKv1Xy4.d.ts} +1 -1
- package/dist/{index-CnfbOKx0.d.cts → index-juAyT76E.d.cts} +1 -1
- package/dist/index.cjs +33 -27
- package/dist/index.d.cts +4 -4
- package/dist/index.d.ts +4 -4
- package/dist/index.js +33 -27
- 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 +36 -24
- package/dist/qwik-lib/index.qwik.mjs +36 -24
- package/dist/qwik.cjs +39 -27
- package/dist/qwik.d.cts +2 -2
- package/dist/qwik.d.ts +2 -2
- package/dist/qwik.js +39 -27
- package/dist/react.cjs +38 -27
- package/dist/react.d.cts +3 -3
- package/dist/react.d.ts +3 -3
- package/dist/react.js +38 -27
- package/dist/solid.cjs +39 -27
- package/dist/solid.d.cts +1 -0
- package/dist/solid.d.ts +1 -0
- package/dist/solid.js +39 -27
- package/dist/solid.source.jsx +43 -27
- package/dist/svelte-core.cjs +33 -27
- package/dist/svelte-core.js +33 -27
- package/dist/svelte-src/BottomSheet.svelte +3 -0
- package/dist/svelte.cjs +36 -27
- package/dist/svelte.js +36 -27
- package/dist/vue.cjs +37 -27
- package/dist/vue.js +37 -27
- package/dist/webgl.d.cts +1 -1
- package/dist/webgl.d.ts +1 -1
- package/package.json +2 -2
package/dist/svelte.cjs
CHANGED
|
@@ -798,7 +798,6 @@ var ScrimController = class {
|
|
|
798
798
|
__publicField(this, "backdrop");
|
|
799
799
|
__publicField(this, "mode");
|
|
800
800
|
__publicField(this, "isDestroyed");
|
|
801
|
-
__publicField(this, "isTopSheet");
|
|
802
801
|
__publicField(this, "getAllowedIds");
|
|
803
802
|
__publicField(this, "getResolvedSnaps");
|
|
804
803
|
__publicField(this, "snapToFn");
|
|
@@ -820,7 +819,6 @@ var ScrimController = class {
|
|
|
820
819
|
this.backdrop = deps.backdrop;
|
|
821
820
|
this.mode = deps.mode;
|
|
822
821
|
this.isDestroyed = deps.isDestroyed;
|
|
823
|
-
this.isTopSheet = deps.isTopSheet;
|
|
824
822
|
this.getAllowedIds = deps.getAllowedIds;
|
|
825
823
|
this.getResolvedSnaps = deps.getResolvedSnaps;
|
|
826
824
|
this.snapToFn = deps.snapTo;
|
|
@@ -869,18 +867,16 @@ var ScrimController = class {
|
|
|
869
867
|
Math.max((progress - s) / range, 0),
|
|
870
868
|
1
|
|
871
869
|
);
|
|
872
|
-
if (this.
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
)
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
this.lastBackdropPointer = nextPointer;
|
|
883
|
-
}
|
|
870
|
+
if (this.backdropOpacitySentinel.shouldWrite(
|
|
871
|
+
backdropOpacity,
|
|
872
|
+
OPACITY_WRITE_EPSILON
|
|
873
|
+
)) {
|
|
874
|
+
this.backdrop.style.opacity = String(backdropOpacity);
|
|
875
|
+
}
|
|
876
|
+
const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
|
|
877
|
+
if (nextPointer !== this.lastBackdropPointer) {
|
|
878
|
+
this.backdrop.style.pointerEvents = nextPointer;
|
|
879
|
+
this.lastBackdropPointer = nextPointer;
|
|
884
880
|
}
|
|
885
881
|
}
|
|
886
882
|
if (this.screenComponent && this.scrimMode !== "off") {
|
|
@@ -1410,18 +1406,20 @@ var AnimationRunner = class {
|
|
|
1410
1406
|
get isAnimating() {
|
|
1411
1407
|
return this.currentTween !== null || this.currentSpring !== null || this.currentWaapi !== null;
|
|
1412
1408
|
}
|
|
1409
|
+
cancelWaapi() {
|
|
1410
|
+
if (!this.currentWaapi) return;
|
|
1411
|
+
const entry = this.currentWaapi;
|
|
1412
|
+
this.currentWaapi = null;
|
|
1413
|
+
entry.stop();
|
|
1414
|
+
try {
|
|
1415
|
+
entry.anim.cancel();
|
|
1416
|
+
} catch {
|
|
1417
|
+
}
|
|
1418
|
+
}
|
|
1413
1419
|
cancel() {
|
|
1414
1420
|
this.currentTween?.cancel();
|
|
1415
1421
|
this.currentSpring?.cancel();
|
|
1416
|
-
|
|
1417
|
-
const entry = this.currentWaapi;
|
|
1418
|
-
this.currentWaapi = null;
|
|
1419
|
-
entry.stop();
|
|
1420
|
-
try {
|
|
1421
|
-
entry.anim.cancel();
|
|
1422
|
-
} catch {
|
|
1423
|
-
}
|
|
1424
|
-
}
|
|
1422
|
+
this.cancelWaapi();
|
|
1425
1423
|
}
|
|
1426
1424
|
async animateTo(target, velocityPxPerMs) {
|
|
1427
1425
|
if (target === this.getSize()) {
|
|
@@ -1432,6 +1430,7 @@ var AnimationRunner = class {
|
|
|
1432
1430
|
}
|
|
1433
1431
|
this.currentTween?.cancel();
|
|
1434
1432
|
this.currentSpring?.cancel();
|
|
1433
|
+
this.cancelWaapi();
|
|
1435
1434
|
this.getRootEl()?.setAttribute("data-animating", "true");
|
|
1436
1435
|
this.element.style.willChange = "transform";
|
|
1437
1436
|
if (this.reducedMotion) {
|
|
@@ -2642,6 +2641,7 @@ var BottomSheetCore = class {
|
|
|
2642
2641
|
__publicField(this, "progressWriteSentinel", new WriteSentinel());
|
|
2643
2642
|
__publicField(this, "isTopSheet", true);
|
|
2644
2643
|
__publicField(this, "opening", false);
|
|
2644
|
+
__publicField(this, "promotedForOpen", false);
|
|
2645
2645
|
__publicField(this, "allowOvershoot", false);
|
|
2646
2646
|
__publicField(this, "progressPayload", {
|
|
2647
2647
|
value: 0,
|
|
@@ -2698,7 +2698,6 @@ var BottomSheetCore = class {
|
|
|
2698
2698
|
screenComponent: this.screenComponent,
|
|
2699
2699
|
backdrop: this.backdrop,
|
|
2700
2700
|
isDestroyed: () => this.destroyed,
|
|
2701
|
-
isTopSheet: () => this.isTopSheet,
|
|
2702
2701
|
getAllowedIds: () => this.snaps.getAllowedIds().slice(),
|
|
2703
2702
|
getResolvedSnaps: () => this.snaps.getResolvedSnaps().slice(),
|
|
2704
2703
|
snapTo: (id) => {
|
|
@@ -2968,13 +2967,14 @@ var BottomSheetCore = class {
|
|
|
2968
2967
|
if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
|
|
2969
2968
|
return;
|
|
2970
2969
|
}
|
|
2970
|
+
const resumingOpen = this.opening;
|
|
2971
2971
|
const signal = this.newCycle();
|
|
2972
2972
|
const onExternalAbort = () => {
|
|
2973
2973
|
this.animation.cancel();
|
|
2974
2974
|
this.newCycle();
|
|
2975
2975
|
};
|
|
2976
2976
|
externalSignal?.addEventListener("abort", onExternalAbort, { once: true });
|
|
2977
|
-
const wasClosed = this.size === 0;
|
|
2977
|
+
const wasClosed = this.size === 0 || resumingOpen;
|
|
2978
2978
|
const previousId = this.activeId;
|
|
2979
2979
|
const previousSize = this.size;
|
|
2980
2980
|
this.scrollCache.cache(previousId, previousSize, target.size);
|
|
@@ -2983,7 +2983,10 @@ var BottomSheetCore = class {
|
|
|
2983
2983
|
const opensToRest = id === "closed" || rawTargetSize === 0;
|
|
2984
2984
|
if (wasClosed && !opensToRest) {
|
|
2985
2985
|
this.opening = true;
|
|
2986
|
-
|
|
2986
|
+
if (!resumingOpen) {
|
|
2987
|
+
this.promotedForOpen = true;
|
|
2988
|
+
sheetStack.promote(this.id);
|
|
2989
|
+
}
|
|
2987
2990
|
}
|
|
2988
2991
|
if (this.animation.viewTransitionsAvailable) {
|
|
2989
2992
|
this.currentViewTransition?.skipTransition?.();
|
|
@@ -3674,6 +3677,7 @@ var BottomSheetCore = class {
|
|
|
3674
3677
|
this.activeId = target.id;
|
|
3675
3678
|
if (previousSnapSize === 0 && target.size > 0) {
|
|
3676
3679
|
this.opening = true;
|
|
3680
|
+
this.promotedForOpen = true;
|
|
3677
3681
|
sheetStack.promote(this.id);
|
|
3678
3682
|
}
|
|
3679
3683
|
const settleCap = this.snaps.getMaxAxisSize();
|
|
@@ -3755,7 +3759,8 @@ var BottomSheetCore = class {
|
|
|
3755
3759
|
return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
|
|
3756
3760
|
}
|
|
3757
3761
|
handleOpen() {
|
|
3758
|
-
|
|
3762
|
+
if (this.promotedForOpen) this.promotedForOpen = false;
|
|
3763
|
+
else sheetStack.promote(this.id);
|
|
3759
3764
|
try {
|
|
3760
3765
|
this.lifecycle.install();
|
|
3761
3766
|
} catch (err) {
|
|
@@ -3787,6 +3792,7 @@ var BottomSheetCore = class {
|
|
|
3787
3792
|
}
|
|
3788
3793
|
handleClose() {
|
|
3789
3794
|
this.opening = false;
|
|
3795
|
+
this.promotedForOpen = false;
|
|
3790
3796
|
this.lifecycle.release();
|
|
3791
3797
|
sheetStack.update();
|
|
3792
3798
|
}
|
|
@@ -4522,6 +4528,9 @@ function BottomSheet($$anchor, $$props) {
|
|
|
4522
4528
|
$2__namespace.user_effect(() => {
|
|
4523
4529
|
if ($$props.dragFrom !== void 0) engine?.setDragFrom($$props.dragFrom);
|
|
4524
4530
|
});
|
|
4531
|
+
$2__namespace.user_effect(() => {
|
|
4532
|
+
if (mode() !== void 0) engine?.setMode(mode());
|
|
4533
|
+
});
|
|
4525
4534
|
$2__namespace.user_effect(() => {
|
|
4526
4535
|
if ($$props.radius !== void 0) engine?.setRadius($$props.radius);
|
|
4527
4536
|
});
|
package/dist/svelte.js
CHANGED
|
@@ -776,7 +776,6 @@ var ScrimController = class {
|
|
|
776
776
|
__publicField(this, "backdrop");
|
|
777
777
|
__publicField(this, "mode");
|
|
778
778
|
__publicField(this, "isDestroyed");
|
|
779
|
-
__publicField(this, "isTopSheet");
|
|
780
779
|
__publicField(this, "getAllowedIds");
|
|
781
780
|
__publicField(this, "getResolvedSnaps");
|
|
782
781
|
__publicField(this, "snapToFn");
|
|
@@ -798,7 +797,6 @@ var ScrimController = class {
|
|
|
798
797
|
this.backdrop = deps.backdrop;
|
|
799
798
|
this.mode = deps.mode;
|
|
800
799
|
this.isDestroyed = deps.isDestroyed;
|
|
801
|
-
this.isTopSheet = deps.isTopSheet;
|
|
802
800
|
this.getAllowedIds = deps.getAllowedIds;
|
|
803
801
|
this.getResolvedSnaps = deps.getResolvedSnaps;
|
|
804
802
|
this.snapToFn = deps.snapTo;
|
|
@@ -847,18 +845,16 @@ var ScrimController = class {
|
|
|
847
845
|
Math.max((progress - s) / range, 0),
|
|
848
846
|
1
|
|
849
847
|
);
|
|
850
|
-
if (this.
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
)
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
this.lastBackdropPointer = nextPointer;
|
|
861
|
-
}
|
|
848
|
+
if (this.backdropOpacitySentinel.shouldWrite(
|
|
849
|
+
backdropOpacity,
|
|
850
|
+
OPACITY_WRITE_EPSILON
|
|
851
|
+
)) {
|
|
852
|
+
this.backdrop.style.opacity = String(backdropOpacity);
|
|
853
|
+
}
|
|
854
|
+
const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
|
|
855
|
+
if (nextPointer !== this.lastBackdropPointer) {
|
|
856
|
+
this.backdrop.style.pointerEvents = nextPointer;
|
|
857
|
+
this.lastBackdropPointer = nextPointer;
|
|
862
858
|
}
|
|
863
859
|
}
|
|
864
860
|
if (this.screenComponent && this.scrimMode !== "off") {
|
|
@@ -1388,18 +1384,20 @@ var AnimationRunner = class {
|
|
|
1388
1384
|
get isAnimating() {
|
|
1389
1385
|
return this.currentTween !== null || this.currentSpring !== null || this.currentWaapi !== null;
|
|
1390
1386
|
}
|
|
1387
|
+
cancelWaapi() {
|
|
1388
|
+
if (!this.currentWaapi) return;
|
|
1389
|
+
const entry = this.currentWaapi;
|
|
1390
|
+
this.currentWaapi = null;
|
|
1391
|
+
entry.stop();
|
|
1392
|
+
try {
|
|
1393
|
+
entry.anim.cancel();
|
|
1394
|
+
} catch {
|
|
1395
|
+
}
|
|
1396
|
+
}
|
|
1391
1397
|
cancel() {
|
|
1392
1398
|
this.currentTween?.cancel();
|
|
1393
1399
|
this.currentSpring?.cancel();
|
|
1394
|
-
|
|
1395
|
-
const entry = this.currentWaapi;
|
|
1396
|
-
this.currentWaapi = null;
|
|
1397
|
-
entry.stop();
|
|
1398
|
-
try {
|
|
1399
|
-
entry.anim.cancel();
|
|
1400
|
-
} catch {
|
|
1401
|
-
}
|
|
1402
|
-
}
|
|
1400
|
+
this.cancelWaapi();
|
|
1403
1401
|
}
|
|
1404
1402
|
async animateTo(target, velocityPxPerMs) {
|
|
1405
1403
|
if (target === this.getSize()) {
|
|
@@ -1410,6 +1408,7 @@ var AnimationRunner = class {
|
|
|
1410
1408
|
}
|
|
1411
1409
|
this.currentTween?.cancel();
|
|
1412
1410
|
this.currentSpring?.cancel();
|
|
1411
|
+
this.cancelWaapi();
|
|
1413
1412
|
this.getRootEl()?.setAttribute("data-animating", "true");
|
|
1414
1413
|
this.element.style.willChange = "transform";
|
|
1415
1414
|
if (this.reducedMotion) {
|
|
@@ -2620,6 +2619,7 @@ var BottomSheetCore = class {
|
|
|
2620
2619
|
__publicField(this, "progressWriteSentinel", new WriteSentinel());
|
|
2621
2620
|
__publicField(this, "isTopSheet", true);
|
|
2622
2621
|
__publicField(this, "opening", false);
|
|
2622
|
+
__publicField(this, "promotedForOpen", false);
|
|
2623
2623
|
__publicField(this, "allowOvershoot", false);
|
|
2624
2624
|
__publicField(this, "progressPayload", {
|
|
2625
2625
|
value: 0,
|
|
@@ -2676,7 +2676,6 @@ var BottomSheetCore = class {
|
|
|
2676
2676
|
screenComponent: this.screenComponent,
|
|
2677
2677
|
backdrop: this.backdrop,
|
|
2678
2678
|
isDestroyed: () => this.destroyed,
|
|
2679
|
-
isTopSheet: () => this.isTopSheet,
|
|
2680
2679
|
getAllowedIds: () => this.snaps.getAllowedIds().slice(),
|
|
2681
2680
|
getResolvedSnaps: () => this.snaps.getResolvedSnaps().slice(),
|
|
2682
2681
|
snapTo: (id) => {
|
|
@@ -2946,13 +2945,14 @@ var BottomSheetCore = class {
|
|
|
2946
2945
|
if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
|
|
2947
2946
|
return;
|
|
2948
2947
|
}
|
|
2948
|
+
const resumingOpen = this.opening;
|
|
2949
2949
|
const signal = this.newCycle();
|
|
2950
2950
|
const onExternalAbort = () => {
|
|
2951
2951
|
this.animation.cancel();
|
|
2952
2952
|
this.newCycle();
|
|
2953
2953
|
};
|
|
2954
2954
|
externalSignal?.addEventListener("abort", onExternalAbort, { once: true });
|
|
2955
|
-
const wasClosed = this.size === 0;
|
|
2955
|
+
const wasClosed = this.size === 0 || resumingOpen;
|
|
2956
2956
|
const previousId = this.activeId;
|
|
2957
2957
|
const previousSize = this.size;
|
|
2958
2958
|
this.scrollCache.cache(previousId, previousSize, target.size);
|
|
@@ -2961,7 +2961,10 @@ var BottomSheetCore = class {
|
|
|
2961
2961
|
const opensToRest = id === "closed" || rawTargetSize === 0;
|
|
2962
2962
|
if (wasClosed && !opensToRest) {
|
|
2963
2963
|
this.opening = true;
|
|
2964
|
-
|
|
2964
|
+
if (!resumingOpen) {
|
|
2965
|
+
this.promotedForOpen = true;
|
|
2966
|
+
sheetStack.promote(this.id);
|
|
2967
|
+
}
|
|
2965
2968
|
}
|
|
2966
2969
|
if (this.animation.viewTransitionsAvailable) {
|
|
2967
2970
|
this.currentViewTransition?.skipTransition?.();
|
|
@@ -3652,6 +3655,7 @@ var BottomSheetCore = class {
|
|
|
3652
3655
|
this.activeId = target.id;
|
|
3653
3656
|
if (previousSnapSize === 0 && target.size > 0) {
|
|
3654
3657
|
this.opening = true;
|
|
3658
|
+
this.promotedForOpen = true;
|
|
3655
3659
|
sheetStack.promote(this.id);
|
|
3656
3660
|
}
|
|
3657
3661
|
const settleCap = this.snaps.getMaxAxisSize();
|
|
@@ -3733,7 +3737,8 @@ var BottomSheetCore = class {
|
|
|
3733
3737
|
return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
|
|
3734
3738
|
}
|
|
3735
3739
|
handleOpen() {
|
|
3736
|
-
|
|
3740
|
+
if (this.promotedForOpen) this.promotedForOpen = false;
|
|
3741
|
+
else sheetStack.promote(this.id);
|
|
3737
3742
|
try {
|
|
3738
3743
|
this.lifecycle.install();
|
|
3739
3744
|
} catch (err) {
|
|
@@ -3765,6 +3770,7 @@ var BottomSheetCore = class {
|
|
|
3765
3770
|
}
|
|
3766
3771
|
handleClose() {
|
|
3767
3772
|
this.opening = false;
|
|
3773
|
+
this.promotedForOpen = false;
|
|
3768
3774
|
this.lifecycle.release();
|
|
3769
3775
|
sheetStack.update();
|
|
3770
3776
|
}
|
|
@@ -4500,6 +4506,9 @@ function BottomSheet($$anchor, $$props) {
|
|
|
4500
4506
|
$2.user_effect(() => {
|
|
4501
4507
|
if ($$props.dragFrom !== void 0) engine?.setDragFrom($$props.dragFrom);
|
|
4502
4508
|
});
|
|
4509
|
+
$2.user_effect(() => {
|
|
4510
|
+
if (mode() !== void 0) engine?.setMode(mode());
|
|
4511
|
+
});
|
|
4503
4512
|
$2.user_effect(() => {
|
|
4504
4513
|
if ($$props.radius !== void 0) engine?.setRadius($$props.radius);
|
|
4505
4514
|
});
|
package/dist/vue.cjs
CHANGED
|
@@ -776,7 +776,6 @@ var ScrimController = class {
|
|
|
776
776
|
__publicField(this, "backdrop");
|
|
777
777
|
__publicField(this, "mode");
|
|
778
778
|
__publicField(this, "isDestroyed");
|
|
779
|
-
__publicField(this, "isTopSheet");
|
|
780
779
|
__publicField(this, "getAllowedIds");
|
|
781
780
|
__publicField(this, "getResolvedSnaps");
|
|
782
781
|
__publicField(this, "snapToFn");
|
|
@@ -798,7 +797,6 @@ var ScrimController = class {
|
|
|
798
797
|
this.backdrop = deps.backdrop;
|
|
799
798
|
this.mode = deps.mode;
|
|
800
799
|
this.isDestroyed = deps.isDestroyed;
|
|
801
|
-
this.isTopSheet = deps.isTopSheet;
|
|
802
800
|
this.getAllowedIds = deps.getAllowedIds;
|
|
803
801
|
this.getResolvedSnaps = deps.getResolvedSnaps;
|
|
804
802
|
this.snapToFn = deps.snapTo;
|
|
@@ -847,18 +845,16 @@ var ScrimController = class {
|
|
|
847
845
|
Math.max((progress - s) / range, 0),
|
|
848
846
|
1
|
|
849
847
|
);
|
|
850
|
-
if (this.
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
)
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
this.lastBackdropPointer = nextPointer;
|
|
861
|
-
}
|
|
848
|
+
if (this.backdropOpacitySentinel.shouldWrite(
|
|
849
|
+
backdropOpacity,
|
|
850
|
+
OPACITY_WRITE_EPSILON
|
|
851
|
+
)) {
|
|
852
|
+
this.backdrop.style.opacity = String(backdropOpacity);
|
|
853
|
+
}
|
|
854
|
+
const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
|
|
855
|
+
if (nextPointer !== this.lastBackdropPointer) {
|
|
856
|
+
this.backdrop.style.pointerEvents = nextPointer;
|
|
857
|
+
this.lastBackdropPointer = nextPointer;
|
|
862
858
|
}
|
|
863
859
|
}
|
|
864
860
|
if (this.screenComponent && this.scrimMode !== "off") {
|
|
@@ -1388,18 +1384,20 @@ var AnimationRunner = class {
|
|
|
1388
1384
|
get isAnimating() {
|
|
1389
1385
|
return this.currentTween !== null || this.currentSpring !== null || this.currentWaapi !== null;
|
|
1390
1386
|
}
|
|
1387
|
+
cancelWaapi() {
|
|
1388
|
+
if (!this.currentWaapi) return;
|
|
1389
|
+
const entry = this.currentWaapi;
|
|
1390
|
+
this.currentWaapi = null;
|
|
1391
|
+
entry.stop();
|
|
1392
|
+
try {
|
|
1393
|
+
entry.anim.cancel();
|
|
1394
|
+
} catch {
|
|
1395
|
+
}
|
|
1396
|
+
}
|
|
1391
1397
|
cancel() {
|
|
1392
1398
|
this.currentTween?.cancel();
|
|
1393
1399
|
this.currentSpring?.cancel();
|
|
1394
|
-
|
|
1395
|
-
const entry = this.currentWaapi;
|
|
1396
|
-
this.currentWaapi = null;
|
|
1397
|
-
entry.stop();
|
|
1398
|
-
try {
|
|
1399
|
-
entry.anim.cancel();
|
|
1400
|
-
} catch {
|
|
1401
|
-
}
|
|
1402
|
-
}
|
|
1400
|
+
this.cancelWaapi();
|
|
1403
1401
|
}
|
|
1404
1402
|
async animateTo(target, velocityPxPerMs) {
|
|
1405
1403
|
if (target === this.getSize()) {
|
|
@@ -1410,6 +1408,7 @@ var AnimationRunner = class {
|
|
|
1410
1408
|
}
|
|
1411
1409
|
this.currentTween?.cancel();
|
|
1412
1410
|
this.currentSpring?.cancel();
|
|
1411
|
+
this.cancelWaapi();
|
|
1413
1412
|
this.getRootEl()?.setAttribute("data-animating", "true");
|
|
1414
1413
|
this.element.style.willChange = "transform";
|
|
1415
1414
|
if (this.reducedMotion) {
|
|
@@ -2620,6 +2619,7 @@ var BottomSheetCore = class {
|
|
|
2620
2619
|
__publicField(this, "progressWriteSentinel", new WriteSentinel());
|
|
2621
2620
|
__publicField(this, "isTopSheet", true);
|
|
2622
2621
|
__publicField(this, "opening", false);
|
|
2622
|
+
__publicField(this, "promotedForOpen", false);
|
|
2623
2623
|
__publicField(this, "allowOvershoot", false);
|
|
2624
2624
|
__publicField(this, "progressPayload", {
|
|
2625
2625
|
value: 0,
|
|
@@ -2676,7 +2676,6 @@ var BottomSheetCore = class {
|
|
|
2676
2676
|
screenComponent: this.screenComponent,
|
|
2677
2677
|
backdrop: this.backdrop,
|
|
2678
2678
|
isDestroyed: () => this.destroyed,
|
|
2679
|
-
isTopSheet: () => this.isTopSheet,
|
|
2680
2679
|
getAllowedIds: () => this.snaps.getAllowedIds().slice(),
|
|
2681
2680
|
getResolvedSnaps: () => this.snaps.getResolvedSnaps().slice(),
|
|
2682
2681
|
snapTo: (id) => {
|
|
@@ -2946,13 +2945,14 @@ var BottomSheetCore = class {
|
|
|
2946
2945
|
if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
|
|
2947
2946
|
return;
|
|
2948
2947
|
}
|
|
2948
|
+
const resumingOpen = this.opening;
|
|
2949
2949
|
const signal = this.newCycle();
|
|
2950
2950
|
const onExternalAbort = () => {
|
|
2951
2951
|
this.animation.cancel();
|
|
2952
2952
|
this.newCycle();
|
|
2953
2953
|
};
|
|
2954
2954
|
externalSignal?.addEventListener("abort", onExternalAbort, { once: true });
|
|
2955
|
-
const wasClosed = this.size === 0;
|
|
2955
|
+
const wasClosed = this.size === 0 || resumingOpen;
|
|
2956
2956
|
const previousId = this.activeId;
|
|
2957
2957
|
const previousSize = this.size;
|
|
2958
2958
|
this.scrollCache.cache(previousId, previousSize, target.size);
|
|
@@ -2961,7 +2961,10 @@ var BottomSheetCore = class {
|
|
|
2961
2961
|
const opensToRest = id === "closed" || rawTargetSize === 0;
|
|
2962
2962
|
if (wasClosed && !opensToRest) {
|
|
2963
2963
|
this.opening = true;
|
|
2964
|
-
|
|
2964
|
+
if (!resumingOpen) {
|
|
2965
|
+
this.promotedForOpen = true;
|
|
2966
|
+
sheetStack.promote(this.id);
|
|
2967
|
+
}
|
|
2965
2968
|
}
|
|
2966
2969
|
if (this.animation.viewTransitionsAvailable) {
|
|
2967
2970
|
this.currentViewTransition?.skipTransition?.();
|
|
@@ -3652,6 +3655,7 @@ var BottomSheetCore = class {
|
|
|
3652
3655
|
this.activeId = target.id;
|
|
3653
3656
|
if (previousSnapSize === 0 && target.size > 0) {
|
|
3654
3657
|
this.opening = true;
|
|
3658
|
+
this.promotedForOpen = true;
|
|
3655
3659
|
sheetStack.promote(this.id);
|
|
3656
3660
|
}
|
|
3657
3661
|
const settleCap = this.snaps.getMaxAxisSize();
|
|
@@ -3733,7 +3737,8 @@ var BottomSheetCore = class {
|
|
|
3733
3737
|
return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
|
|
3734
3738
|
}
|
|
3735
3739
|
handleOpen() {
|
|
3736
|
-
|
|
3740
|
+
if (this.promotedForOpen) this.promotedForOpen = false;
|
|
3741
|
+
else sheetStack.promote(this.id);
|
|
3737
3742
|
try {
|
|
3738
3743
|
this.lifecycle.install();
|
|
3739
3744
|
} catch (err) {
|
|
@@ -3765,6 +3770,7 @@ var BottomSheetCore = class {
|
|
|
3765
3770
|
}
|
|
3766
3771
|
handleClose() {
|
|
3767
3772
|
this.opening = false;
|
|
3773
|
+
this.promotedForOpen = false;
|
|
3768
3774
|
this.lifecycle.release();
|
|
3769
3775
|
sheetStack.update();
|
|
3770
3776
|
}
|
|
@@ -4740,6 +4746,10 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
4740
4746
|
if (next === void 0) return;
|
|
4741
4747
|
getEngine()?.setDragFrom(next);
|
|
4742
4748
|
});
|
|
4749
|
+
vue.watch(() => props.mode, (next) => {
|
|
4750
|
+
if (next === void 0) return;
|
|
4751
|
+
getEngine()?.setMode(next);
|
|
4752
|
+
});
|
|
4743
4753
|
const mounted = vue.ref(false);
|
|
4744
4754
|
const anchorHosts = vue.shallowRef({});
|
|
4745
4755
|
const anchorDetachers = vue.ref([]);
|
package/dist/vue.js
CHANGED
|
@@ -774,7 +774,6 @@ var ScrimController = class {
|
|
|
774
774
|
__publicField(this, "backdrop");
|
|
775
775
|
__publicField(this, "mode");
|
|
776
776
|
__publicField(this, "isDestroyed");
|
|
777
|
-
__publicField(this, "isTopSheet");
|
|
778
777
|
__publicField(this, "getAllowedIds");
|
|
779
778
|
__publicField(this, "getResolvedSnaps");
|
|
780
779
|
__publicField(this, "snapToFn");
|
|
@@ -796,7 +795,6 @@ var ScrimController = class {
|
|
|
796
795
|
this.backdrop = deps.backdrop;
|
|
797
796
|
this.mode = deps.mode;
|
|
798
797
|
this.isDestroyed = deps.isDestroyed;
|
|
799
|
-
this.isTopSheet = deps.isTopSheet;
|
|
800
798
|
this.getAllowedIds = deps.getAllowedIds;
|
|
801
799
|
this.getResolvedSnaps = deps.getResolvedSnaps;
|
|
802
800
|
this.snapToFn = deps.snapTo;
|
|
@@ -845,18 +843,16 @@ var ScrimController = class {
|
|
|
845
843
|
Math.max((progress - s) / range, 0),
|
|
846
844
|
1
|
|
847
845
|
);
|
|
848
|
-
if (this.
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
)
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
this.lastBackdropPointer = nextPointer;
|
|
859
|
-
}
|
|
846
|
+
if (this.backdropOpacitySentinel.shouldWrite(
|
|
847
|
+
backdropOpacity,
|
|
848
|
+
OPACITY_WRITE_EPSILON
|
|
849
|
+
)) {
|
|
850
|
+
this.backdrop.style.opacity = String(backdropOpacity);
|
|
851
|
+
}
|
|
852
|
+
const nextPointer = backdropOpacity > POINTER_EVENTS_OPACITY_THRESHOLD ? "auto" : "none";
|
|
853
|
+
if (nextPointer !== this.lastBackdropPointer) {
|
|
854
|
+
this.backdrop.style.pointerEvents = nextPointer;
|
|
855
|
+
this.lastBackdropPointer = nextPointer;
|
|
860
856
|
}
|
|
861
857
|
}
|
|
862
858
|
if (this.screenComponent && this.scrimMode !== "off") {
|
|
@@ -1386,18 +1382,20 @@ var AnimationRunner = class {
|
|
|
1386
1382
|
get isAnimating() {
|
|
1387
1383
|
return this.currentTween !== null || this.currentSpring !== null || this.currentWaapi !== null;
|
|
1388
1384
|
}
|
|
1385
|
+
cancelWaapi() {
|
|
1386
|
+
if (!this.currentWaapi) return;
|
|
1387
|
+
const entry = this.currentWaapi;
|
|
1388
|
+
this.currentWaapi = null;
|
|
1389
|
+
entry.stop();
|
|
1390
|
+
try {
|
|
1391
|
+
entry.anim.cancel();
|
|
1392
|
+
} catch {
|
|
1393
|
+
}
|
|
1394
|
+
}
|
|
1389
1395
|
cancel() {
|
|
1390
1396
|
this.currentTween?.cancel();
|
|
1391
1397
|
this.currentSpring?.cancel();
|
|
1392
|
-
|
|
1393
|
-
const entry = this.currentWaapi;
|
|
1394
|
-
this.currentWaapi = null;
|
|
1395
|
-
entry.stop();
|
|
1396
|
-
try {
|
|
1397
|
-
entry.anim.cancel();
|
|
1398
|
-
} catch {
|
|
1399
|
-
}
|
|
1400
|
-
}
|
|
1398
|
+
this.cancelWaapi();
|
|
1401
1399
|
}
|
|
1402
1400
|
async animateTo(target, velocityPxPerMs) {
|
|
1403
1401
|
if (target === this.getSize()) {
|
|
@@ -1408,6 +1406,7 @@ var AnimationRunner = class {
|
|
|
1408
1406
|
}
|
|
1409
1407
|
this.currentTween?.cancel();
|
|
1410
1408
|
this.currentSpring?.cancel();
|
|
1409
|
+
this.cancelWaapi();
|
|
1411
1410
|
this.getRootEl()?.setAttribute("data-animating", "true");
|
|
1412
1411
|
this.element.style.willChange = "transform";
|
|
1413
1412
|
if (this.reducedMotion) {
|
|
@@ -2618,6 +2617,7 @@ var BottomSheetCore = class {
|
|
|
2618
2617
|
__publicField(this, "progressWriteSentinel", new WriteSentinel());
|
|
2619
2618
|
__publicField(this, "isTopSheet", true);
|
|
2620
2619
|
__publicField(this, "opening", false);
|
|
2620
|
+
__publicField(this, "promotedForOpen", false);
|
|
2621
2621
|
__publicField(this, "allowOvershoot", false);
|
|
2622
2622
|
__publicField(this, "progressPayload", {
|
|
2623
2623
|
value: 0,
|
|
@@ -2674,7 +2674,6 @@ var BottomSheetCore = class {
|
|
|
2674
2674
|
screenComponent: this.screenComponent,
|
|
2675
2675
|
backdrop: this.backdrop,
|
|
2676
2676
|
isDestroyed: () => this.destroyed,
|
|
2677
|
-
isTopSheet: () => this.isTopSheet,
|
|
2678
2677
|
getAllowedIds: () => this.snaps.getAllowedIds().slice(),
|
|
2679
2678
|
getResolvedSnaps: () => this.snaps.getResolvedSnaps().slice(),
|
|
2680
2679
|
snapTo: (id) => {
|
|
@@ -2944,13 +2943,14 @@ var BottomSheetCore = class {
|
|
|
2944
2943
|
if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
|
|
2945
2944
|
return;
|
|
2946
2945
|
}
|
|
2946
|
+
const resumingOpen = this.opening;
|
|
2947
2947
|
const signal = this.newCycle();
|
|
2948
2948
|
const onExternalAbort = () => {
|
|
2949
2949
|
this.animation.cancel();
|
|
2950
2950
|
this.newCycle();
|
|
2951
2951
|
};
|
|
2952
2952
|
externalSignal?.addEventListener("abort", onExternalAbort, { once: true });
|
|
2953
|
-
const wasClosed = this.size === 0;
|
|
2953
|
+
const wasClosed = this.size === 0 || resumingOpen;
|
|
2954
2954
|
const previousId = this.activeId;
|
|
2955
2955
|
const previousSize = this.size;
|
|
2956
2956
|
this.scrollCache.cache(previousId, previousSize, target.size);
|
|
@@ -2959,7 +2959,10 @@ var BottomSheetCore = class {
|
|
|
2959
2959
|
const opensToRest = id === "closed" || rawTargetSize === 0;
|
|
2960
2960
|
if (wasClosed && !opensToRest) {
|
|
2961
2961
|
this.opening = true;
|
|
2962
|
-
|
|
2962
|
+
if (!resumingOpen) {
|
|
2963
|
+
this.promotedForOpen = true;
|
|
2964
|
+
sheetStack.promote(this.id);
|
|
2965
|
+
}
|
|
2963
2966
|
}
|
|
2964
2967
|
if (this.animation.viewTransitionsAvailable) {
|
|
2965
2968
|
this.currentViewTransition?.skipTransition?.();
|
|
@@ -3650,6 +3653,7 @@ var BottomSheetCore = class {
|
|
|
3650
3653
|
this.activeId = target.id;
|
|
3651
3654
|
if (previousSnapSize === 0 && target.size > 0) {
|
|
3652
3655
|
this.opening = true;
|
|
3656
|
+
this.promotedForOpen = true;
|
|
3653
3657
|
sheetStack.promote(this.id);
|
|
3654
3658
|
}
|
|
3655
3659
|
const settleCap = this.snaps.getMaxAxisSize();
|
|
@@ -3731,7 +3735,8 @@ var BottomSheetCore = class {
|
|
|
3731
3735
|
return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
|
|
3732
3736
|
}
|
|
3733
3737
|
handleOpen() {
|
|
3734
|
-
|
|
3738
|
+
if (this.promotedForOpen) this.promotedForOpen = false;
|
|
3739
|
+
else sheetStack.promote(this.id);
|
|
3735
3740
|
try {
|
|
3736
3741
|
this.lifecycle.install();
|
|
3737
3742
|
} catch (err) {
|
|
@@ -3763,6 +3768,7 @@ var BottomSheetCore = class {
|
|
|
3763
3768
|
}
|
|
3764
3769
|
handleClose() {
|
|
3765
3770
|
this.opening = false;
|
|
3771
|
+
this.promotedForOpen = false;
|
|
3766
3772
|
this.lifecycle.release();
|
|
3767
3773
|
sheetStack.update();
|
|
3768
3774
|
}
|
|
@@ -4738,6 +4744,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
4738
4744
|
if (next === void 0) return;
|
|
4739
4745
|
getEngine()?.setDragFrom(next);
|
|
4740
4746
|
});
|
|
4747
|
+
watch(() => props.mode, (next) => {
|
|
4748
|
+
if (next === void 0) return;
|
|
4749
|
+
getEngine()?.setMode(next);
|
|
4750
|
+
});
|
|
4741
4751
|
const mounted = ref(false);
|
|
4742
4752
|
const anchorHosts = shallowRef({});
|
|
4743
4753
|
const anchorDetachers = ref([]);
|
package/dist/webgl.d.cts
CHANGED
package/dist/webgl.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@surdeddd/bottom-sheet",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.21.1",
|
|
4
4
|
"description": "Universal, headless bottom sheet — framework-agnostic core with React, Vue 3, Svelte, Solid, Qwik, Preact, Lit and Custom Element adapters. Pointer Events, snap points, momentum, a11y, SSR-safe.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -429,7 +429,7 @@
|
|
|
429
429
|
"publint": "^0.3.22",
|
|
430
430
|
"react": "^18.3.1",
|
|
431
431
|
"react-dom": "^18.3.1",
|
|
432
|
-
"rolldown": "^1.2.
|
|
432
|
+
"rolldown": "^1.2.8",
|
|
433
433
|
"size-limit": "^13.0.3",
|
|
434
434
|
"solid-js": "^1.9.14",
|
|
435
435
|
"svelte": "^5.56.8",
|