@surdeddd/bottom-sheet 0.6.1 → 0.7.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 +31 -3
- package/dist/element.cjs +28 -26
- package/dist/element.iife.global.js +2 -2
- package/dist/element.js +28 -26
- package/dist/index.cjs +27 -25
- package/dist/index.js +27 -25
- package/dist/qwik.cjs +27 -25
- package/dist/qwik.js +27 -25
- package/dist/react.cjs +27 -25
- package/dist/react.js +27 -25
- package/dist/solid.cjs +30 -26
- package/dist/solid.d.cts +2 -0
- package/dist/solid.d.ts +2 -0
- package/dist/solid.js +30 -26
- package/dist/solid.source.jsx +30 -26
- package/dist/styles.css +4 -4
- package/dist/svelte-core.cjs +27 -25
- package/dist/svelte-core.js +27 -25
- package/dist/svelte.cjs +27 -25
- package/dist/svelte.js +27 -25
- package/dist/vue.cjs +27 -25
- package/dist/vue.js +27 -25
- package/package.json +1 -1
package/dist/qwik.js
CHANGED
|
@@ -2648,8 +2648,8 @@ var BottomSheetEngine = class {
|
|
|
2648
2648
|
this.updateAriaSlider();
|
|
2649
2649
|
this.emit("snap", {
|
|
2650
2650
|
id,
|
|
2651
|
-
size:
|
|
2652
|
-
progress: this.computeProgress(
|
|
2651
|
+
size: this.size,
|
|
2652
|
+
progress: this.computeProgress(this.size)
|
|
2653
2653
|
});
|
|
2654
2654
|
if (wasClosed && target.size > 0) {
|
|
2655
2655
|
this.emit("open", { id });
|
|
@@ -2728,12 +2728,12 @@ var BottomSheetEngine = class {
|
|
|
2728
2728
|
const value = typeof h === "number" ? `${h}px` : h;
|
|
2729
2729
|
const axis = layoutAxis(this.mode);
|
|
2730
2730
|
this.element.style.setProperty(
|
|
2731
|
-
axis === "height" ? "
|
|
2731
|
+
axis === "height" ? "max-height" : "max-width",
|
|
2732
2732
|
value
|
|
2733
2733
|
);
|
|
2734
2734
|
if (typeof h === "number") {
|
|
2735
2735
|
this.maxHeightCap = h;
|
|
2736
|
-
this.
|
|
2736
|
+
this.recompute();
|
|
2737
2737
|
} else if (typeof window !== "undefined") {
|
|
2738
2738
|
const probe2 = document.createElement("div");
|
|
2739
2739
|
probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
|
|
@@ -2741,7 +2741,7 @@ var BottomSheetEngine = class {
|
|
|
2741
2741
|
const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
|
|
2742
2742
|
probe2.remove();
|
|
2743
2743
|
this.maxHeightCap = measured > 0 ? measured : void 0;
|
|
2744
|
-
this.
|
|
2744
|
+
this.recompute();
|
|
2745
2745
|
}
|
|
2746
2746
|
}
|
|
2747
2747
|
clampToMaxHeight() {
|
|
@@ -2749,9 +2749,6 @@ var BottomSheetEngine = class {
|
|
|
2749
2749
|
if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
|
|
2750
2750
|
this.snaps.setMaxAxisSize(this.maxHeightCap);
|
|
2751
2751
|
}
|
|
2752
|
-
if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
|
|
2753
|
-
this.applySize(this.maxHeightCap);
|
|
2754
|
-
}
|
|
2755
2752
|
}
|
|
2756
2753
|
setAllowed(ids, snap) {
|
|
2757
2754
|
if (this.destroyed) return;
|
|
@@ -2889,6 +2886,7 @@ var BottomSheetEngine = class {
|
|
|
2889
2886
|
recompute() {
|
|
2890
2887
|
if (this.destroyed) return;
|
|
2891
2888
|
this.snaps.recompute();
|
|
2889
|
+
this.clampToMaxHeight();
|
|
2892
2890
|
this.scrim.invalidateOpacityCache();
|
|
2893
2891
|
if (this.gesture?.isDragging) return;
|
|
2894
2892
|
const current = this.snaps.findById(this.activeId);
|
|
@@ -2946,9 +2944,10 @@ var BottomSheetEngine = class {
|
|
|
2946
2944
|
const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
|
|
2947
2945
|
const content = this.scrollContainer;
|
|
2948
2946
|
const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
|
|
2949
|
-
|
|
2947
|
+
const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
|
|
2948
|
+
if (typeof window === "undefined") return capped;
|
|
2950
2949
|
const viewport = vertical ? window.innerHeight : window.innerWidth;
|
|
2951
|
-
return viewport > 0 ? Math.min(
|
|
2950
|
+
return viewport > 0 ? Math.min(capped, viewport) : capped;
|
|
2952
2951
|
}
|
|
2953
2952
|
installFitObserver() {
|
|
2954
2953
|
if (typeof ResizeObserver === "undefined") return;
|
|
@@ -3319,8 +3318,8 @@ var BottomSheetEngine = class {
|
|
|
3319
3318
|
this.updateAriaSlider();
|
|
3320
3319
|
this.emit("snap", {
|
|
3321
3320
|
id: target.id,
|
|
3322
|
-
size:
|
|
3323
|
-
progress: this.computeProgress(
|
|
3321
|
+
size: this.size,
|
|
3322
|
+
progress: this.computeProgress(this.size)
|
|
3324
3323
|
});
|
|
3325
3324
|
this.haptic();
|
|
3326
3325
|
if (previousSnapSize === 0 && target.size > 0) {
|
|
@@ -3345,23 +3344,25 @@ var BottomSheetEngine = class {
|
|
|
3345
3344
|
}
|
|
3346
3345
|
}
|
|
3347
3346
|
applySize(size) {
|
|
3348
|
-
|
|
3349
|
-
const
|
|
3347
|
+
const cap = this.snaps.getMaxAxisSize();
|
|
3348
|
+
const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
|
|
3349
|
+
this.size = clamped;
|
|
3350
|
+
const offset = cap - clamped;
|
|
3350
3351
|
const style = this.element.style;
|
|
3351
3352
|
style.transform = this.transformTemplate(offset);
|
|
3352
|
-
if (this.sizeWriteSentinel.shouldWrite(
|
|
3353
|
-
style.setProperty("--bs-size", `${
|
|
3353
|
+
if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
|
|
3354
|
+
style.setProperty("--bs-size", `${clamped}px`);
|
|
3354
3355
|
if (this.scrimParent) {
|
|
3355
|
-
this.scrimParent.style.setProperty("--bs-size", `${
|
|
3356
|
+
this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
|
|
3356
3357
|
}
|
|
3357
3358
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3358
|
-
this.anchorHost.style.setProperty("--bs-size", `${
|
|
3359
|
+
this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
|
|
3359
3360
|
}
|
|
3360
3361
|
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3361
|
-
this.rootEl.style.setProperty("--bs-size", `${
|
|
3362
|
+
this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
|
|
3362
3363
|
}
|
|
3363
3364
|
}
|
|
3364
|
-
const progress = this.computeProgress(
|
|
3365
|
+
const progress = this.computeProgress(clamped);
|
|
3365
3366
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
3366
3367
|
progress,
|
|
3367
3368
|
OPACITY_WRITE_EPSILON
|
|
@@ -3378,14 +3379,15 @@ var BottomSheetEngine = class {
|
|
|
3378
3379
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3379
3380
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
|
3380
3381
|
this.progressPayload.value = progress;
|
|
3381
|
-
this.progressPayload.size =
|
|
3382
|
+
this.progressPayload.size = clamped;
|
|
3382
3383
|
this.emit("progress", this.progressPayload);
|
|
3383
3384
|
}
|
|
3384
3385
|
}
|
|
3385
3386
|
computeProgress(size) {
|
|
3386
3387
|
const { min, max } = this.getAllowedRange();
|
|
3387
|
-
|
|
3388
|
-
|
|
3388
|
+
const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
|
|
3389
|
+
if (reachableMax <= min) return 0;
|
|
3390
|
+
return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
|
|
3389
3391
|
}
|
|
3390
3392
|
handleOpen() {
|
|
3391
3393
|
sheetStack.promote(this.id);
|
|
@@ -3409,8 +3411,8 @@ var BottomSheetEngine = class {
|
|
|
3409
3411
|
this.updateAriaSlider();
|
|
3410
3412
|
this.emit("snap", {
|
|
3411
3413
|
id: target.id,
|
|
3412
|
-
size:
|
|
3413
|
-
progress: this.computeProgress(
|
|
3414
|
+
size: this.size,
|
|
3415
|
+
progress: this.computeProgress(this.size)
|
|
3414
3416
|
});
|
|
3415
3417
|
if (target.size > 0 && !this.lifecycle.isInstalled) {
|
|
3416
3418
|
this.emit("open", { id: target.id });
|
package/dist/react.cjs
CHANGED
|
@@ -2657,8 +2657,8 @@ var BottomSheetEngine = class {
|
|
|
2657
2657
|
this.updateAriaSlider();
|
|
2658
2658
|
this.emit("snap", {
|
|
2659
2659
|
id,
|
|
2660
|
-
size:
|
|
2661
|
-
progress: this.computeProgress(
|
|
2660
|
+
size: this.size,
|
|
2661
|
+
progress: this.computeProgress(this.size)
|
|
2662
2662
|
});
|
|
2663
2663
|
if (wasClosed && target.size > 0) {
|
|
2664
2664
|
this.emit("open", { id });
|
|
@@ -2737,12 +2737,12 @@ var BottomSheetEngine = class {
|
|
|
2737
2737
|
const value = typeof h === "number" ? `${h}px` : h;
|
|
2738
2738
|
const axis = layoutAxis(this.mode);
|
|
2739
2739
|
this.element.style.setProperty(
|
|
2740
|
-
axis === "height" ? "
|
|
2740
|
+
axis === "height" ? "max-height" : "max-width",
|
|
2741
2741
|
value
|
|
2742
2742
|
);
|
|
2743
2743
|
if (typeof h === "number") {
|
|
2744
2744
|
this.maxHeightCap = h;
|
|
2745
|
-
this.
|
|
2745
|
+
this.recompute();
|
|
2746
2746
|
} else if (typeof window !== "undefined") {
|
|
2747
2747
|
const probe2 = document.createElement("div");
|
|
2748
2748
|
probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
|
|
@@ -2750,7 +2750,7 @@ var BottomSheetEngine = class {
|
|
|
2750
2750
|
const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
|
|
2751
2751
|
probe2.remove();
|
|
2752
2752
|
this.maxHeightCap = measured > 0 ? measured : void 0;
|
|
2753
|
-
this.
|
|
2753
|
+
this.recompute();
|
|
2754
2754
|
}
|
|
2755
2755
|
}
|
|
2756
2756
|
clampToMaxHeight() {
|
|
@@ -2758,9 +2758,6 @@ var BottomSheetEngine = class {
|
|
|
2758
2758
|
if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
|
|
2759
2759
|
this.snaps.setMaxAxisSize(this.maxHeightCap);
|
|
2760
2760
|
}
|
|
2761
|
-
if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
|
|
2762
|
-
this.applySize(this.maxHeightCap);
|
|
2763
|
-
}
|
|
2764
2761
|
}
|
|
2765
2762
|
setAllowed(ids, snap) {
|
|
2766
2763
|
if (this.destroyed) return;
|
|
@@ -2898,6 +2895,7 @@ var BottomSheetEngine = class {
|
|
|
2898
2895
|
recompute() {
|
|
2899
2896
|
if (this.destroyed) return;
|
|
2900
2897
|
this.snaps.recompute();
|
|
2898
|
+
this.clampToMaxHeight();
|
|
2901
2899
|
this.scrim.invalidateOpacityCache();
|
|
2902
2900
|
if (this.gesture?.isDragging) return;
|
|
2903
2901
|
const current = this.snaps.findById(this.activeId);
|
|
@@ -2955,9 +2953,10 @@ var BottomSheetEngine = class {
|
|
|
2955
2953
|
const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
|
|
2956
2954
|
const content = this.scrollContainer;
|
|
2957
2955
|
const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
|
|
2958
|
-
|
|
2956
|
+
const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
|
|
2957
|
+
if (typeof window === "undefined") return capped;
|
|
2959
2958
|
const viewport = vertical ? window.innerHeight : window.innerWidth;
|
|
2960
|
-
return viewport > 0 ? Math.min(
|
|
2959
|
+
return viewport > 0 ? Math.min(capped, viewport) : capped;
|
|
2961
2960
|
}
|
|
2962
2961
|
installFitObserver() {
|
|
2963
2962
|
if (typeof ResizeObserver === "undefined") return;
|
|
@@ -3328,8 +3327,8 @@ var BottomSheetEngine = class {
|
|
|
3328
3327
|
this.updateAriaSlider();
|
|
3329
3328
|
this.emit("snap", {
|
|
3330
3329
|
id: target.id,
|
|
3331
|
-
size:
|
|
3332
|
-
progress: this.computeProgress(
|
|
3330
|
+
size: this.size,
|
|
3331
|
+
progress: this.computeProgress(this.size)
|
|
3333
3332
|
});
|
|
3334
3333
|
this.haptic();
|
|
3335
3334
|
if (previousSnapSize === 0 && target.size > 0) {
|
|
@@ -3354,23 +3353,25 @@ var BottomSheetEngine = class {
|
|
|
3354
3353
|
}
|
|
3355
3354
|
}
|
|
3356
3355
|
applySize(size) {
|
|
3357
|
-
|
|
3358
|
-
const
|
|
3356
|
+
const cap = this.snaps.getMaxAxisSize();
|
|
3357
|
+
const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
|
|
3358
|
+
this.size = clamped;
|
|
3359
|
+
const offset = cap - clamped;
|
|
3359
3360
|
const style = this.element.style;
|
|
3360
3361
|
style.transform = this.transformTemplate(offset);
|
|
3361
|
-
if (this.sizeWriteSentinel.shouldWrite(
|
|
3362
|
-
style.setProperty("--bs-size", `${
|
|
3362
|
+
if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
|
|
3363
|
+
style.setProperty("--bs-size", `${clamped}px`);
|
|
3363
3364
|
if (this.scrimParent) {
|
|
3364
|
-
this.scrimParent.style.setProperty("--bs-size", `${
|
|
3365
|
+
this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
|
|
3365
3366
|
}
|
|
3366
3367
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3367
|
-
this.anchorHost.style.setProperty("--bs-size", `${
|
|
3368
|
+
this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
|
|
3368
3369
|
}
|
|
3369
3370
|
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3370
|
-
this.rootEl.style.setProperty("--bs-size", `${
|
|
3371
|
+
this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
|
|
3371
3372
|
}
|
|
3372
3373
|
}
|
|
3373
|
-
const progress = this.computeProgress(
|
|
3374
|
+
const progress = this.computeProgress(clamped);
|
|
3374
3375
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
3375
3376
|
progress,
|
|
3376
3377
|
OPACITY_WRITE_EPSILON
|
|
@@ -3387,14 +3388,15 @@ var BottomSheetEngine = class {
|
|
|
3387
3388
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3388
3389
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
|
3389
3390
|
this.progressPayload.value = progress;
|
|
3390
|
-
this.progressPayload.size =
|
|
3391
|
+
this.progressPayload.size = clamped;
|
|
3391
3392
|
this.emit("progress", this.progressPayload);
|
|
3392
3393
|
}
|
|
3393
3394
|
}
|
|
3394
3395
|
computeProgress(size) {
|
|
3395
3396
|
const { min, max } = this.getAllowedRange();
|
|
3396
|
-
|
|
3397
|
-
|
|
3397
|
+
const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
|
|
3398
|
+
if (reachableMax <= min) return 0;
|
|
3399
|
+
return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
|
|
3398
3400
|
}
|
|
3399
3401
|
handleOpen() {
|
|
3400
3402
|
sheetStack.promote(this.id);
|
|
@@ -3418,8 +3420,8 @@ var BottomSheetEngine = class {
|
|
|
3418
3420
|
this.updateAriaSlider();
|
|
3419
3421
|
this.emit("snap", {
|
|
3420
3422
|
id: target.id,
|
|
3421
|
-
size:
|
|
3422
|
-
progress: this.computeProgress(
|
|
3423
|
+
size: this.size,
|
|
3424
|
+
progress: this.computeProgress(this.size)
|
|
3423
3425
|
});
|
|
3424
3426
|
if (target.size > 0 && !this.lifecycle.isInstalled) {
|
|
3425
3427
|
this.emit("open", { id: target.id });
|
package/dist/react.js
CHANGED
|
@@ -2655,8 +2655,8 @@ var BottomSheetEngine = class {
|
|
|
2655
2655
|
this.updateAriaSlider();
|
|
2656
2656
|
this.emit("snap", {
|
|
2657
2657
|
id,
|
|
2658
|
-
size:
|
|
2659
|
-
progress: this.computeProgress(
|
|
2658
|
+
size: this.size,
|
|
2659
|
+
progress: this.computeProgress(this.size)
|
|
2660
2660
|
});
|
|
2661
2661
|
if (wasClosed && target.size > 0) {
|
|
2662
2662
|
this.emit("open", { id });
|
|
@@ -2735,12 +2735,12 @@ var BottomSheetEngine = class {
|
|
|
2735
2735
|
const value = typeof h === "number" ? `${h}px` : h;
|
|
2736
2736
|
const axis = layoutAxis(this.mode);
|
|
2737
2737
|
this.element.style.setProperty(
|
|
2738
|
-
axis === "height" ? "
|
|
2738
|
+
axis === "height" ? "max-height" : "max-width",
|
|
2739
2739
|
value
|
|
2740
2740
|
);
|
|
2741
2741
|
if (typeof h === "number") {
|
|
2742
2742
|
this.maxHeightCap = h;
|
|
2743
|
-
this.
|
|
2743
|
+
this.recompute();
|
|
2744
2744
|
} else if (typeof window !== "undefined") {
|
|
2745
2745
|
const probe2 = document.createElement("div");
|
|
2746
2746
|
probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
|
|
@@ -2748,7 +2748,7 @@ var BottomSheetEngine = class {
|
|
|
2748
2748
|
const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
|
|
2749
2749
|
probe2.remove();
|
|
2750
2750
|
this.maxHeightCap = measured > 0 ? measured : void 0;
|
|
2751
|
-
this.
|
|
2751
|
+
this.recompute();
|
|
2752
2752
|
}
|
|
2753
2753
|
}
|
|
2754
2754
|
clampToMaxHeight() {
|
|
@@ -2756,9 +2756,6 @@ var BottomSheetEngine = class {
|
|
|
2756
2756
|
if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
|
|
2757
2757
|
this.snaps.setMaxAxisSize(this.maxHeightCap);
|
|
2758
2758
|
}
|
|
2759
|
-
if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
|
|
2760
|
-
this.applySize(this.maxHeightCap);
|
|
2761
|
-
}
|
|
2762
2759
|
}
|
|
2763
2760
|
setAllowed(ids, snap) {
|
|
2764
2761
|
if (this.destroyed) return;
|
|
@@ -2896,6 +2893,7 @@ var BottomSheetEngine = class {
|
|
|
2896
2893
|
recompute() {
|
|
2897
2894
|
if (this.destroyed) return;
|
|
2898
2895
|
this.snaps.recompute();
|
|
2896
|
+
this.clampToMaxHeight();
|
|
2899
2897
|
this.scrim.invalidateOpacityCache();
|
|
2900
2898
|
if (this.gesture?.isDragging) return;
|
|
2901
2899
|
const current = this.snaps.findById(this.activeId);
|
|
@@ -2953,9 +2951,10 @@ var BottomSheetEngine = class {
|
|
|
2953
2951
|
const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
|
|
2954
2952
|
const content = this.scrollContainer;
|
|
2955
2953
|
const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
|
|
2956
|
-
|
|
2954
|
+
const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
|
|
2955
|
+
if (typeof window === "undefined") return capped;
|
|
2957
2956
|
const viewport = vertical ? window.innerHeight : window.innerWidth;
|
|
2958
|
-
return viewport > 0 ? Math.min(
|
|
2957
|
+
return viewport > 0 ? Math.min(capped, viewport) : capped;
|
|
2959
2958
|
}
|
|
2960
2959
|
installFitObserver() {
|
|
2961
2960
|
if (typeof ResizeObserver === "undefined") return;
|
|
@@ -3326,8 +3325,8 @@ var BottomSheetEngine = class {
|
|
|
3326
3325
|
this.updateAriaSlider();
|
|
3327
3326
|
this.emit("snap", {
|
|
3328
3327
|
id: target.id,
|
|
3329
|
-
size:
|
|
3330
|
-
progress: this.computeProgress(
|
|
3328
|
+
size: this.size,
|
|
3329
|
+
progress: this.computeProgress(this.size)
|
|
3331
3330
|
});
|
|
3332
3331
|
this.haptic();
|
|
3333
3332
|
if (previousSnapSize === 0 && target.size > 0) {
|
|
@@ -3352,23 +3351,25 @@ var BottomSheetEngine = class {
|
|
|
3352
3351
|
}
|
|
3353
3352
|
}
|
|
3354
3353
|
applySize(size) {
|
|
3355
|
-
|
|
3356
|
-
const
|
|
3354
|
+
const cap = this.snaps.getMaxAxisSize();
|
|
3355
|
+
const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
|
|
3356
|
+
this.size = clamped;
|
|
3357
|
+
const offset = cap - clamped;
|
|
3357
3358
|
const style = this.element.style;
|
|
3358
3359
|
style.transform = this.transformTemplate(offset);
|
|
3359
|
-
if (this.sizeWriteSentinel.shouldWrite(
|
|
3360
|
-
style.setProperty("--bs-size", `${
|
|
3360
|
+
if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
|
|
3361
|
+
style.setProperty("--bs-size", `${clamped}px`);
|
|
3361
3362
|
if (this.scrimParent) {
|
|
3362
|
-
this.scrimParent.style.setProperty("--bs-size", `${
|
|
3363
|
+
this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
|
|
3363
3364
|
}
|
|
3364
3365
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3365
|
-
this.anchorHost.style.setProperty("--bs-size", `${
|
|
3366
|
+
this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
|
|
3366
3367
|
}
|
|
3367
3368
|
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3368
|
-
this.rootEl.style.setProperty("--bs-size", `${
|
|
3369
|
+
this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
|
|
3369
3370
|
}
|
|
3370
3371
|
}
|
|
3371
|
-
const progress = this.computeProgress(
|
|
3372
|
+
const progress = this.computeProgress(clamped);
|
|
3372
3373
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
3373
3374
|
progress,
|
|
3374
3375
|
OPACITY_WRITE_EPSILON
|
|
@@ -3385,14 +3386,15 @@ var BottomSheetEngine = class {
|
|
|
3385
3386
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3386
3387
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
|
3387
3388
|
this.progressPayload.value = progress;
|
|
3388
|
-
this.progressPayload.size =
|
|
3389
|
+
this.progressPayload.size = clamped;
|
|
3389
3390
|
this.emit("progress", this.progressPayload);
|
|
3390
3391
|
}
|
|
3391
3392
|
}
|
|
3392
3393
|
computeProgress(size) {
|
|
3393
3394
|
const { min, max } = this.getAllowedRange();
|
|
3394
|
-
|
|
3395
|
-
|
|
3395
|
+
const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
|
|
3396
|
+
if (reachableMax <= min) return 0;
|
|
3397
|
+
return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
|
|
3396
3398
|
}
|
|
3397
3399
|
handleOpen() {
|
|
3398
3400
|
sheetStack.promote(this.id);
|
|
@@ -3416,8 +3418,8 @@ var BottomSheetEngine = class {
|
|
|
3416
3418
|
this.updateAriaSlider();
|
|
3417
3419
|
this.emit("snap", {
|
|
3418
3420
|
id: target.id,
|
|
3419
|
-
size:
|
|
3420
|
-
progress: this.computeProgress(
|
|
3421
|
+
size: this.size,
|
|
3422
|
+
progress: this.computeProgress(this.size)
|
|
3421
3423
|
});
|
|
3422
3424
|
if (target.size > 0 && !this.lifecycle.isInstalled) {
|
|
3423
3425
|
this.emit("open", { id: target.id });
|
package/dist/solid.cjs
CHANGED
|
@@ -2650,8 +2650,8 @@ var BottomSheetEngine = class {
|
|
|
2650
2650
|
this.updateAriaSlider();
|
|
2651
2651
|
this.emit("snap", {
|
|
2652
2652
|
id,
|
|
2653
|
-
size:
|
|
2654
|
-
progress: this.computeProgress(
|
|
2653
|
+
size: this.size,
|
|
2654
|
+
progress: this.computeProgress(this.size)
|
|
2655
2655
|
});
|
|
2656
2656
|
if (wasClosed && target.size > 0) {
|
|
2657
2657
|
this.emit("open", { id });
|
|
@@ -2730,12 +2730,12 @@ var BottomSheetEngine = class {
|
|
|
2730
2730
|
const value = typeof h === "number" ? `${h}px` : h;
|
|
2731
2731
|
const axis = layoutAxis(this.mode);
|
|
2732
2732
|
this.element.style.setProperty(
|
|
2733
|
-
axis === "height" ? "
|
|
2733
|
+
axis === "height" ? "max-height" : "max-width",
|
|
2734
2734
|
value
|
|
2735
2735
|
);
|
|
2736
2736
|
if (typeof h === "number") {
|
|
2737
2737
|
this.maxHeightCap = h;
|
|
2738
|
-
this.
|
|
2738
|
+
this.recompute();
|
|
2739
2739
|
} else if (typeof window !== "undefined") {
|
|
2740
2740
|
const probe2 = document.createElement("div");
|
|
2741
2741
|
probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
|
|
@@ -2743,7 +2743,7 @@ var BottomSheetEngine = class {
|
|
|
2743
2743
|
const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
|
|
2744
2744
|
probe2.remove();
|
|
2745
2745
|
this.maxHeightCap = measured > 0 ? measured : void 0;
|
|
2746
|
-
this.
|
|
2746
|
+
this.recompute();
|
|
2747
2747
|
}
|
|
2748
2748
|
}
|
|
2749
2749
|
clampToMaxHeight() {
|
|
@@ -2751,9 +2751,6 @@ var BottomSheetEngine = class {
|
|
|
2751
2751
|
if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
|
|
2752
2752
|
this.snaps.setMaxAxisSize(this.maxHeightCap);
|
|
2753
2753
|
}
|
|
2754
|
-
if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
|
|
2755
|
-
this.applySize(this.maxHeightCap);
|
|
2756
|
-
}
|
|
2757
2754
|
}
|
|
2758
2755
|
setAllowed(ids, snap) {
|
|
2759
2756
|
if (this.destroyed) return;
|
|
@@ -2891,6 +2888,7 @@ var BottomSheetEngine = class {
|
|
|
2891
2888
|
recompute() {
|
|
2892
2889
|
if (this.destroyed) return;
|
|
2893
2890
|
this.snaps.recompute();
|
|
2891
|
+
this.clampToMaxHeight();
|
|
2894
2892
|
this.scrim.invalidateOpacityCache();
|
|
2895
2893
|
if (this.gesture?.isDragging) return;
|
|
2896
2894
|
const current = this.snaps.findById(this.activeId);
|
|
@@ -2948,9 +2946,10 @@ var BottomSheetEngine = class {
|
|
|
2948
2946
|
const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
|
|
2949
2947
|
const content = this.scrollContainer;
|
|
2950
2948
|
const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
|
|
2951
|
-
|
|
2949
|
+
const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
|
|
2950
|
+
if (typeof window === "undefined") return capped;
|
|
2952
2951
|
const viewport = vertical ? window.innerHeight : window.innerWidth;
|
|
2953
|
-
return viewport > 0 ? Math.min(
|
|
2952
|
+
return viewport > 0 ? Math.min(capped, viewport) : capped;
|
|
2954
2953
|
}
|
|
2955
2954
|
installFitObserver() {
|
|
2956
2955
|
if (typeof ResizeObserver === "undefined") return;
|
|
@@ -3321,8 +3320,8 @@ var BottomSheetEngine = class {
|
|
|
3321
3320
|
this.updateAriaSlider();
|
|
3322
3321
|
this.emit("snap", {
|
|
3323
3322
|
id: target.id,
|
|
3324
|
-
size:
|
|
3325
|
-
progress: this.computeProgress(
|
|
3323
|
+
size: this.size,
|
|
3324
|
+
progress: this.computeProgress(this.size)
|
|
3326
3325
|
});
|
|
3327
3326
|
this.haptic();
|
|
3328
3327
|
if (previousSnapSize === 0 && target.size > 0) {
|
|
@@ -3347,23 +3346,25 @@ var BottomSheetEngine = class {
|
|
|
3347
3346
|
}
|
|
3348
3347
|
}
|
|
3349
3348
|
applySize(size) {
|
|
3350
|
-
|
|
3351
|
-
const
|
|
3349
|
+
const cap = this.snaps.getMaxAxisSize();
|
|
3350
|
+
const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
|
|
3351
|
+
this.size = clamped;
|
|
3352
|
+
const offset = cap - clamped;
|
|
3352
3353
|
const style = this.element.style;
|
|
3353
3354
|
style.transform = this.transformTemplate(offset);
|
|
3354
|
-
if (this.sizeWriteSentinel.shouldWrite(
|
|
3355
|
-
style.setProperty("--bs-size", `${
|
|
3355
|
+
if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
|
|
3356
|
+
style.setProperty("--bs-size", `${clamped}px`);
|
|
3356
3357
|
if (this.scrimParent) {
|
|
3357
|
-
this.scrimParent.style.setProperty("--bs-size", `${
|
|
3358
|
+
this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
|
|
3358
3359
|
}
|
|
3359
3360
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3360
|
-
this.anchorHost.style.setProperty("--bs-size", `${
|
|
3361
|
+
this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
|
|
3361
3362
|
}
|
|
3362
3363
|
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3363
|
-
this.rootEl.style.setProperty("--bs-size", `${
|
|
3364
|
+
this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
|
|
3364
3365
|
}
|
|
3365
3366
|
}
|
|
3366
|
-
const progress = this.computeProgress(
|
|
3367
|
+
const progress = this.computeProgress(clamped);
|
|
3367
3368
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
3368
3369
|
progress,
|
|
3369
3370
|
OPACITY_WRITE_EPSILON
|
|
@@ -3380,14 +3381,15 @@ var BottomSheetEngine = class {
|
|
|
3380
3381
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3381
3382
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
|
3382
3383
|
this.progressPayload.value = progress;
|
|
3383
|
-
this.progressPayload.size =
|
|
3384
|
+
this.progressPayload.size = clamped;
|
|
3384
3385
|
this.emit("progress", this.progressPayload);
|
|
3385
3386
|
}
|
|
3386
3387
|
}
|
|
3387
3388
|
computeProgress(size) {
|
|
3388
3389
|
const { min, max } = this.getAllowedRange();
|
|
3389
|
-
|
|
3390
|
-
|
|
3390
|
+
const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
|
|
3391
|
+
if (reachableMax <= min) return 0;
|
|
3392
|
+
return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
|
|
3391
3393
|
}
|
|
3392
3394
|
handleOpen() {
|
|
3393
3395
|
sheetStack.promote(this.id);
|
|
@@ -3411,8 +3413,8 @@ var BottomSheetEngine = class {
|
|
|
3411
3413
|
this.updateAriaSlider();
|
|
3412
3414
|
this.emit("snap", {
|
|
3413
3415
|
id: target.id,
|
|
3414
|
-
size:
|
|
3415
|
-
progress: this.computeProgress(
|
|
3416
|
+
size: this.size,
|
|
3417
|
+
progress: this.computeProgress(this.size)
|
|
3416
3418
|
});
|
|
3417
3419
|
if (target.size > 0 && !this.lifecycle.isInstalled) {
|
|
3418
3420
|
this.emit("open", { id: target.id });
|
|
@@ -3471,7 +3473,9 @@ var BottomSheet = (props) => {
|
|
|
3471
3473
|
closeOnBack: props.closeOnBack,
|
|
3472
3474
|
lockBodyScroll: props.lockBodyScroll,
|
|
3473
3475
|
rubberBand: props.rubberBand,
|
|
3474
|
-
backdropRange: props.backdropRange
|
|
3476
|
+
backdropRange: props.backdropRange,
|
|
3477
|
+
radius: props.radius,
|
|
3478
|
+
maxHeight: props.maxHeight
|
|
3475
3479
|
};
|
|
3476
3480
|
engine = new BottomSheetEngine(engineOpts);
|
|
3477
3481
|
props.engineRef?.(engine);
|
package/dist/solid.d.cts
CHANGED
|
@@ -319,6 +319,8 @@ type BottomSheetProps<TId extends string = string> = {
|
|
|
319
319
|
lockBodyScroll?: boolean;
|
|
320
320
|
rubberBand?: boolean;
|
|
321
321
|
backdropRange?: [number, number];
|
|
322
|
+
radius?: string | number;
|
|
323
|
+
maxHeight?: string | number;
|
|
322
324
|
backdrop?: boolean;
|
|
323
325
|
closeOnBackdrop?: boolean;
|
|
324
326
|
ariaLabel?: string;
|
package/dist/solid.d.ts
CHANGED
|
@@ -319,6 +319,8 @@ type BottomSheetProps<TId extends string = string> = {
|
|
|
319
319
|
lockBodyScroll?: boolean;
|
|
320
320
|
rubberBand?: boolean;
|
|
321
321
|
backdropRange?: [number, number];
|
|
322
|
+
radius?: string | number;
|
|
323
|
+
maxHeight?: string | number;
|
|
322
324
|
backdrop?: boolean;
|
|
323
325
|
closeOnBackdrop?: boolean;
|
|
324
326
|
ariaLabel?: string;
|